From 4d5438b04dffc8bd34dcb268c3927b8f47ddfd4b Mon Sep 17 00:00:00 2001 From: Abderrahmane Smimite Date: Tue, 24 Dec 2024 12:24:36 +0100 Subject: [PATCH 01/11] starting point --- .../Chart/EcosystemRadarChart.svelte | 73 +++++++++++++++++++ .../experimental/ecosystem/+page.svelte | 12 +++ 2 files changed, 85 insertions(+) create mode 100644 frontend/src/lib/components/Chart/EcosystemRadarChart.svelte create mode 100644 frontend/src/routes/(app)/(internal)/experimental/ecosystem/+page.svelte diff --git a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte new file mode 100644 index 000000000..f7d63e301 --- /dev/null +++ b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte @@ -0,0 +1,73 @@ + + +
diff --git a/frontend/src/routes/(app)/(internal)/experimental/ecosystem/+page.svelte b/frontend/src/routes/(app)/(internal)/experimental/ecosystem/+page.svelte new file mode 100644 index 000000000..b3c8e6d48 --- /dev/null +++ b/frontend/src/routes/(app)/(internal)/experimental/ecosystem/+page.svelte @@ -0,0 +1,12 @@ + + +
+
+ +
+
From 78d21b917ae3f89b3ffe82cf6fbef9df1264e1cd Mon Sep 17 00:00:00 2001 From: Abderrahmane Smimite Date: Tue, 24 Dec 2024 17:52:46 +0100 Subject: [PATCH 02/11] good step --- .../Chart/EcosystemRadarChart.svelte | 215 ++++++++++++++++-- 1 file changed, 197 insertions(+), 18 deletions(-) diff --git a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte index f7d63e301..717abc5e9 100644 --- a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte +++ b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte @@ -30,31 +30,210 @@ let chart = echarts.init(document.getElementById(chart_id), null, { renderer: 'svg' }); // specify chart configuration item and data - let option = { - xAxis: { - min: -axisVal, - max: axisVal, + // prettier-ignore + //14 segments + const data = { + "s1": [ + [5, 45, 5], + [4, 45, 10] + ], + "s2": [ + [1, 180, 15], + [1, 180 + 45, 10] + ], + "s3": [ + [2, 270, 5], + [1, 180 + 90, 12] + ], + "s4": [ + [1, 300, 6], + [1, 315, 20] + ], + }; + const option = { + title: { + text: 'Ecosystem' + }, + graphic: [ + { + type: 'text', + position: [chart.getWidth() / 4, (3 * chart.getHeight()) / 4], + rotation: 0, + origin: [chart.getWidth() / 2, chart.getWidth() / 2], + style: { + text: 'Prestataires', + font: '18px Arial', + fill: '#666', + textAlign: 'center', + textVerticalAlign: 'middle' + } + }, + { + type: 'text', + position: [(3 * chart.getWidth()) / 4, chart.getHeight() / 4], + rotation: 0, + origin: [chart.getWidth() / 2, chart.getWidth() / 2], + style: { + text: 'Partenaires', + font: '18px Arial', + fill: '#666', + textAlign: 'center', + textVerticalAlign: 'middle' + } + }, + { + type: 'text', + position: [chart.getWidth() / 4, chart.getHeight() / 4], + rotation: 0, + origin: [chart.getWidth() / 2, chart.getWidth() / 2], + style: { + text: 'Clients', + font: '18px Arial', + fill: '#666', + textAlign: 'center', + textVerticalAlign: 'middle' + } + } + ], + legend: { + data: ['<4', '4-5', '6-7', '>7'], + left: 'right' + }, + polar: {}, + tooltip: { + formatter: function (params) { + return params.value[2] + ' commits in '; + } + }, + angleAxis: { type: 'value', + startAngle: 315, + boundaryGap: true, + interval: 45, axisLabel: { show: false }, - axisTick: { show: false } + splitLine: { + show: true + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + alignTick: true }, - yAxis: { - min: -axisVal, - max: axisVal, + radiusAxis: { type: 'value', - axisLabel: { show: false }, - axisTick: { show: false } + max: 6, + inverse: true, + axisLabel: { show: true }, + axisLine: { + show: false + }, + axisTick: { + show: false + } }, series: [ { - symbolSize: 20, - data: [ - [3, 4], - [-3, 2], - [-3, -4], - [-2, 4] - ], - type: 'scatter' + name: '<4', + type: 'scatter', + coordinateSystem: 'polar', + symbolSize: function (val) { + return val[2] * 2; + }, + data: data.s1, + animationDelay: function (idx) { + return idx * 5; + } + }, + { + name: '4-5', + type: 'scatter', + coordinateSystem: 'polar', + symbolSize: function (val) { + return val[2] * 2; + }, + data: data.s2, + animationDelay: function (idx) { + return idx * 5; + } + }, + { + name: '6-7', + type: 'scatter', + coordinateSystem: 'polar', + symbolSize: function (val) { + return val[2] * 2; + }, + data: data.s3, + animationDelay: function (idx) { + return idx * 5; + } + }, + { + name: '>7', + type: 'scatter', + coordinateSystem: 'polar', + symbolSize: function (val) { + return val[2] * 2; + }, + data: data.s4, + animationDelay: function (idx) { + return idx * 5; + } + }, + { + name: 'Circle', + type: 'line', + coordinateSystem: 'polar', + itemStyle: { borderJoin: 'round' }, + symbol: 'none', + data: new Array(360).fill(0).map((_, index) => { + return [2.5, index]; + }), + lineStyle: { + color: '#E73E51', + width: 4 + }, + // If you don't want this to show up in the legend: + showInLegend: false, + silent: true, + zlevel: -1 + }, + { + name: 'Circle', + type: 'line', + coordinateSystem: 'polar', + symbol: 'none', + data: new Array(360).fill(0).map((_, index) => { + return [0.2, index]; + }), + lineStyle: { + color: '#00ADA8', + width: 4 + }, + // If you don't want this to show up in the legend: + showInLegend: false, + silent: true, + zlevel: -1 + }, + { + name: 'Circle', + type: 'line', + coordinateSystem: 'polar', + symbol: 'none', + data: new Array(360).fill(0).map((_, index) => { + return [0.9, index]; + }), + lineStyle: { + color: '#F8EA47', + width: 4 + }, + // If you don't want this to show up in the legend: + showInLegend: false, + silent: true, + zlevel: -1 } ] }; From e2b7cda18043e744247025649435a0a96bd99c1c Mon Sep 17 00:00:00 2001 From: Abderrahmane Smimite Date: Tue, 24 Dec 2024 18:20:07 +0100 Subject: [PATCH 03/11] data structure --- .../Chart/EcosystemRadarChart.svelte | 56 +++++++++++-------- 1 file changed, 33 insertions(+), 23 deletions(-) diff --git a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte index 717abc5e9..3089e861f 100644 --- a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte +++ b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte @@ -3,6 +3,7 @@ import { safeTranslate } from '$lib/utils/i18n'; import { show } from '$paraglide/messages/pt'; import { axis } from '@unovis/ts/components/axis/style'; + import { color } from 'echarts/core'; // export let name: string; export let s_label = ''; @@ -16,7 +17,30 @@ export let values: any[]; // Set the types for these variables later on export let labels: any[]; - const axisVal = 16; + const data = { + f1: [ + [5, 45, 5], + [4, 45, 10] + ], + f2: [ + [1, 180, 15], + [1, 180 + 45, 10] + ], + f3: [ + [2, 270, 5], + [1, 180 + 90, 12] + ], + f4: [ + [1, 300, 6], + [1, 315, 20] + ] + }; + // data format: f1-f4 (fiabilité cyber = maturité x confiance ) to get the clusters and colors + // x,y, z + // x: criticité calculée avec cap à 5,5 + // y: the angle (output of dict to make sure they end up on the right quadrant, min: 45, max:-45) + // z: the size of item (exposition = dependence x penetration) based on a dict + // for (const index in values) { if (values[index].localName) { @@ -32,24 +56,6 @@ // specify chart configuration item and data // prettier-ignore //14 segments - const data = { - "s1": [ - [5, 45, 5], - [4, 45, 10] - ], - "s2": [ - [1, 180, 15], - [1, 180 + 45, 10] - ], - "s3": [ - [2, 270, 5], - [1, 180 + 90, 12] - ], - "s4": [ - [1, 300, 6], - [1, 315, 20] - ], - }; const option = { title: { text: 'Ecosystem' @@ -137,48 +143,52 @@ series: [ { name: '<4', + color: '#E73E51', type: 'scatter', coordinateSystem: 'polar', symbolSize: function (val) { return val[2] * 2; }, - data: data.s1, + data: data.f1, animationDelay: function (idx) { return idx * 5; } }, { name: '4-5', + color: '#DE8898', type: 'scatter', coordinateSystem: 'polar', symbolSize: function (val) { return val[2] * 2; }, - data: data.s2, + data: data.f2, animationDelay: function (idx) { return idx * 5; } }, { name: '6-7', + color: '#BAD9EA', type: 'scatter', coordinateSystem: 'polar', symbolSize: function (val) { return val[2] * 2; }, - data: data.s3, + data: data.f3, animationDelay: function (idx) { return idx * 5; } }, { name: '>7', + color: '#8A8B8A', type: 'scatter', coordinateSystem: 'polar', symbolSize: function (val) { return val[2] * 2; }, - data: data.s4, + data: data.f4, animationDelay: function (idx) { return idx * 5; } From bf23b67726d67decd55d846eddf1417e4d943a10 Mon Sep 17 00:00:00 2001 From: Abderrahmane Smimite Date: Tue, 24 Dec 2024 19:42:42 +0100 Subject: [PATCH 04/11] good point --- backend/ebios_rm/views.py | 12 ++++++ .../Chart/EcosystemRadarChart.svelte | 40 +++---------------- .../experimental/ecosystem/+page.server.ts | 12 ++++++ .../experimental/ecosystem/+page.svelte | 6 +-- 4 files changed, 33 insertions(+), 37 deletions(-) create mode 100644 frontend/src/routes/(app)/(internal)/experimental/ecosystem/+page.server.ts diff --git a/backend/ebios_rm/views.py b/backend/ebios_rm/views.py index 22b37d826..2399ec0a2 100644 --- a/backend/ebios_rm/views.py +++ b/backend/ebios_rm/views.py @@ -157,6 +157,18 @@ class StakeholderViewSet(BaseModelViewSet): def category(self, request): return Response(dict(Stakeholder.Category.choices)) + @action(detail=False, name="Get chart data") + def chart_data(self, request): + data = { + "f1": [[5, 45, 5, "cool"], [4, 45, 10, "stuff"]], + "f2": [[1, 180, 15], [1, 180 + 45, 10]], + "f3": [[2, 270, 5], [1, 180 + 90, 12]], + "f4": [[1, 300, 6], [1, 315, 20]], + } + + output = data + return Response(output) + class StrategicScenarioViewSet(BaseModelViewSet): model = StrategicScenario diff --git a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte index 3089e861f..6d2a0eb7e 100644 --- a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte +++ b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte @@ -1,9 +1,6 @@ +{@debug data}
- +
From b8736fb415d163ca75aa3d8e71359c0575123b92 Mon Sep 17 00:00:00 2001 From: Abderrahmane Smimite Date: Tue, 24 Dec 2024 21:34:45 +0100 Subject: [PATCH 05/11] Current criticality chart - added to experimental --- backend/ebios_rm/views.py | 64 +++++++++++++++++-- .../Chart/EcosystemRadarChart.svelte | 14 ++-- .../(internal)/experimental/+page.svelte | 6 ++ 3 files changed, 71 insertions(+), 13 deletions(-) diff --git a/backend/ebios_rm/views.py b/backend/ebios_rm/views.py index 2399ec0a2..ea62cf38e 100644 --- a/backend/ebios_rm/views.py +++ b/backend/ebios_rm/views.py @@ -19,6 +19,8 @@ LONG_CACHE_TTL = 60 # mn +import math + class BaseModelViewSet(AbstractBaseModelViewSet): serializers_module = "ebios_rm.serializers" @@ -159,12 +161,62 @@ def category(self, request): @action(detail=False, name="Get chart data") def chart_data(self, request): - data = { - "f1": [[5, 45, 5, "cool"], [4, 45, 10, "stuff"]], - "f2": [[1, 180, 15], [1, 180 + 45, 10]], - "f3": [[2, 270, 5], [1, 180 + 90, 12]], - "f4": [[1, 300, 6], [1, 315, 20]], - } + def get_exposure_segment_id(value): + if value < 3: + return 1 + if value >= 3 and value < 7: + return 2 + if value >= 7 and value <= 9: + return 3 + if value > 9: + return 4 + return 0 + + def get_reliability_cluster(value): + if value < 4: + return "clst1" + if value >= 4 and value < 6: + return "clst2" + if value >= 6 and value <= 7: + return "clst3" + if value > 7: + return "clst4" + return 1 + + """ + // data format: f1-f4 (fiabilité cyber = maturité x confiance ) to get the clusters and colors + // x,y, z + // x: criticité calculée avec cap à 5,5 + // y: the angle (output of dict to make sure they end up on the right quadrant, min: 45, max:-45) -> done on BE + // z: the size of item (exposition = dependence x penetration) based on a dict, -> done on BE + // label: name of the 3rd party entity + Angles start at 56,25 (45+45/4) and end at -45-45/4 = 303,75 + """ + data = {"clst1": [], "clst2": [], "clst3": [], "clst4": []} + angle_offsets = {"client": 135, "partner": 180, "supplier": 45} + for sh in Stakeholder.objects.all(): + if sh.current_criticality: + c_reliability = sh.current_maturity * sh.current_trust + c_exposure = sh.current_dependency * sh.current_penetration + print(c_exposure) + print(get_exposure_segment_id(c_exposure)) + + c_exposure_val = get_exposure_segment_id(c_exposure) * 5 + + c_criticality = ( + math.floor(sh.current_criticality * 100) / 100.0 + if sh.current_criticality <= 5 + else 5.25 + ) + angle = angle_offsets[sh.category] + get_exposure_segment_id( + c_exposure + ) * (45 / 4) + + vector = [c_criticality, angle, c_exposure_val, sh.entity.name] + cluser_id = get_reliability_cluster(c_reliability) + + data[cluser_id].append(vector) + print(vector) output = data return Response(output) diff --git a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte index 6d2a0eb7e..e1b67427a 100644 --- a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte +++ b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte @@ -121,7 +121,7 @@ symbolSize: function (val) { return val[2] * 2; }, - data: data.f1, + data: data.clst1, animationDelay: function (idx) { return idx * 5; } @@ -134,7 +134,7 @@ symbolSize: function (val) { return val[2] * 2; }, - data: data.f2, + data: data.clst2, animationDelay: function (idx) { return idx * 5; } @@ -147,7 +147,7 @@ symbolSize: function (val) { return val[2] * 2; }, - data: data.f3, + data: data.clst3, animationDelay: function (idx) { return idx * 5; } @@ -160,7 +160,7 @@ symbolSize: function (val) { return val[2] * 2; }, - data: data.f4, + data: data.clst4, animationDelay: function (idx) { return idx * 5; } @@ -176,7 +176,7 @@ }), lineStyle: { color: '#E73E51', - width: 4 + width: 5 }, // If you don't want this to show up in the legend: showInLegend: false, @@ -193,7 +193,7 @@ }), lineStyle: { color: '#00ADA8', - width: 4 + width: 5 }, // If you don't want this to show up in the legend: showInLegend: false, @@ -210,7 +210,7 @@ }), lineStyle: { color: '#F8EA47', - width: 4 + width: 5 }, // If you don't want this to show up in the legend: showInLegend: false, diff --git a/frontend/src/routes/(app)/(internal)/experimental/+page.svelte b/frontend/src/routes/(app)/(internal)/experimental/+page.svelte index 751686494..22e936486 100644 --- a/frontend/src/routes/(app)/(internal)/experimental/+page.svelte +++ b/frontend/src/routes/(app)/(internal)/experimental/+page.svelte @@ -33,4 +33,10 @@ link="insights/controls-impact" tags={['analysis', 'controls']} /> +
From 9d944a9b201ebb5c6894e2e57388b14ccb7d1b18 Mon Sep 17 00:00:00 2001 From: Abderrahmane Smimite Date: Tue, 24 Dec 2024 21:49:30 +0100 Subject: [PATCH 06/11] fix offset and styling - testable on experimental for current criticality --- backend/ebios_rm/views.py | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/backend/ebios_rm/views.py b/backend/ebios_rm/views.py index ea62cf38e..5a69a0404 100644 --- a/backend/ebios_rm/views.py +++ b/backend/ebios_rm/views.py @@ -193,7 +193,7 @@ def get_reliability_cluster(value): Angles start at 56,25 (45+45/4) and end at -45-45/4 = 303,75 """ data = {"clst1": [], "clst2": [], "clst3": [], "clst4": []} - angle_offsets = {"client": 135, "partner": 180, "supplier": 45} + angle_offsets = {"client": 135, "partner": 225, "supplier": 45} for sh in Stakeholder.objects.all(): if sh.current_criticality: c_reliability = sh.current_maturity * sh.current_trust @@ -201,16 +201,17 @@ def get_reliability_cluster(value): print(c_exposure) print(get_exposure_segment_id(c_exposure)) - c_exposure_val = get_exposure_segment_id(c_exposure) * 5 + c_exposure_val = get_exposure_segment_id(c_exposure) * 4 c_criticality = ( math.floor(sh.current_criticality * 100) / 100.0 if sh.current_criticality <= 5 else 5.25 ) - angle = angle_offsets[sh.category] + get_exposure_segment_id( - c_exposure - ) * (45 / 4) + + angle = angle_offsets[sh.category] + ( + get_exposure_segment_id(c_exposure) * (45 / 4) + ) vector = [c_criticality, angle, c_exposure_val, sh.entity.name] cluser_id = get_reliability_cluster(c_reliability) From 12a0f7baaadc8ca5557c1b317362c80e22140870 Mon Sep 17 00:00:00 2001 From: Abderrahmane Smimite Date: Wed, 25 Dec 2024 10:25:20 +0100 Subject: [PATCH 07/11] Currrent and residual --- backend/ebios_rm/views.py | 67 +++++++++++++------ .../Chart/EcosystemRadarChart.svelte | 10 ++- .../experimental/ecosystem/+page.svelte | 8 ++- 3 files changed, 58 insertions(+), 27 deletions(-) diff --git a/backend/ebios_rm/views.py b/backend/ebios_rm/views.py index 5a69a0404..7f5786329 100644 --- a/backend/ebios_rm/views.py +++ b/backend/ebios_rm/views.py @@ -192,35 +192,58 @@ def get_reliability_cluster(value): // label: name of the 3rd party entity Angles start at 56,25 (45+45/4) and end at -45-45/4 = 303,75 """ - data = {"clst1": [], "clst2": [], "clst3": [], "clst4": []} + + # we can add a filter on the Stakeholder concerned by the ebios study here + qs = Stakeholder.objects.all() + + c_data = {"clst1": [], "clst2": [], "clst3": [], "clst4": []} + r_data = {"clst1": [], "clst2": [], "clst3": [], "clst4": []} angle_offsets = {"client": 135, "partner": 225, "supplier": 45} - for sh in Stakeholder.objects.all(): - if sh.current_criticality: - c_reliability = sh.current_maturity * sh.current_trust - c_exposure = sh.current_dependency * sh.current_penetration - print(c_exposure) - print(get_exposure_segment_id(c_exposure)) - c_exposure_val = get_exposure_segment_id(c_exposure) * 4 + cnt_c_not_displayed = 0 + cnt_r_not_displayed = 0 + for sh in qs: + # current + c_reliability = sh.current_maturity * sh.current_trust + c_exposure = sh.current_dependency * sh.current_penetration + c_exposure_val = get_exposure_segment_id(c_exposure) * 4 + + c_criticality = ( + math.floor(sh.current_criticality * 100) / 100.0 + if sh.current_criticality <= 5 + else 5.25 + ) + + angle = angle_offsets[sh.category] + ( + get_exposure_segment_id(c_exposure) * (45 / 4) + ) + + vector = [c_criticality, angle, c_exposure_val, str(sh)] + + cluser_id = get_reliability_cluster(c_reliability) + c_data[cluser_id].append(vector) - c_criticality = ( - math.floor(sh.current_criticality * 100) / 100.0 - if sh.current_criticality <= 5 - else 5.25 - ) + # residual + r_reliability = sh.residual_maturity * sh.residual_trust + r_exposure = sh.residual_dependency * sh.residual_penetration + r_exposure_val = get_exposure_segment_id(r_exposure) * 4 - angle = angle_offsets[sh.category] + ( - get_exposure_segment_id(c_exposure) * (45 / 4) - ) + r_criticality = ( + math.floor(sh.residual_criticality * 100) / 100.0 + if sh.residual_criticality <= 5 + else 5.25 + ) + + angle = angle_offsets[sh.category] + ( + get_exposure_segment_id(r_exposure) * (45 / 4) + ) - vector = [c_criticality, angle, c_exposure_val, sh.entity.name] - cluser_id = get_reliability_cluster(c_reliability) + vector = [r_criticality, angle, r_exposure_val, str(sh)] - data[cluser_id].append(vector) - print(vector) + cluser_id = get_reliability_cluster(r_reliability) + r_data[cluser_id].append(vector) - output = data - return Response(output) + return Response({"current": c_data, "residual": r_data}) class StrategicScenarioViewSet(BaseModelViewSet): diff --git a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte index e1b67427a..d91899a4e 100644 --- a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte +++ b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte @@ -3,7 +3,6 @@ import { safeTranslate } from '$lib/utils/i18n'; // export let name: string; - export let s_label = ''; export let width = 'w-auto'; export let height = 'h-full'; @@ -30,7 +29,7 @@ //14 segments const option = { title: { - text: 'Ecosystem' + text: title }, graphic: [ { @@ -75,7 +74,7 @@ ], legend: { data: ['<4', '4-5', '6-7', '>7'], - top: 'bottom' + top: 'top' }, polar: {}, tooltip: { @@ -232,3 +231,8 @@
+{#if data.not_displayed > 0} +
+ ⚠️ {data.not_displayed} items are not displayed as they are lacking data. +
+{/if} diff --git a/frontend/src/routes/(app)/(internal)/experimental/ecosystem/+page.svelte b/frontend/src/routes/(app)/(internal)/experimental/ecosystem/+page.svelte index 4d12b8522..d7cc6d15f 100644 --- a/frontend/src/routes/(app)/(internal)/experimental/ecosystem/+page.svelte +++ b/frontend/src/routes/(app)/(internal)/experimental/ecosystem/+page.svelte @@ -4,9 +4,13 @@ import EcosystemRadarChart from '$lib/components/Chart/EcosystemRadarChart.svelte'; -{@debug data}
- + +
From 21f9b3c5358b7d24ec24f653e1ec13efe500e88f Mon Sep 17 00:00:00 2001 From: Abderrahmane Smimite Date: Wed, 25 Dec 2024 10:32:23 +0100 Subject: [PATCH 08/11] more styling --- frontend/src/lib/components/Chart/EcosystemRadarChart.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte index d91899a4e..c2672cea8 100644 --- a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte +++ b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte @@ -1,6 +1,7 @@ From 6812a4ab78778ee8b0ef8fba5ed222c25d93d0ce Mon Sep 17 00:00:00 2001 From: Abderrahmane Smimite Date: Wed, 25 Dec 2024 12:19:47 +0100 Subject: [PATCH 11/11] component ready --- .../Chart/EcosystemRadarChart.svelte | 34 +++++++++++-------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte index cf3bca67a..df867d697 100644 --- a/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte +++ b/frontend/src/lib/components/Chart/EcosystemRadarChart.svelte @@ -2,12 +2,13 @@ import { onMount } from 'svelte'; import { safeTranslate } from '$lib/utils/i18n'; import { symbol } from 'zod'; + import { grid } from '@unovis/ts/components/axis/style'; // export let name: string; export let width = 'w-auto'; export let height = 'h-full'; - export let classesContainer = ''; + export let classesContainer = 'border'; export let title = ''; export let name = ''; export let data; @@ -25,15 +26,20 @@ const echarts = await import('echarts'); let chart = echarts.init(document.getElementById(chart_id), null, { renderer: 'svg' }); const getGraphicElements = (chart) => { + const chartWidth = chart.getWidth(); + const chartHeight = chart.getHeight(); + const centerX = chartWidth / 2; + const centerY = chartHeight / 2; + return [ + // Existing text elements { type: 'text', - position: [chart.getWidth() / 4, (3 * chart.getHeight()) / 4], - rotation: 0, - origin: [chart.getWidth() / 2, chart.getWidth() / 2], + position: [chartWidth / 4, (3 * chartHeight) / 4], + silent: true, style: { text: 'Prestataires', - font: '14px', + font: '18px Arial', fill: '#666', textAlign: 'center', textVerticalAlign: 'middle' @@ -41,12 +47,11 @@ }, { type: 'text', - position: [(3 * chart.getWidth()) / 4, chart.getHeight() / 4], - rotation: 0, - origin: [chart.getWidth() / 2, chart.getWidth() / 2], + position: [(3 * chartWidth) / 4, chartHeight / 4], + silent: true, style: { text: 'Partenaires', - font: '14px', + font: '18px Arial', fill: '#666', textAlign: 'center', textVerticalAlign: 'middle' @@ -54,12 +59,11 @@ }, { type: 'text', - position: [chart.getWidth() / 4, chart.getHeight() / 4], - rotation: 0, - origin: [chart.getWidth() / 2, chart.getWidth() / 2], + position: [chartWidth / 4, chartHeight / 4], + silent: true, style: { text: 'Clients', - font: '14px', + font: '18px Arial', fill: '#666', textAlign: 'center', textVerticalAlign: 'middle' @@ -75,12 +79,12 @@ graphic: getGraphicElements(chart), legend: { data: ['<4', '4-5', '6-7', '>7'], - top: 'top' + top: 60 }, polar: {}, tooltip: { formatter: function (params) { - return params.value[3]; + return params.value[3] + '
Criticality: ' + params.value[0]; } }, angleAxis: {