Tokk/NumericalAnalysisTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Möglichkeit, Graph in Vollbild zu betrachten

Browse Source
This commit is contained in:
Tokk
2026-05-29 16:22:54 +02:00
parent 80b74d1ded
commit 9003396ca8
2 changed files with 99 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Components/App.razor
+53 -34
View File
@@ -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" />
Components/Pages/Auswertung.razor
+46 -14
View File
@@ -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-chart" style="width: 100%; height: 400px;"></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>
</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");
}
}