feat: feedback statistics

addresses #869bgtz2d
2025-12-23 14:54:27 +01:00
parent 2fb4fd750b
commit cdfd172a1e
16 changed files with 745 additions and 4 deletions
@@ -0,0 +1,73 @@
+import { Controller } from '@hotwired/stimulus'
+import { Chart, BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js'
+
+Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend)
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+
+    static targets = ['canvas']
+    static values = {
+        labels: Array,
+        data: Array,
+        title: String,
+        color: { type: String, default: '#004b7a' },
+        maxY: { type: Number, default: 5 },
+    }
+
+    connect() {
+        this.chart = new Chart(this.canvasTarget, {
+            type: 'bar',
+            data: {
+                labels: this.labelsValue,
+                datasets: [{
+                    label: 'Frage',
+                    data: this.dataValue,
+                    backgroundColor: this.colorValue,
+                    borderWidth: 0,
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                return context.parsed.y.toFixed(2)
+                            }
+                        }
+                    },
+                    title: {
+                        display: !!this.titleValue,
+                        text: this.titleValue,
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: false,
+                        min: 1,
+                        max: this.maxYValue,
+                        ticks: {
+                            stepSize: 1,
+                        }
+                    },
+                    x: {
+                        grid: {
+                            display: false,
+                        }
+                    }
+                }
+            }
+        })
+    }
+
+    disconnect() {
+        if (this.chart) {
+            this.chart.destroy()
+        }
+    }
+}