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

package/src/radial-chart/radial-chart.ts

@@ -0,0 +1,212 @@
+import {
+  Rect,
+  Types,
+  clamp,
+  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,
+} from "@motionscript/sdk"
+
+import { SERIES_ARG, asParts, fresh } from "../kit/entries"
+import { beats, type AnyTimeline, type Beat } from "../kit/motion"
+import { CHART_STYLE_FAMILY, CHART_STYLE_PRESETS, migrateChartStyle } from "../kit/style"
+import { PieLegend } from "../kit/pie-legend"
+import { PIE_SPOTLIGHT_DIM, selectionFade } from "../kit/polar"
+import { RadialRings } from "./radial-rings"
+import {
+  RADIAL_STYLE_GROUPS,
+  centerOf,
+  legendOf,
+  marksOf,
+  resolveRadialRows,
+  ringLabelOf,
+  type RadialRow,
+  type RadialStyle,
+} from "./shared"
+
+export interface RadialChartValues {
+  readonly data: DataRecord[]
+  readonly categoryField: string
+  readonly valueField: string
+  readonly max: number
+  readonly style: RadialStyle
+  readonly pops: number[]
+}
+
+/** How `enter` divides its duration: rings sweeping in, then captions and legend together. Sums to 1. */
+const SWEEP_SHARE = 0.7
+const LABEL_SHARE = 0.3
+
+function rowsOf(s: RadialChartValues): RadialRow[] {
+  return resolveRadialRows(s.data, s.categoryField, s.valueField, s.style)
+}
+
+function popAt(s: RadialChartValues, index: number): number {
+  return clamp(s.pops[index] ?? 0, 0, 1)
+}
+
+/** Per-row opacity for the legend: 1 while nothing is selected and for the selected ring, falling toward the dim for the rest. */
+function ringDims(s: RadialChartValues): number[] {
+  let focus = 0
+  for (let i = 0; i < s.data.length; i++) focus = Math.max(focus, popAt(s, i))
+  return s.data.map((_, i) => selectionFade(focus, RING_DIM, popAt(s, i)))
+}
+
+const RING_DIM = Math.max(PIE_SPOTLIGHT_DIM, 0.25)
+
+function popping(timeline: AnyTimeline, s: RadialChartValues, pop: (index: number) => number) {
+  const from = s.data.map((_, i) => popAt(s, i))
+  const targets = s.data.map((_, i) => clamp(pop(i), 0, 1))
+  if (from.every((value, i) => value === targets[i])) return timeline.wait(timeline.duration)
+  return timeline.animate((t) => ({ pops: from.map((value, i) => value + (targets[i] - value) * t) }))
+}
+
+/** The rings and legend among the children; the last row is the one the chart built. */
+function partsOf(children: readonly ChildView[]) {
+  for (let i = children.length - 1; i >= 0; i--) {
+    const row = children[i]
+    const rings = Rect.is(row) ? row.children.find(RadialRings.is) : undefined
+    if (rings) return { rings, legend: row.children.find(PieLegend.is) ?? null }
+  }
+  return null
+}
+
+/**
+ * A radial bar chart: one concentric ring per row, the first row outermost,
+ * each an arc from `startAngle` sweeping `value / max` of `sweep` degrees.
+ * Rows are the marks and none can be hidden; `selectRing` thickens a ring and
+ * dims the rest.
+ */
+export const RadialChart = component2d({
+  key: "radialChart",
+  state: {
+    data: fresh<DataRecord[]>(() => [], { kind: "dataset" }),
+    /** Ring caption, used on the ring labels and the legend. */
+    categoryField: "",
+    /** Ring magnitude: the arc's share of the full sweep. */
+    valueField: "",
+    /** The value a full sweep stands for. 0 lets the largest value fill its ring. */
+    max: Types.number(0, { min: 0, step: 1 }),
+    style: Types.style(CHART_STYLE_FAMILY, RADIAL_STYLE_GROUPS, { presets: CHART_STYLE_PRESETS }),
+    /** Gap between the rings and the legend, in px. */
+    gap: 40,
+    /** Text set in the centre hole. */
+    centerLabel: "",
+    /** Smaller second line under `centerLabel`. */
+    centerCaption: "",
+    /** How far each ring is emphasised, `0`-`1` per index. Here because the rings and the legend both read it. */
+    pops: fresh<number[]>(() => []),
+    /** Read as the chart is built: whether the centre summary is drawn at rest. A scene that wants it to land later sets `false` and runs `revealCenter`. */
+    showCenter: Types.boolean(true, { animatable: false }),
+  },
+  defaults: {
+    width: "fill",
+    height: "fill",
+    pops: (state) => state.data.map(() => 0),
+  },
+  migrate: { style: migrateChartStyle("radial") },
+  allowedChildren: [],
+  children: (state) => {
+    const style = () => state.style
+    const rows = () => rowsOf(state)
+    const parts: Node2D[] = [
+      new RadialRings({
+        width: "fill",
+        height: "fill",
+        rows,
+        max: () => state.max,
+        marks: () => marksOf(style()),
+        label: () => ringLabelOf(style()),
+        centerStyle: () => centerOf(style()),
+        trackFill: () => style().track,
+        ringLabels: () => style().ringLabels,
+        pops: () => state.pops,
+        dimOpacity: RING_DIM,
+        centerLabel: state.centerLabel,
+        centerCaption: state.centerCaption,
+        centerReveal: state.showCenter === false ? 0 : 1,
+      }) as unknown as Node2D,
+    ]
+    const position = state.style.legend
+    if (position !== "none") {
+      const side = position === "right"
+      const config = legendOf(state.style)
+      const legend = new PieLegend({
+        slices: rows,
+        legend: () => legendOf(style()),
+        dims: () => ringDims(state),
+        flow: side ? "vertical" : "horizontal",
+        align: "center",
+        gap: side ? config.itemGap / 3 : config.itemGap,
+        padding: 0,
+      }) as unknown as Node2D
+      if (position === "top") parts.unshift(legend)
+      else parts.push(legend)
+    }
+    const row = new Rect({
+      flow: position === "right" || position === "none" ? "horizontal" : "vertical",
+      width: "fill",
+      height: "fill",
+      gap: state.gap,
+      padding: 24,
+      align: "center",
+      fill: () => state.style.background,
+      children: parts,
+    })
+    return asParts([row as unknown as Node2D])
+  },
+  commands: {
+    /** Rings sweep in from `startAngle`, outer ring first, then captions fade up and the legend staggers in. `duration` is the whole entrance; the centre summary keeps its own signal. */
+    enter: {
+      args: {},
+      entrance: true,
+      easing: easeOut(),
+      run: (timeline, _state, children) => {
+        const parts = partsOf(children)
+        if (!parts) return timeline.wait(timeline.duration)
+        const { rings, legend } = parts
+        const sweep = timeline.duration * SWEEP_SHARE
+        const labels = timeline.duration * LABEL_SHARE
+        const at0 = (piece: Beat["piece"]): Beat => ({ at: 0, duration: 0, piece })
+        return beats(timeline, [
+          at0(rings.to({ growth: 0, labelReveal: 0 })),
+          ...(legend ? [at0(legend.run("arm"))] : []),
+          { at: 0, duration: sweep, piece: rings.run("sweep") },
+          { at: sweep, duration: labels, piece: rings.run("revealLabels") },
+          ...(legend ? [{ at: sweep, duration: labels, piece: legend.run("enter") }] : []),
+        ])
+      },
+    },
+    /** Fade the centre summary up. Not part of `enter`: it is usually the conclusion, which a scene lands on its own beat. */
+    revealCenter: {
+      args: {},
+      easing: easeOut(),
+      run: (timeline, _state, children) => partsOf(children)?.rings.run("revealCenter") ?? timeline.wait(timeline.duration),
+    },
+    /** Thicken ring `ringIndex` and dim the rest, leaving any other selected ring where it is. */
+    selectRing: {
+      args: { ringIndex: SERIES_ARG },
+      easing: easeOut(),
+      run: (timeline, state) => {
+        const index = timeline.args.ringIndex
+        return popping(timeline, state, (i) => (i === index ? 1 : popAt(state, i)))
+      },
+    },
+    /** Settle every ring and bring the whole chart back to full. */
+    clearSelection: {
+      args: {},
+      easing: easeOut(),
+      run: (timeline, state) => popping(timeline, state, () => 0),
+    },
+  },
+})
+
+export type RadialChart = NodeOf<typeof RadialChart>

package/src/radial-chart/radial-rings.ts

@@ -0,0 +1,328 @@
+import {
+  Graphics2D,
+  PathBuilder,
+  Rect,
+  Text,
+  Types,
+  clamp,
+  component2d,
+  fillOps,
+  textOps,
+  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 Fill as _Fill,
+  type FillResolved as _FillResolved,
+  type TextStyle,
+  type Vector2,
+} from "@motionscript/sdk"
+
+import { asParts, fresh } from "../kit/entries"
+import { frameEase } from "../kit/motion"
+import { loadPaints } from "../kit/paints"
+import { DEG, ringFills, ringPoint, selectionFade, type CenterConfig } from "../kit/polar"
+import { radialFractions, type RadialMarks, type RadialRow } from "./shared"
+
+/** Share of the entrance one ring's sweep starts after the last. */
+const STAGGER = 0.12
+/** A selected ring's thickness grows by this share of itself, on each side. */
+const GROW = 0.12
+const ARC_STEP = 4 * DEG
+const LABEL_PAD = 10
+const CENTER_FIT = 0.78
+const GLYPH_RATIO = 0.62
+/** How far the radius is held in from the box, for the sake of a ring's growth. */
+const EDGE = 4
+
+const DEFAULT_MARKS: RadialMarks = { innerRadius: 0.3, ringGap: 8, sweep: 360, startAngle: 0, track: true, roundCaps: true }
+const DEFAULT_LABEL: TextStyle = { fontSize: 28, fontWeight: 500, textAlign: "center", fill: "#a1a1aa" }
+const DEFAULT_CENTER: CenterConfig = {
+  labelStyle: { fontSize: 50, fontWeight: 800, textAlign: "center", fill: "#f4f4f5" },
+  captionStyle: { fontSize: 22, fontWeight: 500, textAlign: "center", fill: "#a1a1aa" },
+}
+
+interface RingsState {
+  readonly rows: RadialRow[]
+  readonly max: number
+  readonly marks: RadialMarks
+  readonly label: TextStyle
+  readonly centerStyle: CenterConfig
+  readonly ringLabels: boolean
+  readonly pops: readonly number[]
+  readonly dimOpacity: number
+  readonly centerLabel: string
+  readonly centerCaption: string
+}
+
+function sizeOf(style: TextStyle, fallback: number): number {
+  return typeof style.fontSize === "number" ? style.fontSize : fallback
+}
+
+/** Every radius and angle for one box, derived wherever read so the drawing and the labels cannot disagree. */
+export class RadialGeometry {
+  constructor(
+    private readonly s: RingsState,
+    private readonly box: { readonly width: number; readonly height: number }
+  ) {}
+
+  get count(): number {
+    return this.s.rows.length
+  }
+
+  get outerRadius(): number {
+    return Math.max(0, Math.min(this.box.width, this.box.height) / 2 - EDGE)
+  }
+
+  get holeRadius(): number {
+    return clamp(this.s.marks.innerRadius, 0, 0.9) * this.outerRadius
+  }
+
+  /** Radial depth of one ring. */
+  get thickness(): number {
+    const n = this.count
+    if (n === 0) return 0
+    return Math.max(0, (this.outerRadius - this.holeRadius - (n - 1) * Math.max(0, this.s.marks.ringGap)) / n)
+  }
+
+  /** Rim of ring `index`; ring 0 is the outermost. */
+  ringOuter(index: number): number {
+    return this.outerRadius - index * (this.thickness + Math.max(0, this.s.marks.ringGap))
+  }
+
+  ringMid(index: number): number {
+    return this.ringOuter(index) - this.thickness / 2
+  }
+
+  get fractions(): number[] {
+    return radialFractions(this.s.rows, this.s.max)
+  }
+
+  get startRad(): number {
+    return this.s.marks.startAngle * DEG
+  }
+
+  get sweepRad(): number {
+    return clamp(this.s.marks.sweep, 0, 360) * DEG
+  }
+
+  popOf(index: number): number {
+    return clamp(this.s.pops[index] ?? 0, 0, 1)
+  }
+
+  get selectionStrength(): number {
+    let strongest = 0
+    for (let i = 0; i < this.count; i++) strongest = Math.max(strongest, this.popOf(i))
+    return strongest
+  }
+
+  ringOpacity(index: number): number {
+    return selectionFade(this.selectionStrength, this.s.dimOpacity, this.popOf(index))
+  }
+
+  /** How far ring `index`'s sweep has come at entrance progress `growth`: rings start in turn, outer first. */
+  progress(index: number, growth: number): number {
+    const total = 1 + STAGGER * Math.max(0, this.count - 1)
+    return clamp(growth * total - index * STAGGER, 0, 1)
+  }
+
+  get labelFont(): number {
+    return Math.max(1, Math.min(sizeOf(this.s.label, 28), this.thickness * 0.62))
+  }
+
+  /** Where ring `index`'s caption is pinned: just behind its start, reading away from the sweep. */
+  labelAnchor(index: number): { at: Vector2; side: 1 | -1 } {
+    const a = this.startRad
+    const back = { x: -Math.cos(a), y: Math.sin(a) }
+    const p = ringPoint(this.ringMid(index), a)
+    const side: 1 | -1 = back.x <= 0 ? -1 : 1
+    return { at: { x: p.x + back.x * LABEL_PAD, y: p.y + back.y * LABEL_PAD }, side }
+  }
+
+  get centerFont(): number {
+    const { centerStyle, centerLabel, centerCaption } = this.s
+    const wanted = sizeOf(centerStyle.labelStyle, 50)
+    const hole = this.holeRadius
+    if (hole <= 0) return wanted
+    const ratio = sizeOf(centerStyle.captionStyle, 22) / Math.max(1, wanted)
+    const glyphs = Math.max(1, centerLabel.length, centerCaption.length * ratio)
+    return Math.min(wanted, (hole * 2 * CENTER_FIT) / (glyphs * GLYPH_RATIO))
+  }
+}
+
+/**
+ * An arc band between `rIn` and `rOut` over `a0`..`a1` (radians clockwise from
+ * 12 o'clock), the ends squared or capped with half circles. A band shorter
+ * than its caps is two overlapping caps, which fill as a pill.
+ */
+export function bandPath(a0: number, a1: number, rIn: number, rOut: number, round: boolean): PathBuilder {
+  const path = new PathBuilder()
+  const mid = (rIn + rOut) / 2
+  const cap = (rOut - rIn) / 2
+  const delta = round && mid > 0 ? Math.min(cap / mid, (a1 - a0) / 2) : 0
+  const from = a0 + delta
+  const to = a1 - delta
+  const steps = Math.max(2, Math.ceil(Math.abs(to - from) / ARC_STEP))
+  const arc = (r: number, x: number, y: number, first: boolean) => {
+    for (let i = 0; i <= steps; i++) {
+      const p = ringPoint(r, x + ((y - x) * i) / steps)
+      if (first && i === 0) path.moveTo(p.x, p.y)
+      else path.lineTo(p.x, p.y)
+    }
+  }
+  // The end at `angle` rounded through a tip `direction` along the sweep.
+  const semicircle = (angle: number, direction: 1 | -1, fromOuter: boolean) => {
+    const centre = ringPoint(mid, angle)
+    const radial = { x: Math.sin(angle), y: Math.cos(angle) }
+    const tangent = { x: Math.cos(angle) * direction, y: -Math.sin(angle) * direction }
+    const turns = 12
+    for (let i = 1; i < turns; i++) {
+      const phi = (Math.PI * i) / turns
+      const r = fromOuter ? Math.cos(phi) : -Math.cos(phi)
+      path.lineTo(centre.x + cap * (radial.x * r + tangent.x * Math.sin(phi)), centre.y + cap * (radial.y * r + tangent.y * Math.sin(phi)))
+    }
+  }
+  arc(rOut, from, to, true)
+  if (round) semicircle(to, 1, true)
+  arc(rIn, to, from, false)
+  if (round) semicircle(from, -1, false)
+  path.close()
+  return path
+}
+
+const NO_BOX = { width: 0, height: 0 }
+
+function labelBlocks(s: RingsState & { readonly labelReveal: number; readonly centerReveal: number }) {
+  const blocks: Node2D[] = []
+  const geometry = () => new RadialGeometry(s, (blocks[0]?.parent as Node2D | null | undefined)?.layoutBounds ?? NO_BOX)
+  const side = geometry().labelAnchor(0).side
+
+  s.rows.forEach((_, index) => {
+    const anchor = () => geometry().labelAnchor(index).at
+    blocks.push(
+      new Rect({
+        flow: "vertical",
+        width: "hug",
+        height: "hug",
+        align: side > 0 ? "centerLeft" : "centerRight",
+        opacity: () => (s.ringLabels ? clamp(s.labelReveal, 0, 1) * geometry().ringOpacity(index) : 0),
+        centerLeft: side > 0 ? anchor : undefined,
+        centerRight: side > 0 ? undefined : anchor,
+        children: [
+          new Text({
+            ...textOps.styleProps(s.label),
+            text: () => s.rows[index]?.category ?? "",
+            textAlign: side > 0 ? "left" : "right",
+            fontSize: () => geometry().labelFont,
+          }),
+        ],
+      })
+    )
+  })
+
+  if (s.centerLabel !== "" || s.centerCaption !== "") {
+    const children: Node2D[] = []
+    if (s.centerLabel !== "") {
+      children.push(new Text({ ...textOps.styleProps(s.centerStyle.labelStyle), text: s.centerLabel, fontSize: () => geometry().centerFont }))
+    }
+    if (s.centerCaption !== "") {
+      children.push(
+        new Text({
+          ...textOps.styleProps(s.centerStyle.captionStyle),
+          text: s.centerCaption,
+          fontSize: () => geometry().centerFont * (sizeOf(s.centerStyle.captionStyle, 22) / sizeOf(s.centerStyle.labelStyle, 50)),
+        })
+      )
+    }
+    blocks.push(
+      new Rect({
+        flow: "vertical",
+        width: "hug",
+        height: "hug",
+        gap: 2,
+        align: "center",
+        opacity: () => clamp(s.centerReveal, 0, 1),
+        center: { x: 0, y: 0 },
+        children,
+      })
+    )
+  }
+  return asParts(blocks)
+}
+
+/**
+ * The rings: row `i` is the `i`-th ring from the outside, an arc from
+ * `startAngle` whose sweep is `value / max` of the full sweep, over an
+ * optional full-sweep track. A selected ring thickens and the rest dims.
+ */
+export const RadialRings = component2d({
+  key: "radialRings",
+  state: {
+    rows: fresh<RadialRow[]>(() => []),
+    max: 0,
+    marks: Types.custom<RadialMarks>(DEFAULT_MARKS),
+    label: Types.custom<TextStyle>(DEFAULT_LABEL),
+    centerStyle: Types.custom<CenterConfig>(DEFAULT_CENTER),
+    /** The empty-ring colour drawn under each arc. */
+    trackFill: Types.fill("white/15"),
+    ringLabels: Types.boolean(false),
+    /** Entrance progress `[0, 1]`: rings sweep in turn. */
+    growth: 1,
+    labelReveal: 1,
+    pops: fresh<number[]>(() => []),
+    dimOpacity: 0.25,
+    centerLabel: "",
+    centerCaption: "",
+    centerReveal: 1,
+  },
+  defaults: { width: "fill", height: "fill" },
+  children: (state) => labelBlocks(state),
+  load: (loader, state) => loadPaints(loader, { fills: [...ringFills(state.rows), fillOps.resolve(state.trackFill)] }),
+  commands: {
+    /** Sweep the rings in, outer first. */
+    sweep: (timeline) => {
+      const ease = frameEase(timeline)
+      return timeline.animate((t) => ({ growth: ease(t) }))
+    },
+    /** Fade the ring captions up. */
+    revealLabels: (timeline) => {
+      const ease = frameEase(timeline)
+      return timeline.animate((t) => ({ labelReveal: ease(t) }))
+    },
+    /** Fade the centre summary up. */
+    revealCenter: (timeline, state) => {
+      const ease = frameEase(timeline)
+      const from = clamp(state.centerReveal, 0, 1)
+      return timeline.animate((t) => ({ centerReveal: from + (1 - from) * ease(t) }))
+    },
+  },
+  render: (ctx, state) => {
+    const g = new RadialGeometry(state, ctx.size)
+    const thickness = g.thickness
+    if (g.outerRadius > 0 && g.count > 0 && thickness > 0) {
+      const half = g.outerRadius + EDGE + 1
+      const frame = { centerBounds: [-half, -half, half, half] as [number, number, number, number], width: half * 2, height: half * 2 }
+      const fills = ringFills(state.rows)
+      const fractions = g.fractions
+      const a0 = g.startRad
+      const round = state.marks.roundCaps
+      // Selected rings last, so a thickened ring is never under its neighbour.
+      const order = [...state.rows.keys()].sort((a, b) => g.popOf(a) - g.popOf(b))
+      for (const i of order) {
+        const grow = thickness * GROW * g.popOf(i)
+        const rOut = g.ringOuter(i) + grow
+        const rIn = g.ringOuter(i) - thickness - grow
+        const opacity = g.ringOpacity(i)
+        if (state.marks.track && g.sweepRad > 0) {
+          ctx.draw(new Graphics2D().path(bandPath(a0, a0 + g.sweepRad, rIn, rOut, round).toPathState(frame)).fill(state.trackFill).opacity(opacity))
+        }
+        const span = g.sweepRad * fractions[i] * g.progress(i, state.growth)
+        if (span <= 1e-4) continue
+        ctx.draw(new Graphics2D().path(bandPath(a0, a0 + span, rIn, rOut, round).toPathState(frame)).fill(fills[i] ?? []).opacity(opacity))
+      }
+    }
+    ctx.children()
+  },
+})
+
+export type RadialRings = NodeOf<typeof RadialRings>

package/src/radial-chart/shared.ts

@@ -0,0 +1,126 @@
+import { Types, clamp, type DataRecord, type TextStyle, type Fill as _Fill, type FillResolved as _FillResolved } from "@motionscript/sdk"
+
+import {
+  CHART_BACKGROUND,
+  CHART_FOREGROUND,
+  CHART_LEGEND,
+  CHART_MUTED,
+  CHART_SERIES,
+  LEGEND_TEXT,
+  legendConfigOf,
+  paletteFill,
+  placedText,
+  sizeOf,
+  type ChartStyleBase,
+} from "../kit/style"
+import type { LegendConfig } from "../kit/shared"
+import { num, text } from "../kit/shared"
+import type { CenterConfig, PieSlice } from "../kit/polar"
+
+/** One ring: a row's caption, magnitude and paint. The same shape as a pie's slice, so the legend is shared. */
+export type RadialRow = PieSlice
+
+export function resolveRadialRows(data: readonly DataRecord[], category: string, value: string, style: Pick<ChartStyleBase, "seriesFills">): RadialRow[] {
+  return data.map((row, i) => ({ category: text(row, category), value: num(row, value), fill: paletteFill(style, i) }))
+}
+
+/** A row's plotted value: negatives and non-finite values count as 0. */
+export function rowValue(row: RadialRow): number {
+  return row.value > 0 && Number.isFinite(row.value) ? row.value : 0
+}
+
+/** What a full sweep stands for: `max` when it is positive, else the largest value (1 when every value is 0). */
+export function radialMax(rows: readonly RadialRow[], max: number): number {
+  if (max > 0 && Number.isFinite(max)) return max
+  let largest = 0
+  for (const row of rows) largest = Math.max(largest, rowValue(row))
+  return largest > 0 ? largest : 1
+}
+
+/** The share of a full sweep each row fills, `[0, 1]`. */
+export function radialFractions(rows: readonly RadialRow[], max: number): number[] {
+  const top = radialMax(rows, max)
+  return rows.map((row) => clamp(rowValue(row) / top, 0, 1))
+}
+
+/** The ring geometry and look, from `style`. */
+export interface RadialMarks {
+  innerRadius: number
+  ringGap: number
+  /** Degrees of a full ring. */
+  sweep: number
+  /** Degrees clockwise from 12 o'clock. */
+  startAngle: number
+  track: boolean
+  roundCaps: boolean
+}
+
+export interface RadialStyle extends ChartStyleBase {
+  readonly innerRadius: number
+  readonly ringGap: number
+  readonly sweep: number
+  readonly startAngle: number
+  readonly track: _FillResolved[]
+  readonly roundCaps: boolean
+  readonly ringLabels: boolean
+  readonly labelText: TextStyle
+  readonly centerText: TextStyle
+}
+
+export const RADIAL_STYLE_GROUPS = {
+  series: CHART_SERIES,
+  background: CHART_BACKGROUND,
+  text: {
+    /** The category at each ring's start, and the caption under the centre. */
+    labelText: Types.typography({ fontSize: 28, fontWeight: 500, fill: CHART_MUTED }),
+    /** The summary in the middle. */
+    centerText: Types.typography({ fontSize: 50, fontWeight: 800, fill: CHART_FOREGROUND }),
+    ...LEGEND_TEXT,
+  },
+  marks: {
+    /** Where the innermost ring starts, as a fraction of the outer radius. */
+    innerRadius: Types.number(0.3, { min: 0, max: 0.9, step: 0.05 }),
+    /** Space between neighbouring rings, px. */
+    ringGap: Types.number(8, { min: 0, max: 60, step: 1, unit: "px" }),
+    /** Degrees a full ring spans: 360 a circle, 270 a gauge-like open ring. */
+    sweep: Types.number(360, { min: 30, max: 360, step: 5, unit: "deg" }),
+    /** Degrees clockwise from 12 o'clock where every ring begins. */
+    startAngle: Types.number(0, { min: -360, max: 360, step: 5, unit: "deg" }),
+    /** The full ring under each arc; empty draws none. */
+    track: Types.fill("white/10"),
+    /** Round the ends of the arcs and tracks. */
+    roundCaps: Types.boolean(true),
+  },
+  labels: {
+    /** The category written at each ring's start, set in the label text. */
+    ringLabels: Types.boolean(false),
+  },
+  legend: CHART_LEGEND,
+}
+
+export function marksOf(style: RadialStyle): RadialMarks {
+  return {
+    innerRadius: style.innerRadius,
+    ringGap: style.ringGap,
+    sweep: style.sweep,
+    startAngle: style.startAngle,
+    track: style.track.length > 0,
+    roundCaps: style.roundCaps,
+  }
+}
+
+export function legendOf(style: RadialStyle): LegendConfig {
+  return legendConfigOf(style)
+}
+
+export function ringLabelOf(style: RadialStyle): TextStyle {
+  return placedText(style.labelText)
+}
+
+export function centerOf(style: RadialStyle): CenterConfig {
+  const size = sizeOf(style.centerText, 50)
+  return {
+    labelStyle: placedText(style.centerText),
+    captionStyle: placedText(style.labelText, "center", { fontSize: Math.round(size * 0.45) }),
+  }
+}