feat: grafico de pizza

frontend/src/pages/Dashboard/PieChart.js

@@ -0,0 +1,127 @@
+import { Box } from '@material-ui/core';
+import React from 'react';
+import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+import { PieChart as RechartsPieChart, Pie, Sector, Cell, ResponsiveContainer } from 'recharts';
+
+import Title from './Title';
+
+const dataExample = [
+  {
+    "id": 3366,
+    "name": "FINALIZADO",
+    "count": 5
+  },
+  {
+    "id": 3369,
+    "name": "LEMBRETE",
+    "count": 1
+  },
+  {
+    "id": 3367,
+    "name": "EXEMPLO",
+    "count": 3
+  },
+  {
+    "id": 3364,
+    "name": "EXEMPLO 2",
+    "count": 3
+  },
+  {
+    "id": 3364,
+    "name": "EXEMPLO 3",
+    "count": 6
+  },
+]
+
+const COLORS = [
+  '#0088FE', // Azul escuro
+  '#00C49F', // Verde menta
+  '#FFBB28', // Laranja escuro
+  '#FF8042', // Vermelho escuro
+  '#9D38BD', // Roxo escuro
+  '#FFD166', // Laranja claro
+  '#331F00', // Marrom escuro
+  '#C0FFC0', // Verde Claro
+  '#C4E538', // Verde-amarelo vibrante
+  '#A2A2A2', // Cinza claro
+];;
+
+const RADIAN = Math.PI / 180;
+
+const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, count }) => {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.75;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+  return (
+    <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
+      {count}
+    </text>
+  );
+};
+
+/**
+ * @param data array de objetos no formato 
+ * {
+    "id": number | string,
+    "name": string,
+    "count": number
+ * }
+ */
+const PieChart = ({ data = dataExample }) => {
+  return (
+    <Box width="100%" height="100%" position="relative" display="flex">
+      <Box sx={{ position: "absolute" }}>
+        <Title>Tickets Status</Title>
+      </Box>
+      <Box
+        component="ul"
+        sx={{
+          position: "absolute",
+          top: 0, right: 0,
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px"
+        }}>
+        {data.map((entry, index) => {
+          return (
+            <Box
+              component="li"
+              key={entry.id}
+              sx={{
+                display: "flex", gap: "2px",
+                color: COLORS[index % COLORS.length],
+                alignItems: "center"
+              }}>
+              <FiberManualRecordIcon fill={COLORS[index % COLORS.length]} />
+              <text style={{ color: 'black' }}>{entry.name}</text>
+            </Box>
+          )
+        })}
+      </Box>
+      <Box width="100%" height="100%" alignSelf="flex-end">
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsPieChart width={400} height={400}>
+            <Pie
+              data={data}
+              cx="40%"
+              cy="60%"
+              labelLine={false}
+              label={renderCustomizedLabel}
+              outerRadius={100}
+              fill="#8884d8"
+              dataKey="count"
+            >
+              {data.map((entry, index) => (
+                <Cell key={`cell-${entry.id}`} fill={COLORS[index % COLORS.length]} />
+              ))}
+            </Pie>
+          </RechartsPieChart>
+        </ResponsiveContainer>
+      </Box>
+    </Box >
+  );
+
+}
+
+export default PieChart

frontend/src/pages/Dashboard/index.js

@@ -15,6 +15,7 @@ import Info from "@material-ui/icons/Info"
 import { AuthContext } from "../../context/Auth/AuthContext"
 // import { i18n } from "../../translate/i18n";
 import Chart from "./Chart"
+import PieChart from "./PieChart"
 import openSocket from "socket.io-client"
 import api from "../../services/api"
 
@@ -31,7 +32,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     overflow: "auto",
     flexDirection: "column",
-    height: 240,
+    height: 280,
   },
   customFixedHeightPaper: {
     padding: theme.spacing(2),
@@ -108,7 +109,7 @@ const useStyles = makeStyles((theme) => ({
 
 var _fifo
 
-const sumOnlineTimeNow = (oldOnlineTimeSum) => { 
+const sumOnlineTimeNow = (oldOnlineTimeSum) => {
 
   let onlineTime = new Date()
 
@@ -138,7 +139,7 @@ const sumOnlineTimeNow = (oldOnlineTimeSum) => {
 
   const isoDate = new Date(onlineTime)
 
-  const newOnlinetime = isoDate.toJSON().slice(0, 19).replace('T', ' ') 
+  const newOnlinetime = isoDate.toJSON().slice(0, 19).replace('T', ' ')
 
   return newOnlinetime
 }
@@ -207,9 +208,9 @@ const reducer = (state, action) => {
 
       if ("onlineTime" in onlineUser) {
 
-        if ("sumOnlineTime" in state[index]) {  
+        if ("sumOnlineTime" in state[index]) {
 
-          state[index].sumOnlineTime.sum = onlineUser.onlineTime.split(" ")[1] 
+          state[index].sumOnlineTime.sum = onlineUser.onlineTime.split(" ")[1]
 
         } else if (!("sumOnlineTime" in state[index])) {
 
@@ -283,7 +284,7 @@ const Dashboard = () => {
         try {
           let date = new Date().toLocaleDateString("pt-BR").split("/")
           let dateToday = `${date[2]}-${date[1]}-${date[0]}`
-          
+
           const { data } = await api.get("/reports/user/services", {
             params: { userId: null, startDate: dateToday, endDate: dateToday },
           })
@@ -319,7 +320,7 @@ const Dashboard = () => {
         if (usersOnlineInfo[i].statusOnline && usersOnlineInfo[i].statusOnline.status === 'online') {
 
           let onlineTimeCurrent = sumOnlineTimeNow({ onlineTime: usersOnlineInfo[i].statusOnline.onlineTime, updatedAt: usersOnlineInfo[i].statusOnline.updatedAt })
-   
+
           dispatch({ type: "UPDATE_STATUS_ONLINE", payload: { userId: usersOnlineInfo[i].id, status: usersOnlineInfo[i].statusOnline.status, onlineTime: onlineTimeCurrent } })
 
         }
@@ -356,7 +357,7 @@ const Dashboard = () => {
     })
 
     socket.on("onlineStatus", (data) => {
-      if (data.action === "logout" || data.action === "update") { 
+      if (data.action === "logout" || data.action === "update") {
 
         dispatch({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime })
       } else if (data.action === "delete") {
@@ -497,10 +498,17 @@ const Dashboard = () => {
                     </Grid>
                   </Paper>
                 </Grid>
-                <Grid item xs={12}>
+                <Grid item container spacing={3}>
-                  <Paper className={classes.fixedHeightPaper} variant="outlined">
+                  <Grid item xs={12} sm={12} md={6} lg={6}>
-                    <Chart allTickets={usersOnlineInfo} />
+                    <Paper className={classes.fixedHeightPaper} variant="outlined">
-                  </Paper>
+                      <Chart allTickets={usersOnlineInfo} />
+                    </Paper>
+                  </Grid>
+                  <Grid item xs={12} sm={12} md={6} lg={6}>
+                    <Paper className={classes.fixedHeightPaper} variant="outlined">
+                      <PieChart data={[]} />
+                    </Paper>
+                  </Grid>
                 </Grid>
               </Grid>
             </Paper>