Added count for Project and Mode and fix Pie chart (#531)

* Added project and model count and improve pie chart * remove image
Be-Secure · Jan 12, 2024 · 8b2ca07 · 8b2ca07
1 parent 859a614
commit 8b2ca07
Show file tree

Hide file tree

Showing 7 changed files with 332 additions and 224 deletions.
diff --git a/src/assets/theme/index.tsx b/src/assets/theme/index.tsx
@@ -1,4 +1,3 @@
-
 import { createTheme } from "@mui/material/styles";
 // import Fade from "@mui/material/Fade";
 
@@ -77,16 +76,16 @@ export default createTheme({
     hexToRgb,
     linearGradient,
     pxToRem,
-    rgba,
+    rgba
   },
 
   components: {
     MuiCssBaseline: {
       styleOverrides: {
         ...globals,
         ...flatpickr,
-        ...container,
-      },
+        ...container
+      }
     },
     MuiList: { ...list },
     MuiListItem: { ...listItem },
@@ -135,6 +134,6 @@ export default createTheme({
     MuiDialogTitle: { ...dialogTitle },
     MuiDialogContent: { ...dialogContent },
     MuiDialogContentText: { ...dialogContentText },
-    MuiDialogActions: { ...dialogActions },
-  },
+    MuiDialogActions: { ...dialogActions }
+  }
 } as any);
diff --git a/src/examples/Charts/PieChart/Languages/index.tsx b/src/examples/Charts/PieChart/Languages/index.tsx
@@ -2,13 +2,12 @@ import * as React from "react";
 
 import Card from "@mui/material/Card";
 
-import { StyledChartWrapper } from "../StyledChartWrapper";
 import ReactApexChart from "react-apexcharts";
 import { useTheme } from "@mui/material/styles";
 import useChart from "../useChart";
 import MKBox from "../../../../components/MKBox";
-import MKTypography from "../../../../components/MKTypography";
 import { fNumber } from "../../../../utils/formatNumber";
+import { Typography } from "@mui/material";
 
 function Language({ title, chartColors, chartData }: any) {
   const theme = useTheme();
@@ -21,44 +20,43 @@ function Language({ title, chartColors, chartData }: any) {
     colors: chartColors,
     labels: chartLabels,
     stroke: { colors: [theme.palette.background.paper] },
-    legend: { floating: true, horizontalAlign: "center" },
+    legend: { position: "right", offsetY: -20 },
     dataLabels: { enabled: true, dropShadow: { enabled: false } },
     tooltip: {
       fillSeriesColor: false,
       y: {
         formatter: (seriesName: any) => fNumber(seriesName),
         title: {
-          formatter: (seriesName: any) => `${seriesName}`,
-        },
-      },
+          formatter: (seriesName: any) => `${seriesName}`
+        }
+      }
     },
     plotOptions: {
-      pie: { donut: { labels: { show: false } } },
-    },
+      pie: { donut: { labels: { show: false } } }
+    }
   });
 
   return (
-    <Card sx={{ height: "100%" }}>
-      <MKBox>
-        <MKBox pt={1} pb={1} px={1}>
-          <MKTypography
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            variant="h5"
-            textTransform="capitalize"
-          >
-            {title}
-          </MKTypography>
-          <StyledChartWrapper dir="ltr">
-            <ReactApexChart
-              type="pie"
-              series={chartSeries}
-              options={chartOptions}
-              height={260}
-            />
-          </StyledChartWrapper>
-        </MKBox>
+    <Card>
+      <MKBox pt={1} pb={1} px={1}>
+        <Typography
+          display="flex"
+          justifyContent="left"
+          alignItems="left"
+          color="black"
+          fontSize="20px"
+          variant="h6"
+          pl={2}
+          textTransform="capitalize"
+        >
+          {title}
+        </Typography>
+        <ReactApexChart
+          type="pie"
+          series={chartSeries}
+          options={chartOptions}
+          height={195}
+        />
       </MKBox>
     </Card>
   );

diff --git a/src/examples/Charts/PieChart/StyledChartWrapper.tsx b/src/examples/Charts/PieChart/StyledChartWrapper.tsx
@@ -1,20 +1,20 @@
 import { styled } from "@mui/material/styles";
 
-const CHART_HEIGHT = 312;
-const LEGEND_HEIGHT = 72;
+const CHART_HEIGHT = 270;
+const LEGEND_HEIGHT = 50;
 
 export const StyledChartWrapper = styled("div")(({ theme }: any) => ({
   height: CHART_HEIGHT,
   // marginTop: theme.spacing(2),
   "& .apexcharts-canvas svg": { height: CHART_HEIGHT },
-  "& .apexcharts-canvas svg,.apexcharts-canvas foreignObject": {
-    overflow: "visible",
-  },
-  "& .apexcharts-legend": {
-    height: LEGEND_HEIGHT,
-    alignContent: "center",
-    position: "relative !important",
-    borderTop: `solid 1px ${theme.palette.divider}`,
-    top: `calc(${CHART_HEIGHT - LEGEND_HEIGHT}px) !important`,
-  },
+  // "& .apexcharts-canvas svg,.apexcharts-canvas foreignObject": {
+  //   overflow: "visible",
+  // },
+  // "& .apexcharts-legend": {
+  //   height: LEGEND_HEIGHT,
+  //   alignContent: "center",
+  //   position: "relative !important",
+  //   borderTop: `solid 1px ${theme.palette.divider}`,
+  //   top: `calc(${CHART_HEIGHT - LEGEND_HEIGHT}px) !important`,
+  // },
 }));
diff --git a/src/examples/Charts/PieChart/TecStacks/index.tsx b/src/examples/Charts/PieChart/TecStacks/index.tsx
@@ -2,14 +2,12 @@ import * as React from "react";
 
 import Card from "@mui/material/Card";
 
-
 import { useTheme } from "@mui/material/styles";
 import ReactApexChart from "react-apexcharts";
 import useChart from "../useChart";
 import { fNumber } from "../../../../utils/formatNumber";
-import { StyledChartWrapper } from "../StyledChartWrapper";
 import MKBox from "../../../../components/MKBox";
-import MKTypography from "../../../../components/MKTypography";
+import { Typography } from "@mui/material";
 
 function TecStack({ title, chartColors, chartData }: any) {
   const theme = useTheme();
@@ -22,42 +20,43 @@ function TecStack({ title, chartColors, chartData }: any) {
     colors: chartColors,
     labels: chartLabels,
     stroke: { colors: [theme.palette.background.paper] },
-    legend: { floating: true, horizontalAlign: "center" },
+    legend: { position: "right", offsetY: -20 },
     dataLabels: { enabled: true, dropShadow: { enabled: false } },
     tooltip: {
       fillSeriesColor: false,
       y: {
         formatter: (seriesName: any) => fNumber(seriesName),
         title: {
-          formatter: (seriesName: any) => `${seriesName}`,
-        },
-      },
+          formatter: (seriesName: any) => `${seriesName}`
+        }
+      }
     },
     plotOptions: {
-      pie: { donut: { labels: { show: false } } },
-    },
+      pie: { donut: { labels: { show: false } } }
+    }
   });
   return (
-    <Card sx={{ height: "100%" }}>
+    <Card>
       <MKBox>
         <MKBox pt={1} pb={1} px={1}>
-          <MKTypography
+          <Typography
             display="flex"
-            justifyContent="center"
-            alignItems="center"
-            variant="h5"
+            justifyContent="left"
+            alignItems="left"
+            color="black"
+            fontSize="20px"
+            variant="h6"
             textTransform="capitalize"
+            pl={2}
           >
             {title}
-          </MKTypography>
-          <StyledChartWrapper dir="ltr">
-            <ReactApexChart
-              type="pie"
-              series={chartSeries}
-              options={chartOptions}
-              height={260}
-            />
-          </StyledChartWrapper>
+          </Typography>
+          <ReactApexChart
+            type="pie"
+            series={chartSeries}
+            options={chartOptions}
+            height={195}
+          />
         </MKBox>
       </MKBox>
     </Card>