react-progressbar-chart/src/MultibarChart.js

This is a progress bar chart to show last 24 hour data

import React, { useState, useEffect } from 'react';
import moment from 'moment';
import { Progress, Bar } from './index'

const BarChart = (props) => {
    const [allKey, setAllkeys] = useState([]);
    const [progressArray, setProgressArray] = useState([]);
    useEffect(() => {
        setAllkeys(props['hour_status'] ? Object.keys(props['hour_status']).sort((a, b) => a > b ? 1 : a < b ? -1 : 0) : [])
    }, [props['hour_status']])

    useEffect(() => {
        if (allKey)
            manageRecprd()
    }, [allKey])

    const manageRecprd = () => {
        console.log("hour_status1",)
        let progressArray = [];
        allKey.map((datetime, index) => {
            let last24Hours = moment(new Date()).add(-24, 'hours').format("YYYY-MM-DD HH:mm")
            let currentTime = moment(new Date())
            var a = moment(datetime, "YYYY-MM-DD HH:mm");
            var startTime = moment(last24Hours, "YYYY-MM-DD HH:mm");
            let createDate = ""
            if (props.create_datetime) {
                createDate = moment(props.create_datetime, "YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DD HH:mm:ss");
            }
            if (last24Hours < datetime) {  // date is less then 24 hours
                if (allKey[index - 1]) { //if value is before current time if not then this is first record
                    if (last24Hours > allKey[index - 1]) {
                        let count = a.diff(startTime, 'seconds')
                        progressArray[0] = {
                            count: count > 240 ? count : 240,
                            value: props['hour_status'][datetime] === "UP" ? "DOWN" : "UP",
                            key: "2"
                        }
                    } else {
                        let count = a.diff(moment(allKey[index - 1], "YYYY-MM-DD HH:mm"), 'seconds')
                        progressArray.push({
                            count: count > 240 ? count : 240,
                            value: props['hour_status'][datetime] === "UP" ? "DOWN" : "UP",
                            key: "3"
                        })
                    }
                } else {
                    let count = a.diff(startTime, 'seconds')
                    progressArray = []


                    if (createDate > last24Hours) {
                        progressArray.push({
                            count: count > 240 ? count : 240,
                            value: "No data",
                            key: "4"
                        })
                    } else {
                        progressArray.push({
                            count: count > 240 ? count : 240,
                            value: props['hour_status'][datetime] === "UP" ? "DOWN" : "UP",
                            key: "4"
                        })
                    }
                }

                if (allKey.length - 1 === index) {

                    let count1 = currentTime.diff(a, 'seconds')
                    progressArray.push({
                        count: count1 > 240 ? count1 : 240,
                        value: props['hour_status'][datetime],
                        key: "5"
                    })
                }
            } else {
                progressArray[0] = {
                    count: 24 * 60 * 60,
                    value: props['hour_status'][datetime],
                    key: "1"
                }
            }
        })
        setProgressArray(progressArray)
    }
    console.log("progressArray", progressArray)
    return (
        <div>
            {Array.isArray(progressArray) && <Progress>
                {progressArray.map((data, index) => {
                    return 
                        <Bar value={((data.count * 100) / (60 * 60 * 24))} color={data.value === "No data"?"":data.value === "UP" ? "#28a745" : "#dc3545"} >10%</Bar>
                } )}
            </Progress>}
        </div>
    );
}

export default BarChart