Mika/n40_time_measurement
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add results_visualization/index.html

Browse source
This commit is contained in:
Mika 2026-01-22 11:58:34 +00:00
commit 393e2112b9
1 changed files with 70 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
results_visualization/index.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Results Visualization</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header class="app-header flex align-center" role="banner">
<div class="container">
<h1>Results Visualization</h1>
<p aria-label="Experiment info">Experiment zur Analyse aggregierter Zeitmessungsdaten</p>
</div>
</header>
<main>
<section class="filter-controls toolbar" aria-label="Filter Optionen">
<div class="container">
<form id="filter-form">
<label for="run-type">Run Type:</label>
<select id="run-type" name="runType">
<option value="all">Alle</option>
<option value="pinned">Pinned</option>
<option value="unpinned">Unpinned</option>
</select>
<label for="metric">Metrik:</label>
<select id="metric" name="metric">
<option value="latency_mean">Latenzmittel</option>
<option value="variance">Varianz</option>
<option value="stability_index">Stabilitätsindex</option>
</select>
<label for="time-range">Zeitraum:</label>
<select id="time-range" name="timeRange">
<option value="last_hour">Letzte Stunde</option>
<option value="last_day">Letzter Tag</option>
<option value="last_week">Letzte Woche</option>
</select>
</form>
</div>
</section>
<section class="summary-cards grid" aria-label="Zusammenfassung">
<div class="container">
<div id="summary-cards-container" class="summary-grid" aria-live="polite">
<!-- Dynamisch befüllte Cards über JS -->
</div>
</div>
</section>
<section class="chart-container chart-style" aria-label="Hauptdiagramm">
<div class="container">
<canvas id="main-chart" role="img" aria-label="Visualisierung der Messdaten"></canvas>
</div>
</section>
</main>
<footer class="app-footer text-muted" role="contentinfo">
<div class="container">
<p>© 2026 Donau2Space.de</p>
<p>Aggregierte Messdaten über /results API – Dashboard-Version 1.0</p>
</div>
</footer>
<script src="js/api.js" type="module"></script>
<script src="js/visualization.js" type="module"></script>
</body>
</html>