Refactored VulnerabilityBarChart to show severity level in the order …

…of criticality (CRASM-783) (#690)

* Refactored to include objects in mappedData array, and sorting from Null to Critical

* removed hardcoded test values

* removed console log

* changed from Null to null to match the DMZ

* Refactored Severity Levels Bar Graph x-axis

- Added filtering and sorting logic to ensure the following:
-- Incoming Severity Level data is formatted into Type Case.
-- null values are placed in their own category.
-- Values containing special characters are placed in the 'Other' category.
-- The label 'Other' is recognized as a special case and is always placed at the end of the x-axis.

- Added 'Other' category and the color blue to getSeverityColor util function.
- Ensured those colors are used on the x-axis of the Severity Levels Bar Graph.

* Removed console.log

* Added logic for additional severity labels.

* Cleaned up logic

- Reduced the number of loops in the code.
- Removed unnecessary code.
- Edited color of "Other" bar in the bar chart.
- null bar is now labeled "N/A"

---------

Co-authored-by: Thomas <[email protected]>

frontend/src/pages/Risk/VulnerabilityBarChart.tsx

@@ -73,18 +73,52 @@ const VulnerabilityBarChart = (props: {
     </>
   );
 
-  // Map data to BarData structure
-  const mappedData: BarData[] = data.map((d) => ({
-    id: d.id,
-    value: d.value
-  }));
-
-  // Sort the data to ensure "Low", "Medium", and "High" appear in the desired order
-  const sortedData = [...mappedData].sort((a, b) => {
-    const order = ['Low', 'Medium', 'High'];
-    return order.indexOf(a.id) - order.indexOf(b.id);
+  // Place null values in "N/A" and capitalize the first letter of each word in the data.
+  const titleCaseData: BarData[] = data.map((d) => {
+    if (d.id === 'null') {
+      return { id: 'N/A', value: d.value };
+    } else {
+      return {
+        id: d.id[0].toUpperCase() + d.id.slice(1).toLowerCase(),
+        value: d.value
+      };
+    }
   });
 
+  // Group the data by severity level and "Other". Sum the values for each group.
+  const groupedData = titleCaseData
+    .map((d) => {
+      const severityLevels = [
+        'N/A',
+        'Low',
+        'Medium',
+        'High',
+        'Critical',
+        'Other'
+      ];
+      if (severityLevels.includes(d.id)) {
+        return d;
+      } else {
+        return { id: 'Other', value: d.value };
+      }
+    })
+    .reduce((acc: { [key: string]: number }, curr) => {
+      if (acc[curr.id]) {
+        acc[curr.id] += curr.value;
+      } else {
+        acc[curr.id] = curr.value;
+      }
+      return acc;
+    }, {});
+
+  // Sort the data to ensure "N/A", "Low", "Medium", "High", and "Critical" appear in the desired order
+  const sortedData = Object.entries(groupedData)
+    .map(([id, value]) => ({ id, value }))
+    .sort((a, b) => {
+      const order = ['N/A', 'Low', 'Medium', 'High', 'Critical', 'Other'];
+      return order.indexOf(a.id) - order.indexOf(b.id);
+    });
+
   useEffect(() => {
     const label =
       `${title} bar chart. ` +
@@ -105,7 +139,12 @@ const VulnerabilityBarChart = (props: {
     const severityColor = getSeverityColor({ id: indexValue });
     const serviceColor = getServicesColor({ id: indexValue });
     const color =
-      indexValue === 'Low' || indexValue === 'Medium' || indexValue === 'High'
+      indexValue === 'N/A' ||
+      indexValue === 'Low' ||
+      indexValue === 'Medium' ||
+      indexValue === 'High' ||
+      indexValue === 'Critical' ||
+      indexValue === 'Other'
         ? severityColor
         : serviceColor;
     return color;

frontend/src/pages/Risk/utils.ts

@@ -13,10 +13,11 @@ export const getAllVulnColor = () => {
   return '#ce80ed';
 };
 export const getSeverityColor = ({ id }: { id: string }) => {
-  if (id === 'null' || id === '') return '#EFF1F5';
+  if (id === 'N/A' || id === '') return '#EFF1F5';
   else if (id === 'Low') return '#ffe100';
   else if (id === 'Medium') return '#f66e1f';
   else if (id === 'High') return '#ed240e';
+  else if (id === 'Other') return '#6BA7F5';
   else return '#540C03';
 };
 export const getCVSSColor = (score: number) => {