Compare commits

..

No commits in common. "024c6920af90f9870d84832869e34b458c4e9cb8" and "7df322d1ab115f6a252c11fe52dc14c9f476a51e" have entirely different histories.

1 changed files with 54 additions and 61 deletions

View File

@ -1,24 +1,37 @@
import { Box } from '@material-ui/core'; import { Box } from '@material-ui/core';
import React from 'react'; import React from 'react';
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts'; import { PieChart as RechartsPieChart, Pie, Sector, Cell, ResponsiveContainer } from 'recharts';
import Title from './Title'; import Title from './Title';
const generateDataExample = (amount) => { const dataExample = [
const arr = [] {
for (let i = 1; i <= amount; i++) { "id": 3366,
arr.push({ "name": "FINALIZADO",
"id": i, "count": 5
"name": `Exemplo ${i}`, },
"count": Math.floor(Math.random() * 10 + 2) {
}) "id": 3369,
} "name": "LEMBRETE",
"count": 1
return arr },
} {
"id": 3367,
const dataExample = generateDataExample(20) "name": "EXEMPLO",
"count": 3
},
{
"id": 3364,
"name": "EXEMPLO 2",
"count": 3
},
{
"id": 3364,
"name": "EXEMPLO 3",
"count": 6
},
]
const COLORS = [ const COLORS = [
'#0088FE', // Azul escuro '#0088FE', // Azul escuro
@ -31,22 +44,12 @@ const COLORS = [
'#C0FFC0', // Verde Claro '#C0FFC0', // Verde Claro
'#C4E538', // Verde-amarelo vibrante '#C4E538', // Verde-amarelo vibrante
'#A2A2A2', // Cinza claro '#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 RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, count }) => { const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, count }) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.80; const radius = innerRadius + (outerRadius - innerRadius) * 0.75;
const x = cx + radius * Math.cos(-midAngle * RADIAN); const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN); const y = cy + radius * Math.sin(-midAngle * RADIAN);
@ -67,37 +70,10 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, cou
*/ */
const PieChart = ({ data = dataExample }) => { const PieChart = ({ data = dataExample }) => {
return ( return (
<Box <Box width="100%" height="100%" position="relative" display="flex">
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" }}> <Box sx={{ position: "absolute" }}>
<Title>Tickets encerramento</Title> <Title>Tickets encerramento</Title>
</Box> </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 <Box
component="ul" component="ul"
sx={{ sx={{
@ -105,10 +81,7 @@ const PieChart = ({ data = dataExample }) => {
top: 0, right: 0, top: 0, right: 0,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: "4px", gap: "4px"
maxWidth: "60%",
minWidth: "50%",
zIndex: 0,
}}> }}>
{data.map((entry, index) => { {data.map((entry, index) => {
return ( return (
@ -126,6 +99,26 @@ const PieChart = ({ data = dataExample }) => {
) )
})} })}
</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 > </Box >
); );