@motionscript/charts 0.1.0-alpha.3 → 0.1.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +63 -0
- package/LICENSE +201 -201
- package/NOTICE +48 -0
- package/README.md +99 -0
- package/dist/bar-chart/bar-chart.d.ts +93 -231
- package/dist/bar-chart/bar-chart.d.ts.map +1 -1
- package/dist/bar-chart/bar-chart.js +378 -565
- package/dist/bar-chart/bar-chart.js.map +1 -1
- package/dist/bar-chart/category-axis.d.ts +24 -41
- package/dist/bar-chart/category-axis.d.ts.map +1 -1
- package/dist/bar-chart/category-axis.js +93 -115
- package/dist/bar-chart/category-axis.js.map +1 -1
- package/dist/bar-chart/chart-bars.d.ts +36 -70
- package/dist/bar-chart/chart-bars.d.ts.map +1 -1
- package/dist/bar-chart/chart-bars.js +156 -210
- package/dist/bar-chart/chart-bars.js.map +1 -1
- package/dist/bar-chart/index.d.ts +2 -2
- package/dist/bar-chart/index.d.ts.map +1 -1
- package/dist/bar-chart/index.js +1 -1
- package/dist/bar-chart/index.js.map +1 -1
- package/dist/bar-chart/shared.d.ts +6 -6
- package/dist/bar-chart/shared.d.ts.map +1 -1
- package/dist/bar-chart/shared.js +6 -6
- package/dist/bar-chart/shared.js.map +1 -1
- package/dist/browser/chunks/chunk-XROBIRQK.js +2 -0
- package/dist/browser/chunks/chunk-XROBIRQK.js.map +7 -0
- package/dist/browser/index.js +1 -1
- package/dist/browser/index.js.map +3 -3
- package/dist/browser/kit.js +1 -1
- package/dist/browser/manifest.json +3 -2
- package/dist/engine.d.ts +8 -6
- package/dist/engine.d.ts.map +1 -1
- package/dist/engine.js +8 -6
- package/dist/engine.js.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/kit/cartesian.d.ts +44 -0
- package/dist/kit/cartesian.d.ts.map +1 -0
- package/dist/kit/cartesian.js +59 -0
- package/dist/kit/cartesian.js.map +1 -0
- package/dist/kit/chart-border.d.ts +8 -11
- package/dist/kit/chart-border.d.ts.map +1 -1
- package/dist/kit/chart-border.js +15 -32
- package/dist/kit/chart-border.js.map +1 -1
- package/dist/kit/chart-canvas.d.ts +23 -21
- package/dist/kit/chart-canvas.d.ts.map +1 -1
- package/dist/kit/chart-canvas.js +33 -90
- package/dist/kit/chart-canvas.js.map +1 -1
- package/dist/kit/chart-legend.d.ts +79 -88
- package/dist/kit/chart-legend.d.ts.map +1 -1
- package/dist/kit/chart-legend.js +137 -186
- package/dist/kit/chart-legend.js.map +1 -1
- package/dist/kit/entries.d.ts +17 -0
- package/dist/kit/entries.d.ts.map +1 -0
- package/dist/kit/entries.js +19 -0
- package/dist/kit/entries.js.map +1 -0
- package/dist/kit/motion.d.ts +48 -0
- package/dist/kit/motion.d.ts.map +1 -0
- package/dist/kit/motion.js +63 -0
- package/dist/kit/motion.js.map +1 -0
- package/dist/kit/paints.d.ts +10 -0
- package/dist/kit/paints.d.ts.map +1 -0
- package/dist/kit/paints.js +12 -0
- package/dist/kit/paints.js.map +1 -0
- package/dist/kit/shared.d.ts +59 -8
- package/dist/kit/shared.d.ts.map +1 -1
- package/dist/kit/shared.js +105 -10
- package/dist/kit/shared.js.map +1 -1
- package/dist/kit/vertical-axis.d.ts +36 -61
- package/dist/kit/vertical-axis.d.ts.map +1 -1
- package/dist/kit/vertical-axis.js +97 -132
- package/dist/kit/vertical-axis.js.map +1 -1
- package/dist/line-chart/chart-line.d.ts +27 -53
- package/dist/line-chart/chart-line.d.ts.map +1 -1
- package/dist/line-chart/chart-line.js +89 -120
- package/dist/line-chart/chart-line.js.map +1 -1
- package/dist/line-chart/chart-region.d.ts +14 -14
- package/dist/line-chart/chart-region.d.ts.map +1 -1
- package/dist/line-chart/chart-region.js +26 -64
- package/dist/line-chart/chart-region.js.map +1 -1
- package/dist/line-chart/horizontal-axis.d.ts +32 -56
- package/dist/line-chart/horizontal-axis.d.ts.map +1 -1
- package/dist/line-chart/horizontal-axis.js +85 -123
- package/dist/line-chart/horizontal-axis.js.map +1 -1
- package/dist/line-chart/index.d.ts +2 -2
- package/dist/line-chart/index.d.ts.map +1 -1
- package/dist/line-chart/index.js +1 -1
- package/dist/line-chart/index.js.map +1 -1
- package/dist/line-chart/line-chart.d.ts +111 -311
- package/dist/line-chart/line-chart.d.ts.map +1 -1
- package/dist/line-chart/line-chart.js +403 -639
- package/dist/line-chart/line-chart.js.map +1 -1
- package/dist/line-chart/shared.d.ts +6 -6
- package/dist/line-chart/shared.d.ts.map +1 -1
- package/dist/line-chart/shared.js +22 -7
- package/dist/line-chart/shared.js.map +1 -1
- package/dist/line-chart/x-scale.d.ts +1 -1
- package/dist/line-chart/x-scale.js +1 -1
- package/dist/line-chart/x-scale.js.map +1 -1
- package/dist/nodes.d.ts +6 -9
- package/dist/nodes.d.ts.map +1 -1
- package/dist/nodes.js +7 -9
- package/dist/nodes.js.map +1 -1
- package/dist/pie-chart/index.d.ts +2 -2
- package/dist/pie-chart/index.d.ts.map +1 -1
- package/dist/pie-chart/index.js +1 -1
- package/dist/pie-chart/index.js.map +1 -1
- package/dist/pie-chart/pie-chart.d.ts +77 -134
- package/dist/pie-chart/pie-chart.d.ts.map +1 -1
- package/dist/pie-chart/pie-chart.js +199 -268
- package/dist/pie-chart/pie-chart.js.map +1 -1
- package/dist/pie-chart/pie-legend.d.ts +54 -31
- package/dist/pie-chart/pie-legend.d.ts.map +1 -1
- package/dist/pie-chart/pie-legend.js +93 -107
- package/dist/pie-chart/pie-legend.js.map +1 -1
- package/dist/pie-chart/pie-ring.d.ts +142 -122
- package/dist/pie-chart/pie-ring.d.ts.map +1 -1
- package/dist/pie-chart/pie-ring.js +333 -361
- package/dist/pie-chart/pie-ring.js.map +1 -1
- package/dist/pie-chart/shared.d.ts +3 -3
- package/dist/pie-chart/shared.js +3 -3
- package/dist/pie-chart/shared.js.map +1 -1
- package/package.json +6 -5
- package/registry.json +23 -23
- package/src/bar-chart/bar-chart.ts +534 -814
- package/src/bar-chart/category-axis.ts +162 -177
- package/src/bar-chart/chart-bars.ts +288 -310
- package/src/bar-chart/index.ts +31 -31
- package/src/bar-chart/shared.ts +354 -354
- package/src/engine.ts +28 -26
- package/src/index.ts +5 -5
- package/src/kit/cartesian.ts +81 -0
- package/src/kit/chart-border.ts +50 -61
- package/src/kit/chart-canvas.ts +122 -157
- package/src/kit/chart-legend.ts +229 -250
- package/src/kit/entries.ts +20 -0
- package/src/kit/motion.ts +90 -0
- package/src/kit/paints.ts +15 -0
- package/src/kit/shared.ts +782 -675
- package/src/kit/vertical-axis.ts +194 -224
- package/src/line-chart/chart-line.ts +181 -208
- package/src/line-chart/chart-region.ts +106 -135
- package/src/line-chart/horizontal-axis.ts +166 -202
- package/src/line-chart/index.ts +39 -39
- package/src/line-chart/line-chart.ts +585 -929
- package/src/line-chart/shared.ts +473 -459
- package/src/line-chart/x-scale.ts +367 -367
- package/src/nodes.ts +18 -20
- package/src/pie-chart/index.ts +37 -37
- package/src/pie-chart/pie-chart.ts +293 -381
- package/src/pie-chart/pie-legend.ts +169 -159
- package/src/pie-chart/pie-ring.ts +848 -903
- package/src/pie-chart/shared.ts +490 -490
- package/dist/browser/chunks/chunk-RMHQ6GYU.js +0 -2
- package/dist/browser/chunks/chunk-RMHQ6GYU.js.map +0 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-legend.js","sourceRoot":"","sources":["../../src/kit/chart-legend.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Rect,\n Text,\n command,\n easeOut,\n property,\n textOps,\n type CommandArgs,\n type EasingFunction,\n type Fill,\n type NodeConfig,\n type RectProps,\n} from \"@motionscript/sdk\"\n\nimport { drive, hold, together, type Seekable } from \"@motionscript/sdk/component\"\n\nimport {\n DEFAULT_LEGEND,\n SPOTLIGHT_DIM,\n type ChartSeries,\n type LegendConfig,\n} from \"./shared\"\n\nexport interface ChartLegendProps extends RectProps {\n /**\n * One entry per series: legend `label`, its `enabled` default, and — through\n * {@link ChartLegendProps.swatches} — the colour its chip is painted. A series\n * that starts enabled (the default) is added to the row up front; one that\n * starts `false` is hidden until a later {@link ChartLegend.showSeries}.\n */\n series: ChartSeries[]\n /**\n * The swatch colour for each series, by index — resolved by the chart, whose\n * business it is whether a series' colour comes out of a stroke palette (a\n * line) or a fill palette (a bar). Shorter than the series list means the\n * missing entries fall back to white.\n */\n swatches: Fill[]\n /** Padding, caption style, gaps, and swatch geometry — see {@link LegendConfig}. */\n legend: LegendConfig\n}\n\n/**\n * The legend of a chart: a **horizontal-flow row of entries**, one per series, laid out\n * left-to-right with the theme's `itemGap`. Each entry pairs the series label\n * with a rounded colour swatch; only the swatch carries the series colour, the\n * caption reads in the legend's neutral ink.\n *\n * {@link showSeries}/{@link hideSeries} flip a series on or off — showing one\n * adds its entry back into the row at its stable series position and grows it\n * in, hiding one shrinks it away and removes it. So the row only ever holds the\n * currently-enabled series, in series order, and closes the gap when one leaves.\n *\n * This node *is* the row, so the parent places it (centred below the chart) and\n * it hugs its entries.\n */\nexport class ChartLegend extends Rect {\n @property({ default: () => [] as ChartSeries[] }) declare series: ChartSeries[]\n @property({ default: () => [] as Fill[] }) declare swatches: Fill[]\n @property({ default: DEFAULT_LEGEND }) declare legend: LegendConfig\n\n /** One entry per series. **Every** entry is a child — see {@link reveal}. */\n private items: Rect[] = []\n /**\n * How far each entry is shown, `0`–`1`. Drives its width, opacity and gap\n * together, so `0` is an entry that takes no room and `1` is one at its\n * natural size.\n *\n * This replaces adding and removing the entry from the row, which is what\n * `showSeries`/`hideSeries` used to do. That could not be a command: a command\n * is asked what it looks like at a time, and \"is this node a child\" is not a\n * value a time can produce — the tree either contains it or it doesn't, and\n * getting there means having run the add. Collapsed-but-present is the same\n * picture reached by a route that *is* a function of `t`.\n *\n * A plain array rather than reactive props because the count is the series\n * count, which is data. The entries' props are bound to it, so writing one\n * still moves the layout.\n */\n private reveal: number[] = []\n /**\n * Each entry's natural width, last time it was fully shown.\n *\n * A collapse needs numeric endpoints — `lerpSizeInput` snaps between a token\n * and a number rather than interpolating — and `\"hug\"` is not a number until\n * something measures it. Refreshed on every frame an entry is at full reveal\n * (see {@link widthFor}), so it is current by the time a hide starts, and it\n * tracks a relabelled series or a restyled legend without being told.\n */\n private natural: number[] = []\n\n constructor(props?: NodeConfig<ChartLegend, ChartLegendProps>) {\n // `flow` after the spread, with the rest of the geometry: this class *is*\n // the row, so the direction is its own answer and not the caller's. It has\n // to be stated — a `Rect` given no flow lays its children out `freeform`,\n // which stacks every entry on the same spot. One series looks perfect that\n // way and three look like one smeared caption, so the failure only shows up\n // on the charts that most need a legend.\n super({\n ...(props as RectProps),\n flow: \"horizontal\",\n align: \"center\",\n width: \"hug\",\n height: \"hug\",\n })\n\n // Structure is one entry per series, so it's composed here from the resolved\n // props super() applied. Fixed row geometry last, so it wins over super().\n this.set({ gap: this.legend.itemGap, padding: this.legend.padding })\n\n this.reveal = this.series.map((s) => ((s.enabled ?? true) ? 1 : 0))\n this.natural = this.series.map(() => 0)\n this.items = this.series.map((s, i) => this.buildItem(s, i))\n\n // All of them, in series order. Order is now fixed rather than depending on\n // which siblings happen to be shown, so an entry always comes back where it\n // belongs and `insertionIndex` has nothing left to compute.\n for (const item of this.items) this.add(item)\n }\n\n /**\n * An entry's width for its current reveal.\n *\n * `\"hug\"` at full reveal rather than the pinned number, so a shown entry stays\n * responsive to its own content; the number only takes over while it is\n * collapsing, which is the only time a token cannot express it.\n *\n * Records the natural width as a side effect, which is the honest place for it:\n * this runs inside a binding, so it is already reading the layout every frame,\n * and the value it wants is the one the layout just produced. It writes a plain\n * array rather than a signal, so nothing is invalidated by it.\n */\n private widthFor(index: number): number | \"hug\" {\n const shown = this.reveal[index] ?? 0\n if (shown >= 1) {\n const measured = this.items[index]?.measuredWidth ?? 0\n if (measured > 0) this.natural[index] = measured\n return \"hug\"\n }\n return shown * (this.natural[index] ?? 0)\n }\n\n /** One entry: the series caption beside its colour swatch. */\n private buildItem(series: ChartSeries, index: number): Rect {\n const marker = this.legend.markerStyle\n const item = new Rect({ flow: \"horizontal\",\n gap: 12,\n align: \"center\",\n // Bound to the reveal, so showing and hiding is a number moving rather\n // than a child arriving and leaving.\n width: () => this.widthFor(index),\n opacity: () => this.reveal[index] ?? 0,\n height: \"hug\",\n children: [\n new Text({\n ...textOps.styleProps(this.legend.textStyle),\n text: series.label,\n }),\n new Rect({\n width: marker.width,\n height: marker.height,\n cornerRadius: marker.borderRadius,\n fill: this.swatches[index] ?? \"white\",\n stroke: marker.stroke,\n shadow: marker.shadow,\n }),\n ],\n })\n // `gapScale` is a `Node` prop rather than a container one, so it is bound here\n // instead of in the config. It tracks the reveal so the flanking gap closes\n // with the entry rather than snapping when it reaches zero.\n item.set({ gapScale: () => this.reveal[index] ?? 0 })\n return item\n }\n\n /** True if series `index` is showing at all — see {@link reveal}. */\n isEnabled(index: number): boolean {\n return (this.reveal[index] ?? 0) > 0\n }\n\n /**\n * Grow series `index`'s entry back in at its series-order position, the\n * siblings sliding over to make room.\n *\n * A reveal tween rather than an animated `addChildAt`. The entry never left —\n * see {@link reveal} — so there is no add to have happened, and the whole\n * thing is a function of `t`.\n */\n @command()\n showSeries(args: CommandArgs<{ index: number }>): Seekable {\n const { index = 0 } = args.data ?? {}\n return this.revealTo(index, 1, args.duration ?? 0.35, args.easing ?? easeOut())\n }\n\n /**\n * Shrink series `index`'s entry away, the gap closing behind it — the mirror\n * of {@link showSeries}.\n */\n @command()\n hideSeries(args: CommandArgs<{ index: number }>): Seekable {\n const { index = 0 } = args.data ?? {}\n return this.revealTo(index, 0, args.duration ?? 0.35, args.easing ?? easeOut())\n }\n\n /**\n * Ramp one entry's reveal to `target`.\n *\n * `from` is read when the command is built, which for a driven scene is with\n * the node in the state its own start time implies — so a hide that follows a\n * show starts where the show left it rather than at whatever the node happens\n * to hold now.\n */\n private revealTo(\n index: number,\n target: number,\n duration: number,\n easing: EasingFunction\n ): Seekable {\n if (this.items[index] === undefined) return hold(duration)\n const from = this.reveal[index] ?? 0\n return drive(duration, (t) => {\n this.reveal[index] = from + (target - from) * easing(t)\n })\n }\n\n /**\n * Dim every entry but series `index` to {@link SPOTLIGHT_DIM} and bring that\n * one back to full — the legend half of a chart's `spotlightSeries`. Entries\n * stay in place; only their opacity moves, so the row doesn't reflow.\n *\n * Only the currently-shown entries are touched — a hidden series' entry is\n * left as {@link hideSeries} left it.\n */\n @command()\n spotlightSeries(args: CommandArgs<{ index: number }>): Seekable {\n const { index = 0 } = args.data ?? {}\n const duration = args.duration ?? 0.35\n const easing = args.easing ?? easeOut()\n // Opacity only, on entries that are already in the row — no membership\n // changes, so unlike {@link showSeries} this is a plain function of `t`.\n return together(\n ...this.items\n .map((item, i) => ({ item, i }))\n .filter(({ i }) => this.isEnabled(i))\n .map(({ item, i }) =>\n item.to({ data: { opacity: i === index ? 1 : SPOTLIGHT_DIM }, duration, easing })\n )\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"chart-legend.js","sourceRoot":"","sources":["../../src/kit/chart-legend.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,GAqBR,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EACL,cAAc,EACd,aAAa,GAGd,MAAM,UAAU,CAAA;AAqBjB,oFAAoF;AACpF,MAAM,GAAG,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,MAAM,CAAC,OAAO,EAAE,CAAA;AAEhE;;;;;;;;GAQG;AACH,MAAM,WAAW,GAAG,WAAW,CAAC;IAC9B,GAAG,EAAE,aAAa;IAClB,KAAK,EAAE,EAAE,GAAG,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;IACzC,QAAQ,EAAE,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE;IAC/B,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;QACrC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;QACxE,OAAO,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAA;IAC/E,CAAC;IACD,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvF,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;CAC7E,CAAC,CAAA;AAEF;;;;GAIG;AACH,SAAS,QAAQ,CAAC,KAA2D,EAAE,QAAmB;IAChG,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,KAAiB,CAAA;IAClD,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAA;IAClC,KAAK,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,MAAM,CAAA;IACjF,OAAO,IAAI,CAAA;AACb,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC;IACrC,GAAG,EAAE,aAAa;IAClB,KAAK,EAAE;QACL,GAAG,GAAG;QACN,MAAM,EAAE,KAAK,CAAgB,GAAG,EAAE,CAAC,EAAE,CAAC;QACtC,QAAQ,EAAE,KAAK,CAAS,GAAG,EAAE,CAAC,EAAE,CAAC;QACjC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAe,cAAc,CAAC;QAClD;;;;;;;;;WASG;QACH,MAAM,EAAE,KAAK,CAAwD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;KACtG;IACD,2EAA2E;IAC3E,0EAA0E;IAC1E,4EAA4E;IAC5E,QAAQ,EAAE;QACR,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;QACpC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;QACxC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAC1E;IACD,8EAA8E;IAC9E,gFAAgF;IAChF,sCAAsC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAClB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAA;QACvC,OAAO,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CACxC,WAAW,CAAC;YACV,IAAI,EAAE,YAAY;YAClB,GAAG,EAAE,EAAE;YACP,KAAK,EAAE,QAAQ;YACf,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,KAAK;YACb,uEAAuE;YACvE,wEAAwE;YACxE,mEAAmE;YACnE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC;YACvC,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC;YACxC,KAAK,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC;YACrC,QAAQ,EAAE;gBACR,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;gBAC3E,IAAI,CAAC;oBACH,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,MAAM,EAAE,MAAM,CAAC,MAAM;oBACrB,YAAY,EAAE,MAAM,CAAC,YAAY;oBACjC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,OAAO;oBACtC,MAAM,EAAE,MAAM,CAAC,MAAM;oBACrB,MAAM,EAAE,MAAM,CAAC,MAAM;iBACtB,CAAC;aACH;SACF,CAAC,CACH,CAAA;IACH,CAAC;IACD,QAAQ,EAAE;QACR,GAAG,KAAK,CAAC,QAAQ;QACjB;;;;WAIG;QACH,UAAU,EAAE;YACV,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE;YACrD,kEAAkE;YAClE,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM;gBAC5D,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACnF,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACtC;QACD,kGAAkG;QAClG,UAAU,EAAE;YACV,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE;YACrD,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM;gBAC5D,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACnF,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACtC;QACD;;;;;;WAMG;QACH,eAAe,EAAE;YACf,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE;YACrD,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,CACjC,QAAQ,CAAC,QAAQ,CACf,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAC5B,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CACzG,CACF;SACJ;KACF;IACD,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACnG,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvF,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;CAC7E,CAAC,CAAA;AAEF;;;GAGG;AACH,SAAS,WAAW,CAAC,KAA6C,EAAE,KAAa,EAAE,MAAc,EAAE,IAA2B;IAC5H,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IACrC,OAAO,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;AACnF,CAAC;AAED,4DAA4D;AAC5D,MAAM,UAAU,WAAW,CAAC,MAA8C,EAAE,KAAa;IACvF,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA;AACxC,CAAC","sourcesContent":["import {\r\n Flow,\r\n Paint,\r\n Rect,\r\n Shapes,\r\n Text,\r\n Types,\r\n component2d,\r\n textOps,\r\n type Fill,\r\n type NodeOf,\r\n type RectProps,\r\n // Named so the row's emitted type reaches the Rect surface it spreads through the sdk, not core.\r\n type Alignment as _Alignment,\r\n type CornerRadiusResolved as _CornerRadiusResolved,\r\n type CornerStyleResolved as _CornerStyleResolved,\r\n type FillResolved as _FillResolved,\r\n type FlowMode as _FlowMode,\r\n type FlowResolved as _FlowResolved,\r\n type GapSize as _GapSize,\r\n type Node2D as _Node2D,\r\n type Node2DProps as _Node2DProps,\r\n type RectCornerRadius as _RectCornerRadius,\r\n type RectCornerStyle as _RectCornerStyle,\r\n type Shadow as _Shadow,\r\n type ShadowResolved as _ShadowResolved,\r\n type Stroke as _Stroke,\r\n type StrokeResolved as _StrokeResolved,\r\n type Vector2 as _Vector2,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport { fresh } from \"./entries\"\r\nimport { frameEase } from \"./motion\"\r\nimport {\r\n DEFAULT_LEGEND,\r\n SPOTLIGHT_DIM,\r\n type ChartSeries,\r\n type LegendConfig,\r\n} from \"./shared\"\r\n\r\nexport interface ChartLegendProps extends RectProps {\r\n /**\r\n * One entry per series: legend `label`, its `enabled` default, and — through\r\n * {@link ChartLegendProps.swatches} — the colour its chip is painted. A series\r\n * that starts enabled (the default) is added to the row up front; one that\r\n * starts `false` is hidden until a later `showSeries`.\r\n */\r\n series: ChartSeries[]\r\n /**\r\n * The swatch colour for each series, by index — resolved by the chart, whose\r\n * business it is whether a series' colour comes out of a stroke palette (a\r\n * line) or a fill palette (a bar). Shorter than the series list means the\r\n * missing entries fall back to white.\r\n */\r\n swatches: Fill[]\r\n /** Padding, caption style, gaps, and swatch geometry — see {@link LegendConfig}. */\r\n legend: LegendConfig\r\n}\r\n\r\n/** A row's entries are a `Rect`'s: paint, the flow of its children, its corners. */\r\nconst row = { ...Paint.state, ...Flow.state, ...Shapes.corners }\r\n\r\n/**\r\n * One legend entry. It hugs its caption and swatch; `shown` scales that width\r\n * from nothing to the whole of it.\r\n *\r\n * The width is taken from the content on every measure, at any reveal, so a frame\r\n * never depends on whether the entry was once seen fully shown. A collapse needs a\r\n * number to scale, and `\"hug\"` is not one until something measures it — this is\r\n * the something.\r\n */\r\nconst LegendEntry = component2d({\r\n key: \"legendEntry\",\r\n state: { ...row, shown: Types.number(1) },\r\n commands: { ...Paint.commands },\r\n measure: (measurer, state, children) => {\r\n const size = Flow.measure(measurer, state, children, Paint.inset(state))\r\n return state.shown >= 1 ? size : { ...size, width: state.shown * size.width }\r\n },\r\n layout: (box, state, children) => Flow.layout(box, state, children, Paint.inset(state)),\r\n render: (ctx, state) => Paint.draw(ctx, state, Shapes.rect(ctx.size, state)),\r\n})\r\n\r\n/**\r\n * How far each entry is shown, written whole (a document, a `set`) or one\r\n * entry at a time (a command, as `{ [index]: reveal }`), which leaves the others\r\n * as the frame left them — so two series moving at once each move their own.\r\n */\r\nfunction revealOf(value: readonly number[] | Readonly<Record<number, number>>, previous?: number[]): number[] {\r\n if (Array.isArray(value)) return value as number[]\r\n const next = [...(previous ?? [])]\r\n for (const [index, reveal] of Object.entries(value)) next[Number(index)] = reveal\r\n return next\r\n}\r\n\r\n/**\r\n * The legend of a chart: a **horizontal-flow row of entries**, one per series, laid out\r\n * left-to-right with the theme's `itemGap`. Each entry pairs the series label\r\n * with a rounded colour swatch; only the swatch carries the series colour, the\r\n * caption reads in the legend's neutral ink.\r\n *\r\n * `showSeries`/`hideSeries` flip a series on or off — showing one grows its\r\n * entry back in at its stable series position, hiding one shrinks it away. So\r\n * the row only ever shows the currently-enabled series, in series order, and\r\n * closes the gap when one leaves.\r\n *\r\n * This node *is* the row, so the parent places it (centred below the chart) and\r\n * it hugs its entries.\r\n */\r\nexport const ChartLegend = component2d({\r\n key: \"chartLegend\",\r\n state: {\r\n ...row,\r\n series: fresh<ChartSeries[]>(() => []),\r\n swatches: fresh<Fill[]>(() => []),\r\n legend: Types.custom<LegendConfig>(DEFAULT_LEGEND),\r\n /**\r\n * How far each entry is shown, `0`–`1`. Drives its width, opacity and gap\r\n * together, so `0` is an entry that takes no room and `1` is one at its\r\n * natural size.\r\n *\r\n * This replaces adding and removing the entry from the row: a command is\r\n * asked what it looks like at a time, and \"is this node a child\" is not a\r\n * value a time can produce. Collapsed-but-present is the same picture reached\r\n * by a route that *is* a function of `t`.\r\n */\r\n reveal: fresh<number[], number[] | Readonly<Record<number, number>>>(() => [], { resolve: revealOf }),\r\n },\r\n // This node *is* the row, so the direction is its own answer. It has to be\r\n // stated — a `Rect` given no flow lays its children out `freeform`, which\r\n // stacks every entry on the same spot. The gap and padding are the theme's.\r\n defaults: {\r\n flow: \"horizontal\",\r\n width: \"hug\",\r\n height: \"hug\",\r\n gap: (state) => state.legend.itemGap,\r\n padding: (state) => state.legend.padding,\r\n reveal: (state) => state.series.map((s) => ((s.enabled ?? true) ? 1 : 0)),\r\n },\r\n // One entry per series, in series order, every one a child for good: order is\r\n // fixed rather than depending on which siblings happen to be shown, so an entry\r\n // always comes back where it belongs.\r\n children: (state) => {\r\n const marker = state.legend.markerStyle\r\n return state.series.map((series, index) =>\r\n LegendEntry({\r\n flow: \"horizontal\",\r\n gap: 12,\r\n align: \"center\",\r\n width: \"hug\",\r\n height: \"hug\",\r\n // Bound to the reveal, so showing and hiding is a number moving rather\r\n // than a child arriving and leaving. The width follows it in `measure`,\r\n // and the flanking gap closes with the entry rather than snapping.\r\n opacity: () => state.reveal[index] ?? 0,\r\n gapScale: () => state.reveal[index] ?? 0,\r\n shown: () => state.reveal[index] ?? 0,\r\n children: [\r\n Text({ ...textOps.styleProps(state.legend.textStyle), text: series.label }),\r\n Rect({\r\n width: marker.width,\r\n height: marker.height,\r\n cornerRadius: marker.borderRadius,\r\n fill: state.swatches[index] ?? \"white\",\r\n stroke: marker.stroke,\r\n shadow: marker.shadow,\r\n }),\r\n ],\r\n })\r\n )\r\n },\r\n commands: {\r\n ...Paint.commands,\r\n /**\r\n * Grow series `index`'s entry back in at its series-order position, the\r\n * siblings sliding over to make room. A reveal tween rather than an animated\r\n * `addChildAt`: the entry never left, so the whole thing is a function of `t`.\r\n */\r\n showSeries: {\r\n args: { index: Types.number(0, { min: 0, step: 1 }) },\r\n // An index that is not a series takes its slot and moves nothing.\r\n run: (timeline, state) => (timeline.args.index in state.series\r\n ? timeline.animate(revealFrame(state, timeline.args.index, 1, frameEase(timeline)))\r\n : timeline.wait(timeline.duration)),\r\n },\r\n /** Shrink series `index`'s entry away, the gap closing behind it — the mirror of `showSeries`. */\r\n hideSeries: {\r\n args: { index: Types.number(0, { min: 0, step: 1 }) },\r\n run: (timeline, state) => (timeline.args.index in state.series\r\n ? timeline.animate(revealFrame(state, timeline.args.index, 0, frameEase(timeline)))\r\n : timeline.wait(timeline.duration)),\r\n },\r\n /**\r\n * Dim every entry but series `index` to {@link SPOTLIGHT_DIM} and bring that\r\n * one back to full — the legend half of a chart's `spotlightSeries`. Entries\r\n * stay in place; only their opacity moves, so the row doesn't reflow. Only\r\n * the entries shown when it is built are touched: a hidden series' entry is\r\n * left as `hideSeries` left it.\r\n */\r\n spotlightSeries: {\r\n args: { index: Types.number(0, { min: 0, step: 1 }) },\r\n run: (timeline, state, children) =>\r\n timeline.together(\r\n children.flatMap((entry, i) =>\r\n (state.reveal[i] ?? 0) > 0 ? [entry.to({ opacity: i === timeline.args.index ? 1 : SPOTLIGHT_DIM })] : []\r\n )\r\n ),\r\n },\r\n },\r\n measure: (measurer, state, children) => Flow.measure(measurer, state, children, Paint.inset(state)),\r\n layout: (box, state, children) => Flow.layout(box, state, children, Paint.inset(state)),\r\n render: (ctx, state) => Paint.draw(ctx, state, Shapes.rect(ctx.size, state)),\r\n})\r\n\r\n/**\r\n * One entry's reveal ramping to `target` from where the command finds it — so a\r\n * hide that follows a show starts where the show left it.\r\n */\r\nfunction revealFrame(state: { readonly reveal: readonly number[] }, index: number, target: number, ease: (t: number) => number) {\r\n const from = state.reveal[index] ?? 0\r\n return (t: number) => ({ reveal: { [index]: from + (target - from) * ease(t) } })\r\n}\r\n\r\n/** Whether series `index` is showing at all on `legend`. */\r\nexport function legendShows(legend: { readonly reveal: readonly number[] }, index: number): boolean {\r\n return (legend.reveal[index] ?? 0) > 0\r\n}\r\n\r\nexport type ChartLegend = NodeOf<typeof ChartLegend>\r\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type Element, type Node2D, type Type } from "@motionscript/sdk";
|
|
2
|
+
/**
|
|
3
|
+
* An entry made fresh for every node: each node gets its own array or box
|
|
4
|
+
* rather than one shared literal, and a host is told no default for it.
|
|
5
|
+
*/
|
|
6
|
+
export declare function fresh<T, In = T>(make: () => T, options?: {
|
|
7
|
+
readonly resolve?: (value: In) => T;
|
|
8
|
+
readonly kind?: string;
|
|
9
|
+
}): Type<In, T>;
|
|
10
|
+
/**
|
|
11
|
+
* Nodes a `children` builder made with `new`, as the elements it returns. A
|
|
12
|
+
* part built that way can be read in a binding — its own box, or its parent's,
|
|
13
|
+
* which is the component it was built for — where a call would hand back only
|
|
14
|
+
* the element.
|
|
15
|
+
*/
|
|
16
|
+
export declare function asParts(nodes: readonly Node2D[]): readonly Element[];
|
|
17
|
+
//# sourceMappingURL=entries.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"entries.d.ts","sourceRoot":"","sources":["../../src/kit/entries.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAE/E;;;GAGG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;IAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAGtI;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,OAAO,EAAE,CAEpE"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Types } from "@motionscript/sdk";
|
|
2
|
+
/**
|
|
3
|
+
* An entry made fresh for every node: each node gets its own array or box
|
|
4
|
+
* rather than one shared literal, and a host is told no default for it.
|
|
5
|
+
*/
|
|
6
|
+
export function fresh(make, options) {
|
|
7
|
+
// A function default is a factory: the component calls it once per node.
|
|
8
|
+
return Types.custom(make, options);
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Nodes a `children` builder made with `new`, as the elements it returns. A
|
|
12
|
+
* part built that way can be read in a binding — its own box, or its parent's,
|
|
13
|
+
* which is the component it was built for — where a call would hand back only
|
|
14
|
+
* the element.
|
|
15
|
+
*/
|
|
16
|
+
export function asParts(nodes) {
|
|
17
|
+
return nodes;
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=entries.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"entries.js","sourceRoot":"","sources":["../../src/kit/entries.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAwC,MAAM,mBAAmB,CAAA;AAE/E;;;GAGG;AACH,MAAM,UAAU,KAAK,CAAY,IAAa,EAAE,OAAyE;IACvH,yEAAyE;IACzE,OAAO,KAAK,CAAC,MAAM,CAAQ,IAAqB,EAAE,OAAO,CAAC,CAAA;AAC5D,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,KAAwB;IAC9C,OAAO,KAAsC,CAAA;AAC/C,CAAC","sourcesContent":["import { Types, type Element, type Node2D, type Type } from \"@motionscript/sdk\"\r\n\r\n/**\r\n * An entry made fresh for every node: each node gets its own array or box\r\n * rather than one shared literal, and a host is told no default for it.\r\n */\r\nexport function fresh<T, In = T>(make: () => T, options?: { readonly resolve?: (value: In) => T; readonly kind?: string }): Type<In, T> {\r\n // A function default is a factory: the component calls it once per node.\r\n return Types.custom<In, T>(make as unknown as In, options)\r\n}\r\n\r\n/**\r\n * Nodes a `children` builder made with `new`, as the elements it returns. A\r\n * part built that way can be read in a binding — its own box, or its parent's,\r\n * which is the component it was built for — where a call would hand back only\r\n * the element.\r\n */\r\nexport function asParts(nodes: readonly Node2D[]): readonly Element[] {\r\n return nodes as unknown as readonly Element[]\r\n}\r\n"]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { type EasingFunction, type Piece, type Timeline } from "@motionscript/sdk";
|
|
2
|
+
/** Any component's timeline: these helpers only build pieces, which every timeline builds alike. */
|
|
3
|
+
type AnyTimeline = Timeline<any, any>;
|
|
4
|
+
/**
|
|
5
|
+
* The ease a part's own frames apply to `t`: none when its command was given
|
|
6
|
+
* one, which already eases every frame the command builds, and otherwise the
|
|
7
|
+
* ease-out every chart command defaults to.
|
|
8
|
+
*/
|
|
9
|
+
export declare function frameEase(timeline: {
|
|
10
|
+
readonly easing: EasingFunction | undefined;
|
|
11
|
+
}): EasingFunction;
|
|
12
|
+
/** A piece of a command placed at its own time: from `at` seconds, for `duration` seconds. */
|
|
13
|
+
export interface Beat {
|
|
14
|
+
readonly at: number;
|
|
15
|
+
readonly duration: number;
|
|
16
|
+
readonly piece: Piece;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* `beats` at their own offsets over the command, each eased on its own and held
|
|
20
|
+
* at its last frame once it is done. A beat ahead of the playhead writes nothing,
|
|
21
|
+
* so whatever stands before it is written by a piece ahead of these. Beats that
|
|
22
|
+
* run past the command are played faster to end with it.
|
|
23
|
+
*/
|
|
24
|
+
export declare function beats(timeline: AnyTimeline, parts: readonly Beat[]): Piece;
|
|
25
|
+
/** How far one piece of a staggered entrance has come: its opacity, and how far it still sits off its place. */
|
|
26
|
+
export interface Arrival {
|
|
27
|
+
readonly opacity: number;
|
|
28
|
+
readonly shift: number;
|
|
29
|
+
}
|
|
30
|
+
/** Each piece's arrival, by key. An unlisted piece has landed. */
|
|
31
|
+
export type Arrivals = Readonly<Record<string, Arrival>>;
|
|
32
|
+
export declare const LANDED: Arrival;
|
|
33
|
+
/**
|
|
34
|
+
* A part's private record of its pieces' arrivals. A write merges into it, so
|
|
35
|
+
* beats placed apart each write their own piece and leave the others as the
|
|
36
|
+
* frame left them.
|
|
37
|
+
*/
|
|
38
|
+
export declare function arrivalsEntry(): import("@motionscript/sdk").Type<Readonly<Record<string, Arrival>>, Readonly<Record<string, Arrival>>, false>;
|
|
39
|
+
export declare function arrivalOf(arrivals: Arrivals, key: string | number): Arrival;
|
|
40
|
+
/** Every piece in `keys` armed at `from`: the first frame of their entrance. */
|
|
41
|
+
export declare function armed(keys: readonly (string | number)[], from: Arrival): Arrivals;
|
|
42
|
+
/**
|
|
43
|
+
* A piece arriving from `from` over its beat: a part armed at `from` tweened to
|
|
44
|
+
* `{ opacity: 1, [axis]: 0 }`, eased by `ease`.
|
|
45
|
+
*/
|
|
46
|
+
export declare function arrival(timeline: AnyTimeline, key: string | number, from: Arrival, ease: EasingFunction): Piece;
|
|
47
|
+
export {};
|
|
48
|
+
//# sourceMappingURL=motion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/kit/motion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,cAAc,EAAE,KAAK,KAAK,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIlG,oGAAoG;AACpG,KAAK,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;AAErC;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE;IAAE,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,SAAS,CAAA;CAAE,GAAG,cAAc,CAEnG;AAED,8FAA8F;AAC9F,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAA;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,IAAI,EAAE,GAAG,KAAK,CAW1E;AAED,gHAAgH;AAChH,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB;AAED,kEAAkE;AAClE,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,MAAM,EAAE,OAAkC,CAAA;AAEvD;;;;GAIG;AACH,wBAAgB,aAAa,kHAE5B;AAED,wBAAgB,SAAS,CAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAE3E;AAED,gFAAgF;AAChF,wBAAgB,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,OAAO,GAAG,QAAQ,CAIjF;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,KAAK,CAY/G"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { Types, easeOut } from "@motionscript/sdk";
|
|
2
|
+
const identity = (t) => t;
|
|
3
|
+
/**
|
|
4
|
+
* The ease a part's own frames apply to `t`: none when its command was given
|
|
5
|
+
* one, which already eases every frame the command builds, and otherwise the
|
|
6
|
+
* ease-out every chart command defaults to.
|
|
7
|
+
*/
|
|
8
|
+
export function frameEase(timeline) {
|
|
9
|
+
return timeline.easing ? identity : easeOut();
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* `beats` at their own offsets over the command, each eased on its own and held
|
|
13
|
+
* at its last frame once it is done. A beat ahead of the playhead writes nothing,
|
|
14
|
+
* so whatever stands before it is written by a piece ahead of these. Beats that
|
|
15
|
+
* run past the command are played faster to end with it.
|
|
16
|
+
*/
|
|
17
|
+
export function beats(timeline, parts) {
|
|
18
|
+
const total = timeline.duration;
|
|
19
|
+
const natural = parts.reduce((end, part) => Math.max(end, part.at + part.duration), 0);
|
|
20
|
+
const k = natural > total && natural > 0 ? total / natural : 1;
|
|
21
|
+
return timeline.together(parts.map(({ at, duration, piece }) => {
|
|
22
|
+
const start = at * k;
|
|
23
|
+
const length = duration * k;
|
|
24
|
+
return timeline.sequence([timeline.wait(start), piece, timeline.wait(Math.max(0, total - start - length))]);
|
|
25
|
+
}));
|
|
26
|
+
}
|
|
27
|
+
export const LANDED = { opacity: 1, shift: 0 };
|
|
28
|
+
/**
|
|
29
|
+
* A part's private record of its pieces' arrivals. A write merges into it, so
|
|
30
|
+
* beats placed apart each write their own piece and leave the others as the
|
|
31
|
+
* frame left them.
|
|
32
|
+
*/
|
|
33
|
+
export function arrivalsEntry() {
|
|
34
|
+
return Types.custom({}, { private: true, resolve: (next, previous) => ({ ...previous, ...next }) });
|
|
35
|
+
}
|
|
36
|
+
export function arrivalOf(arrivals, key) {
|
|
37
|
+
return arrivals[key] ?? LANDED;
|
|
38
|
+
}
|
|
39
|
+
/** Every piece in `keys` armed at `from`: the first frame of their entrance. */
|
|
40
|
+
export function armed(keys, from) {
|
|
41
|
+
const record = {};
|
|
42
|
+
for (const key of keys)
|
|
43
|
+
record[key] = from;
|
|
44
|
+
return record;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* A piece arriving from `from` over its beat: a part armed at `from` tweened to
|
|
48
|
+
* `{ opacity: 1, [axis]: 0 }`, eased by `ease`.
|
|
49
|
+
*/
|
|
50
|
+
export function arrival(timeline, key, from, ease) {
|
|
51
|
+
return timeline.animate((t) => {
|
|
52
|
+
const e = ease(t);
|
|
53
|
+
return {
|
|
54
|
+
arrivals: {
|
|
55
|
+
[key]: {
|
|
56
|
+
opacity: from.opacity + (LANDED.opacity - from.opacity) * e,
|
|
57
|
+
shift: from.shift + (LANDED.shift - from.shift) * e,
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
};
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
//# sourceMappingURL=motion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"motion.js","sourceRoot":"","sources":["../../src/kit/motion.ts"],"names":[],"mappings":"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","sourcesContent":["import { Types, easeOut, type EasingFunction, type Piece, type Timeline } from \"@motionscript/sdk\"\r\n\r\nconst identity: EasingFunction = (t) => t\r\n\r\n/** Any component's timeline: these helpers only build pieces, which every timeline builds alike. */\r\ntype AnyTimeline = Timeline<any, any>\r\n\r\n/**\r\n * The ease a part's own frames apply to `t`: none when its command was given\r\n * one, which already eases every frame the command builds, and otherwise the\r\n * ease-out every chart command defaults to.\r\n */\r\nexport function frameEase(timeline: { readonly easing: EasingFunction | undefined }): EasingFunction {\r\n return timeline.easing ? identity : easeOut()\r\n}\r\n\r\n/** A piece of a command placed at its own time: from `at` seconds, for `duration` seconds. */\r\nexport interface Beat {\r\n readonly at: number\r\n readonly duration: number\r\n readonly piece: Piece\r\n}\r\n\r\n/**\r\n * `beats` at their own offsets over the command, each eased on its own and held\r\n * at its last frame once it is done. A beat ahead of the playhead writes nothing,\r\n * so whatever stands before it is written by a piece ahead of these. Beats that\r\n * run past the command are played faster to end with it.\r\n */\r\nexport function beats(timeline: AnyTimeline, parts: readonly Beat[]): Piece {\r\n const total = timeline.duration\r\n const natural = parts.reduce((end, part) => Math.max(end, part.at + part.duration), 0)\r\n const k = natural > total && natural > 0 ? total / natural : 1\r\n return timeline.together(\r\n parts.map(({ at, duration, piece }) => {\r\n const start = at * k\r\n const length = duration * k\r\n return timeline.sequence([timeline.wait(start), piece, timeline.wait(Math.max(0, total - start - length))])\r\n })\r\n )\r\n}\r\n\r\n/** How far one piece of a staggered entrance has come: its opacity, and how far it still sits off its place. */\r\nexport interface Arrival {\r\n readonly opacity: number\r\n readonly shift: number\r\n}\r\n\r\n/** Each piece's arrival, by key. An unlisted piece has landed. */\r\nexport type Arrivals = Readonly<Record<string, Arrival>>\r\n\r\nexport const LANDED: Arrival = { opacity: 1, shift: 0 }\r\n\r\n/**\r\n * A part's private record of its pieces' arrivals. A write merges into it, so\r\n * beats placed apart each write their own piece and leave the others as the\r\n * frame left them.\r\n */\r\nexport function arrivalsEntry() {\r\n return Types.custom<Arrivals>({}, { private: true, resolve: (next: Arrivals, previous?: Arrivals) => ({ ...previous, ...next }) })\r\n}\r\n\r\nexport function arrivalOf(arrivals: Arrivals, key: string | number): Arrival {\r\n return arrivals[key] ?? LANDED\r\n}\r\n\r\n/** Every piece in `keys` armed at `from`: the first frame of their entrance. */\r\nexport function armed(keys: readonly (string | number)[], from: Arrival): Arrivals {\r\n const record: Record<string, Arrival> = {}\r\n for (const key of keys) record[key] = from\r\n return record\r\n}\r\n\r\n/**\r\n * A piece arriving from `from` over its beat: a part armed at `from` tweened to\r\n * `{ opacity: 1, [axis]: 0 }`, eased by `ease`.\r\n */\r\nexport function arrival(timeline: AnyTimeline, key: string | number, from: Arrival, ease: EasingFunction): Piece {\r\n return timeline.animate((t) => {\r\n const e = ease(t)\r\n return {\r\n arrivals: {\r\n [key]: {\r\n opacity: from.opacity + (LANDED.opacity - from.opacity) * e,\r\n shift: from.shift + (LANDED.shift - from.shift) * e,\r\n },\r\n },\r\n }\r\n })\r\n}\r\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { FillResolved, Loader, ShadowResolved, StrokeResolved } from "@motionscript/sdk";
|
|
2
|
+
/** Paints a chart part holds in entries of its own, which no paint entry loads for it. */
|
|
3
|
+
export interface PartPaints {
|
|
4
|
+
readonly fills?: readonly (readonly FillResolved[])[];
|
|
5
|
+
readonly strokes?: readonly (readonly StrokeResolved[])[];
|
|
6
|
+
readonly shadows?: readonly (readonly ShadowResolved[])[];
|
|
7
|
+
}
|
|
8
|
+
/** Declare `paints` from a component's `load`. */
|
|
9
|
+
export declare function loadPaints(loader: Loader, paints: PartPaints): void;
|
|
10
|
+
//# sourceMappingURL=paints.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"paints.d.ts","sourceRoot":"","sources":["../../src/kit/paints.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAE7F,0FAA0F;AAC1F,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,YAAY,EAAE,CAAC,EAAE,CAAA;IACrD,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAA;IACzD,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAA;CAC1D;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,GAAG,IAAI,CAInE"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/** Declare `paints` from a component's `load`. */
|
|
2
|
+
export function loadPaints(loader, paints) {
|
|
3
|
+
for (const fill of paints.fills ?? [])
|
|
4
|
+
loader.fill(fill);
|
|
5
|
+
for (const strokes of paints.strokes ?? [])
|
|
6
|
+
for (const stroke of strokes)
|
|
7
|
+
loader.fill(stroke.fill);
|
|
8
|
+
for (const shadows of paints.shadows ?? [])
|
|
9
|
+
for (const shadow of shadows)
|
|
10
|
+
loader.fill(shadow.fill);
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=paints.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"paints.js","sourceRoot":"","sources":["../../src/kit/paints.ts"],"names":[],"mappings":"AASA,kDAAkD;AAClD,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,MAAkB;IAC3D,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,KAAK,IAAI,EAAE;QAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACxD,KAAK,MAAM,OAAO,IAAI,MAAM,CAAC,OAAO,IAAI,EAAE;QAAE,KAAK,MAAM,MAAM,IAAI,OAAO;YAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAClG,KAAK,MAAM,OAAO,IAAI,MAAM,CAAC,OAAO,IAAI,EAAE;QAAE,KAAK,MAAM,MAAM,IAAI,OAAO;YAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;AACpG,CAAC","sourcesContent":["import type { FillResolved, Loader, ShadowResolved, StrokeResolved } from \"@motionscript/sdk\"\r\n\r\n/** Paints a chart part holds in entries of its own, which no paint entry loads for it. */\r\nexport interface PartPaints {\r\n readonly fills?: readonly (readonly FillResolved[])[]\r\n readonly strokes?: readonly (readonly StrokeResolved[])[]\r\n readonly shadows?: readonly (readonly ShadowResolved[])[]\r\n}\r\n\r\n/** Declare `paints` from a component's `load`. */\r\nexport function loadPaints(loader: Loader, paints: PartPaints): void {\r\n for (const fill of paints.fills ?? []) loader.fill(fill)\r\n for (const strokes of paints.strokes ?? []) for (const stroke of strokes) loader.fill(stroke.fill)\r\n for (const shadows of paints.shadows ?? []) for (const shadow of shadows) loader.fill(shadow.fill)\r\n}\r\n"]}
|
package/dist/kit/shared.d.ts
CHANGED
|
@@ -12,9 +12,8 @@
|
|
|
12
12
|
* that three times would mean three answers to "how does a chart round its axis"
|
|
13
13
|
* within one app.
|
|
14
14
|
*
|
|
15
|
-
* Kept renderer-agnostic (no `Node` imports) so
|
|
16
|
-
* mappings can build a partial theme without pulling the
|
|
17
|
-
* same way `line-chart-props.ts` always has.
|
|
15
|
+
* Kept renderer-agnostic (no `Node` imports) so a host's own inspector
|
|
16
|
+
* mappings can build a partial theme without pulling the components in.
|
|
18
17
|
*
|
|
19
18
|
* **Two conventions run through every resolver and lerp below**, inherited from
|
|
20
19
|
* the shape system's `resolveStroke`/`resolveShadow`:
|
|
@@ -80,19 +79,61 @@ export interface AxisDomainConfig {
|
|
|
80
79
|
format?: string;
|
|
81
80
|
}
|
|
82
81
|
/**
|
|
83
|
-
* An axis domain's
|
|
82
|
+
* An axis domain entry's resolve: merges the author's partial input onto
|
|
84
83
|
* `previous`, so a later partial `.set({ yAxis: {...} })` patches
|
|
85
84
|
* `label`/`range`/`ticks` independently. `range`/`ticks` staying `undefined`
|
|
86
85
|
* after the merge is the auto-derive signal the scale getters read.
|
|
87
86
|
*/
|
|
88
87
|
export declare function resolveAxisDomain(domain: AxisDomainConfig | undefined, previous?: AxisDomainConfig): AxisDomainConfig;
|
|
89
88
|
/**
|
|
90
|
-
* An axis domain's
|
|
89
|
+
* An axis domain entry's lerp: interpolates `range`/`ticks` numerically
|
|
91
90
|
* (pairwise by index for `ticks`), so a `to` command that restates a range
|
|
92
91
|
* rescales the plot smoothly. `label`, and either field when one side is in
|
|
93
92
|
* auto-derive mode, step at the midpoint.
|
|
94
93
|
*/
|
|
95
94
|
export declare function lerpAxisDomain(from: AxisDomainConfig, to: AxisDomainConfig, t: number): AxisDomainConfig;
|
|
95
|
+
/**
|
|
96
|
+
* Where a generic `to()` of an axis domain should land, given the domain as it
|
|
97
|
+
* is *drawn* (`drawn`, with `range` and `ticks` resolved off the data), or
|
|
98
|
+
* `undefined` when the request states neither a `range` nor `ticks` and the
|
|
99
|
+
* plain property tween will do.
|
|
100
|
+
*
|
|
101
|
+
* The stored domain of an auto axis has no `range` and no `ticks`, and
|
|
102
|
+
* {@link lerpAxisDomain} steps an unset side at the midpoint, so tweening the
|
|
103
|
+
* stored value from an auto axis is a cut. The charts therefore tween between
|
|
104
|
+
* resolved domains, as their zoom does; this builds the destination. A `range`
|
|
105
|
+
* given without `ticks` keeps the tick *count* the axis already draws, so each
|
|
106
|
+
* marker slides from its old value to its new one instead of the row popping.
|
|
107
|
+
*/
|
|
108
|
+
export declare function axisTweenTarget(drawn: AxisDomainConfig, requested: AxisDomainConfig | undefined): AxisDomainConfig | undefined;
|
|
109
|
+
/**
|
|
110
|
+
* An axis domain part-way through a tween that leaves or reaches a `range` or
|
|
111
|
+
* `ticks` left to the data: both ends as stored, and how far along. Only the
|
|
112
|
+
* chart knows what an auto side draws as, so {@link settleAxisDomain} resolves
|
|
113
|
+
* it there. Its own fields are the plain {@link lerpAxisDomain} of its ends, so
|
|
114
|
+
* a mapper merging onto one still reads a domain.
|
|
115
|
+
*/
|
|
116
|
+
export interface AxisDomainBlend extends AxisDomainConfig {
|
|
117
|
+
readonly blend: {
|
|
118
|
+
readonly from: AxisDomainConfig;
|
|
119
|
+
readonly to: AxisDomainConfig;
|
|
120
|
+
readonly t: number;
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
/**
|
|
124
|
+
* A chart's axis entry tween: what `to({ yAxis: { range } })` moves through.
|
|
125
|
+
* Between two explicit domains it is {@link lerpAxisDomain}, and a restated
|
|
126
|
+
* `range` without `ticks` spreads explicit ticks across it, keeping their count.
|
|
127
|
+
* When either end leaves `range` or `ticks` to the data, the value between is an
|
|
128
|
+
* {@link AxisDomainBlend}, which the chart draws as the blend of what each end
|
|
129
|
+
* draws: a rescale from an auto axis is continuous, not a cut at the midpoint.
|
|
130
|
+
*/
|
|
131
|
+
export declare function lerpAxisEntry(from: AxisDomainConfig, to: AxisDomainConfig, t: number): AxisDomainConfig;
|
|
132
|
+
/**
|
|
133
|
+
* `domain` as the chart draws it: `drawn` resolves a plain domain's auto `range`
|
|
134
|
+
* and `ticks` off the data, and a blend is the lerp of what its two ends draw.
|
|
135
|
+
*/
|
|
136
|
+
export declare function settleAxisDomain(domain: AxisDomainConfig, drawn: (domain: AxisDomainConfig) => AxisDomainConfig): AxisDomainConfig;
|
|
96
137
|
/**
|
|
97
138
|
* The low-level colour tokens the default themes are built from — a dark plot
|
|
98
139
|
* panel with warm-grey axis furniture.
|
|
@@ -119,7 +160,8 @@ export declare const SPOTLIGHT_DIM = 0.2;
|
|
|
119
160
|
/** Clamp a number into `[0, 1]` — the range every reveal signal here runs in. */
|
|
120
161
|
export declare function clampUnit(value: number): number;
|
|
121
162
|
/**
|
|
122
|
-
* Read a numeric field off a row, defaulting missing
|
|
163
|
+
* Read a numeric field off a row, defaulting missing, non-numeric and non-finite
|
|
164
|
+
* values to 0.
|
|
123
165
|
*
|
|
124
166
|
* A column left as strings silently plots as 0, which is why the CSV parser's
|
|
125
167
|
* numeric auto-coercion matters — a quoted or unit-suffixed column won't plot
|
|
@@ -241,8 +283,17 @@ export declare function resolveSeriesFill(palette: Stroke[], series: ChartSeries
|
|
|
241
283
|
* simply the whole answer.
|
|
242
284
|
*/
|
|
243
285
|
export declare function resolvePalettePaint(palette: Fill[], override: Fill | undefined, index: number): Fill;
|
|
244
|
-
/**
|
|
245
|
-
|
|
286
|
+
/**
|
|
287
|
+
* Format a marker value: integers plain, otherwise trimmed to one decimal, or to
|
|
288
|
+
* as many as the axis's tick `step` needs to tell neighbouring ticks apart.
|
|
289
|
+
*
|
|
290
|
+
* One decimal is the floor, so a step of 0.1 or more reads exactly as it always
|
|
291
|
+
* has; a finer step (a unit axis ticked every 0.05) gets two, instead of five
|
|
292
|
+
* ticks captioned `0.1 0.1 0.2 0.2 0.3`. Trailing zeros are dropped either way.
|
|
293
|
+
*/
|
|
294
|
+
export declare function formatMarker(value: number, step?: number): string;
|
|
295
|
+
/** The gap between neighbouring tick values, or `undefined` for fewer than two distinct ones. */
|
|
296
|
+
export declare function markerStep(markers: readonly number[]): number | undefined;
|
|
246
297
|
/** Format a fraction in `[0, 1]` as a percentage: integers plain, else one decimal. */
|
|
247
298
|
export declare function formatPercent(fraction: number): string;
|
|
248
299
|
/** `markerCount` evenly-spaced tick values across `[min, max]`, ends inclusive. */
|
package/dist/kit/shared.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/kit/shared.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/kit/shared.ts"],"names":[],"mappings":"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"}
|
package/dist/kit/shared.js
CHANGED
|
@@ -12,9 +12,8 @@
|
|
|
12
12
|
* that three times would mean three answers to "how does a chart round its axis"
|
|
13
13
|
* within one app.
|
|
14
14
|
*
|
|
15
|
-
* Kept renderer-agnostic (no `Node` imports) so
|
|
16
|
-
* mappings can build a partial theme without pulling the
|
|
17
|
-
* same way `line-chart-props.ts` always has.
|
|
15
|
+
* Kept renderer-agnostic (no `Node` imports) so a host's own inspector
|
|
16
|
+
* mappings can build a partial theme without pulling the components in.
|
|
18
17
|
*
|
|
19
18
|
* **Two conventions run through every resolver and lerp below**, inherited from
|
|
20
19
|
* the shape system's `resolveStroke`/`resolveShadow`:
|
|
@@ -30,7 +29,7 @@
|
|
|
30
29
|
*/
|
|
31
30
|
import { fillOps, lerpNumber, shadowOps, strokeOps, insetsOps, textOps, } from "@motionscript/sdk";
|
|
32
31
|
/**
|
|
33
|
-
* An axis domain's
|
|
32
|
+
* An axis domain entry's resolve: merges the author's partial input onto
|
|
34
33
|
* `previous`, so a later partial `.set({ yAxis: {...} })` patches
|
|
35
34
|
* `label`/`range`/`ticks` independently. `range`/`ticks` staying `undefined`
|
|
36
35
|
* after the merge is the auto-derive signal the scale getters read.
|
|
@@ -44,7 +43,7 @@ export function resolveAxisDomain(domain, previous) {
|
|
|
44
43
|
};
|
|
45
44
|
}
|
|
46
45
|
/**
|
|
47
|
-
* An axis domain's
|
|
46
|
+
* An axis domain entry's lerp: interpolates `range`/`ticks` numerically
|
|
48
47
|
* (pairwise by index for `ticks`), so a `to` command that restates a range
|
|
49
48
|
* rescales the plot smoothly. `label`, and either field when one side is in
|
|
50
49
|
* auto-derive mode, step at the midpoint.
|
|
@@ -74,6 +73,68 @@ function lerpOptionalTicks(from, to, t) {
|
|
|
74
73
|
}
|
|
75
74
|
return out;
|
|
76
75
|
}
|
|
76
|
+
/**
|
|
77
|
+
* Where a generic `to()` of an axis domain should land, given the domain as it
|
|
78
|
+
* is *drawn* (`drawn`, with `range` and `ticks` resolved off the data), or
|
|
79
|
+
* `undefined` when the request states neither a `range` nor `ticks` and the
|
|
80
|
+
* plain property tween will do.
|
|
81
|
+
*
|
|
82
|
+
* The stored domain of an auto axis has no `range` and no `ticks`, and
|
|
83
|
+
* {@link lerpAxisDomain} steps an unset side at the midpoint, so tweening the
|
|
84
|
+
* stored value from an auto axis is a cut. The charts therefore tween between
|
|
85
|
+
* resolved domains, as their zoom does; this builds the destination. A `range`
|
|
86
|
+
* given without `ticks` keeps the tick *count* the axis already draws, so each
|
|
87
|
+
* marker slides from its old value to its new one instead of the row popping.
|
|
88
|
+
*/
|
|
89
|
+
export function axisTweenTarget(drawn, requested) {
|
|
90
|
+
if (requested?.range === undefined && requested?.ticks === undefined)
|
|
91
|
+
return undefined;
|
|
92
|
+
const target = resolveAxisDomain(requested, drawn);
|
|
93
|
+
if (requested.ticks === undefined && requested.range !== undefined) {
|
|
94
|
+
const count = Math.max(2, drawn.ticks?.length ?? 2);
|
|
95
|
+
target.ticks = markerValues(requested.range, count - 1);
|
|
96
|
+
}
|
|
97
|
+
return target;
|
|
98
|
+
}
|
|
99
|
+
function blendOf(domain) {
|
|
100
|
+
return domain.blend;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* A chart's axis entry tween: what `to({ yAxis: { range } })` moves through.
|
|
104
|
+
* Between two explicit domains it is {@link lerpAxisDomain}, and a restated
|
|
105
|
+
* `range` without `ticks` spreads explicit ticks across it, keeping their count.
|
|
106
|
+
* When either end leaves `range` or `ticks` to the data, the value between is an
|
|
107
|
+
* {@link AxisDomainBlend}, which the chart draws as the blend of what each end
|
|
108
|
+
* draws: a rescale from an auto axis is continuous, not a cut at the midpoint.
|
|
109
|
+
*/
|
|
110
|
+
export function lerpAxisEntry(from, to, t) {
|
|
111
|
+
// The mapper merged the request onto `from`, so a field it left unstated is `from`'s own, by identity.
|
|
112
|
+
const rangeMoved = to.range !== from.range;
|
|
113
|
+
const target = rangeMoved && to.range && to.ticks && to.ticks === from.ticks
|
|
114
|
+
? { ...to, ticks: markerValues(to.range, Math.max(2, to.ticks.length) - 1) }
|
|
115
|
+
: to;
|
|
116
|
+
const blended = blendOf(from) !== undefined;
|
|
117
|
+
const moved = blended || rangeMoved || target.ticks !== from.ticks;
|
|
118
|
+
const auto = blended || from.range === undefined || from.ticks === undefined || target.range === undefined || target.ticks === undefined;
|
|
119
|
+
if (!moved || !auto)
|
|
120
|
+
return lerpAxisDomain(from, target, t);
|
|
121
|
+
if (t === 0)
|
|
122
|
+
return from;
|
|
123
|
+
if (t === 1)
|
|
124
|
+
return target;
|
|
125
|
+
const blend = { ...lerpAxisDomain(from, target, t), blend: { from, to: target, t } };
|
|
126
|
+
return blend;
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* `domain` as the chart draws it: `drawn` resolves a plain domain's auto `range`
|
|
130
|
+
* and `ticks` off the data, and a blend is the lerp of what its two ends draw.
|
|
131
|
+
*/
|
|
132
|
+
export function settleAxisDomain(domain, drawn) {
|
|
133
|
+
const blend = blendOf(domain);
|
|
134
|
+
if (!blend)
|
|
135
|
+
return drawn(domain);
|
|
136
|
+
return lerpAxisDomain(settleAxisDomain(blend.from, drawn), settleAxisDomain(blend.to, drawn), blend.t);
|
|
137
|
+
}
|
|
77
138
|
/**
|
|
78
139
|
* The low-level colour tokens the default themes are built from — a dark plot
|
|
79
140
|
* panel with warm-grey axis furniture.
|
|
@@ -109,7 +170,8 @@ export function clampUnit(value) {
|
|
|
109
170
|
}
|
|
110
171
|
// ---- Row readers ---------------------------------------------------------
|
|
111
172
|
/**
|
|
112
|
-
* Read a numeric field off a row, defaulting missing
|
|
173
|
+
* Read a numeric field off a row, defaulting missing, non-numeric and non-finite
|
|
174
|
+
* values to 0.
|
|
113
175
|
*
|
|
114
176
|
* A column left as strings silently plots as 0, which is why the CSV parser's
|
|
115
177
|
* numeric auto-coercion matters — a quoted or unit-suffixed column won't plot
|
|
@@ -119,7 +181,9 @@ export function num(row, field) {
|
|
|
119
181
|
if (field === undefined)
|
|
120
182
|
return 0;
|
|
121
183
|
const v = row[field];
|
|
122
|
-
|
|
184
|
+
// A `NaN` or infinite cell is no more a measurement than a missing one: read
|
|
185
|
+
// as 0, it cannot poison the scale and turn every point into `NaN`.
|
|
186
|
+
return typeof v === "number" && Number.isFinite(v) ? v : 0;
|
|
123
187
|
}
|
|
124
188
|
/**
|
|
125
189
|
* Read a field off a row as its caption — the counterpart to {@link num} for
|
|
@@ -376,11 +440,42 @@ export function resolvePalettePaint(palette, override, index) {
|
|
|
376
440
|
return palette[index % palette.length];
|
|
377
441
|
}
|
|
378
442
|
// ---- Scales and formatting -----------------------------------------------
|
|
379
|
-
/**
|
|
380
|
-
|
|
443
|
+
/**
|
|
444
|
+
* Format a marker value: integers plain, otherwise trimmed to one decimal, or to
|
|
445
|
+
* as many as the axis's tick `step` needs to tell neighbouring ticks apart.
|
|
446
|
+
*
|
|
447
|
+
* One decimal is the floor, so a step of 0.1 or more reads exactly as it always
|
|
448
|
+
* has; a finer step (a unit axis ticked every 0.05) gets two, instead of five
|
|
449
|
+
* ticks captioned `0.1 0.1 0.2 0.2 0.3`. Trailing zeros are dropped either way.
|
|
450
|
+
*/
|
|
451
|
+
export function formatMarker(value, step) {
|
|
381
452
|
if (Number.isInteger(value))
|
|
382
453
|
return String(value);
|
|
383
|
-
|
|
454
|
+
const decimals = Math.max(1, step === undefined ? 1 : decimalsFor(step));
|
|
455
|
+
return value.toFixed(decimals).replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "");
|
|
456
|
+
}
|
|
457
|
+
/** Decimal places needed to write `step` exactly, capped at six. */
|
|
458
|
+
function decimalsFor(step) {
|
|
459
|
+
if (!(step > 0) || !Number.isFinite(step))
|
|
460
|
+
return 1;
|
|
461
|
+
for (let d = 0; d <= 6; d++) {
|
|
462
|
+
const scaled = step * 10 ** d;
|
|
463
|
+
if (Math.abs(scaled - Math.round(scaled)) < 1e-6 * Math.max(1, scaled))
|
|
464
|
+
return d;
|
|
465
|
+
}
|
|
466
|
+
// An irrational-looking step (a third): as many places as separate the ticks.
|
|
467
|
+
return Math.min(6, Math.max(1, Math.ceil(-Math.log10(step)) + 1));
|
|
468
|
+
}
|
|
469
|
+
/** The gap between neighbouring tick values, or `undefined` for fewer than two distinct ones. */
|
|
470
|
+
export function markerStep(markers) {
|
|
471
|
+
const sorted = [...markers].filter(Number.isFinite).sort((a, b) => a - b);
|
|
472
|
+
let step;
|
|
473
|
+
for (let i = 1; i < sorted.length; i++) {
|
|
474
|
+
const gap = sorted[i] - sorted[i - 1];
|
|
475
|
+
if (gap > 1e-12 && (step === undefined || gap < step))
|
|
476
|
+
step = gap;
|
|
477
|
+
}
|
|
478
|
+
return step;
|
|
384
479
|
}
|
|
385
480
|
/** Format a fraction in `[0, 1]` as a percentage: integers plain, else one decimal. */
|
|
386
481
|
export function formatPercent(fraction) {
|