@motionscript/charts 0.1.0-alpha.0 → 0.1.0-alpha.10

package/dist/pie-chart/pie-chart.js

@@ -1,291 +1,222 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Rect, command, node, Node2D, easeOut, property, } from "@motionscript/core";
+import { Rect, Types, component2d, easeOut, } from "@motionscript/sdk";
+import { asParts, fresh } from "../kit/entries.js";
+import { beats } from "../kit/motion.js";
 import { clampUnit } from "../kit/shared.js";
 import { PieLegend } from "./pie-legend.js";
 import { PieRing } from "./pie-ring.js";
 import { DEFAULT_PIE_CHART_THEME, lerpPieChartTheme, resolvePieChartTheme, resolvePieSlices, } from "./shared.js";
-import { drive, hold, sequence as sequenceOf, together, } from "@motionscript/core/component";
 /**
- * How {@link PieChart.enter} divides its duration: the wedges sweeping in, then
- * the labels and the legend arriving together. Shares of the whole, so they sum
- * to 1 — the entrance takes exactly the time it was given, for the reason spelt
- * out on `LineChart.enter`.
+ * How `enter` divides its duration: the wedges sweeping in, then the labels and
+ * the legend arriving together. Shares of the whole, so they sum to 1.
  */
 const SWEEP_SHARE = 0.65;
 const LABEL_SHARE = 0.35;
+const SLICE_ARG = Types.number(0, { min: 0, step: 1 });
+/** The slices the ring and the legend draw, resolved from the rows and the palette. */
+function slicesOf(s) {
+    return resolvePieSlices(s.data, s.categoryField, s.valueField, s.theme.sliceFills);
+}
+/** How far slice `index` is pushed out, in `[0, 1]`. */
+function popAt(s, index) {
+    return clampUnit(s.pops[index] ?? 0);
+}
+/** Whether slice `index` is grown out past the ring's rim: past half way, so a slice mid-swell is not yet counted. */
+export function isSliceSelected(s, index) {
+    return popAt(s, index) > 0.5;
+}
 /**
- * A pie or donut chart, composed from two independent parts rather than one
- * monolithic draw — the third of the chart family, built the same way as the
- * line and bar charts beside it:
+ * How far each slice is dimmed by the selection, one entry per slice: 1 while
+ * nothing is out, and for the selected slice itself; falling toward the theme's
+ * `dimOpacity` for the rest in proportion to how far the selection has grown.
+ */
+function sliceDims(s) {
+    let focus = 0;
+    for (let i = 0; i < s.data.length; i++)
+        focus = Math.max(focus, popAt(s, i));
+    const dim = s.theme.spotlight.dimOpacity;
+    if (focus <= 0)
+        return s.data.map(() => 1);
+    return s.data.map((_, i) => 1 - (1 - clampUnit(dim)) * focus * (1 - popAt(s, i)));
+}
+/**
+ * Every slice's pop eased from where it is to what `pop` asks for. A move that
+ * changes nothing still takes its slot, writing nothing.
+ */
+function popping(timeline, s, pop) {
+    const from = s.data.map((_, i) => popAt(s, i));
+    const targets = s.data.map((_, i) => clampUnit(pop(i)));
+    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 ring and the legend, found through the chart's children: the last row of them is the one it built. */
+function partsOf(children) {
+    for (let i = children.length - 1; i >= 0; i--) {
+        const row = children[i];
+        const ring = Rect.is(row) ? row.children.find(PieRing.is) : undefined;
+        if (ring)
+            return { ring, legend: row.children.find(PieLegend.is) ?? null };
+    }
+    return null;
+}
+/**
+ * A pie or donut chart, composed from two parts laid out by a horizontal-flow
+ * {@link Rect} — the ring filling whatever the hugging legend leaves, both
+ * centred:
  *
  * - {@link PieRing} — the wedges, each sized by its share of the total, with its
- *   label set inside its own band or pinned outside on a leader line, and the
- *   summary in the hole. The only part of the family that draws a path.
+ *   label inside its own band or pinned outside on a leader line, and the
+ *   summary in the hole.
  * - {@link PieLegend} — a column of swatch-and-caption rows naming each slice.
  *
- * The two are laid out by a plain horizontal-flow {@link Rect}: the ring fills whatever the
- * hugging legend leaves, both centred, so the chart re-flows if its box changes.
- *
- * **One mark per row, not per column** — which is what makes this the odd one of
- * the three. A line or a bar chart plots *series*, so its colours belong to
- * columns and hiding one is a sensible thing to ask for. A pie plots rows, so its
- * palette is indexed by row and there is nothing to hide: dropping a slice would
- * silently re-cut every other wedge's share, which is a different chart rather
- * than the same chart with a series switched off. {@link selectSlice} and its
- * siblings are what a pie has instead — a slice swells out of the ring, its hole
- * edge staying put, and everything else dims behind it.
+ * **One mark per row, not per column**: a pie's palette is indexed by row and
+ * there is nothing to hide, since dropping a slice would re-cut every other
+ * wedge. `selectSlice` and its siblings are what a pie has instead — a slice
+ * swells out of the ring and everything else dims behind it.
  *
- * **Resting state is the finished chart** — the same bargain the other two make:
- * the studio paints a node's Initial state on a paused canvas, so a chart that
- * only appeared once a command had run would be edited blind. {@link enter} arms
- * every part back to its pre-entrance state before animating. The one exception
- * is the hole's summary, which a scene can hold back with `showCenter: false`
- * because it is usually the chart's *conclusion* rather than part of its setup.
+ * **Resting state is the finished chart**; `enter` arms every part on its first
+ * frame. The one exception is the hole's summary, which a scene can hold back
+ * with `showCenter: false`, because it is usually the chart's *conclusion*.
  */
-let PieChart = class PieChart extends Node2D {
-    // ---- Part handles (built in the constructor) --------------------------
-    ring;
-    legend = null;
-    /** `this.theme` read back through its *resolved* shape — see `LineChart.theme`. */
-    get resolvedTheme() {
-        return this.theme;
-    }
-    /** The slices the ring and the legend draw, resolved from the rows and the palette. */
-    get slices() {
-        return resolvePieSlices(this.data, this.categoryField, this.valueField, this.resolvedTheme.sliceFills);
-    }
-    /**
-     * How far each slice is dimmed by the current selection, one entry per slice —
-     * 1 while nothing is selected, and for the selected slice itself; falling
-     * toward the theme's `dimOpacity` for the rest in proportion to how far the
-     * selection has grown.
-     */
-    sliceDims() {
-        let focus = 0;
-        for (let i = 0; i < this.data.length; i++) {
-            focus = Math.max(focus, this.popAt(i));
-        }
-        const dim = this.resolvedTheme.spotlight.dimOpacity;
-        if (focus <= 0)
-            return this.data.map(() => 1);
-        return this.data.map((_, i) => 1 - (1 - clampUnit(dim)) * focus * (1 - this.popAt(i)));
-    }
-    /** How far slice `index` is currently pushed out, in `[0, 1]`. */
-    popAt(index) {
-        return clampUnit(this.pops[index] ?? 0);
-    }
-    constructor(props) {
-        super(props);
-        // The whole chart is composed from plain props/`data` — no context needed,
-        // so the parts are built here (super() applied the props above). The slice
-        // *structure* (one wedge and one legend row each) is read once, like every
-        // other chart's series list; everything the parts draw with is passed as a
-        // closure, so `chart.to({ theme })` genuinely re-paints the ring.
-        const slices = this.slices;
-        const showLegend = props?.showLegend !== false;
-        this.pops = slices.map(() => 0);
-        this.ring = new PieRing({
-            width: "fill",
-            height: "fill",
-            slices,
-            ring: () => this.resolvedTheme.ring,
-            label: () => this.resolvedTheme.label,
-            centerStyle: () => this.resolvedTheme.center,
-            labelMode: this.labelMode,
-            labelPlacement: this.labelPlacement,
-            pops: () => this.pops,
-            dimOpacity: () => this.resolvedTheme.spotlight.dimOpacity,
-            centerLabel: this.centerLabel,
-            centerCaption: this.centerCaption,
-            centerReveal: props?.showCenter === false ? 0 : 1,
-        });
-        const children = [this.ring];
-        if (showLegend) {
-            this.legend = new PieLegend({
+export const PieChart = component2d({
+    key: "pieChart",
+    state: {
+        data: fresh(() => []),
+        categoryField: "",
+        valueField: "",
+        theme: Types.custom(DEFAULT_PIE_CHART_THEME, { resolve: resolvePieChartTheme, lerp: lerpPieChartTheme }),
+        labelMode: Types.custom("percent"),
+        labelPlacement: Types.custom("leader"),
+        gap: 40,
+        centerLabel: "",
+        centerCaption: "",
+        /**
+         * How far each slice is pushed out of the ring, `0`–`1` per index. Held here
+         * rather than on the ring because two parts read it: the wedges grow out by
+         * it, and the legend entries dim by it. Seeded flush, one to a row.
+         */
+        pops: fresh(() => []),
+        /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
+        showLegend: Types.boolean(true, { animatable: false }),
+        /** Read as the chart is built: whether the hole's summary is drawn at rest. */
+        showCenter: Types.boolean(true, { animatable: false }),
+    },
+    defaults: {
+        // Its parts fill it; a node made of them would hug them.
+        width: "fill",
+        height: "fill",
+        pops: (state) => slicesOf(state).map(() => 0),
+    },
+    allowedChildren: [],
+    // The slice *structure* (one label and one legend row per row) is read once;
+    // the slices themselves, their paint and the selection are bound, so a theme
+    // tween re-paints and a `set` of `data` re-cuts the wedges.
+    children: (state) => {
+        const theme = () => state.theme;
+        const slices = () => slicesOf(state);
+        const parts = [
+            new PieRing({
+                width: "fill",
+                height: "fill",
+                slices,
+                ring: () => theme().ring,
+                label: () => theme().label,
+                centerStyle: () => theme().center,
+                labelMode: state.labelMode,
+                labelPlacement: state.labelPlacement,
+                pops: () => state.pops,
+                dimOpacity: () => theme().spotlight.dimOpacity,
+                centerLabel: state.centerLabel,
+                centerCaption: state.centerCaption,
+                centerReveal: state.showCenter === false ? 0 : 1,
+            }),
+        ];
+        if (state.showLegend !== false) {
+            parts.push(new PieLegend({
                 slices,
-                legend: () => this.resolvedTheme.legend,
-                dims: () => this.sliceDims(),
-            });
-            children.push(this.legend);
+                legend: () => theme().legend,
+                dims: () => sliceDims(state),
+                // The column's spacing is the theme's as the chart was built, like the
+                // entries' type and chips.
+                gap: state.theme.legend.itemGap / 3,
+                padding: state.theme.legend.padding,
+            }));
         }
-        this.add(new Rect({ flow: "horizontal",
-            width: "fill",
-            height: "fill",
-            gap: this.gap,
-            align: "center",
-            children,
-        }));
-    }
-    // ---- Orchestrated entrance --------------------------------------------
-    /**
-     * Prime every part at its pre-entrance state — no wedges swept, no labels, the
-     * legend shifted and transparent.
-     *
-     * Called by {@link enter} before its first frame so nothing flashes ahead of
-     * its beat. Idempotent, and public so a scene can hide a chart ahead of time
-     * without starting the entrance. The hole's summary is deliberately untouched:
-     * it has its own signal, so a scene that set it up to land later keeps that.
-     */
-    arm() {
-        this.ring.set({ growth: 0, labelReveal: 0 });
-        this.legend?.arm();
-    }
-    /**
-     * Animate the whole chart in: the wedges sweep in clockwise from the theme's
-     * `startAngle`, then the labels fade up and the legend staggers in together.
-     *
-     * `duration` is the **whole** entrance; the phases are shares of it.
-     */
-    enter(args) {
-        const duration = args.duration;
-        const easing = args.easing ?? easeOut();
-        this.arm();
-        return sequenceOf(this.ring.sweep({ duration: duration * SWEEP_SHARE, easing }), together(this.ring.revealLabels({ duration: duration * LABEL_SHARE, easing }), this.legend
-            ? this.legend.enter({ duration: duration * LABEL_SHARE, easing })
-            : hold(duration * LABEL_SHARE)));
-    }
-    /**
-     * Fade the hole's summary up.
-     *
-     * Held out of {@link enter} on purpose: what sits in a donut's hole is usually
-     * the chart's conclusion, so the scene lands it on the beat it belongs to
-     * rather than giving it away with the first frame. Pair it with
-     * `showCenter: false`, which is what leaves the hole clear to begin with.
-     */
-    revealCenter(args = {}) {
-        return this.ring.revealCenter({ duration: args.duration ?? 0.6, easing: args.easing ?? easeOut() });
-    }
-    // ---- Selection ---------------------------------------------------------
-    /** True when slice `index` is currently grown out past the ring's rim. */
-    isSelected(index) {
-        return this.popAt(index) > 0.5;
-    }
-    /**
-     * Grow slice `index` out past the ring's rim and dim the rest of the chart
-     * behind it, leaving any other selected slice where it is.
-     */
-    selectSlice(args) {
-        const { sliceIndex: index } = args.data;
-        const duration = args.duration ?? 0.45;
-        const easing = args.easing ?? easeOut();
-        return this.tweenPops((i) => (i === index ? 1 : this.popAt(i)), duration, easing);
-    }
-    /** Settle slice `index` back flush with the ring. */
-    deselectSlice(args) {
-        const { sliceIndex: index } = args.data;
-        const duration = args.duration ?? 0.45;
-        const easing = args.easing ?? easeOut();
-        return this.tweenPops((i) => (i === index ? 0 : this.popAt(i)), duration, easing);
-    }
-    /** Move the focus to slice `index` alone, settling whatever else was out. */
-    selectOnlySlice(args) {
-        const { sliceIndex: index } = args.data;
-        const duration = args.duration ?? 0.45;
-        const easing = args.easing ?? easeOut();
-        return this.tweenPops((i) => (i === index ? 1 : 0), duration, easing);
-    }
-    /** Settle every slice flush and bring the whole chart back to full. */
-    clearSelection(args = {}) {
-        const duration = args.duration ?? 0.45;
-        const easing = args.easing ?? easeOut();
-        return this.tweenPops(() => 0, duration, easing);
-    }
-    /**
-     * Ease every slice's pop from where it is now to what `pop` asks for.
-     *
-     * Consumes its full duration even when nothing moves: in the studio a
-     * command's duration is what the timeline lays out and what its parallel
-     * siblings are timed against, so a no-op that took no frames would pull
-     * everything after it forward.
-     *
-     * `from` and the targets are read when the command is *built*, which for a
-     * driven scene is with the node in the state its own start time implies — so a
-     * select that follows another starts from where that one left the ring.
-     */
-    tweenPops(pop, duration, easing) {
-        const from = this.data.map((_, i) => this.popAt(i));
-        const targets = this.data.map((_, i) => clampUnit(pop(i)));
-        if (from.every((value, i) => value === targets[i]))
-            return hold(duration);
-        return drive(duration, (t) => {
-            const e = easing(t);
-            this.pops = from.map((value, i) => value + (targets[i] - value) * e);
-        });
-    }
-};
-__decorate([
-    property({ default: () => [] })
-], PieChart.prototype, "data", void 0);
-__decorate([
-    property({ default: "" })
-], PieChart.prototype, "categoryField", void 0);
-__decorate([
-    property({ default: "" })
-], PieChart.prototype, "valueField", void 0);
-__decorate([
-    property({
-        default: DEFAULT_PIE_CHART_THEME,
-        mapper: resolvePieChartTheme,
-        tween: lerpPieChartTheme,
-    })
-], PieChart.prototype, "theme", void 0);
-__decorate([
-    property({ default: "percent" })
-], PieChart.prototype, "labelMode", void 0);
-__decorate([
-    property({ default: "leader" })
-], PieChart.prototype, "labelPlacement", void 0);
-__decorate([
-    property({ default: 40 })
-], PieChart.prototype, "gap", void 0);
-__decorate([
-    property({ default: "" })
-], PieChart.prototype, "centerLabel", void 0);
-__decorate([
-    property({ default: "" })
-], PieChart.prototype, "centerCaption", void 0);
-__decorate([
-    property({ default: () => [] })
-], PieChart.prototype, "pops", void 0);
-__decorate([
-    command()
-], PieChart.prototype, "enter", null);
-__decorate([
-    command()
-], PieChart.prototype, "revealCenter", null);
-__decorate([
-    command({ args: [{ key: "sliceIndex", kind: "number", default: 0, min: 0, step: 1 }] })
-], PieChart.prototype, "selectSlice", null);
-__decorate([
-    command({ args: [{ key: "sliceIndex", kind: "number", default: 0, min: 0, step: 1 }] })
-], PieChart.prototype, "deselectSlice", null);
-__decorate([
-    command({ args: [{ key: "sliceIndex", kind: "number", default: 0, min: 0, step: 1 }] })
-], PieChart.prototype, "selectOnlySlice", null);
-__decorate([
-    command()
-], PieChart.prototype, "clearSelection", null);
-PieChart = __decorate([
-    node({
-        key: "pieChart",
-        parentKey: "node",
-        forkable: true,
-        layout: {
-            children: "freeform",
-            defaultWidthMode: "fixed",
-            defaultHeightMode: "fixed",
-            acceptsChildren: true,
+        const row = new Rect({ flow: "horizontal", width: "fill", height: "fill", gap: state.gap, align: "center", children: parts });
+        return asParts([row]);
+    },
+    commands: {
+        /**
+         * Animate the whole chart in: the wedges sweep in clockwise from the theme's
+         * `startAngle`, then the labels fade up and the legend staggers in together.
+         * Its first frame arms the wedges, the labels and the legend; the hole's
+         * summary keeps its own signal. `duration` is the **whole** entrance.
+         */
+        enter: {
+            args: {},
+            // Held from the chart's 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 { ring, legend } = parts;
+                const sweep = timeline.duration * SWEEP_SHARE;
+                const labels = timeline.duration * LABEL_SHARE;
+                const at0 = (piece) => ({ at: 0, duration: 0, piece });
+                return beats(timeline, [
+                    at0(ring.to({ growth: 0, labelReveal: 0 })),
+                    ...(legend ? [at0(legend.run("arm"))] : []),
+                    { at: 0, duration: sweep, piece: ring.run("sweep") },
+                    { at: sweep, duration: labels, piece: ring.run("revealLabels") },
+                    ...(legend ? [{ at: sweep, duration: labels, piece: legend.run("enter") }] : []),
+                ]);
+            },
+        },
+        /**
+         * Fade the hole's summary up. Held out of `enter` on purpose: what sits in a
+         * donut's hole is usually the chart's conclusion, so the scene lands it on
+         * its own beat. Pair it with `showCenter: false`.
+         */
+        revealCenter: {
+            args: {},
+            easing: easeOut(),
+            run: (timeline, _state, children) => partsOf(children)?.ring.run("revealCenter") ?? timeline.wait(timeline.duration),
+        },
+        /** Grow slice `index` out past the ring's rim and dim the rest, leaving any other selected slice where it is. */
+        selectSlice: {
+            args: { sliceIndex: SLICE_ARG },
+            easing: easeOut(),
+            run: (timeline, state) => {
+                const index = timeline.args.sliceIndex;
+                return popping(timeline, state, (i) => (i === index ? 1 : popAt(state, i)));
+            },
+        },
+        /** Settle slice `index` back flush with the ring. */
+        deselectSlice: {
+            args: { sliceIndex: SLICE_ARG },
+            easing: easeOut(),
+            run: (timeline, state) => {
+                const index = timeline.args.sliceIndex;
+                return popping(timeline, state, (i) => (i === index ? 0 : popAt(state, i)));
+            },
+        },
+        /** Move the focus to slice `index` alone, settling whatever else was out. */
+        selectOnlySlice: {
+            args: { sliceIndex: SLICE_ARG },
+            easing: easeOut(),
+            run: (timeline, state) => {
+                const index = timeline.args.sliceIndex;
+                return popping(timeline, state, (i) => (i === index ? 1 : 0));
+            },
         },
-        seed: {
-            width: 680,
-            height: 480,
+        /** Settle every slice flush and bring the whole chart back to full. */
+        clearSelection: {
+            args: {},
+            easing: easeOut(),
+            run: (timeline, state) => popping(timeline, state, () => 0),
         },
-    })
-], PieChart);
-export { PieChart };
+    },
+});
 //# sourceMappingURL=pie-chart.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../src/pie-chart/pie-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Rect,\n  command,\n  node,\n  Node2D,\n  easeOut,\n  property,\n  type CommandArgs,\n  type DataRecord,\n  type EasingFunction,\n  type NodeConfig,\n  type Node2DProps,\n} from \"@motionscript/core\"\n\nimport { clampUnit } from \"../kit/shared\"\nimport { PieLegend } from \"./pie-legend\"\nimport { PieRing } from \"./pie-ring\"\nimport {\n  DEFAULT_PIE_CHART_THEME,\n  lerpPieChartTheme,\n  resolvePieChartTheme,\n  resolvePieSlices,\n  type PieChartConfig,\n  type PieChartTheme,\n  type PieLabelMode,\n  type PieLabelPlacement,\n  type PieSlice,\n} from \"./shared\"\nimport {\n  drive,\n  hold,\n  sequence as sequenceOf,\n  together,\n  type Seekable,\n} from \"@motionscript/core/component\"\n\nexport interface PieChartProps extends Node2DProps {\n  /** One row per slice — a plain record of field name to value. */\n  data: DataRecord[]\n  /** Key into each row for its slice caption, used on the labels and the legend. */\n  categoryField: string\n  /** Key into each row for its slice magnitude — the wedge's share of the ring. */\n  valueField: string\n  /**\n   * The chart's visual theme — slice palette, ring geometry, label and centre\n   * type, legend. Every branch is optional and deep-merged onto\n   * {@link DEFAULT_PIE_CHART_THEME}.\n   */\n  theme?: PieChartTheme\n  /** What the ring's labels say. */\n  labelMode?: PieLabelMode\n  /** Where they sit: inside their wedge, outside on a leader, or nowhere. */\n  labelPlacement?: PieLabelPlacement\n  /** Whether the legend column beside the ring is drawn at all. */\n  showLegend?: boolean\n  /** Gap between the ring and the legend, in px. */\n  gap?: number\n  /** Text set in the ring's hole — see {@link revealCenter}. */\n  centerLabel?: string\n  /** Smaller second line under {@link centerLabel}. */\n  centerCaption?: string\n  /**\n   * Whether the hole's summary is drawn at rest. `true` (the default) is the\n   * plain answer; a scene that wants the conclusion to land on a later beat sets\n   * this `false` and calls {@link revealCenter} when it gets there.\n   */\n  showCenter?: boolean\n}\n\n/**\n * How {@link PieChart.enter} divides its duration: the wedges sweeping in, then\n * the labels and the legend arriving together. Shares of the whole, so they sum\n * to 1 — the entrance takes exactly the time it was given, for the reason spelt\n * out on `LineChart.enter`.\n */\nconst SWEEP_SHARE = 0.65\nconst LABEL_SHARE = 0.35\n\n/**\n * A pie or donut chart, composed from two independent parts rather than one\n * monolithic draw — the third of the chart family, built the same way as the\n * line and bar charts beside it:\n *\n * - {@link PieRing} — the wedges, each sized by its share of the total, with its\n *   label set inside its own band or pinned outside on a leader line, and the\n *   summary in the hole. The only part of the family that draws a path.\n * - {@link PieLegend} — a column of swatch-and-caption rows naming each slice.\n *\n * The two are laid out by a plain horizontal-flow {@link Rect}: the ring fills whatever the\n * hugging legend leaves, both centred, so the chart re-flows if its box changes.\n *\n * **One mark per row, not per column** — which is what makes this the odd one of\n * the three. A line or a bar chart plots *series*, so its colours belong to\n * columns and hiding one is a sensible thing to ask for. A pie plots rows, so its\n * palette is indexed by row and there is nothing to hide: dropping a slice would\n * silently re-cut every other wedge's share, which is a different chart rather\n * than the same chart with a series switched off. {@link selectSlice} and its\n * siblings are what a pie has instead — a slice swells out of the ring, its hole\n * edge staying put, and everything else dims behind it.\n *\n * **Resting state is the finished chart** — the same bargain the other two make:\n * the studio paints a node's Initial state on a paused canvas, so a chart that\n * only appeared once a command had run would be edited blind. {@link enter} arms\n * every part back to its pre-entrance state before animating. The one exception\n * is the hole's summary, which a scene can hold back with `showCenter: false`\n * because it is usually the chart's *conclusion* rather than part of its setup.\n */\n@node({\n  key: \"pieChart\",\n  parentKey: \"node\",\n  forkable: true,\n  layout: {\n    children: \"freeform\",\n    defaultWidthMode: \"fixed\",\n    defaultHeightMode: \"fixed\",\n    acceptsChildren: true,\n  },\n  seed: {\n    width: 680,\n    height: 480,\n  },\n})\nexport class PieChart extends Node2D<PieChartProps> {\n  @property({ default: () => [] as DataRecord[] }) declare data: DataRecord[]\n  @property({ default: \"\" }) declare categoryField: string\n  @property({ default: \"\" }) declare valueField: string\n  @property({\n    default: DEFAULT_PIE_CHART_THEME,\n    mapper: resolvePieChartTheme,\n    tween: lerpPieChartTheme,\n  })\n  declare theme: PieChartTheme\n  @property({ default: \"percent\" }) declare labelMode: PieLabelMode\n  @property({ default: \"leader\" }) declare labelPlacement: PieLabelPlacement\n  @property({ default: 40 }) declare gap: number\n  @property({ default: \"\" }) declare centerLabel: string\n  @property({ default: \"\" }) declare centerCaption: string\n\n  /**\n   * How far each slice is currently pushed out of the ring, `0`–`1` per index.\n   *\n   * Held here rather than on the ring because two parts read it: the wedges grow\n   * out by it, and the legend entries dim by it. One signal, one tween, and the\n   * two can't drift.\n   */\n  @property({ default: () => [] as number[] }) declare pops: number[]\n\n  // ---- Part handles (built in the constructor) --------------------------\n  private ring: PieRing\n  private legend: PieLegend | null = null\n\n  /** `this.theme` read back through its *resolved* shape — see `LineChart.theme`. */\n  private get resolvedTheme(): PieChartConfig {\n    return this.theme as unknown as PieChartConfig\n  }\n\n  /** The slices the ring and the legend draw, resolved from the rows and the palette. */\n  private get slices(): PieSlice[] {\n    return resolvePieSlices(\n      this.data,\n      this.categoryField,\n      this.valueField,\n      this.resolvedTheme.sliceFills\n    )\n  }\n\n  /**\n   * How far each slice is dimmed by the current selection, one entry per slice —\n   * 1 while nothing is selected, and for the selected slice itself; falling\n   * toward the theme's `dimOpacity` for the rest in proportion to how far the\n   * selection has grown.\n   */\n  private sliceDims(): number[] {\n    let focus = 0\n    for (let i = 0; i < this.data.length; i++) {\n      focus = Math.max(focus, this.popAt(i))\n    }\n    const dim = this.resolvedTheme.spotlight.dimOpacity\n    if (focus <= 0) return this.data.map(() => 1)\n    return this.data.map(\n      (_, i) => 1 - (1 - clampUnit(dim)) * focus * (1 - this.popAt(i))\n    )\n  }\n\n  /** How far slice `index` is currently pushed out, in `[0, 1]`. */\n  private popAt(index: number): number {\n    return clampUnit(this.pops[index] ?? 0)\n  }\n\n  constructor(props?: NodeConfig<PieChart, PieChartProps>) {\n    super(props)\n\n    // The whole chart is composed from plain props/`data` — no context needed,\n    // so the parts are built here (super() applied the props above). The slice\n    // *structure* (one wedge and one legend row each) is read once, like every\n    // other chart's series list; everything the parts draw with is passed as a\n    // closure, so `chart.to({ theme })` genuinely re-paints the ring.\n    const slices = this.slices\n    const showLegend = props?.showLegend !== false\n    this.pops = slices.map(() => 0)\n\n    this.ring = new PieRing({\n      width: \"fill\",\n      height: \"fill\",\n      slices,\n      ring: () => this.resolvedTheme.ring,\n      label: () => this.resolvedTheme.label,\n      centerStyle: () => this.resolvedTheme.center,\n      labelMode: this.labelMode,\n      labelPlacement: this.labelPlacement,\n      pops: () => this.pops,\n      dimOpacity: () => this.resolvedTheme.spotlight.dimOpacity,\n      centerLabel: this.centerLabel,\n      centerCaption: this.centerCaption,\n      centerReveal: props?.showCenter === false ? 0 : 1,\n    })\n\n    const children: Node2D[] = [this.ring]\n    if (showLegend) {\n      this.legend = new PieLegend({\n        slices,\n        legend: () => this.resolvedTheme.legend,\n        dims: () => this.sliceDims(),\n      })\n      children.push(this.legend)\n    }\n\n    this.add(\n      new Rect({ flow: \"horizontal\",\n        width: \"fill\",\n        height: \"fill\",\n        gap: this.gap,\n        align: \"center\",\n        children,\n      })\n    )\n  }\n\n  // ---- Orchestrated entrance --------------------------------------------\n\n  /**\n   * Prime every part at its pre-entrance state — no wedges swept, no labels, the\n   * legend shifted and transparent.\n   *\n   * Called by {@link enter} before its first frame so nothing flashes ahead of\n   * its beat. Idempotent, and public so a scene can hide a chart ahead of time\n   * without starting the entrance. The hole's summary is deliberately untouched:\n   * it has its own signal, so a scene that set it up to land later keeps that.\n   */\n  arm(): void {\n    this.ring.set({ growth: 0, labelReveal: 0 })\n    this.legend?.arm()\n  }\n\n  /**\n   * Animate the whole chart in: the wedges sweep in clockwise from the theme's\n   * `startAngle`, then the labels fade up and the legend staggers in together.\n   *\n   * `duration` is the **whole** entrance; the phases are shares of it.\n   */\n  @command()\n  enter(\n    args: CommandArgs<Record<string, never>> & { duration: number }\n  ): Seekable {\n    const duration = args.duration\n    const easing = args.easing ?? easeOut()\n    this.arm()\n\n    return sequenceOf(\n      this.ring.sweep({ duration: duration * SWEEP_SHARE, easing }),\n      together(\n        this.ring.revealLabels({ duration: duration * LABEL_SHARE, easing }),\n        this.legend\n          ? this.legend.enter({ duration: duration * LABEL_SHARE, easing })\n          : hold(duration * LABEL_SHARE)\n      )\n    )\n  }\n\n  /**\n   * Fade the hole's summary up.\n   *\n   * Held out of {@link enter} on purpose: what sits in a donut's hole is usually\n   * the chart's conclusion, so the scene lands it on the beat it belongs to\n   * rather than giving it away with the first frame. Pair it with\n   * `showCenter: false`, which is what leaves the hole clear to begin with.\n   */\n  @command()\n  revealCenter(\n    args: CommandArgs<Record<string, never>> & { duration?: number } = {}\n  ): Seekable {\n    return this.ring.revealCenter({ duration: args.duration ?? 0.6, easing: args.easing ?? easeOut() })\n  }\n\n  // ---- Selection ---------------------------------------------------------\n\n  /** True when slice `index` is currently grown out past the ring's rim. */\n  isSelected(index: number): boolean {\n    return this.popAt(index) > 0.5\n  }\n\n  /**\n   * Grow slice `index` out past the ring's rim and dim the rest of the chart\n   * behind it, leaving any other selected slice where it is.\n   */\n  @command({ args: [{ key: \"sliceIndex\", kind: \"number\", default: 0, min: 0, step: 1 }] })\n  selectSlice(\n    args: CommandArgs<{ sliceIndex: number }> & { duration?: number }\n  ): Seekable {\n    const { sliceIndex: index } = args.data as { sliceIndex: number }\n    const duration = args.duration ?? 0.45\n    const easing = args.easing ?? easeOut()\n    return this.tweenPops((i) => (i === index ? 1 : this.popAt(i)), duration, easing)\n  }\n\n  /** Settle slice `index` back flush with the ring. */\n  @command({ args: [{ key: \"sliceIndex\", kind: \"number\", default: 0, min: 0, step: 1 }] })\n  deselectSlice(\n    args: CommandArgs<{ sliceIndex: number }> & { duration?: number }\n  ): Seekable {\n    const { sliceIndex: index } = args.data as { sliceIndex: number }\n    const duration = args.duration ?? 0.45\n    const easing = args.easing ?? easeOut()\n    return this.tweenPops((i) => (i === index ? 0 : this.popAt(i)), duration, easing)\n  }\n\n  /** Move the focus to slice `index` alone, settling whatever else was out. */\n  @command({ args: [{ key: \"sliceIndex\", kind: \"number\", default: 0, min: 0, step: 1 }] })\n  selectOnlySlice(\n    args: CommandArgs<{ sliceIndex: number }> & { duration?: number }\n  ): Seekable {\n    const { sliceIndex: index } = args.data as { sliceIndex: number }\n    const duration = args.duration ?? 0.45\n    const easing = args.easing ?? easeOut()\n    return this.tweenPops((i) => (i === index ? 1 : 0), duration, easing)\n  }\n\n  /** Settle every slice flush and bring the whole chart back to full. */\n  @command()\n  clearSelection(\n    args: CommandArgs<Record<string, never>> & { duration?: number } = {}\n  ): Seekable {\n    const duration = args.duration ?? 0.45\n    const easing = args.easing ?? easeOut()\n    return this.tweenPops(() => 0, duration, easing)\n  }\n\n  /**\n   * Ease every slice's pop from where it is now to what `pop` asks for.\n   *\n   * Consumes its full duration even when nothing moves: in the studio a\n   * command's duration is what the timeline lays out and what its parallel\n   * siblings are timed against, so a no-op that took no frames would pull\n   * everything after it forward.\n   *\n   * `from` and the targets are read when the command is *built*, which for a\n   * driven scene is with the node in the state its own start time implies — so a\n   * select that follows another starts from where that one left the ring.\n   */\n  private tweenPops(\n    pop: (index: number) => number,\n    duration: number,\n    easing: EasingFunction\n  ): Seekable {\n    const from = this.data.map((_, i) => this.popAt(i))\n    const targets = this.data.map((_, i) => clampUnit(pop(i)))\n    if (from.every((value, i) => value === targets[i])) return hold(duration)\n\n    return drive(duration, (t) => {\n      const e = easing(t)\n      this.pops = from.map((value, i) => value + (targets[i] - value) * e)\n    })\n  }\n}\n"]}
+{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../src/pie-chart/pie-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Rect,\n  Types,\n  component2d,\n  easeOut,\n  type ChildView,\n  type DataRecord,\n  type NodeOf,\n  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\n  type Node2D,\n  type Node2DProps,\n  type Timeline,\n} from \"@motionscript/sdk\"\n\nimport { asParts, fresh } from \"../kit/entries\"\nimport { beats, type Beat } from \"../kit/motion\"\nimport { clampUnit } from \"../kit/shared\"\nimport { PieLegend } from \"./pie-legend\"\nimport { PieRing } from \"./pie-ring\"\nimport {\n  DEFAULT_PIE_CHART_THEME,\n  lerpPieChartTheme,\n  resolvePieChartTheme,\n  resolvePieSlices,\n  type PieChartConfig,\n  type PieChartTheme,\n  type PieLabelMode,\n  type PieLabelPlacement,\n  type PieSlice,\n} from \"./shared\"\n\nexport interface PieChartProps extends Node2DProps {\n  /** One row per slice — a plain record of field name to value. */\n  data: DataRecord[]\n  /** Key into each row for its slice caption, used on the labels and the legend. */\n  categoryField: string\n  /** Key into each row for its slice magnitude — the wedge's share of the ring. */\n  valueField: string\n  /**\n   * The chart's visual theme — slice palette, ring geometry, label and centre\n   * type, legend. Every branch is optional and deep-merged onto\n   * {@link DEFAULT_PIE_CHART_THEME}.\n   */\n  theme?: PieChartTheme\n  /** What the ring's labels say. */\n  labelMode?: PieLabelMode\n  /** Where they sit: inside their wedge, outside on a leader, or nowhere. */\n  labelPlacement?: PieLabelPlacement\n  /** Whether the legend column beside the ring is drawn at all. */\n  showLegend?: boolean\n  /** Gap between the ring and the legend, in px. */\n  gap?: number\n  /** Text set in the ring's hole — see `revealCenter`. */\n  centerLabel?: string\n  /** Smaller second line under {@link centerLabel}. */\n  centerCaption?: string\n  /**\n   * Whether the hole's summary is drawn at rest. `true` (the default) is the\n   * plain answer; a scene that wants the conclusion to land on a later beat sets\n   * this `false` and runs `revealCenter` when it gets there.\n   */\n  showCenter?: boolean\n}\n\n/** What the selection reads: the rows, how they are cut, and the pops the commands move. */\nexport interface PieChartValues {\n  readonly data: DataRecord[]\n  readonly categoryField: string\n  readonly valueField: string\n  readonly theme: PieChartConfig\n  readonly pops: number[]\n}\n\n/**\n * How `enter` divides its duration: the wedges sweeping in, then the labels and\n * the legend arriving together. Shares of the whole, so they sum to 1.\n */\nconst SWEEP_SHARE = 0.65\nconst LABEL_SHARE = 0.35\n\nconst SLICE_ARG = Types.number(0, { min: 0, step: 1 })\n\n/** The slices the ring and the legend draw, resolved from the rows and the palette. */\nfunction slicesOf(s: PieChartValues): PieSlice[] {\n  return resolvePieSlices(s.data, s.categoryField, s.valueField, s.theme.sliceFills)\n}\n\n/** How far slice `index` is pushed out, in `[0, 1]`. */\nfunction popAt(s: PieChartValues, index: number): number {\n  return clampUnit(s.pops[index] ?? 0)\n}\n\n/** Whether slice `index` is grown out past the ring's rim: past half way, so a slice mid-swell is not yet counted. */\nexport function isSliceSelected(s: PieChartValues, index: number): boolean {\n  return popAt(s, index) > 0.5\n}\n\n/**\n * How far each slice is dimmed by the selection, one entry per slice: 1 while\n * nothing is out, and for the selected slice itself; falling toward the theme's\n * `dimOpacity` for the rest in proportion to how far the selection has grown.\n */\nfunction sliceDims(s: PieChartValues): number[] {\n  let focus = 0\n  for (let i = 0; i < s.data.length; i++) focus = Math.max(focus, popAt(s, i))\n  const dim = s.theme.spotlight.dimOpacity\n  if (focus <= 0) return s.data.map(() => 1)\n  return s.data.map((_, i) => 1 - (1 - clampUnit(dim)) * focus * (1 - popAt(s, i)))\n}\n\ntype AnyTimeline = Timeline<any, any>\n\n/**\n * Every slice's pop eased from where it is to what `pop` asks for. A move that\n * changes nothing still takes its slot, writing nothing.\n */\nfunction popping(timeline: AnyTimeline, s: PieChartValues, pop: (index: number) => number) {\n  const from = s.data.map((_, i) => popAt(s, i))\n  const targets = s.data.map((_, i) => clampUnit(pop(i)))\n  if (from.every((value, i) => value === targets[i])) return timeline.wait(timeline.duration)\n  return timeline.animate((t) => ({ pops: from.map((value, i) => value + (targets[i] - value) * t) }))\n}\n\n/** The ring and the legend, found through the chart's children: the last row of them is the one it built. */\nfunction partsOf(children: readonly ChildView[]) {\n  for (let i = children.length - 1; i >= 0; i--) {\n    const row = children[i]\n    const ring = Rect.is(row) ? row.children.find(PieRing.is) : undefined\n    if (ring) return { ring, legend: row.children.find(PieLegend.is) ?? null }\n  }\n  return null\n}\n\n/**\n * A pie or donut chart, composed from two parts laid out by a horizontal-flow\n * {@link Rect} — the ring filling whatever the hugging legend leaves, both\n * centred:\n *\n * - {@link PieRing} — the wedges, each sized by its share of the total, with its\n *   label inside its own band or pinned outside on a leader line, and the\n *   summary in the hole.\n * - {@link PieLegend} — a column of swatch-and-caption rows naming each slice.\n *\n * **One mark per row, not per column**: a pie's palette is indexed by row and\n * there is nothing to hide, since dropping a slice would re-cut every other\n * wedge. `selectSlice` and its siblings are what a pie has instead — a slice\n * swells out of the ring and everything else dims behind it.\n *\n * **Resting state is the finished chart**; `enter` arms every part on its first\n * frame. The one exception is the hole's summary, which a scene can hold back\n * with `showCenter: false`, because it is usually the chart's *conclusion*.\n */\nexport const PieChart = component2d({\n  key: \"pieChart\",\n  state: {\n    data: fresh<DataRecord[]>(() => []),\n    categoryField: \"\",\n    valueField: \"\",\n    theme: Types.custom<PieChartTheme, PieChartConfig>(DEFAULT_PIE_CHART_THEME, { resolve: resolvePieChartTheme, lerp: lerpPieChartTheme }),\n    labelMode: Types.custom<PieLabelMode>(\"percent\"),\n    labelPlacement: Types.custom<PieLabelPlacement>(\"leader\"),\n    gap: 40,\n    centerLabel: \"\",\n    centerCaption: \"\",\n    /**\n     * How far each slice is pushed out of the ring, `0`–`1` per index. Held here\n     * rather than on the ring because two parts read it: the wedges grow out by\n     * it, and the legend entries dim by it. Seeded flush, one to a row.\n     */\n    pops: fresh<number[]>(() => []),\n    /** Read as the chart is built: the legend is a part the chart builds or doesn't. */\n    showLegend: Types.boolean(true, { animatable: false }),\n    /** Read as the chart is built: whether the hole's summary is drawn at rest. */\n    showCenter: Types.boolean(true, { animatable: false }),\n  },\n  defaults: {\n    // Its parts fill it; a node made of them would hug them.\n    width: \"fill\",\n    height: \"fill\",\n    pops: (state) => slicesOf(state).map(() => 0),\n  },\n  allowedChildren: [],\n  // The slice *structure* (one label and one legend row per row) is read once;\n  // the slices themselves, their paint and the selection are bound, so a theme\n  // tween re-paints and a `set` of `data` re-cuts the wedges.\n  children: (state) => {\n    const theme = () => state.theme\n    const slices = () => slicesOf(state)\n    const parts: Node2D[] = [\n      new PieRing({\n        width: \"fill\",\n        height: \"fill\",\n        slices,\n        ring: () => theme().ring,\n        label: () => theme().label,\n        centerStyle: () => theme().center,\n        labelMode: state.labelMode,\n        labelPlacement: state.labelPlacement,\n        pops: () => state.pops,\n        dimOpacity: () => theme().spotlight.dimOpacity,\n        centerLabel: state.centerLabel,\n        centerCaption: state.centerCaption,\n        centerReveal: state.showCenter === false ? 0 : 1,\n      }) as unknown as Node2D,\n    ]\n    if (state.showLegend !== false) {\n      parts.push(\n        new PieLegend({\n          slices,\n          legend: () => theme().legend,\n          dims: () => sliceDims(state),\n          // The column's spacing is the theme's as the chart was built, like the\n          // entries' type and chips.\n          gap: state.theme.legend.itemGap / 3,\n          padding: state.theme.legend.padding,\n        }) as unknown as Node2D\n      )\n    }\n    const row = new Rect({ flow: \"horizontal\", width: \"fill\", height: \"fill\", gap: state.gap, align: \"center\", children: parts })\n    return asParts([row as unknown as Node2D])\n  },\n  commands: {\n    /**\n     * Animate the whole chart in: the wedges sweep in clockwise from the theme's\n     * `startAngle`, then the labels fade up and the legend staggers in together.\n     * Its first frame arms the wedges, the labels and the legend; the hole's\n     * summary keeps its own signal. `duration` is the **whole** entrance.\n     */\n    enter: {\n      args: {},\n      // Held from the chart's 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 { ring, legend } = parts\n        const sweep = timeline.duration * SWEEP_SHARE\n        const labels = timeline.duration * LABEL_SHARE\n        const at0 = (piece: Beat[\"piece\"]): Beat => ({ at: 0, duration: 0, piece })\n        return beats(timeline, [\n          at0(ring.to({ growth: 0, labelReveal: 0 })),\n          ...(legend ? [at0(legend.run(\"arm\"))] : []),\n          { at: 0, duration: sweep, piece: ring.run(\"sweep\") },\n          { at: sweep, duration: labels, piece: ring.run(\"revealLabels\") },\n          ...(legend ? [{ at: sweep, duration: labels, piece: legend.run(\"enter\") }] : []),\n        ])\n      },\n    },\n    /**\n     * Fade the hole's summary up. Held out of `enter` on purpose: what sits in a\n     * donut's hole is usually the chart's conclusion, so the scene lands it on\n     * its own beat. Pair it with `showCenter: false`.\n     */\n    revealCenter: {\n      args: {},\n      easing: easeOut(),\n      run: (timeline, _state, children) => partsOf(children)?.ring.run(\"revealCenter\") ?? timeline.wait(timeline.duration),\n    },\n    /** Grow slice `index` out past the ring's rim and dim the rest, leaving any other selected slice where it is. */\n    selectSlice: {\n      args: { sliceIndex: SLICE_ARG },\n      easing: easeOut(),\n      run: (timeline, state) => {\n        const index = timeline.args.sliceIndex\n        return popping(timeline, state, (i) => (i === index ? 1 : popAt(state, i)))\n      },\n    },\n    /** Settle slice `index` back flush with the ring. */\n    deselectSlice: {\n      args: { sliceIndex: SLICE_ARG },\n      easing: easeOut(),\n      run: (timeline, state) => {\n        const index = timeline.args.sliceIndex\n        return popping(timeline, state, (i) => (i === index ? 0 : popAt(state, i)))\n      },\n    },\n    /** Move the focus to slice `index` alone, settling whatever else was out. */\n    selectOnlySlice: {\n      args: { sliceIndex: SLICE_ARG },\n      easing: easeOut(),\n      run: (timeline, state) => {\n        const index = timeline.args.sliceIndex\n        return popping(timeline, state, (i) => (i === index ? 1 : 0))\n      },\n    },\n    /** Settle every slice flush and bring the whole chart back to full. */\n    clearSelection: {\n      args: {},\n      easing: easeOut(),\n      run: (timeline, state) => popping(timeline, state, () => 0),\n    },\n  },\n})\n\nexport type PieChart = NodeOf<typeof PieChart>\n"]}