making bar charts horizontal

docs/HistogramView.js

@@ -32,15 +32,35 @@ class HistogramView {
     #createHistogram(histoDescr) {
         // FK-TODO: brauchen Slider wie bei intensivstationen
         const canvas = document.createElement("canvas");
+        const { 'keys': symptoms, 'values': frequencies } = Utils.getKeysAlignedWithValues(histoDescr.histogram);
         return new Chart(
             canvas,
             {
                 type: 'bar',
                 data: {
+                    labels: symptoms,
                     datasets: [{
                         label: histoDescr.batchcodes.join(', '),
-                        data: histoDescr.histogram
+                        data: frequencies
                     }]
+                },
+                options: {
+                    indexAxis: 'y',
+                    responsive: true,
+                    scales: {
+                        y: {
+                            title: {
+                                display: true,
+                                text: 'Symptom'
+                            }
+                        },
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Frequency'
+                            }
+                        }
+                    },
                 }
             }
         );

docs/Utils.js

@@ -6,4 +6,14 @@ class Utils {
         const nums = [...arr].sort((a, b) => a - b);
         return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
     }
+
+    static getKeysAlignedWithValues(dict) {
+        const keys = [];
+        const values = [];
+        for (const [key, value] of Object.entries(dict)) {
+            keys.push(key);
+            values.push(value);
+        }
+        return { 'keys': keys, 'values': values };
+    }
 }