@motionscript/charts 0.1.1-alpha.0 → 0.1.1-alpha.2

package/src/radar-chart/radar-chart.ts

@@ -0,0 +1,290 @@
+import {
+  Rect,
+  Text,
+  Types,
+  component2d,
+  easeOut,
+  type ChildView,
+  type DataRecord,
+  type NodeOf,
+  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
+  type Node2D,
+  type Node2DProps as _Node2DProps,
+  type TextStyle as _TextStyle,
+  type Fill as _Fill,
+  type FillResolved as _FillResolved,
+  type Stroke as _Stroke,
+  type StrokeResolved as _StrokeResolved,
+  type Size2D,
+  type Vector2,
+} from "@motionscript/sdk"
+
+import { boundText, laidOutSize } from "../kit/cartesian"
+import { ChartLegend } from "../kit/chart-legend"
+import { SERIES_ARG, asParts, fresh } from "../kit/entries"
+import { ENTER_SHARE, LEGEND_SLIDE, beats, type AnyTimeline, type Beat } from "../kit/motion"
+import { SPOTLIGHT_DIM, type ChartSeries } from "../kit/shared"
+import {
+  CHART_LEGEND,
+  CHART_SERIES,
+  CHART_STYLE_FAMILY,
+  CHART_STYLE_PRESETS,
+  GRID_BACKGROUND,
+  legendConfigOf,
+  migrateChartStyle,
+  placedText,
+  seriesFill,
+  sizeOf,
+} from "../kit/style"
+import { RadarGrid } from "./radar-grid"
+import { RadarSeries } from "./radar-series"
+import {
+  RADAR_GRID,
+  RADAR_TEXT,
+  RADAR_MARKS,
+  categoriesOf,
+  fitRadius,
+  fractionOf,
+  labelAnchor,
+  labelPoint,
+  scaleOf,
+  valuesOf,
+} from "./shared"
+
+/** What a radar chart plots, as its entries hold it. */
+export interface RadarValues {
+  readonly data: DataRecord[]
+  readonly categoryField: string
+  readonly series: ChartSeries[]
+  readonly min: number
+  readonly max: number
+}
+
+/** The scale the web is drawn to, whether `max` was given or left to the data. */
+export function radarScale(state: RadarValues): { min: number; max: number } {
+  return scaleOf(valuesOf(state.data, state.series), state.min, state.max)
+}
+
+/** Series `index`'s values as fractions of the rim, in spoke order. */
+export function radarFractions(state: RadarValues, index: number): number[] {
+  const series = state.series[index]
+  if (!series) return []
+  const scale = radarScale(state)
+  return state.data.map((row) => {
+    const v = row[series.field]
+    return fractionOf(typeof v === "number" && Number.isFinite(v) ? v : 0, scale)
+  })
+}
+
+/** The grid, series, label layer and legend among the children; the last row holding a grid is the one the chart built. */
+function partsOf(children: readonly ChildView[]) {
+  for (let i = children.length - 1; i >= 0; i--) {
+    const row = children[i]
+    if (!Rect.is(row)) continue
+    const plot = row.children.find((part) => Rect.is(part) && part.children.some(RadarGrid.is))
+    if (!plot) continue
+    return {
+      grid: plot.children.find(RadarGrid.is)!,
+      series: plot.children.filter(RadarSeries.is),
+      labels: plot.children.find(Rect.is) ?? null,
+      legend: row.children.find(ChartLegend.is) ?? null,
+    }
+  }
+  return null
+}
+
+function toggling(timeline: AnyTimeline, children: readonly ChildView[], index: number, show: boolean) {
+  const parts = partsOf(children)
+  const series = parts?.series[index]
+  if (!parts || !series) return timeline.wait(timeline.duration)
+  return timeline.together([
+    series.run("enter", show ? { from: 0, to: 1 } : { from: 1, to: 0 }),
+    ...(parts.legend ? [parts.legend.run(show ? "showSeries" : "hideSeries", { index })] : []),
+  ])
+}
+
+/** The share of one series' growth that passes before the next starts. */
+const STAGGER = 0.3
+
+/**
+ * A radar (spider) chart: one spoke per data row, one closed polygon per
+ * series, over a web of rings. Composed of a {@link RadarGrid}, a
+ * {@link RadarSeries} per series, the category labels and a {@link ChartLegend}.
+ *
+ * Resting state is the finished chart; `enter` arms every part on its first
+ * frame. `max` of 0 (or one not above `min`) is the largest value rounded up.
+ */
+export const RadarChart = component2d({
+  key: "radarChart",
+  state: {
+    data: fresh<DataRecord[]>(() => [], { kind: "dataset" }),
+    /** The column that names each spoke. */
+    categoryField: "",
+    series: fresh<ChartSeries[]>(() => [], { kind: "series" }),
+    /** The value at the centre of the web. */
+    min: 0,
+    /** The value at the rim; 0 rounds the largest value up. */
+    max: 0,
+    style: Types.style(
+      CHART_STYLE_FAMILY,
+      {
+        series: CHART_SERIES,
+        background: GRID_BACKGROUND,
+        text: RADAR_TEXT,
+        grid: RADAR_GRID,
+        marks: RADAR_MARKS,
+        legend: CHART_LEGEND,
+      },
+      { presets: CHART_STYLE_PRESETS }
+    ),
+  },
+  // A node made of parts that fill would otherwise hug them.
+  defaults: { width: "fill", height: "fill" },
+  migrate: { style: migrateChartStyle("radar") },
+  allowedChildren: [],
+  children: (state) => {
+    const style = () => state.style
+    let plot: Node2D | undefined
+    const plotSize = (): Size2D => laidOutSize(plot)
+    const radius = () => fitRadius(plotSize(), categoriesOf(state.data, state.categoryField), sizeOf(style().spokeText), style().spokeLabels)
+    const count = state.data.length
+    const enabled = state.series.map((s) => s.enabled ?? true)
+
+    const grid = new RadarGrid({
+      count: () => state.data.length,
+      radius,
+      levels: () => style().gridLevels,
+      fill: () => style().gridBackground,
+      shape: () => style().gridShape,
+      stroke: () => style().gridStroke,
+      spokeStroke: () => style().spokeStroke,
+    }) as unknown as Node2D
+
+    const series = state.series.map(
+      (s, i) =>
+        new RadarSeries({
+          fractions: () => radarFractions(state, i),
+          radius,
+          fill: () => seriesFill(style(), s, i),
+          stroke: () => {
+            const weight = style().strokeWidth
+            return weight > 0 ? { weight, fill: seriesFill(style(), s, i), align: "center", join: "round" } : []
+          },
+          areaOpacity: () => style().areaOpacity,
+          dots: () => style().dots,
+          dotSize: () => style().dotSize,
+          enabled: enabled[i],
+        }) as unknown as Node2D
+    )
+
+    const parts: Node2D[] = [grid, ...series]
+
+    if (state.style.spokeLabels) {
+      const labels: Node2D[] = []
+      for (let i = 0; i < count; i++) {
+        const anchor = labelAnchor(i, count)
+        const align = anchor === "centerLeft" ? "left" : anchor === "centerRight" ? "right" : "center"
+        const at = (): Vector2 => labelPoint(i, count, radius(), sizeOf(style().spokeText))
+        labels.push(
+          new Text({
+            ...boundText(() => placedText(style().spokeText, align)),
+            text: () => categoriesOf(state.data, state.categoryField)[i] ?? "",
+            [anchor]: at,
+          }) as unknown as Node2D
+        )
+      }
+      parts.push(new Rect({ width: "fill", height: "fill", children: labels }) as unknown as Node2D)
+    }
+
+    plot = new Rect({ width: "fill", height: "fill", children: parts }) as unknown as Node2D
+
+    const row: Node2D[] = [plot]
+    const position = state.style.legend
+    if (position !== "none") {
+      const side = position === "right"
+      const config = legendConfigOf(state.style)
+      const legend = new ChartLegend({
+        series: state.series,
+        swatches: () => state.series.map((s, i) => seriesFill(style(), s, i)),
+        legend: () => legendConfigOf(style()),
+        flow: side ? "vertical" : "horizontal",
+        // Spacing is fixed as built; a style tween re-paints the swatches and captions only.
+        gap: side ? Math.round(config.itemGap / 2) : config.itemGap,
+        padding: config.padding,
+      }) as unknown as Node2D
+      if (position === "top") row.unshift(legend)
+      else row.push(legend)
+    }
+
+    const frame = new Rect({
+      flow: position === "right" ? "horizontal" : "vertical",
+      width: "fill",
+      height: "fill",
+      gap: 24,
+      align: "center",
+      fill: () => style().background,
+      children: row,
+    })
+    return asParts([frame as unknown as Node2D])
+  },
+  commands: {
+    /** The web grows out, the polygons grow from the centre one series after another, then the labels and legend come up. */
+    enter: {
+      args: {},
+      // Held from arrival, so it never shows finished ahead of its draw.
+      entrance: true,
+      easing: easeOut(),
+      run: (timeline, _state, children) => {
+        const parts = partsOf(children)
+        if (!parts) return timeline.wait(timeline.duration)
+        const duration = timeline.duration
+        const web = duration * ENTER_SHARE.axes
+        const marks = duration * ENTER_SHARE.marks
+        const last = duration * ENTER_SHARE.legend
+        const n = Math.max(1, parts.series.length)
+        const each = marks / (1 + STAGGER * (n - 1))
+        const { legend, labels } = parts
+        const at0 = (piece: Beat["piece"]): Beat => ({ at: 0, duration: 0, piece })
+        // The first frame arms what every later beat moves: a beat ahead of the playhead writes nothing.
+        return beats(timeline, [
+          at0(parts.grid.to({ reveal: 0 })),
+          ...parts.series.map((s) => at0(s.to({ progress: 0 }))),
+          ...(labels ? [at0(labels.to({ opacity: 0 }))] : []),
+          ...(legend ? [at0(legend.to({ opacity: 0, y: -LEGEND_SLIDE }))] : []),
+          { at: 0, duration: web, piece: parts.grid.to({ reveal: 1 }) },
+          ...parts.series.map((s, i) => ({ at: web + i * each * STAGGER, duration: each, piece: s.to({ progress: 1 }) })),
+          ...(labels ? [{ at: web + marks * 0.6, duration: last + marks * 0.4, piece: labels.to({ opacity: 1 }) }] : []),
+          ...(legend ? [{ at: web + marks, duration: last, piece: legend.to({ opacity: 1, y: 0 }) }] : []),
+        ])
+      },
+    },
+    /** Grow series `index`'s polygon back out of the centre, with its legend entry growing in. */
+    showSeries: {
+      args: { seriesIndex: SERIES_ARG },
+      easing: easeOut(),
+      run: (timeline, _state, children) => toggling(timeline, children, timeline.args.seriesIndex, true),
+    },
+    /** Shrink series `index`'s polygon into the centre as its legend entry shrinks away. */
+    hideSeries: {
+      args: { seriesIndex: SERIES_ARG },
+      easing: easeOut(),
+      run: (timeline, _state, children) => toggling(timeline, children, timeline.args.seriesIndex, false),
+    },
+    /** Fade every other series, polygon and legend entry, to focus on `index`. The legend dims in place, so the row does not reflow. */
+    spotlightSeries: {
+      args: { seriesIndex: SERIES_ARG },
+      easing: easeOut(),
+      run: (timeline, _state, children) => {
+        const parts = partsOf(children)
+        if (!parts) return timeline.wait(timeline.duration)
+        const index = timeline.args.seriesIndex
+        return timeline.together([
+          ...parts.series.map((s, i) => s.to({ opacity: i === index ? 1 : SPOTLIGHT_DIM })),
+          ...(parts.legend ? [parts.legend.run("spotlightSeries", { index })] : []),
+        ])
+      },
+    },
+  },
+})
+
+export type RadarChart = NodeOf<typeof RadarChart>

package/src/radar-chart/radar-grid.ts

@@ -0,0 +1,83 @@
+import {
+  Graphics2D,
+  Types,
+  clamp,
+  component2d,
+  fillOps,
+  strokeOps,
+  type Fill,
+  type FillResolved,
+  type NodeOf,
+  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
+  type Node2D as _Node2D,
+  type Node2DProps as _Node2DProps,
+  type Stroke,
+  type StrokeResolved,
+  type Vector2,
+} from "@motionscript/sdk"
+
+import { loadPaints } from "../kit/paints"
+import { spokeDirection, type GridShape } from "./shared"
+
+/**
+ * The web of a {@link RadarChart}: `levels` rings and, if asked, a spoke to each
+ * of `count` categories, drawn from the node's centre out to `radius`. `reveal`
+ * grows the web from nothing.
+ */
+export const RadarGrid = component2d({
+  key: "radarGrid",
+  state: {
+    count: 0,
+    /** The rim, in px. */
+    radius: 0,
+    levels: 4,
+    /** Inside the outer ring, under the rings and spokes; empty paints nothing. */
+    fill: Types.custom<Fill, FillResolved[]>([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
+    shape: Types.custom<GridShape>("polygon"),
+    stroke: Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
+    /** The line out to each category; empty draws none. */
+    spokeStroke: Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
+    /** How far the web has grown out, `0`-`1`. Rests at 1 so a paused canvas paints it. */
+    reveal: 1,
+  },
+  defaults: { width: "fill", height: "fill" },
+  load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.stroke, state.spokeStroke] }),
+  render: (ctx, state) => {
+    const grow = clamp(state.reveal, 0, 1)
+    const rim = state.radius * grow
+    if (rim <= 0 || grow <= 0) return
+    const count = Math.max(0, Math.round(state.count))
+    const levels = Math.max(1, Math.round(state.levels))
+    const round = state.shape === "circle" || count < 3
+    const outline = (g: Graphics2D, r: number): Graphics2D => {
+      if (round) return g.ellipse({ width: r * 2, height: r * 2 })
+      const points: Vector2[] = []
+      for (let i = 0; i < count; i++) {
+        const d = spokeDirection(i, count)
+        points.push({ x: d.x * r, y: d.y * r })
+      }
+      return g.line({ points, closed: true })
+    }
+
+    if (state.fill.length > 0) ctx.draw(outline(new Graphics2D(), rim).fill(state.fill).opacity(grow))
+
+    // One draw per ring: rings chained into one surface would stroke only their union's outline.
+    for (let level = 1; state.stroke.length > 0 && level <= levels; level++) {
+      const r = (rim * level) / levels
+      ctx.draw(outline(new Graphics2D(), r).stroke(state.stroke).opacity(grow))
+    }
+
+    if (state.spokeStroke.length === 0) return
+    for (let i = 0; i < count; i++) {
+      const d = spokeDirection(i, count)
+      ctx.draw(
+        new Graphics2D()
+          .line({ points: [{ x: 0, y: 0 }, { x: d.x * rim, y: d.y * rim }] })
+          .stroke(state.spokeStroke)
+          .opacity(grow)
+      )
+    }
+  },
+})
+
+export type RadarGrid = NodeOf<typeof RadarGrid>

package/src/radar-chart/radar-series.ts

@@ -0,0 +1,88 @@
+import {
+  Graphics2D,
+  Types,
+  clamp,
+  component2d,
+  fillOps,
+  strokeOps,
+  type Fill,
+  type FillResolved,
+  type NodeOf,
+  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
+  type Node2D as _Node2D,
+  type Node2DProps as _Node2DProps,
+  type Stroke,
+  type StrokeResolved,
+  type Vector2,
+} from "@motionscript/sdk"
+
+import { fresh } from "../kit/entries"
+import { frameEase } from "../kit/motion"
+import { loadPaints } from "../kit/paints"
+import { spokeDirection } from "./shared"
+
+/** The vertices of a series' polygon: spoke `i` at `fractions[i]` of the rim, scaled by `grow` about the centre. */
+export function seriesVertices(fractions: readonly number[], radius: number, grow = 1): Vector2[] {
+  return fractions.map((f, i) => {
+    const d = spokeDirection(i, fractions.length)
+    const r = radius * f * grow
+    return { x: d.x * r, y: d.y * r }
+  })
+}
+
+/** One series of a {@link RadarChart}: a closed polygon through its values, washed in its colour, with a dot on each vertex. `progress` grows it out of the centre. */
+export const RadarSeries = component2d({
+  key: "radarSeries",
+  state: {
+    /** Each spoke's value as a fraction of the rim, `0`-`1`, in spoke order. */
+    fractions: fresh<number[]>(() => []),
+    /** The rim, in px. */
+    radius: 0,
+    fill: Types.custom<Fill, FillResolved[]>([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
+    stroke: Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
+    areaOpacity: 0.25,
+    dots: true,
+    dotSize: 10,
+    /** Growth out of the centre, `0`-`1`. Rests at 1 so a paused canvas paints it; `enter` drives it from 0. */
+    progress: 1,
+    /** Whether the series is drawn at all, flipped alongside its legend entry. */
+    enabled: true,
+  },
+  defaults: { width: "fill", height: "fill" },
+  load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.stroke] }),
+  commands: {
+    /** Grow the polygon from `from` to `to` (of its full size); `showSeries`/`hideSeries` are this with the ends stated. */
+    enter: {
+      args: { from: Types.number(0, { min: 0, max: 1 }), to: Types.number(1, { min: 0, max: 1 }) },
+      run: (timeline) => {
+        const { from, to } = timeline.args
+        const ease = frameEase(timeline)
+        return timeline.animate((t) => {
+          const progress = from + (to - from) * ease(t)
+          // Hidden only once fully shrunk, so a hide does not vanish a frame early.
+          return { progress, enabled: progress > 0 }
+        })
+      },
+    },
+  },
+  render: (ctx, state) => {
+    if (!state.enabled) return
+    const grow = clamp(state.progress, 0, 1)
+    if (grow <= 0 || state.radius <= 0 || state.fractions.length === 0) return
+    const points = seriesVertices(state.fractions, state.radius, grow)
+
+    if (points.length >= 2) {
+      const fill = new Graphics2D().line({ points, closed: true })
+      if (state.areaOpacity > 0 && state.fill.length > 0) ctx.draw(fill.fill(state.fill).opacity(clamp(state.areaOpacity, 0, 1)))
+      if (state.stroke.length > 0) ctx.draw(new Graphics2D().line({ points, closed: true }).stroke(state.stroke))
+    }
+
+    if (state.dots && state.dotSize > 0 && state.fill.length > 0) {
+      const dots = new Graphics2D()
+      for (const p of points) dots.ellipse({ x: p.x, y: p.y, width: state.dotSize, height: state.dotSize })
+      ctx.draw(dots.fill(state.fill))
+    }
+  },
+})
+
+export type RadarSeries = NodeOf<typeof RadarSeries>

package/src/radar-chart/shared.ts

@@ -0,0 +1,153 @@
+import { Types, type TextStyle, type DataRecord, type Size2D, type StrokeResolved, type Stroke as _Stroke, type Vector2 } from "@motionscript/sdk"
+
+import { num, text, type ChartSeries } from "../kit/shared"
+import { CHART_MUTED, LEGEND_TEXT } from "../kit/style"
+
+/** The radar chart's text: the category names around the rim, and the legend. */
+export const RADAR_TEXT = {
+  spokeText: Types.typography({ fontSize: 28, fontWeight: 500, fill: CHART_MUTED }),
+  ...LEGEND_TEXT,
+}
+
+export type GridShape = "polygon" | "circle"
+
+/** The radar chart's own grid group: the web the polygons are drawn over. */
+export const RADAR_GRID = {
+  /** Whether the rings are straight-edged (a polygon through the spokes) or round. */
+  gridShape: Types.oneOf(["polygon", "circle"] as const),
+  /** How many rings, outermost at the scale's maximum. */
+  gridLevels: Types.number(4, { min: 1, max: 10, step: 1 }),
+  /** The rings; empty draws none. */
+  gridStroke: Types.stroke({ weight: 2, fill: "white/15" }),
+  /** The line from the centre out to each category; empty draws none. */
+  spokeStroke: Types.stroke({ weight: 2, fill: "white/15" }),
+  /** Read as the chart is built: whether the category names stand around the rim. */
+  spokeLabels: Types.boolean(true, { animatable: false }),
+}
+
+export const RADAR_MARKS = {
+  /** Outline weight of each series' polygon. */
+  strokeWidth: Types.number(4, { min: 0, max: 24, step: 1, unit: "px" }),
+  /** How strongly each polygon is filled in its series colour; 0 leaves an outline. */
+  areaOpacity: Types.number(0.25, { min: 0, max: 1, step: 0.05 }),
+  /** Whether a dot marks each value on its spoke. */
+  dots: Types.boolean(true),
+  dotSize: Types.number(10, { min: 2, max: 40, step: 1, unit: "px" }),
+}
+
+/** The grid and marks fields the parts read, whichever way the chart's style is spelled. */
+export interface RadarStyle {
+  readonly gridShape: GridShape
+  readonly gridLevels: number
+  readonly gridStroke: StrokeResolved[]
+  readonly spokeStroke: StrokeResolved[]
+  readonly spokeLabels: boolean
+  readonly strokeWidth: number
+  readonly areaOpacity: number
+  readonly dots: boolean
+  readonly dotSize: number
+  readonly spokeText: TextStyle
+}
+
+/** Fraction of the label's font size between the rim and the label. */
+const LABEL_PAD = 0.55
+/** Glyph width as a fraction of the font size, for fitting labels. */
+const GLYPH = 0.58
+/** Room kept clear around the web when nothing else claims it, in px. */
+const MARGIN = 10
+/** Below this a spoke counts as vertical, and its label centres over it. */
+const SIDE = 0.35
+
+/** Spoke `index` of `count`, as a unit direction: 12 o'clock first, clockwise on screen, y up. */
+export function spokeDirection(index: number, count: number): Vector2 {
+  const angle = (index / Math.max(1, count)) * Math.PI * 2
+  return { x: Math.sin(angle), y: Math.cos(angle) }
+}
+
+/** One category per data row. */
+export function categoriesOf(data: readonly DataRecord[], field: string): string[] {
+  return data.map((row) => text(row, field))
+}
+
+/** One list of values per series, a value per row. */
+export function valuesOf(data: readonly DataRecord[], series: readonly ChartSeries[]): number[][] {
+  return series.map((s) => data.map((row) => num(row, s.field)))
+}
+
+const MANTISSAS = [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10]
+
+/** `value` rounded up to a tidy 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8 times a power of ten. */
+export function niceCeil(value: number): number {
+  if (!(value > 0)) return 1
+  const power = 10 ** Math.floor(Math.log10(value))
+  const mantissa = value / power
+  const pick = MANTISSAS.find((m) => m >= mantissa - 1e-9) ?? 10
+  return pick * power
+}
+
+/**
+ * The scale the web is drawn to: `min` (default 0) to `max`, which when unset
+ * (or not above `min`) is the largest value rounded up tidily.
+ */
+export function scaleOf(values: readonly (readonly number[])[], min: number, max: number): { min: number; max: number } {
+  if (max > min) return { min, max }
+  let top = min
+  for (const list of values) for (const v of list) top = Math.max(top, v)
+  const span = niceCeil(top - min)
+  return { min, max: min + span }
+}
+
+/** Where `value` stands between the scale's ends, `0`-`1`. */
+export function fractionOf(value: number, scale: { min: number; max: number }): number {
+  const span = scale.max - scale.min
+  if (span <= 0) return 0
+  return Math.min(1, Math.max(0, (value - scale.min) / span))
+}
+
+export type LabelAnchor = "centerLeft" | "centerRight" | "bottomCenter" | "topCenter"
+
+/** Which corner of a category's label touches the point beside its spoke's end. */
+export function labelAnchor(index: number, count: number): LabelAnchor {
+  const { x, y } = spokeDirection(index, count)
+  if (x > SIDE) return "centerLeft"
+  if (x < -SIDE) return "centerRight"
+  return y >= 0 ? "bottomCenter" : "topCenter"
+}
+
+export function labelPad(fontSize: number): number {
+  return fontSize * LABEL_PAD
+}
+
+/** Rough size of a label, since the web is fitted before any text is measured. */
+export function labelSize(caption: string, fontSize: number): Size2D {
+  return { width: caption.length * fontSize * GLYPH, height: fontSize * 1.25 }
+}
+
+/**
+ * The rim's radius for a box: the largest the web can be with every label
+ * (when there are labels) still inside it.
+ */
+export function fitRadius(box: Size2D, categories: readonly string[], fontSize: number, labelled: boolean): number {
+  let radius = Math.min(box.width, box.height) / 2 - MARGIN
+  if (!labelled) return Math.max(0, radius)
+  const pad = labelPad(fontSize)
+  const count = categories.length
+  categories.forEach((caption, i) => {
+    const { x, y } = spokeDirection(i, count)
+    const size = labelSize(caption, fontSize)
+    const side = labelAnchor(i, count)
+    // How much of the label hangs past its anchor point on each axis.
+    const reachX = side === "centerLeft" || side === "centerRight" ? size.width : size.width / 2
+    const reachY = side === "bottomCenter" || side === "topCenter" ? size.height : size.height / 2
+    if (Math.abs(x) > 1e-6) radius = Math.min(radius, (box.width / 2 - reachX - MARGIN / 2) / Math.abs(x) - pad)
+    if (Math.abs(y) > 1e-6) radius = Math.min(radius, (box.height / 2 - reachY - MARGIN / 2) / Math.abs(y) - pad)
+  })
+  return Math.max(0, radius)
+}
+
+/** Where spoke `index`'s label is pinned: just past the rim, centre-relative, y up. */
+export function labelPoint(index: number, count: number, radius: number, fontSize: number): Vector2 {
+  const { x, y } = spokeDirection(index, count)
+  const r = radius + labelPad(fontSize)
+  return { x: x * r, y: y * r }
+}

package/src/radial-chart/index.ts

@@ -0,0 +1,5 @@
+export { RadialChart } from "./radial-chart"
+export type { RadialChartValues } from "./radial-chart"
+export { RadialRings, RadialGeometry, bandPath } from "./radial-rings"
+export { RADIAL_STYLE_GROUPS, radialFractions, radialMax, resolveRadialRows, rowValue } from "./shared"
+export type { RadialMarks, RadialRow, RadialStyle } from "./shared"