@humanforest/nuxt-layer 0.1.0

package/packages/charts/src/FLondonMap.vue

@@ -0,0 +1,399 @@
+<script setup lang="ts" generic="D extends Record<string, unknown>">
+// London as vector areas — boroughs or wards — filled from data. A choropleth, where the dotted map
+// is a density picture: this one answers "which areas", and every shape is a real administrative
+// boundary a reader can name.
+//
+// Colour resolution is useCellScale's, the same core the other cell components use, so a map and a
+// calendar of the same data agree. What this owns is the geometry, the labels and the selection.
+//
+// Still not a substitute for Mapbox. There is no pan, no zoom and nothing outside London.
+import { computed, ref, shallowRef, watchEffect } from 'vue';
+import type { BulletLegendItemInterface } from '@unovis/ts';
+import { useCellScale, CELL_EMPTY_COLOR, type SequentialRamp } from './useCellScale';
+import { CELL_SIZES, orElse, type CellSize } from './cellSize';
+import {
+  LONDON_BOROUGHS,
+  loadLondonWards,
+  indexAreas,
+  type AreaLevel,
+  type LondonArea,
+  type LondonAreaSet,
+} from './londonAreas';
+import FCellLegend from './FCellLegend.vue';
+
+interface AreaDatum {
+  area: LondonArea;
+  datum: D | undefined;
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** Which boundaries to draw. Wards are loaded on demand — they are a separate chunk. */
+    level?: AreaLevel;
+    data?: D[];
+    /** The area a datum belongs to: an ONS code, or a name. Matched case-insensitively. */
+    area?: (d: D) => string;
+    mode?: 'state' | 'intensity';
+    states?: Record<string, BulletLegendItemInterface>;
+    state?: (d: D) => string | null | undefined;
+    value?: (d: D) => number | null | undefined;
+    ramp?: SequentialRamp;
+    /** Intensity domain. Two maps compared side by side must both set it. */
+    domain?: [number, number];
+    steps?: number;
+    /** How a value is spaced along the ramp. Counts over areas are usually skewed. */
+    scale?: 'linear' | 'sqrt' | 'log';
+    /**
+     * What the map holds: the whole city, or only the areas that carry a datum.
+     *
+     * · `city`      every area at this `level`, in the projection's own frame. The default, and the
+     *               reading a choropleth wants: an area with no datum is a fact about the data.
+     * · `selection` ONLY the areas with a datum, framed to the union of their own bounding boxes.
+     *
+     * ★★ IT DROPS THE REST AND RE-FRAMES, AND THE TWO GO TOGETHER. Re-framing while keeping the
+     * city is a zoom; dropping the city while keeping the frame is a handful of shapes adrift in an
+     * empty London-sized box. Neither is a picture anybody asked for.
+     *
+     * ⚠ WHAT IT COSTS: without the other areas there is no coastline, no neighbour and no river to
+     * locate the selection against, so it only reads if the selection is itself a familiar shape. A
+     * contiguous service area survives it; three boroughs that do not touch do not. The areas keep
+     * their true relative position either way — this is still the map's coordinate space, which is
+     * the difference between it and `FBoroughShape`, whose glyphs are each framed to themselves.
+     *
+     * With no datum anywhere it falls back to the city: an empty frame renders nothing at all, which
+     * reads as a broken component rather than as an empty state.
+     */
+    fit?: 'city' | 'selection';
+    /** Size step: sets the rendered width, and whether labels, legend and tooltips default on. */
+    size?: CellSize;
+    /** Forces the size step's chrome decision. Individual props still win over it. */
+    chrome?: boolean;
+    /** Area names at their centroids. Off for wards at any size — 704 labels is a texture. */
+    labels?: boolean;
+    legend?: boolean;
+    /** Hover text. It also puts boroughs on the keyboard; wards stay off it unless selectable. */
+    tooltip?: (area: LondonArea, datum: D | undefined) => string;
+    /** Draw the borough boundaries over a ward map, so wards read as grouped. */
+    boroughOutline?: boolean;
+    /** Selected area codes. Pair with `v-model:selected` to let a click change them. */
+    selected?: string[];
+    /** Click to select. Without it the map is a picture and areas take no clicks. */
+    selectable?: boolean;
+    ariaLabel?: string;
+  }>(),
+  {
+    level: 'borough',
+    fit: 'city',
+    mode: 'intensity',
+    steps: 5,
+    scale: 'linear',
+    size: 'md',
+    data: () => [],
+    /* Vue casts an ABSENT Boolean-typed prop to false, so without these the size step could never
+       switch chrome on: `orElse` would read that false as a deliberate "off" at every size. */
+    labels: undefined,
+    legend: undefined,
+    chrome: undefined,
+    boroughOutline: undefined,
+  },
+);
+
+const emit = defineEmits<{ 'update:selected': [string[]] }>();
+
+// ---- geometry ----
+
+const wards = shallowRef<LondonAreaSet | null>(null);
+watchEffect(() => {
+  if (props.level === 'ward' && !wards.value) void loadLondonWards().then((w) => (wards.value = w));
+});
+
+// Boroughs are the fallback while the wards are in flight, so the map never flashes empty — the
+// outline is the same shape either way, only the subdivision changes.
+const set = computed<LondonAreaSet>(() =>
+  props.level === 'ward' ? (wards.value ?? LONDON_BOROUGHS) : LONDON_BOROUGHS,
+);
+const loading = computed(() => props.level === 'ward' && !wards.value);
+
+const spec = computed(() => CELL_SIZES[props.size]);
+// A map scales as a whole rather than by cell, so the size step drives its width. The numbers are
+// the dotted map's widths, so the two components sit at the same scale on a page.
+const MAP_WIDTH: Record<CellSize, number> = { xs: 192, sm: 383, md: 575, lg: 767 };
+const width = computed(() => MAP_WIDTH[props.size]);
+/* The frame's aspect, not the city's: a fitted map is a different shape and would otherwise be drawn
+   into the city's box and letterboxed by its own viewBox. */
+const height = computed(() => Math.round((width.value * frame.value[3]!) / frame.value[2]!));
+
+const showChrome = computed(() => orElse(props.chrome, spec.value.chrome));
+const showLegend = computed(() => orElse(props.legend, showChrome.value));
+// Ward labels are never on by default: 704 names at any size is a texture, not a label set.
+const showLabels = computed(() =>
+  orElse(props.labels, showChrome.value && props.level === 'borough'),
+);
+const showBoroughOutline = computed(() => orElse(props.boroughOutline, props.level === 'ward'));
+const interactive = computed(() => (!!props.tooltip || props.selectable) && showChrome.value);
+
+// Focus is not given out as freely as hover.
+//
+// Selection is a real action, so a selectable map is keyboard-reachable however many areas it has —
+// the caller asked for it and there is no other way to perform it. A tooltip is not an action, and
+// at ward level it would buy 704 tab stops for text the summary on the wrapper already carries. So
+// tooltip alone reaches the keyboard at borough level, where 33 stops is navigation, and not at
+// ward level, where it would only be an obstacle.
+const focusable = computed(
+  () => interactive.value && (props.selectable || props.level === 'borough'),
+);
+
+// Strokes invert with the mode rather than matching the page.
+//
+// They used to be --ui-bg, which is the page colour: on a light page a near-white fill met a white
+// edge and the shape lost its outline exactly where the ramp was palest. --ui-text-muted is dark on
+// a light page and light on a dark one, so an area is always bounded whatever it is filled with, and
+// it is the muted step rather than the full inversion because 704 hairlines at full contrast read as
+// a mesh drawn over the data. The borough outline does take the full inversion — it has to win
+// against the ward edges beneath it — and selection moves to the brand colour, so being picked
+// cannot be confused with being bounded.
+
+/** Stroke width in viewBox units, so it stays one hairline whatever the rendered size. */
+const strokeScale = computed(() => frame.value[2]! / width.value);
+
+// ---- data ----
+
+const index = computed(() => indexAreas(set.value.areas));
+
+// Last datum wins for an area. Summing would silently change the reading into something the caller
+// never asked for; duplicates are the caller's to resolve.
+const byArea = computed(() => {
+  const m = new Map<string, D>();
+  if (!props.area) return m;
+  for (const d of props.data) {
+    const found = index.value.get(String(props.area(d)).toLowerCase());
+    if (found) m.set(found.code, d);
+  }
+  return m;
+});
+
+const cells = computed<AreaDatum[]>(() =>
+  set.value.areas.map((area) => ({ area, datum: byArea.value.get(area.code) })),
+);
+
+/*
+  ── `fit: selection` ────────────────────────────────────────────────────────────────────────────
+
+  ★★ THE SUBSET AND THE FRAME ARE ONE DECISION, and both are derived from the SAME list — the cells
+  that carry a datum. Deriving them separately is how a map ends up framed to one set and drawn from
+  another.
+
+  ⚠ `cells` ITSELF IS NOT FILTERED, and that is deliberate: the ramp's domain, the empty-state check
+  and the summary all read it, and a domain computed from the drawn subset would re-scale the colours
+  every time the frame changed. What the caller asked for is a different VIEW of the same reading.
+*/
+const FIT_PAD = 0.06;
+const fitted = computed(() => props.fit === 'selection' && cells.value.some((c) => c.datum !== undefined));
+const drawn = computed(() => (fitted.value ? cells.value.filter((c) => c.datum !== undefined) : cells.value));
+/*
+  The union of the drawn areas' stored bounding boxes — the same arithmetic FBoroughShape does for
+  one, so nothing here parses a path. The pad is a fraction of the union's LONGER side, so a wide
+  selection and a tall one get the same visual margin rather than the same number of user units.
+*/
+const frame = computed<readonly number[]>(() => {
+  if (!fitted.value) return set.value.viewBox;
+  const areas = drawn.value.map((c) => c.area);
+  const x0 = Math.min(...areas.map((a) => a.x));
+  const y0 = Math.min(...areas.map((a) => a.y));
+  const x1 = Math.max(...areas.map((a) => a.x + a.w));
+  const y1 = Math.max(...areas.map((a) => a.y + a.h));
+  const pad = Math.max(x1 - x0, y1 - y0) * FIT_PAD;
+  return [x0 - pad, y0 - pad, x1 - x0 + pad * 2, y1 - y0 + pad * 2];
+});
+
+// Unlike the dotted map, empty here IS a third outcome and stays that way. A borough with no row is
+// a borough nobody measured — the areas are given by the geography, not by the data, so absence is
+// silence rather than zero. The dotted map inverts this because its coverage is complete by
+// construction; a choropleth's is not.
+const spaced = (v: number) =>
+  props.scale === 'sqrt' ? Math.sqrt(v) : props.scale === 'log' ? Math.log1p(v) : v;
+
+const scale = useCellScale<AreaDatum>({
+  mode: props.mode,
+  states: computed(() => props.states),
+  ramp: computed(() => props.ramp ?? ('forest' as SequentialRamp)),
+  domain: computed(() =>
+    props.domain ? ([spaced(props.domain[0]), spaced(props.domain[1])] as [number, number]) : undefined,
+  ),
+  steps: computed(() => props.steps),
+  data: cells,
+  value: (c) => {
+    const v = c.datum === undefined ? undefined : props.value?.(c.datum);
+    return typeof v === 'number' && Number.isFinite(v) ? spaced(v) : undefined;
+  },
+  state: (c) => (c.datum === undefined ? undefined : props.state?.(c.datum)),
+});
+
+const hasEmpty = computed(() => cells.value.some((c) => scale.isEmpty(c)));
+
+// ---- interaction ----
+
+const selectedSet = computed(() => new Set(props.selected ?? []));
+const toggle = (code: string) => {
+  if (!props.selectable) return;
+  const next = new Set(selectedSet.value);
+  if (next.has(code)) next.delete(code);
+  else next.add(code);
+  emit('update:selected', [...next]);
+};
+
+// One UTooltip for the map, re-anchored to the hovered shape through `reference`. Anchored to the
+// shape's box rather than the pointer: an area is large enough that a bubble following the cursor
+// wanders far from what it describes.
+const tip = ref<{ text: string; el: Element | null }>({ text: '', el: null });
+const tipOpen = ref(false);
+const showTip = (event: Event, cell: AreaDatum) => {
+  if (!props.tooltip) return;
+  tip.value = { text: props.tooltip(cell.area, cell.datum), el: event.currentTarget as Element };
+  tipOpen.value = true;
+};
+const hideTip = () => {
+  tipOpen.value = false;
+};
+
+const mapLabel = computed(() => {
+  if (props.ariaLabel) return props.ariaLabel;
+  const named = cells.value.filter((c) => !scale.isEmpty(c)).length;
+  const noun = props.level === 'ward' ? 'wards' : 'boroughs';
+  return `London by ${noun}, shaded by value. ${named} of ${cells.value.length} ${noun} carry a reading.`;
+});
+
+const labelFor = (cell: AreaDatum) =>
+  props.tooltip?.(cell.area, cell.datum) ?? `${cell.area.name}, no data`;
+
+// Labels are placed largest-area-first, and one is dropped when it would collide.
+//
+// Fitting each label to its own shape is not enough. The inner boroughs are the smallest and the
+// longest-named — Hammersmith and Fulham, Kensington and Chelsea and the City all meet inside a few
+// hundred pixels — and even where a shape has room by its own bounding box, its neighbour's label
+// reaches across and overlaps it. So the test is against the labels already placed, not against the
+// geometry: work down from the biggest area, keep a label only where its box is still clear, and let
+// the tooltip name whatever had to be dropped.
+const LABEL_EM = 9;
+/** The size labels actually render at, in viewBox units — the size the boxes have to reserve for. */
+const labelFont = computed(() => strokeScale.value * LABEL_EM);
+
+const labelBox = (area: LondonArea, font: number) => {
+  // Average glyph advance for this typeface at small sizes. Close enough to reserve the right room
+  // without measuring text, which would mean a layout pass per label.
+  const halfW = (area.name.length * font * 0.55) / 2;
+  const halfH = font * 0.75;
+  return { x0: area.cx - halfW, x1: area.cx + halfW, y0: area.cy - halfH, y1: area.cy + halfH };
+};
+
+const labelled = computed<AreaDatum[]>(() => {
+  if (!showLabels.value) return [];
+  const placed: ReturnType<typeof labelBox>[] = [];
+  const out: AreaDatum[] = [];
+  const font = labelFont.value;
+  // Biggest first, so when two labels compete the one with more map behind it wins.
+  const order = [...cells.value].sort((a, b) => b.area.w * b.area.h - a.area.w * a.area.h);
+  for (const cell of order) {
+    const box = labelBox(cell.area, font);
+    if (placed.some((p) => box.x0 < p.x1 && box.x1 > p.x0 && box.y0 < p.y1 && box.y1 > p.y0)) continue;
+    placed.push(box);
+    out.push(cell);
+  }
+  return out;
+});
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-3">
+    <div class="overflow-x-auto">
+      <!-- max-width and height are inline rather than utilities: Tailwind does not scan this
+           package, so a class used only here is never generated and the rule silently does
+           nothing. width and height stay attributes for the intrinsic size, and height:auto is
+           what keeps the aspect once max-width takes over in a container narrower than the map. -->
+      <UTooltip :text="tip.text" :reference="tip.el" :open="tipOpen">
+      <svg
+        :width="width"
+        :height="height"
+        :viewBox="frame.join(' ')"
+        role="img"
+        :aria-label="mapLabel"
+        :aria-busy="loading || undefined"
+        class="mx-auto block"
+        style="max-width: 100%; height: auto"
+      >
+        <!-- A `g` rather than a shape: the wrapper has to hold the path, and nesting a path inside a
+             path is invalid SVG that renders nothing. -->
+        <g
+          v-for="cell in drawn"
+          :key="cell.area.code"
+          :tabindex="focusable ? 0 : undefined"
+          :role="focusable ? (selectable ? 'button' : 'img') : undefined"
+          :aria-label="focusable ? labelFor(cell) : undefined"
+          :aria-pressed="selectable ? selectedSet.has(cell.area.code) : undefined"
+          :aria-hidden="focusable ? undefined : 'true'"
+          class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]"
+          @mouseenter="showTip($event, cell)"
+          @mouseleave="hideTip"
+          @focus="showTip($event, cell)"
+          @blur="hideTip"
+          @click="toggle(cell.area.code)"
+          @keydown.enter.prevent="toggle(cell.area.code)"
+          @keydown.space.prevent="toggle(cell.area.code)"
+        >
+          <path
+            :d="cell.area.d"
+            :fill="scale.colorOf(cell)"
+            :stroke-width="strokeScale"
+            :class="[
+              'transition-[filter] duration-150',
+              interactive ? 'cursor-pointer hover:brightness-110' : '',
+            ]"
+            :style="{
+              stroke: selectedSet.has(cell.area.code) ? 'var(--ui-primary)' : 'var(--ui-text-muted)',
+              strokeWidth: selectedSet.has(cell.area.code) ? strokeScale * 3 : strokeScale,
+            }"
+          />
+        </g>
+
+        <!-- Borough boundaries over the wards, so a ward map still reads as grouped. Drawn after the
+             fills and taking no pointer events, so it never steals a hover from the area beneath. -->
+        <path
+          v-if="showBoroughOutline"
+          class="pointer-events-none"
+          :d="LONDON_BOROUGHS.areas.map((a) => a.d).join('')"
+          fill="none"
+          :stroke-width="strokeScale * 1.6"
+          style="stroke: var(--ui-bg-inverted)"
+        />
+
+        <!-- Labels last so nothing paints over them, and out of the pointer's way. -->
+        <g class="pointer-events-none">
+          <text
+            v-for="cell in labelled"
+            :key="`t-${cell.area.code}`"
+            :x="cell.area.cx"
+            :y="cell.area.cy"
+            text-anchor="middle"
+            dominant-baseline="middle"
+            :font-size="labelFont"
+            fill="var(--ui-text-highlighted)"
+            :stroke-width="strokeScale * 2.5"
+            stroke="var(--ui-bg)"
+            paint-order="stroke"
+          >{{ cell.area.name }}</text>
+        </g>
+      </svg>
+      </UTooltip>
+    </div>
+
+    <!-- Centred with the map above it. The legend component itself is shared with the track and the
+         calendar, which are left-aligned, so the alignment belongs here rather than in it. -->
+    <div v-if="showLegend" class="flex justify-center">
+      <FCellLegend
+        :legend="scale.legend.value"
+        :show-empty="hasEmpty"
+        :empty-color="CELL_EMPTY_COLOR"
+      />
+    </div>
+  </div>
+</template>

package/packages/charts/src/FSparkline.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+// A word-sized graphic: the shape of a series, with no axes, no legend, no tooltip and no gridlines.
+// It answers "which way, and how steadily", never "what was Tuesday" — anything that needs a reading
+// is a chart, and FChartFrame is the component for that.
+//
+// Deliberately not built on FChartFrame: the frame's whole job is the ceremony a sparkline has none
+// of. It goes straight to VisXYContainer with zero margin, so the line touches its own edges and the
+// graphic is all data.
+//
+// Height is typographic, not perceptual. No study has measured "is this sparkline going up or down"
+// on a multi-segment line — the slope-ratio work everyone cites measured isolated segment PAIRS —
+// so the default follows Tufte's word-sized graphic and is set to sit with a line of text rather
+// than from any optimal-slope claim.
+import { computed, watchEffect } from 'vue';
+import { VisXYContainer, VisLine, VisArea } from '@unovis/vue';
+// CurveType members carry the same string values ('monotoneX', 'linear'); TypeScript will not accept
+// the bare literals for a string enum, so use the members.
+import { CurveType } from '@unovis/ts';
+import { motionDuration } from './motionDuration';
+import { useThemeVersion } from './useThemeVersion';
+
+const props = withDefaults(
+  defineProps<{
+    /** The series. Index is x; a gap is a null. */
+    data: (number | null)[];
+    /**
+     * The same measure over the period before, drawn as a dashed line behind the series. Both are
+     * plotted on ONE shared scale — a comparison drawn on its own scale would put two unrelated
+     * shapes in the same box and invite the reader to compare their heights.
+     *
+     * Aligned by index, not by date: give it the same number of points as `data`, so day one of
+     * this period sits above day one of the last. A shorter run simply stops early.
+     */
+    compare?: (number | null)[];
+    /** Any CSS colour. Defaults to the current text colour, so it inherits the tile's intent. */
+    color?: string;
+    /** The comparison line's colour. Defaults to the series colour at low opacity. */
+    compareColor?: string;
+    height?: number;
+    /** Fills under the line at low opacity. Off by default — a plain line is the quieter default. */
+    area?: boolean;
+    /** Marks the last point, so the series has an end rather than running off the edge. */
+    endpoint?: boolean;
+    /**
+     * Monotone interpolation, on by default. Monotone rather than a plain spline: it stays inside
+     * the data's own range, so no peak appears between two points that neither of them reached.
+     * Off draws straight segments instead, making every reading a corner. Both settings
+     * interpolate — neither draws a staircase, and no step curve is exposed. Line mark only.
+     */
+    curve?: boolean;
+    /**
+     * `line` reads a continuous measure; `bar` reads counts per period.
+     *
+     * The distinction is what the mark ASSERTS between readings. A line — curved or straight —
+     * always interpolates, which claims the measure existed at every point along it. That is true
+     * of a rate and false of a count: nothing happened "between" Tuesday and Wednesday, and drawing
+     * a path across the gap invents it. Bars claim nothing between buckets, which is why discrete
+     * counts belong to them.
+     *
+     * `compare`, `area`, `endpoint` and `curve` are line-only; a dev-mode warning fires if one is
+     * passed alongside `bar` rather than being silently dropped.
+     */
+    mark?: 'line' | 'bar';
+  }>(),
+  { height: 32, color: 'currentColor', area: false, endpoint: false, curve: true, mark: 'line', compare: undefined, compareColor: undefined },
+);
+
+if (import.meta.env.DEV) {
+  watchEffect(() => {
+    if (props.mark !== 'bar') return;
+    const ignored = (['compare', 'area', 'endpoint'] as const).filter((k) => props[k]);
+    if (ignored.length)
+      console.warn(`[FSparkline] \`${ignored.join('`, `')}\` ${ignored.length > 1 ? 'are' : 'is'} line-only and ignored under mark="bar".`);
+  });
+}
+
+// A theme flip changes what currentColor resolves to, and Unovis caches colours on mount.
+const themeVersion = useThemeVersion();
+
+// One row per index carrying both series, so Unovis puts them on a single shared y scale.
+// Every accessor takes the whole Point: Unovis infers its Datum generic from the first accessor it
+// sees, so narrowing each one to just the field it reads would pin Datum to that shape and make the
+// others unassignable.
+type Point = { i: number; v: number | null; c: number | null };
+const points = computed<Point[]>(() =>
+  props.data.map((v, i) => ({ i, v, c: props.compare?.[i] ?? null })),
+);
+const x = (d: Point) => d.i;
+const y = (d: Point) => d.v;
+const yCompare = (d: Point) => d.c;
+
+const hasCompare = computed(() => !!props.compare?.some((v) => v !== null && v !== undefined));
+
+// Bars are measured from zero, not from the data's own floor. The line mark frames min-to-max
+// because it reads as a shape; a bar reads as a LENGTH, and a bar that starts anywhere but zero has
+// a length no longer proportional to its value. The domain therefore always contains zero, which
+// also puts negative readings below the baseline instead of quietly flipping them.
+const barDomain = computed(() => {
+  const vals = props.data.filter((v): v is number => v !== null);
+  const lo = Math.min(0, ...vals);
+  const hi = Math.max(0, ...vals);
+  return { lo, span: hi - lo || 1 };
+});
+
+/** Bottom offset and height as percentages, or null for a gap. */
+const barFor = (v: number | null) => {
+  if (v === null) return null;
+  const { lo, span } = barDomain.value;
+  const zero = (0 - lo) / span;
+  const value = (v - lo) / span;
+  const from = Math.min(zero, value);
+  const to = Math.max(zero, value);
+  return {
+    bottom: `${from * 100}%`,
+    // A reading of zero keeps a hairline. Zero is a real measurement and a gap is the absence of
+    // one; collapsing the bar to nothing would render the two identically.
+    height: `max(${(to - from) * 100}%, 1px)`,
+    // The cap goes on the free end, so a bar below the baseline rounds downward rather than into
+    // the axis it grows from.
+    negative: v < 0,
+  };
+};
+
+const last = computed(() => {
+  for (let i = props.data.length - 1; i >= 0; i--) if (props.data[i] !== null) return props.data[i] as number;
+  return null;
+});
+const bounds = computed(() => {
+  const vals = props.data.filter((v): v is number => v !== null);
+  return { min: Math.min(...vals), max: Math.max(...vals) };
+});
+// Fraction of the height the final point sits at, for the endpoint dot.
+const endpointTop = computed(() => {
+  const { min, max } = bounds.value;
+  if (last.value === null || max === min) return 50;
+  return (1 - (last.value - min) / (max - min)) * 100;
+});
+</script>
+
+<template>
+  <div class="relative w-full" :style="{ height: `${height}px`, color }">
+    <!-- Plain DOM rather than a mark: there are no axes, scales or tooltip to share with the XY
+         container, so a flex row of columns is the whole implementation and costs no chart runtime.
+         The 2px gap is fixed, so the bucket count sets how thin the bars get: n buckets across w
+         pixels leaves (w - 2(n - 1)) / n each. A tile 280px wide holds 12 buckets at 21px and 60 at
+         2.7px — still bars; past roughly 60 the gap outweighs the bar and the row reads as a
+         texture, where the measure belongs to a line instead. -->
+    <div v-if="mark === 'bar'" class="flex h-full w-full items-end gap-0.5" aria-hidden="true">
+      <span
+        v-for="(v, i) in data"
+        :key="i"
+        class="relative h-full min-w-0 flex-1"
+      >
+        <span
+          v-if="barFor(v)"
+          class="absolute inset-x-0 bg-current"
+          :class="barFor(v)!.negative ? 'rounded-b-[3px]' : 'rounded-t-[3px]'"
+          :style="{ bottom: barFor(v)!.bottom, height: barFor(v)!.height }"
+        />
+      </span>
+    </div>
+
+    <!-- No bottom margin: the graphic sits on the tile's own bottom edge, and 2px of clearance
+         there reads as a misaligned card rather than as breathing room. The top keeps its 2px so a
+         peak is not clipped by the stroke's own width, and the right reserves room for the endpoint
+         dot when there is one. -->
+    <VisXYContainer
+      v-else
+      :key="themeVersion"
+      :data="points"
+      :height="height"
+      :margin="{ top: 2, right: endpoint ? 4 : 0, bottom: 0, left: 0 }"
+      :duration="motionDuration('slow')"
+    >
+      <!-- Comparison first, so the current series draws over it. Dashed and thinner: the dash says
+           "not now" without needing a legend, and holding the same hue keeps the pair readable for a
+           colour-blind reader, who would lose a hue-only distinction at this size. -->
+      <VisLine
+        v-if="hasCompare"
+        :x="x"
+        :y="yCompare"
+        :color="compareColor ?? color"
+        :line-width="1"
+        :line-dash-array="[2, 2]"
+        :opacity="0.45"
+        :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear"
+      />
+      <VisArea v-if="area" :x="x" :y="y" :color="color" :opacity="0.12" :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear" />
+      <VisLine :x="x" :y="y" :color="color" :line-width="1.5" :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear" />
+    </VisXYContainer>
+    <span
+      v-if="mark === 'line' && endpoint && last !== null"
+      class="pointer-events-none absolute right-0 size-1.5 -translate-y-1/2 rounded-full bg-current"
+      :style="{ top: `${endpointTop}%` }"
+      aria-hidden="true"
+    />
+  </div>
+</template>