diff --git a/Components/App.razor b/Components/App.razor
index 4116fb7..4c664a8 100644
--- a/Components/App.razor
+++ b/Components/App.razor
@@ -21,42 +21,61 @@
-
-
+
+ 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',
+ sankey: {
+ node: {
+ nodePadding: 20,
+ colors: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'],
+ label: { color: '#ffffff', fontName: 'Urbanist', fontSize: 14, bold: true }
+ },
+ link: { colorMode: 'gradient' }
+ }
+ };
+
+ var chart = new google.visualization.Sankey(document.getElementById(elementId));
+ chart.draw(data, options);
+ });
+ };
+
+ // NEU: Wenn sich das Fenster (oder Vollbild) ändert, zeichne neu!
+ window.addEventListener('resize', function() {
+ if (window._sankeyData && window._sankeyElementId && document.getElementById(window._sankeyElementId)) {
+ clearTimeout(window._resizeTimer);
+ window._resizeTimer = setTimeout(function() {
+ window.drawSankeyChart(window._sankeyElementId, window._sankeyData);
+ }, 100); // Minimaler Delay für weiche Übergänge
+ }
+ });
+
+ // NEU: Die Fullscreen-Umschaltung
+ window.toggleFullscreen = function (elementId) {
+ var elem = document.getElementById(elementId);
+ if (!document.fullscreenElement) {
+ elem.requestFullscreen().catch(err => console.error(err));
+ } else {
+ document.exitFullscreen();
+ }
+ };
+
diff --git a/Components/Pages/Auswertung.razor b/Components/Pages/Auswertung.razor
index c974a8c..e297b77 100644
--- a/Components/Pages/Auswertung.razor
+++ b/Components/Pages/Auswertung.razor
@@ -5,6 +5,20 @@
@inject WorkspaceService DbService
@inject IJSRuntime JSRuntime
+
+
Daten-Auswertung
@@ -62,22 +76,34 @@
- Geldfluss (Sankey-Diagramm)
-
- @foreach (var dim in _selectedWorkspace.Dimensions)
- {
- @dim.Name
- }
-
+
+ Geldfluss (Sankey-Diagramm)
+
+
+
+
+
+
+
+
+ @foreach (var dim in _selectedWorkspace.Dimensions)
+ {
+ @dim.Name
+ }
+
-
+
+
+
@@ -281,4 +307,10 @@
// Ein winziger Delay stellt sicher, dass Blazor das UI fertig gerendert hat
await JSRuntime.InvokeVoidAsync("drawSankeyChart", "sankey-chart", _sankeyData);
}
+
+ private async Task ToggleFullscreen()
+ {
+ // Wir übergeben die ID unseres neuen Containers
+ await JSRuntime.InvokeVoidAsync("toggleFullscreen", "sankey-fullscreen-container");
+ }
}
\ No newline at end of file