@motionscript/charts 0.1.0 → 0.1.1-alpha.1

package/dist/radar-chart/radar-chart.js

@@ -0,0 +1,224 @@
+import { Rect, Text, Types, component2d, easeOut, textOps, } from "@motionscript/sdk";
+import { laidOutSize } from "../kit/cartesian.js";
+import { ChartLegend } from "../kit/chart-legend.js";
+import { SERIES_ARG, asParts, fresh } from "../kit/entries.js";
+import { ENTER_SHARE, LEGEND_SLIDE, beats } from "../kit/motion.js";
+import { SPOTLIGHT_DIM } from "../kit/shared.js";
+import { CHART_COLORS, CHART_LEGEND, CHART_STYLE_FAMILY, CHART_STYLE_PRESETS, CHART_TEXT, legendConfigOf, markerText, seriesFill, } from "../kit/style.js";
+import { RadarGrid } from "./radar-grid.js";
+import { RadarSeries } from "./radar-series.js";
+import { RADAR_GRID, RADAR_MARKS, categoriesOf, fitRadius, fractionOf, labelAnchor, labelPoint, scaleOf, valuesOf, } from "./shared.js";
+/** The scale the web is drawn to, whether `max` was given or left to the data. */
+export function radarScale(state) {
+    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, index) {
+    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) {
+    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, children, index, show) {
+    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(() => [], { kind: "dataset" }),
+        /** The column that names each spoke. */
+        categoryField: "",
+        series: fresh(() => [], { 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, {
+            colors: CHART_COLORS,
+            text: CHART_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" },
+    allowedChildren: [],
+    children: (state) => {
+        const style = () => state.style;
+        let plot;
+        const plotSize = () => laidOutSize(plot);
+        const radius = () => fitRadius(plotSize(), categoriesOf(state.data, state.categoryField), style().fontSize, 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,
+            shape: () => style().gridShape,
+            stroke: () => style().gridStroke,
+            spokeStroke: () => style().spokeStroke,
+        });
+        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],
+        }));
+        const parts = [grid, ...series];
+        if (state.style.spokeLabels) {
+            const labels = [];
+            for (let i = 0; i < count; i++) {
+                const anchor = labelAnchor(i, count);
+                const align = anchor === "centerLeft" ? "left" : anchor === "centerRight" ? "right" : "center";
+                const at = () => labelPoint(i, count, radius(), style().fontSize);
+                labels.push(new Text({
+                    ...textOps.styleProps(markerText(state.style, align)),
+                    text: () => categoriesOf(state.data, state.categoryField)[i] ?? "",
+                    fontSize: () => style().fontSize,
+                    fontWeight: () => style().fontWeight,
+                    fill: () => style().muted,
+                    [anchor]: at,
+                }));
+            }
+            parts.push(new Rect({ width: "fill", height: "fill", children: labels }));
+        }
+        plot = new Rect({ width: "fill", height: "fill", children: parts });
+        const row = [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,
+            });
+            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]);
+    },
+    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) => ({ 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 })] : []),
+                ]);
+            },
+        },
+    },
+});
+//# sourceMappingURL=radar-chart.js.map

package/dist/radar-chart/radar-chart.js.map

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

package/dist/radar-chart/radar-grid.d.ts

@@ -0,0 +1,43 @@
+import { type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps, type Stroke, type StrokeResolved } from "@motionscript/sdk";
+import { type GridShape } from "./shared.js";
+/**
+ * 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 declare const RadarGrid: import("@motionscript/sdk").Component<"radarGrid", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly count: 0;
+    /** The rim, in px. */
+    readonly radius: 0;
+    readonly levels: 4;
+    readonly shape: import("@motionscript/sdk").Type<GridShape, GridShape, false>;
+    readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** The line out to each category; empty draws none. */
+    readonly spokeStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** How far the web has grown out, `0`-`1`. Rests at 1 so a paused canvas paints it. */
+    readonly reveal: 1;
+}>, {}, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly count: 0;
+    /** The rim, in px. */
+    readonly radius: 0;
+    readonly levels: 4;
+    readonly shape: import("@motionscript/sdk").Type<GridShape, GridShape, false>;
+    readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** The line out to each category; empty draws none. */
+    readonly spokeStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** How far the web has grown out, `0`-`1`. Rests at 1 so a paused canvas paints it. */
+    readonly reveal: 1;
+}>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly count: 0;
+    /** The rim, in px. */
+    readonly radius: 0;
+    readonly levels: 4;
+    readonly shape: import("@motionscript/sdk").Type<GridShape, GridShape, false>;
+    readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** The line out to each category; empty draws none. */
+    readonly spokeStroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    /** How far the web has grown out, `0`-`1`. Rests at 1 so a paused canvas paints it. */
+    readonly reveal: 1;
+}>, {}, _Node2D<_Node2DProps>>>>;
+export type RadarGrid = NodeOf<typeof RadarGrid>;
+//# sourceMappingURL=radar-grid.d.ts.map

package/dist/radar-chart/radar-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radar-grid.d.ts","sourceRoot":"","sources":["../../src/radar-chart/radar-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,MAAM,EACX,KAAK,cAAc,EAEpB,MAAM,mBAAmB,CAAA;AAG1B,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,UAAU,CAAA;AAEzD;;;;GAIG;AACH,eAAO,MAAM,SAAS;;IAIlB,sBAAsB;;;;;IAKtB,uDAAuD;;IAEvD,uFAAuF;;;;IAPvF,sBAAsB;;;;;IAKtB,uDAAuD;;IAEvD,uFAAuF;;;;IAPvF,sBAAsB;;;;;IAKtB,uDAAuD;;IAEvD,uFAAuF;;gCAyCzF,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,SAAS,CAAC,CAAA"}

package/dist/radar-chart/radar-grid.js

@@ -0,0 +1,61 @@
+import { Graphics2D, Types, clamp, component2d, strokeOps, } from "@motionscript/sdk";
+import { loadPaints } from "../kit/paints.js";
+import { spokeDirection } from "./shared.js";
+/**
+ * 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,
+        shape: Types.custom("polygon"),
+        stroke: Types.custom([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
+        /** The line out to each category; empty draws none. */
+        spokeStroke: Types.custom([], { 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, { 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;
+        // 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;
+            const ring = new Graphics2D();
+            if (round) {
+                ring.ellipse({ width: r * 2, height: r * 2 });
+            }
+            else {
+                const points = [];
+                for (let i = 0; i < count; i++) {
+                    const d = spokeDirection(i, count);
+                    points.push({ x: d.x * r, y: d.y * r });
+                }
+                ring.line({ points, closed: true });
+            }
+            ctx.draw(ring.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));
+        }
+    },
+});
+//# sourceMappingURL=radar-grid.js.map

package/dist/radar-chart/radar-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radar-grid.js","sourceRoot":"","sources":["../../src/radar-chart/radar-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,EACX,SAAS,GAQV,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAkB,MAAM,UAAU,CAAA;AAEzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC;IACnC,GAAG,EAAE,WAAW;IAChB,KAAK,EAAE;QACL,KAAK,EAAE,CAAC;QACR,sBAAsB;QACtB,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,KAAK,CAAC,MAAM,CAAY,SAAS,CAAC;QACzC,MAAM,EAAE,KAAK,CAAC,MAAM,CAA2B,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;QACxG,uDAAuD;QACvD,WAAW,EAAE,KAAK,CAAC,MAAM,CAA2B,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;QAC7G,uFAAuF;QACvF,MAAM,EAAE,CAAC;KACV;IACD,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;IAC3C,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;IAC3F,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACrB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QACtC,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,GAAG,IAAI,CAAA;QAC/B,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC;YAAE,OAAM;QACjC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;QAClD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;QACpD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAA;QAEnD,6FAA6F;QAC7F,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,IAAI,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;YACxE,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,MAAM,CAAA;YAChC,MAAM,IAAI,GAAG,IAAI,UAAU,EAAE,CAAA;YAC7B,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;YAC/C,CAAC;iBAAM,CAAC;gBACN,MAAM,MAAM,GAAc,EAAE,CAAA;gBAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;oBAC/B,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,EAAE,KAAK,CAAC,CAAA;oBAClC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;gBACzC,CAAC;gBACD,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA;YACrC,CAAC;YACD,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAA;QACnD,CAAC;QAED,IAAI,KAAK,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAC1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YAC/B,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,EAAE,KAAK,CAAC,CAAA;YAClC,GAAG,CAAC,IAAI,CACN,IAAI,UAAU,EAAE;iBACb,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC;iBAClE,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC;iBACzB,OAAO,CAAC,IAAI,CAAC,CACjB,CAAA;QACH,CAAC;IACH,CAAC;CACF,CAAC,CAAA","sourcesContent":["import {\n  Graphics2D,\n  Types,\n  clamp,\n  component2d,\n  strokeOps,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n  type Stroke,\n  type StrokeResolved,\n  type Vector2,\n} from \"@motionscript/sdk\"\n\nimport { loadPaints } from \"../kit/paints\"\nimport { spokeDirection, type GridShape } from \"./shared\"\n\n/**\n * The web of a {@link RadarChart}: `levels` rings and, if asked, a spoke to each\n * of `count` categories, drawn from the node's centre out to `radius`. `reveal`\n * grows the web from nothing.\n */\nexport const RadarGrid = component2d({\n  key: \"radarGrid\",\n  state: {\n    count: 0,\n    /** The rim, in px. */\n    radius: 0,\n    levels: 4,\n    shape: Types.custom<GridShape>(\"polygon\"),\n    stroke: Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n    /** The line out to each category; empty draws none. */\n    spokeStroke: Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n    /** How far the web has grown out, `0`-`1`. Rests at 1 so a paused canvas paints it. */\n    reveal: 1,\n  },\n  defaults: { width: \"fill\", height: \"fill\" },\n  load: (loader, state) => loadPaints(loader, { strokes: [state.stroke, state.spokeStroke] }),\n  render: (ctx, state) => {\n    const grow = clamp(state.reveal, 0, 1)\n    const rim = state.radius * grow\n    if (rim <= 0 || grow <= 0) return\n    const count = Math.max(0, Math.round(state.count))\n    const levels = Math.max(1, Math.round(state.levels))\n    const round = state.shape === \"circle\" || count < 3\n\n    // One draw per ring: rings chained into one surface would stroke only their union's outline.\n    for (let level = 1; state.stroke.length > 0 && level <= levels; level++) {\n      const r = (rim * level) / levels\n      const ring = new Graphics2D()\n      if (round) {\n        ring.ellipse({ width: r * 2, height: r * 2 })\n      } else {\n        const points: Vector2[] = []\n        for (let i = 0; i < count; i++) {\n          const d = spokeDirection(i, count)\n          points.push({ x: d.x * r, y: d.y * r })\n        }\n        ring.line({ points, closed: true })\n      }\n      ctx.draw(ring.stroke(state.stroke).opacity(grow))\n    }\n\n    if (state.spokeStroke.length === 0) return\n    for (let i = 0; i < count; i++) {\n      const d = spokeDirection(i, count)\n      ctx.draw(\n        new Graphics2D()\n          .line({ points: [{ x: 0, y: 0 }, { x: d.x * rim, y: d.y * rim }] })\n          .stroke(state.spokeStroke)\n          .opacity(grow)\n      )\n    }\n  },\n})\n\nexport type RadarGrid = NodeOf<typeof RadarGrid>\n"]}

package/dist/radar-chart/radar-series.d.ts

@@ -0,0 +1,59 @@
+import { type Fill, type FillResolved, type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps, type Stroke, type StrokeResolved, type Vector2 } from "@motionscript/sdk";
+/** The vertices of a series' polygon: spoke `i` at `fractions[i]` of the rim, scaled by `grow` about the centre. */
+export declare function seriesVertices(fractions: readonly number[], radius: number, grow?: number): Vector2[];
+/** 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 declare const RadarSeries: import("@motionscript/sdk").Component<"radarSeries", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** Each spoke's value as a fraction of the rim, `0`-`1`, in spoke order. */
+    readonly fractions: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** The rim, in px. */
+    readonly radius: 0;
+    readonly fill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
+    readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    readonly areaOpacity: 0.25;
+    readonly dots: true;
+    readonly dotSize: 10;
+    /** Growth out of the centre, `0`-`1`. Rests at 1 so a paused canvas paints it; `enter` drives it from 0. */
+    readonly progress: 1;
+    /** Whether the series is drawn at all, flipped alongside its legend entry. */
+    readonly enabled: true;
+}>, {
+    readonly enter: {
+        readonly from: import("@motionscript/sdk").Type<number, number, false>;
+        readonly to: import("@motionscript/sdk").Type<number, number, false>;
+    };
+}, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** Each spoke's value as a fraction of the rim, `0`-`1`, in spoke order. */
+    readonly fractions: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** The rim, in px. */
+    readonly radius: 0;
+    readonly fill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
+    readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    readonly areaOpacity: 0.25;
+    readonly dots: true;
+    readonly dotSize: 10;
+    /** Growth out of the centre, `0`-`1`. Rests at 1 so a paused canvas paints it; `enter` drives it from 0. */
+    readonly progress: 1;
+    /** Whether the series is drawn at all, flipped alongside its legend entry. */
+    readonly enabled: true;
+}>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    /** Each spoke's value as a fraction of the rim, `0`-`1`, in spoke order. */
+    readonly fractions: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** The rim, in px. */
+    readonly radius: 0;
+    readonly fill: import("@motionscript/sdk").Type<Fill, FillResolved[], false>;
+    readonly stroke: import("@motionscript/sdk").Type<Stroke, StrokeResolved[], false>;
+    readonly areaOpacity: 0.25;
+    readonly dots: true;
+    readonly dotSize: 10;
+    /** Growth out of the centre, `0`-`1`. Rests at 1 so a paused canvas paints it; `enter` drives it from 0. */
+    readonly progress: 1;
+    /** Whether the series is drawn at all, flipped alongside its legend entry. */
+    readonly enabled: true;
+}>, {
+    readonly enter: {
+        readonly from: import("@motionscript/sdk").Type<number, number, false>;
+        readonly to: import("@motionscript/sdk").Type<number, number, false>;
+    };
+}, _Node2D<_Node2DProps>>>>;
+export type RadarSeries = NodeOf<typeof RadarSeries>;
+//# sourceMappingURL=radar-series.d.ts.map

package/dist/radar-chart/radar-series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radar-series.d.ts","sourceRoot":"","sources":["../../src/radar-chart/radar-series.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,IAAI,EACT,KAAK,YAAY,EACjB,KAAK,MAAM,EAEX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,MAAM,EACX,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,mBAAmB,CAAA;AAO1B,oHAAoH;AACpH,wBAAgB,cAAc,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,SAAI,GAAG,OAAO,EAAE,CAMhG;AAED,uKAAuK;AACvK,eAAO,MAAM,WAAW;IAGpB,4EAA4E;;IAE5E,sBAAsB;;;;;;;IAOtB,4GAA4G;;IAE5G,8EAA8E;;;;;;;;IAX9E,4EAA4E;;IAE5E,sBAAsB;;;;;;;IAOtB,4GAA4G;;IAE5G,8EAA8E;;;IAX9E,4EAA4E;;IAE5E,sBAAsB;;;;;;;IAOtB,4GAA4G;;IAE5G,8EAA8E;;;;;;;2BAsChF,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}

package/dist/radar-chart/radar-series.js

@@ -0,0 +1,71 @@
+import { Graphics2D, Types, clamp, component2d, fillOps, strokeOps, } from "@motionscript/sdk";
+import { fresh } from "../kit/entries.js";
+import { frameEase } from "../kit/motion.js";
+import { loadPaints } from "../kit/paints.js";
+import { spokeDirection } from "./shared.js";
+/** The vertices of a series' polygon: spoke `i` at `fractions[i]` of the rim, scaled by `grow` about the centre. */
+export function seriesVertices(fractions, radius, grow = 1) {
+    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(() => []),
+        /** The rim, in px. */
+        radius: 0,
+        fill: Types.custom([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
+        stroke: Types.custom([], { 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));
+        }
+    },
+});
+//# sourceMappingURL=radar-series.js.map

package/dist/radar-chart/radar-series.js.map

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

package/dist/radar-chart/shared.d.ts

@@ -0,0 +1,73 @@
+import { type DataRecord, type Size2D, type StrokeResolved, type Stroke as _Stroke, type Vector2 } from "@motionscript/sdk";
+import { type ChartSeries } from "../kit/shared.js";
+export type GridShape = "polygon" | "circle";
+/** The radar chart's own grid group: the web the polygons are drawn over. */
+export declare const RADAR_GRID: {
+    /** Whether the rings are straight-edged (a polygon through the spokes) or round. */
+    gridShape: import("@motionscript/sdk").Type<"circle" | "polygon", "circle" | "polygon", false>;
+    /** How many rings, outermost at the scale's maximum. */
+    gridLevels: import("@motionscript/sdk").Type<number, number, false>;
+    /** The rings; empty draws none. */
+    gridStroke: import("@motionscript/sdk").Type<_Stroke, StrokeResolved[], false>;
+    /** The line from the centre out to each category; empty draws none. */
+    spokeStroke: import("@motionscript/sdk").Type<_Stroke, StrokeResolved[], false>;
+    /** Read as the chart is built: whether the category names stand around the rim. */
+    spokeLabels: import("@motionscript/sdk").Type<boolean, boolean, false>;
+};
+export declare const RADAR_MARKS: {
+    /** Outline weight of each series' polygon. */
+    strokeWidth: import("@motionscript/sdk").Type<number, number, false>;
+    /** How strongly each polygon is filled in its series colour; 0 leaves an outline. */
+    areaOpacity: import("@motionscript/sdk").Type<number, number, false>;
+    /** Whether a dot marks each value on its spoke. */
+    dots: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    dotSize: import("@motionscript/sdk").Type<number, number, false>;
+};
+/** 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 fontSize: number;
+}
+/** Spoke `index` of `count`, as a unit direction: 12 o'clock first, clockwise on screen, y up. */
+export declare function spokeDirection(index: number, count: number): Vector2;
+/** One category per data row. */
+export declare function categoriesOf(data: readonly DataRecord[], field: string): string[];
+/** One list of values per series, a value per row. */
+export declare function valuesOf(data: readonly DataRecord[], series: readonly ChartSeries[]): number[][];
+/** `value` rounded up to a tidy 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8 times a power of ten. */
+export declare function niceCeil(value: number): number;
+/**
+ * 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 declare function scaleOf(values: readonly (readonly number[])[], min: number, max: number): {
+    min: number;
+    max: number;
+};
+/** Where `value` stands between the scale's ends, `0`-`1`. */
+export declare function fractionOf(value: number, scale: {
+    min: number;
+    max: number;
+}): number;
+export type LabelAnchor = "centerLeft" | "centerRight" | "bottomCenter" | "topCenter";
+/** Which corner of a category's label touches the point beside its spoke's end. */
+export declare function labelAnchor(index: number, count: number): LabelAnchor;
+export declare function labelPad(fontSize: number): number;
+/** Rough size of a label, since the web is fitted before any text is measured. */
+export declare function labelSize(caption: string, fontSize: number): Size2D;
+/**
+ * The rim's radius for a box: the largest the web can be with every label
+ * (when there are labels) still inside it.
+ */
+export declare function fitRadius(box: Size2D, categories: readonly string[], fontSize: number, labelled: boolean): number;
+/** Where spoke `index`'s label is pinned: just past the rim, centre-relative, y up. */
+export declare function labelPoint(index: number, count: number, radius: number, fontSize: number): Vector2;
+//# sourceMappingURL=shared.d.ts.map

package/dist/radar-chart/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/radar-chart/shared.ts"],"names":[],"mappings":"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"}