diff --git a/frontend/src/pages/Dashboard/PieChart.js b/frontend/src/pages/Dashboard/PieChart.js
new file mode 100644
index 0000000..c250ac3
--- /dev/null
+++ b/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 (
+ cx ? 'start' : 'end'} dominantBaseline="central">
+ {count}
+
+ );
+};
+
+/**
+ * @param data array de objetos no formato
+ * {
+ "id": number | string,
+ "name": string,
+ "count": number
+ * }
+ */
+const PieChart = ({ data = dataExample }) => {
+ return (
+
+
+ Tickets Status
+
+
+ {data.map((entry, index) => {
+ return (
+
+
+ {entry.name}
+
+ )
+ })}
+
+
+
+
+
+ {data.map((entry, index) => (
+ |
+ ))}
+
+
+
+
+
+ );
+
+}
+
+export default PieChart
\ No newline at end of file
diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js
index 83d26da..ccbb674 100644
--- a/frontend/src/pages/Dashboard/index.js
+++ b/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 = () => {
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+