From b5cc5bd0e01c40140c73607255cf4f67fddea078 Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Mon, 13 May 2024 12:17:37 +0200
Subject: [PATCH] wip: add radar chart with placeholder info

---
 .../lib/components/Chart/RadarChart.svelte    | 80 +++++++++++++++++++
 .../src/routes/(app)/analytics/+page.svelte   |  8 ++
 2 files changed, 88 insertions(+)
 create mode 100644 frontend/src/lib/components/Chart/RadarChart.svelte

diff --git a/frontend/src/lib/components/Chart/RadarChart.svelte b/frontend/src/lib/components/Chart/RadarChart.svelte
new file mode 100644
index 000000000..126341236
--- /dev/null
+++ b/frontend/src/lib/components/Chart/RadarChart.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { localItems } from '$lib/utils/locales';
+	import { languageTag } from '$paraglide/runtime';
+
+	// export let name: string;
+	export let s_label = '';
+
+	export let width = 'w-auto';
+	export let height = 'h-full';
+	export let classesContainer = '';
+	export let title = '';
+
+	export let values: any[]; // Set the types for these variables later on
+	export let colors: string[] = [];
+
+	for (const index in values) {
+		if (values[index].localName) {
+			values[index].name = localItems(languageTag())[values[index].localName];
+		}
+	}
+
+	let chart_element: HTMLElement | null = null;
+	onMount(async () => {
+		const echarts = await import('echarts');
+		let chart = echarts.init(chart_element, null, { renderer: 'svg' });
+
+		// specify chart configuration item and data
+		let option = {
+			title: {
+				text: title,
+				textStyle: {
+					fontWeight: 'bold',
+					fontSize: 14
+				}
+				// show: false
+			},
+            tooltip: {
+				trigger: 'item'
+			},
+			legend: {
+				data: ['Allocated Budget', 'Actual Spending']
+			},
+			radar: {
+				//shape: 'circle',
+				indicator: [
+					{ name: 'Rogue Admin',  },
+                    { name: 'Unavailability',  },
+                    { name: 'Regulation',  },
+                    { name: 'Data Breach',  },
+                    { name: 'Phishing',  },
+                    { name: 'Ransomware',  }
+				]
+			},
+			series: [
+				{
+					name: 'Budget vs spending',
+					type: 'radar',
+					data: [
+						{
+							value: [500, 600, 700, 800, 900, 1000],
+							name: 'Current'
+						},
+					]
+				}
+			]
+		};
+
+		// console.debug(option);
+
+		// use configuration item and data specified to show chart
+		chart.setOption(option);
+
+		window.addEventListener('resize', function () {
+			chart.resize();
+		});
+	});
+</script>
+
+<div class="{width} {height} {classesContainer}" bind:this={chart_element} />
diff --git a/frontend/src/routes/(app)/analytics/+page.svelte b/frontend/src/routes/(app)/analytics/+page.svelte
index e45ab3651..8ddf8a50e 100644
--- a/frontend/src/routes/(app)/analytics/+page.svelte
+++ b/frontend/src/routes/(app)/analytics/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import DonutChart from '$lib/components/Chart/DonutChart.svelte';
+	import RadarChart from '$lib/components/Chart/RadarChart.svelte';
 
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
@@ -243,7 +244,14 @@
 					</div>
 				</section>
 			{:else if tabSet === 1}
+			<!-- Risk tab -->
 				<section>
+					<div class=" h-96 my-2">
+						<RadarChart
+							name="blalba"
+							title="Risk Radar"
+						/>
+					</div>
 					<div class="flex">
 						<div class="h-96 flex-1">
 							<span class="text-sm font-semibold">{m.currentRiskLevelPerScenario()}</span>