Merge branch 'el_lojas_melhorias' of https://github.com/AdrianoRobson/projeto-hit into el_lojas_melhorias

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 (
-    <Box width="100%" height="100%" position="relative" display="flex">
-      <Box sx={{ position: "absolute" }}>
-        <Title>Tickets encerramento</Title>
+    <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 encerramento</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"
@@ -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 >
   );