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" />