feat: grafico de pizza

feat-scaling-ticket-remote-creation
willian-pessoa 2024-03-27 17:52:20 -03:00
parent 9f040ce953
commit 1a7077feaf
2 changed files with 147 additions and 12 deletions

View File

@ -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

View File

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