FDS2610/monitor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

KPI-Kacheln direkt untereinander statt ueber die Monitorhoehe verteilt

Browse source 
renderKpiMonitor() hat die Hoehe des KPI-Monitors gleichmaessig unter den Kacheln
aufgeteilt (rowH = (frame.h - 30) / tiles.length, rund 78px pro Zeile bei vier
Kacheln). Der Platz ging dabei in die Sparkline-Kaesten - und genau die
Zaehler-Kacheln "Agenten"/"Online" (Issue #39) und "Hooks" (Issue #38) haben
history: [] und damit gar keine Linie. Zwischen den Werten standen deshalb grosse
leere Kaesten.

Die Zeilen stapeln sich jetzt mit fester Hoehe von oben, und einen Sparkline-Kasten
bekommt nur noch, wer wirklich einen Verlauf hat: eine Zaehler-Kachel braucht damit
24 statt 77,5 Pixel, vier davon zusammen 96 statt 310. Der Kasten ist ausserdem 32px
hoch - die Hoehe, fuer die buildKpiSparklinePoints() die Punkte berechnet; vorher war
er rund 51px hoch und die Linie fuellte ihn nie aus.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
fds2610-bot 2026-08-05 18:30:21 +02:00
parent 6ff5c16197
commit 1aec163edc
1 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
html/js/office-render.js
View file

@ -379,17 +379,34 @@ function renderKpiMonitor(frame, kpis) {
return g; return g;
} }
const rowH = (frame.h - 30) / tiles.length; // Die Zeilen stehen direkt untereinander, statt die Monitorhoehe gleichmaessig unter den
tiles.forEach((tile, index) => { // Kacheln aufzuteilen: Zaehler-Kacheln wie "Agenten"/"Online" (Issue #39) und "Hooks"
const rowY = frame.y + 20 + index * rowH; // (Issue #38) haben history: [] und damit keine Sparkline - verteilt man die Hoehe trotzdem,
// klaffen zwischen den Werten grosse leere Sparkline-Kaesten. Ein Verlauf bekommt seinen
// Platz deshalb nur, wenn es ihn wirklich gibt.
const LABEL_HEIGHT = 20;
// Passt zur Punkteberechnung in buildKpiSparklinePoints() (Default-Hoehe 32) - so fuellt die
// Linie den Kasten genau aus.
const SPARKLINE_HEIGHT = 32;
const ROW_GAP = 4;
let rowTop = frame.y + 20;
tiles.forEach((tile) => {
g.appendChild( g.appendChild(
text(`${tile.label}: ${tile.currentValue ?? "–"} ${tile.unit}`.trim(), { text(`${tile.label}: ${tile.currentValue ?? "–"} ${tile.unit}`.trim(), {
x: frame.x + 16, x: frame.x + 16,
y: rowY + 14, y: rowTop + 14,
class: "kpi-tile-label", class: "kpi-tile-label",
}) })
); );
g.appendChild(renderSparkline(tile.sparklinePoints, frame.w - 32, rowH - 26, frame.x + 16, rowY + 20)); rowTop += LABEL_HEIGHT;
if (tile.sparklinePoints) {
g.appendChild(renderSparkline(tile.sparklinePoints, frame.w - 32, SPARKLINE_HEIGHT, frame.x + 16, rowTop));
rowTop += SPARKLINE_HEIGHT;
}
rowTop += ROW_GAP;
}); });
return g; return g;