Diagram

2026-05-29 13:52:32 +02:00
parent c52a00adbd
commit 4abe66c283
4 changed files with 321 additions and 3 deletions
@@ -20,6 +20,43 @@
    <ImportMap />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet @rendermode="InteractiveServer" />
+
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+    <script>
+        window.drawSankeyChart = function (elementId, dataArray) {
+            google.charts.load('current', {'packages':['sankey']});
+            google.charts.setOnLoadCallback(function() {
+                var data = new google.visualization.DataTable();
+                data.addColumn('string', 'Von');
+                data.addColumn('string', 'Nach');
+                data.addColumn('number', 'Betrag');
+                data.addRows(dataArray);
+
+                var options = {
+                    backgroundColor: 'transparent', // Wichtig für den Dark-Mode
+                    sankey: {
+                        node: {
+                            nodePadding: 20,
+                            // Ein paar moderne, kräftige Farben
+                            colors: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'],
+                            label: { 
+                                color: '#ffffff', // Weiße Schrift, damit sie auf dem dunklen Hintergrund lesbar bleibt
+                                fontName: 'Urbanist', // Wir greifen deinen Font auf!
+                                fontSize: 14,
+                                bold: true
+                            }
+                        },
+                        link: {
+                            colorMode: 'gradient' // Sorgt für den fließenden, modernen Look
+                        }
+                    }
+                };
+
+                var chart = new google.visualization.Sankey(document.getElementById(elementId));
+                chart.draw(data, options);
+            });
+        };
+    </script>
 </head>

 <body>