diff options
Diffstat (limited to 'src/lib/components/HealthChart.svelte')
| -rw-r--r-- | src/lib/components/HealthChart.svelte | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/src/lib/components/HealthChart.svelte b/src/lib/components/HealthChart.svelte index f1f87ed..c6121e3 100644 --- a/src/lib/components/HealthChart.svelte +++ b/src/lib/components/HealthChart.svelte @@ -1,6 +1,7 @@ <script lang="ts"> import { AreaChart, Area, Points, Text } from 'layerchart'; import type { HealthPoint } from '$lib/shared/routine-metrics'; + import { formatDayMonth } from '$lib/shared/temporal'; let { series, @@ -12,11 +13,6 @@ ariaLabel: string; } = $props(); - const dateFormatter = new Intl.DateTimeFormat('fr-FR', { - day: 'numeric', - month: 'short', - }); - const data = $derived( series.map((p) => ({ date: new Date(p.at), health: p.health })), ); @@ -25,24 +21,28 @@ ); // Up to 5 x ticks spread across the series, skipping repeats (two samples - // the same day would print the same label twice). + // the same day would print the same label twice). Dates stay Date objects + // because LayerChart's time scale consumes them; labels go through Temporal. const xTicks = $derived.by(() => { if (data.length < 2) return undefined; const step = Math.max(1, Math.floor((data.length - 1) / 4)); - const ticks: Date[] = []; + const dayKey = (date: Date): string => + Temporal.Instant.fromEpochMilliseconds(date.getTime()) + .toString() + .slice(0, 10); + const values: Date[] = []; for (let i = 0; i < data.length; i += step) { const last = i + step >= data.length; const date = last ? data[data.length - 1].date : data[i].date; - const label = dateFormatter.format(date); if ( - ticks.length > 0 && - dateFormatter.format(ticks[ticks.length - 1]) === label + values.length > 0 && + dayKey(values[values.length - 1]) === dayKey(date) ) continue; - ticks.push(date); + values.push(date); if (last) break; } - return ticks; + return values; }); </script> @@ -60,7 +60,7 @@ props={{ xAxis: { ticks: xTicks, - format: (d: Date) => dateFormatter.format(d), + format: (d: Date) => formatDayMonth(d.toISOString()), tickLabel: xTickLabel, }, yAxis: { ticks: [25, 50, 75, 100] }, |