feat: simple dashboard with current day tickets

frontend/src/pages/Dashboard/Chart.js

@@ -0,0 +1,109 @@
+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 res = await api.get("/tickets", {
+					params: { date: new Date().toISOString() },
+				});
+				let ticketsData = res.data;
+				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}
+					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 stroke={theme.palette.text.secondary}>
+						<Label
+							angle={270}
+							position="left"
+							style={{ textAnchor: "middle", fill: theme.palette.text.primary }}
+						>
+							Tickets
+						</Label>
+					</YAxis>
+					<Bar
+						// type="monotone"
+						dataKey="amount"
+						fill={theme.palette.primary.main}
+						// stroke={theme.palette.primary.main}
+						// dot={false}
+					/>
+				</BarChart>
+			</ResponsiveContainer>
+		</React.Fragment>
+	);
+};
+
+export default Chart;