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

package/src/engine.ts

@@ -1,26 +1,26 @@
-/**
- * The chart **kit**: everything the three charts share, and the one thing a
- * copied chart does not copy.
- *
- * `ms add line-chart` writes `line-chart/*` into your project and rewrites its
- * reach for these to `@motionscript/charts`, so the plot panel, the value
- * axis, the legend and the number formatting stay a real dependency. That is
- * not a size decision — it is the only arrangement that works.
- *
- * A chart identifies its own parts, and the engine keys signal machinery to
- * class identity: `@property` installs against the class it was applied with,
- * and the renderer asks `instanceof` about what it is drawing. Copy
- * `VerticalAxis` alongside your fork and there are now two of it — two classes
- * answering one name, and whichever one your chart did not get renders as
- * nothing at all, with no error. Keeping the kit external makes that
- * impossible rather than unlikely.
- *
- * It also means a fix to the axis reaches a forked chart without a re-add,
- * which is the half of the bargain you get back for it.
- */
-export * from "./kit/shared"
-export * from "./kit/chart-border"
-export * from "./kit/chart-canvas"
-export * from "./kit/chart-legend"
-export * from "./kit/vertical-axis"
-export * from "@motionscript/sdk/component"
+/**
+ * The chart **kit**: everything the three charts share, and the one thing a
+ * copied chart does not copy.
+ *
+ * `ms add line-chart` writes `line-chart/*` into your project and rewrites its
+ * reach for these to `@motionscript/charts`, so the plot panel, the value
+ * axis, the legend and the number formatting stay a real dependency. That is
+ * not a size decision — it is the only arrangement that works.
+ *
+ * A chart identifies its own parts, and the engine keys signal machinery to
+ * class identity: `@property` installs against the class it was applied with,
+ * and the renderer asks `instanceof` about what it is drawing. Copy
+ * `VerticalAxis` alongside your fork and there are now two of it — two classes
+ * answering one name, and whichever one your chart did not get renders as
+ * nothing at all, with no error. Keeping the kit external makes that
+ * impossible rather than unlikely.
+ *
+ * It also means a fix to the axis reaches a forked chart without a re-add,
+ * which is the half of the bargain you get back for it.
+ */
+export * from "./kit/shared"
+export * from "./kit/chart-border"
+export * from "./kit/chart-canvas"
+export * from "./kit/chart-legend"
+export * from "./kit/vertical-axis"
+export * from "@motionscript/sdk/component"

package/src/index.ts

@@ -1,5 +1,5 @@
-export * from "./line-chart";
-export * from "./bar-chart";
-export * from "./pie-chart";
-export * from "./engine";
-export { NODES } from "./nodes";
+export * from "./line-chart";
+export * from "./bar-chart";
+export * from "./pie-chart";
+export * from "./engine";
+export { NODES } from "./nodes";

package/src/kit/chart-border.ts

@@ -1,61 +1,61 @@
-import {
-  type AssetScope,
-  Graphics2D,
-  Node2D,
-  strokeOps,
-  property,
-  type Node2DProps,
-  type RenderContext2D,
-  type Stroke,
-} from "@motionscript/sdk"
-
-import { DEFAULT_PLOT_AREA } from "./shared"
-import { declarePaints } from "@motionscript/sdk/component"
-
-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 allocated `layoutBounds`.
- *
- * 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 class ChartBorder extends Node2D<ChartBorderProps> {
-  @property({
-    default: DEFAULT_PLOT_AREA.stroke,
-    mapper: strokeOps.resolve,
-    tween: strokeOps.lerp,
-  })
-  declare stroke: Stroke
-
-  /**
-   * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
-   * paint props it carries — see {@link declarePaints}.
-   */
-  override declareAssets(assets: AssetScope): void {
-    super.declareAssets(assets)
-    declarePaints(this, assets)
-  }
-
-  protected renderSelf(ctx: RenderContext2D): void {
-    const W = this.layoutBounds.width
-    const H = this.layoutBounds.height
-    if (W <= 0 || H <= 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: W, height: H }).stroke(this.stroke)
-    )
-  }
-}
+import {
+  type AssetScope,
+  Graphics2D,
+  Node2D,
+  strokeOps,
+  property,
+  type Node2DProps,
+  type RenderContext2D,
+  type Stroke,
+} from "@motionscript/sdk"
+
+import { DEFAULT_PLOT_AREA } from "./shared"
+import { declarePaints } from "@motionscript/sdk/component"
+
+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 allocated `layoutBounds`.
+ *
+ * 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 class ChartBorder extends Node2D<ChartBorderProps> {
+  @property({
+    default: DEFAULT_PLOT_AREA.stroke,
+    mapper: strokeOps.resolve,
+    tween: strokeOps.lerp,
+  })
+  declare stroke: Stroke
+
+  /**
+   * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
+   * paint props it carries — see {@link declarePaints}.
+   */
+  override declareAssets(assets: AssetScope): void {
+    super.declareAssets(assets)
+    declarePaints(this, assets)
+  }
+
+  protected renderSelf(ctx: RenderContext2D): void {
+    const W = this.layoutBounds.width
+    const H = this.layoutBounds.height
+    if (W <= 0 || H <= 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: W, height: H }).stroke(this.stroke)
+    )
+  }
+}

package/src/kit/chart-canvas.ts

@@ -1,157 +1,157 @@
-import {
-  type AssetScope,
-  Graphics2D,
-  Node2D,
-  fillOps,
-  shadowOps,
-  strokeOps,
-  property,
-  type Fill,
-  type Node2DProps,
-  type RenderContext2D,
-  type Shadow,
-  type Stroke,
-  type StrokeResolved,
-} from "@motionscript/sdk"
-
-import {
-  DEFAULT_PLOT_AREA,
-  DEFAULT_X_AXIS,
-  DEFAULT_Y_AXIS,
-  type Range,
-} from "./shared"
-import { declarePaints } from "@motionscript/sdk/component"
-
-export interface ChartCanvasProps extends Node2DProps {
-  /** Fill of the plot panel behind the marks. */
-  fill: Fill
-  /** Drop shadow of the panel. Default none. */
-  shadow: Shadow
-  /** Stroke of the vertical grid lines (one per {@link xMarkers}). */
-  xGridStroke: Stroke
-  /** Stroke of the horizontal grid lines (one per {@link yMarkers}). */
-  yGridStroke: Stroke
-  /**
-   * Data-unit x positions to draw a vertical grid line at — one per horizontal
-   * axis marker, so a line lands under every marker regardless of spacing.
-   * Positions at (or past) an {@link xExtent} edge coincide with the border and
-   * are skipped. Pass an empty list for a chart whose horizontal axis is
-   * categorical and so has no numeric position to rule at.
-   */
-  xMarkers: number[]
-  /** Data-unit y positions to draw a horizontal grid line at. */
-  yMarkers: number[]
-  /** `[min, max]` of the horizontal scale — maps {@link xMarkers} into the panel. */
-  xExtent: Range
-  /** `[min, max]` of the vertical scale — maps {@link yMarkers} into the panel. */
-  yExtent: Range
-}
-
-/**
- * The plot **backdrop** of a cartesian chart: a filled panel with a grid of
- * faint lines spanning both directions across it. Drawn as one {@link Graphics2D}
- * command list, sized from its allocated `layoutBounds` and centred on the node
- * origin.
- *
- * The thick frame is a **separate** {@link ChartBorder} node so it can be drawn
- * *over* the marks while this panel sits under them. Grid lines are placed from
- * the axis marker positions (in data units) mapped into the panel through
- * {@link ChartCanvasProps.xExtent}/`yExtent` — so each line lands under its
- * marker whether or not the markers are evenly spaced.
- */
-export class ChartCanvas extends Node2D<ChartCanvasProps> {
-  @property({
-    default: DEFAULT_PLOT_AREA.fill,
-    mapper: fillOps.resolve,
-    tween: fillOps.lerp,
-  })
-  declare fill: Fill
-  @property({
-    default: DEFAULT_PLOT_AREA.shadow,
-    mapper: shadowOps.resolve,
-    tween: shadowOps.lerp,
-  })
-  declare shadow: Shadow
-  @property({
-    default: DEFAULT_X_AXIS.lineStyle,
-    mapper: strokeOps.resolve,
-    tween: strokeOps.lerp,
-  })
-  declare xGridStroke: Stroke
-  @property({
-    default: DEFAULT_Y_AXIS.lineStyle,
-    mapper: strokeOps.resolve,
-    tween: strokeOps.lerp,
-  })
-  declare yGridStroke: Stroke
-  @property({ default: () => [] as number[] }) declare xMarkers: number[]
-  @property({ default: () => [] as number[] }) declare yMarkers: number[]
-  @property({ default: () => [0, 1] as Range }) declare xExtent: Range
-  @property({ default: () => [0, 1] as Range }) declare yExtent: Range
-
-  /**
-   * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
-   * paint props it carries — see {@link declarePaints}. The grid strokes are
-   * named past the conventional slots, so they are passed explicitly.
-   */
-  override declareAssets(assets: AssetScope): void {
-    super.declareAssets(assets)
-    declarePaints(this, assets, {
-      strokes: [this.xGridStroke as StrokeResolved[], this.yGridStroke as StrokeResolved[]],
-    })
-  }
-
-  protected renderSelf(ctx: RenderContext2D): void {
-    const W = this.layoutBounds.width
-    const H = this.layoutBounds.height
-    if (W <= 0 || H <= 0) return
-
-    // Plot panel, centred on the origin (node space is y-up, origin centre).
-    ctx.draw(
-      new Graphics2D()
-        .rect({ x: 0, y: 0, width: W, height: H })
-        .shadow(this.shadow)
-        .fill(this.fill)
-    )
-
-    const [xMin, xMax] = this.xExtent
-    const [yMin, yMax] = this.yExtent
-    // Fraction of a marker across its extent; guard a zero-width extent.
-    const xFrac = (v: number) => (xMax <= xMin ? 0 : (v - xMin) / (xMax - xMin))
-    const yFrac = (v: number) => (yMax <= yMin ? 0 : (v - yMin) / (yMax - yMin))
-    // Skip markers landing on (or outside) the edges — they'd sit under the border.
-    const interior = (f: number) => f > 1e-6 && f < 1 - 1e-6
-
-    const xStroke = (this.xGridStroke as StrokeResolved[])[0]
-    if (xStroke) {
-      const xGrid = new Graphics2D()
-      for (const v of this.xMarkers) {
-        const f = xFrac(v)
-        if (!interior(f)) continue
-        xGrid.rect({
-          x: -W / 2 + f * W,
-          y: 0,
-          width: xStroke.weight,
-          height: H,
-        })
-      }
-      ctx.draw(xGrid.fill(xStroke.fill))
-    }
-
-    const yStroke = (this.yGridStroke as StrokeResolved[])[0]
-    if (yStroke) {
-      const yGrid = new Graphics2D()
-      for (const v of this.yMarkers) {
-        const f = yFrac(v)
-        if (!interior(f)) continue
-        yGrid.rect({
-          x: 0,
-          y: -H / 2 + f * H,
-          width: W,
-          height: yStroke.weight,
-        })
-      }
-      ctx.draw(yGrid.fill(yStroke.fill))
-    }
-  }
-}
+import {
+  type AssetScope,
+  Graphics2D,
+  Node2D,
+  fillOps,
+  shadowOps,
+  strokeOps,
+  property,
+  type Fill,
+  type Node2DProps,
+  type RenderContext2D,
+  type Shadow,
+  type Stroke,
+  type StrokeResolved,
+} from "@motionscript/sdk"
+
+import {
+  DEFAULT_PLOT_AREA,
+  DEFAULT_X_AXIS,
+  DEFAULT_Y_AXIS,
+  type Range,
+} from "./shared"
+import { declarePaints } from "@motionscript/sdk/component"
+
+export interface ChartCanvasProps extends Node2DProps {
+  /** Fill of the plot panel behind the marks. */
+  fill: Fill
+  /** Drop shadow of the panel. Default none. */
+  shadow: Shadow
+  /** Stroke of the vertical grid lines (one per {@link xMarkers}). */
+  xGridStroke: Stroke
+  /** Stroke of the horizontal grid lines (one per {@link yMarkers}). */
+  yGridStroke: Stroke
+  /**
+   * Data-unit x positions to draw a vertical grid line at — one per horizontal
+   * axis marker, so a line lands under every marker regardless of spacing.
+   * Positions at (or past) an {@link xExtent} edge coincide with the border and
+   * are skipped. Pass an empty list for a chart whose horizontal axis is
+   * categorical and so has no numeric position to rule at.
+   */
+  xMarkers: number[]
+  /** Data-unit y positions to draw a horizontal grid line at. */
+  yMarkers: number[]
+  /** `[min, max]` of the horizontal scale — maps {@link xMarkers} into the panel. */
+  xExtent: Range
+  /** `[min, max]` of the vertical scale — maps {@link yMarkers} into the panel. */
+  yExtent: Range
+}
+
+/**
+ * The plot **backdrop** of a cartesian chart: a filled panel with a grid of
+ * faint lines spanning both directions across it. Drawn as one {@link Graphics2D}
+ * command list, sized from its allocated `layoutBounds` and centred on the node
+ * origin.
+ *
+ * The thick frame is a **separate** {@link ChartBorder} node so it can be drawn
+ * *over* the marks while this panel sits under them. Grid lines are placed from
+ * the axis marker positions (in data units) mapped into the panel through
+ * {@link ChartCanvasProps.xExtent}/`yExtent` — so each line lands under its
+ * marker whether or not the markers are evenly spaced.
+ */
+export class ChartCanvas extends Node2D<ChartCanvasProps> {
+  @property({
+    default: DEFAULT_PLOT_AREA.fill,
+    mapper: fillOps.resolve,
+    tween: fillOps.lerp,
+  })
+  declare fill: Fill
+  @property({
+    default: DEFAULT_PLOT_AREA.shadow,
+    mapper: shadowOps.resolve,
+    tween: shadowOps.lerp,
+  })
+  declare shadow: Shadow
+  @property({
+    default: DEFAULT_X_AXIS.lineStyle,
+    mapper: strokeOps.resolve,
+    tween: strokeOps.lerp,
+  })
+  declare xGridStroke: Stroke
+  @property({
+    default: DEFAULT_Y_AXIS.lineStyle,
+    mapper: strokeOps.resolve,
+    tween: strokeOps.lerp,
+  })
+  declare yGridStroke: Stroke
+  @property({ default: () => [] as number[] }) declare xMarkers: number[]
+  @property({ default: () => [] as number[] }) declare yMarkers: number[]
+  @property({ default: () => [0, 1] as Range }) declare xExtent: Range
+  @property({ default: () => [0, 1] as Range }) declare yExtent: Range
+
+  /**
+   * This node extends `Node2D` rather than `ShapeNode`, so nothing declares the
+   * paint props it carries — see {@link declarePaints}. The grid strokes are
+   * named past the conventional slots, so they are passed explicitly.
+   */
+  override declareAssets(assets: AssetScope): void {
+    super.declareAssets(assets)
+    declarePaints(this, assets, {
+      strokes: [this.xGridStroke as StrokeResolved[], this.yGridStroke as StrokeResolved[]],
+    })
+  }
+
+  protected renderSelf(ctx: RenderContext2D): void {
+    const W = this.layoutBounds.width
+    const H = this.layoutBounds.height
+    if (W <= 0 || H <= 0) return
+
+    // Plot panel, centred on the origin (node space is y-up, origin centre).
+    ctx.draw(
+      new Graphics2D()
+        .rect({ x: 0, y: 0, width: W, height: H })
+        .shadow(this.shadow)
+        .fill(this.fill)
+    )
+
+    const [xMin, xMax] = this.xExtent
+    const [yMin, yMax] = this.yExtent
+    // Fraction of a marker across its extent; guard a zero-width extent.
+    const xFrac = (v: number) => (xMax <= xMin ? 0 : (v - xMin) / (xMax - xMin))
+    const yFrac = (v: number) => (yMax <= yMin ? 0 : (v - yMin) / (yMax - yMin))
+    // Skip markers landing on (or outside) the edges — they'd sit under the border.
+    const interior = (f: number) => f > 1e-6 && f < 1 - 1e-6
+
+    const xStroke = (this.xGridStroke as StrokeResolved[])[0]
+    if (xStroke) {
+      const xGrid = new Graphics2D()
+      for (const v of this.xMarkers) {
+        const f = xFrac(v)
+        if (!interior(f)) continue
+        xGrid.rect({
+          x: -W / 2 + f * W,
+          y: 0,
+          width: xStroke.weight,
+          height: H,
+        })
+      }
+      ctx.draw(xGrid.fill(xStroke.fill))
+    }
+
+    const yStroke = (this.yGridStroke as StrokeResolved[])[0]
+    if (yStroke) {
+      const yGrid = new Graphics2D()
+      for (const v of this.yMarkers) {
+        const f = yFrac(v)
+        if (!interior(f)) continue
+        yGrid.rect({
+          x: 0,
+          y: -H / 2 + f * H,
+          width: W,
+          height: yStroke.weight,
+        })
+      }
+      ctx.draw(yGrid.fill(yStroke.fill))
+    }
+  }
+}