From 3b4cffd9dabf90730ca03ae72758fdb05f185e0f Mon Sep 17 00:00:00 2001
From: Christian Banse <christian.banse@aisec.fraunhofer.de>
Date: Tue, 24 Oct 2023 13:00:41 +0200
Subject: [PATCH] Added option to merge and unmerge manual and automatic
 results

---
 src/lib/components/ComplianceChart.svelte     | 135 +++++++++++++-----
 .../[id]/compliance/[catalogId]/+page.svelte  |   1 +
 2 files changed, 101 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/ComplianceChart.svelte b/src/lib/components/ComplianceChart.svelte
index 5394d7e..47693b1 100644
--- a/src/lib/components/ComplianceChart.svelte
+++ b/src/lib/components/ComplianceChart.svelte
@@ -2,48 +2,22 @@
   import { goto } from '$app/navigation';
   import type { ComplianceStatus } from '$lib/api/evaluation';
   import type { TargetOfEvaluation } from '$lib/api/orchestrator';
-  import { Chart, type ChartConfiguration } from 'chart.js/auto';
+  import { Chart, type ChartConfiguration, type ChartData } from 'chart.js/auto';
   import { onMount } from 'svelte';
 
   let canvas: HTMLCanvasElement;
+  let chart: Chart;
   export let compliance: Map<string, ComplianceStatus>;
   export let toe: TargetOfEvaluation;
 
-  const data = {
-    labels: [
-      'Non Compliant',
-      'Manually set to Non Compliant',
-      'Compliant',
-      'Manually set to Compliant',
-      'Waiting for Data'
-    ],
-    datasets: [
-      {
-        label: toe.catalogId,
-        data: [
-          Array.from(compliance.values()).filter(
-            (value) => value == 'EVALUATION_STATUS_NOT_COMPLIANT'
-          ).length,
-          Array.from(compliance.values()).filter(
-            (value) => value == 'EVALUATION_STATUS_NOT_COMPLIANT_MANUALLY'
-          ).length,
-          Array.from(compliance.values()).filter((value) => value == 'EVALUATION_STATUS_COMPLIANT')
-            .length,
-          Array.from(compliance.values()).filter(
-            (value) => value == 'EVALUATION_STATUS_COMPLIANT_MANUALLY'
-          ).length,
-          Array.from(compliance.values()).filter((value) => value == 'EVALUATION_STATUS_PENDING')
-            .length
-        ],
-        backgroundColor: ['#991b1b', '#991b1b', '#166534', '#166534', '#d4d4d4'],
-        hoverOffset: 4
-      }
-    ]
-  };
+  let merge = true;
 
-  const config: ChartConfiguration = {
+  $: data = buildData(merge);
+  $: updateChart(data);
+
+  let config: ChartConfiguration = {
     type: 'doughnut',
-    data: data,
+    data: buildData(merge),
     options: {
       animation: false,
       plugins: {
@@ -71,7 +45,7 @@
   };
 
   onMount(() => {
-    let chart = new Chart(canvas, config);
+    chart = new Chart(canvas, config);
 
     canvas.onclick = (evt) => {
       const res = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
@@ -89,8 +63,99 @@
       }
     };
   });
+
+  function updateChart(data: ChartData) {
+    if (chart) {
+      chart.data = data;
+      chart.update();
+    }
+  }
+
+  function buildData(merge: boolean) {
+    if (merge) {
+      return {
+        labels: ['Non Compliant', 'Compliant', 'Waiting for Data'],
+        datasets: [
+          {
+            label: toe.catalogId,
+            data: [
+              Array.from(compliance.values()).filter(
+                (value) =>
+                  value == 'EVALUATION_STATUS_NOT_COMPLIANT' ||
+                  value == 'EVALUATION_STATUS_NOT_COMPLIANT_MANUALLY'
+              ).length,
+              Array.from(compliance.values()).filter(
+                (value) =>
+                  value == 'EVALUATION_STATUS_COMPLIANT' ||
+                  value == 'EVALUATION_STATUS_COMPLIANT_MANUALLY'
+              ).length,
+              Array.from(compliance.values()).filter(
+                (value) => value == 'EVALUATION_STATUS_PENDING'
+              ).length
+            ],
+            backgroundColor: ['#991b1b', '#166534', '#d4d4d4'],
+            hoverOffset: 4
+          }
+        ]
+      };
+    } else {
+      return {
+        labels: [
+          'Non Compliant',
+          'Manually set to Non Compliant',
+          'Compliant',
+          'Manually set to Compliant',
+          'Waiting for Data'
+        ],
+        datasets: [
+          {
+            label: toe.catalogId,
+            data: [
+              Array.from(compliance.values()).filter(
+                (value) => value == 'EVALUATION_STATUS_NOT_COMPLIANT'
+              ).length,
+              Array.from(compliance.values()).filter(
+                (value) => value == 'EVALUATION_STATUS_NOT_COMPLIANT_MANUALLY'
+              ).length,
+              Array.from(compliance.values()).filter(
+                (value) => value == 'EVALUATION_STATUS_COMPLIANT'
+              ).length,
+              Array.from(compliance.values()).filter(
+                (value) => value == 'EVALUATION_STATUS_COMPLIANT_MANUALLY'
+              ).length,
+              Array.from(compliance.values()).filter(
+                (value) => value == 'EVALUATION_STATUS_PENDING'
+              ).length
+            ],
+            backgroundColor: ['#991b1b', 'rgb(185 28 28)', '#166534', 'rgb(21 128 61)', '#d4d4d4'],
+            hoverOffset: 4
+          }
+        ]
+      };
+    }
+  }
 </script>
 
 <div class="py-3">
+  <div class="relative flex items-start mb-2">
+    <div class="flex h-6 items-center">
+      <input
+        id="merge"
+        aria-describedby="merge-description"
+        name="merge"
+        type="checkbox"
+        class="h-4 w-4 rounded border-gray-300 text-clouditor focus:ring-clouditor"
+        bind:checked={merge}
+      />
+    </div>
+    <div class="ml-3 text-sm leading-6">
+      <label for="merge" class="font-medium text-gray-900">Merge manual results</label>
+      {' '}
+      <span id="merge-description" class="text-gray-500">
+        <span class="sr-only">Merge manual results </span>
+        with automatic results.
+      </span>
+    </div>
+  </div>
   <canvas id="chart" bind:this={canvas} class="h-72 w-72 ml-auto mr-auto" />
 </div>
diff --git a/src/routes/(app)/cloud/[id]/compliance/[catalogId]/+page.svelte b/src/routes/(app)/cloud/[id]/compliance/[catalogId]/+page.svelte
index 49a08c7..f66ed08 100644
--- a/src/routes/(app)/cloud/[id]/compliance/[catalogId]/+page.svelte
+++ b/src/routes/(app)/cloud/[id]/compliance/[catalogId]/+page.svelte
@@ -21,6 +21,7 @@
   const queryParamToStatus: Map<string, string> = new Map([
     ['Compliant', 'EVALUATION_STATUS_COMPLIANT'],
     ['NonCompliant', 'EVALUATION_STATUS_NOT_COMPLIANT'],
+    ['ManuallysettoNonCompliant', 'EVALUATION_STATUS_NOT_COMPLIANT_MANUALLY'],
     ['ManuallysettoCompliant', 'EVALUATION_STATUS_COMPLIANT_MANUALLY'],
     ['WaitingforData', 'EVALUATION_STATUS_PENDING']
   ]);