52 lines
No EOL
1.7 KiB
JavaScript
52 lines
No EOL
1.7 KiB
JavaScript
import { fetchVisualizationData } from './api.js';
|
|
import { renderChart, updateChart } from './chart.js';
|
|
|
|
/**
|
|
* Initialisiert die Anwendung: lädt Chart, ruft API auf, registriert Event-Listener.
|
|
*/
|
|
export async function initApp() {
|
|
try {
|
|
const defaultRun = '31b';
|
|
const defaultMetric = 'tail';
|
|
const data = await fetchVisualizationData({ run: defaultRun, metric: defaultMetric });
|
|
renderChart(data);
|
|
registerEventListeners();
|
|
} catch (error) {
|
|
console.error('Fehler bei der Initialisierung der App:', error);
|
|
const container = document.getElementById('chart-container');
|
|
if (container) {
|
|
container.textContent = 'Fehler beim Laden der Visualisierung.';
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Reagiert auf Benutzeränderungen im Filterpanel und aktualisiert Diagrammdaten.
|
|
* @param {Event} event
|
|
*/
|
|
export async function handleFilterChange(event) {
|
|
try {
|
|
const runSelector = document.getElementById('run-filter');
|
|
const metricSelector = document.getElementById('metric-filter');
|
|
const selectedRun = runSelector?.value ?? '31b';
|
|
const selectedMetric = metricSelector?.value ?? 'tail';
|
|
|
|
const newData = await fetchVisualizationData({ run: selectedRun, metric: selectedMetric });
|
|
updateChart(newData);
|
|
} catch (error) {
|
|
console.error('Fehler bei der Aktualisierung des Diagramms:', error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Registriert Event-Listener für Filterelemente.
|
|
*/
|
|
function registerEventListeners() {
|
|
const runFilter = document.getElementById('run-filter');
|
|
const metricFilter = document.getElementById('metric-filter');
|
|
|
|
if (runFilter) runFilter.addEventListener('change', handleFilterChange);
|
|
if (metricFilter) metricFilter.addEventListener('change', handleFilterChange);
|
|
}
|
|
|
|
window.addEventListener('load', initApp); |