Skip to content

Commit

Permalink
wip: add radar chart with placeholder info
Browse files Browse the repository at this point in the history
  • Loading branch information
ab-smith committed May 13, 2024
1 parent c4360c8 commit b5cc5bd
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 0 deletions.
80 changes: 80 additions & 0 deletions frontend/src/lib/components/Chart/RadarChart.svelte
Original file line number Diff line number Diff line change
@@ -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} />
8 changes: 8 additions & 0 deletions frontend/src/routes/(app)/analytics/+page.svelte
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit b5cc5bd

Please sign in to comment.