@motionscript/charts 0.1.0-alpha.3 → 0.1.0-alpha.6

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

@@ -1,288 +1,219 @@
-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/sdk";
+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 { asCommand, hold, sequence as sequenceOf, together, } from "@motionscript/sdk/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),
+    },
+    // 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 asCommand(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))), duration);
-    }
-    /**
-     * 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 this.command(() => ({}), duration);
-        return this.command((t) => ({ pops: from.map((value, i) => value + (targets[i] - value) * t) }), duration, easing);
-    }
-};
-__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([...state.children, 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: {},
+            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 Command,\n  type CommandArgs,\n  type DataRecord,\n  type EasingFunction,\n  type NodeConfig,\n  type Node2DProps,\n} from \"@motionscript/sdk\"\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  asCommand,\n  hold,\n  sequence as sequenceOf,\n  together,\n} from \"@motionscript/sdk/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/** What the selection commands move: the chart's own {@link PieChart.pops}. */\ntype SlicePops = { pops: number[] }\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  ): Command<Record<string, never>> {\n    const duration = args.duration\n    const easing = args.easing ?? easeOut()\n    this.arm()\n\n    return asCommand(\n      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      duration\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  ): Command<{ centerReveal: number }> {\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  ): Command<SlicePops> {\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  ): Command<SlicePops> {\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  ): Command<SlicePops> {\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  ): Command<SlicePops> {\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  ): Command<SlicePops> {\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 this.command<SlicePops>(() => ({}), duration)\n\n    return this.command<SlicePops>(\n      (t) => ({ pops: from.map((value, i) => value + (targets[i] - value) * t) }),\n      duration,\n      easing\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 {\r\n  Rect,\r\n  Types,\r\n  component2d,\r\n  easeOut,\r\n  type ChildView,\r\n  type DataRecord,\r\n  type NodeOf,\r\n  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\r\n  type Node2D,\r\n  type Node2DProps,\r\n  type Timeline,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport { asParts, fresh } from \"../kit/entries\"\r\nimport { beats, type Beat } from \"../kit/motion\"\r\nimport { clampUnit } from \"../kit/shared\"\r\nimport { PieLegend } from \"./pie-legend\"\r\nimport { PieRing } from \"./pie-ring\"\r\nimport {\r\n  DEFAULT_PIE_CHART_THEME,\r\n  lerpPieChartTheme,\r\n  resolvePieChartTheme,\r\n  resolvePieSlices,\r\n  type PieChartConfig,\r\n  type PieChartTheme,\r\n  type PieLabelMode,\r\n  type PieLabelPlacement,\r\n  type PieSlice,\r\n} from \"./shared\"\r\n\r\nexport interface PieChartProps extends Node2DProps {\r\n  /** One row per slice — a plain record of field name to value. */\r\n  data: DataRecord[]\r\n  /** Key into each row for its slice caption, used on the labels and the legend. */\r\n  categoryField: string\r\n  /** Key into each row for its slice magnitude — the wedge's share of the ring. */\r\n  valueField: string\r\n  /**\r\n   * The chart's visual theme — slice palette, ring geometry, label and centre\r\n   * type, legend. Every branch is optional and deep-merged onto\r\n   * {@link DEFAULT_PIE_CHART_THEME}.\r\n   */\r\n  theme?: PieChartTheme\r\n  /** What the ring's labels say. */\r\n  labelMode?: PieLabelMode\r\n  /** Where they sit: inside their wedge, outside on a leader, or nowhere. */\r\n  labelPlacement?: PieLabelPlacement\r\n  /** Whether the legend column beside the ring is drawn at all. */\r\n  showLegend?: boolean\r\n  /** Gap between the ring and the legend, in px. */\r\n  gap?: number\r\n  /** Text set in the ring's hole — see `revealCenter`. */\r\n  centerLabel?: string\r\n  /** Smaller second line under {@link centerLabel}. */\r\n  centerCaption?: string\r\n  /**\r\n   * Whether the hole's summary is drawn at rest. `true` (the default) is the\r\n   * plain answer; a scene that wants the conclusion to land on a later beat sets\r\n   * this `false` and runs `revealCenter` when it gets there.\r\n   */\r\n  showCenter?: boolean\r\n}\r\n\r\n/** What the selection reads: the rows, how they are cut, and the pops the commands move. */\r\nexport interface PieChartValues {\r\n  readonly data: DataRecord[]\r\n  readonly categoryField: string\r\n  readonly valueField: string\r\n  readonly theme: PieChartConfig\r\n  readonly pops: number[]\r\n}\r\n\r\n/**\r\n * How `enter` divides its duration: the wedges sweeping in, then the labels and\r\n * the legend arriving together. Shares of the whole, so they sum to 1.\r\n */\r\nconst SWEEP_SHARE = 0.65\r\nconst LABEL_SHARE = 0.35\r\n\r\nconst SLICE_ARG = Types.number(0, { min: 0, step: 1 })\r\n\r\n/** The slices the ring and the legend draw, resolved from the rows and the palette. */\r\nfunction slicesOf(s: PieChartValues): PieSlice[] {\r\n  return resolvePieSlices(s.data, s.categoryField, s.valueField, s.theme.sliceFills)\r\n}\r\n\r\n/** How far slice `index` is pushed out, in `[0, 1]`. */\r\nfunction popAt(s: PieChartValues, index: number): number {\r\n  return clampUnit(s.pops[index] ?? 0)\r\n}\r\n\r\n/** Whether slice `index` is grown out past the ring's rim: past half way, so a slice mid-swell is not yet counted. */\r\nexport function isSliceSelected(s: PieChartValues, index: number): boolean {\r\n  return popAt(s, index) > 0.5\r\n}\r\n\r\n/**\r\n * How far each slice is dimmed by the selection, one entry per slice: 1 while\r\n * nothing is out, and for the selected slice itself; falling toward the theme's\r\n * `dimOpacity` for the rest in proportion to how far the selection has grown.\r\n */\r\nfunction sliceDims(s: PieChartValues): number[] {\r\n  let focus = 0\r\n  for (let i = 0; i < s.data.length; i++) focus = Math.max(focus, popAt(s, i))\r\n  const dim = s.theme.spotlight.dimOpacity\r\n  if (focus <= 0) return s.data.map(() => 1)\r\n  return s.data.map((_, i) => 1 - (1 - clampUnit(dim)) * focus * (1 - popAt(s, i)))\r\n}\r\n\r\ntype AnyTimeline = Timeline<any, any>\r\n\r\n/**\r\n * Every slice's pop eased from where it is to what `pop` asks for. A move that\r\n * changes nothing still takes its slot, writing nothing.\r\n */\r\nfunction popping(timeline: AnyTimeline, s: PieChartValues, pop: (index: number) => number) {\r\n  const from = s.data.map((_, i) => popAt(s, i))\r\n  const targets = s.data.map((_, i) => clampUnit(pop(i)))\r\n  if (from.every((value, i) => value === targets[i])) return timeline.wait(timeline.duration)\r\n  return timeline.animate((t) => ({ pops: from.map((value, i) => value + (targets[i] - value) * t) }))\r\n}\r\n\r\n/** The ring and the legend, found through the chart's children: the last row of them is the one it built. */\r\nfunction partsOf(children: readonly ChildView[]) {\r\n  for (let i = children.length - 1; i >= 0; i--) {\r\n    const row = children[i]\r\n    const ring = Rect.is(row) ? row.children.find(PieRing.is) : undefined\r\n    if (ring) return { ring, legend: row.children.find(PieLegend.is) ?? null }\r\n  }\r\n  return null\r\n}\r\n\r\n/**\r\n * A pie or donut chart, composed from two parts laid out by a horizontal-flow\r\n * {@link Rect} — the ring filling whatever the hugging legend leaves, both\r\n * centred:\r\n *\r\n * - {@link PieRing} — the wedges, each sized by its share of the total, with its\r\n *   label inside its own band or pinned outside on a leader line, and the\r\n *   summary in the hole.\r\n * - {@link PieLegend} — a column of swatch-and-caption rows naming each slice.\r\n *\r\n * **One mark per row, not per column**: a pie's palette is indexed by row and\r\n * there is nothing to hide, since dropping a slice would re-cut every other\r\n * wedge. `selectSlice` and its siblings are what a pie has instead — a slice\r\n * swells out of the ring and everything else dims behind it.\r\n *\r\n * **Resting state is the finished chart**; `enter` arms every part on its first\r\n * frame. The one exception is the hole's summary, which a scene can hold back\r\n * with `showCenter: false`, because it is usually the chart's *conclusion*.\r\n */\r\nexport const PieChart = component2d({\r\n  key: \"pieChart\",\r\n  state: {\r\n    data: fresh<DataRecord[]>(() => []),\r\n    categoryField: \"\",\r\n    valueField: \"\",\r\n    theme: Types.custom<PieChartTheme, PieChartConfig>(DEFAULT_PIE_CHART_THEME, { resolve: resolvePieChartTheme, lerp: lerpPieChartTheme }),\r\n    labelMode: Types.custom<PieLabelMode>(\"percent\"),\r\n    labelPlacement: Types.custom<PieLabelPlacement>(\"leader\"),\r\n    gap: 40,\r\n    centerLabel: \"\",\r\n    centerCaption: \"\",\r\n    /**\r\n     * How far each slice is pushed out of the ring, `0`–`1` per index. Held here\r\n     * rather than on the ring because two parts read it: the wedges grow out by\r\n     * it, and the legend entries dim by it. Seeded flush, one to a row.\r\n     */\r\n    pops: fresh<number[]>(() => []),\r\n    /** Read as the chart is built: the legend is a part the chart builds or doesn't. */\r\n    showLegend: Types.boolean(true, { animatable: false }),\r\n    /** Read as the chart is built: whether the hole's summary is drawn at rest. */\r\n    showCenter: Types.boolean(true, { animatable: false }),\r\n  },\r\n  defaults: {\r\n    // Its parts fill it; a node made of them would hug them.\r\n    width: \"fill\",\r\n    height: \"fill\",\r\n    pops: (state) => slicesOf(state).map(() => 0),\r\n  },\r\n  // The slice *structure* (one label and one legend row per row) is read once;\r\n  // the slices themselves, their paint and the selection are bound, so a theme\r\n  // tween re-paints and a `set` of `data` re-cuts the wedges.\r\n  children: (state) => {\r\n    const theme = () => state.theme\r\n    const slices = () => slicesOf(state)\r\n    const parts: Node2D[] = [\r\n      new PieRing({\r\n        width: \"fill\",\r\n        height: \"fill\",\r\n        slices,\r\n        ring: () => theme().ring,\r\n        label: () => theme().label,\r\n        centerStyle: () => theme().center,\r\n        labelMode: state.labelMode,\r\n        labelPlacement: state.labelPlacement,\r\n        pops: () => state.pops,\r\n        dimOpacity: () => theme().spotlight.dimOpacity,\r\n        centerLabel: state.centerLabel,\r\n        centerCaption: state.centerCaption,\r\n        centerReveal: state.showCenter === false ? 0 : 1,\r\n      }) as unknown as Node2D,\r\n    ]\r\n    if (state.showLegend !== false) {\r\n      parts.push(\r\n        new PieLegend({\r\n          slices,\r\n          legend: () => theme().legend,\r\n          dims: () => sliceDims(state),\r\n          // The column's spacing is the theme's as the chart was built, like the\r\n          // entries' type and chips.\r\n          gap: state.theme.legend.itemGap / 3,\r\n          padding: state.theme.legend.padding,\r\n        }) as unknown as Node2D\r\n      )\r\n    }\r\n    const row = new Rect({ flow: \"horizontal\", width: \"fill\", height: \"fill\", gap: state.gap, align: \"center\", children: parts })\r\n    return asParts([...(state.children as unknown as Node2D[]), row as unknown as Node2D])\r\n  },\r\n  commands: {\r\n    /**\r\n     * Animate the whole chart in: the wedges sweep in clockwise from the theme's\r\n     * `startAngle`, then the labels fade up and the legend staggers in together.\r\n     * Its first frame arms the wedges, the labels and the legend; the hole's\r\n     * summary keeps its own signal. `duration` is the **whole** entrance.\r\n     */\r\n    enter: {\r\n      args: {},\r\n      easing: easeOut(),\r\n      run: (timeline, _state, children) => {\r\n        const parts = partsOf(children)\r\n        if (!parts) return timeline.wait(timeline.duration)\r\n        const { ring, legend } = parts\r\n        const sweep = timeline.duration * SWEEP_SHARE\r\n        const labels = timeline.duration * LABEL_SHARE\r\n        const at0 = (piece: Beat[\"piece\"]): Beat => ({ at: 0, duration: 0, piece })\r\n        return beats(timeline, [\r\n          at0(ring.to({ growth: 0, labelReveal: 0 })),\r\n          ...(legend ? [at0(legend.run(\"arm\"))] : []),\r\n          { at: 0, duration: sweep, piece: ring.run(\"sweep\") },\r\n          { at: sweep, duration: labels, piece: ring.run(\"revealLabels\") },\r\n          ...(legend ? [{ at: sweep, duration: labels, piece: legend.run(\"enter\") }] : []),\r\n        ])\r\n      },\r\n    },\r\n    /**\r\n     * Fade the hole's summary up. Held out of `enter` on purpose: what sits in a\r\n     * donut's hole is usually the chart's conclusion, so the scene lands it on\r\n     * its own beat. Pair it with `showCenter: false`.\r\n     */\r\n    revealCenter: {\r\n      args: {},\r\n      easing: easeOut(),\r\n      run: (timeline, _state, children) => partsOf(children)?.ring.run(\"revealCenter\") ?? timeline.wait(timeline.duration),\r\n    },\r\n    /** Grow slice `index` out past the ring's rim and dim the rest, leaving any other selected slice where it is. */\r\n    selectSlice: {\r\n      args: { sliceIndex: SLICE_ARG },\r\n      easing: easeOut(),\r\n      run: (timeline, state) => {\r\n        const index = timeline.args.sliceIndex\r\n        return popping(timeline, state, (i) => (i === index ? 1 : popAt(state, i)))\r\n      },\r\n    },\r\n    /** Settle slice `index` back flush with the ring. */\r\n    deselectSlice: {\r\n      args: { sliceIndex: SLICE_ARG },\r\n      easing: easeOut(),\r\n      run: (timeline, state) => {\r\n        const index = timeline.args.sliceIndex\r\n        return popping(timeline, state, (i) => (i === index ? 0 : popAt(state, i)))\r\n      },\r\n    },\r\n    /** Move the focus to slice `index` alone, settling whatever else was out. */\r\n    selectOnlySlice: {\r\n      args: { sliceIndex: SLICE_ARG },\r\n      easing: easeOut(),\r\n      run: (timeline, state) => {\r\n        const index = timeline.args.sliceIndex\r\n        return popping(timeline, state, (i) => (i === index ? 1 : 0))\r\n      },\r\n    },\r\n    /** Settle every slice flush and bring the whole chart back to full. */\r\n    clearSelection: {\r\n      args: {},\r\n      easing: easeOut(),\r\n      run: (timeline, state) => popping(timeline, state, () => 0),\r\n    },\r\n  },\r\n})\r\n\r\nexport type PieChart = NodeOf<typeof PieChart>\r\n"]}