displaying BatchcodeByCountryBarChart

docs/BatchcodeByCountryBarChartView2.js

@@ -0,0 +1,69 @@
+// FK-TODO: rename
+class BatchcodeByCountryBarChartView2 {
+
+    #canvas;
+    #chart;
+
+    constructor(canvas) {
+        this.#canvas = canvas;
+    }
+
+    displayChart(barChartDescription) {
+        if (this.#chart != null) {
+            this.#chart.destroy();
+        }
+        this.#chart = new Chart(
+            this.#canvas,
+            {
+                type: 'bar',
+                data: this.#getData(barChartDescription),
+                options: this.#getOptions()
+            });
+    }
+
+    setData(barChartDescription) {
+        const data = this.#getData(barChartDescription);
+        this.#chart.config.data = data;
+        this.#chart.update();
+    }
+
+    #getData(barChartDescription) {
+        return {
+            labels: barChartDescription.countries,
+            datasets: [
+                {
+                    label: "frequencies before deletion", // FK-TODO: daterange einfügen, allerdings für "frequencies guessed"
+                    data: barChartDescription["frequencies before deletion"]
+                },
+                {
+                    label: "frequencies guessed",
+                    data: barChartDescription["frequencies guessed"]
+                }
+            ]
+        };
+    }
+
+    #getOptions() {
+        return {
+            indexAxis: 'y',
+            responsive: true,
+            scales: {
+                y: {
+                    title: {
+                        display: true,
+                        text: 'Country'
+                    }
+                },
+                x: {
+                    ticks: {
+                        precision: 0
+                    },
+                    title: {
+                        display: true,
+                        text: 'Frequency'
+                    }
+                }
+            }
+        };
+    }
+}