@motionscript/charts 0.1.0-alpha.6 → 0.1.0-alpha.7

package/src/line-chart/chart-region.ts

@@ -9,7 +9,6 @@ import {
   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"
@@ -23,29 +22,10 @@ import {
   type RegionBox,
 } from "./shared"
 
-export interface ChartRegionProps extends Node2DProps {
-  /**
-   * The highlighted slice, already resolved into this node's local pixel space
-   * (origin at centre, y-up) by the parent {@link LineChart}. A degenerate box
-   * draws nothing.
-   */
-  box: RegionBox
-  /** Dashed rule marking each *bounded* edge of the box. */
-  stroke: Stroke
-  /** Wash filling the box, under the series lines. */
-  fill: Fill
-  /**
-   * Reveal of the annotation in `[0, 1]`: 0 hides it, 1 draws it fully. Driven
-   * by the chart's own `regionReveal`, so the rules and the series' dimming move
-   * as one.
-   */
-  reveal: number
-}
-
 /**
  * The **region call-out** of a {@link LineChart}: a washed rectangle over the
  * plot with a dashed rule down each edge the author actually bounded. Sized and
- * positioned entirely from the pre-mapped {@link ChartRegionProps.box} rather
+ * positioned entirely from the pre-mapped `box` rather
  * than its own box — the region already carries the plot geometry.
  *
  * It draws only the *marking*; fading the series outside the region is
@@ -59,9 +39,13 @@ export interface ChartRegionProps extends Node2DProps {
 export const ChartRegion = component2d({
   key: "chartRegion",
   state: {
+    /** The highlighted slice, already resolved into this node's local pixel space (origin at centre, y-up) by the parent {@link LineChart}. A degenerate box draws nothing. */
     box: fresh<RegionBox>(() => EMPTY_REGION_BOX),
+    /** Dashed rule marking each *bounded* edge of the box. */
     stroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_CHART_THEME.region.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
+    /** Wash filling the box, under the series lines. */
     fill: Types.custom<Fill, FillResolved[]>(DEFAULT_CHART_THEME.region.fill, { resolve: fillOps.resolve, lerp: fillOps.lerp }),
+    /** Reveal of the annotation in `[0, 1]`, driven by the chart's own `regionReveal` so the rules and the series' dimming move as one. */
     reveal: 0,
   },
   load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.stroke] }),

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

@@ -7,7 +7,6 @@ import {
   textOps,
   type NodeOf,
   type Node2D,
-  type Node2DProps,
 } from "@motionscript/sdk";
 
 import { asParts, fresh } from "../kit/entries";
@@ -20,32 +19,9 @@ import {
 } from "../kit/shared";
 import { markerCaption } from "../kit/vertical-axis";
 
-export interface HorizontalAxisProps extends Node2DProps {
-  /** `[min, max]` of the horizontal scale the markers are positioned within. */
-  range: Range;
-  /** Tick values (in data units) to draw along the axis. */
-  markers: 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: string[];
-  /** Marker/caption text style, grid stroke, and gutters — see {@link AxisConfig}. */
-  axis: AxisConfig;
-  /**
-   * Caption drawn centred in the gutter beneath the marker row. Empty string
-   * (the default) hides it.
-   */
-  label: string;
-}
-
 /** How far a marker starts above its slot when it enters, in px. */
 const SLIDE = 24;
 
-/** How a tick value is captioned — see {@link HorizontalAxisProps.captions}. */
-export type MarkerLabel = (value: number) => string;
-
 /**
  * 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
@@ -56,7 +32,7 @@ export type MarkerLabel = (value: number) => string;
  * `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; see {@link HorizontalAxisProps.captions}.
+ * 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.
@@ -64,10 +40,19 @@ export type MarkerLabel = (value: number) => string;
 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(),
   },

package/src/pie-chart/shared.ts

@@ -442,7 +442,7 @@ function lerpCenterConfig(
 }
 
 /**
- * {@link PieChart}'s `theme` @property mapper: merges the author's partial
+ * {@link PieChart}'s `theme` property mapper: merges the author's partial
  * {@link PieChartTheme} onto `previous` (falling back to
  * {@link DEFAULT_PIE_CHART_THEME} on first resolution), fully resolving every
  * leaf so the tween below always has resolved data to interpolate.
@@ -464,7 +464,7 @@ export function resolvePieChartTheme(
   }
 }
 
-/** {@link PieChart}'s `theme` @property tween — leaf by leaf. */
+/** {@link PieChart}'s `theme` property tween — leaf by leaf. */
 export function lerpPieChartTheme(
   from: PieChartConfig,
   to: PieChartConfig,