219d9a816e
Felix's review named "TimelineAxes" as one of four split targets. The Y-axis and X-axis don't sit adjacent in the DOM — Y is a flex sibling of the bars+X column — so two single-purpose components beats a discriminator-prop component. tickIndicesFor and the omitTickYear derivation move to TimelineXAxis where they belong. Closes part 2 of Felix's component-split concern. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
41 lines
1.2 KiB
Svelte
41 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { formatTickLabel, tickIndicesFor } from '$lib/document/timeline';
|
|
import { getLocale } from '$lib/paraglide/runtime';
|
|
import type { components } from '$lib/generated/api';
|
|
|
|
type MonthBucket = components['schemas']['MonthBucket'];
|
|
|
|
let {
|
|
filled
|
|
}: {
|
|
filled: MonthBucket[];
|
|
} = $props();
|
|
|
|
const tickIndices = $derived(tickIndicesFor(filled));
|
|
|
|
// When all visible buckets share a year, the X-axis omits the year so a
|
|
// 12-month zoom reads as "Jan Feb Mär…" without repetition.
|
|
const omitTickYear = $derived.by(() => {
|
|
if (filled.length === 0 || filled[0].month.length === 4) return false;
|
|
const firstYear = filled[0].month.slice(0, 4);
|
|
return filled.every((b) => b.month.slice(0, 4) === firstYear);
|
|
});
|
|
</script>
|
|
|
|
<div
|
|
class="relative mt-1 h-4 font-sans text-xs leading-none text-ink-3"
|
|
aria-hidden="true"
|
|
data-testid="timeline-x-axis"
|
|
>
|
|
{#each tickIndices as idx (filled[idx]?.month)}
|
|
{@const tickLeftPct = ((idx + 0.5) / filled.length) * 100}
|
|
<span
|
|
class="absolute -translate-x-1/2 whitespace-nowrap"
|
|
data-testid="timeline-x-tick"
|
|
style="left: {tickLeftPct}%;"
|
|
>
|
|
{formatTickLabel(filled[idx].month, getLocale(), omitTickYear)}
|
|
</span>
|
|
{/each}
|
|
</div>
|