@motionscript/charts 0.0.0-stage → 0.1.0-alpha.0

package/dist/bar-chart/chart-bars.js

@@ -0,0 +1,236 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { command, Graphics2D, Node2D, Text, easeOut, fillOps, shadowOps, strokeOps, property, textOps, } from "@motionscript/core";
+import { clampUnit, formatMarker } from "../kit/shared.js";
+import { DEFAULT_BAR_CHART_THEME } from "./shared.js";
+import { declarePaints } from "@motionscript/core/component";
+/** Gap between a grouped column's end and the figure printed over it, in px. */
+const VALUE_GAP = 10;
+/** A segment shorter than this many multiples of the type size prints no figure. */
+const VALUE_FIT = 1.6;
+/** Fallback type size when the theme's value style leaves it unset or autofit. */
+const VALUE_SIZE = 24;
+/**
+ * One **series** of a {@link BarChart}, drawn as one command list: its column in
+ * every category, plus the figures printed on them.
+ *
+ * A node per series rather than a node per bar, deliberately — it is the same
+ * unit `ChartLine` is, which is what lets `showSeries`/`hideSeries`/
+ * `spotlightSeries` mean exactly the same thing on a bar chart as on a line
+ * chart: enable the node, or tween its opacity. The columns' *positions* come
+ * from the parent (it owns the slot arithmetic both modes share), so this part
+ * only has to know how to draw a span and grow it.
+ *
+ * The figures are real {@link Text} children rather than glyphs in the command
+ * list, so they take the theme's type style, are measured by the layout engine,
+ * and ride the node's own opacity — which is why hiding the series takes its
+ * figures with it for free.
+ */
+export class ChartBars extends Node2D {
+    /**
+     * How a column's figure is written down — the same seam the two axes carry,
+     * so a chart's value axis and the numbers printed on its bars can't end up
+     * saying `$1,200` in one place and `1200` in the other.
+     */
+    labelFor = formatMarker;
+    constructor(props) {
+        super(props);
+        // One caption per column, built once (the row count is fixed at
+        // construction, like an axis's marker count) and bound to the live geometry
+        // so it travels with its column as the chart grows, rescales or reflows.
+        if (!this.showValues)
+            return;
+        for (let i = 0; i < this.bars.length; i++) {
+            this.add(new Text({
+                ...textOps.styleProps(this.valueStyle),
+                text: () => this.captionAt(i),
+                x: () => this.bars[i]?.x ?? 0,
+                y: () => this.captionY(i),
+                opacity: () => this.dimAt(i),
+            }));
+        }
+    }
+    /**
+     * How far column `i` is dimmed — the chart's category spotlight, and the
+     * series switch on top of it.
+     *
+     * The captions read this rather than being hidden by `renderSelf`'s guard:
+     * they are real child nodes, so a `return` in the draw pass would leave them
+     * on screen over a series that isn't there.
+     */
+    dimAt(index) {
+        if (!this.enabled)
+            return 0;
+        return clampUnit(this.dims[index] ?? 1);
+    }
+    /** The two ends of column `i` at the current {@link growth}. */
+    endsAt(index) {
+        const bar = this.bars[index];
+        if (!bar)
+            return null;
+        const g = clampUnit(this.growth);
+        const base = this.baseline + (bar.from - this.baseline) * g;
+        const end = this.baseline + (bar.to - this.baseline) * g;
+        return { base, end };
+    }
+    /** The type size the figures are set at, guarding the autofit/unset cases. */
+    get valueSize() {
+        const size = this.valueStyle.fontSize;
+        return typeof size === "number" ? size : VALUE_SIZE;
+    }
+    /**
+     * The figure printed on column `i`, or `""` where there is no room for it.
+     *
+     * Blanking the text rather than dropping the node keeps the caption list
+     * index-aligned with the columns, so a chart that rescales into more room
+     * simply starts printing again.
+     */
+    captionAt(index) {
+        const bar = this.bars[index];
+        if (!bar || bar.value === 0)
+            return "";
+        // An interior segment prints inside itself, so it has to be tall enough to
+        // hold a line of type; a grouped column prints in the headroom above its
+        // end, where the only constraint is the plot's own top.
+        if (this.insideAt(index)) {
+            const ends = this.endsAt(index);
+            if (!ends)
+                return "";
+            if (Math.abs(ends.end - ends.base) < this.valueSize * VALUE_FIT)
+                return "";
+        }
+        return this.labelFor(bar.value);
+    }
+    /** Whether column `i`'s figure sits inside the column (a stacked segment) or past its end. */
+    insideAt(index) {
+        const bar = this.bars[index];
+        return bar !== undefined && Math.abs(bar.from - this.baseline) > 0.5;
+    }
+    /** Where column `i`'s figure sits, in the node's centred y-up space. */
+    captionY(index) {
+        const ends = this.endsAt(index);
+        if (!ends)
+            return 0;
+        if (this.insideAt(index))
+            return (ends.base + ends.end) / 2;
+        // Text is centred on its `y`, so clear the column's end by the gap plus half
+        // a line — on whichever side of the baseline the column actually reached.
+        const direction = ends.end >= ends.base ? 1 : -1;
+        return ends.end + direction * (VALUE_GAP + this.valueSize / 2);
+    }
+    /**
+     * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
+     * paint props it carries — see {@link declarePaints}. The column stroke and
+     * shadow are named past the conventional slots, so they are passed explicitly.
+     */
+    declareAssets(assets) {
+        super.declareAssets(assets);
+        declarePaints(this, assets, {
+            fills: this.barShadow.map((shadow) => shadow.fill),
+            strokes: [this.barStroke],
+        });
+    }
+    renderSelf(ctx) {
+        if (!this.enabled)
+            return;
+        for (let i = 0; i < this.bars.length; i++) {
+            const bar = this.bars[i];
+            const ends = this.endsAt(i);
+            if (!ends || bar.width <= 0)
+                continue;
+            const height = Math.abs(ends.end - ends.base);
+            if (height <= 0)
+                continue;
+            const radius = bar.round ? Math.min(this.cornerRadius, height) : 0;
+            // A column per `Graphics2D` rather than one list for the series: the
+            // category spotlight dims individual columns, and opacity is a property
+            // of the command list rather than of a shape within it.
+            const g = new Graphics2D();
+            const rect = g.rect({
+                x: bar.x,
+                y: (ends.base + ends.end) / 2,
+                width: bar.width,
+                height,
+                // This node's space is y-up, but the renderer's corner-radius keys are
+                // labelled in canvas y-down space — so a column reaching *up* rounds
+                // through the `bottom*` keys, and one reaching down through the `top*`
+                // ones. Only the far end rounds, which is what makes a stack read as a
+                // single capped column.
+                cornerRadius: radius > 0
+                    ? ends.end >= ends.base
+                        ? { bottomLeft: radius, bottomRight: radius, topLeft: 0, topRight: 0 }
+                        : { topLeft: radius, topRight: radius, bottomLeft: 0, bottomRight: 0 }
+                    : 0,
+            });
+            rect.shadow(this.barShadow);
+            rect.fill(this.fill);
+            rect.stroke(this.barStroke);
+            ctx.draw(g.opacity(this.dimAt(i)));
+        }
+    }
+    /**
+     * Raise every column from the baseline by tweening {@link growth} `0 → 1`.
+     *
+     * The mirror of `ChartLine.enter`: same signature, same contract that the
+     * resting state is the finished one, so the chart arms this back to 0 before
+     * animating rather than the node hiding itself at construction.
+     */
+    enter(args) {
+        // No priming to 0 first: the value at `t` is a function of `t`, so a repeat
+        // call re-raises by definition rather than by having reset something.
+        return this.command((t) => ({ growth: t }), args.duration, args.easing ?? easeOut());
+    }
+}
+__decorate([
+    property({ default: () => [] })
+], ChartBars.prototype, "bars", void 0);
+__decorate([
+    property({ default: 0 })
+], ChartBars.prototype, "baseline", void 0);
+__decorate([
+    property({
+        default: [],
+        mapper: fillOps.resolve,
+        tween: fillOps.lerp,
+    })
+], ChartBars.prototype, "fill", void 0);
+__decorate([
+    property({
+        default: DEFAULT_BAR_CHART_THEME.bar.stroke,
+        mapper: strokeOps.resolve,
+        tween: strokeOps.lerp,
+    })
+], ChartBars.prototype, "barStroke", void 0);
+__decorate([
+    property({
+        default: DEFAULT_BAR_CHART_THEME.bar.shadow,
+        mapper: shadowOps.resolve,
+        tween: shadowOps.lerp,
+    })
+], ChartBars.prototype, "barShadow", void 0);
+__decorate([
+    property({ default: DEFAULT_BAR_CHART_THEME.bar.cornerRadius })
+], ChartBars.prototype, "cornerRadius", void 0);
+__decorate([
+    property({ default: 1 })
+], ChartBars.prototype, "growth", void 0);
+__decorate([
+    property({ default: () => [] })
+], ChartBars.prototype, "dims", void 0);
+__decorate([
+    property({ default: false })
+], ChartBars.prototype, "showValues", void 0);
+__decorate([
+    property({ default: DEFAULT_BAR_CHART_THEME.valueStyle })
+], ChartBars.prototype, "valueStyle", void 0);
+__decorate([
+    property({ default: true })
+], ChartBars.prototype, "enabled", void 0);
+__decorate([
+    command()
+], ChartBars.prototype, "enter", null);
+//# sourceMappingURL=chart-bars.js.map

package/dist/bar-chart/chart-bars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-bars.js","sourceRoot":"","sources":["../../src/bar-chart/chart-bars.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  command,\n  type AssetScope,\n  Graphics2D,\n  Node2D,\n  Text,\n  easeOut,\n  fillOps,\n  shadowOps,\n  strokeOps,\n  property,\n  textOps,\n  type Command,\n  type CommandArgs,\n  type Fill,\n  type NodeConfig,\n  type Node2DProps,\n  type RenderContext2D,\n  type Shadow,\n  type ShadowResolved,\n  type Stroke,\n  type StrokeResolved,\n  type TextStyle,\n} from \"@motionscript/core\"\n\nimport { clampUnit, formatMarker } from \"../kit/shared\"\nimport type { MarkerLabel } from \"../kit/vertical-axis\"\nimport { DEFAULT_BAR_CHART_THEME } from \"./shared\"\nimport { declarePaints } from \"@motionscript/core/component\"\n\n/**\n * One drawn column, already mapped into the plot's **centred pixel space**\n * (origin at the plot centre, y-up) by the parent {@link BarChart}.\n *\n * `from`/`to` are the two ends of the column rather than a base and a height,\n * for the same reason {@link BarSpan} is a span: it is the one shape that fits a\n * grouped bar, a stacked segment and a negative value without a special case.\n */\nexport interface BarGeometry {\n  /** Centre x of the column. */\n  x: number\n  /** Column width in px. */\n  width: number\n  /** Pixel y of the column's base — the baseline when grouped, the running stack top when stacked. */\n  from: number\n  /** Pixel y of its far end, at full {@link ChartBars.growth}. */\n  to: number\n  /** Whether the far end takes the theme's corner radius (the stack's cap). */\n  round: boolean\n  /** The value this column plots, for the figure printed on it. */\n  value: number\n}\n\n/** Gap between a grouped column's end and the figure printed over it, in px. */\nconst VALUE_GAP = 10\n/** A segment shorter than this many multiples of the type size prints no figure. */\nconst VALUE_FIT = 1.6\n/** Fallback type size when the theme's value style leaves it unset or autofit. */\nconst VALUE_SIZE = 24\n\nexport interface ChartBarsProps extends Node2DProps {\n  /** This series' columns, one per row of the chart's data. */\n  bars: BarGeometry[]\n  /** Pixel y of value 0 — where every column grows *from*. */\n  baseline: number\n  /** Column paint — this series' own, or the theme palette's entry for its index. */\n  fill: Fill\n  /** Optional outline on every column. */\n  barStroke: Stroke\n  /** Optional drop shadow on every column. */\n  barShadow: Shadow\n  /** Radius of the far-end corners, in px. */\n  cornerRadius: number\n  /**\n   * Rise of every column in `[0, 1]`, measured **about the baseline**: 0\n   * collapses them all onto it, 1 draws them at full length.\n   *\n   * Scaling about the baseline rather than about each column's own base is what\n   * keeps a stack flush mid-animation — every segment's base and end travel by\n   * the same factor, so the segments stay stacked instead of the upper ones\n   * floating above the still-growing lower ones. It also means a negative\n   * column grows *down* out of the same signal.\n   */\n  growth: number\n  /**\n   * Per-column opacity multiplier, by row index — how the chart's category\n   * spotlight reaches a single column without touching the series it belongs\n   * to. Missing entries read as 1.\n   */\n  dims: number[]\n  /** Whether the figure each column plots is printed on it. */\n  showValues: boolean\n  /** Type style for those figures. */\n  valueStyle: TextStyle\n  /**\n   * Whether this series draws at all — the wholesale switch behind\n   * `BarChart.showSeries`/`hideSeries`, alongside the slot weight that animates\n   * the reflow. Off skips the columns *and* their figures.\n   */\n  enabled: boolean\n}\n\n/**\n * One **series** of a {@link BarChart}, drawn as one command list: its column in\n * every category, plus the figures printed on them.\n *\n * A node per series rather than a node per bar, deliberately — it is the same\n * unit `ChartLine` is, which is what lets `showSeries`/`hideSeries`/\n * `spotlightSeries` mean exactly the same thing on a bar chart as on a line\n * chart: enable the node, or tween its opacity. The columns' *positions* come\n * from the parent (it owns the slot arithmetic both modes share), so this part\n * only has to know how to draw a span and grow it.\n *\n * The figures are real {@link Text} children rather than glyphs in the command\n * list, so they take the theme's type style, are measured by the layout engine,\n * and ride the node's own opacity — which is why hiding the series takes its\n * figures with it for free.\n */\nexport class ChartBars extends Node2D<ChartBarsProps> {\n  @property({ default: () => [] as BarGeometry[] }) declare bars: BarGeometry[]\n  @property({ default: 0 }) declare baseline: number\n  @property({\n    default: [],\n    mapper: fillOps.resolve,\n    tween: fillOps.lerp,\n  })\n  declare fill: Fill\n  @property({\n    default: DEFAULT_BAR_CHART_THEME.bar.stroke,\n    mapper: strokeOps.resolve,\n    tween: strokeOps.lerp,\n  })\n  declare barStroke: Stroke\n  @property({\n    default: DEFAULT_BAR_CHART_THEME.bar.shadow,\n    mapper: shadowOps.resolve,\n    tween: shadowOps.lerp,\n  })\n  declare barShadow: Shadow\n  @property({ default: DEFAULT_BAR_CHART_THEME.bar.cornerRadius })\n  declare cornerRadius: number\n  @property({ default: 1 }) declare growth: number\n  @property({ default: () => [] as number[] }) declare dims: number[]\n  @property({ default: false }) declare showValues: boolean\n  @property({ default: DEFAULT_BAR_CHART_THEME.valueStyle })\n  declare valueStyle: TextStyle\n  @property({ default: true }) declare enabled: boolean\n\n  /**\n   * How a column's figure is written down — the same seam the two axes carry,\n   * so a chart's value axis and the numbers printed on its bars can't end up\n   * saying `$1,200` in one place and `1200` in the other.\n   */\n  labelFor: MarkerLabel = formatMarker\n\n  constructor(props?: NodeConfig<ChartBars, ChartBarsProps>) {\n    super(props)\n\n    // One caption per column, built once (the row count is fixed at\n    // construction, like an axis's marker count) and bound to the live geometry\n    // so it travels with its column as the chart grows, rescales or reflows.\n    if (!this.showValues) return\n    for (let i = 0; i < this.bars.length; i++) {\n      this.add(\n        new Text({\n          ...textOps.styleProps(this.valueStyle),\n          text: () => this.captionAt(i),\n          x: () => this.bars[i]?.x ?? 0,\n          y: () => this.captionY(i),\n          opacity: () => this.dimAt(i),\n        })\n      )\n    }\n  }\n\n  /**\n   * How far column `i` is dimmed — the chart's category spotlight, and the\n   * series switch on top of it.\n   *\n   * The captions read this rather than being hidden by `renderSelf`'s guard:\n   * they are real child nodes, so a `return` in the draw pass would leave them\n   * on screen over a series that isn't there.\n   */\n  private dimAt(index: number): number {\n    if (!this.enabled) return 0\n    return clampUnit(this.dims[index] ?? 1)\n  }\n\n  /** The two ends of column `i` at the current {@link growth}. */\n  private endsAt(index: number): { base: number; end: number } | null {\n    const bar = this.bars[index]\n    if (!bar) return null\n    const g = clampUnit(this.growth)\n    const base = this.baseline + (bar.from - this.baseline) * g\n    const end = this.baseline + (bar.to - this.baseline) * g\n    return { base, end }\n  }\n\n  /** The type size the figures are set at, guarding the autofit/unset cases. */\n  private get valueSize(): number {\n    const size = this.valueStyle.fontSize\n    return typeof size === \"number\" ? size : VALUE_SIZE\n  }\n\n  /**\n   * The figure printed on column `i`, or `\"\"` where there is no room for it.\n   *\n   * Blanking the text rather than dropping the node keeps the caption list\n   * index-aligned with the columns, so a chart that rescales into more room\n   * simply starts printing again.\n   */\n  private captionAt(index: number): string {\n    const bar = this.bars[index]\n    if (!bar || bar.value === 0) return \"\"\n    // An interior segment prints inside itself, so it has to be tall enough to\n    // hold a line of type; a grouped column prints in the headroom above its\n    // end, where the only constraint is the plot's own top.\n    if (this.insideAt(index)) {\n      const ends = this.endsAt(index)\n      if (!ends) return \"\"\n      if (Math.abs(ends.end - ends.base) < this.valueSize * VALUE_FIT) return \"\"\n    }\n    return this.labelFor(bar.value)\n  }\n\n  /** Whether column `i`'s figure sits inside the column (a stacked segment) or past its end. */\n  private insideAt(index: number): boolean {\n    const bar = this.bars[index]\n    return bar !== undefined && Math.abs(bar.from - this.baseline) > 0.5\n  }\n\n  /** Where column `i`'s figure sits, in the node's centred y-up space. */\n  private captionY(index: number): number {\n    const ends = this.endsAt(index)\n    if (!ends) return 0\n    if (this.insideAt(index)) return (ends.base + ends.end) / 2\n    // Text is centred on its `y`, so clear the column's end by the gap plus half\n    // a line — on whichever side of the baseline the column actually reached.\n    const direction = ends.end >= ends.base ? 1 : -1\n    return ends.end + direction * (VALUE_GAP + this.valueSize / 2)\n  }\n\n  /**\n   * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the\n   * paint props it carries — see {@link declarePaints}. The column stroke and\n   * shadow are named past the conventional slots, so they are passed explicitly.\n   */\n  override declareAssets(assets: AssetScope): void {\n    super.declareAssets(assets)\n    declarePaints(this, assets, {\n      fills: (this.barShadow as ShadowResolved[]).map((shadow) => shadow.fill),\n      strokes: [this.barStroke as StrokeResolved[]],\n    })\n  }\n\n  protected renderSelf(ctx: RenderContext2D): void {\n    if (!this.enabled) return\n    for (let i = 0; i < this.bars.length; i++) {\n      const bar = this.bars[i]\n      const ends = this.endsAt(i)\n      if (!ends || bar.width <= 0) continue\n      const height = Math.abs(ends.end - ends.base)\n      if (height <= 0) continue\n\n      const radius = bar.round ? Math.min(this.cornerRadius, height) : 0\n      // A column per `Graphics2D` rather than one list for the series: the\n      // category spotlight dims individual columns, and opacity is a property\n      // of the command list rather than of a shape within it.\n      const g = new Graphics2D()\n      const rect = g.rect({\n        x: bar.x,\n        y: (ends.base + ends.end) / 2,\n        width: bar.width,\n        height,\n        // This node's space is y-up, but the renderer's corner-radius keys are\n        // labelled in canvas y-down space — so a column reaching *up* rounds\n        // through the `bottom*` keys, and one reaching down through the `top*`\n        // ones. Only the far end rounds, which is what makes a stack read as a\n        // single capped column.\n        cornerRadius:\n          radius > 0\n            ? ends.end >= ends.base\n              ? { bottomLeft: radius, bottomRight: radius, topLeft: 0, topRight: 0 }\n              : { topLeft: radius, topRight: radius, bottomLeft: 0, bottomRight: 0 }\n            : 0,\n      })\n      rect.shadow(this.barShadow)\n      rect.fill(this.fill)\n      rect.stroke(this.barStroke)\n      ctx.draw(g.opacity(this.dimAt(i)))\n    }\n  }\n\n  /**\n   * Raise every column from the baseline by tweening {@link growth} `0 → 1`.\n   *\n   * The mirror of `ChartLine.enter`: same signature, same contract that the\n   * resting state is the finished one, so the chart arms this back to 0 before\n   * animating rather than the node hiding itself at construction.\n   */\n  @command()\n  enter(args: CommandArgs<Record<string, never>> & { duration: number }): Command<ChartBarsGrowth> {\n    // No priming to 0 first: the value at `t` is a function of `t`, so a repeat\n    // call re-raises by definition rather than by having reset something.\n    return this.command<ChartBarsGrowth>((t) => ({ growth: t }), args.duration, args.easing ?? easeOut())\n  }\n}\n\n/** The one signal {@link ChartBars.enter} moves. */\ntype ChartBarsGrowth = { growth: number }\n"]}

package/dist/bar-chart/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The bar chart: grouped or stacked columns off a category axis.
+ *
+ * Shares the plot panel, the value axis and the legend with the line chart —
+ * which is what lets a scene swap one for the other without re-theming — and
+ * brings its own category axis, since a band scale is not a continuous one.
+ */
+export { BarChart } from "./bar-chart.js";
+export type { BarChartProps } from "./bar-chart.js";
+export { ChartBars } from "./chart-bars.js";
+export type { BarGeometry, ChartBarsProps } from "./chart-bars.js";
+export { CategoryAxis } from "./category-axis.js";
+export type { CategoryAxisProps } from "./category-axis.js";
+export { DEFAULT_BAR_CHART_THEME, barCategories, barSpans, barValueExtent, lerpBarChartTheme, resolveBarChartTheme, resolveBarFill, resolveBarScale, stackCapIndex, } from "./shared.js";
+export type { BarChartConfig, BarChartTheme, BarSeries, BarSpan, BarStyleConfig, } from "./shared.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/bar-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/bar-chart/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EACL,uBAAuB,EACvB,aAAa,EACb,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,YAAY,EACV,cAAc,EACd,aAAa,EACb,SAAS,EACT,OAAO,EACP,cAAc,GACf,MAAM,UAAU,CAAA"}

package/dist/bar-chart/index.js

@@ -0,0 +1,12 @@
+/**
+ * The bar chart: grouped or stacked columns off a category axis.
+ *
+ * Shares the plot panel, the value axis and the legend with the line chart —
+ * which is what lets a scene swap one for the other without re-theming — and
+ * brings its own category axis, since a band scale is not a continuous one.
+ */
+export { BarChart } from "./bar-chart.js";
+export { ChartBars } from "./chart-bars.js";
+export { CategoryAxis } from "./category-axis.js";
+export { DEFAULT_BAR_CHART_THEME, barCategories, barSpans, barValueExtent, lerpBarChartTheme, resolveBarChartTheme, resolveBarFill, resolveBarScale, stackCapIndex, } from "./shared.js";
+//# sourceMappingURL=index.js.map

package/dist/bar-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/bar-chart/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,OAAO,EACL,uBAAuB,EACvB,aAAa,EACb,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,UAAU,CAAA","sourcesContent":["/**\n * The bar chart: grouped or stacked columns off a category axis.\n *\n * Shares the plot panel, the value axis and the legend with the line chart —\n * which is what lets a scene swap one for the other without re-theming — and\n * brings its own category axis, since a band scale is not a continuous one.\n */\nexport { BarChart } from \"./bar-chart\"\nexport type { BarChartProps } from \"./bar-chart\"\nexport { ChartBars } from \"./chart-bars\"\nexport type { BarGeometry, ChartBarsProps } from \"./chart-bars\"\nexport { CategoryAxis } from \"./category-axis\"\nexport type { CategoryAxisProps } from \"./category-axis\"\nexport {\n  DEFAULT_BAR_CHART_THEME,\n  barCategories,\n  barSpans,\n  barValueExtent,\n  lerpBarChartTheme,\n  resolveBarChartTheme,\n  resolveBarFill,\n  resolveBarScale,\n  stackCapIndex,\n} from \"./shared\"\nexport type {\n  BarChartConfig,\n  BarChartTheme,\n  BarSeries,\n  BarSpan,\n  BarStyleConfig,\n} from \"./shared\"\n"]}

package/dist/bar-chart/shared.d.ts

@@ -0,0 +1,146 @@
+/**
+ * Types and pure helpers specific to the {@link BarChart} family: how a row's
+ * values become the spans its columns cover, how the value axis is scaled around
+ * them, and the theme the bars add to the shared chart vocabulary.
+ *
+ * Everything a line or a pie chart would want too — what a series is, the axis
+ * domain model, the theme leaf resolvers, the legend and plot-panel branches —
+ * lives in `nodes/chart-kit/shared.ts` and is imported here.
+ *
+ * Kept renderer-agnostic (no `Node` imports) so the studio's inspector mapping
+ * (`bar-chart-props.ts`) can build a partial {@link BarChartTheme} without
+ * pulling the node classes in.
+ */
+import { type DataRecord, type Fill, type Shadow, type Stroke, type TextStyle } from "@motionscript/core";
+import { type AxisConfig, type ChartSeries, type LegendConfig, type LegendTheme, type PlotAreaConfig, type Range } from "../kit/shared.js";
+/**
+ * One series in a {@link BarChart}: a column of the table drawn as one bar per
+ * row — side by side with its siblings within each category's slot, or stacked
+ * on top of them.
+ *
+ * The family-wide {@link ChartSeries} under a name that says what it draws here.
+ */
+export type BarSeries = ChartSeries;
+/**
+ * One drawn bar's span in **data units**: the value its base sits at and the
+ * value its far end reaches.
+ *
+ * A span rather than a height because that is the one shape both modes fit. A
+ * grouped bar runs from zero to its value; a stacked segment runs from the
+ * running total below it to that total plus its own value. Negative values fall
+ * out of the same arithmetic — the span simply runs the other way — so a chart
+ * with a loss in it needs no special case, only a baseline that isn't the floor.
+ */
+export interface BarSpan {
+    /** Value the bar's base sits at — 0 when grouped, the running total when stacked. */
+    from: number;
+    /** Value its far end reaches. */
+    to: number;
+    /** The value this bar plots — `to - from`, kept for the figure printed on it. */
+    value: number;
+}
+/**
+ * The spans one row's bars cover, one per series, in series order.
+ *
+ * Stacking is a running sum in the order the series are listed, which is also
+ * the order they're drawn: series 0 sits on the baseline and each later one
+ * rides on what's below it. A zero-valued series still yields a (degenerate)
+ * span so the returned list stays index-aligned with the series list.
+ */
+export declare function barSpans(row: DataRecord, series: BarSeries[], stacked: boolean): BarSpan[];
+/**
+ * The index of the series whose segment ends a row's stack — the one that gets
+ * the rounded cap, so a stack reads as one capped column rather than a pile of
+ * separate boxes. `-1` when every value in the row is zero.
+ *
+ * Read off the *last non-zero* series rather than the last one listed, so a
+ * series that happens to be 0 in this row doesn't take the cap and leave the
+ * segment below it square.
+ */
+export declare function stackCapIndex(row: DataRecord, series: BarSeries[]): number;
+/** The captions beneath the baseline: one per row, read off the category column. */
+export declare function barCategories(data: DataRecord[], field: string): string[];
+/**
+ * The `[min, max]` of everything the chart draws, **zero always included**.
+ *
+ * Zero is in the range whatever the data says, because a bar chart's baseline is
+ * zero: a scale starting at 40 draws a column three times its neighbour for a
+ * 10% difference, which is the classic way to lie with one. A chart that really
+ * does want a cropped axis says so with an explicit range.
+ */
+export declare function barValueExtent(data: DataRecord[], series: BarSeries[], stacked: boolean): Range;
+/**
+ * Effective value scale: the explicit `range`, else the data's extent nudged out
+ * to tidy step bounds so the markers read as round numbers.
+ *
+ * `divisions` is how many segments the auto-range is stepped into (one fewer
+ * than the marker count), so the ticks the axis draws land on the bounds this
+ * picks.
+ */
+export declare function resolveBarScale(data: DataRecord[], series: BarSeries[], stacked: boolean, range: Range | undefined, divisions: number): Range;
+/** How the columns themselves are drawn and how the slot is divided up. */
+export interface BarStyleConfig {
+    /**
+     * Radius of a column's far-end corners, in px. Only the outer end rounds — an
+     * interior stacked segment stays square, so the stack reads as one column.
+     */
+    cornerRadius: number;
+    /**
+     * Fraction of its category's slot the bars fill, `[0, 1]`. The remainder is
+     * the channel between one category and the next, which is what makes a bar
+     * chart read as groups rather than as a solid block.
+     */
+    slotFill: number;
+    /** Gap between the grouped bars *within* one slot, in px. Ignored when stacked. */
+    groupGap: number;
+    /** Optional outline on every column. */
+    stroke: Stroke;
+    /** Optional drop shadow on every column. */
+    shadow: Shadow;
+}
+/** A {@link BarChart}'s full, resolved visual theme. */
+export interface BarChartConfig {
+    /**
+     * Default per-series bar paint, cycled by series index (`i % length`). A
+     * series' own `fill`, when set, replaces its entry outright.
+     */
+    seriesFills: Fill[];
+    bar: BarStyleConfig;
+    /** The category axis beneath the baseline. */
+    xAxis: AxisConfig;
+    /** The numeric value axis up the left. */
+    yAxis: AxisConfig;
+    plotArea: PlotAreaConfig;
+    legend: LegendConfig;
+    /** The figure printed on each column, when the chart prints them. */
+    valueStyle: TextStyle;
+    /** How far everything *outside* a spotlit series or category fades. */
+    spotlight: {
+        dimOpacity: number;
+    };
+}
+/** Author-facing partial theme — every branch optional and deep-merged. */
+export type BarChartTheme = {
+    seriesFills?: Fill[];
+    bar?: Partial<BarStyleConfig>;
+    xAxis?: Partial<AxisConfig>;
+    yAxis?: Partial<AxisConfig>;
+    plotArea?: Partial<PlotAreaConfig>;
+    legend?: LegendTheme;
+    valueStyle?: TextStyle;
+    spotlight?: Partial<BarChartConfig["spotlight"]>;
+};
+/** The bar chart's out-of-the-box look. */
+export declare const DEFAULT_BAR_CHART_THEME: BarChartConfig;
+/**
+ * {@link BarChart}'s `theme` @property mapper: merges the author's partial
+ * {@link BarChartTheme} onto `previous` (falling back to
+ * {@link DEFAULT_BAR_CHART_THEME} on first resolution), fully resolving every
+ * leaf so the tween below always has resolved data to interpolate.
+ */
+export declare function resolveBarChartTheme(theme: BarChartTheme | undefined, previous?: BarChartConfig): BarChartConfig;
+/** {@link BarChart}'s `theme` @property tween — leaf by leaf. */
+export declare function lerpBarChartTheme(from: BarChartConfig, to: BarChartConfig, t: number): BarChartConfig;
+/** The paint series `index` is drawn in: its own override, else the palette's entry. */
+export declare function resolveBarFill(palette: Fill[], series: BarSeries, index: number): Fill;
+//# sourceMappingURL=shared.d.ts.map

package/dist/bar-chart/shared.d.ts.map

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

package/dist/bar-chart/shared.js

@@ -0,0 +1,182 @@
+/**
+ * Types and pure helpers specific to the {@link BarChart} family: how a row's
+ * values become the spans its columns cover, how the value axis is scaled around
+ * them, and the theme the bars add to the shared chart vocabulary.
+ *
+ * Everything a line or a pie chart would want too — what a series is, the axis
+ * domain model, the theme leaf resolvers, the legend and plot-panel branches —
+ * lives in `nodes/chart-kit/shared.ts` and is imported here.
+ *
+ * Kept renderer-agnostic (no `Node` imports) so the studio's inspector mapping
+ * (`bar-chart-props.ts`) can build a partial {@link BarChartTheme} without
+ * pulling the node classes in.
+ */
+import { fillOps, lerpNumber, shadowOps, strokeOps, textOps, } from "@motionscript/core";
+import { CHART_PALETTE, DEFAULT_LEGEND, DEFAULT_PLOT_AREA, DEFAULT_SERIES_FILLS, DEFAULT_X_AXIS, DEFAULT_Y_AXIS, SPOTLIGHT_DIM, lerpAxisConfig, lerpLegendConfig, lerpPlotArea, lerpSeriesFills, niceStep, num, resolveAxisConfig, resolveLegendConfig, resolvePlotArea, resolveSeriesFills, text, } from "../kit/shared.js";
+/**
+ * The spans one row's bars cover, one per series, in series order.
+ *
+ * Stacking is a running sum in the order the series are listed, which is also
+ * the order they're drawn: series 0 sits on the baseline and each later one
+ * rides on what's below it. A zero-valued series still yields a (degenerate)
+ * span so the returned list stays index-aligned with the series list.
+ */
+export function barSpans(row, series, stacked) {
+    let running = 0;
+    return series.map((s) => {
+        const value = num(row, s.field);
+        if (!stacked)
+            return { from: 0, to: value, value };
+        const from = running;
+        running += value;
+        return { from, to: running, value };
+    });
+}
+/**
+ * The index of the series whose segment ends a row's stack — the one that gets
+ * the rounded cap, so a stack reads as one capped column rather than a pile of
+ * separate boxes. `-1` when every value in the row is zero.
+ *
+ * Read off the *last non-zero* series rather than the last one listed, so a
+ * series that happens to be 0 in this row doesn't take the cap and leave the
+ * segment below it square.
+ */
+export function stackCapIndex(row, series) {
+    let last = -1;
+    for (let i = 0; i < series.length; i++) {
+        if (num(row, series[i].field) !== 0)
+            last = i;
+    }
+    return last;
+}
+/** The captions beneath the baseline: one per row, read off the category column. */
+export function barCategories(data, field) {
+    return data.map((row) => text(row, field));
+}
+/**
+ * The `[min, max]` of everything the chart draws, **zero always included**.
+ *
+ * Zero is in the range whatever the data says, because a bar chart's baseline is
+ * zero: a scale starting at 40 draws a column three times its neighbour for a
+ * 10% difference, which is the classic way to lie with one. A chart that really
+ * does want a cropped axis says so with an explicit range.
+ */
+export function barValueExtent(data, series, stacked) {
+    let lo = 0;
+    let hi = 0;
+    for (const row of data) {
+        for (const span of barSpans(row, series, stacked)) {
+            lo = Math.min(lo, span.from, span.to);
+            hi = Math.max(hi, span.from, span.to);
+        }
+    }
+    return lo < hi ? [lo, hi] : [0, 1];
+}
+/**
+ * Effective value scale: the explicit `range`, else the data's extent nudged out
+ * to tidy step bounds so the markers read as round numbers.
+ *
+ * `divisions` is how many segments the auto-range is stepped into (one fewer
+ * than the marker count), so the ticks the axis draws land on the bounds this
+ * picks.
+ */
+export function resolveBarScale(data, series, stacked, range, divisions) {
+    if (range)
+        return range;
+    const [lo, hi] = barValueExtent(data, series, stacked);
+    const segments = Math.max(1, Math.round(divisions));
+    const step = niceStep((hi - lo) / segments || 1);
+    return [Math.floor(lo / step) * step, Math.ceil(hi / step) * step];
+}
+/** The bar chart's out-of-the-box look. */
+export const DEFAULT_BAR_CHART_THEME = {
+    seriesFills: DEFAULT_SERIES_FILLS,
+    bar: {
+        cornerRadius: 6,
+        slotFill: 0.72,
+        groupGap: 6,
+        stroke: [],
+        shadow: [],
+    },
+    // A category axis names its slots, so its captions are set like a caption
+    // rather than like a numeric marker: same size, less weight than the line
+    // chart's ticks, and centred on the slot.
+    xAxis: {
+        ...DEFAULT_X_AXIS,
+        labelStyle: { ...DEFAULT_X_AXIS.labelStyle, fontWeight: 600 },
+        tickPadding: 16,
+    },
+    yAxis: DEFAULT_Y_AXIS,
+    plotArea: DEFAULT_PLOT_AREA,
+    legend: DEFAULT_LEGEND,
+    valueStyle: {
+        fontSize: 24,
+        fontWeight: 700,
+        textAlign: "center",
+        fill: CHART_PALETTE.markerColor,
+    },
+    spotlight: { dimOpacity: SPOTLIGHT_DIM },
+};
+function resolveBarStyle(bar, previous) {
+    return {
+        cornerRadius: bar?.cornerRadius ?? previous.cornerRadius,
+        slotFill: bar?.slotFill ?? previous.slotFill,
+        groupGap: bar?.groupGap ?? previous.groupGap,
+        stroke: strokeOps.resolve(bar?.stroke ?? previous.stroke),
+        shadow: shadowOps.resolve(bar?.shadow ?? previous.shadow),
+    };
+}
+function lerpBarStyle(from, to, t) {
+    return {
+        cornerRadius: lerpNumber(from.cornerRadius, to.cornerRadius, t),
+        slotFill: lerpNumber(from.slotFill, to.slotFill, t),
+        groupGap: lerpNumber(from.groupGap, to.groupGap, t),
+        stroke: strokeOps.lerp(from.stroke, to.stroke, t),
+        shadow: shadowOps.lerp(from.shadow, to.shadow, t),
+    };
+}
+/**
+ * {@link BarChart}'s `theme` @property mapper: merges the author's partial
+ * {@link BarChartTheme} onto `previous` (falling back to
+ * {@link DEFAULT_BAR_CHART_THEME} on first resolution), fully resolving every
+ * leaf so the tween below always has resolved data to interpolate.
+ */
+export function resolveBarChartTheme(theme, previous) {
+    const base = previous ?? DEFAULT_BAR_CHART_THEME;
+    return {
+        seriesFills: resolveSeriesFills(theme?.seriesFills, base.seriesFills),
+        bar: resolveBarStyle(theme?.bar, base.bar),
+        xAxis: resolveAxisConfig(theme?.xAxis, base.xAxis),
+        yAxis: resolveAxisConfig(theme?.yAxis, base.yAxis),
+        plotArea: resolvePlotArea(theme?.plotArea, base.plotArea),
+        legend: resolveLegendConfig(theme?.legend, base.legend),
+        valueStyle: textOps.resolveStyle(theme?.valueStyle, base.valueStyle),
+        spotlight: {
+            dimOpacity: theme?.spotlight?.dimOpacity ?? base.spotlight.dimOpacity,
+        },
+    };
+}
+/** {@link BarChart}'s `theme` @property tween — leaf by leaf. */
+export function lerpBarChartTheme(from, to, t) {
+    return {
+        seriesFills: lerpSeriesFills(from.seriesFills, to.seriesFills, t),
+        bar: lerpBarStyle(from.bar, to.bar, t),
+        xAxis: lerpAxisConfig(from.xAxis, to.xAxis, t),
+        yAxis: lerpAxisConfig(from.yAxis, to.yAxis, t),
+        plotArea: lerpPlotArea(from.plotArea, to.plotArea, t),
+        legend: lerpLegendConfig(from.legend, to.legend, t),
+        valueStyle: textOps.lerpStyle(from.valueStyle, to.valueStyle, t),
+        spotlight: {
+            dimOpacity: lerpNumber(from.spotlight.dimOpacity, to.spotlight.dimOpacity, t),
+        },
+    };
+}
+/** The paint series `index` is drawn in: its own override, else the palette's entry. */
+export function resolveBarFill(palette, series, index) {
+    if (series.fill != null)
+        return fillOps.resolve(series.fill);
+    if (palette.length === 0)
+        return "white";
+    return palette[index % palette.length];
+}
+//# sourceMappingURL=shared.js.map