adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: grafico pizza, melhorias responsividade

feat-scaling-ticket-remote-creation
willian-pessoa 2024-04-02 17:11:54 -03:00
parent b05cd7d1d6
commit d827e72b7c
1 changed files with 61 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/src/pages/Dashboard/PieChart.js
View File

@ -1,37 +1,24 @@
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 { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip } 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 generateDataExample = (amount) => {
const arr = []
for (let i = 1; i <= amount; i++) {
arr.push({
"id": i,
"name": `Exemplo ${i}`,
"count": Math.floor(Math.random() * 10 + 2)
})
}
return arr
}
const dataExample = generateDataExample(20)
const COLORS = [
'#0088FE', // Azul escuro
@ -44,12 +31,22 @@ const COLORS = [
'#C0FFC0', // Verde Claro
'#C4E538', // Verde-amarelo vibrante
'#A2A2A2', // Cinza claro
];;
'#FFF700', // Amarelo Canário
'#FF69B4', // Rosa Flamingo
'#87CEEB', // Azul Celeste
'#228B22', // Verde Esmeralda
'#9B59B6', // Roxo Ametista
'#FF9933', // Laranja Tangerina
'#FF7F50', // Coral Vivo
'#00CED1', // Verde Água
'#000080', // Azul Marinho
'#FFDB58', // Amarelo Mostarda
];
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, count }) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.75;
const radius = innerRadius + (outerRadius - innerRadius) * 0.80;
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
@ -70,10 +67,37 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, cou
*/
const PieChart = ({ data = dataExample }) => {
return (
<Box width="100%" height="100%" position="relative" display="flex">
<Box
width="100%"
height="100%"
position="relative"
display="flex"
sx={{ overflowY: "scroll" }}
>
<Box width="100%" height="100%" position="sticky" top="0" zIndex={1000}>
<Box sx={{ position: "absolute" }}>
<Title>Tickets Status</Title>
</Box>
<ResponsiveContainer width="100%" height="100%">
<RechartsPieChart width={400} height={400}>
<Pie
data={data}
cx="25%"
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>
<Tooltip />
</RechartsPieChart>
</ResponsiveContainer>
</Box>
<Box
component="ul"
sx={{
@ -81,7 +105,10 @@ const PieChart = ({ data = dataExample }) => {
top: 0, right: 0,
display: "flex",
flexDirection: "column",
gap: "4px"
gap: "4px",
maxWidth: "60%",
minWidth: "50%",
zIndex: 0,
}}>
{data.map((entry, index) => {
return (
@ -99,26 +126,6 @@ const PieChart = ({ data = dataExample }) => {
)
})}
</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 >
);