From 67a7bce99e8d8b3a65c96c88466e91e1883aeac4 Mon Sep 17 00:00:00 2001
From: Mats Johansen <mats.johansen@dkfz-heidelberg.de>
Date: Thu, 12 Oct 2023 14:44:26 +0200
Subject: [PATCH 1/2] feat(charts): fill all charts with data

---
 packages/demo/src/AppCCP.svelte                          | 8 +++++++-
 .../lib/src/components/results/ChartComponent.wc.svelte  | 9 ++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
index c91d585a..f30fd016 100644
--- a/packages/demo/src/AppCCP.svelte
+++ b/packages/demo/src/AppCCP.svelte
@@ -72,6 +72,12 @@
   const catalogueKeyToResponseKeyMap = [
     ["gender", "Gender"],
     ["age_at_diagnosis", "Age"],
+    ['diagnosis', 'diagnosis'],
+    ['medicationStatements', "MedicationType"],
+    ["sample_kind", 'sample_kind' ],
+    ["therapy_of_tumor", "ProcedureType"],
+    ["75186-7", "75186-7"],
+    // ["encounter", "Encounter"],
   ];
 
   const siteToDefaultCollectionId: string[][] = [
@@ -239,7 +245,7 @@
       <div class="chart-wrapper">
         <lens-chart
           title="Systemische Therapien"
-          catalogueGroupCode=""
+          catalogueGroupCode="medicationStatements"
           chartType="bar"
           clickToAddState={true}
         />
diff --git a/packages/lib/src/components/results/ChartComponent.wc.svelte b/packages/lib/src/components/results/ChartComponent.wc.svelte
index 6b0f8702..f33e2b81 100644
--- a/packages/lib/src/components/results/ChartComponent.wc.svelte
+++ b/packages/lib/src/components/results/ChartComponent.wc.svelte
@@ -110,7 +110,7 @@
     const getChartDataSets = (
         responseStore: ResponseStore,
         chartLabels: string[]
-    ): { label; data; backgroundColors; backgroundHoverColors }[] => {
+    ): { label; data; backgroundColor; backgroundHoverColor }[] => {
         let dataSet: number[];
 
         if (perSite) {
@@ -149,7 +149,7 @@
      * watches the response store and updates the chart data
      */
     const setChartData = (responseStore: ResponseStore) => {
-        console.log(responseStore);
+
         if (responseStore.size === 0) return;
 
         let isDataAvailable: boolean = false;
@@ -184,14 +184,12 @@
 
     $: {
         if ($responseStore.size !== 0){
-            console.log($responseStore);
             setChartData($responseStore);
         }
     } 
     
 
     onMount(() => {
-        console.log(initialChartData);
         chart = new Chart(canvas, initialChartData);
     });
 
@@ -220,9 +218,7 @@
          */
         const stratifier = chart.getActiveElements()[0];
         if (!stratifier || !clickToAddState) return;
-        console.log(typeof chart.data.labels[stratifier.index]);
         const label: string = chart.data.labels[stratifier.index] as string;
-        console.log(stratifier, label); 
         let queryItem: QueryItem;
         $catalogue.forEach((parentCategory: Category) => {
             if ("childCategories" in parentCategory) {
@@ -233,7 +229,6 @@
                             "criteria" in childCategorie
                         ) {
                             let values: QueryValue[] = [];
-                            console.log(childCategorie);
 
                             if (childCategorie.fieldType === "number") {
                                 /**

From cda94f09ae8a42ace35ac0fb53bf306b2760fe0b Mon Sep 17 00:00:00 2001
From: Mats Johansen <mats.johansen@dkfz-heidelberg.de>
Date: Thu, 12 Oct 2023 15:02:23 +0200
Subject: [PATCH 2/2] feat(chart): add proper height to diagnosis chart

---
 packages/demo/src/AppCCP.svelte                             | 1 +
 packages/demo/src/ccp.css                                   | 6 ++++++
 .../lib/src/components/results/ChartComponent.wc.svelte     | 2 ++
 3 files changed, 9 insertions(+)

diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
index f30fd016..d3ebdbb2 100644
--- a/packages/demo/src/AppCCP.svelte
+++ b/packages/demo/src/AppCCP.svelte
@@ -215,6 +215,7 @@
           title="Diagnosis"
           catalogueGroupCode="diagnosis"
           chartType="bar"
+          indexAxis='y'
           clickToAddState={true}
         />
       </div>
diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
index e713443f..addfa71d 100644
--- a/packages/demo/src/ccp.css
+++ b/packages/demo/src/ccp.css
@@ -242,4 +242,10 @@ lens-search-bar-multiple::part(query-delete-button-group) {
 
 lens-search-button::part(lens-search-button) {
   background-color: var(--light-blue);
+}
+
+.chart-diagnosis lens-chart::part(chart-canvas) {
+  width: 100%;
+  max-height: 1000px;
+  height: 940px;
 }
\ 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 f33e2b81..c0e0d92a 100644
--- a/packages/lib/src/components/results/ChartComponent.wc.svelte
+++ b/packages/lib/src/components/results/ChartComponent.wc.svelte
@@ -29,6 +29,7 @@
 
     export let title: string = ""; // e.g. 'Gender Distribution'
     export let catalogueGroupCode: string = ""; // e.g. "gender"
+    export let indexAxis: string = "x";
     export let clickToAddState: boolean = false;
     let responseGroupCode: string;
     $: responseGroupCode =
@@ -84,6 +85,7 @@
             ],
         },
         options: {
+            indexAxis: indexAxis,
             maintainAspectRatio: false,
             plugins: {
                 legend: {