feat: tijdlabels op hele uren in plaats van de ruwe meettijden

De labels toonden de werkelijke meettijdstippen van Netatmo (11:41,
17:41, 23:41), wat onrustig leest. Nu markeringen op hele uren die op de
klok zijn uitgelijnd: elke 6 uur vanaf middernacht, dus 00:00, 06:00,
12:00, 18:00, elk op zijn echte tijdspositie in het venster. "nu" blijft
op de rechterrand; een markering die daar te dicht bij komt valt weg.

axisMarks() is vervangen door hourTicks(), die uur voor uur door het
venster loopt en telkens de lokale klok raadpleegt. Daardoor blijven de
labels ook op de zomertijdwissel hele lokale uren, waar optellen in vaste
stappen er een uur naast zou zitten; daar is een test voor. Een label
vlak op de linkerrand wordt niet gecentreerd, zodat het binnen de
grafiek blijft. Servicewerker naar v9.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

tests/js/format.test.js

@@ -121,7 +121,7 @@ test('msUntil computes the wait until the next local time', () => {
 
 import {
   co2Level, fPct, fHpa, seriesRange, sparklinePath, sparklinePoints,
-  windArrowDeg, fKmh, formatHour, formatFullDate, pinRoom, axisMarks,
+  windArrowDeg, fKmh, formatHour, formatFullDate, pinRoom, hourTicks,
 } from '../../public/format.js';
 
 test('co2Level uses the Netatmo thresholds', () => {
@@ -209,27 +209,38 @@ test('pinRoom does not mutate the input array', () => {
   assert.deepEqual(rooms, original);
 });
 
-test('axisMarks maps fractions to indices and percentages', () => {
-  // 49 punten = 24 uur per half uur
-  assert.deepEqual(axisMarks(49), [
-    { index: 0, percent: 0 },
-    { index: 12, percent: 25 },
-    { index: 24, percent: 50 },
-    { index: 36, percent: 75 },
-    { index: 48, percent: 100 },
-  ]);
+
+test('hourTicks puts marks on clock-aligned whole hours inside the window', () => {
+  const ticks = hourTicks('2026-09-12T11:41:00+02:00', '2026-09-13T11:41:00+02:00', TZ);
+
+  assert.deepEqual(ticks.map((t) => formatTime(t.at, TZ)), ['12:00', '18:00', '00:00', '06:00']);
+  assert.deepEqual(ticks.map((t) => Number(t.percent.toFixed(2))), [1.32, 26.32, 51.32, 76.32]);
 });
 
-test('axisMarks honours custom fractions and rounds to the nearest point', () => {
-  assert.deepEqual(axisMarks(10, [0, 0.5, 1]), [
-    { index: 0, percent: 0 },
-    { index: 5, percent: 50 },
-    { index: 9, percent: 100 },
-  ]);
-  assert.deepEqual(axisMarks(4, [0.33]), [{ index: 1, percent: 33 }]);
+test('hourTicks drops a mark that would collide with the "nu" label', () => {
+  // Venster eindigt om 12:05, dus de markering van 12:00 zit op 99,7% en valt weg.
+  const ticks = hourTicks('2026-09-12T12:05:00+02:00', '2026-09-13T12:05:00+02:00', TZ);
+
+  assert.deepEqual(ticks.map((t) => formatTime(t.at, TZ)), ['18:00', '00:00', '06:00']);
 });
 
-test('axisMarks gives nothing to label below two points', () => {
-  assert.deepEqual(axisMarks(1), []);
-  assert.deepEqual(axisMarks(0), []);
+test('hourTicks stays on local whole hours across the daylight saving change', () => {
+  // 25 oktober 2026: de klok gaat om 03:00 terug naar 02:00, dus dat venster duurt 25 uur.
+  // Zonder de lokale klok te raadplegen zou 00:00 hier op 01:00 uitkomen.
+  const ticks = hourTicks('2026-10-24T12:00:00+02:00', '2026-10-25T12:00:00+01:00', TZ);
+
+  assert.deepEqual(ticks.map((t) => formatTime(t.at, TZ)), ['12:00', '18:00', '00:00', '06:00']);
+  assert.equal(ticks[0].percent, 0, 'een venster dat precies op een heel uur begint krijgt daar een markering');
+});
+
+test('hourTicks honours a different step', () => {
+  const ticks = hourTicks('2026-09-13T09:30:00+02:00', '2026-09-13T21:30:00+02:00', TZ, 3);
+
+  assert.deepEqual(ticks.map((t) => formatTime(t.at, TZ)), ['12:00', '15:00', '18:00']);
+});
+
+test('hourTicks gives nothing for an empty or invalid window', () => {
+  assert.deepEqual(hourTicks('2026-09-13T10:00:00+02:00', '2026-09-13T10:00:00+02:00', TZ), []);
+  assert.deepEqual(hourTicks('kapot', '2026-09-13T10:00:00+02:00', TZ), []);
+  assert.deepEqual(hourTicks(undefined, undefined, TZ), []);
 });