@motionscript/charts 0.1.0 → 0.1.1-alpha.1

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

@@ -1,117 +0,0 @@
-import { Flow, Paint, Rect, Shapes, Text, Types, component2d, textOps, } from "@motionscript/sdk";
-import { fresh } from "../kit/entries.js";
-import { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase } from "../kit/motion.js";
-import { DEFAULT_LEGEND, clampUnit, } from "../kit/shared.js";
-/** How far an entry starts to the right of its slot when it enters, in px. */
-const SLIDE = 16;
-/**
- * The legend of a {@link PieChart}: a **vertical-flow column** of entries, one per
- * slice, each pairing the slice's caption with its colour swatch.
- *
- * A column rather than the cartesian charts' row, because it sits *beside* the
- * ring rather than beneath the plot — a pie is as tall as it is wide, so the
- * space it leaves over is a vertical strip. It is otherwise the same entry: the
- * swatch carries the colour, the caption reads in the legend's neutral ink, and
- * both take the shared {@link LegendConfig}.
- *
- * There is no show/hide here. A pie's marks are its *rows*, and a row that
- * shouldn't be in the chart shouldn't be in the table — removing one would
- * silently re-cut every other wedge's share, which is a different chart rather
- * than the same chart with something hidden. Selection is what a pie has
- * instead, and it arrives through {@link PieLegendProps.dims}.
- */
-export const PieLegend = component2d({
-    key: "pieLegend",
-    state: {
-        ...Paint.state,
-        ...Flow.state,
-        ...Shapes.corners,
-        slices: fresh(() => []),
-        legend: Types.custom(DEFAULT_LEGEND),
-        dims: fresh(() => []),
-        arrivals: arrivalsEntry(),
-    },
-    // A column, for the reason `ChartLegend` gives for its row: a `Rect` given no
-    // flow lays its children out `freeform`, every caption on top of the last.
-    defaults: {
-        flow: "vertical",
-        align: "centerLeft",
-        width: "hug",
-        height: "hug",
-        gap: (state) => state.legend.itemGap / 3,
-        padding: (state) => state.legend.padding,
-    },
-    // One entry per slice, ordered top → bottom. The selection dim rides a wrapper
-    // rather than the entry itself, so the entrance can animate the entry's own
-    // opacity without the two fighting over one value — opacity multiplies down
-    // the tree, which is exactly the composition wanted here.
-    children: (state) => {
-        const marker = state.legend.markerStyle;
-        return state.slices.map((_, index) => Rect({
-            width: "hug",
-            height: "hug",
-            flow: "freeform",
-            opacity: () => clampUnit(state.dims[index] ?? 1),
-            children: [
-                Rect({
-                    flow: "horizontal",
-                    gap: 12,
-                    align: "center",
-                    width: "hug",
-                    height: "hug",
-                    opacity: () => arrivalOf(state.arrivals, index).opacity,
-                    x: () => arrivalOf(state.arrivals, index).shift,
-                    children: [
-                        Rect({
-                            width: marker.height,
-                            height: marker.height,
-                            cornerRadius: marker.borderRadius,
-                            fill: () => state.slices[index]?.fill ?? "white",
-                            stroke: marker.stroke,
-                            shadow: marker.shadow,
-                        }),
-                        Text({
-                            ...textOps.styleProps(state.legend.textStyle),
-                            text: () => state.slices[index]?.category ?? "",
-                        }),
-                    ],
-                }),
-            ],
-        }));
-    },
-    commands: {
-        ...Paint.commands,
-        /**
-         * Every entry at its pre-entrance state, shifted right and transparent: what
-         * a chart shows ahead of this legend's own beat in its entrance, since
-         * `enter` arms the entries only on its first frame.
-         */
-        arm: (timeline, state) => timeline.animate(() => ({ arrivals: armed([...state.slices.keys()], { opacity: 0, shift: SLIDE }) })),
-        /**
-         * Slide + fade every entry in from the right, staggered top-to-bottom. Its
-         * first frame arms them all: shifted right and transparent.
-         *
-         * The timeline's duration is the **whole** entrance: the stagger is carved
-         * out of it rather than added on top, so the command takes exactly the time
-         * the timeline laid out for it.
-         */
-        enter: (timeline, state) => {
-            const count = state.slices.length;
-            if (count === 0)
-                return timeline.wait(timeline.duration);
-            const from = { opacity: 0, shift: SLIDE };
-            const arm = timeline.animate(() => ({ arrivals: armed([...state.slices.keys()], from) }));
-            // Each gap is a fifth of an entry's own move, the rhythm the axes use;
-            // solved for from the budget rather than added to it.
-            const per = timeline.duration / (1 + Math.max(0, count - 1) / 5);
-            const step = per / 5;
-            const ease = frameEase(timeline);
-            const entries = state.slices.map((_, i) => ({ at: i * step, duration: per, piece: arrival(timeline, i, from, ease) }));
-            return timeline.together([arm, beats(timeline, entries)]);
-        },
-    },
-    measure: (measurer, state, children) => Flow.measure(measurer, state, children, Paint.inset(state)),
-    layout: (box, state, children) => Flow.layout(box, state, children, Paint.inset(state)),
-    render: (ctx, state) => Paint.draw(ctx, state, Shapes.rect(ctx.size, state)),
-});
-//# sourceMappingURL=pie-legend.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pie-legend.js","sourceRoot":"","sources":["../../src/pie-chart/pie-legend.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Flow,\n  Paint,\n  Rect,\n  Shapes,\n  Text,\n  Types,\n  component2d,\n  textOps,\n  type NodeOf,\n  type RectProps,\n  // Named so the column's emitted type reaches the Rect surface it spreads through the sdk, not core.\n  type Alignment as _Alignment,\n  type CornerRadiusResolved as _CornerRadiusResolved,\n  type CornerStyleResolved as _CornerStyleResolved,\n  type Fill as _Fill,\n  type FillResolved as _FillResolved,\n  type FlowMode as _FlowMode,\n  type FlowResolved as _FlowResolved,\n  type GapSize as _GapSize,\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n  type RectCornerRadius as _RectCornerRadius,\n  type RectCornerStyle as _RectCornerStyle,\n  type Shadow as _Shadow,\n  type ShadowResolved as _ShadowResolved,\n  type Stroke as _Stroke,\n  type StrokeResolved as _StrokeResolved,\n  type Vector2 as _Vector2,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"../kit/entries\"\nimport { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase, type Arrival } from \"../kit/motion\"\nimport {\n  DEFAULT_LEGEND,\n  clampUnit,\n  type LegendConfig,\n} from \"../kit/shared\"\nimport type { PieSlice } from \"./shared\"\n\nexport interface PieLegendProps extends RectProps {\n  /** One entry per slice, in ring order. */\n  slices: PieSlice[]\n  /** Padding, caption style, gaps, and swatch geometry — see {@link LegendConfig}. */\n  legend: LegendConfig\n  /**\n   * Per-slice opacity multiplier, by index — the same signal that dims the ring,\n   * so an entry fades in step with the wedge it names. Missing entries read as 1.\n   */\n  dims: number[]\n}\n\n/** How far an entry starts to the right of its slot when it enters, in px. */\nconst SLIDE = 16\n\n/**\n * The legend of a {@link PieChart}: a **vertical-flow column** of entries, one per\n * slice, each pairing the slice's caption with its colour swatch.\n *\n * A column rather than the cartesian charts' row, because it sits *beside* the\n * ring rather than beneath the plot — a pie is as tall as it is wide, so the\n * space it leaves over is a vertical strip. It is otherwise the same entry: the\n * swatch carries the colour, the caption reads in the legend's neutral ink, and\n * both take the shared {@link LegendConfig}.\n *\n * There is no show/hide here. A pie's marks are its *rows*, and a row that\n * shouldn't be in the chart shouldn't be in the table — removing one would\n * silently re-cut every other wedge's share, which is a different chart rather\n * than the same chart with something hidden. Selection is what a pie has\n * instead, and it arrives through {@link PieLegendProps.dims}.\n */\nexport const PieLegend = component2d({\n  key: \"pieLegend\",\n  state: {\n    ...Paint.state,\n    ...Flow.state,\n    ...Shapes.corners,\n    slices: fresh<PieSlice[]>(() => []),\n    legend: Types.custom<LegendConfig>(DEFAULT_LEGEND),\n    dims: fresh<number[]>(() => []),\n    arrivals: arrivalsEntry(),\n  },\n  // A column, for the reason `ChartLegend` gives for its row: a `Rect` given no\n  // flow lays its children out `freeform`, every caption on top of the last.\n  defaults: {\n    flow: \"vertical\",\n    align: \"centerLeft\",\n    width: \"hug\",\n    height: \"hug\",\n    gap: (state) => state.legend.itemGap / 3,\n    padding: (state) => state.legend.padding,\n  },\n  // One entry per slice, ordered top → bottom. The selection dim rides a wrapper\n  // rather than the entry itself, so the entrance can animate the entry's own\n  // opacity without the two fighting over one value — opacity multiplies down\n  // the tree, which is exactly the composition wanted here.\n  children: (state) => {\n    const marker = state.legend.markerStyle\n    return state.slices.map((_, index) =>\n      Rect({\n        width: \"hug\",\n        height: \"hug\",\n        flow: \"freeform\",\n        opacity: () => clampUnit(state.dims[index] ?? 1),\n        children: [\n          Rect({\n            flow: \"horizontal\",\n            gap: 12,\n            align: \"center\",\n            width: \"hug\",\n            height: \"hug\",\n            opacity: () => arrivalOf(state.arrivals, index).opacity,\n            x: () => arrivalOf(state.arrivals, index).shift,\n            children: [\n              Rect({\n                width: marker.height,\n                height: marker.height,\n                cornerRadius: marker.borderRadius,\n                fill: () => state.slices[index]?.fill ?? \"white\",\n                stroke: marker.stroke,\n                shadow: marker.shadow,\n              }),\n              Text({\n                ...textOps.styleProps(state.legend.textStyle),\n                text: () => state.slices[index]?.category ?? \"\",\n              }),\n            ],\n          }),\n        ],\n      })\n    )\n  },\n  commands: {\n    ...Paint.commands,\n    /**\n     * Every entry at its pre-entrance state, shifted right and transparent: what\n     * a chart shows ahead of this legend's own beat in its entrance, since\n     * `enter` arms the entries only on its first frame.\n     */\n    arm: (timeline, state) =>\n      timeline.animate(() => ({ arrivals: armed([...state.slices.keys()], { opacity: 0, shift: SLIDE }) })),\n    /**\n     * Slide + fade every entry in from the right, staggered top-to-bottom. Its\n     * first frame arms them all: shifted right and transparent.\n     *\n     * The timeline's duration is the **whole** entrance: the stagger is carved\n     * out of it rather than added on top, so the command takes exactly the time\n     * the timeline laid out for it.\n     */\n    enter: (timeline, state) => {\n      const count = state.slices.length\n      if (count === 0) return timeline.wait(timeline.duration)\n      const from: Arrival = { opacity: 0, shift: SLIDE }\n      const arm = timeline.animate(() => ({ arrivals: armed([...state.slices.keys()], from) }))\n      // Each gap is a fifth of an entry's own move, the rhythm the axes use;\n      // solved for from the budget rather than added to it.\n      const per = timeline.duration / (1 + Math.max(0, count - 1) / 5)\n      const step = per / 5\n      const ease = frameEase(timeline)\n      const entries = state.slices.map((_, i) => ({ at: i * step, duration: per, piece: arrival(timeline, i, from, ease) }))\n      return timeline.together([arm, beats(timeline, entries)])\n    },\n  },\n  measure: (measurer, state, children) => Flow.measure(measurer, state, children, Paint.inset(state)),\n  layout: (box, state, children) => Flow.layout(box, state, children, Paint.inset(state)),\n  render: (ctx, state) => Paint.draw(ctx, state, Shapes.rect(ctx.size, state)),\n})\n\nexport type PieLegend = NodeOf<typeof PieLegend>\n"]}

package/src/kit/chart-border.ts

@@ -1,50 +0,0 @@
-import {
-  Graphics2D,
-  Types,
-  component2d,
-  strokeOps,
-  type NodeOf,
-  // Named so this component's emitted type reaches `Node2D` through the sdk, not core.
-  type Node2D as _Node2D,
-  type Node2DProps,
-  type Stroke,
-  type StrokeResolved,
-} from "@motionscript/sdk"
-
-import { loadPaints } from "./paints"
-import { DEFAULT_PLOT_AREA } from "./shared"
-
-export interface ChartBorderProps extends Node2DProps {
-  /**
-   * The plot's thick frame stroke. The stroke resolver's default `align` is
-   * `'inside'`, so the whole weight sits within the layout box unless the theme
-   * overrides it.
-   */
-  stroke: Stroke
-}
-
-/**
- * The thick **frame** around a cartesian chart's plot: an empty rect wearing an
- * inside stroke, sized from its box.
- *
- * Split out of {@link ChartCanvas} (the filled + gridded backdrop) so it can be
- * placed *after* the marks in the tree — the box then frames the plot **over**
- * them, so a line or a column running to the edge tucks cleanly under the border
- * rather than sitting on top of it.
- */
-export const ChartBorder = component2d({
-  key: "chartBorder",
-  state: {
-    stroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_PLOT_AREA.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
-  },
-  load: (loader, state) => loadPaints(loader, { strokes: [state.stroke] }),
-  render: (ctx, state) => {
-    const { width, height } = ctx.size
-    if (width <= 0 || height <= 0) return
-    // Empty rect (no fill) with the themed stroke, so the frame sits over the
-    // marks but the box interior stays clear.
-    ctx.draw(new Graphics2D().rect({ x: 0, y: 0, width, height }).stroke(state.stroke))
-  },
-})
-
-export type ChartBorder = NodeOf<typeof ChartBorder>

package/src/line-chart/horizontal-axis.ts

@@ -1,151 +0,0 @@
-import {
-  Rect,
-  Text,
-  Types,
-  component2d,
-  insetsOps,
-  textOps,
-  type NodeOf,
-  type Node2D,
-} from "@motionscript/sdk";
-
-import { asParts, fresh } from "../kit/entries";
-import { armed, arrival, arrivalOf, arrivalsEntry, beats, frameEase, type Arrival } from "../kit/motion";
-import {
-  DEFAULT_X_AXIS,
-  enterBudget,
-  type AxisConfig,
-  type Range,
-} from "../kit/shared";
-import { markerCaption } from "../kit/vertical-axis";
-
-/** How far a marker starts above its slot when it enters, in px. */
-const SLIDE = 24;
-
-/**
- * The horizontal axis of a {@link LineChart}: a **row of {@link Text} nodes**,
- * one per marker value, running left-to-right. Pure layout — the mirror of the
- * kit's `VerticalAxis`, including its bound (not snapshotted) marker text and
- * positions, and its landed resting state.
- *
- * Markers are always placed **by value** across the range, whatever they say:
- * `2026-03` sits three months along, not three slots along. That is what keeps
- * it distinct from a bar chart's bottom axis, which centres a caption on each
- * slot and has no scale at all — the two only look alike. What the values are
- * captioned *as* is the chart's to decide, in `captions`.
- *
- * `enter` staggers the markers in **left-to-right**: each starts lifted a
- * little above its slot and transparent, then fades and slides down into place.
- */
-export const HorizontalAxis = component2d({
-  key: "horizontalAxis",
-  state: {
-    /** `[min, max]` of the horizontal scale the markers are positioned within. */
-    range: fresh<Range>(() => [0, 1]),
-    /** Tick values (in data units) to draw along the axis. */
-    markers: fresh<number[]>(() => []),
-    /**
-     * How each marker is captioned, one per entry of `markers` and in its order.
-     * Empty (the default), or short, captions a marker with its bare numeric
-     * reading; a chart whose x column names months or categories writes those.
-     */
-    captions: fresh<string[]>(() => []),
-    /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */
-    axis: Types.custom<AxisConfig>(DEFAULT_X_AXIS),
-    /** Caption drawn centred in the gutter beneath the marker row; empty (the default) hides it. */
-    label: "",
-    arrivals: arrivalsEntry(),
-  },
-  // A plain node filled its parent; one made of its markers would hug them.
-  defaults: { width: "fill", height: "fill" },
-  children: (state) => {
-    const tickPad = insetsOps.resolve(state.axis.tickPadding).top;
-    const titlePad = insetsOps.resolve(state.axis.titlePadding).top;
-
-    const column: Node2D[] = [];
-    // The column's parent is the axis: its box is what the markers are placed in.
-    const box = () => (column[0]?.parent as Node2D | null | undefined)?.layoutBounds ?? { width: 0, height: 0 };
-    /** The live tick values, left → right — re-read every frame, not snapshotted. */
-    const sorted = () => [...state.markers].sort((a, b) => a - b);
-    /** Tick `i`'s fraction across the live `range`, 0 at the left edge. */
-    const fracAt = (value: number | undefined) => {
-      if (value === undefined) return 0;
-      const [min, max] = state.range;
-      return max <= min ? 0 : (value - min) / (max - min);
-    };
-
-    const markers = state.markers.map((_, i) => {
-      const marker: Node2D = new Text({
-        ...textOps.styleProps(state.axis.labelStyle),
-        text: () => {
-          const value = sorted()[i];
-          return value === undefined ? "" : markerCaption(state, value);
-        },
-        x: () => {
-          const width = box().width;
-          const centred = (fracAt(sorted()[i]) - 0.5) * width;
-          // Held inside the axis's right edge, which is also the *chart's*: the
-          // last marker is centred on the last grid line, so half of `2026-06`
-          // — or of `3300` — would be drawn outside the node's box and outside
-          // the rectangle the editor draws around it. Only the right edge is
-          // held, because the left one has the vertical axis's whole gutter
-          // beyond it, and a marker overhanging into that is inside the chart.
-          const limit = width / 2 - marker.layoutBounds.width / 2;
-          return Math.min(centred, limit);
-        },
-        opacity: () => arrivalOf(state.arrivals, i).opacity,
-        y: () => arrivalOf(state.arrivals, i).shift,
-      });
-      return marker;
-    });
-
-    const children: Node2D[] = [
-      new Rect({ width: "fill", height: "hug", padding: { top: tickPad }, children: markers }),
-    ];
-    if (state.label !== "") {
-      children.push(
-        new Text({
-          ...textOps.styleProps(state.axis.titleStyle),
-          text: state.label,
-          opacity: () => arrivalOf(state.arrivals, "label").opacity,
-          y: () => arrivalOf(state.arrivals, "label").shift,
-        }),
-      );
-    }
-
-    column.push(new Rect({ flow: "vertical", gap: titlePad, height: "hug", width: "fill", children }));
-    return asParts(column);
-  },
-  commands: {
-    /**
-     * Stagger the markers in left to right, then slide the caption in after
-     * them. Its first frame arms them all: lifted by `slide` and transparent.
-     *
-     * The timeline's duration is the **whole** entrance — see
-     * `VerticalAxis.enter` and {@link enterBudget}.
-     */
-    enter: {
-      args: {
-        stagger: Types.custom<number | undefined>(undefined),
-        slide: Types.number(SLIDE),
-      },
-      run: (timeline, state) => {
-        const { stagger, slide } = timeline.args;
-        const count = state.markers.length;
-        const captioned = state.label !== "";
-        const from: Arrival = { opacity: 0, shift: slide };
-        const keys = [...state.markers.keys(), ...(captioned ? ["label"] : [])];
-        const arm = timeline.animate(() => ({ arrivals: armed(keys, from) }));
-        if (count === 0) return arm;
-        const { step, per, caption } = enterBudget(timeline.duration, count, captioned, stagger);
-        const ease = frameEase(timeline);
-        // Left marker leads: the row is already left → right.
-        const markers = state.markers.map((_, i) => ({ at: i * step, duration: per, piece: arrival(timeline, i, from, ease) }));
-        const label = captioned ? [{ at: (count - 1) * step + per, duration: caption, piece: arrival(timeline, "label", from, ease) }] : [];
-        return timeline.together([arm, beats(timeline, [...markers, ...label])]);
-      },
-    },
-  },
-});
-
-export type HorizontalAxis = NodeOf<typeof HorizontalAxis>;