fix broken dom errors

intuitem · Jun 10, 2024 · 23f3b0e · 23f3b0e
1 parent 45c91dd
commit 23f3b0e
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/frontend/src/lib/components/Chart/DonutChart.svelte b/frontend/src/lib/components/Chart/DonutChart.svelte
@@ -3,7 +3,7 @@
 	import { localItems } from '$lib/utils/locales';
 	import { languageTag } from '$paraglide/runtime';
 
-	// export let name: string;
+	export let name: string;
 	export let s_label = '';
 
 	export let width = 'w-auto';
@@ -20,10 +20,10 @@
 		}
 	}
 
-	let chart_element: HTMLElement | null = null;
+	const chart_id = `${name}_div`;
 	onMount(async () => {
 		const echarts = await import('echarts');
-		let chart = echarts.init(chart_element, null, { renderer: 'svg' });
+		let chart = echarts.init(document.getElementById(chart_id), null, { renderer: 'svg' });
 
 		// specify chart configuration item and data
 		let option = {
@@ -93,4 +93,4 @@
 	});
 </script>
 
-<div class="{width} {height} {classesContainer}" bind:this={chart_element} />
+<div id={chart_id} class="{width} {height} {classesContainer}" />
diff --git a/frontend/src/lib/components/Chart/RadarChart.svelte b/frontend/src/lib/components/Chart/RadarChart.svelte
@@ -10,6 +10,7 @@
 	export let height = 'h-full';
 	export let classesContainer = '';
 	export let title = '';
+	export let name = '';
 
 	export let values: any[]; // Set the types for these variables later on
 	export let labels: any[];
@@ -20,10 +21,10 @@
 		}
 	}
 
-	let chart_element: HTMLElement | null = null;
+	const chart_id = `${name}_div`;
 	onMount(async () => {
 		const echarts = await import('echarts');
-		let chart = echarts.init(chart_element, null, { renderer: 'svg' });
+		let chart = echarts.init(document.getElementById(chart_id), null, { renderer: 'svg' });
 
 		// specify chart configuration item and data
 		let option = {
@@ -38,9 +39,6 @@
 			tooltip: {
 				trigger: 'item'
 			},
-			legend: {
-				data: ['Allocated Budget', 'Actual Spending']
-			},
 			radar: {
 				shape: 'circle',
 				indicator: labels
@@ -70,4 +68,4 @@
 	});
 </script>
 
-<div class="{width} {height} {classesContainer}" bind:this={chart_element} />
+<div id={chart_id} class="{width} {height} {classesContainer}"  />
diff --git a/frontend/src/routes/(app)/analytics/+page.svelte b/frontend/src/routes/(app)/analytics/+page.svelte
@@ -200,6 +200,7 @@
 						/>
 						<DonutChart
 							classesContainer="flex-1 card p-4 bg-white"
+							name="riskScenariosStatus"
 							title={m.riskScenariosStatus()}
 							values={data.riskScenariosPerStatus.values}
 						/>
@@ -283,6 +284,7 @@
 
 							<DonutChart
 								s_label={cur_rsk_label}
+								name="current_risk_level"
 								values={data.risks_count_per_level.current}
 								colors={data.risks_count_per_level.current.map((object) => object.color)}
 							/>
@@ -292,6 +294,7 @@
 
 							<DonutChart
 								s_label={rsd_rsk_label}
+								name="residual_risk_level"
 								values={data.risks_count_per_level.residual}
 								colors={data.risks_count_per_level.residual.map((object) => object.color)}
 							/>
@@ -364,6 +367,7 @@
 									<div class="w-3/5 h-32">
 										<DonutChart
 											s_label={m.complianceAssessments()}
+											name="complianceAssessments"
 											values={compliance_assessment.donut.values}
 										/>
 									</div>

diff --git a/frontend/src/routes/(app)/analytics/composer/+page.svelte b/frontend/src/routes/(app)/analytics/composer/+page.svelte
@@ -51,7 +51,7 @@
 				<div>
 					<div class="items-center justify-center h-96">
 						<BarChart
-							name="mtg"
+							name="composer"
 							labels={data.applied_control_status.labels}
 							values={data.applied_control_status.values}
 						/>

diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte
@@ -184,6 +184,7 @@
 		<div class="w-1/2">
 			<DonutChart
 				s_label={m.complianceAssessments()}
+				name="compliance_assessment"
 				values={compliance_assessment_donut_values.values}
 				colors={compliance_assessment_donut_values.values.map((object) => object.itemStyle.color)}
 			/>