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),
@ -497,11 +498,18 @@ const Dashboard = () => {
</Grid> </Grid>
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12}> <Grid item container spacing={3}>
<Grid item xs={12} sm={12} md={6} lg={6}>
<Paper className={classes.fixedHeightPaper} variant="outlined"> <Paper className={classes.fixedHeightPaper} variant="outlined">
<Chart allTickets={usersOnlineInfo} /> <Chart allTickets={usersOnlineInfo} />
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12} sm={12} md={6} lg={6}>
<Paper className={classes.fixedHeightPaper} variant="outlined">
<PieChart data={[]} />
</Paper>
</Grid>
</Grid>
</Grid> </Grid>
</Paper> </Paper>
<Paper className={classes.containerPaperFix} style={{ marginTop: "21px" }} sx={12}> <Paper className={classes.containerPaperFix} style={{ marginTop: "21px" }} sx={12}>