JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.0/dayjs.min.js"></script>
JavaScript
//All of this is too replicate your api response
/* const dates = ['Apr 14th, 2022', 'Apr 14th, 2022', 'Apr 12th, 2022', 'Apr 12th, 2022', 'Apr 11th, 2022'] */
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
const months31 = [0, 2, 4, 6, 7, 9, 11]
const months30 = [3, 5, 8, 10]
//the GET for the API
let dates = [];
for(i = 0; i<5000; i++) {
const random = Math.floor(Math.random() * 12)
const month = months[random];
//I know all days don't have
let random2;
if(months31.includes(random))
random2 = 31
else if(months30.includes(random))
random2 = 30
else
random2 = 28
const day = Math.floor(Math.random() * random2 + 1);
let abbreviation = 'th'
if(day % 10 === 1)
abbreviation = 'st'
else if(day % 10 === 2)
abbreviation = 'nd'
else if(day % 10 === 3)
abbreviation = 'rd'
const year = Math.floor(Math.random() * 5 + 2018)
const timeInString = `${month} ${day}${abbreviation}, ${year}`;
if(moment(moment(timeInString, 'MMM Do YYYY')).isSameOrAfter(moment())) {
i--
continue
}
dates.push(timeInString)
}
//This is where we get to the code relevant to displaying a bar chart
const fourteenDaysAgo = moment().subtract(14, 'days')
let barChartArray = new Array(14).fill(0);
console.log(barChartArray)
dates.forEach((date) => {
const dateAsMoment = moment(date, 'MMM Do, YYYY')
const DateIsInFourteenDayRange = moment(dateAsMoment).isAfter(fourteenDaysAgo, 'day')
if(DateIsInFourteenDayRange) {
//initalizes a new moment that start at the beginning of the day
//checks the differences in days between now and that date
//uses that difference to populat the barChartArray
const index = moment().startOf('day').diff(dateAsMoment, 'days')
barChartArray[index]++
}
})
console.log(barChartArray)