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

package/dist/radial-chart/radial-chart.d.ts

@@ -0,0 +1,216 @@
+import { type DataRecord, type NodeOf, type Node2D, type Node2DProps as _Node2DProps, type Fill as _Fill, type FillResolved as _FillResolved } from "@motionscript/sdk";
+import { type RadialStyle } from "./shared.js";
+export interface RadialChartValues {
+    readonly data: DataRecord[];
+    readonly categoryField: string;
+    readonly valueField: string;
+    readonly max: number;
+    readonly style: RadialStyle;
+    readonly pops: number[];
+}
+/**
+ * A radial bar chart: one concentric ring per row, the first row outermost,
+ * each an arc from `startAngle` sweeping `value / max` of `sweep` degrees.
+ * Rows are the marks and none can be hidden; `selectRing` thickens a ring and
+ * dims the rest.
+ */
+export declare const RadialChart: import("@motionscript/sdk").Component<"radialChart", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
+    /** Ring caption, used on the ring labels and the legend. */
+    readonly categoryField: "";
+    /** Ring magnitude: the arc's share of the full sweep. */
+    readonly valueField: "";
+    /** The value a full sweep stands for. 0 lets the largest value fill its ring. */
+    readonly max: import("@motionscript/sdk").Type<number, number, false>;
+    readonly style: import("@motionscript/sdk").Type<import("@motionscript/sdk").StyleInput<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        ringGap: import("@motionscript/sdk").Type<number, number, false>;
+        sweep: import("@motionscript/sdk").Type<number, number, false>;
+        startAngle: import("@motionscript/sdk").Type<number, number, false>;
+        track: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        roundCaps: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    } & {
+        ringLabels: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    }>, import("@motionscript/sdk").StyleValues<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        ringGap: import("@motionscript/sdk").Type<number, number, false>;
+        sweep: import("@motionscript/sdk").Type<number, number, false>;
+        startAngle: import("@motionscript/sdk").Type<number, number, false>;
+        track: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        roundCaps: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    } & {
+        ringLabels: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    }>, false>;
+    /** Gap between the rings and the legend, in px. */
+    readonly gap: 40;
+    /** Text set in the centre hole. */
+    readonly centerLabel: "";
+    /** Smaller second line under `centerLabel`. */
+    readonly centerCaption: "";
+    /** How far each ring is emphasised, `0`-`1` per index. Here because the rings and the legend both read it. */
+    readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** Read as the chart is built: whether the centre summary is drawn at rest. A scene that wants it to land later sets `false` and runs `revealCenter`. */
+    readonly showCenter: import("@motionscript/sdk").Type<boolean, boolean, false>;
+}>, {
+    readonly enter: {};
+    readonly revealCenter: {};
+    readonly selectRing: {
+        readonly ringIndex: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly clearSelection: {};
+}, readonly [], Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
+    /** Ring caption, used on the ring labels and the legend. */
+    readonly categoryField: "";
+    /** Ring magnitude: the arc's share of the full sweep. */
+    readonly valueField: "";
+    /** The value a full sweep stands for. 0 lets the largest value fill its ring. */
+    readonly max: import("@motionscript/sdk").Type<number, number, false>;
+    readonly style: import("@motionscript/sdk").Type<import("@motionscript/sdk").StyleInput<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        ringGap: import("@motionscript/sdk").Type<number, number, false>;
+        sweep: import("@motionscript/sdk").Type<number, number, false>;
+        startAngle: import("@motionscript/sdk").Type<number, number, false>;
+        track: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        roundCaps: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    } & {
+        ringLabels: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    }>, import("@motionscript/sdk").StyleValues<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        ringGap: import("@motionscript/sdk").Type<number, number, false>;
+        sweep: import("@motionscript/sdk").Type<number, number, false>;
+        startAngle: import("@motionscript/sdk").Type<number, number, false>;
+        track: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        roundCaps: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    } & {
+        ringLabels: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    }>, false>;
+    /** Gap between the rings and the legend, in px. */
+    readonly gap: 40;
+    /** Text set in the centre hole. */
+    readonly centerLabel: "";
+    /** Smaller second line under `centerLabel`. */
+    readonly centerCaption: "";
+    /** How far each ring is emphasised, `0`-`1` per index. Here because the rings and the legend both read it. */
+    readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** Read as the chart is built: whether the centre summary is drawn at rest. A scene that wants it to land later sets `false` and runs `revealCenter`. */
+    readonly showCenter: import("@motionscript/sdk").Type<boolean, boolean, false>;
+}>, readonly [], import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
+    /** Ring caption, used on the ring labels and the legend. */
+    readonly categoryField: "";
+    /** Ring magnitude: the arc's share of the full sweep. */
+    readonly valueField: "";
+    /** The value a full sweep stands for. 0 lets the largest value fill its ring. */
+    readonly max: import("@motionscript/sdk").Type<number, number, false>;
+    readonly style: import("@motionscript/sdk").Type<import("@motionscript/sdk").StyleInput<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        ringGap: import("@motionscript/sdk").Type<number, number, false>;
+        sweep: import("@motionscript/sdk").Type<number, number, false>;
+        startAngle: import("@motionscript/sdk").Type<number, number, false>;
+        track: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        roundCaps: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    } & {
+        ringLabels: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    }>, import("@motionscript/sdk").StyleValues<{
+        legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
+        swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
+    } & {
+        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
+        fontSize: import("@motionscript/sdk").Type<number, number, false>;
+        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    } & {
+        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
+        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
+        innerRadius: import("@motionscript/sdk").Type<number, number, false>;
+        ringGap: import("@motionscript/sdk").Type<number, number, false>;
+        sweep: import("@motionscript/sdk").Type<number, number, false>;
+        startAngle: import("@motionscript/sdk").Type<number, number, false>;
+        track: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        roundCaps: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    } & {
+        ringLabels: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    }>, false>;
+    /** Gap between the rings and the legend, in px. */
+    readonly gap: 40;
+    /** Text set in the centre hole. */
+    readonly centerLabel: "";
+    /** Smaller second line under `centerLabel`. */
+    readonly centerCaption: "";
+    /** How far each ring is emphasised, `0`-`1` per index. Here because the rings and the legend both read it. */
+    readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** Read as the chart is built: whether the centre summary is drawn at rest. A scene that wants it to land later sets `false` and runs `revealCenter`. */
+    readonly showCenter: import("@motionscript/sdk").Type<boolean, boolean, false>;
+}>, {
+    readonly enter: {};
+    readonly revealCenter: {};
+    readonly selectRing: {
+        readonly ringIndex: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly clearSelection: {};
+}, Node2D<_Node2DProps>>>>;
+export type RadialChart = NodeOf<typeof RadialChart>;
+//# sourceMappingURL=radial-chart.d.ts.map

package/dist/radial-chart/radial-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-chart.d.ts","sourceRoot":"","sources":["../../src/radial-chart/radial-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,UAAU,EACf,KAAK,MAAM,EAEX,KAAK,MAAM,EACX,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,IAAI,IAAI,KAAK,EAClB,KAAK,YAAY,IAAI,aAAa,EACnC,MAAM,mBAAmB,CAAA;AAQ1B,OAAO,EAQL,KAAK,WAAW,EACjB,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,CAAA;IAC3B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CACxB;AAwCD;;;;;GAKG;AACH,eAAO,MAAM,WAAW;;IAIpB,4DAA4D;;IAE5D,yDAAyD;;IAEzD,iFAAiF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGjF,mDAAmD;;IAEnD,mCAAmC;;IAEnC,+CAA+C;;IAE/C,8GAA8G;;IAE9G,yJAAyJ;;;;;;;;;;;IAfzJ,4DAA4D;;IAE5D,yDAAyD;;IAEzD,iFAAiF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGjF,mDAAmD;;IAEnD,mCAAmC;;IAEnC,+CAA+C;;IAE/C,8GAA8G;;IAE9G,yJAAyJ;;;;IAfzJ,4DAA4D;;IAE5D,yDAAyD;;IAEzD,iFAAiF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGjF,mDAAmD;;IAEnD,mCAAmC;;IAEnC,+CAA+C;;IAE/C,8GAA8G;;IAE9G,yJAAyJ;;;;;;;;;0BAsG3J,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}

package/dist/radial-chart/radial-chart.js

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

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

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

package/dist/radial-chart/radial-rings.d.ts

@@ -0,0 +1,121 @@
+import { PathBuilder, type NodeOf, type Node2D, type Node2DProps as _Node2DProps, type Fill as _Fill, type FillResolved as _FillResolved, type TextStyle, type Vector2 } from "@motionscript/sdk";
+import { type CenterConfig } from "../kit/polar.js";
+import { type RadialMarks, type RadialRow } from "./shared.js";
+interface RingsState {
+    readonly rows: RadialRow[];
+    readonly max: number;
+    readonly marks: RadialMarks;
+    readonly label: TextStyle;
+    readonly centerStyle: CenterConfig;
+    readonly ringLabels: boolean;
+    readonly pops: readonly number[];
+    readonly dimOpacity: number;
+    readonly centerLabel: string;
+    readonly centerCaption: string;
+}
+/** Every radius and angle for one box, derived wherever read so the drawing and the labels cannot disagree. */
+export declare class RadialGeometry {
+    private readonly s;
+    private readonly box;
+    constructor(s: RingsState, box: {
+        readonly width: number;
+        readonly height: number;
+    });
+    get count(): number;
+    get outerRadius(): number;
+    get holeRadius(): number;
+    /** Radial depth of one ring. */
+    get thickness(): number;
+    /** Rim of ring `index`; ring 0 is the outermost. */
+    ringOuter(index: number): number;
+    ringMid(index: number): number;
+    get fractions(): number[];
+    get startRad(): number;
+    get sweepRad(): number;
+    popOf(index: number): number;
+    get selectionStrength(): number;
+    ringOpacity(index: number): number;
+    /** How far ring `index`'s sweep has come at entrance progress `growth`: rings start in turn, outer first. */
+    progress(index: number, growth: number): number;
+    get labelFont(): number;
+    /** Where ring `index`'s caption is pinned: just behind its start, reading away from the sweep. */
+    labelAnchor(index: number): {
+        at: Vector2;
+        side: 1 | -1;
+    };
+    get centerFont(): number;
+}
+/**
+ * An arc band between `rIn` and `rOut` over `a0`..`a1` (radians clockwise from
+ * 12 o'clock), the ends squared or capped with half circles. A band shorter
+ * than its caps is two overlapping caps, which fill as a pill.
+ */
+export declare function bandPath(a0: number, a1: number, rIn: number, rOut: number, round: boolean): PathBuilder;
+/**
+ * The rings: row `i` is the `i`-th ring from the outside, an arc from
+ * `startAngle` whose sweep is `value / max` of the full sweep, over an
+ * optional full-sweep track. A selected ring thickens and the rest dims.
+ */
+export declare const RadialRings: import("@motionscript/sdk").Component<"radialRings", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly rows: import("@motionscript/sdk").Type<import("../index.js").PieSlice[], import("../index.js").PieSlice[], false>;
+    readonly max: 0;
+    readonly marks: import("@motionscript/sdk").Type<RadialMarks, RadialMarks, false>;
+    readonly label: import("@motionscript/sdk").Type<TextStyle, TextStyle, false>;
+    readonly centerStyle: import("@motionscript/sdk").Type<CenterConfig, CenterConfig, false>;
+    /** The empty-ring colour drawn under each arc. */
+    readonly trackFill: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    readonly ringLabels: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    /** Entrance progress `[0, 1]`: rings sweep in turn. */
+    readonly growth: 1;
+    readonly labelReveal: 1;
+    readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly dimOpacity: 0.25;
+    readonly centerLabel: "";
+    readonly centerCaption: "";
+    readonly centerReveal: 1;
+}>, {
+    readonly sweep: unknown;
+    readonly revealLabels: unknown;
+    readonly revealCenter: unknown;
+}, null, Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly rows: import("@motionscript/sdk").Type<import("../index.js").PieSlice[], import("../index.js").PieSlice[], false>;
+    readonly max: 0;
+    readonly marks: import("@motionscript/sdk").Type<RadialMarks, RadialMarks, false>;
+    readonly label: import("@motionscript/sdk").Type<TextStyle, TextStyle, false>;
+    readonly centerStyle: import("@motionscript/sdk").Type<CenterConfig, CenterConfig, false>;
+    /** The empty-ring colour drawn under each arc. */
+    readonly trackFill: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    readonly ringLabels: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    /** Entrance progress `[0, 1]`: rings sweep in turn. */
+    readonly growth: 1;
+    readonly labelReveal: 1;
+    readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly dimOpacity: 0.25;
+    readonly centerLabel: "";
+    readonly centerCaption: "";
+    readonly centerReveal: 1;
+}>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly rows: import("@motionscript/sdk").Type<import("../index.js").PieSlice[], import("../index.js").PieSlice[], false>;
+    readonly max: 0;
+    readonly marks: import("@motionscript/sdk").Type<RadialMarks, RadialMarks, false>;
+    readonly label: import("@motionscript/sdk").Type<TextStyle, TextStyle, false>;
+    readonly centerStyle: import("@motionscript/sdk").Type<CenterConfig, CenterConfig, false>;
+    /** The empty-ring colour drawn under each arc. */
+    readonly trackFill: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    readonly ringLabels: import("@motionscript/sdk").Type<boolean, boolean, false>;
+    /** Entrance progress `[0, 1]`: rings sweep in turn. */
+    readonly growth: 1;
+    readonly labelReveal: 1;
+    readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly dimOpacity: 0.25;
+    readonly centerLabel: "";
+    readonly centerCaption: "";
+    readonly centerReveal: 1;
+}>, {
+    readonly sweep: unknown;
+    readonly revealLabels: unknown;
+    readonly revealCenter: unknown;
+}, Node2D<_Node2DProps>>>>;
+export type RadialRings = NodeOf<typeof RadialRings>;
+export {};
+//# sourceMappingURL=radial-rings.d.ts.map

package/dist/radial-chart/radial-rings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-rings.d.ts","sourceRoot":"","sources":["../../src/radial-chart/radial-rings.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAQX,KAAK,MAAM,EAEX,KAAK,MAAM,EACX,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,IAAI,IAAI,KAAK,EAClB,KAAK,YAAY,IAAI,aAAa,EAClC,KAAK,SAAS,EACd,KAAK,OAAO,EACb,MAAM,mBAAmB,CAAA;AAK1B,OAAO,EAA4C,KAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC1F,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAA;AAoB5E,UAAU,UAAU;IAClB,QAAQ,CAAC,IAAI,EAAE,SAAS,EAAE,CAAA;IAC1B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAA;IACzB,QAAQ,CAAC,WAAW,EAAE,YAAY,CAAA;IAClC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAA;CAC/B;AAMD,+GAA+G;AAC/G,qBAAa,cAAc;IAEvB,OAAO,CAAC,QAAQ,CAAC,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAC,GAAG;gBADH,CAAC,EAAE,UAAU,EACb,GAAG,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;KAAE;IAG3E,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,gCAAgC;IAChC,IAAI,SAAS,IAAI,MAAM,CAItB;IAED,oDAAoD;IACpD,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAIhC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAI9B,IAAI,SAAS,IAAI,MAAM,EAAE,CAExB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAI5B,IAAI,iBAAiB,IAAI,MAAM,CAI9B;IAED,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAIlC,6GAA6G;IAC7G,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM;IAK/C,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,kGAAkG;IAClG,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,EAAE,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;KAAE;IAQzD,IAAI,UAAU,IAAI,MAAM,CAQvB;CACF;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,WAAW,CAiCvG;AA8DD;;;;GAIG;AACH,eAAO,MAAM,WAAW;;;;;;IAQpB,kDAAkD;;;IAGlD,uDAAuD;;;;;;;;;;;;;;;;;;IAHvD,kDAAkD;;;IAGlD,uDAAuD;;;;;;;;;;;;;;IAHvD,kDAAkD;;;IAGlD,uDAAuD;;;;;;;;;;;;0BAyDzD,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,WAAW,CAAC,CAAA"}