@motionscript/charts 0.1.1-alpha.0 → 0.1.1-alpha.2

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.
Files changed (207) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/README.md +109 -28
  3. package/dist/bar-chart/bar-chart.d.ts +265 -39
  4. package/dist/bar-chart/bar-chart.d.ts.map +1 -1
  5. package/dist/bar-chart/bar-chart.js +219 -171
  6. package/dist/bar-chart/bar-chart.js.map +1 -1
  7. package/dist/bar-chart/category-axis.d.ts +12 -7
  8. package/dist/bar-chart/category-axis.d.ts.map +1 -1
  9. package/dist/bar-chart/category-axis.js +56 -42
  10. package/dist/bar-chart/category-axis.js.map +1 -1
  11. package/dist/bar-chart/chart-bars.d.ts +76 -52
  12. package/dist/bar-chart/chart-bars.d.ts.map +1 -1
  13. package/dist/bar-chart/chart-bars.js +105 -89
  14. package/dist/bar-chart/chart-bars.js.map +1 -1
  15. package/dist/bar-chart/index.d.ts +4 -4
  16. package/dist/bar-chart/index.d.ts.map +1 -1
  17. package/dist/bar-chart/index.js +2 -2
  18. package/dist/bar-chart/index.js.map +1 -1
  19. package/dist/bar-chart/shared.d.ts +41 -65
  20. package/dist/bar-chart/shared.d.ts.map +1 -1
  21. package/dist/bar-chart/shared.js +73 -117
  22. package/dist/bar-chart/shared.js.map +1 -1
  23. package/dist/browser/chunks/chunk-7XCRX6GE.js +2 -0
  24. package/dist/browser/chunks/chunk-7XCRX6GE.js.map +7 -0
  25. package/dist/browser/index.js +1 -1
  26. package/dist/browser/index.js.map +4 -4
  27. package/dist/browser/kit.js +1 -1
  28. package/dist/browser/manifest.json +1 -1
  29. package/dist/engine.d.ts +5 -2
  30. package/dist/engine.d.ts.map +1 -1
  31. package/dist/engine.js +5 -2
  32. package/dist/engine.js.map +1 -1
  33. package/dist/index.d.ts +2 -0
  34. package/dist/index.d.ts.map +1 -1
  35. package/dist/index.js +2 -0
  36. package/dist/index.js.map +1 -1
  37. package/dist/kit/cartesian.d.ts +51 -15
  38. package/dist/kit/cartesian.d.ts.map +1 -1
  39. package/dist/kit/cartesian.js +81 -29
  40. package/dist/kit/cartesian.js.map +1 -1
  41. package/dist/kit/chart-canvas.d.ts +32 -24
  42. package/dist/kit/chart-canvas.d.ts.map +1 -1
  43. package/dist/kit/chart-canvas.js +52 -46
  44. package/dist/kit/chart-canvas.js.map +1 -1
  45. package/dist/kit/chart-legend.d.ts +8 -4
  46. package/dist/kit/chart-legend.d.ts.map +1 -1
  47. package/dist/kit/chart-legend.js +30 -20
  48. package/dist/kit/chart-legend.js.map +1 -1
  49. package/dist/{line-chart → kit}/horizontal-axis.d.ts +31 -6
  50. package/dist/kit/horizontal-axis.d.ts.map +1 -0
  51. package/dist/{line-chart → kit}/horizontal-axis.js +23 -24
  52. package/dist/kit/horizontal-axis.js.map +1 -0
  53. package/dist/kit/motion.d.ts +5 -0
  54. package/dist/kit/motion.d.ts.map +1 -1
  55. package/dist/kit/motion.js +8 -0
  56. package/dist/kit/motion.js.map +1 -1
  57. package/dist/{pie-chart → kit}/pie-legend.d.ts +3 -3
  58. package/dist/kit/pie-legend.d.ts.map +1 -0
  59. package/dist/{pie-chart → kit}/pie-legend.js +11 -10
  60. package/dist/kit/pie-legend.js.map +1 -0
  61. package/dist/kit/polar.d.ts +31 -0
  62. package/dist/kit/polar.d.ts.map +1 -0
  63. package/dist/kit/polar.js +33 -0
  64. package/dist/kit/polar.js.map +1 -0
  65. package/dist/kit/shared.d.ts +11 -50
  66. package/dist/kit/shared.d.ts.map +1 -1
  67. package/dist/kit/shared.js +58 -141
  68. package/dist/kit/shared.js.map +1 -1
  69. package/dist/kit/style.d.ts +517 -0
  70. package/dist/kit/style.d.ts.map +1 -0
  71. package/dist/kit/style.js +292 -0
  72. package/dist/kit/style.js.map +1 -0
  73. package/dist/kit/vertical-axis.d.ts +22 -2
  74. package/dist/kit/vertical-axis.d.ts.map +1 -1
  75. package/dist/kit/vertical-axis.js +56 -43
  76. package/dist/kit/vertical-axis.js.map +1 -1
  77. package/dist/line-chart/chart-line.d.ts +95 -3
  78. package/dist/line-chart/chart-line.d.ts.map +1 -1
  79. package/dist/line-chart/chart-line.js +165 -53
  80. package/dist/line-chart/chart-line.js.map +1 -1
  81. package/dist/line-chart/chart-region.d.ts +1 -1
  82. package/dist/line-chart/chart-region.d.ts.map +1 -1
  83. package/dist/line-chart/chart-region.js +7 -8
  84. package/dist/line-chart/chart-region.js.map +1 -1
  85. package/dist/line-chart/index.d.ts +5 -6
  86. package/dist/line-chart/index.d.ts.map +1 -1
  87. package/dist/line-chart/index.js +3 -4
  88. package/dist/line-chart/index.js.map +1 -1
  89. package/dist/line-chart/line-chart.d.ts +281 -18
  90. package/dist/line-chart/line-chart.d.ts.map +1 -1
  91. package/dist/line-chart/line-chart.js +284 -134
  92. package/dist/line-chart/line-chart.js.map +1 -1
  93. package/dist/line-chart/shared.d.ts +51 -34
  94. package/dist/line-chart/shared.d.ts.map +1 -1
  95. package/dist/line-chart/shared.js +175 -83
  96. package/dist/line-chart/shared.js.map +1 -1
  97. package/dist/line-chart/x-scale.d.ts +2 -0
  98. package/dist/line-chart/x-scale.d.ts.map +1 -1
  99. package/dist/line-chart/x-scale.js +15 -0
  100. package/dist/line-chart/x-scale.js.map +1 -1
  101. package/dist/nodes.d.ts +3 -1
  102. package/dist/nodes.d.ts.map +1 -1
  103. package/dist/nodes.js +9 -1
  104. package/dist/nodes.js.map +1 -1
  105. package/dist/pie-chart/index.d.ts +2 -3
  106. package/dist/pie-chart/index.d.ts.map +1 -1
  107. package/dist/pie-chart/index.js +1 -2
  108. package/dist/pie-chart/index.js.map +1 -1
  109. package/dist/pie-chart/pie-chart.d.ts +114 -18
  110. package/dist/pie-chart/pie-chart.d.ts.map +1 -1
  111. package/dist/pie-chart/pie-chart.js +38 -24
  112. package/dist/pie-chart/pie-chart.js.map +1 -1
  113. package/dist/pie-chart/pie-ring.d.ts +16 -5
  114. package/dist/pie-chart/pie-ring.d.ts.map +1 -1
  115. package/dist/pie-chart/pie-ring.js +89 -55
  116. package/dist/pie-chart/pie-ring.js.map +1 -1
  117. package/dist/pie-chart/shared.d.ts +61 -62
  118. package/dist/pie-chart/shared.d.ts.map +1 -1
  119. package/dist/pie-chart/shared.js +44 -123
  120. package/dist/pie-chart/shared.js.map +1 -1
  121. package/dist/radar-chart/index.d.ts +5 -0
  122. package/dist/radar-chart/index.d.ts.map +1 -0
  123. package/dist/radar-chart/index.js +5 -0
  124. package/dist/radar-chart/index.js.map +1 -0
  125. package/dist/radar-chart/radar-chart.d.ts +212 -0
  126. package/dist/radar-chart/radar-chart.d.ts.map +1 -0
  127. package/dist/radar-chart/radar-chart.js +224 -0
  128. package/dist/radar-chart/radar-chart.js.map +1 -0
  129. package/dist/radar-chart/radar-grid.d.ts +49 -0
  130. package/dist/radar-chart/radar-grid.d.ts.map +1 -0
  131. package/dist/radar-chart/radar-grid.js +63 -0
  132. package/dist/radar-chart/radar-grid.js.map +1 -0
  133. package/dist/radar-chart/radar-series.d.ts +59 -0
  134. package/dist/radar-chart/radar-series.d.ts.map +1 -0
  135. package/dist/radar-chart/radar-series.js +71 -0
  136. package/dist/radar-chart/radar-series.js.map +1 -0
  137. package/dist/radar-chart/shared.d.ts +78 -0
  138. package/dist/radar-chart/shared.d.ts.map +1 -0
  139. package/dist/radar-chart/shared.js +129 -0
  140. package/dist/radar-chart/shared.js.map +1 -0
  141. package/dist/radial-chart/index.d.ts +6 -0
  142. package/dist/radial-chart/index.d.ts.map +1 -0
  143. package/dist/radial-chart/index.js +4 -0
  144. package/dist/radial-chart/index.js.map +1 -0
  145. package/dist/radial-chart/radial-chart.d.ts +210 -0
  146. package/dist/radial-chart/radial-chart.d.ts.map +1 -0
  147. package/dist/radial-chart/radial-chart.js +175 -0
  148. package/dist/radial-chart/radial-chart.js.map +1 -0
  149. package/dist/radial-chart/radial-rings.d.ts +121 -0
  150. package/dist/radial-chart/radial-rings.d.ts.map +1 -0
  151. package/dist/radial-chart/radial-rings.js +273 -0
  152. package/dist/radial-chart/radial-rings.js.map +1 -0
  153. package/dist/radial-chart/shared.d.ts +77 -0
  154. package/dist/radial-chart/shared.d.ts.map +1 -0
  155. package/dist/radial-chart/shared.js +78 -0
  156. package/dist/radial-chart/shared.js.map +1 -0
  157. package/package.json +4 -4
  158. package/registry.json +21 -6
  159. package/src/bar-chart/bar-chart.ts +263 -179
  160. package/src/bar-chart/category-axis.ts +46 -40
  161. package/src/bar-chart/chart-bars.ts +136 -117
  162. package/src/bar-chart/index.ts +7 -10
  163. package/src/bar-chart/shared.ts +88 -233
  164. package/src/engine.ts +5 -2
  165. package/src/index.ts +2 -0
  166. package/src/kit/cartesian.ts +121 -40
  167. package/src/kit/chart-canvas.ts +49 -54
  168. package/src/kit/chart-legend.ts +28 -20
  169. package/src/kit/horizontal-axis.ts +114 -0
  170. package/src/kit/motion.ts +7 -0
  171. package/src/{pie-chart → kit}/pie-legend.ts +12 -11
  172. package/src/kit/polar.ts +54 -0
  173. package/src/kit/shared.ts +55 -277
  174. package/src/kit/style.ts +353 -0
  175. package/src/kit/vertical-axis.ts +67 -48
  176. package/src/line-chart/chart-line.ts +176 -54
  177. package/src/line-chart/chart-region.ts +6 -10
  178. package/src/line-chart/index.ts +14 -10
  179. package/src/line-chart/line-chart.ts +353 -151
  180. package/src/line-chart/shared.ts +193 -174
  181. package/src/line-chart/x-scale.ts +13 -0
  182. package/src/nodes.ts +9 -1
  183. package/src/pie-chart/index.ts +2 -23
  184. package/src/pie-chart/pie-chart.ts +54 -35
  185. package/src/pie-chart/pie-ring.ts +92 -71
  186. package/src/pie-chart/shared.ts +80 -270
  187. package/src/radar-chart/index.ts +4 -0
  188. package/src/radar-chart/radar-chart.ts +290 -0
  189. package/src/radar-chart/radar-grid.ts +83 -0
  190. package/src/radar-chart/radar-series.ts +88 -0
  191. package/src/radar-chart/shared.ts +153 -0
  192. package/src/radial-chart/index.ts +5 -0
  193. package/src/radial-chart/radial-chart.ts +212 -0
  194. package/src/radial-chart/radial-rings.ts +328 -0
  195. package/src/radial-chart/shared.ts +126 -0
  196. package/dist/browser/chunks/chunk-4SMRCU24.js +0 -2
  197. package/dist/browser/chunks/chunk-4SMRCU24.js.map +0 -7
  198. package/dist/kit/chart-border.d.ts +0 -18
  199. package/dist/kit/chart-border.d.ts.map +0 -1
  200. package/dist/kit/chart-border.js +0 -23
  201. package/dist/kit/chart-border.js.map +0 -1
  202. package/dist/line-chart/horizontal-axis.d.ts.map +0 -1
  203. package/dist/line-chart/horizontal-axis.js.map +0 -1
  204. package/dist/pie-chart/pie-legend.d.ts.map +0 -1
  205. package/dist/pie-chart/pie-legend.js.map +0 -1
  206. package/src/kit/chart-border.ts +0 -36
  207. package/src/line-chart/horizontal-axis.ts +0 -122
package/CHANGELOG.md CHANGED
@@ -1,5 +1,39 @@
1
1
  # @motionscript/charts
2
2
 
3
+ ## 0.1.1-alpha.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 3050906: **Breaking:** every run of text a chart draws gets its own text style, the palette becomes `seriesFills`, and a chart has a background for the whole chart beside one for its grid.
8
+
9
+ - **`Types.typography(textStyle)`** (core, sdk): one text style as an entry (face, size, weight, style, spacing, paint). A partial is laid over the default or the value it replaces, so `{ fill }` recolours and keeps the rest; it tweens key by key. `describe()` reports `kind: "typography"` with its default.
10
+ - **Chart text** (charts): `foreground`, `muted`, `fontFamily`, `fontSize` and `fontWeight` are gone. Line and bar charts have `xLabelText`, `xTitleText`, `yLabelText`, `yTitleText`, `valueText` and `legendText`; a pie `labelText`, `valueText`, `centerText` and `legendText`; a radar `spokeText`; a radial `labelText` and `centerText`. Spacing that followed the one size now follows the text it sits beside.
11
+ - **Series fills**: `palette` is `seriesFills` (group `series`), each entry a fill that may stack paints.
12
+ - **Backgrounds**: `background` (group `background`) paints behind the whole chart on every chart; line, bar and radar charts add `gridBackground` for the plot (inside the web on a radar). A line or bar chart's old `background`, which painted the plot, is now `gridBackground`.
13
+ - **Bar corners**: `barRadius` is `barCornerRadius`, a `Types.cornerRadius` read as for a bar standing up (top pair at the far end, bottom pair at the base), with `barCornerStyle` (rounded or angled) beside it. `barWidth` reports itself as a percentage.
14
+ - Each chart's `migrate` hook (`migrateChartStyle`) carries a stored style across: the palette, the two inks and the shared type become the new fields as each chart derived them, a plot background becomes `gridBackground`, and a `barRadius` keeps rounding only the far end.
15
+
16
+ Migration: a stored document needs nothing done to it. Each chart's `migrate` hook converts its stored `style` (and a `to` command's) as the document opens: `palette` to `seriesFills`, `foreground`, `muted` and the font fields to the text fields as the chart derived them (titles 1.1× and a weight heavier, values as before), a line, bar or radar chart's `background` to `gridBackground`, and a number `barRadius` to `barCornerRadius` with only the top pair rounded. Code that sets these fields by hand, or a host that reads a chart's stored `style`, uses the new names; `migrateChartStyle(layout)` converts a style object the same way.
17
+
18
+ ## 0.1.1-alpha.1
19
+
20
+ ### Patch Changes
21
+
22
+ - 1810e8a: **Breaking:** the charts are rebuilt around one `style` entry, and the kit gains a radar and a radial chart.
23
+
24
+ - **One look entry.** Every chart's `theme` (and its `DEFAULT_*_THEME`, `resolve*Theme`, `lerp*Theme`) is gone, along with `showLegend` and the bar chart's `showValues`. Each chart has `style: Types.style("chart", …)` instead, with fields grouped as colours (`palette`, `foreground`, `muted`, `background`), text (`fontFamily`, `fontSize`, `fontWeight`), grid (`horizontalGrid`, `verticalGrid` and `axisStroke` on a line or bar chart, `gridStroke` and `spokeStroke` on a radar, all strokes, so weight, colour, dash and caps come with them and an empty one draws nothing), marks, labels and legend (`legend`: bottom, top, right or none; `swatch`: square, circle or line). A chart takes only the fields it draws, and one style dresses any chart. `CHART_STYLE_PRESETS` (midnight, paper, ember, neon, ocean, sunset, pastel, mono) are partial looks to spread in; `to({ style })` tweens a restyle.
25
+ - **Line and area are one chart.** `lineChart` draws curves `smooth` (monotone, never overshooting), `linear` or `step`, optional dots, and `style.area` of `none`, `solid` or `gradient` under each line. `stack` is `none`, `stacked` or `percent`. Up to twelve categorical or dated samples each get a tick.
26
+ - **Bars.** `barChart` takes `orientation` (`vertical` or `horizontal`) and `stack` (`none`, `stacked` or `percent`; replaces `stacked`). Negative values grow from zero, only a stack's outer end is rounded, and `style.values` puts figures at the `end` of a bar or `inside` it.
27
+ - **Pie.** `style.innerRadius` makes a donut; `sliceGap`, `sliceRadius` and `labelPlacement` (`inside`, `outside`, `none`) are style fields.
28
+ - **New: `radarChart`.** One spoke per row, one polygon per series, a `polygon` or `circle` grid, with `enter` and the series commands.
29
+ - **A line is a stroke, an area is a fill.** A radial's `track` is a fill (empty for none). There is no grid width, dash, axis-line, spoke or track switch, and no `gridColor`. A series' `label` is optional: the legend shows `label || field`.
30
+ - **New: `radialChart`.** One ring per row, swept by `value / max` over `style.sweep` degrees from `style.startAngle`, with tracks, round caps, ring labels, a centre summary, `enter`, `selectRing`, `clearSelection` and `revealCenter`.
31
+ - **The kit** draws no plot border by default, puts each legend swatch before its caption, and moves `HorizontalAxis`, the polar helpers (`kit/polar`) and `PieLegend` behind the kit barrel, so a copied chart reaches only the kit. Removed from `./kit`: `ChartBorder`, `CHART_PALETTE`, `DEFAULT_PLOT_AREA`, `PlotAreaConfig`, `DEFAULT_SERIES_COLORS` (use `CHART_PALETTE_DEFAULT`), `DEFAULT_SERIES_STROKES`, `DEFAULT_SERIES_FILLS`, `LegendTheme`, and the theme helpers `resolveAxisConfig`, `lerpAxisConfig`, `resolvePlotArea`, `lerpPlotArea`, `resolveLegendConfig`, `lerpLegendConfig`, `resolveSeriesStrokes`, `lerpSeriesStrokes`, `resolveSeriesFills`, `lerpSeriesFills`, `resolveSeriesStroke` and `resolveSeriesFill` (a chart's colours come from `seriesFill`/`paletteFill` over its style).
32
+
33
+ The renderer's path and paint cache keys no longer collide for shapes mirrored through the origin, which drew two symmetric grid rules as one.
34
+
35
+ Migration: nothing converts a stored chart. A document row's `theme`, `showLegend`, `showValues` and `stacked` are dropped on open and the chart draws in the default style; a host with stored charts rewrites them: `theme` → a `style` partial (series colours to `palette`, text colours to `foreground`/`muted`), `showLegend: false` → `style.legend: "none"`, `showValues: true` → `style.values: "end"`, `stacked: true` → `stack: "stacked"`, `gridColor`/`gridWidth`/`gridDashed` → `horizontalGrid`/`verticalGrid` (or `gridStroke` on a radar), `grid: "vertical"` → `verticalGrid` on and `horizontalGrid: []`, `axisLine` → `axisStroke`, `spokes: false` → `spokeStroke: []`, a radial's `track: false` → `track: []`, and a pie's `labelPlacement` → `style.labelPlacement` (`leader` is now `outside`).
36
+
3
37
  ## 0.1.1-alpha.0
4
38
 
5
39
  ### Patch Changes
package/README.md CHANGED
@@ -1,14 +1,15 @@
1
1
  # @motionscript/charts
2
2
 
3
- Animated data charts for [Motion Script](https://motionscript.dev): a line chart,
4
- a bar chart and a pie chart, built from one shared kit (plot panel, value axis,
5
- legend, number formatting, theme resolution). Written against
3
+ Animated data charts for [Motion Script](https://motionscript.dev): a line chart
4
+ (which is also the area chart), a bar chart, a pie chart, a radar chart and a
5
+ radial chart, built from one shared kit (plot panel, value axis, legend, number
6
+ formatting) and dressed by one `style` entry. Written against
6
7
  [`@motionscript/sdk`](https://github.com/motionscript-dev/motionscript/tree/main/packages/sdk), which it takes as a peer dependency.
7
8
 
8
9
  ```ts
9
10
  import { NODES } from '@motionscript/charts';
10
11
 
11
- export const nodes = NODES; // [LineChart, BarChart, PieChart]
12
+ export const nodes = NODES; // [LineChart, BarChart, PieChart, RadarChart, RadialChart]
12
13
  ```
13
14
 
14
15
  Importing registers nothing; the host hands `NODES` to the engine (see
@@ -24,36 +25,109 @@ npm install @motionscript/charts @motionscript/sdk
24
25
 
25
26
  | Path | Source | What |
26
27
  |---|---|---|
27
- | `@motionscript/charts` | `src/index.ts` | the three chart barrels, `src/engine.ts` and `NODES` |
28
- | `@motionscript/charts/kit` | `src/engine.ts` | the shared kit (`src/kit/*`) and all of `@motionscript/sdk/component` |
29
-
30
- Each chart folder (`line-chart/`, `bar-chart/`, `pie-chart/`) has an `index.ts`
31
- barrel with the node, its parts, its theme (`DEFAULT_*_THEME`, `resolve*Theme`,
32
- `lerp*Theme`) and its pure helpers (`resolveXScale`, `barSpans`, `pieArcs`, ...).
33
- The charts and their parts (`ChartLine`, `ChartBars`, `PieRing`, `VerticalAxis`, ...)
34
- are components (`component2d`); only the charts are registered node types, so a
35
- document cannot name a part. A chart tells a host its key, entries and commands;
36
- where it is shelved and the box it is seeded at are the host's to keep. `lineChartDomains` and `barChartDomain` give the axes as drawn, and
37
- `isSliceSelected` whether a pie slice is out.
28
+ | `@motionscript/charts` | `src/index.ts` | the five chart barrels, `src/engine.ts` and `NODES` |
29
+ | `@motionscript/charts/kit` | `src/engine.ts` | the shared kit (`src/kit/*`, including `kit/style`, `kit/polar` and `PieLegend`) and all of `@motionscript/sdk/component` |
30
+
31
+ Each chart folder (`line-chart/`, `bar-chart/`, `pie-chart/`, `radar-chart/`,
32
+ `radial-chart/`) has an `index.ts` barrel with the node, its parts and its pure
33
+ helpers (`resolveXScale`, `barSpans`, `pieArcs`, ...). The charts and their parts
34
+ (`ChartLine`, `ChartBars`, `PieRing`, `VerticalAxis`, ...) are components
35
+ (`component2d`); only the charts are registered node types, so a document cannot
36
+ name a part. A chart tells a host its key, entries and commands; where it is
37
+ shelved and the box it is seeded at are the host's to keep. `lineChartDomains` and
38
+ `barChartDomain` give the axes as drawn, and `isSliceSelected` whether a pie slice
39
+ is out.
40
+
41
+ The style kit exports `CHART_STYLE_FAMILY` (`"chart"`), `CHART_STYLE_PRESETS`,
42
+ `CHART_PALETTE_DEFAULT`, the shared field groups (`CHART_SERIES`,
43
+ `CHART_BACKGROUND`, `GRID_BACKGROUND`, `CARTESIAN_TEXT`, `LEGEND_TEXT`,
44
+ `CARTESIAN_GRID`, `CHART_LEGEND`) and `migrateChartStyle`, each chart's
45
+ `migrate` hook for styles written before 0.1.1-alpha.2.
38
46
 
39
47
  ## Nodes
40
48
 
41
49
  | Key | Made for (w x h) | Data props | Commands |
42
50
  |---|---|---|---|
43
- | `lineChart` | 760 x 460 | `data`, `xField`, `series`, `xAxis`, `yAxis`, `region` | `enter`, `spotlightRegion`, `clearRegion`, `zoomTo`, `resetZoom`, `showSeries`/`hideSeries`/`spotlightSeries` |
44
- | `barChart` | 760 x 460 | `data`, `categoryField`, `series`, `valueAxis`, `stacked` | `enter`, `showSeries`/`hideSeries`/`spotlightSeries`, `spotlightCategory`, `clearCategory` |
45
- | `pieChart` | 680 x 480 | `data`, `categoryField`, `valueField` | `enter`, `revealCenter`, `selectSlice`/`deselectSlice`/`selectOnlySlice`/`clearSelection` |
51
+ | `lineChart` | 760 x 460 | `data`, `xField`, `series`, `stack`, `xAxis`, `yAxis`, `region` | `enter`, `spotlightRegion`, `clearRegion`, `zoomTo`, `resetZoom`, `showSeries`/`hideSeries`/`spotlightSeries` |
52
+ | `barChart` | 760 x 460 | `data`, `categoryField`, `series`, `orientation`, `stack`, `valueAxis`, `categoryAxis` | `enter`, `showSeries`/`hideSeries`/`spotlightSeries`, `spotlightCategory`, `clearCategory` |
53
+ | `pieChart` | 680 x 480 | `data`, `categoryField`, `valueField`, `labelMode`, `centerLabel`, `centerCaption` | `enter`, `revealCenter`, `selectSlice`/`deselectSlice`/`selectOnlySlice`/`clearSelection` |
54
+ | `radarChart` | 680 x 480 | `data`, `categoryField`, `series`, `min`, `max` | `enter`, `showSeries`/`hideSeries`/`spotlightSeries` |
55
+ | `radialChart` | 560 x 560 | `data`, `categoryField`, `valueField`, `max`, `centerLabel`, `centerCaption` | `enter`, `revealCenter`, `selectRing`, `clearSelection` |
46
56
 
47
57
  Every command takes the duration its row (or call) gives, and eases out unless
48
- given an easing. Arguments: `seriesIndex`, `sliceIndex`, `categoryIndex` (each 0
49
- when left out), and for `spotlightRegion` and `zoomTo` a `region` of
50
- `{ x?: [min, max], y?: [min, max] }`.
58
+ given an easing. Arguments: `seriesIndex`, `sliceIndex`, `categoryIndex`,
59
+ `ringIndex` (each 0 when left out), and for `spotlightRegion` and `zoomTo` a
60
+ `region` of `{ x?: [min, max], y?: [min, max] }`.
61
+
62
+ `lineChart` draws a line or an area chart: `style.area` of `none`, `solid` or
63
+ `gradient` fills under each line. `pieChart` draws a donut once `style.innerRadius`
64
+ is above 0.
65
+
66
+ ## Styling
67
+
68
+ Each chart has one look entry, `style`, and nothing else about colour or type:
69
+ no `theme`, no `showLegend`. Its fields come in groups, written grouped and read
70
+ flat (`state.style.xLabelText`):
71
+
72
+ | Group | Fields | On |
73
+ |---|---|---|
74
+ | series | `seriesFills`: a fill per series (per row on a pie or radial), cycled; each may stack paints | every chart |
75
+ | background | `background` (the whole chart), `gridBackground` (the plot, under the grid) | every chart; `gridBackground` on line, bar, radar |
76
+ | text | `xLabelText`, `xTitleText`, `yLabelText`, `yTitleText`, `valueText`, `legendText` | line, bar |
77
+ | text | `labelText`, `valueText`, `centerText`, `legendText` | pie |
78
+ | text | `spokeText`, `legendText` (radar); `labelText`, `centerText`, `legendText` (radial) | radar, radial |
79
+ | grid | `horizontalGrid` (a 2px `white/15` stroke), `verticalGrid` (none), `axisStroke` (none), `showXAxis`, `showYAxis` | line, bar |
80
+ | grid | `gridShape`, `gridLevels`, `gridStroke` (rings), `spokeStroke` (spokes), `spokeLabels` | radar |
81
+ | marks | the chart's own: `strokeWidth`, `curve`, `dots`, `area`, `barCornerRadius`, `barCornerStyle`, `innerRadius`, `sweep`, ... | every chart |
82
+ | labels | `values` (line, bar), `labelPlacement` (pie), `ringLabels` (radial) | |
83
+
84
+ Every run of text is a `Types.typography` field (face, size, weight, style,
85
+ spacing, paint), so each is set like a text node; a partial (`{ fill }`) keeps the
86
+ rest of the field's default. The chart places and aligns the text itself.
87
+ `barCornerRadius` and `barCornerStyle` read as for a bar standing up: the top
88
+ pair round its far end, the bottom pair its base, turned with the bar.
89
+
90
+ A line is a stroke and an area is a fill: `horizontalGrid`, `verticalGrid`, `axisStroke`, `gridStroke`
91
+ and `spokeStroke` are `Types.stroke` entries (weight, colour, dash and caps; empty draws
92
+ nothing), and a radial's `track` is a `Types.fill` (empty draws no track). A series' `label`
93
+ is optional; the legend shows `label || field`.
94
+ | legend | `legend` (`bottom`, `top`, `right`, `none`), `swatch` (`square`, `circle`, `line`) | every chart |
95
+
96
+ A chart takes only the fields it draws. A style is a partial laid over the chart's
97
+ previous style, and a key the chart does not have is dropped, so one style dresses
98
+ every chart in the family.
99
+
100
+ `CHART_STYLE_PRESETS` (`midnight`, `paper`, `ember`, `neon`, `ocean`, `sunset`,
101
+ `pastel`, `mono`) are colour-only partials (each text field's `fill`, the rules, the backgrounds). Spread one into a style and add to it:
102
+
103
+ ```ts
104
+ import { CHART_STYLE_PRESETS } from '@motionscript/charts';
105
+
106
+ const props = {
107
+ // ...data, series
108
+ style: { ...CHART_STYLE_PRESETS.paper, legendText: { fontSize: 32 }, area: 'gradient' },
109
+ };
110
+ ```
111
+
112
+ Restyle with a `to` command, which tweens colours, sizes and weights and steps
113
+ everything else at the midpoint:
114
+
115
+ ```ts
116
+ { id: 'restyle', type: 'to', targetId: 'chart', at: 3, duration: 1,
117
+ args: { style: CHART_STYLE_PRESETS.ember } }
118
+ ```
119
+
120
+ Fields marked read-once below (`legend`, `showXAxis`, `showYAxis`, `values`,
121
+ `labelPlacement`, `spokeLabels`) shape which parts are built; a `to` of them
122
+ steps rather than tweens, and a document edit rebuilds the node.
51
123
 
52
124
  ## Rules worth knowing
53
125
 
54
126
  - **The kit stays an import.** A copy of `line-chart` takes only `line-chart/*` and
55
127
  rewrites its kit imports to `@motionscript/charts` (`registry.json`): a second
56
- copy of `VerticalAxis` would render as nothing, with no error.
128
+ copy of `VerticalAxis` would render as nothing, with no error. The kit includes
129
+ `kit/polar` and `PieLegend`, which the pie, radar and radial charts reach for, so
130
+ a copy of any chart reaches only the kit.
57
131
  - **Resting state is the finished chart.** `enter` arms every part on its first
58
132
  frame: every piece of a component command is built run to its end, and a beat
59
133
  ahead of the playhead writes nothing, so the first frame writes what each later
@@ -63,14 +137,18 @@ when left out), and for `spotlightRegion` and `zoomTo` a `region` of
63
137
  duration and easing it moves with; called directly, a part's command takes the
64
138
  duration it is given, and a part's own frames ease out unless given an easing.
65
139
  - **Some props are read once, at construction**: the series list (count, labels,
66
- `enabled`), `showLegend`, `showValues`, `showCenter`, axis captions, text styles and
67
- paddings, the bar chart's category captions, the pie's label and legend-row counts,
68
- `labelMode`, `labelPlacement`, `gap`, `centerLabel`, `centerCaption`. A `set` or `to`
69
- of them changes nothing; a document edit re-instantiates the node, which does
70
- refresh them. `data`, scales, ticks, theme paints, `region`, `stacked`, `weights`
140
+ `enabled`), `orientation`, `showCenter`, axis captions, the bar chart's category
141
+ captions, the pie's and radial's label and legend-row counts, `labelMode`, `gap`,
142
+ `centerLabel`, `centerCaption`, and the style fields `legend`, `showXAxis`,
143
+ `showYAxis`, `values`, `labelPlacement`, `spokeLabels`. A `set` or `to` of them
144
+ changes nothing; a document edit re-instantiates the node, which does refresh
145
+ them. `data`, scales, ticks, every other style field, `region`, `stack`, `weights`
71
146
  and `pops` are live.
72
147
  - **Non-finite cells plot as 0.** `num()` returns a cell only when it is a finite
73
148
  number, so a numeric string, `NaN`, `Infinity` and a missing cell all read 0.
149
+ - **`horizontalGrid` and `verticalGrid` are literal.** They name the lines drawn, not an axis: a
150
+ horizontal bar chart that wants rules along its value axis sets `verticalGrid` and
151
+ `horizontalGrid: []`.
74
152
  - **x units on the line chart.** `xAxis.range`, `xAxis.ticks` and a region's `x`
75
153
  are in the x scale's own units: the number (numeric column), UTC epoch
76
154
  milliseconds (time column) or the row index (ordinal column), chosen from the
@@ -85,7 +163,10 @@ when left out), and for `spotlightRegion` and `zoomTo` a `region` of
85
163
  the chart settles against its data, so a rescale from an auto axis is continuous.
86
164
  A restated range without ticks spreads explicit ticks across it; one side of an
87
165
  auto axis restated alone leaves the other to the data.
88
- - **Pie angles** are radians clockwise from 12 o'clock; `startAngle` is degrees.
166
+ - **Pie angles** are radians clockwise from 12 o'clock. A radial's `startAngle` and
167
+ `sweep` are degrees, `startAngle` clockwise from 12 o'clock.
168
+ - **Centre text needs a hole.** A pie shows `centerLabel` and `centerCaption` only
169
+ with `style.innerRadius` above 0; a radial's hole is `style.innerRadius` too.
89
170
 
90
171
  ## Development
91
172
 
@@ -1,47 +1,162 @@
1
- import { type DataRecord, type NodeOf, type Node2D, type Node2DProps as _Node2DProps } from "@motionscript/sdk";
1
+ import { type DataRecord, type NodeOf, type OutOf, type Node2D, type Node2DProps as _Node2DProps, type TextStyle as _TextStyle, type CornerRadiusResolved as _CornerRadiusResolved, type CornerStyleResolved as _CornerStyleResolved, type RectCornerRadius as _RectCornerRadius, type RectCornerStyle as _RectCornerStyle, type Fill as _Fill, type FillResolved as _FillResolved, type Stroke as _Stroke, type StrokeResolved as _StrokeResolved, type StyleInput as _StyleInput, type StyleValues as _StyleValues } from "@motionscript/sdk";
2
2
  import { type AxisDomainConfig, type ResolvedAxisDomain } from "../kit/shared.js";
3
- import { type BarChartConfig, type BarChartTheme, type BarSeries } from "./shared.js";
3
+ import { type BarSeries, type BarStack } from "./shared.js";
4
+ declare const BAR_STYLE: import("@motionscript/sdk").Type<_StyleInput<{
5
+ gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
6
+ background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
7
+ } & {
8
+ legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
9
+ swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
10
+ } & {
11
+ horizontalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
12
+ verticalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
13
+ axisStroke: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
14
+ showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
15
+ showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
16
+ } & {
17
+ legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
18
+ xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
19
+ xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
20
+ yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
21
+ yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
22
+ valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
23
+ } & {
24
+ seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
25
+ } & {
26
+ barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
27
+ barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
28
+ barWidth: import("@motionscript/sdk").Type<number, number, false>;
29
+ barGap: import("@motionscript/sdk").Type<number, number, false>;
30
+ } & {
31
+ values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
32
+ }>, _StyleValues<{
33
+ gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
34
+ background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
35
+ } & {
36
+ legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
37
+ swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
38
+ } & {
39
+ horizontalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
40
+ verticalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
41
+ axisStroke: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
42
+ showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
43
+ showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
44
+ } & {
45
+ legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
46
+ xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
47
+ xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
48
+ yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
49
+ yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
50
+ valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
51
+ } & {
52
+ seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
53
+ } & {
54
+ barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
55
+ barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
56
+ barWidth: import("@motionscript/sdk").Type<number, number, false>;
57
+ barGap: import("@motionscript/sdk").Type<number, number, false>;
58
+ } & {
59
+ values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
60
+ }>, false>;
61
+ /** A bar chart's resolved style. */
62
+ export type BarChartStyle = OutOf<typeof BAR_STYLE>;
4
63
  /** What a bar chart plots, as its entries hold it. */
5
64
  export interface BarChartValues {
6
65
  readonly data: DataRecord[];
7
66
  readonly series: BarSeries[];
8
- readonly stacked: boolean;
67
+ readonly stack: BarStack;
9
68
  readonly valueAxis: AxisDomainConfig;
10
69
  }
11
70
  /** The value axis's domain with its range and ticks resolved. */
12
71
  export type BarChartDomain = ResolvedAxisDomain;
13
- /** The value axis as drawn now. */
72
+ /** The value axis as drawn now. A series being hidden keeps its room, so the ticks hold still while it goes. */
14
73
  export declare function barChartDomain(s: BarChartValues): BarChartDomain;
15
74
  /**
16
- * A grouped or stacked bar chart, built like the line chart from `ChartCanvas`,
17
- * `VerticalAxis`, {@link CategoryAxis}, one {@link ChartBars} per series and
18
- * `ChartLegend`. Zero is always on the scale and columns grow about it, so a
19
- * negative value draws downward from the same `growth` signal.
75
+ * A bar chart, vertical or horizontal, its series side by side, stacked, or
76
+ * stacked as shares of 100. Built like the line chart from `ChartCanvas`, a
77
+ * value axis, a {@link CategoryAxis}, one {@link ChartBars} per series and
78
+ * `ChartLegend`. Zero is always on the scale and bars grow about it, so a
79
+ * negative value draws the other way from the same `growth` signal.
20
80
  *
21
81
  * Resting state is the finished chart; `enter` arms every part on its first
22
82
  * frame. A `to` of the value axis's `range` or `ticks` tweens from the domain as
23
- * drawn, so an auto axis rescales the columns continuously.
83
+ * drawn, so an auto axis rescales the bars continuously.
24
84
  */
25
85
  export declare const BarChart: import("@motionscript/sdk").Component<"barChart", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
26
86
  readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
27
87
  readonly categoryField: "";
28
88
  readonly series: import("@motionscript/sdk").Type<import("../index.js").ChartSeries[], import("../index.js").ChartSeries[], false>;
29
- readonly stacked: false;
89
+ /** `vertical`: columns rise from a row of categories; `horizontal`: bars grow right from a column of them. */
90
+ readonly orientation: import("@motionscript/sdk").Type<"horizontal" | "vertical", "horizontal" | "vertical", false>;
91
+ /** `stacked`: each series sits on the sum of those before it; `percent`: every category reads as shares of 100. */
92
+ readonly stack: import("@motionscript/sdk").Type<"none" | "percent" | "stacked", "none" | "percent" | "stacked", false>;
30
93
  readonly valueAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
31
94
  readonly categoryAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
32
- readonly theme: import("@motionscript/sdk").Type<BarChartTheme, BarChartConfig, false>;
33
- /** Rise of every column about the baseline, `[0, 1]`: 0 collapses them onto it. */
95
+ readonly style: import("@motionscript/sdk").Type<_StyleInput<{
96
+ gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
97
+ background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
98
+ } & {
99
+ legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
100
+ swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
101
+ } & {
102
+ horizontalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
103
+ verticalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
104
+ axisStroke: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
105
+ showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
106
+ showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
107
+ } & {
108
+ legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
109
+ xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
110
+ xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
111
+ yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
112
+ yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
113
+ valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
114
+ } & {
115
+ seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
116
+ } & {
117
+ barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
118
+ barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
119
+ barWidth: import("@motionscript/sdk").Type<number, number, false>;
120
+ barGap: import("@motionscript/sdk").Type<number, number, false>;
121
+ } & {
122
+ values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
123
+ }>, _StyleValues<{
124
+ gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
125
+ background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
126
+ } & {
127
+ legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
128
+ swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
129
+ } & {
130
+ horizontalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
131
+ verticalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
132
+ axisStroke: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
133
+ showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
134
+ showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
135
+ } & {
136
+ legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
137
+ xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
138
+ xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
139
+ yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
140
+ yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
141
+ valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
142
+ } & {
143
+ seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
144
+ } & {
145
+ barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
146
+ barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
147
+ barWidth: import("@motionscript/sdk").Type<number, number, false>;
148
+ barGap: import("@motionscript/sdk").Type<number, number, false>;
149
+ } & {
150
+ values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
151
+ }>, false>;
152
+ /** Rise of every bar about the baseline, `[0, 1]`: 0 collapses them onto it. */
34
153
  readonly growth: 1;
35
- /** Each series' share of the slot, seeded from `enabled`: a weight rather than a switch, so hiding one widens the others. */
36
- readonly weights: import("@motionscript/sdk").Type<number[], number[], false>;
37
154
  /** The category spotlit, or `null`. The choice snaps; `spotlightReveal` animates it. */
38
155
  readonly spotlight: import("@motionscript/sdk").Type<number | null, number | null, false>;
39
156
  readonly spotlightReveal: 0;
40
- /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
41
- readonly showLegend: import("@motionscript/sdk").Type<boolean, boolean, false>;
42
- /** Read as the chart is built: whether each column prints the figure it plots. */
43
- readonly showValues: import("@motionscript/sdk").Type<boolean, boolean, false>;
44
- /** Whether each series' columns are drawn: on for every frame a show or hide covers, off once a hide lands. */
157
+ /** Each series' share of the slot, seeded from `enabled`: a weight rather than a switch, so hiding one widens the others. */
158
+ readonly weights: import("@motionscript/sdk").Type<number[], number[], false>;
159
+ /** Whether each series' bars are drawn: on for every frame a show or hide covers, off once a hide lands. */
45
160
  readonly showing: import("@motionscript/sdk").Type<boolean[], boolean[], false>;
46
161
  }>, {
47
162
  readonly enter: {};
@@ -62,43 +177,153 @@ export declare const BarChart: import("@motionscript/sdk").Component<"barChart",
62
177
  readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
63
178
  readonly categoryField: "";
64
179
  readonly series: import("@motionscript/sdk").Type<import("../index.js").ChartSeries[], import("../index.js").ChartSeries[], false>;
65
- readonly stacked: false;
180
+ /** `vertical`: columns rise from a row of categories; `horizontal`: bars grow right from a column of them. */
181
+ readonly orientation: import("@motionscript/sdk").Type<"horizontal" | "vertical", "horizontal" | "vertical", false>;
182
+ /** `stacked`: each series sits on the sum of those before it; `percent`: every category reads as shares of 100. */
183
+ readonly stack: import("@motionscript/sdk").Type<"none" | "percent" | "stacked", "none" | "percent" | "stacked", false>;
66
184
  readonly valueAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
67
185
  readonly categoryAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
68
- readonly theme: import("@motionscript/sdk").Type<BarChartTheme, BarChartConfig, false>;
69
- /** Rise of every column about the baseline, `[0, 1]`: 0 collapses them onto it. */
186
+ readonly style: import("@motionscript/sdk").Type<_StyleInput<{
187
+ gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
188
+ background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
189
+ } & {
190
+ legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
191
+ swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
192
+ } & {
193
+ horizontalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
194
+ verticalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
195
+ axisStroke: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
196
+ showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
197
+ showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
198
+ } & {
199
+ legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
200
+ xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
201
+ xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
202
+ yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
203
+ yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
204
+ valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
205
+ } & {
206
+ seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
207
+ } & {
208
+ barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
209
+ barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
210
+ barWidth: import("@motionscript/sdk").Type<number, number, false>;
211
+ barGap: import("@motionscript/sdk").Type<number, number, false>;
212
+ } & {
213
+ values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
214
+ }>, _StyleValues<{
215
+ gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
216
+ background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
217
+ } & {
218
+ legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
219
+ swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
220
+ } & {
221
+ horizontalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
222
+ verticalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
223
+ axisStroke: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
224
+ showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
225
+ showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
226
+ } & {
227
+ legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
228
+ xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
229
+ xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
230
+ yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
231
+ yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
232
+ valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
233
+ } & {
234
+ seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
235
+ } & {
236
+ barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
237
+ barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
238
+ barWidth: import("@motionscript/sdk").Type<number, number, false>;
239
+ barGap: import("@motionscript/sdk").Type<number, number, false>;
240
+ } & {
241
+ values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
242
+ }>, false>;
243
+ /** Rise of every bar about the baseline, `[0, 1]`: 0 collapses them onto it. */
70
244
  readonly growth: 1;
71
- /** Each series' share of the slot, seeded from `enabled`: a weight rather than a switch, so hiding one widens the others. */
72
- readonly weights: import("@motionscript/sdk").Type<number[], number[], false>;
73
245
  /** The category spotlit, or `null`. The choice snaps; `spotlightReveal` animates it. */
74
246
  readonly spotlight: import("@motionscript/sdk").Type<number | null, number | null, false>;
75
247
  readonly spotlightReveal: 0;
76
- /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
77
- readonly showLegend: import("@motionscript/sdk").Type<boolean, boolean, false>;
78
- /** Read as the chart is built: whether each column prints the figure it plots. */
79
- readonly showValues: import("@motionscript/sdk").Type<boolean, boolean, false>;
80
- /** Whether each series' columns are drawn: on for every frame a show or hide covers, off once a hide lands. */
248
+ /** Each series' share of the slot, seeded from `enabled`: a weight rather than a switch, so hiding one widens the others. */
249
+ readonly weights: import("@motionscript/sdk").Type<number[], number[], false>;
250
+ /** Whether each series' bars are drawn: on for every frame a show or hide covers, off once a hide lands. */
81
251
  readonly showing: import("@motionscript/sdk").Type<boolean[], boolean[], false>;
82
252
  }>, readonly [], import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
83
253
  readonly data: import("@motionscript/sdk").Type<DataRecord[], DataRecord[], false>;
84
254
  readonly categoryField: "";
85
255
  readonly series: import("@motionscript/sdk").Type<import("../index.js").ChartSeries[], import("../index.js").ChartSeries[], false>;
86
- readonly stacked: false;
256
+ /** `vertical`: columns rise from a row of categories; `horizontal`: bars grow right from a column of them. */
257
+ readonly orientation: import("@motionscript/sdk").Type<"horizontal" | "vertical", "horizontal" | "vertical", false>;
258
+ /** `stacked`: each series sits on the sum of those before it; `percent`: every category reads as shares of 100. */
259
+ readonly stack: import("@motionscript/sdk").Type<"none" | "percent" | "stacked", "none" | "percent" | "stacked", false>;
87
260
  readonly valueAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
88
261
  readonly categoryAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
89
- readonly theme: import("@motionscript/sdk").Type<BarChartTheme, BarChartConfig, false>;
90
- /** Rise of every column about the baseline, `[0, 1]`: 0 collapses them onto it. */
262
+ readonly style: import("@motionscript/sdk").Type<_StyleInput<{
263
+ gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
264
+ background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
265
+ } & {
266
+ legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
267
+ swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
268
+ } & {
269
+ horizontalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
270
+ verticalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
271
+ axisStroke: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
272
+ showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
273
+ showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
274
+ } & {
275
+ legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
276
+ xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
277
+ xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
278
+ yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
279
+ yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
280
+ valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
281
+ } & {
282
+ seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
283
+ } & {
284
+ barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
285
+ barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
286
+ barWidth: import("@motionscript/sdk").Type<number, number, false>;
287
+ barGap: import("@motionscript/sdk").Type<number, number, false>;
288
+ } & {
289
+ values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
290
+ }>, _StyleValues<{
291
+ gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
292
+ background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
293
+ } & {
294
+ legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
295
+ swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
296
+ } & {
297
+ horizontalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
298
+ verticalGrid: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
299
+ axisStroke: import("@motionscript/sdk").Type<_Stroke, _StrokeResolved[], false>;
300
+ showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
301
+ showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
302
+ } & {
303
+ legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
304
+ xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
305
+ xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
306
+ yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
307
+ yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
308
+ valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
309
+ } & {
310
+ seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
311
+ } & {
312
+ barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
313
+ barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
314
+ barWidth: import("@motionscript/sdk").Type<number, number, false>;
315
+ barGap: import("@motionscript/sdk").Type<number, number, false>;
316
+ } & {
317
+ values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
318
+ }>, false>;
319
+ /** Rise of every bar about the baseline, `[0, 1]`: 0 collapses them onto it. */
91
320
  readonly growth: 1;
92
- /** Each series' share of the slot, seeded from `enabled`: a weight rather than a switch, so hiding one widens the others. */
93
- readonly weights: import("@motionscript/sdk").Type<number[], number[], false>;
94
321
  /** The category spotlit, or `null`. The choice snaps; `spotlightReveal` animates it. */
95
322
  readonly spotlight: import("@motionscript/sdk").Type<number | null, number | null, false>;
96
323
  readonly spotlightReveal: 0;
97
- /** Read as the chart is built: the legend is a part the chart builds or doesn't. */
98
- readonly showLegend: import("@motionscript/sdk").Type<boolean, boolean, false>;
99
- /** Read as the chart is built: whether each column prints the figure it plots. */
100
- readonly showValues: import("@motionscript/sdk").Type<boolean, boolean, false>;
101
- /** Whether each series' columns are drawn: on for every frame a show or hide covers, off once a hide lands. */
324
+ /** Each series' share of the slot, seeded from `enabled`: a weight rather than a switch, so hiding one widens the others. */
325
+ readonly weights: import("@motionscript/sdk").Type<number[], number[], false>;
326
+ /** Whether each series' bars are drawn: on for every frame a show or hide covers, off once a hide lands. */
102
327
  readonly showing: import("@motionscript/sdk").Type<boolean[], boolean[], false>;
103
328
  }>, {
104
329
  readonly enter: {};
@@ -117,4 +342,5 @@ export declare const BarChart: import("@motionscript/sdk").Component<"barChart",
117
342
  readonly clearCategory: {};
118
343
  }, Node2D<_Node2DProps>>>>;
119
344
  export type BarChart = NodeOf<typeof BarChart>;
345
+ export {};
120
346
  //# sourceMappingURL=bar-chart.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../src/bar-chart/bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,UAAU,EACf,KAAK,MAAM,EAEX,KAAK,MAAM,EACX,KAAK,WAAW,IAAI,YAAY,EAEjC,MAAM,mBAAmB,CAAA;AAU1B,OAAO,EASL,KAAK,gBAAgB,EAErB,KAAK,kBAAkB,EACxB,MAAM,eAAe,CAAA;AAGtB,OAAO,EASL,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,UAAU,CAAA;AAEjB,sDAAsD;AACtD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,CAAA;IAC3B,QAAQ,CAAC,MAAM,EAAE,SAAS,EAAE,CAAA;IAC5B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAA;CACrC;AAED,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAA;AAkB/C,mCAAmC;AACnC,wBAAgB,cAAc,CAAC,CAAC,EAAE,cAAc,GAAG,cAAc,CAOhE;AA4HD;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ;;;;;;;;IAWjB,mFAAmF;;IAEnF,6HAA6H;;IAE7H,wFAAwF;;;IAGxF,oFAAoF;;IAEpF,kFAAkF;;IAElF,+GAA+G;;;;;;;;;;;;;;;;;;;;;;;;;IAX/G,mFAAmF;;IAEnF,6HAA6H;;IAE7H,wFAAwF;;;IAGxF,oFAAoF;;IAEpF,kFAAkF;;IAElF,+GAA+G;;;;;;;;;;IAX/G,mFAAmF;;IAEnF,6HAA6H;;IAE7H,wFAAwF;;;IAGxF,oFAAoF;;IAEpF,kFAAkF;;IAElF,+GAA+G;;;;;;;;;;;;;;;;;0BAsLjH,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,QAAQ,CAAC,CAAA"}
1
+ {"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../src/bar-chart/bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,UAAU,EACf,KAAK,MAAM,EACX,KAAK,KAAK,EAEV,KAAK,MAAM,EACX,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,SAAS,IAAI,UAAU,EAC5B,KAAK,oBAAoB,IAAI,qBAAqB,EAClD,KAAK,mBAAmB,IAAI,oBAAoB,EAChD,KAAK,gBAAgB,IAAI,iBAAiB,EAC1C,KAAK,eAAe,IAAI,gBAAgB,EACxC,KAAK,IAAI,IAAI,KAAK,EAClB,KAAK,YAAY,IAAI,aAAa,EAClC,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,cAAc,IAAI,eAAe,EAEtC,KAAK,UAAU,IAAI,WAAW,EAC9B,KAAK,WAAW,IAAI,YAAY,EACjC,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAWL,KAAK,gBAAgB,EAErB,KAAK,kBAAkB,EACxB,MAAM,eAAe,CAAA;AAkBtB,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,UAAU,CAAA;AAEjB,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAId,CAAA;AAED,oCAAoC;AACpC,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,SAAS,CAAC,CAAA;AAEnD,sDAAsD;AACtD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,CAAA;IAC3B,QAAQ,CAAC,MAAM,EAAE,SAAS,EAAE,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAA;IACxB,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAA;CACrC;AAED,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAA;AAsB/C,gHAAgH;AAChH,wBAAgB,cAAc,CAAC,CAAC,EAAE,cAAc,GAAG,cAAc,CAOhE;AA8HD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ;;;;IAOjB,8GAA8G;;IAE9G,mHAAmH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKnH,gFAAgF;;IAEhF,wFAAwF;;;IAGxF,6HAA6H;;IAE7H,4GAA4G;;;;;;;;;;;;;;;;;;;;;IAd5G,8GAA8G;;IAE9G,mHAAmH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKnH,gFAAgF;;IAEhF,wFAAwF;;;IAGxF,6HAA6H;;IAE7H,4GAA4G;;;;;;IAd5G,8GAA8G;;IAE9G,mHAAmH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKnH,gFAAgF;;IAEhF,wFAAwF;;;IAGxF,6HAA6H;;IAE7H,4GAA4G;;;;;;;;;;;;;;;;;0BAkO9G,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,QAAQ,CAAC,CAAA"}