Develop

src/apiDetailsConfig.json

@@ -13,6 +13,6 @@
         "token": ""
     },
     "activeTool": "github",
-    "version": "0.30.3",
+    "version": "0.30.4",
     "labName": "Be-Secure Community Lab"
 }

src/components/Charts/PieChart/index.tsx

@@ -1,82 +1,164 @@
-
-
 import * as React from "react";
-
 import Card from "@mui/material/Card";
-
 import ReactApexChart from "react-apexcharts";
+import ApexCharts from "apexcharts";
 import { useTheme } from "@mui/material/styles";
 import useChart from "./useChart";
 import MKBox from "../../MKBox";
-import { fNumber } from "../../../utils/formatNumber";
 import { Typography } from "@mui/material";
-import MKTypography from "../../MKTypography";
 
 function PieChart({ title, chartColors, chartData, height }: any) {
   const theme = useTheme();
+  const chartId = `${title}-chart`;
 
-  const chartLabels = chartData.map((i: { label: any }) => i.label);
-
-  const chartSeries = chartData.map((i: { value: any }) => i.value);
+  const chartLabels = chartData.map((i: any) => i.label);
+  const chartSeries = chartData.map((i: any) => i.value);
 
   const chartOptions = useChart({
+    chart: {
+      id: chartId
+    },
+
     colors: chartColors,
     labels: chartLabels,
+
+    legend: { show: false },
+
     stroke: { colors: [theme.palette.background.paper] },
-    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}`
-        }
+
+    dataLabels: {
+      enabled: true,
+      dropShadow: { enabled: false }
+    },
+
+    states: {
+      hover: {
+        filter: { type: "none" }
+      },
+      active: {
+        filter: { type: "none" }
+      },
+      inactive: {
+        opacity: 0.25
       }
     },
+
     plotOptions: {
-      pie: { donut: { labels: { show: false } } }
+      pie: {
+        customScale: 1,
+        donut: {
+          labels: { show: false }
+        }
+      }
     }
   });
 
+  const highlightSlice = (index: number) => {
+    ApexCharts.exec(chartId, "highlightSeries", index);
+  };
+
+  const resetSlice = () => {
+    ApexCharts.exec(chartId, "resetSeries");
+  };
+
   return (
-    <Card>
-      <MKBox pt={ 1 } pb={ 1 } px={ 1 }>
-        {
-          (title === "Risk Posture") ? <MKTypography
-            variant="h6"
-            fontWeight="bold"
-            color="text"
-            textTransform="capitalize"
-            style={ {
-              fontSize: "15px",
+    <Card sx={{ height: "244px", display: "flex", flexDirection: "column" }}>
+      <MKBox pt={1} pb={1} px={1} sx={{ flex: 1 }}>
+
+        {/* TITLE */}
+        <Typography color="black" fontSize="20px" variant="h6" pl={2}>
+          {title}
+        </Typography>
+
+        <MKBox
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            height: height ?? 195
+          }}
+        >
+
+          {/* PIE CHART */}
+          <MKBox
+            sx={{
+              width: "60%",
               display: "flex",
-              position: "relative",
-              left: "-44px",
-              placeContent: "center",
-            } }
+              justifyContent: "center"
+            }}
           >
-            { title }
-          </MKTypography> : <Typography
-            display="flex"
-            justifyContent="left"
-            alignItems="left"
-            color="black"
-            fontSize="20px"
-            variant="h6"
-            pl={ 2 }
-            textTransform="capitalize"
+            <ReactApexChart
+              type="pie"
+              series={chartSeries}
+              options={chartOptions}
+              height={height ?? 195}
+            />
+          </MKBox>
+
+          {/* LEGEND */}
+          <MKBox
+            sx={{
+              width: "40%",
+              maxHeight: (height ?? 185) - 5,
+              overflowY: "auto",
+              pl: 2,
+              pr: 1,
+              pb: 1.5
+            }}
           >
-            { title }
-          </Typography>
-        }
+            {chartLabels.map((label: string, index: number) => (
+              <MKBox
+                key={index}
+                onMouseEnter={() => highlightSlice(index)}
+                onMouseLeave={resetSlice}
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  mb: 1.3,
+                  fontSize: "14px",
+                  cursor: "pointer",
+                  color: "#444",
+
+                  "& .legend-text": {
+                    display: "block",
+                    maxWidth: "110px",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    transition: "all 0.25s ease"
+                  },
+
+                  "&:hover .legend-text": {
+                    whiteSpace: "normal",
+                    overflow: "visible",
+                    textOverflow: "unset",
+                    maxWidth: "100%"
+                  }
+                }}
+              >
+
+                {/* COLOR DOT */}
+                <MKBox
+                  sx={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: "50%",
+                    backgroundColor: chartColors[index],
+                    flexShrink: 0
+                  }}
+                />
+
+                {/* LEGEND TEXT */}
+                <span className="legend-text">
+                  {label}
+                </span>
+
+              </MKBox>
+            ))}
+          </MKBox>
+
+        </MKBox>
 
-        <ReactApexChart
-          type="pie"
-          series={ chartSeries }
-          options={ chartOptions }
-          height={ height ?? 195 }
-        />
       </MKBox>
     </Card>
   );

src/pages/ModelOfInterest/index.tsx

@@ -86,9 +86,9 @@ function ModelOfInterest() {
 
   return (
     <>
-      <DefaultNavbar routes={ routes } sticky />
+      <DefaultNavbar routes={routes} sticky />
 
-      <MKBox pt={ 10 } sx={ { mx: { xs: 2, lg: 3 } } }>
+      <MKBox pt={10} sx={{ mx: { xs: 2, lg: 3 } }}>
         <MKTypography variant="h3" color="black">
           Models of Interest
         </MKTypography>
@@ -99,7 +99,7 @@ function ModelOfInterest() {
           paddingTop="2px"
           fontSize="18px"
           width="100%"
-          style={ { fontWeight: "lighter" } }
+          style={{ fontWeight: "lighter" }}
         // fontWeight="lighter"
         >
           Gain visibility into vulnerabilities and security gaps within popular
@@ -110,61 +110,62 @@ function ModelOfInterest() {
           open source machine learning.
         </MKTypography>
       </MKBox>
-      <MKBox pt={ 1 } sx={ { mx: { xs: 2, lg: 3 } } }>
-        <Grid container spacing={ 3 }>
-          <Grid item xs={ 12 } sm={ 12 } md={ 12 } lg={ 12 } xl={ 4 }>
+      <MKBox pt={1} sx={{ mx: { xs: 2, lg: 3 } }}>
+        <Grid container spacing={1}>
+          <Grid item xs={12} sm={12} md={12} lg={12} xl={4}>
             <ProjectCount
               title="models tracked"
-              total={ report.length }
+              total={report.length}
               color="success"
               icon={
                 <img
-                  style={ { width: "140px", top: "58px", position: "absolute" } }
+                  style={{ width: "140px", top: "58px", position: "absolute" }}
                   alt="icon"
-                  src={ networkIcon }
+                  src={networkIcon}
                 />
               }
-              sx={ { width: "100%", height: "244px" } }
+              sx={{ width: "100%", height: "244px" }}
             />
           </Grid>
-          <Grid item xs={ 12 } sm={ 12 } md={ 12 } lg={ 12 } xl={ 4 }>
+          <Grid item xs={12} sm={12} md={12} lg={12} xl={4}>
             <PieChart
               title="Model Type"
-              chartData={ modelType }
-              chartColors={ [
+              chartData={modelType}
+              chartColors={[
                 theme.palette.primary.main,
                 theme.palette.info.main,
                 theme.palette.warning.main,
                 theme.palette.error.main,
                 theme.palette.success.main,
                 theme.palette.secondary.main
-              ] }
+              ]}
             />
           </Grid>
-          <Grid item xs={ 12 } sm={ 12 } md={ 12 } lg={ 12 } xl={ 4 }>
+          <Grid item xs={12} sm={12} md={12} lg={12} xl={4}>
             <PieChart
               title="Risk Analysis"
-              chartData={ riskAnalysis }
-              chartColors={ [
+              chartData={riskAnalysis}
+              chartColors={[
                 theme.palette.primary.main,
                 theme.palette.info.main,
                 theme.palette.warning.main,
                 theme.palette.error.main,
                 theme.palette.success.main,
-                theme.palette.secondary.main
-              ] }
+                theme.palette.secondary.main,
+                theme.palette.secondary.dark
+              ]}
             />
           </Grid>
         </Grid>
       </MKBox>
       <ScrollableTabsButtonVisibleML
-        filter={ filterData }
-        setFilter={ setFilterData }
+        filter={filterData}
+        setFilter={setFilterData}
       />
-      <MKBox pt={ 2 } sx={ { mx: { xs: 2, lg: 3 } } }>
+      <MKBox pt={2} sx={{ mx: { xs: 2, lg: 3 } }}>
         <Card>
           <MKBox>
-            <ModelDisplay selectedFilter={ filterData } />
+            <ModelDisplay selectedFilter={filterData} />
           </MKBox>
         </Card>
       </MKBox>