Fix title for Vulnerabilities and Risk Posture

src/apiDetailsConfig.json

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

src/components/Charts/BarChart/VulHistory/index.tsx

@@ -5,12 +5,13 @@ import ReactApexChart from "react-apexcharts";
 import { useTheme } from "@mui/material/styles";
 import useChart from "../useChart";
 import MKBox from "../../../../components/MKBox";
+import MKTypography from "../../../MKTypography";
 
-function VulHistory({ vuldata }: any) {
+function VulHistory({ vuldata, title }: any) {
   const theme = useTheme();
   const chartLabels = vuldata.map((i: { label: any }) => i.label);
   const chartData = vuldata.map((i: { value: any }) => i.value);
-  const chartSeries = [{ name: "series-1", data: chartData }];
+  const chartSeries = [{ name: `CVEs Reported`, data: chartData }];
 
   const chartOptions = useChart({
     xaxis: {
@@ -82,6 +83,21 @@ function VulHistory({ vuldata }: any) {
     <Card style={ { height: "100%" } }>
       <MKBox>
         <MKBox pt={ 1 } pb={ 1 } px={ 1 }>
+          {
+            (title === "Known Vulnerabilities") ? <MKTypography
+              variant="h6"
+              fontWeight="bold"
+              color="text"
+              textTransform="capitalize"
+              style={ {
+                fontSize: "15px",
+                display: "flex",
+                placeContent: "center",
+              } }
+            >
+              { title }
+            </MKTypography> : <></>
+          }
           <ReactApexChart
             type="bar"
             series={ chartSeries }

src/components/Charts/PieChart/index.tsx

@@ -1,5 +1,5 @@
 
- 
+
 import * as React from "react";
 
 import Card from "@mui/material/Card";
@@ -10,6 +10,7 @@ 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();
@@ -41,23 +42,40 @@ function PieChart({ title, chartColors, chartData, height }: any) {
   return (
     <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>
+        {
+          (title === "Risk Posture") ? <MKTypography
+            variant="h6"
+            fontWeight="bold"
+            color="text"
+            textTransform="capitalize"
+            style={ {
+              fontSize: "15px",
+              display: "flex",
+              position: "relative",
+              left: "-44px",
+              placeContent: "center",
+            } }
+          >
+            { title }
+          </MKTypography> : <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={ height??195 }
+          height={ height ?? 195 }
         />
       </MKBox>
     </Card>

src/pages/BesVersionHistory/AssessmentAnalytics/index.tsx

@@ -122,7 +122,6 @@ const FetchData = ({
   if (report === "Risk Posture") {
     if (severityData.length !== 0) {
       return (
-
         <PieChart
           title={ title }
           chartData={ severityData }
@@ -134,9 +133,8 @@ const FetchData = ({
             theme.palette.success.main,
             theme.palette.secondary.main
           ] }
-          height={ 218 }
+          height={ 232 }
         />
-
       );
     } else {
       return (
@@ -158,12 +156,10 @@ const FetchData = ({
         </Card>
       );
     }
-  }
-
-  else if (report === "Vulnerability History") {
+  } else if (report === "Known Vulnerabilities") {
     if (vulHistoryData.length !== 0) {
       return (
-        <VulHistory vuldata={ vulHistoryData } />
+        <VulHistory vuldata={ vulHistoryData } title={ report } />
       );
     } else {
       return (
@@ -198,14 +194,12 @@ function AssessmentAnalytics({
 }: any) {
   const report: string[] = [
     "Risk Posture",
-    "Vulnerability History"
-    // "Critical Issues"
+    "Known Vulnerabilities"
   ];
   return (
     <Grid container pt={ 2 } spacing={ 1 } style={ { display: "flex", justifyContent: "space-between" } }>
-      { /* <Grid container spacing={1} pt={2} style={{ display: "flex", justifyContent: "space-around" }}> */ }
 
-      { report.map((value, index) => {
+      { report.map((value) => {
         return (
 
           <Grid item xs={ 12 } md={ 6 }