whaticket-community/frontend/src/pages/Dashboard/Chart.js

import React, { useState, useEffect } from "react";
import { useTheme } from "@material-ui/core/styles";
import {
	BarChart,
	CartesianGrid,
	Bar,
	XAxis,
	YAxis,
	Label,
	ResponsiveContainer,
} from "recharts";
import { startOfHour, parseISO, format } from "date-fns";

import Title from "./Title";
import api from "../../services/api";

const Chart = () => {
	const theme = useTheme();

	const [tickets, setTickets] = useState([]);
	const [chartData, setChartData] = useState([
		{ time: "08:00", amount: 0 },
		{ time: "09:00", amount: 0 },
		{ time: "10:00", amount: 0 },
		{ time: "11:00", amount: 0 },
		{ time: "12:00", amount: 0 },
		{ time: "13:00", amount: 0 },
		{ time: "14:00", amount: 0 },
		{ time: "15:00", amount: 0 },
		{ time: "16:00", amount: 0 },
		{ time: "17:00", amount: 0 },
		{ time: "18:00", amount: 0 },
		{ time: "19:00", amount: 0 },
	]);

	useEffect(() => {
		const feathTickets = async () => {
			try {
				const { data } = await api.get("/tickets", {
					params: { date: new Date().toISOString() },
				});
				const ticketsData = data.tickets;
				setTickets(ticketsData);
				setChartData(prevState => {
					let aux = [...prevState];

					aux.map(a => {
						ticketsData.forEach(ticket => {
							if (
								format(startOfHour(parseISO(ticket.createdAt)), "HH:mm") ===
								a.time
							) {
								return a.amount++;
							} else {
								return a;
							}
						});
						return a;
					});

					return aux;
				});
			} catch (err) {
				console.log(err);
			}
		};
		feathTickets();
	}, []);

	return (
		<React.Fragment>
			<Title>{`Tickets hoje: ${tickets.length}`}</Title>
			<ResponsiveContainer>
				<BarChart
					data={chartData}
					barSize={40}
					width={730}
					height={250}
					margin={{
						top: 16,
						right: 16,
						bottom: 0,
						left: 24,
					}}
				>
					<CartesianGrid strokeDasharray="3 3" />
					<XAxis dataKey="time" stroke={theme.palette.text.secondary} />
					<YAxis
						type="number"
						allowDecimals={false}
						stroke={theme.palette.text.secondary}
					>
						<Label
							angle={270}
							position="left"
							style={{ textAnchor: "middle", fill: theme.palette.text.primary }}
						>
							Tickets
						</Label>
					</YAxis>
					<Bar dataKey="amount" fill={theme.palette.primary.main} />
				</BarChart>
			</ResponsiveContainer>
		</React.Fragment>
	);
};

export default Chart;