Ft add pie chart

src/App.js

@@ -11,7 +11,7 @@ import Contacts from './scenes/Contacts';
 import Bar from './scenes/Bar';
 import Form from './scenes/Form';
 // import Line from './scenes/Line';
-// import Pie from './scenes/Pie';
+import Pie from './scenes/Pie';
 import FAQ from './scenes/FAQ';
 // import Geograph from './scenes/Geograph';
 import Calendar from './scenes/Calendar';
@@ -33,8 +33,8 @@ function App() {
               <Route path="/invoices" element={<Invoices />} />
               <Route path="/form" element={<Form />} />
               <Route path="/bar" element={<Bar />} />
-              {/* <Route path="/pie" element={<Pie />} />
-              <Route path="/line" element={<Line />} />
+              <Route path="/pie" element={<Pie />} />
+              {/* <Route path="/line" element={<Line />} />
             <Route path="/geograph" element={<Geograph />} /> */}
               <Route path="/faq" element={<FAQ />} />
               <Route path="/calendar" element={<Calendar />} />

src/components/Shared/PieChart/index.jsx

@@ -0,0 +1,129 @@
+import { useTheme } from '@mui/material';
+import { ResponsivePie } from '@nivo/pie';
+import PropTypes from 'prop-types';
+import { tokens } from '../../../theme';
+
+const PieChart = ({ data }) => {
+  const theme = useTheme();
+  const colors = tokens(theme.palette.mode);
+
+  return (
+    <ResponsivePie
+      data={data}
+      theme={{
+        axis: {
+          domain: {
+            line: {
+              stroke: colors.grey[100],
+            },
+          },
+          legend: {
+            text: {
+              fill: colors.grey[100],
+            },
+          },
+          ticks: {
+            line: {
+              stroke: colors.grey[100],
+              strokeWidth: 1,
+            },
+            text: {
+              fill: colors.grey[100],
+            },
+          },
+        },
+        legends: {
+          text: {
+            fill: colors.grey[100],
+          },
+        },
+      }}
+      margin={{
+        top: 40, right: 80, bottom: 80, left: 80,
+      }}
+      innerRadius={0.5}
+      padAngle={0.7}
+      cornerRadius={3}
+      activeOuterRadiusOffset={8}
+      borderWidth={1}
+      borderColor={{
+        from: 'color',
+        modifiers: [
+          [
+            'darker',
+            0.2,
+          ],
+        ],
+      }}
+      arcLinkLabelsSkipAngle={10}
+      arcLinkLabelsTextColor={colors.grey[100]}
+      arcLinkLabelsThickness={2}
+      arcLinkLabelsColor={{ from: 'color' }}
+      arcLabelsSkipAngle={10}
+      arcLabelsTextColor={{
+        from: 'color',
+        modifiers: [
+          [
+            'darker',
+            2,
+          ],
+        ],
+      }}
+      defs={
+        [
+          {
+            id: 'dots',
+            type: 'patternDots',
+            background: 'inherit',
+            color: 'rgba(255, 255, 255, 0.3)',
+            size: 4,
+            padding: 1,
+            stagger: true,
+          },
+          {
+            id: 'lines',
+            type: 'patternLines',
+            background: 'inherit',
+            color: 'rgba(255, 255, 255, 0.3)',
+            rotation: -45,
+            lineWidth: 6,
+            spacing: 10,
+          },
+        ]
+      }
+      legends={
+        [
+          {
+            anchor: 'bottom',
+            direction: 'row',
+            justify: false,
+            translateX: 0,
+            translateY: 56,
+            itemsSpacing: 0,
+            itemWidth: 100,
+            itemHeight: 18,
+            itemTextColor: '#999',
+            itemDirection: 'left-to-right',
+            itemOpacity: 1,
+            symbolSize: 18,
+            symbolShape: 'circle',
+            effects: [
+              {
+                on: 'hover',
+                style: {
+                  itemTextColor: '#000',
+                },
+              },
+            ],
+          },
+        ]
+      }
+    />
+  );
+};
+
+PieChart.propTypes = {
+  data: PropTypes.oneOfType(['object']).isRequired,
+};
+
+export default PieChart;

src/scenes/Pie/index.jsx

@@ -0,0 +1,15 @@
+import { Box } from '@mui/material';
+import Header from '../../components/Shared/Header/Header';
+import PieChart from '../../components/Shared/PieChart';
+import { mockPieData as data } from '../../data/mockData';
+
+const Pie = () => (
+  <Box m="20px">
+    <Header title="Pie Chart" subTitle="Customized Simple Pie Chart" />
+    <Box height="75vh">
+      <PieChart data={data} />
+    </Box>
+  </Box>
+);
+
+export default Pie;