Merge pull request 'KPI-Kacheln direkt untereinander statt ueber die Monitorhoehe verteilt' (#42) from fds2610-bot/monitor:main into main

Reviewed-on: https://codeberg.org/fds2610/monitor/pulls/42

html/js/office-render.js

@@ -379,17 +379,34 @@ function renderKpiMonitor(frame, kpis) {
     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(
       text(`${tile.label}: ${tile.currentValue ?? "–"} ${tile.unit}`.trim(), {
         x: frame.x + 16,
-        y: rowY + 14,
+        y: rowTop + 14,
         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;