@humanforest/charts 0.3.7 → 0.4.0

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 { sparklineBar, sparklineBarDomain, sparklineDomain, sparklineEndpoint } 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;
@@ -102,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
@@ -110,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));
 
@@ -179,6 +190,7 @@ const endpointTop = computed(() => sparklineEndpoint(props.data, frame.value));
       :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
@@ -193,7 +205,7 @@ const endpointTop = computed(() => sparklineEndpoint(props.data, frame.value));
         :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

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/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 —

package/src/londonAreas.ts

@@ -74,6 +74,26 @@ export const indexAreas = (areas: LondonArea[]): Map<string, LondonArea> => {
   return byKey;
 };
 
+/**
+ * What a London map's areas take: pointer affordance (`interactive`) and a tab stop (`focusable`).
+ *
+ * Selection is an action the caller asked for, so a selectable map takes clicks and focus at every
+ * size and level, whatever the chrome. A tooltip is chrome: it needs chrome on, and reaches the
+ * keyboard only at borough level, where 33 stops is navigation rather than 704 obstacles.
+ */
+export const areaInteraction = (map: {
+  level: AreaLevel;
+  chrome: boolean;
+  tooltip: boolean;
+  selectable: boolean;
+}): { interactive: boolean; focusable: boolean } => {
+  const hover = map.tooltip && map.chrome;
+  return {
+    interactive: map.selectable || hover,
+    focusable: map.selectable || (hover && map.level === 'borough'),
+  };
+};
+
 /**
  * One area framed to itself: the area `key` names (by code or name, either case) and a viewBox of
  * its stored box, padded on every side by `pad` × its longer side. Undefined for a key the set does
@@ -89,3 +109,49 @@ export const frameArea = (
   const p = Math.max(area.w, area.h) * pad;
   return { area, viewBox: `${area.x - p} ${area.y - p} ${area.w + p * 2} ${area.h + p * 2}` };
 };
+
+const FIT_PAD = 0.06;
+const LABEL_EM = 9;
+
+/**
+ * What a map of `set` draws, the viewBox it draws it in, and which drawn areas carry a name.
+ *
+ * `fit: 'selection'` draws only the areas whose codes `matched` holds, framed to the union of their
+ * bounding boxes padded by 6% of its longer side. With `fit: 'city'`, or nothing matched, it draws
+ * every area in the set's viewBox. `font` is the label size in viewBox units at the rendered `width`.
+ *
+ * With `labels` set, areas are named biggest bounding box first, and a label whose box would overlap
+ * one already placed is dropped: a neighbour's label can reach across an area that has room by its
+ * own box.
+ */
+export const layoutAreas = (
+  set: LondonAreaSet,
+  map: { matched: ReadonlySet<string>; fit: 'city' | 'selection'; width: number; labels: boolean },
+): { drawn: LondonArea[]; frame: readonly number[]; font: number; labelled: LondonArea[] } => {
+  const fitted = map.fit === 'selection' && set.areas.some((a) => map.matched.has(a.code));
+  const drawn = fitted ? set.areas.filter((a) => map.matched.has(a.code)) : set.areas;
+  let frame: readonly number[] = set.viewBox;
+  if (fitted) {
+    const x0 = Math.min(...drawn.map((a) => a.x));
+    const y0 = Math.min(...drawn.map((a) => a.y));
+    const x1 = Math.max(...drawn.map((a) => a.x + a.w));
+    const y1 = Math.max(...drawn.map((a) => a.y + a.h));
+    const pad = Math.max(x1 - x0, y1 - y0) * FIT_PAD;
+    frame = [x0 - pad, y0 - pad, x1 - x0 + pad * 2, y1 - y0 + pad * 2];
+  }
+  const font = (frame[2]! / map.width) * LABEL_EM;
+  const labelled: LondonArea[] = [];
+  if (map.labels) {
+    const placed: { x0: number; x1: number; y0: number; y1: number }[] = [];
+    for (const a of [...drawn].sort((p, q) => q.w * q.h - p.w * p.h)) {
+      // Average glyph advance at small sizes: enough to reserve room without measuring text.
+      const halfW = (a.name.length * font * 0.55) / 2;
+      const halfH = font * 0.75;
+      const box = { x0: a.cx - halfW, x1: a.cx + halfW, y0: a.cy - halfH, y1: a.cy + halfH };
+      if (placed.some((p) => box.x0 < p.x1 && box.x1 > p.x0 && box.y0 < p.y1 && box.y1 > p.y0)) continue;
+      placed.push(box);
+      labelled.push(a);
+    }
+  }
+  return { drawn, frame, font, labelled };
+};

package/src/londonGrid.ts

@@ -65,3 +65,30 @@ export const dotAt = (grid: LondonGrid, lat: number, lng: number): [number, numb
 };
 
 export const dotKey = (col: number, row: number) => `${col},${row}`;
+
+/**
+ * Sums points into their dot. A point off the grid, or on a cell not in `land`, is dropped and
+ * counted. Without `value` each point counts one; a null, undefined or non-finite return adds nothing.
+ */
+export const binPoints = <P>(
+  grid: LondonGrid,
+  land: Set<string>,
+  points: readonly P[],
+  lat: (p: P) => number,
+  lng: (p: P) => number,
+  value?: (p: P) => number | null | undefined,
+) => {
+  const totals = new Map<string, number>();
+  let dropped = 0;
+  for (const p of points) {
+    const at = dotAt(grid, lat(p), lng(p));
+    const key = at && dotKey(at[0], at[1]);
+    if (!key || !land.has(key)) {
+      dropped++;
+      continue;
+    }
+    const v = value ? value(p) : 1;
+    totals.set(key, (totals.get(key) ?? 0) + (typeof v === 'number' && Number.isFinite(v) ? v : 0));
+  }
+  return { totals, dropped };
+};

package/src/presets.ts

@@ -22,8 +22,9 @@ export const axisY: Partial<AxisConfigInterface<unknown>> = Object.freeze({
 });
 
 /** Legend: currently empty. A bare `<VisBulletLegend :items="…">` already renders the house look —
- *  spacing and type come from the adapter's --vis-legend-* custom properties, and no call site
- *  repeats any config. The object exists so shared legend config has one home when it appears. */
+ *  the adapter sets its label colour and the --vis-font-family its type falls back to, Unovis's
+ *  own --vis-legend-* defaults set the sizes and spacing, and no call site repeats any config. The
+ *  object exists so shared legend config has one home when it appears. */
 export const legendDefaults: Partial<BulletLegendConfigInterface> = Object.freeze({});
 
 /** Tooltip: above-right of the anchor, held clear of the pointer.
@@ -34,7 +35,8 @@ export const legendDefaults: Partial<BulletLegendConfigInterface> = Object.freez
  *  track the pointer whatever is set here. And pinning anchors to the hovered element's BOUNDING
  *  BOX, so it only reads as "next to what I hovered" when the box is the mark: right for a bar,
  *  wrong for a donut arc or a treemap group, whose boxes are far larger than the shape under the
- *  cursor. Hence FChartFrameSingle, which carries exactly those marks, defaults the other way.
+ *  cursor. Hence both frames set followCursor back to true, and by default useTooltipSnap then
+ *  places the panel.
  *
  *  The shifts are what keep the pointer off the panel on that tracking path. Unovis adds a fixed
  *  5px margin, which puts the tooltip's corner under the cursor's own hotspot; these open that to a
@@ -73,7 +75,8 @@ export function houseTooltip(): Partial<TooltipConfigInterface> {
 
 /** Treemap tile shape. Unovis ships 2px corners and a 2px gap, which reads as a raw partition;
  *  the house tile is a rounded slab with room to breathe, matching the card radius family. The
- *  gap works with the adapter's tile stroke — padding separates, stroke defines the edge.
+ *  gap is the separator: the adapter draws no tile stroke, and inside a group the gap shows the
+ *  group tile beneath.
  *
  *  Typed structurally rather than as `Partial<TreemapConfigInterface<…>>`: v-binding a config
  *  object carrying the Datum generic pins it to whatever that object declares, and every accessor
@@ -93,19 +96,19 @@ export const treemapDefaults: {
   tileBorderRadius: 12,
   tilePadding: 4,
   // The strip a group reserves for its own heading. It has to clear the heading type the adapter
-  // sets on internal labels — too small and the zone name is cut off by its own group.
+  // sets on internal labels — too small and the group's own top tiles cover its label.
   tilePaddingTop: 26,
-  // Unovis draws group and leaf tiles as flat sibling rects with one shared rx, so nesting has no
-  // radius of its own. This flag is the only thing that marks leaves in the DOM (it adds a class to
-  // tiles with no children), which is what lets the adapter give them the concentric inner radius.
-  // Its other effect is a pointer cursor on leaves — correct here, since leaves carry the tooltip.
+  // Unovis draws group and leaf tiles as flat sibling rects under one corner rule, so nesting has
+  // no radius of its own. This flag is the only thing that marks leaf tiles in the DOM (it adds a
+  // class to tiles with no children), which is what lets the adapter give them the concentric inner
+  // radius. Its other effect is a pointer cursor on leaves.
   showTileClickAffordance: true,
   // Plain inset from the tile edge, independent of the radius: the adapter squares the label clip,
   // so a label is no longer sliced by its own clip corner and these do not have to dodge an arc.
   labelOffsetX: 8,
   labelOffsetY: 6,
   // Leaf label type. Unovis buckets leaves into three sizes by sqrt(value) against the largest
-  // leaf, and its own 8/12/22 steps +4 then +10 — so two stations of similar size can land either
+  // leaf, and its own 8/12/22 steps +4 then +10 — so two leaves of similar size can land either
   // side of the top threshold and differ by nearly double. These are evenly spaced and top out
   // level with the group heading, which stays distinct on weight rather than size.
   tileLabelSmallFontSize: 12,
@@ -117,11 +120,10 @@ export const treemapDefaults: {
  *  disc cut into wedges; the house rings are separated slabs with the same rounded feel as the
  *  treemap tile and the donut arc.
  *
- *  cornerRadius is the one number to be careful with. The flat donut clamps it to half the arc
- *  width, so an over-large value degrades gracefully there — the nested donut has NO such clamp,
- *  so a radius that suits the outer ring will visibly deform a short inner segment. 6 is the
- *  largest value that stays clean on the thinnest ring this chart is meant to carry; the flat
- *  donut's 4 is the comparable figure at its own 28px arc width.
+ *  cornerRadius is the one number to be careful with. d3's arc generator, which draws both donuts,
+ *  limits it to half the ring's width and shrinks it further on a narrow segment. 6 is the largest
+ *  value that stays clean on the thinnest ring this chart is meant to carry; the flat donut's 4 is
+ *  the comparable figure at its own 28px arc width.
  *
  *  Typed structurally rather than as `Partial<NestedDonutConfigInterface<…>>` for the same reason
  *  treemapDefaults is: v-binding a config object carrying the Datum generic pins it, and every
@@ -132,9 +134,8 @@ export const nestedDonutDefaults: {
   showBackground: boolean;
 } = Object.freeze({
   cornerRadius: 6,
-  // The ring gap. Segments carry a stroke rather than a real gap, so this works with the adapter's
-  // segment stroke the way tilePadding works with the treemap's — padding separates the rings,
-  // the stroke defines each segment's edge against its neighbours in the same ring.
+  // The ring gap. Segments in a ring have no gap between them, so the adapter's segment stroke
+  // separates those; this padding separates the rings.
   layerPadding: 4,
   // The track behind the segments. Our rings always sum to the whole, so a visible track only ever
   // surfaces in the gaps, where any opaque colour is wrong the moment the chart sits on a surface

package/src/resolveVar.ts

@@ -13,9 +13,10 @@
 // Read fresh on every call: the point is to defeat a cache, so adding one here would restore the
 // bug. Callers should invoke this inside a render that re-runs on `useThemeVersion`.
 
-/** The computed value of a `var(--x)` string. Non-var strings pass through untouched. */
-export function resolveVar(value: string, context: Element = document.documentElement): string {
+/** The computed value of a `var(--x)` string, read off `context` or the root element. Non-var
+ *  strings, and every string outside the browser, pass through untouched. */
+export function resolveVar(value: string, context?: Element): string {
   if (typeof window === 'undefined' || !value.startsWith('var(--')) return value;
   const name = value.slice(4, -1).split(',')[0]!.trim();
-  return getComputedStyle(context).getPropertyValue(name).trim() || value;
+  return getComputedStyle(context ?? document.documentElement).getPropertyValue(name).trim() || value;
 }