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

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

@@ -1,15 +1,16 @@
 import { Rect, Types, clamp, component2d, easeOut, } from "@motionscript/sdk";
 import { asParts, fresh } from "../kit/entries.js";
 import { beats } from "../kit/motion.js";
-import { PieLegend } from "./pie-legend.js";
+import { PieLegend } from "../kit/pie-legend.js";
 import { PieRing } from "./pie-ring.js";
-import { DEFAULT_PIE_CHART_THEME, lerpPieChartTheme, resolvePieChartTheme, resolvePieSlices, selectionFade, } from "./shared.js";
+import { CHART_STYLE_FAMILY, CHART_STYLE_PRESETS, migrateChartStyle, paletteFill } from "../kit/style.js";
+import { PIE_SPOTLIGHT_DIM, PIE_STYLE_GROUPS, centerConfigOf, labelConfigOf, legendOf, resolvePieSlices, ringConfigOf, selectionFade, } from "./shared.js";
 /** How `enter` divides its duration: wedges sweeping in, then labels and legend together. Sums to 1. */
 const SWEEP_SHARE = 0.65;
 const LABEL_SHARE = 0.35;
 const SLICE_ARG = Types.number(0, { min: 0, step: 1 });
 function slicesOf(s) {
-    return resolvePieSlices(s.data, s.categoryField, s.valueField, s.theme.sliceFills);
+    return resolvePieSlices(s.data, s.categoryField, s.valueField, s.data.map((_, i) => paletteFill(s.style, i)));
 }
 function popAt(s, index) {
     return clamp(s.pops[index] ?? 0, 0, 1);
@@ -23,8 +24,7 @@ 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;
-    return s.data.map((_, i) => selectionFade(focus, dim, popAt(s, i)));
+    return s.data.map((_, i) => selectionFade(focus, PIE_SPOTLIGHT_DIM, popAt(s, i)));
 }
 /** Every slice's pop eased to what `pop` asks for. A move that changes nothing still takes its slot. */
 function popping(timeline, s, pop) {
@@ -56,16 +56,14 @@ function partsOf(children) {
 export const PieChart = component2d({
     key: "pieChart",
     state: {
-        data: fresh(() => []),
+        data: fresh(() => [], { kind: "dataset" }),
         /** Slice caption, used on the labels and the legend. */
         categoryField: "",
         /** Slice magnitude: the wedge's share of the ring. */
         valueField: "",
-        theme: Types.custom(DEFAULT_PIE_CHART_THEME, { resolve: resolvePieChartTheme, lerp: lerpPieChartTheme }),
+        style: Types.style(CHART_STYLE_FAMILY, PIE_STYLE_GROUPS, { presets: CHART_STYLE_PRESETS }),
         /** What the ring's labels say. */
         labelMode: Types.custom("percent"),
-        /** Where they sit: inside their wedge, outside on a leader, or nowhere. */
-        labelPlacement: Types.custom("leader"),
         /** Gap between the ring and the legend, in px. */
         gap: 40,
         /** Text set in the ring's hole. */
@@ -74,8 +72,6 @@ export const PieChart = component2d({
         centerCaption: "",
         /** How far each slice is pushed out, `0`-`1` per index. Here, not on the ring, because the wedges and the legend both read it. */
         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. A scene that wants it to land later sets `false` and runs `revealCenter`. */
         showCenter: Types.boolean(true, { animatable: false }),
     },
@@ -85,39 +81,57 @@ export const PieChart = component2d({
         height: "fill",
         pops: (state) => slicesOf(state).map(() => 0),
     },
+    migrate: { style: migrateChartStyle("pie") },
     allowedChildren: [],
     // The structure (a label and legend row per row) is read once; slices, paint and selection are bound, so a theme tween re-paints and a `set` of `data` re-cuts.
     children: (state) => {
-        const theme = () => state.theme;
+        const style = () => state.style;
         const slices = () => slicesOf(state);
         const parts = [
             new PieRing({
                 width: "fill",
                 height: "fill",
                 slices,
-                ring: () => theme().ring,
-                label: () => theme().label,
-                centerStyle: () => theme().center,
+                ring: () => ringConfigOf(style()),
+                label: () => labelConfigOf(style()),
+                centerStyle: () => centerConfigOf(style()),
                 labelMode: state.labelMode,
-                labelPlacement: state.labelPlacement,
+                labelPlacement: state.style.labelPlacement,
                 pops: () => state.pops,
-                dimOpacity: () => theme().spotlight.dimOpacity,
+                dimOpacity: PIE_SPOTLIGHT_DIM,
                 centerLabel: state.centerLabel,
                 centerCaption: state.centerCaption,
                 centerReveal: state.showCenter === false ? 0 : 1,
             }),
         ];
-        if (state.showLegend !== false) {
-            parts.push(new PieLegend({
+        const position = state.style.legend;
+        if (position !== "none") {
+            const side = position === "right";
+            const legend = new PieLegend({
                 slices,
-                legend: () => theme().legend,
+                legend: () => legendOf(style()),
                 dims: () => sliceDims(state),
+                flow: side ? "vertical" : "horizontal",
+                align: "center",
                 // Spacing is fixed as built.
-                gap: state.theme.legend.itemGap / 3,
-                padding: state.theme.legend.padding,
-            }));
+                gap: side ? legendOf(state.style).itemGap / 3 : legendOf(state.style).itemGap,
+                padding: 0,
+            });
+            if (position === "top")
+                parts.unshift(legend);
+            else
+                parts.push(legend);
         }
-        const row = new Rect({ flow: "horizontal", width: "fill", height: "fill", gap: state.gap, align: "center", children: parts });
+        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: {

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  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} from \"@motionscript/sdk\"\n\nimport { asParts, fresh } from \"../kit/entries\"\nimport { beats, type AnyTimeline, type Beat } from \"../kit/motion\"\nimport { PieLegend } from \"./pie-legend\"\nimport { PieRing } from \"./pie-ring\"\nimport {\n  DEFAULT_PIE_CHART_THEME,\n  lerpPieChartTheme,\n  resolvePieChartTheme,\n  resolvePieSlices,\n  selectionFade,\n  type PieChartConfig,\n  type PieChartTheme,\n  type PieLabelMode,\n  type PieLabelPlacement,\n  type PieSlice,\n} from \"./shared\"\n\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/** How `enter` divides its duration: wedges sweeping in, then labels and legend together. Sums to 1. */\nconst SWEEP_SHARE = 0.65\nconst LABEL_SHARE = 0.35\n\nconst SLICE_ARG = Types.number(0, { min: 0, step: 1 })\n\nfunction slicesOf(s: PieChartValues): PieSlice[] {\n  return resolvePieSlices(s.data, s.categoryField, s.valueField, s.theme.sliceFills)\n}\n\nfunction popAt(s: PieChartValues, index: number): number {\n  return clamp(s.pops[index] ?? 0, 0, 1)\n}\n\n/** Whether slice `index` is past half way out, 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/** Per-slice opacity: 1 while nothing is out and for the selected slice, falling toward `dimOpacity` for the rest as the selection grows. */\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  return s.data.map((_, i) => selectionFade(focus, dim, popAt(s, i)))\n}\n\n/** Every slice's pop eased to what `pop` asks for. A move that changes nothing still takes its slot. */\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) => 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 ring 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 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: a {@link PieRing} filling what the hugging {@link PieLegend}\n * leaves. One mark per row, not per column, and nothing to hide, since dropping\n * a slice would re-cut every other wedge; `selectSlice` and its siblings swell\n * a slice and dim the rest instead.\n *\n * Resting state is the finished chart, except the hole's summary, which\n * `showCenter: false` holds back for `revealCenter`.\n */\nexport const PieChart = component2d({\n  key: \"pieChart\",\n  state: {\n    data: fresh<DataRecord[]>(() => []),\n    /** Slice caption, used on the labels and the legend. */\n    categoryField: \"\",\n    /** Slice magnitude: the wedge's share of the ring. */\n    valueField: \"\",\n    theme: Types.custom<PieChartTheme, PieChartConfig>(DEFAULT_PIE_CHART_THEME, { resolve: resolvePieChartTheme, lerp: lerpPieChartTheme }),\n    /** What the ring's labels say. */\n    labelMode: Types.custom<PieLabelMode>(\"percent\"),\n    /** Where they sit: inside their wedge, outside on a leader, or nowhere. */\n    labelPlacement: Types.custom<PieLabelPlacement>(\"leader\"),\n    /** Gap between the ring and the legend, in px. */\n    gap: 40,\n    /** Text set in the ring's hole. */\n    centerLabel: \"\",\n    /** Smaller second line under `centerLabel`. */\n    centerCaption: \"\",\n    /** How far each slice is pushed out, `0`-`1` per index. Here, not on the ring, because the wedges and the legend both read it. */\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. A scene that wants it to land later sets `false` and runs `revealCenter`. */\n    showCenter: Types.boolean(true, { animatable: false }),\n  },\n  defaults: {\n    // A node made of parts that fill would otherwise hug them.\n    width: \"fill\",\n    height: \"fill\",\n    pops: (state) => slicesOf(state).map(() => 0),\n  },\n  allowedChildren: [],\n  // The structure (a label and legend row per row) is read once; slices, paint and selection are bound, so a theme tween re-paints and a `set` of `data` re-cuts.\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          // Spacing is fixed as built.\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    /** Wedges sweep in clockwise from `startAngle`, then labels fade up and the legend staggers in. `duration` is the whole entrance; the hole's summary keeps its own signal. */\n    enter: {\n      args: {},\n      // Held from arrival, so it never shows finished ahead of its draw.\n      entrance: true,\n      easing: easeOut(),\n      run: (timeline, _state, children) => {\n        const parts = partsOf(children)\n        if (!parts) return timeline.wait(timeline.duration)\n        const { 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    /** Fade the hole's 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)?.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"]}
+{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../src/pie-chart/pie-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,GAUR,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAA+B,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AACtG,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAId,MAAM,UAAU,CAAA;AAUjB,wGAAwG;AACxG,MAAM,WAAW,GAAG,IAAI,CAAA;AACxB,MAAM,WAAW,GAAG,IAAI,CAAA;AAExB,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAA;AAEtD,SAAS,QAAQ,CAAC,CAAiB;IACjC,OAAO,gBAAgB,CACrB,CAAC,CAAC,IAAI,EACN,CAAC,CAAC,aAAa,EACf,CAAC,CAAC,UAAU,EACZ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAC9C,CAAA;AACH,CAAC;AAED,SAAS,KAAK,CAAC,CAAiB,EAAE,KAAa;IAC7C,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;AACxC,CAAC;AAED,2FAA2F;AAC3F,MAAM,UAAU,eAAe,CAAC,CAAiB,EAAE,KAAa;IAC9D,OAAO,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,GAAG,CAAA;AAC9B,CAAC;AAED,6IAA6I;AAC7I,SAAS,SAAS,CAAC,CAAiB;IAClC,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE;QAAE,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;IAC5E,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,iBAAiB,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;AACnF,CAAC;AAED,wGAAwG;AACxG,SAAS,OAAO,CAAC,QAAqB,EAAE,CAAiB,EAAE,GAA8B;IACvF,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;IAC9C,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;IACzD,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;QAAE,OAAO,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;IAC3F,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACtG,CAAC;AAED,uFAAuF;AACvF,SAAS,OAAO,CAAC,QAA8B;IAC7C,KAAK,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QAC9C,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QACvB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACrE,IAAI,IAAI;YAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,IAAI,EAAE,CAAA;IAC5E,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,WAAW,CAAC;IAClC,GAAG,EAAE,UAAU;IACf,KAAK,EAAE;QACL,IAAI,EAAE,KAAK,CAAe,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;QACxD,wDAAwD;QACxD,aAAa,EAAE,EAAE;QACjB,sDAAsD;QACtD,UAAU,EAAE,EAAE;QACd,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,kBAAkB,EAAE,gBAAgB,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAC;QAC1F,kCAAkC;QAClC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAe,SAAS,CAAC;QAChD,kDAAkD;QAClD,GAAG,EAAE,EAAE;QACP,mCAAmC;QACnC,WAAW,EAAE,EAAE;QACf,+CAA+C;QAC/C,aAAa,EAAE,EAAE;QACjB,kIAAkI;QAClI,IAAI,EAAE,KAAK,CAAW,GAAG,EAAE,CAAC,EAAE,CAAC;QAC/B,yJAAyJ;QACzJ,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;KACvD;IACD,QAAQ,EAAE;QACR,2DAA2D;QAC3D,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;KAC9C;IACD,OAAO,EAAE,EAAE,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE;IAC5C,eAAe,EAAE,EAAE;IACnB,gKAAgK;IAChK,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAClB,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAA;QAC/B,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QACpC,MAAM,KAAK,GAAa;YACtB,IAAI,OAAO,CAAC;gBACV,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,MAAM;gBACN,IAAI,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;gBACjC,KAAK,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;gBACnC,WAAW,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;gBAC1C,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,cAAc;gBAC1C,IAAI,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI;gBACtB,UAAU,EAAE,iBAAiB;gBAC7B,WAAW,EAAE,KAAK,CAAC,WAAW;gBAC9B,aAAa,EAAE,KAAK,CAAC,aAAa;gBAClC,YAAY,EAAE,KAAK,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;aACjD,CAAsB;SACxB,CAAA;QACD,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAA;QACnC,IAAI,QAAQ,KAAK,MAAM,EAAE,CAAC;YACxB,MAAM,IAAI,GAAG,QAAQ,KAAK,OAAO,CAAA;YACjC,MAAM,MAAM,GAAG,IAAI,SAAS,CAAC;gBAC3B,MAAM;gBACN,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;gBAC/B,IAAI,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;gBAC5B,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;gBACtC,KAAK,EAAE,QAAQ;gBACf,6BAA6B;gBAC7B,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO;gBAC7E,OAAO,EAAE,CAAC;aACX,CAAsB,CAAA;YACvB,IAAI,QAAQ,KAAK,KAAK;gBAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;;gBACxC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QACzB,CAAC;QACD,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC;YACnB,IAAI,EAAE,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;YAC7E,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,KAAK,CAAC,GAAG;YACd,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU;YAClC,QAAQ,EAAE,KAAK;SAChB,CAAC,CAAA;QACF,OAAO,OAAO,CAAC,CAAC,GAAwB,CAAC,CAAC,CAAA;IAC5C,CAAC;IACD,QAAQ,EAAE;QACR,8KAA8K;QAC9K,KAAK,EAAE;YACL,IAAI,EAAE,EAAE;YACR,mEAAmE;YACnE,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,OAAO,EAAE;YACjB,GAAG,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;gBAClC,MAAM,KAAK,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAA;gBAC/B,IAAI,CAAC,KAAK;oBAAE,OAAO,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;gBACnD,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;gBAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,GAAG,WAAW,CAAA;gBAC7C,MAAM,MAAM,GAAG,QAAQ,CAAC,QAAQ,GAAG,WAAW,CAAA;gBAC9C,MAAM,GAAG,GAAG,CAAC,KAAoB,EAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;gBAC3E,OAAO,KAAK,CAAC,QAAQ,EAAE;oBACrB,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC;oBAC3C,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC3C,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;oBACpD,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE;oBAChE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;iBACjF,CAAC,CAAA;YACJ,CAAC;SACF;QACD,0HAA0H;QAC1H,YAAY,EAAE;YACZ,IAAI,EAAE,EAAE;YACR,MAAM,EAAE,OAAO,EAAE;YACjB,GAAG,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;SACrH;QACD,iHAAiH;QACjH,WAAW,EAAE;YACX,IAAI,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE;YAC/B,MAAM,EAAE,OAAO,EAAE;YACjB,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;gBACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAA;gBACtC,OAAO,OAAO,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;YAC7E,CAAC;SACF;QACD,qDAAqD;QACrD,aAAa,EAAE;YACb,IAAI,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE;YAC/B,MAAM,EAAE,OAAO,EAAE;YACjB,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;gBACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAA;gBACtC,OAAO,OAAO,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;YAC7E,CAAC;SACF;QACD,6EAA6E;QAC7E,eAAe,EAAE;YACf,IAAI,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE;YAC/B,MAAM,EAAE,OAAO,EAAE;YACjB,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;gBACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAA;gBACtC,OAAO,OAAO,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;YAC/D,CAAC;SACF;QACD,uEAAuE;QACvE,cAAc,EAAE;YACd,IAAI,EAAE,EAAE;YACR,MAAM,EAAE,OAAO,EAAE;YACjB,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;SAC5D;KACF;CACF,CAAC,CAAA","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 TextStyle as _TextStyle,\n  type Fill as _Fill,\n  type FillResolved as _FillResolved,\n} from \"@motionscript/sdk\"\n\nimport { asParts, fresh } from \"../kit/entries\"\nimport { beats, type AnyTimeline, type Beat } from \"../kit/motion\"\nimport { PieLegend } from \"../kit/pie-legend\"\nimport { PieRing } from \"./pie-ring\"\nimport { CHART_STYLE_FAMILY, CHART_STYLE_PRESETS, migrateChartStyle, paletteFill } from \"../kit/style\"\nimport {\n  PIE_SPOTLIGHT_DIM,\n  PIE_STYLE_GROUPS,\n  centerConfigOf,\n  labelConfigOf,\n  legendOf,\n  resolvePieSlices,\n  ringConfigOf,\n  selectionFade,\n  type PieLabelMode,\n  type PieSlice,\n  type PieStyle,\n} from \"./shared\"\n\nexport interface PieChartValues {\n  readonly data: DataRecord[]\n  readonly categoryField: string\n  readonly valueField: string\n  readonly style: PieStyle\n  readonly pops: number[]\n}\n\n/** How `enter` divides its duration: wedges sweeping in, then labels and legend together. Sums to 1. */\nconst SWEEP_SHARE = 0.65\nconst LABEL_SHARE = 0.35\n\nconst SLICE_ARG = Types.number(0, { min: 0, step: 1 })\n\nfunction slicesOf(s: PieChartValues): PieSlice[] {\n  return resolvePieSlices(\n    s.data,\n    s.categoryField,\n    s.valueField,\n    s.data.map((_, i) => paletteFill(s.style, i))\n  )\n}\n\nfunction popAt(s: PieChartValues, index: number): number {\n  return clamp(s.pops[index] ?? 0, 0, 1)\n}\n\n/** Whether slice `index` is past half way out, 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/** Per-slice opacity: 1 while nothing is out and for the selected slice, falling toward `dimOpacity` for the rest as the selection grows. */\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  return s.data.map((_, i) => selectionFade(focus, PIE_SPOTLIGHT_DIM, popAt(s, i)))\n}\n\n/** Every slice's pop eased to what `pop` asks for. A move that changes nothing still takes its slot. */\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) => 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 ring 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 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: a {@link PieRing} filling what the hugging {@link PieLegend}\n * leaves. One mark per row, not per column, and nothing to hide, since dropping\n * a slice would re-cut every other wedge; `selectSlice` and its siblings swell\n * a slice and dim the rest instead.\n *\n * Resting state is the finished chart, except the hole's summary, which\n * `showCenter: false` holds back for `revealCenter`.\n */\nexport const PieChart = component2d({\n  key: \"pieChart\",\n  state: {\n    data: fresh<DataRecord[]>(() => [], { kind: \"dataset\" }),\n    /** Slice caption, used on the labels and the legend. */\n    categoryField: \"\",\n    /** Slice magnitude: the wedge's share of the ring. */\n    valueField: \"\",\n    style: Types.style(CHART_STYLE_FAMILY, PIE_STYLE_GROUPS, { presets: CHART_STYLE_PRESETS }),\n    /** What the ring's labels say. */\n    labelMode: Types.custom<PieLabelMode>(\"percent\"),\n    /** Gap between the ring and the legend, in px. */\n    gap: 40,\n    /** Text set in the ring's hole. */\n    centerLabel: \"\",\n    /** Smaller second line under `centerLabel`. */\n    centerCaption: \"\",\n    /** How far each slice is pushed out, `0`-`1` per index. Here, not on the ring, because the wedges and the legend both read it. */\n    pops: fresh<number[]>(() => []),\n    /** Read as the chart is built: whether the hole's 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    // A node made of parts that fill would otherwise hug them.\n    width: \"fill\",\n    height: \"fill\",\n    pops: (state) => slicesOf(state).map(() => 0),\n  },\n  migrate: { style: migrateChartStyle(\"pie\") },\n  allowedChildren: [],\n  // The structure (a label and legend row per row) is read once; slices, paint and selection are bound, so a theme tween re-paints and a `set` of `data` re-cuts.\n  children: (state) => {\n    const style = () => state.style\n    const slices = () => slicesOf(state)\n    const parts: Node2D[] = [\n      new PieRing({\n        width: \"fill\",\n        height: \"fill\",\n        slices,\n        ring: () => ringConfigOf(style()),\n        label: () => labelConfigOf(style()),\n        centerStyle: () => centerConfigOf(style()),\n        labelMode: state.labelMode,\n        labelPlacement: state.style.labelPlacement,\n        pops: () => state.pops,\n        dimOpacity: PIE_SPOTLIGHT_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 legend = new PieLegend({\n        slices,\n        legend: () => legendOf(style()),\n        dims: () => sliceDims(state),\n        flow: side ? \"vertical\" : \"horizontal\",\n        align: \"center\",\n        // Spacing is fixed as built.\n        gap: side ? legendOf(state.style).itemGap / 3 : legendOf(state.style).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    /** Wedges sweep in clockwise from `startAngle`, then labels fade up and the legend staggers in. `duration` is the whole entrance; the hole's summary keeps its own signal. */\n    enter: {\n      args: {},\n      // Held from arrival, so it never shows finished ahead of its draw.\n      entrance: true,\n      easing: easeOut(),\n      run: (timeline, _state, children) => {\n        const parts = partsOf(children)\n        if (!parts) return timeline.wait(timeline.duration)\n        const { 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    /** Fade the hole's 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)?.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"]}

package/dist/pie-chart/pie-ring.d.ts

@@ -1,5 +1,7 @@
-import { type FillResolved, type NodeOf, type Node2D, type Node2DProps as _Node2DProps, type Vector2 } from "@motionscript/sdk";
+import { PathBuilder, type Fill, type NodeOf, type Node2D, type Node2DProps as _Node2DProps, type Vector2 } from "@motionscript/sdk";
 import { type CenterConfig, type LabelConfig, type PieArc, type PieLabelMode, type PieLabelPlacement, type PieSlice, type RingConfig } from "./shared.js";
+/** Black or white, whichever reads better on a solid `fill`; black for any other paint. */
+export declare function onFill(fill: Fill): string;
 interface LabelPlacement {
     index: number;
     /** +1 right, -1 left. */
@@ -9,6 +11,16 @@ interface LabelPlacement {
     /** Where the label's inner edge is pinned. */
     text: Vector2;
 }
+/**
+ * A wedge over `a0`..`a1` (radians clockwise from 12 o'clock) from `rInner` to
+ * `rOuter`, centred on `cx`; with `rInner <= 0` it closes at an apex pulled
+ * off the centre by the gap. `halfGap` is half the px gap to the neighbour,
+ * converted to an angle per radius so the channel keeps one width across the
+ * band; the inset is capped at the wedge's half-span so a sliver narrows to
+ * nothing rather than turning inside out. Corners are rounded by `corner` px
+ * (clamped to what the wedge can hold), except a pie's apex.
+ */
+export declare function wedgePath(a0: number, a1: number, rInner: number, rOuter: number, halfGap: number, corner: number, cx: number): PathBuilder;
 interface RingState {
     readonly slices: PieSlice[];
     readonly ring: RingConfig;
@@ -79,7 +91,6 @@ export declare class RingGeometry {
     placements(): LabelPlacement[];
     placementFor(index: number): LabelPlacement | undefined;
 }
-export declare function ringFills(slices: readonly PieSlice[]): FillResolved[][];
 /**
  * The ring: one wedge per {@link PieSlice} swept clockwise from `startAngle`,
  * with a constant-width `gap` (see {@link wedgePath}). A selected slice swells
@@ -102,7 +113,7 @@ export declare const PieRing: import("@motionscript/sdk").Component<"pieRing", i
     /** Per-slice pop `[0, 1]`, owned by the chart so the ring and legend read one signal. */
     readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
     /** Opacity everything unselected falls back to while any slice is selected. */
-    readonly dimOpacity: number;
+    readonly dimOpacity: 0.15;
     /** Empty leaves the hole clear; ignored when there is no hole. */
     readonly centerLabel: "";
     readonly centerCaption: "";
@@ -126,7 +137,7 @@ export declare const PieRing: import("@motionscript/sdk").Component<"pieRing", i
     /** Per-slice pop `[0, 1]`, owned by the chart so the ring and legend read one signal. */
     readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
     /** Opacity everything unselected falls back to while any slice is selected. */
-    readonly dimOpacity: number;
+    readonly dimOpacity: 0.15;
     /** Empty leaves the hole clear; ignored when there is no hole. */
     readonly centerLabel: "";
     readonly centerCaption: "";
@@ -146,7 +157,7 @@ export declare const PieRing: import("@motionscript/sdk").Component<"pieRing", i
     /** Per-slice pop `[0, 1]`, owned by the chart so the ring and legend read one signal. */
     readonly pops: import("@motionscript/sdk").Type<number[], number[], false>;
     /** Opacity everything unselected falls back to while any slice is selected. */
-    readonly dimOpacity: number;
+    readonly dimOpacity: 0.15;
     /** Empty leaves the hole clear; ignored when there is no hole. */
     readonly centerLabel: "";
     readonly centerCaption: "";

package/dist/pie-chart/pie-ring.d.ts.map

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

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

@@ -1,9 +1,30 @@
-import { Graphics2D, PathBuilder, Rect, Text, Types, clamp, component2d, fillOps, shadowOps, strokeOps, textOps, } from "@motionscript/sdk";
+import { Graphics2D, PathBuilder, Rect, Text, Types, clamp, component2d, strokeOps, textOps, } from "@motionscript/sdk";
 import { asParts, fresh } from "../kit/entries.js";
 import { frameEase } from "../kit/motion.js";
 import { loadPaints } from "../kit/paints.js";
+import { resolvedFill, ringFills } from "../kit/polar.js";
 import { formatPercent } from "../kit/shared.js";
-import { DEFAULT_PIE_CHART_THEME, pieArcs, relaxLabels, ringPoint, selectionFade, } from "./shared.js";
+import { PIE_SPOTLIGHT_DIM, pieArcs, relaxLabels, ringPoint, selectionFade, } from "./shared.js";
+const DEFAULT_RING = { gap: 3, holeRadius: 0, startAngle: 0, selectedGrow: 1.08, cornerRadius: 4 };
+const DEFAULT_LABEL = {
+    textStyle: { fontSize: 28, fontWeight: 500, textAlign: "center", fill: "#a1a1aa" },
+    percentStyle: { fontSize: 28, fontWeight: 700, textAlign: "center", fill: "#f4f4f5" },
+    insideStyle: { fontSize: 52, fontWeight: 700, textAlign: "center", fill: "#111113" },
+    leaderStroke: { weight: 2, fill: "#a1a1aa" },
+};
+const DEFAULT_CENTER = {
+    labelStyle: { fontSize: 50, fontWeight: 800, textAlign: "center", fill: "#f4f4f5" },
+    captionStyle: { fontSize: 22, fontWeight: 500, textAlign: "center", fill: "#a1a1aa" },
+};
+/** Black or white, whichever reads better on a solid `fill`; black for any other paint. */
+export function onFill(fill) {
+    const layers = resolvedFill(fill);
+    const solid = layers.find((layer) => layer.type === "solid");
+    if (!solid)
+        return "#111113";
+    const [r, g, b] = solid.color;
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.45 ? "#111113" : "#ffffff";
+}
 const LABEL_GAP = 12;
 const LABEL_PAD = 14;
 /** Rough glyph width as a fraction of the font size, for gutter sizing. */
@@ -32,46 +53,72 @@ function sizeOf(style, fallback = FALLBACK_SIZE) {
 }
 /**
  * A wedge over `a0`..`a1` (radians clockwise from 12 o'clock) from `rInner` to
- * `rOuter`, centred on `cx`; with `rInner <= 0` it closes through the centre.
- * `halfGap` is half the px gap to the neighbour, converted to an angle per
- * radius (wider near the hole) so the channel keeps one width across the band.
- * The inset is capped at the wedge's half-span so a sliver narrows to nothing
- * rather than turning inside out.
+ * `rOuter`, centred on `cx`; with `rInner <= 0` it closes at an apex pulled
+ * off the centre by the gap. `halfGap` is half the px gap to the neighbour,
+ * converted to an angle per radius so the channel keeps one width across the
+ * band; the inset is capped at the wedge's half-span so a sliver narrows to
+ * nothing rather than turning inside out. Corners are rounded by `corner` px
+ * (clamped to what the wedge can hold), except a pie's apex.
  */
-function wedgePath(a0, a1, rInner, rOuter, halfGap, cx) {
+export function wedgePath(a0, a1, rInner, rOuter, halfGap, corner, cx) {
     const path = new PathBuilder();
     const span = a1 - a0;
     const steps = Math.max(2, Math.ceil((Math.abs(span) / (Math.PI * 2)) * ARC_STEPS));
-    const insetAt = (r) => r <= 0 ? 0 : Math.min(halfGap / r, span / 2.2);
-    const arcTo = (r, i) => {
-        const inset = insetAt(r);
-        const from = a0 + inset;
-        const to = a1 - inset;
-        const point = ringPoint(r, from + ((to - from) * i) / steps);
-        return { x: point.x + cx, y: point.y };
+    const insetAt = (r) => (r <= 0 ? 0 : Math.min(halfGap / r, span / 2.2));
+    const at = (r, a) => {
+        const p = ringPoint(r, a);
+        return { x: p.x + cx, y: p.y };
+    };
+    const hasHole = rInner > 0;
+    const oa0 = a0 + insetAt(rOuter);
+    const oa1 = a1 - insetAt(rOuter);
+    const ia0 = a0 + insetAt(rInner);
+    const ia1 = a1 - insetAt(rInner);
+    const O0 = at(rOuter, oa0);
+    const O1 = at(rOuter, oa1);
+    const half = Math.max(1e-3, Math.min(span / 2, Math.PI / 2));
+    const apex = at(halfGap > 0 ? Math.min(halfGap / Math.sin(half), rOuter * 0.8) : 0, (a0 + a1) / 2);
+    const I0 = hasHole ? at(rInner, ia0) : apex;
+    const I1 = hasHole ? at(rInner, ia1) : apex;
+    const band = hasHole ? rOuter - rInner : rOuter;
+    const rho = Math.max(0, Math.min(corner, band / 2.2, ((oa1 - oa0) * rOuter) / 2.2, hasHole ? ((ia1 - ia0) * rInner) / 2.2 : Infinity));
+    const rounded = rho >= 0.5;
+    const toward = (from, to, d) => {
+        const len = Math.hypot(to.x - from.x, to.y - from.y) || 1;
+        const k = Math.min(0.5, d / len);
+        return { x: from.x + (to.x - from.x) * k, y: from.y + (to.y - from.y) * k };
     };
-    if (rInner <= 0) {
-        // The sides converge on the centre, so only the rim carries the gap.
-        path.moveTo(cx, 0);
+    const dOuter = rounded ? rho / Math.max(1, rOuter) : 0;
+    const dInner = rounded && hasHole ? rho / rInner : 0;
+    const arc = (r, from, to) => {
         for (let i = 0; i <= steps; i++) {
-            const p = arcTo(rOuter, i);
+            const p = at(r, from + ((to - from) * i) / steps);
             path.lineTo(p.x, p.y);
         }
-        path.close();
-        return path;
-    }
-    for (let i = 0; i <= steps; i++) {
-        const p = arcTo(rOuter, i);
-        if (i === 0)
-            path.moveTo(p.x, p.y);
+    };
+    const round = (corner, next) => {
+        if (rounded)
+            path.quadraticCurveTo(corner.x, corner.y, next.x, next.y);
         else
-            path.lineTo(p.x, p.y);
+            path.lineTo(corner.x, corner.y);
+    };
+    const first = at(rOuter, oa0 + dOuter);
+    path.moveTo(first.x, first.y);
+    arc(rOuter, oa0 + dOuter, oa1 - dOuter);
+    round(O1, toward(O1, I1, rho));
+    if (hasHole) {
+        const beforeI1 = toward(I1, O1, rho);
+        path.lineTo(beforeI1.x, beforeI1.y);
+        round(I1, at(rInner, ia1 - dInner));
+        arc(rInner, ia1 - dInner, ia0 + dInner);
+        round(I0, toward(I0, O0, rho));
     }
-    // The inner arc's own wider inset makes each side edge a chord `halfGap` px off the divide at both ends.
-    for (let i = steps; i >= 0; i--) {
-        const p = arcTo(rInner, i);
-        path.lineTo(p.x, p.y);
+    else {
+        path.lineTo(apex.x, apex.y);
     }
+    const beforeO0 = toward(O0, I0, rounded ? rho : 0);
+    path.lineTo(beforeO0.x, beforeO0.y);
+    round(O0, first);
     path.close();
     return path;
 }
@@ -89,7 +136,7 @@ export class RingGeometry {
     }
     /** Leader labels are the only thing that costs a gutter. */
     get hasLeaderLabels() {
-        return this.s.labelPlacement === "leader" && this.s.labelMode !== "none" && this.arcs.length > 0;
+        return this.s.labelPlacement === "outside" && this.s.labelMode !== "none" && this.arcs.length > 0;
     }
     /**
      * Px a horizontal label centred in `arc`'s band can run before leaving the
@@ -283,18 +330,6 @@ function sideOf(mid) {
 }
 const NO_BOX = { width: 0, height: 0 };
 /** Fills resolved once per paint, not per frame: a theme tween hands over new paint, but a frame that moves nothing must not re-resolve. Keyed by the paint, so it needs no node. */
-const resolvedFills = new WeakMap();
-function resolvedFill(fill) {
-    if (typeof fill !== "object" || fill === null)
-        return fillOps.resolve(fill);
-    let resolved = resolvedFills.get(fill);
-    if (resolved === undefined)
-        resolvedFills.set(fill, resolved = fillOps.resolve(fill));
-    return resolved;
-}
-export function ringFills(slices) {
-    return slices.map((slice) => resolvedFill(slice.fill));
-}
 /** One label per drawn slice (a zero-valued slice has no wedge), then the hole's summary. Only the choice of form is settled here; the pinned points stay reactive. */
 function ringLabels(s) {
     const blocks = [];
@@ -311,6 +346,7 @@ function ringLabels(s) {
                 inside.push(new Text({
                     ...textOps.styleProps(s.label.insideStyle),
                     text: () => geometry().percentText(arc.index),
+                    fill: () => onFill(s.slices[arc.index]?.fill ?? "white"),
                     fontSize: () => geometry().insideFont,
                 }));
             }
@@ -318,6 +354,7 @@ function ringLabels(s) {
                 inside.push(new Text({
                     ...textOps.styleProps(s.label.insideStyle),
                     text: () => s.slices[arc.index]?.category ?? "",
+                    fill: () => onFill(s.slices[arc.index]?.fill ?? "white"),
                     fontSize: () => (s.labelMode === "category" ? geometry().insideFont : geometry().insideFont * INSIDE_CAPTION_RATIO),
                 }));
             }
@@ -388,7 +425,7 @@ function ringLabels(s) {
             height: "hug",
             gap: 2,
             align: "center",
-            opacity: () => clamp(s.centerReveal, 0, 1),
+            opacity: () => clamp(s.centerReveal, 0, 1) * clamp(geometry().holeRadius / 20, 0, 1),
             center: () => ({ x: geometry().centerX, y: 0 }),
             children,
         }));
@@ -407,12 +444,12 @@ export const PieRing = component2d({
     key: "pieRing",
     state: {
         slices: fresh(() => []),
-        ring: Types.custom(DEFAULT_PIE_CHART_THEME.ring),
-        label: Types.custom(DEFAULT_PIE_CHART_THEME.label),
+        ring: Types.custom(DEFAULT_RING),
+        label: Types.custom(DEFAULT_LABEL),
         // Not `center`: every node already has one, the anchor its position is measured from.
-        centerStyle: Types.custom(DEFAULT_PIE_CHART_THEME.center),
+        centerStyle: Types.custom(DEFAULT_CENTER),
         labelMode: Types.custom("percent"),
-        labelPlacement: Types.custom("leader"),
+        labelPlacement: Types.custom("outside"),
         /** Sweep `[0, 1]`: the wedges grow clockwise from `startAngle` as it rises. */
         growth: 1,
         /** Fade of leaders and labels, separate from `growth` so they arrive after the sweep. */
@@ -420,7 +457,7 @@ export const PieRing = component2d({
         /** Per-slice pop `[0, 1]`, owned by the chart so the ring and legend read one signal. */
         pops: fresh(() => []),
         /** Opacity everything unselected falls back to while any slice is selected. */
-        dimOpacity: DEFAULT_PIE_CHART_THEME.spotlight.dimOpacity,
+        dimOpacity: PIE_SPOTLIGHT_DIM,
         /** Empty leaves the hole clear; ignored when there is no hole. */
         centerLabel: "",
         centerCaption: "",
@@ -433,8 +470,7 @@ export const PieRing = component2d({
     // The paints sit past the paint entries: a fill per slice, the wedge outline and shadow, and the leader stroke.
     load: (loader, state) => loadPaints(loader, {
         fills: ringFills(state.slices),
-        shadows: [shadowOps.resolve(state.ring.shadow)],
-        strokes: [strokeOps.resolve(state.ring.stroke), strokeOps.resolve(state.label.leaderStroke)],
+        strokes: [strokeOps.resolve(state.label.leaderStroke)],
     }),
     commands: {
         /** Wipe the wedges in around the ring (`growth` 0 to 1). */
@@ -482,11 +518,9 @@ export const PieRing = component2d({
                 const a1 = Math.min(arc.a1, revealEnd);
                 if (a1 <= arc.a0)
                     continue;
-                const path = wedgePath(arc.a0, a1, hole, g.anchorRadius(arc.index), halfGap, cx);
+                const path = wedgePath(arc.a0, a1, hole, g.anchorRadius(arc.index), halfGap, Math.max(0, state.ring.cornerRadius), cx);
                 const wedge = new Graphics2D().path(path.toPathState({ centerBounds, width: span, height: span }));
-                wedge.shadow(state.ring.shadow);
                 wedge.fill(fills[arc.index] ?? []);
-                wedge.stroke(state.ring.stroke);
                 ctx.draw(wedge.opacity(g.sliceOpacity(arc.index)));
             }
             // One `Graphics2D` per leader: open polylines chained into one command list