Möglichkeit, Graph in Vollbild zu betrachten

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,22 +76,34 @@
 
                 <MudItem xs="12">
                     <MudPaper Class="pa-6 mt-4" Elevation="1">
-                        <MudText Typo="Typo.h6" Class="mb-4">Geldfluss (Sankey-Diagramm)</MudText>
                         
-                        <MudSelect T="string" 
-                                Label="Sichtweise (Klick-Reihenfolge bestimmt den Fluss)" 
-                                MultiSelection="true" 
-                                SelectedValues="_selectedChartDimensions" 
-                                SelectedValuesChanged="OnChartDimensionsChanged"
-                                Variant="Variant.Outlined" 
-                                Class="mb-6">
-                            @foreach (var dim in _selectedWorkspace.Dimensions)
-                            {
-                                <MudSelectItem T="string" Value="@dim.Name">@dim.Name</MudSelectItem>
-                            }
-                        </MudSelect>
+                        <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)" 
+                                    MultiSelection="true" 
+                                    SelectedValues="_selectedChartDimensions" 
+                                    SelectedValuesChanged="OnChartDimensionsChanged"
+                                    Variant="Variant.Outlined" 
+                                    Class="mb-6">
+                                @foreach (var dim in _selectedWorkspace.Dimensions)
+                                {
+                                    <MudSelectItem T="string" Value="@dim.Name">@dim.Name</MudSelectItem>
+                                }
+                            </MudSelect>
 
-                        <div id="sankey-chart" style="width: 100%; height: 400px;"></div>
+                            <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");
+    }
 }