From 9003396ca83f19a22f539e2b80edb9c4704dfbbf Mon Sep 17 00:00:00 2001
From: Trond Schertel <t.schertel@t-m-g.de>
Date: Fri, 29 May 2026 16:22:54 +0200
Subject: [PATCH] =?UTF-8?q?M=C3=B6glichkeit,=20Graph=20in=20Vollbild=20zu?=
 =?UTF-8?q?=20betrachten?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Components/App.razor              | 87 +++++++++++++++++++------------
 Components/Pages/Auswertung.razor | 60 ++++++++++++++++-----
 2 files changed, 99 insertions(+), 48 deletions(-)

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 @@
     <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);
+   <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;
 
-                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
-                        }
-                    }
-                };
+    window.drawSankeyChart = function (elementId, dataArray) {
+        window._sankeyData = dataArray;
+        window._sankeyElementId = elementId;
 
-                var chart = new google.visualization.Sankey(document.getElementById(elementId));
-                chart.draw(data, options);
-            });
-        };
-    </script>
+        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();
+        }
+    };
+</script>
 </head>
 
 <body style="background-color: var(--mud-palette-background); color: var(--mud-palette-text-primary);">    <Routes @rendermode="InteractiveServer" />
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
 
+<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");
+    }
 }
\ No newline at end of file