@motionscript/charts 0.1.0 → 0.1.1-alpha.1

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

@@ -0,0 +1,210 @@
+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 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 } 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),
+  },
+  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,114 @@
+import { Types, clamp, type DataRecord, type TextStyle, type Fill as _Fill, type FillResolved as _FillResolved } from "@motionscript/sdk"
+
+import { CHART_COLORS, CHART_LEGEND, CHART_TEXT, legendConfigOf, type ChartStyleBase, paletteFill } 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, "palette">): 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
+}
+
+export const RADIAL_STYLE_GROUPS = {
+  colors: CHART_COLORS,
+  text: CHART_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, in the muted colour. */
+    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)
+}
+
+function face(style: RadialStyle): Pick<TextStyle, "fontFamily"> {
+  return style.fontFamily ? { fontFamily: style.fontFamily } : {}
+}
+
+export function ringLabelOf(style: RadialStyle): TextStyle {
+  return { ...face(style), fontSize: style.fontSize, fontWeight: style.fontWeight, textAlign: "center", fill: style.muted }
+}
+
+export function centerOf(style: RadialStyle): CenterConfig {
+  return {
+    labelStyle: {
+      ...face(style),
+      fontSize: Math.round(style.fontSize * 1.8),
+      fontWeight: Math.min(900, style.fontWeight + 300),
+      textAlign: "center",
+      fill: style.foreground,
+    },
+    captionStyle: { ...face(style), fontSize: Math.round(style.fontSize * 0.8), fontWeight: style.fontWeight, textAlign: "center", fill: style.muted },
+  }
+}

package/dist/browser/chunks/chunk-TJNHLQGV.js

@@ -1,2 +0,0 @@
-import{fillOps as b,lerpNumber as y,shadowOps as M,strokeOps as g,insetsOps as w,textOps as S}from"@motionscript/sdk";import{niceStep as ft,enterBudget as Z}from"@motionscript/sdk/component";function ge(e,t){return{label:e?.label??t?.label??"",range:e?.range??t?.range,ticks:e?.ticks??t?.ticks,format:e?.format??t?.format}}function D(e,t,r){return{label:r<.5?e.label:t.label,range:xe(e.range,t.range,r),ticks:me(e.ticks,t.ticks,r),format:r<.5?e.format:t.format}}function xe(e,t,r){return!e||!t?r<.5?e:t:[y(e[0],t[0],r),y(e[1],t[1],r)]}function me(e,t,r){if(!e||!t)return r<.5?e:t;let n=Math.max(e.length,t.length),i=[];for(let o=0;o<n;o++)i.push(y(e[o]??t[o],t[o]??e[o],r));return i}function Be(e,t){if(t?.range===void 0&&t?.ticks===void 0)return;let r=ge(t,e);if(t.ticks===void 0&&t.range!==void 0){let n=Math.max(2,e.ticks?.length??2);r.ticks=Q(t.range,n-1)}return r}function B(e){return e.blend}function Ye(e,t,r){let n=t.range!==e.range,i=n&&t.range&&t.ticks&&t.ticks===e.ticks?{...t,ticks:Q(t.range,Math.max(2,t.ticks.length)-1)}:t,o=B(e)!==void 0,l=o||n||i.ticks!==e.ticks,s=o||e.range===void 0||e.ticks===void 0||i.range===void 0||i.ticks===void 0;return!l||!s?D(e,i,r):r===0?e:r===1?i:{...D(e,i,r),blend:{from:e,to:i,t:r}}}function X(e,t){let r=B(e);return r?D(X(r.from,t),X(r.to,t),r.t):t(e)}var E={plotFill:"#15130e",borderColor:"#4a4036",gridColor:"#2c2820",markerColor:"#8a7f70",regionColor:"#d99a3a"},Y=["#d9603b","#8194ad","#e0a93b","#5e9d6b","#9ec85a"],$=.2;function $e(e){return e<0?0:e>1?1:e}function He(e,t){if(t===void 0)return 0;let r=e[t];return typeof r=="number"&&Number.isFinite(r)?r:0}function Ve(e,t){if(t===void 0||t==="")return"";let r=e[t];return r==null?"":String(r)}function We(e,t=[]){if(e.length===0)return[];let r=new Set(t),n=new Set,i=[];for(let o of e)for(let l of Object.keys(o))!r.has(l)&&!n.has(l)&&(n.add(l),i.push(l));return i.filter(o=>{let l=!1;for(let s of e){let a=s[o];if(!(a===void 0||a==="")){if(typeof a!="number")return!1;l=!0}}return l})}var H={fontSize:24,fontWeight:700,textAlign:"center",fill:E.markerColor},V={fontSize:30,fontWeight:600,textAlign:"center",fill:E.markerColor},W={weight:2,fill:E.gridColor},j={labelStyle:H,titleStyle:V,lineStyle:W,tickPadding:20,titlePadding:4},O={labelStyle:{...H,fontWeight:500,textAlign:"right"},titleStyle:V,lineStyle:W,tickPadding:40,titlePadding:24},v={fill:[],stroke:{weight:6,fill:E.borderColor},shadow:[]},K={padding:0,textStyle:{fontSize:30,fontWeight:600,textAlign:"left",fill:E.markerColor},itemGap:44,markerStyle:{width:60,height:24,borderRadius:6,stroke:[],shadow:[]}},je=Y.map(e=>({weight:4,fill:e})),Ke=Y.map(e=>e);function Je(e,t){return{labelStyle:S.resolveStyle(e?.labelStyle,t.labelStyle),titleStyle:S.resolveStyle(e?.titleStyle,t.titleStyle),lineStyle:g.resolve(e?.lineStyle??t.lineStyle),tickPadding:w.resolve(e?.tickPadding??t.tickPadding,t.tickPadding),titlePadding:w.resolve(e?.titlePadding??t.titlePadding,t.titlePadding)}}function Qe(e,t,r){return{labelStyle:S.lerpStyle(e.labelStyle,t.labelStyle,r),titleStyle:S.lerpStyle(e.titleStyle,t.titleStyle,r),lineStyle:g.lerp(e.lineStyle,t.lineStyle,r),tickPadding:w.lerp(e.tickPadding,t.tickPadding,r),titlePadding:w.lerp(e.titlePadding,t.titlePadding,r)}}function Ze(e,t){return{fill:b.resolve(e?.fill??t.fill),stroke:g.resolve(e?.stroke??t.stroke),shadow:M.resolve(e?.shadow??t.shadow)}}function qe(e,t,r){return{fill:b.lerp(e.fill,t.fill,r),stroke:g.lerp(e.stroke,t.stroke,r),shadow:M.lerp(e.shadow,t.shadow,r)}}function ye(e,t){return{width:e?.width??t.width,height:e?.height??t.height,borderRadius:e?.borderRadius??t.borderRadius,stroke:g.resolve(e?.stroke??t.stroke),shadow:M.resolve(e?.shadow??t.shadow)}}function ke(e,t,r){return{width:y(e.width,t.width,r),height:y(e.height,t.height,r),borderRadius:y(e.borderRadius,t.borderRadius,r),stroke:g.lerp(e.stroke,t.stroke,r),shadow:M.lerp(e.shadow,t.shadow,r)}}function et(e,t){return{padding:w.resolve(e?.padding??t.padding,t.padding),textStyle:S.resolveStyle(e?.textStyle,t.textStyle),itemGap:e?.itemGap??t.itemGap,markerStyle:ye(e?.markerStyle,t.markerStyle)}}function tt(e,t,r){return{padding:w.lerp(e.padding,t.padding,r),textStyle:S.lerpStyle(e.textStyle,t.textStyle,r),itemGap:y(e.itemGap,t.itemGap,r),markerStyle:ke(e.markerStyle,t.markerStyle,r)}}function rt(e,t){return(e??t).map(r=>g.resolve(r))}function nt(e,t,r){let n=Math.max(e.length,t.length),i=[];for(let o=0;o<n;o++){let l=e[o]??t[o],s=t[o]??e[o];i.push(g.lerp(l,s,r))}return i}function ot(e,t){return(e??t).map(r=>b.resolve(r))}function it(e,t,r){let n=Math.max(e.length,t.length),i=[];for(let o=0;o<n;o++){let l=e[o]??t[o],s=t[o]??e[o];i.push(b.lerp(l,s,r))}return i}function we(e,t,r){let n=e.length>0?e[r%e.length]:{weight:4,fill:"white"};if(t.fill==null)return n;let i=g.resolve(n);if(i.length===0)return{weight:4,fill:t.fill};let o=[...i];return o[o.length-1]={...o[o.length-1],fill:b.resolve(t.fill)},o}function lt(e,t,r){let n=g.resolve(we(e,t,r));return n[n.length-1]?.fill??"white"}function st(e,t,r){return t??(e.length===0?"white":e[r%e.length])}function J(e,t){if(Number.isInteger(e))return String(e);let r=Math.max(1,t===void 0?1:Se(t));return e.toFixed(r).replace(/(\.\d*?)0+$/,"$1").replace(/\.$/,"")}function Se(e){if(!(e>0)||!Number.isFinite(e))return 1;for(let t=0;t<=6;t++){let r=e*10**t;if(Math.abs(r-Math.round(r))<1e-6*Math.max(1,r))return t}return Math.min(6,Math.max(1,Math.ceil(-Math.log10(e))+1))}function at(e){let t=[...e].filter(Number.isFinite).sort((n,i)=>n-i),r;for(let n=1;n<t.length;n++){let i=t[n]-t[n-1];i>1e-12&&(r===void 0||i<r)&&(r=i)}return r}function ct(e){let t=e*100;return Number.isInteger(t)?`${t}%`:`${t.toFixed(1).replace(/\.0$/,"")}%`}function Q([e,t],r){let n=Math.max(2,Math.round(r));return Array.from({length:n+1},(i,o)=>e+(t-e)/n*o)}import{Rect as T}from"@motionscript/sdk";import{Rect as re,RotatedBox as Te,Text as ne,Types as G,component2d as Le,insetsOps as oe,textOps as ie}from"@motionscript/sdk";import{Types as be}from"@motionscript/sdk";function h(e,t){return be.custom(e,t)}function Ee(e){return e}import{Types as ve,easeOut as Ae}from"@motionscript/sdk";var Pe=e=>e;function A(e){return e.easing?Pe:Ae()}function q(e,t){let r=e.duration,n=t.reduce((o,l)=>Math.max(o,l.at+l.duration),0),i=n>r&&n>0?r/n:1;return e.together(t.map(({at:o,duration:l,piece:s})=>{let a=o*i,f=l*i;return e.sequence([e.wait(a),s,e.wait(Math.max(0,r-a-f))])}))}var R={opacity:1,shift:0};function ee(){return ve.custom({},{private:!0,resolve:(e,t)=>({...t,...e})})}function P(e,t){return e[t]??R}function te(e,t){let r={};for(let n of e)r[n]=t;return r}function C(e,t,r,n){return e.animate(i=>{let o=n(i);return{arrivals:{[t]:{opacity:r.opacity+(R.opacity-r.opacity)*o,shift:r.shift+(R.shift-r.shift)*o}}}})}var _e=24;function Me(e,t){let r=e.markers.indexOf(t);return(r>=0?e.captions[r]:void 0)??J(t)}var le=Le({key:"verticalAxis",state:{range:h(()=>[0,1]),markers:h(()=>[]),captions:h(()=>[]),axis:G.custom(O),label:"",arrivals:ee()},defaults:{width:"fill",height:"fill"},children:e=>{let t=oe.resolve(e.axis.tickPadding).right,r=oe.resolve(e.axis.titlePadding).right,n=[],i=()=>n[0]?.parent?.layoutBounds??{width:0,height:0},o=()=>[...e.markers].sort((f,c)=>c-f),l=f=>{if(f===void 0)return 0;let[c,p]=e.range;return p<=c?0:(f-c)/(p-c)},s=e.markers.map((f,c)=>{let p=new ne({...ie.styleProps(e.axis.labelStyle),text:()=>{let u=o()[c];return u===void 0?"":Me(e,u)},y:()=>{let u=i().height,d=(l(o()[c])-.5)*u,m=u/2-p.layoutBounds.height/2;return Math.min(d,m)},opacity:()=>P(e.arrivals,c).opacity,x:()=>P(e.arrivals,c).shift});return p}),a=[];return e.label!==""&&a.push(new Te({angle:-90,width:"hug",height:"hug",children:new ne({...ie.styleProps(e.axis.titleStyle),text:e.label,opacity:()=>P(e.arrivals,"label").opacity,x:()=>P(e.arrivals,"label").shift})})),a.push(new re({height:"fill",width:"hug",padding:{right:t},children:s})),n.push(new re({flow:"horizontal",gap:r,children:a})),n},commands:{enter:{args:{stagger:G.custom(void 0),slide:G.number(_e)},run:(e,t)=>{let{stagger:r,slide:n}=e.args,i=t.markers.length,o=t.label!=="",l={opacity:0,shift:n},s=[...t.markers.keys(),...o?["label"]:[]],a=e.animate(()=>({arrivals:te(s,l)}));if(i===0)return a;let{step:f,per:c,caption:p}=Z(e.duration,i,o,r),u=A(e),d=t.markers.map((k,N)=>({at:(i-1-N)*f,duration:c,piece:C(e,N,l,u)})),m=o?[{at:(i-1)*f+c,duration:p,piece:C(e,"label",l,u)}]:[];return e.together([a,q(e,[...d,...m])])}}}});var Oe=24;function vt(e){return new T({flow:"vertical",width:"fill",height:"fill",padding:{top:Oe},children:[new T({flow:"horizontal",height:"fill",width:"fill",children:[e.axis,e.plot]}),new T({flow:"horizontal",width:"fill",children:[e.gutter,new T({flow:"vertical",width:"fill",gap:20,children:[...e.below]})]})]})}function At(e){for(let t=e.length-1;t>=0;t--){let r=e[t];if(!T.is(r))continue;let[n,i]=r.children,o=n?.children[0],l=n?.children[1],s=i?.children[1];if(!(!o||!le.is(o)||!l||!s))return{axis:o,plot:l.children,below:s.children}}return null}function Pt(e){let t=e?.layoutBounds;return{width:t?.width??0,height:t?.height??0}}import{Graphics2D as Fe,Types as De,component2d as Re,strokeOps as se}from"@motionscript/sdk";function F(e,t){for(let r of t.fills??[])e.fill(r);for(let r of t.strokes??[])for(let n of r)e.fill(n.fill);for(let r of t.shadows??[])for(let n of r)e.fill(n.fill)}var Ft=Re({key:"chartBorder",state:{stroke:De.custom(v.stroke,{resolve:se.resolve,lerp:se.lerp})},load:(e,t)=>F(e,{strokes:[t.stroke]}),render:(e,t)=>{let{width:r,height:n}=e.size;r<=0||n<=0||e.draw(new Fe().rect({x:0,y:0,width:r,height:n}).stroke(t.stroke))}});import{Graphics2D as I,Types as z,component2d as Ce,fillOps as ae,shadowOps as ce,strokeOps as de}from"@motionscript/sdk";var he=e=>z.custom(e,{resolve:de.resolve,lerp:de.lerp}),zt=Ce({key:"chartCanvas",state:{fill:z.custom(v.fill,{resolve:ae.resolve,lerp:ae.lerp}),shadow:z.custom(v.shadow,{resolve:ce.resolve,lerp:ce.lerp}),xGridStroke:he(j.lineStyle),yGridStroke:he(O.lineStyle),xMarkers:h(()=>[]),yMarkers:h(()=>[]),xExtent:h(()=>[0,1]),yExtent:h(()=>[0,1])},load:(e,t)=>F(e,{fills:[t.fill],shadows:[t.shadow],strokes:[t.xGridStroke,t.yGridStroke]}),render:(e,t)=>{let{width:r,height:n}=e.size;if(r<=0||n<=0)return;e.draw(new I().rect({x:0,y:0,width:r,height:n}).shadow(t.shadow).fill(t.fill));let[i,o]=t.xExtent,[l,s]=t.yExtent,a=d=>o<=i?0:(d-i)/(o-i),f=d=>s<=l?0:(d-l)/(s-l),c=d=>d>1e-6&&d<1-1e-6,p=t.xGridStroke[0];if(p){let d=new I;for(let m of t.xMarkers){let k=a(m);c(k)&&d.rect({x:-r/2+k*r,y:0,width:p.weight,height:n})}e.draw(d.fill(p.fill))}let u=t.yGridStroke[0];if(u){let d=new I;for(let m of t.yMarkers){let k=f(m);c(k)&&d.rect({x:0,y:-n/2+k*n,width:r,height:u.weight})}e.draw(d.fill(u.fill))}}});import{Flow as _,Paint as x,Rect as Ge,Shapes as U,Text as Ie,Types as L,component2d as ue,textOps as ze}from"@motionscript/sdk";var pe={...x.state,..._.state,...U.corners},Ue=ue({key:"legendEntry",state:{...pe,shown:L.number(1)},commands:{...x.commands},measure:(e,t,r)=>{let n=_.measure(e,t,r,x.inset(t));return t.shown>=1?n:{...n,width:t.shown*n.width}},layout:(e,t,r)=>_.layout(e,t,r,x.inset(t)),render:(e,t)=>x.draw(e,t,U.rect(e.size,t))});function Ne(e,t){if(Array.isArray(e))return e;let r=[...t??[]];for(let[n,i]of Object.entries(e))r[Number(n)]=i;return r}var $t=ue({key:"chartLegend",state:{...pe,series:h(()=>[]),swatches:h(()=>[]),legend:L.custom(K),reveal:h(()=>[],{resolve:Ne})},defaults:{flow:"horizontal",width:"hug",height:"hug",gap:e=>e.legend.itemGap,padding:e=>e.legend.padding,reveal:e=>e.series.map(t=>t.enabled??!0?1:0)},children:e=>{let t=e.legend.markerStyle;return e.series.map((r,n)=>Ue({flow:"horizontal",gap:12,align:"center",width:"hug",height:"hug",opacity:()=>e.reveal[n]??0,gapScale:()=>e.reveal[n]??0,shown:()=>e.reveal[n]??0,children:[Ie({...ze.styleProps(e.legend.textStyle),text:r.label}),Ge({width:t.width,height:t.height,cornerRadius:t.borderRadius,fill:e.swatches[n]??"white",stroke:t.stroke,shadow:t.shadow})]}))},commands:{...x.commands,showSeries:{args:{index:L.number(0,{min:0,step:1})},run:(e,t)=>e.args.index in t.series?e.animate(fe(t,e.args.index,1,A(e))):e.wait(e.duration)},hideSeries:{args:{index:L.number(0,{min:0,step:1})},run:(e,t)=>e.args.index in t.series?e.animate(fe(t,e.args.index,0,A(e))):e.wait(e.duration)},spotlightSeries:{args:{index:L.number(0,{min:0,step:1})},run:(e,t,r)=>e.together(r.flatMap((n,i)=>(t.reveal[i]??0)>0?[n.to({opacity:i===e.args.index?1:$})]:[]))}},measure:(e,t,r)=>_.measure(e,t,r,x.inset(t)),layout:(e,t,r)=>_.layout(e,t,r,x.inset(t)),render:(e,t)=>x.draw(e,t,U.rect(e.size,t))});function fe(e,t,r,n){let i=e.reveal[t]??0;return o=>({reveal:{[t]:i+(r-i)*n(o)}})}function Ht(e,t){return(e.reveal[t]??0)>0}export*from"@motionscript/sdk/component";export{h as a,Ee as b,A as c,q as d,R as e,ee as f,P as g,te as h,C as i,ge as j,D as k,Be as l,Ye as m,X as n,E as o,Y as p,$ as q,$e as r,He as s,Ve as t,We as u,j as v,O as w,v as x,K as y,je as z,Ke as A,Je as B,Qe as C,Ze as D,qe as E,et as F,tt as G,rt as H,nt as I,ot as J,it as K,we as L,lt as M,st as N,J as O,at as P,ct as Q,Q as R,ft as S,Z as T,Me as U,le as V,Oe as W,vt as X,At as Y,Pt as Z,F as _,Ft as $,zt as aa,$t as ba,Ht as ca};
-//# sourceMappingURL=chunk-TJNHLQGV.js.map