89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
'use strict';
|
|
|
|
/**
|
|
* Rendert die Drift-Matrix basierend auf matrix_data.
|
|
* @param {Array<{ quadrant: string, warn_reasons: string[], counts: number }>} matrix_data
|
|
*/
|
|
export function renderMatrix(matrix_data = []) {
|
|
const container = document.getElementById('matrix-container');
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '';
|
|
|
|
const grid = document.createElement('div');
|
|
grid.className = 'drift-matrix__grid';
|
|
|
|
matrix_data.forEach((cellData) => {
|
|
const cell = document.createElement('div');
|
|
cell.className = 'drift-matrix__cell';
|
|
cell.setAttribute('data-quadrant', cellData.quadrant);
|
|
cell.setAttribute('tabindex', '0');
|
|
cell.setAttribute('role', 'button');
|
|
cell.setAttribute('aria-label', `Quadrant ${cellData.quadrant}, Warnanzahl ${cellData.counts}`);
|
|
|
|
const intensity = Math.min(cellData.counts / 100, 1);
|
|
cell.style.backgroundColor = `rgba(255, 0, 0, ${intensity})`;
|
|
|
|
const label = document.createElement('span');
|
|
label.className = 'drift-matrix__label';
|
|
label.textContent = cellData.quadrant;
|
|
cell.appendChild(label);
|
|
|
|
cell.addEventListener('click', () => updateDetailPanel(cellData));
|
|
|
|
// Tooltip-Info
|
|
cell.title = `${cellData.warn_reasons.join(', ')}\nAnzahl: ${cellData.counts}`;
|
|
|
|
grid.appendChild(cell);
|
|
});
|
|
|
|
container.appendChild(grid);
|
|
}
|
|
|
|
/**
|
|
* Zeigt Details zu einem ausgewählten Quadranten an.
|
|
* @param {{ quadrant: string, warn_reasons: string[], counts: number }} quadrantData
|
|
*/
|
|
export function updateDetailPanel(quadrantData) {
|
|
const panel = document.getElementById('detail-panel');
|
|
if (!panel) return;
|
|
|
|
panel.innerHTML = '';
|
|
|
|
const title = document.createElement('h3');
|
|
title.textContent = `Quadrant ${quadrantData.quadrant}`;
|
|
|
|
const countInfo = document.createElement('p');
|
|
countInfo.textContent = `Warnungen insgesamt: ${quadrantData.counts}`;
|
|
|
|
const listTitle = document.createElement('h4');
|
|
listTitle.textContent = 'Warnursachen:';
|
|
|
|
const list = document.createElement('ul');
|
|
quadrantData.warn_reasons.forEach((reason) => {
|
|
const li = document.createElement('li');
|
|
li.textContent = reason;
|
|
list.appendChild(li);
|
|
});
|
|
|
|
panel.appendChild(title);
|
|
panel.appendChild(countInfo);
|
|
panel.appendChild(listTitle);
|
|
panel.appendChild(list);
|
|
}
|
|
|
|
/**
|
|
* Initialisiert das UI.
|
|
* @param {Array} initialData
|
|
*/
|
|
export function initApp(initialData) {
|
|
renderMatrix(initialData);
|
|
}
|
|
|
|
/**
|
|
* Wird aufgerufen, wenn ein neuer Run ausgewählt wurde.
|
|
* @param {Array} newData
|
|
*/
|
|
export function handleRunChange(newData) {
|
|
renderMatrix(newData);
|
|
}
|