From c7570083aeb69d935c75271b82c5fa812f87b3ad Mon Sep 17 00:00:00 2001 From: Mats Johansen Date: Thu, 26 Oct 2023 11:18:43 +0200 Subject: [PATCH 1/2] feat(chart): add legend mapping --- packages/demo/public/options.json | 55 ++++++++++-- .../results/ChartComponent.wc.svelte | 88 ++++++++++++------- 2 files changed, 105 insertions(+), 38 deletions(-) diff --git a/packages/demo/public/options.json b/packages/demo/public/options.json index 7ed9706b..90c47934 100644 --- a/packages/demo/public/options.json +++ b/packages/demo/public/options.json @@ -1,19 +1,58 @@ -{"chartOptions": - { +{ + "chartOptions": { + "patients": { + "legendMapping": { + "berlin": "Berlin", + "bonn": "Bonn", + "dresden": "Dresden", + "essen": "Essen", + "frankfurt": "Frankfurt", + "freiburg": "Freiburg", + "hannover": "Hannover", + "mainz": "Mainz", + "muenchen-lmu": "München(LMU)", + "muenchen-tum": "München(TUM)", + "ulm": "Ulm", + "wuerzburg": "Würzburg", + "mannheim": "Mannheim", + "dktk-test": "DKTK-Test", + "hamburg": "Hamburg" + } + }, + "gender": { + "legendMapping": { + "male": "Männlich", + "female": "Weiblich", + "unknown": "Unbekannt", + "other": "Divers" + } + }, "diagnosis": { - "hintText": ["Bei Patienten mit mehreren onkologischen Diagnosen werden auch Einträge angezeigt, die ggfs. nicht den ausgewählten Suchkriterien entsprechen."] + "hintText": [ + "Bei Patienten mit mehreren onkologischen Diagnosen werden auch Einträge angezeigt, die ggfs. nicht den ausgewählten Suchkriterien entsprechen." + ] }, "age_at_diagnosis": { - "hintText": ["Bei Patienten mit mehreren Erstdiagnosen werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen. "] + "hintText": [ + "Bei Patienten mit mehreren Erstdiagnosen werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen. " + ] }, "75186-7": { - "hintText": ["\"verstorben\": ein Todesdatum ist dokumentiert oder das aktuelle Lebensalter ist größer 123 Jahre.", "\"lebend\": wird angenommen, wenn kein Todesdatum dokumentiert ist oder das aktuelle Lebensalter nicht 123 Jahre überschritten hat.", "\"unbekannt\": kein Geburtsdatum oder Todesdatum bekannt."] + "hintText": [ + "\"verstorben\": ein Todesdatum ist dokumentiert oder das aktuelle Lebensalter ist größer 123 Jahre.", + "\"lebend\": wird angenommen, wenn kein Todesdatum dokumentiert ist oder das aktuelle Lebensalter nicht 123 Jahre überschritten hat.", + "\"unbekannt\": kein Geburtsdatum oder Todesdatum bekannt." + ] }, "medicationStatements": { - "hintText": ["Art der systemischen oder abwartenden Therapie (ADT Basisdatensatz Versionen 2014, 2021)"] + "hintText": [ + "Art der systemischen oder abwartenden Therapie (ADT Basisdatensatz Versionen 2014, 2021)" + ] }, "sample_kind": { - "hintText":["Verteilung der Bioprobentypen der Patienten gemäß der ausgewählten Kriterien. Es werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen."] - } + "hintText": [ + "Verteilung der Bioprobentypen der Patienten gemäß der ausgewählten Kriterien. Es werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen." + ] + } } } \ No newline at end of file diff --git a/packages/lib/src/components/results/ChartComponent.wc.svelte b/packages/lib/src/components/results/ChartComponent.wc.svelte index 0fee1ad0..b8498e6e 100644 --- a/packages/lib/src/components/results/ChartComponent.wc.svelte +++ b/packages/lib/src/components/results/ChartComponent.wc.svelte @@ -51,8 +51,11 @@ export let groupingLabel: string = ""; export let viewScales: boolean = chartType !== "pie" ? true : false; - let options: any - $: options = $lensOptions?.chartOptions && $lensOptions?.chartOptions[catalogueGroupCode] || {} + let options: any; + $: options = + ($lensOptions?.chartOptions && + $lensOptions?.chartOptions[catalogueGroupCode]) || + {}; export let backgroundColor: string[] = [ "#4dc9f6", @@ -107,43 +110,56 @@ position: "bottom", }, tooltip: { - callbacks: { - title: (context: any) => { - const key = context[0].label || ''; - let result = (tooltips.get(key)) - ? tooltips.get(key) : key; - return result - } - } - } + callbacks: { + title: (context: any) => { + const key = context[0].label || ""; + let result = tooltips.get(key) + ? tooltips.get(key) + : key; + return result; + }, + }, + }, }, scales: { y: { display: viewScales, title: { display: true, - text: yAxisTitle + text: yAxisTitle, }, }, x: { display: viewScales, title: { display: true, - text: xAxisTitle + text: xAxisTitle, }, - ticks: (chartType === "bar") ? { - callback: (val: any) => { - if(indexAxis === 'y') return val.toString() - if (typeof val === 'string') return val - const key: unknown = (initialChartData.data.labels[val]) !== undefined - ? initialChartData.data.labels[val] : val.toString(); - if (typeof key !== 'string') return val.toString() - let result = (headers.get(key)) ? headers.get(key) : key; - return result - } - } : [] - } - } + ticks: + chartType === "bar" + ? { + callback: (val: any) => { + if (indexAxis === "y") + return val.toString(); + if (typeof val === "string") return val; + const key: unknown = + initialChartData.data.labels[val] !== + undefined + ? initialChartData.data.labels[ + val + ] + : val.toString(); + if (typeof key !== "string") + return val.toString(); + let result = headers.get(key) + ? headers.get(key) + : key; + return result; + }, + } + : [], + }, + }, }, }; @@ -363,11 +379,20 @@ */ if (isNaN(parseInt(label))) return label; - return `${parseInt(label)} - ${parseInt(label) + groupRange - 1}`; + return `${parseInt(label)} - ${ + parseInt(label) + groupRange - 1 + }`; }); } - chart.data.labels = chartLabels; + /** + * set the labels of the chart + * if a legend mapping is set, use the legend mapping + */ + chart.data.labels = options.legendMapping ? chartLabels.map(label => { + console.log(label, options ) + return options.legendMapping[label] + }): chartLabels; chart.update(); }; @@ -426,7 +451,10 @@ name: `${label}`, value: { min: parseInt(label), - max: parseInt(label) + groupRange - 1, + max: + parseInt(label) + + groupRange - + 1, }, queryBindId: uuidv4(), }, @@ -477,7 +505,7 @@

{title}

{#if options.hintText} - + {/if} Date: Thu, 26 Oct 2023 11:38:35 +0200 Subject: [PATCH 2/2] fix(chart): fix label sorting --- .../src/components/results/ChartComponent.wc.svelte | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/lib/src/components/results/ChartComponent.wc.svelte b/packages/lib/src/components/results/ChartComponent.wc.svelte index b8498e6e..c087e624 100644 --- a/packages/lib/src/components/results/ChartComponent.wc.svelte +++ b/packages/lib/src/components/results/ChartComponent.wc.svelte @@ -414,10 +414,15 @@ if (a !== "unknown" && b === "unknown") { return -1; } - // Convert values to numbers for numeric comparison - const numA = parseInt(a, 10); - const numB = parseInt(b, 10); - return numA - numB; + // Convert numeric values to numbers for comparison + if(!isNaN(a) && !isNaN(b)) { + a = parseInt(a, 10); + b = parseInt(b, 10); + } + + return a > b ? 1 : -1; + + }; /**