From 15c53f81329e5a8b71e2ce68c03321e42a81a6b3 Mon Sep 17 00:00:00 2001
From: Mats Johansen <mats.johansen@dkfz-heidelberg.de>
Date: Mon, 16 Oct 2023 15:01:43 +0200
Subject: [PATCH] feat(chart): add grouping to charts

---
 packages/demo/src/AppCCP.svelte               |  1 +
 .../results/ChartComponent.wc.svelte          | 29 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
index f381371..2f7ef13 100644
--- a/packages/demo/src/AppCCP.svelte
+++ b/packages/demo/src/AppCCP.svelte
@@ -229,6 +229,7 @@
           catalogueGroupCode="age_at_diagnosis"
           chartType="bar"
           clickToAddState={true}
+          groupRange={10}
         />
       </div>
       <div class="chart-wrapper">
diff --git a/packages/lib/src/components/results/ChartComponent.wc.svelte b/packages/lib/src/components/results/ChartComponent.wc.svelte
index 17d8260..07eef51 100644
--- a/packages/lib/src/components/results/ChartComponent.wc.svelte
+++ b/packages/lib/src/components/results/ChartComponent.wc.svelte
@@ -6,6 +6,7 @@
             backgroundColor: { type: "Array" },
             backgroundHoverColor: { type: "Array" },
             perSite: { type: "Boolean" },
+            groupRange: { type: "Number" },
         },
     }}
 />
@@ -26,6 +27,7 @@
     import { catalogueKeyToResponseKeyMap } from "../../stores/mappings";
     import type { ResponseStore } from "../../types/backend";
     import type { Site } from "../../types/response";
+    import { parse } from "svelte/compiler";
 
     export let title: string = ""; // e.g. 'Gender Distribution'
     export let catalogueGroupCode: string = ""; // e.g. "gender"
@@ -39,6 +41,7 @@
     export let displayLegends: boolean = false;
     export let chartType: keyof ChartTypeRegistry = "pie";
     export let perSite: boolean = false;
+    export let groupRange: number | null = null;
 
     export let backgroundColor: string[] = [
         "#4dc9f6",
@@ -179,9 +182,33 @@
         }
 
         chartLabels.sort(customSort);
+        
+        /**
+         * remove labels and their corresponding data if the label is an empty string or null
+        */
+        chartLabels = chartLabels.filter((label) => label !== "" && label !== null);
+                
 
-        chart.data.labels = chartLabels;
         chart.data.datasets = getChartDataSets(responseStore, chartLabels);
+        
+        /**
+         * lets the user define a range for the labels when only single values are used eg. '60' -> '60 - 69'
+        */
+        if(groupRange !== null){
+            chartLabels = chartLabels.map((label) => 
+                {
+                    /**
+                     * check if label doesn't parse to a number
+                    */
+                    if(isNaN(parseInt(label)))
+                        return label;
+
+                    return `${parseInt(label)} - ${(parseInt(label) + groupRange)}`
+                }
+            );
+        }
+
+        chart.data.labels = chartLabels;
         chart.update();
     };