@humanforest/charts 0.3.6 → 0.4.0

package/src/FDottedMap.vue

@@ -3,8 +3,8 @@
 // FStatusTrack puts cells in a sequence, FCalendarGrid puts them on a date grid, this puts them on a
 // geography. Colour resolution is useCellScale's; this component owns the binning and the layout.
 //
-// It is not a map. There is no pan, no zoom and no projection at read time — a dot is roughly a
-// square kilometre and locates nothing. Real geography is Mapbox's job. This answers "where in
+// It is not a map. There is no pan, no zoom and no projection at read time — a dot on the default
+// grid covers about 0.37 km² and locates nothing. Real geography is Mapbox's job. This answers "where in
 // London" at a glance, with no tiles and no network.
 import { computed, ref, shallowRef, watchEffect } from 'vue';
 import { useCellScale, type SequentialRamp } from './useCellScale';
@@ -13,7 +13,7 @@ import {
   LONDON_GRID,
   RIVER_COLOR,
   loadLondonGrid,
-  dotAt,
+  binPoints,
   dotKey,
   type DotDensity,
   type LondonGrid,
@@ -31,7 +31,7 @@ const props = withDefaults(
     points: P[];
     lat: (p: P) => number;
     lng: (p: P) => number;
-    /** Summed per dot as `value(p) ?? 1`, so the default reading is a count of points. */
+    /** Summed per dot. Unset, each point counts one; a null, undefined or non-finite return adds nothing. */
     value?: (p: P) => number | null | undefined;
     ramp?: SequentialRamp;
     /** Intensity domain, in the caller's units. Two maps compared side by side must both set it. */
@@ -121,22 +121,11 @@ const land = computed(() => new Set(landDots.value.map(([c, r]) => dotKey(c, r))
 
 // Points are summed into their dot. A point outside the boundary, or on the river, has nowhere to
 // land — those are counted rather than quietly absorbed, so a caller feeding the wrong city or the
-// wrong coordinate order can see it. The river is drawn but is not a bucket: a ride does not start
+// wrong coordinate order can see it. The river is drawn but is not a bucket: a trip does not start
 // in the Thames, and letting one land there would put a reading on a dot that cannot have one.
-const binned = computed(() => {
-  const totals = new Map<string, number>();
-  let dropped = 0;
-  for (const p of props.points) {
-    const at = dotAt(grid.value, props.lat(p), props.lng(p));
-    const key = at && dotKey(at[0], at[1]);
-    if (!key || !land.value.has(key)) {
-      dropped++;
-      continue;
-    }
-    totals.set(key, (totals.get(key) ?? 0) + (props.value?.(p) ?? 1));
-  }
-  return { totals, dropped };
-});
+const binned = computed(() =>
+  binPoints(grid.value, land.value, props.points, props.lat, props.lng, props.value),
+);
 
 // Every land dot gets a cell, whether or not a point reached it.
 //
@@ -155,9 +144,9 @@ const cells = computed<DotInfo[]>(() =>
 
 // How a total is spaced along the ramp.
 //
-// Density is heavy-tailed, and linearly spacing a heavy tail produces a blank map: with a typical
-// week of rides the median dot holds 1 and the busiest holds over a hundred, so five equal buckets
-// put roughly ninety per cent of the city in the palest one and the picture says nothing. Compress
+// Density is heavy-tailed, and linearly spacing a heavy tail produces a blank map: in a week of
+// trip starts the median dot can hold 1 and the busiest 50, so five equal buckets put over ninety
+// per cent of the city in the palest one and the picture says nothing. Compress
 // the tail and the structure appears. Nothing is compressed by default — a transform the caller did
 // not ask for would quietly change what the ramp claims — but a density map usually wants one.
 const spaced = (v: number) =>
@@ -226,7 +215,7 @@ const byPosition = computed(() => {
 const mapLabel = computed(() => {
   if (props.ariaLabel) return props.ariaLabel;
   // The busiest dot in the caller's units. scale.domain is in spaced units and would report a
-  // logarithm as though it were a ride count.
+  // logarithm as though it were a count.
   const hi = props.domain?.[1] ?? cells.value.reduce((m, c) => (c.value > m ? c.value : m), 0);
   const placed = props.points.length - binned.value.dropped;
   return `London, as a grid of dots shaded by density. The busiest holds ${hi.toLocaleString('en-GB')}, across ${placed.toLocaleString('en-GB')} of ${props.points.length.toLocaleString('en-GB')} points.`;

package/src/FLondonMap.vue

@@ -15,6 +15,8 @@ import {
   LONDON_BOROUGHS,
   loadLondonWards,
   indexAreas,
+  areaInteraction,
+  layoutAreas,
   type AreaLevel,
   type LondonArea,
   type LondonAreaSet,
@@ -54,7 +56,7 @@ const props = withDefaults(
      * 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
+     * ⚠ WHAT IT COSTS: without the other areas there is 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
@@ -68,7 +70,7 @@ const props = withDefaults(
     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. */
+    /** Names of the drawn areas 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. */
@@ -130,18 +132,16 @@ 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'),
+const reach = computed(() =>
+  areaInteraction({
+    level: props.level,
+    chrome: showChrome.value,
+    tooltip: !!props.tooltip,
+    selectable: props.selectable,
+  }),
 );
+const interactive = computed(() => reach.value.interactive);
+const focusable = computed(() => reach.value.focusable);
 
 // Strokes invert with the mode rather than matching the page.
 //
@@ -176,35 +176,20 @@ 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];
-});
+// The drawn areas, the frame and the labels all come from layoutAreas. `cells` itself is not
+// filtered: the empty-state check and the default label read the whole level.
+const layout = computed(() =>
+  layoutAreas(set.value, {
+    matched: new Set(byArea.value.keys()),
+    fit: props.fit,
+    width: width.value,
+    labels: showLabels.value,
+  }),
+);
+const drawn = computed<AreaDatum[]>(() =>
+  layout.value.drawn.map((area) => ({ area, datum: byArea.value.get(area.code) })),
+);
+const frame = computed(() => layout.value.frame);
 
 // 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
@@ -214,7 +199,7 @@ const spaced = (v: number) =>
   props.scale === 'sqrt' ? Math.sqrt(v) : props.scale === 'log' ? Math.log1p(v) : v;
 
 const scale = useCellScale<AreaDatum>({
-  mode: props.mode,
+  mode: computed(() => props.mode),
   states: computed(() => props.states),
   ramp: computed(() => props.ramp ?? ('forest' as SequentialRamp)),
   domain: computed(() =>
@@ -265,42 +250,6 @@ const mapLabel = computed(() => {
 
 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>
@@ -369,18 +318,18 @@ const labelled = computed<AreaDatum[]>(() => {
         <!-- 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"
+            v-for="area in layout.labelled"
+            :key="`t-${area.code}`"
+            :x="area.cx"
+            :y="area.cy"
             text-anchor="middle"
             dominant-baseline="middle"
-            :font-size="labelFont"
+            :font-size="layout.font"
             fill="var(--ui-text-highlighted)"
             :stroke-width="strokeScale * 2.5"
             stroke="var(--ui-bg)"
             paint-order="stroke"
-          >{{ cell.area.name }}</text>
+          >{{ area.name }}</text>
         </g>
       </svg>
       </UTooltip>

package/src/FSparkline.vue

@@ -11,14 +11,14 @@
 // 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 { computed, useId, 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';
-import { sparklineDomain } from './sparklineDomain';
+import { sparklineBar, sparklineBarDomain, sparklineDomain, sparklineEndpoint, sparklineY } from './sparklineDomain';
 
 const props = withDefaults(
   defineProps<{
@@ -47,7 +47,7 @@ const props = withDefaults(
     /** 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. */
+    /** Fills under the line, fading from the line down to the floor. 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;
@@ -74,9 +74,15 @@ const props = withDefaults(
      * 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.
+     * set alongside `bar` rather than being silently dropped. `curve` is on by default, so for it
+     * the warning is for `:curve="false"`.
      */
     mark?: 'line' | 'bar';
+    /**
+     * The graphic's accessible name. With it the sparkline is announced as an image; without it it is
+     * decorative and hidden from the accessibility tree, the reading being the figure beside it.
+     */
+    ariaLabel?: string;
   }>(),
   { height: 32, color: 'var(--ui-primary)', area: false, endpoint: false, fill: false, curve: true, mark: 'line', compare: undefined, compareColor: undefined },
 );
@@ -84,7 +90,10 @@ const props = withDefaults(
 if (import.meta.env.DEV) {
   watchEffect(() => {
     if (props.mark !== 'bar') return;
-    const ignored = (['compare', 'area', 'endpoint'] as const).filter((k) => props[k]);
+    const ignored = [
+      ...(['compare', 'area', 'endpoint'] as const).filter((k) => props[k]),
+      ...(props.curve ? [] : ['curve']),
+    ];
     if (ignored.length)
       console.warn(`[FSparkline] \`${ignored.join('`, `')}\` ${ignored.length > 1 ? 'are' : 'is'} line-only and ignored under mark="bar".`);
   });
@@ -93,6 +102,16 @@ if (import.meta.env.DEV) {
 // A theme flip changes what currentColor resolves to, and Unovis caches colours on mount.
 const themeVersion = useThemeVersion();
 
+// The area fades from the series colour at the line to nothing at the floor, rather than lying under
+// it as a flat wash. 0.24 → 0 averages the 0.12 the flat fill used: the same ink, moved up to the line
+// where the shape is.
+//
+// ★ THE ID IS PER INSTANCE. The stops are `currentColor`, and a gradient resolves that where it is
+// DEFINED, not where it is used — a row of tiles sharing one id would all paint in the first tile's
+// colour. useId() rather than a counter, for the reason in packages/ui/test/ssr-ids.static.test.ts.
+const fadeId = `fsp-fade-${useId()}`;
+const fadeDefs = `<linearGradient id="${fadeId}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="currentColor" stop-opacity="0.24" /><stop offset="1" stop-color="currentColor" stop-opacity="0" /></linearGradient>`;
+
 // 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
@@ -101,10 +120,11 @@ 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 })),
 );
-// Readings are plotted as their height above the frame's floor, which is 0 except under `area`.
+// Readings are plotted as their height above the frame's floor, which is 0 except under `area`. A gap
+// breaks the line; sparklineY says how.
 const x = (d: Point) => d.i;
-const y = (d: Point) => (d.v === null ? null : d.v - frame.value.floor);
-const yCompare = (d: Point) => (d.c === null ? null : d.c - frame.value.floor);
+const y = (d: Point) => sparklineY(d.v, frame.value.floor);
+const yCompare = (d: Point) => sparklineY(d.c, frame.value.floor);
 
 const hasCompare = computed(() => !!props.compare?.some((v) => v !== null && v !== undefined));
 
@@ -114,47 +134,24 @@ const hasCompare = computed(() => !!props.compare?.some((v) => v !== null && v !
 // the floor at 0 it runs from 0 up to each reading's height above the floor.
 const frame = computed(() => sparklineDomain(props.data, props.compare, props.area));
 
-// Bars are the exception: they are measured from zero, not from the data's own floor. A bar reads
-// as a LENGTH, and a bar that starts anywhere but zero has a length no longer proportional to its
-// value. The bar 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)`,
-  };
-};
+// Bars are the exception: measured from zero, not from the data's own floor. Why lives in
+// sparklineBarDomain.
+const barDomain = computed(() => sparklineBarDomain(props.data));
+const barFor = (v: number | null) => sparklineBar(v, barDomain.value);
 
-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;
-});
-// Fraction of the height the final point sits at, for the endpoint dot.
-const endpointTop = computed(() => {
-  const [lo, hi] = frame.value.domain ?? [0, 0];
-  if (last.value === null || hi === lo) return 50;
-  return (1 - (last.value - frame.value.floor - lo) / (hi - lo)) * 100;
-});
+// Percentage down the height for the endpoint dot, or null when there is no reading to mark.
+const endpointTop = computed(() => sparklineEndpoint(props.data, frame.value));
 </script>
 
 <template>
-  <div class="relative w-full" :class="fill ? 'h-full' : ''" :style="fill ? { minHeight: `${height}px`, color } : { height: `${height}px`, color }">
+  <div
+    class="relative w-full"
+    :class="fill ? 'h-full' : ''"
+    :style="fill ? { minHeight: `${height}px`, color } : { height: `${height}px`, color }"
+    :role="ariaLabel ? 'img' : undefined"
+    :aria-label="ariaLabel || undefined"
+    :aria-hidden="ariaLabel ? undefined : 'true'"
+  >
     <!-- 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
@@ -162,7 +159,7 @@ const endpointTop = computed(() => {
          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. Each bar is rounded at both ends:
          no baseline is drawn for a square end to sit on. -->
-    <div v-if="mark === 'bar'" class="flex w-full items-end gap-0.5" :class="fill ? 'absolute inset-0' : 'h-full'" aria-hidden="true">
+    <div v-if="mark === 'bar'" class="flex w-full items-end gap-0.5" :class="fill ? 'absolute inset-0' : 'h-full'">
       <span
         v-for="(v, i) in data"
         :key="i"
@@ -193,6 +190,7 @@ const endpointTop = computed(() => {
       :margin="{ top: 2, right: endpoint ? 4 : 0, bottom: 0, left: 0 }"
       :y-domain="frame.domain ?? undefined"
       :duration="motionDuration('slow')"
+      :svg-defs="fadeDefs"
     >
       <!-- 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
@@ -207,11 +205,11 @@ const endpointTop = computed(() => {
         :opacity="0.45"
         :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear"
       />
-      <VisArea v-if="area" :x="x" :y="y" :baseline="0" :color="color" :opacity="0.12" :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear" />
+      <VisArea v-if="area" :x="x" :y="y" :baseline="0" :color="`url(#${fadeId})`" :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"
+      v-if="mark === 'line' && endpoint && endpointTop !== 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"

package/src/FStatusTrack.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts" generic="D extends Record<string, unknown>">
 // A row of segments, one per bucket, each carrying a state or an intensity. One asset per track:
-// a dock's health across ninety days, a bike's week. Colour resolution is useCellScale's; this
-// component is layout, labels and the interaction surface.
+// a vehicle's state across ninety days, a parking place's week. Colour resolution is
+// useCellScale's; this component is layout, labels and the interaction surface.
 //
 // Plain DOM rather than SVG — the segments are a flex row, so the browser does the layout, and an
 // interactive segment can be a real <button> that focuses and announces itself.
 import { computed, ref } from 'vue';
 import type { BulletLegendItemInterface } from '@unovis/ts';
-import { useCellScale, CELL_EMPTY_COLOR, type SequentialRamp } from './useCellScale';
+import { useCellScaleProps, CELL_EMPTY_COLOR, type SequentialRamp } from './useCellScale';
 import { CELL_SIZES, orElse, type CellSize } from './cellSize';
+import { rovingIndex } from './rovingFocus';
 import FCellLegend from './FCellLegend.vue';
 
 const props = withDefaults(
@@ -41,7 +42,8 @@ const props = withDefaults(
     legend?: boolean;
     /** Start and end captions under the track, e.g. ['90 days ago', 'Today']. */
     caption?: [string, string];
-    /** Hover and focus text. Given one, segments become focusable buttons and get the house bubble.
+    /** Hover and focus text. Given one, segments become focusable buttons and get the house bubble;
+     *  the track is one Tab stop, and ArrowLeft, ArrowRight, Home and End move between segments.
      *  Suppressed at xs and sm, where a segment is too thin to hit reliably. */
     tooltip?: (d: D, i: number) => string;
     /** Sentence for assistive tech describing the whole track. */
@@ -67,16 +69,7 @@ const showChrome = computed(() => orElse(props.chrome, spec.value.chrome));
 const showLegend = computed(() => orElse(props.legend, showChrome.value));
 const interactive = computed(() => !!props.tooltip && showChrome.value);
 
-const scale = useCellScale<D>({
-  mode: props.mode,
-  states: computed(() => props.states),
-  ramp: computed(() => props.ramp ?? ('forest' as SequentialRamp)),
-  domain: computed(() => props.domain),
-  steps: computed(() => props.steps),
-  data: computed(() => props.data),
-  value: props.value,
-  state: props.state,
-});
+const scale = useCellScaleProps<D>(props);
 
 // The label an assistive reader gets per segment. Without a tooltip the segments are decorative and
 // the track's own label carries the meaning, so this is only consulted when one is given.
@@ -103,6 +96,21 @@ const showTip = (event: Event, text: string) => {
 const hideTip = () => {
   tipOpen.value = false;
 };
+
+// Roving focus: the track is one Tab stop, held by the segment focused last, and the arrow keys,
+// Home and End move it.
+const focusIndex = ref(0);
+const tabStop = computed(() => Math.min(focusIndex.value, props.data.length - 1));
+const onFocus = (event: Event, d: D, i: number) => {
+  focusIndex.value = i;
+  showTip(event, labelFor(d, i));
+};
+const onKeydown = (event: KeyboardEvent, i: number) => {
+  const next = rovingIndex(event, i, 0, props.data.length - 1);
+  if (next === null) return;
+  event.preventDefault();
+  ((event.currentTarget as Element).parentElement?.children[next] as HTMLElement | undefined)?.focus();
+};
 </script>
 
 <template>
@@ -126,10 +134,12 @@ const hideTip = () => {
             :style="{ background: scale.colorOf(d), borderRadius: `${radius}px` }"
             :aria-label="interactive ? labelFor(d, i) : undefined"
             :aria-hidden="interactive ? undefined : 'true'"
+            :tabindex="interactive ? (i === tabStop ? 0 : -1) : undefined"
             @mouseenter="interactive && showTip($event, labelFor(d, i))"
             @mouseleave="hideTip"
-            @focus="interactive && showTip($event, labelFor(d, i))"
+            @focus="interactive && onFocus($event, d, i)"
             @blur="hideTip"
+            @keydown="interactive && onKeydown($event, i)"
           />
         </div>
       </UTooltip>

package/src/crosshairConfig.ts

@@ -0,0 +1,27 @@
+// What FChartFrame binds onto VisCrosshair for its circles: a colour, and no x or y.
+//
+// Unovis's Crosshair reads its accessors either all from its own config or all from what
+// XYContainer derives from the marks, and only that derivation knows which marks stack. So with
+// no x or y here, a stacked VisArea or VisStackedBar puts each dot at its band's top, and a line
+// or single-accessor area puts it at the value.
+//
+// That derivation lists one accessor per mark, stacked marks first, so a series' colour by dot
+// index goes wrong once marks repeat a series (an area under its own line) or a line comes before
+// a stack. Each dot takes the colour of the series its accessor belongs to instead; an accessor
+// that belongs to no series keeps the colour at its index.
+import type { CrosshairAccessors, CrosshairConfigInterface } from '@unovis/ts';
+import type { ChartAccessors } from './fromCategories';
+
+export function crosshairConfig<Datum>(
+  acc: Pick<ChartAccessors<Datum>, 'yAccessors' | 'colors'>,
+  /** The crosshair's accessors as it resolves them at draw time. */
+  resolved: () => Pick<CrosshairAccessors<Datum>, 'y' | 'yStacked'> | undefined,
+): Pick<CrosshairConfigInterface<Datum>, 'color'> {
+  return {
+    color: (_d: Datum, i: number) => {
+      const { y, yStacked } = resolved() ?? {};
+      const series = (acc.yAccessors as unknown[]).indexOf([...(yStacked ?? []), ...(y ?? [])][i]);
+      return acc.colors[series === -1 ? i % acc.colors.length : series];
+    },
+  };
+}

package/src/distribution.ts

@@ -88,6 +88,18 @@ export function segmentRadius(index: number, count: number, radius: number, join
   return '0';
 }
 
+/**
+ * The bar's sentence for assistive tech: each part with its share, then any remainder, as
+ * "Food 62%, Software 24%, unaccounted 14%". The bar's lengths are the only place the shares are
+ * stated unless `showShare` is on, so the sentence carries them regardless. A bar with nothing to
+ * state is "No data", because the element carrying it needs a non-empty name.
+ */
+export function distributionLabel(shares: DistributionShares, locale = 'en-GB'): string {
+  const parts = shares.parts.map((p) => `${p.segment.label} ${formatShare(p.share, locale)}`);
+  if (shares.remainder > 0) parts.push(`unaccounted ${formatShare(shares.remainder, locale)}`);
+  return parts.join(', ') || 'No data';
+}
+
 /**
  * A share as a percentage. Whole numbers: at the width this component is read at, a decimal place
  * is precision the bar itself cannot show. A non-zero share that would round to nothing is stated

package/src/frameIndex.ts

@@ -0,0 +1,36 @@
+// The index-chart rules FChartFrame lays under a call site's own container and axis config.
+//
+// With no xKey the frame plots the row index, so the category axis — x, or y when `horizontal` —
+// takes ticks at the row indices and half a row of gutter past the first and last rows, and the
+// grid follows the value axis. An xKey chart plots a real field and keeps the library's exact
+// extent. The call site's own keys are spread last, so an explicit domain or tickValues replaces
+// the index default.
+import type { AxisConfigInterface, XYContainerConfigInterface } from '@unovis/ts';
+import { axisX as axisXPreset, axisY as axisYPreset } from './presets';
+
+type IndexInput = { data: readonly unknown[]; xKey?: string; horizontal?: boolean };
+
+/** Both axis configs: the house preset, then the index ticks and grid default, then the call site's keys. */
+export function indexAxes<Datum>(
+  p: IndexInput & {
+    axisX?: Partial<AxisConfigInterface<Datum>> | false;
+    axisY?: Partial<AxisConfigInterface<Datum>> | false;
+  },
+): { axisX: Partial<AxisConfigInterface<Datum>>; axisY: Partial<AxisConfigInterface<Datum>> } {
+  const ticks = p.xKey ? undefined : { tickValues: p.data.map((_, i) => i) };
+  return {
+    axisX: { ...axisXPreset, ...(p.horizontal ? { gridLine: true } : ticks), ...(p.axisX || {}) },
+    axisY: { ...axisYPreset, ...(p.horizontal ? { gridLine: false, ...ticks } : {}), ...(p.axisY || {}) },
+  };
+}
+
+/** The container config: the half-row gutter on the category domain, then the call site's keys. */
+export function indexContainer<Datum>(
+  p: IndexInput & { container?: Partial<XYContainerConfigInterface<Datum>> },
+): Partial<XYContainerConfigInterface<Datum>> {
+  const gutter: [number, number] = [-0.5, p.data.length - 0.5];
+  return {
+    ...(p.xKey || p.data.length === 0 ? {} : p.horizontal ? { yDomain: gutter } : { xDomain: gutter }),
+    ...(p.container || {}),
+  };
+}

package/src/fromCategories.ts

@@ -8,9 +8,10 @@ export interface ChartAccessors<Datum> {
   /** Ordered legend entries for `<VisBulletLegend :items>`; multi-colour series show their first colour. */
   legendItems: BulletLegendItemInterface[];
   /**
-   * One accessor per series key, in category order. Values pass through untouched — a null or
-   * undefined cell stays null/undefined (Unovis' NumericAccessor accepts both and renders the
-   * gap); coercing would plot missing data as zero.
+   * One accessor per series key, in category order. Values pass through untouched, so a cell is
+   * drawn as Unovis draws it: on a VisLine an undefined, NaN, Infinity or non-numeric cell breaks
+   * the line (see fallbackValue and interpolateMissingData), and a null plots as zero. Coercing
+   * would plot every missing cell as zero.
    */
   yAccessors: Array<(d: Datum) => number | null | undefined>;
   /** X accessor: the row's `xKey` value when one is given, otherwise the array index —
@@ -41,3 +42,16 @@ export function fromCategories<Datum extends Record<string, unknown>>(
     xAccessor: xKey ? (d) => d[xKey] as number : (_d, i) => i,
   };
 }
+
+/**
+ * A chart frame's accessible name: `ariaLabel` when given, otherwise the series it plots, as
+ * "Chart: Trips, Utilisation". With no categories it is "Chart".
+ */
+export function chartLabel(
+  categories: Record<string, BulletLegendItemInterface> | undefined,
+  ariaLabel?: string,
+): string {
+  if (ariaLabel) return ariaLabel;
+  const names = Object.entries(categories ?? {}).map(([key, item]) => String(item.name ?? key));
+  return names.length ? `Chart: ${names.join(', ')}` : 'Chart';
+}