Möglichkeit, Graph in Vollbild zu betrachten

Components/App.razor

@@ -23,7 +23,14 @@
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script>
+    // Wir merken uns die Daten global für den Vollbild-Wechsel
+    window._sankeyData = null;
+    window._sankeyElementId = null;
+
     window.drawSankeyChart = function (elementId, dataArray) {
+        window._sankeyData = dataArray;
+        window._sankeyElementId = elementId;
+
         google.charts.load('current', {'packages':['sankey']});
         google.charts.setOnLoadCallback(function() {
             var data = new google.visualization.DataTable();
@@ -33,22 +40,14 @@
             data.addRows(dataArray);
 
             var options = {
-                    backgroundColor: 'transparent', // Wichtig für den Dark-Mode
+                backgroundColor: 'transparent',
                 sankey: {
                     node: {
                         nodePadding: 20,
-                            // Ein paar moderne, kräftige Farben
                         colors: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'],
-                            label: { 
+                        label: { color: '#ffffff', fontName: 'Urbanist', fontSize: 14, bold: true }
-                                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: {
+                    link: { colorMode: 'gradient' }
-                            colorMode: 'gradient' // Sorgt für den fließenden, modernen Look
-                        }
                 }
             };
 
@@ -56,6 +55,26 @@
             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();
+        }
+    };
 </script>
 </head>
 

Components/Pages/Auswertung.razor

@@ -5,6 +5,20 @@
 @inject WorkspaceService DbService
 @inject IJSRuntime JSRuntime
 
+<style>
+    /* Greift NUR, wenn der Container im Vollbildmodus ist */
+    #sankey-fullscreen-container:fullscreen {
+        background-color: var(--mud-palette-background);
+        padding: 2rem;
+        overflow-y: auto;
+    }
+    
+    /* Das Diagramm im Vollbild massiv vergrößern */
+    #sankey-fullscreen-container:fullscreen #sankey-chart {
+        height: calc(100vh - 120px) !important; 
+    }
+</style>
+
 <MudContainer MaxWidth="MaxWidth.Large" Class="mt-8 mb-8">
     <MudText Typo="Typo.h4" Class="mb-6">Daten-Auswertung</MudText>
 
@@ -62,7 +76,17 @@
 
                 <MudItem xs="12">
                     <MudPaper Class="pa-6 mt-4" Elevation="1">
-                        <MudText Typo="Typo.h6" Class="mb-4">Geldfluss (Sankey-Diagramm)</MudText>
+                        
+                        <div class="d-flex justify-space-between align-center mb-4">
+                            <MudText Typo="Typo.h6">Geldfluss (Sankey-Diagramm)</MudText>
+                            <MudTooltip Text="Vollbild umschalten">
+                                <MudIconButton Icon="@Icons.Material.Filled.Fullscreen" 
+                                            OnClick="ToggleFullscreen" 
+                                            Color="Color.Default" />
+                            </MudTooltip>
+                        </div>
+                        
+                        <div id="sankey-fullscreen-container">
                             
                             <MudSelect T="string" 
                                     Label="Sichtweise (Klick-Reihenfolge bestimmt den Fluss)" 
@@ -78,6 +102,8 @@
                             </MudSelect>
 
                             <div id="sankey-chart" style="width: 100%; height: 400px;"></div>
+                            
+                        </div>
                     </MudPaper>
                 </MudItem>
 
@@ -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");
+    }
 }