feat: add colors for score displaying

intuitem · Apr 16, 2024 · db0d6d3 · db0d6d3
1 parent 429c8e9
commit db0d6d3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git a/frontend/src/lib/components/Forms/Score.svelte b/frontend/src/lib/components/Forms/Score.svelte
@@ -4,6 +4,7 @@
 	import { RangeSlider } from '@skeletonlabs/skeleton';
 	import * as m from '$paraglide/messages';
 	import type { AnyZodObject } from 'zod';
+	import { displayScoreColor } from '$lib/utils/helpers';
 
 	export let label: string | undefined = undefined;
 	export let field: string;
@@ -67,7 +68,7 @@
 		</div>
 		<div class="flex w-1/2 items-center justify-center">
 			{#if scoringEnabled}
-				<ProgressRadial stroke={100} value={preventNull($value)} font={100} width={'w-32'}>{displayNoValue($value)}</ProgressRadial>
+				<ProgressRadial stroke={100} meter={displayScoreColor($value, max_score)} value={preventNull($value)} font={100} width={'w-32'}>{displayNoValue($value)}</ProgressRadial>
 			{:else}
 				<ProgressRadial stroke={100} value={0} font={100} width={'w-32'}>--</ProgressRadial>
 			{/if}

diff --git a/frontend/src/lib/utils/helpers.ts b/frontend/src/lib/utils/helpers.ts
@@ -1,4 +1,4 @@
-export function formatStringToDate(inputString: string,locale: string="en") {
+export function formatStringToDate(inputString: string, locale: string="en") {
 	const date = new Date(inputString);
 	return date.toLocaleDateString(locale, {
 		year: 'numeric',
@@ -23,4 +23,18 @@ export function getRequirementTitle(ref_id: string, name: string) {
 		pattern == 2 ? ref_id :
 		pattern == 1 ? name : '';
 	return title;
+}
+
+export function displayScoreColor(value: number, max_score: number){
+	value = value * 100 / max_score
+	if(value < 25){
+		return 'stroke-red-500'
+	}
+	if(value < 50){
+		return 'stroke-orange-500'
+	}
+	if(value < 75){
+		return 'stroke-yellow-500'
+	}
+	return 'stroke-green-500'
 }
diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte
@@ -90,6 +90,7 @@
 
 	import { ProgressRadial, localStorageStore } from '@skeletonlabs/skeleton';
 	import type { Writable } from 'svelte/store';
+	import { displayScoreColor } from '$lib/utils/helpers';
 
 	const expandedNodesState: Writable<any> = localStorageStore('expandedNodes', expandedNodes, {
 		storage: 'session'
@@ -161,7 +162,7 @@
 		</div>
 		{#if data.global_score.score >= 0}
 			<div class="flex items-center cursor-pointer">
-				<ProgressRadial stroke={100} font={150} value={data.global_score.score * 100 / data.global_score.max_score} width={'w-52'}>{data.global_score.score}</ProgressRadial>
+				<ProgressRadial stroke={100} meter={displayScoreColor(data.global_score.score, data.global_score.max_score)} font={125} value={data.global_score.score * 100 / data.global_score.max_score} width={'w-52'}>{data.global_score.score}</ProgressRadial>
 			</div>
 		{/if}
 		<div class="w-1/2">

diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemLead.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemLead.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { displayScoreColor } from '$lib/utils/helpers';
 	import { localItems } from '$lib/utils/locales';
 	import { languageTag } from '$paraglide/runtime';
 	import { ProgressRadial } from '@skeletonlabs/skeleton';
@@ -17,13 +18,13 @@
 
 {#if assessable}
 <div class="flex flex-row space-x-2 items-center">
+	<span class="badge {classesText} h-fit" style="background-color: {statusColor};">
+		{lead}
+	</span>
 	{#if score !== null}
 		<span>
-			<ProgressRadial stroke={100} font={150} value={score * 100 / max_score} width={'w-12'}>{score}</ProgressRadial>
+			<ProgressRadial stroke={100} meter={displayScoreColor(score, max_score)} font={150} value={score * 100 / max_score} width={'w-10'}>{score}</ProgressRadial>
 		</span>
 	{/if}
-	<span class="badge {classesText} h-fit" style="background-color: {statusColor};">
-		{lead}
-	</span>
 </div>
 {/if}