From 1ce126b5456f66178d5d204135c8c2bf2a5388e4 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 26 Apr 2024 16:42:34 +0200
Subject: [PATCH] feat: add node score

---
 .../[id=uuid]/+page.svelte                    |  6 ++-
 .../[id=uuid]/TreeViewItemContent.svelte      | 49 ++++++++++++++-----
 .../compliance-assessments/[id=uuid]/types.ts |  1 +
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte
index b9a0f9f887..fac3723761 100644
--- a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte
@@ -39,6 +39,10 @@
 		if (node.status && node.assessable) {
 			statusCounts[node.status] = (statusCounts[node.status] || 0) + 1;
 		}
+		if (node.score && node.assessable && node.status !== 'not_applicable') {
+			statusCounts['scored'] = (statusCounts['scored'] || 0) + 1;
+			statusCounts['total_score'] = (statusCounts['total_score'] || 0) + node.score;
+		}
 
 		if (node.children && Object.keys(node.children).length > 0) {
 			for (const childId in node.children) {
@@ -160,7 +164,7 @@
 			{/each}
 		</div>
 		{#if data.global_score.score >= 0}
-			<div class="flex items-center cursor-pointer">
+			<div class="flex items-center">
 				<ProgressRadial
 					stroke={100}
 					meter={displayScoreColor(data.global_score.score, data.global_score.max_score)}
diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte
index 9c873b258a..e0f0dc7d22 100644
--- a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte
+++ b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte
@@ -3,6 +3,8 @@
 	import { page } from '$app/stores';
 	import type { z } from 'zod';
 	import type { ReferenceControlSchema, ThreatSchema } from '$lib/utils/schemas';
+	import { ProgressRadial } from '@skeletonlabs/skeleton';
+	import { displayScoreColor, formatScoreValue } from '$lib/utils/helpers';
 
 	export let ref_id: string;
 	export let name: string;
@@ -15,6 +17,7 @@
 	export let status: string | undefined = undefined;
 	export let statusCounts: Record<string, number> | undefined;
 	export let assessable: boolean;
+	export let max_score: number;
 
 	const node = {
 		ref_id,
@@ -26,6 +29,7 @@
 		children,
 		canEditRequirementAssessment,
 		status,
+		max_score,
 		statusCounts,
 		assessable,
 		...$$restProps
@@ -86,6 +90,12 @@
 		}
 	);
 
+	function nodeScore(): number {
+		if (!statusCounts) return -1;
+		let mean = statusCounts['total_score'] / statusCounts['scored'];
+		return Math.floor(mean * 10) / 10;
+	}
+
 	$: classesShowInfo = (show: boolean) => (!show ? 'hidden' : '');
 	$: classesShowInfoText = (show: boolean) => (show ? 'text-primary-500' : '');
 	$: classesPercentText = (statusColor: string) => (statusColor === '#000000' ? 'text-white' : '');
@@ -197,19 +207,32 @@
 		{/if}
 	</div>
 	{#if hasAssessableChildren}
-		<div class="flex max-w-96 grow bg-gray-200 rounded-full overflow-hidden h-4 shrink self-center">
-			{#each orderedStatusPercentages as sp}
-				<div
-					class="flex flex-col justify-center overflow-hidden text-xs text-center {classesPercentText(
-						complianceColorMap[sp.status]
-					)}"
-					style="width: {sp.percentage.value}%; background-color: {complianceColorMap[sp.status]}"
-				>
-					{#if sp.status !== 'to_do'}
-						{sp.percentage.display}%
-					{/if}
-				</div>
-			{/each}
+		<div class="flex max-w-96 grow items-center space-x-2">
+			<div class="flex max-w-96 grow bg-gray-200 rounded-full overflow-hidden h-4 shrink self-center">
+				{#each orderedStatusPercentages as sp}
+					<div
+						class="flex flex-col justify-center overflow-hidden text-xs text-center {classesPercentText(
+							complianceColorMap[sp.status]
+						)}"
+						style="width: {sp.percentage.value}%; background-color: {complianceColorMap[sp.status]}"
+					>
+						{#if sp.status !== 'to_do'}
+							{sp.percentage.display}%
+						{/if}
+					</div>
+				{/each}
+			</div>
+			{#if nodeScore() >= 0}
+				<span>
+					<ProgressRadial
+						stroke={100}
+						meter={displayScoreColor(nodeScore(), node.max_score)}
+						font={150}
+						value={formatScoreValue(nodeScore(), node.max_score)}
+						width={'w-10'}>{nodeScore()}</ProgressRadial
+					>
+				</span>
+			{/if}
 		</div>
 	{/if}
 </div>
diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/types.ts b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/types.ts
index b4d98dc894..f56aec8765 100644
--- a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/types.ts
+++ b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/types.ts
@@ -8,4 +8,5 @@ export interface Node {
 	style: string;
 	children?: Record<string, Node>;
 	status?: string; // Assuming that the status field exists in nodes similar to leaves
+	score?: number; // Assuming that the score field exists in nodes similar to leaves
 }