Merge branch 'develop'

samply · Oct 16, 2023 · 1df7ecf · 1df7ecf
2 parents 44de9e7 + 15c53f8
commit 1df7ecf
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git 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
@@ -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();
     };