function WaitTimeGraph()

in agora/store_queue_monitoring_frontend/src/src/components/graphs/WaitTimeGraph.tsx [120:188]
67 lines of code
1 McCabe index (conditional complexity)

function WaitTimeGraph(props: WaitTimeGraphProps) {
    const [aggregatedCheckoutHistory, setAggregatedCheckoutHistory] = useState<AggregatedDataItem[]>([]);

    useEffect(() => {
        const agg = aggregateData(props.checkoutHistory);
        setAggregatedCheckoutHistory(agg);
    }, [props.checkoutHistory]);

    return (
        <ResponsiveContainer width="99%" height="99%">
            <LineChart
                data={aggregatedCheckoutHistory}
                margin={{ top: 0, right: 20, bottom: -10, left: -15 }}
                className="bg-secondary"
            >
                <CartesianGrid strokeDasharray="0" vertical={false} horizAdvX={1} />
                <XAxis
                    dataKey="timestamp"
                    tickFormatter={formatXAxis}
                    height={40}
                    tick={{ dy: 10, fontWeight: "400", fontSize: "0.75rem", fill: "#FFF" }}
                    interval={59}
                />
                <YAxis
                    yAxisId="left"
                    tick={{ fontWeight: "400", fontSize: "0.75rem", fill: "#FFF" }}
                    domain={[0, "auto"]}
                >
                    <Label
                        value="Wait Time (mins)"
                        angle={-90}
                        position="insideLeft"
                        offset={25}
                        style={{ fontWeight: "500", fontSize: "0.75rem", fill: "#FFF", textAnchor: "middle" }}
                    />
                </YAxis>
                <Tooltip content={<CustomTooltip />} />
                <Legend iconSize={0} wrapperStyle={{ fontSize: "0.8rem" }} />
                <Line
                    yAxisId="left"
                    name="Standard"
                    type="monotone"
                    dataKey="standardCheckoutWaitTime"
                    isAnimationActive={false}
                    stroke="#BB80ff"
                    dot={false}
                />
                <Line
                    yAxisId="left"
                    name="Express"
                    type="monotone"
                    dataKey="expressCheckoutWaitTime"
                    isAnimationActive={false}
                    stroke="#f5f73e"
                    dot={false}
                />
                <Line
                    yAxisId="left"
                    name="Self Service"
                    type="monotone"
                    dataKey="selfCheckoutWaitTime"
                    isAnimationActive={false}
                    stroke="#2be6e6"
                    dot={false}
                />{" "}
            </LineChart>
        </ResponsiveContainer>
    );
}