diff --git a/frontend/src/pages/Dashboard/PieChart.js b/frontend/src/pages/Dashboard/PieChart.js index 7a69fd7..b1b6c46 100644 --- a/frontend/src/pages/Dashboard/PieChart.js +++ b/frontend/src/pages/Dashboard/PieChart.js @@ -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,9 +67,36 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, cou */ const PieChart = ({ data = dataExample }) => { return ( - - - Tickets encerramento + + + + Tickets encerramento + + + + + {data.map((entry, index) => ( + + ))} + + + + { 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 }) => { ) })} - - - - - {data.map((entry, index) => ( - - ))} - - - - );