@motionscript/charts 0.1.0 → 0.1.1-alpha.0
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 +19 -0
- package/dist/bar-chart/bar-chart.d.ts +22 -93
- package/dist/bar-chart/bar-chart.d.ts.map +1 -1
- package/dist/bar-chart/bar-chart.js +48 -121
- package/dist/bar-chart/bar-chart.js.map +1 -1
- package/dist/bar-chart/category-axis.d.ts +11 -38
- package/dist/bar-chart/category-axis.d.ts.map +1 -1
- package/dist/bar-chart/category-axis.js +15 -38
- package/dist/bar-chart/category-axis.js.map +1 -1
- package/dist/bar-chart/chart-bars.d.ts +43 -74
- package/dist/bar-chart/chart-bars.d.ts.map +1 -1
- package/dist/bar-chart/chart-bars.js +31 -59
- package/dist/bar-chart/chart-bars.js.map +1 -1
- package/dist/bar-chart/index.d.ts +2 -10
- package/dist/bar-chart/index.d.ts.map +1 -1
- package/dist/bar-chart/index.js +0 -7
- package/dist/bar-chart/index.js.map +1 -1
- package/dist/bar-chart/shared.d.ts +27 -90
- package/dist/bar-chart/shared.d.ts.map +1 -1
- package/dist/bar-chart/shared.js +15 -54
- package/dist/bar-chart/shared.js.map +1 -1
- package/dist/browser/chunks/chunk-4SMRCU24.js +2 -0
- package/dist/browser/chunks/chunk-4SMRCU24.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 +1 -1
- package/dist/engine.d.ts +4 -16
- package/dist/engine.d.ts.map +1 -1
- package/dist/engine.js +4 -16
- package/dist/engine.js.map +1 -1
- package/dist/kit/cartesian.d.ts +8 -28
- package/dist/kit/cartesian.d.ts.map +1 -1
- package/dist/kit/cartesian.js +7 -19
- package/dist/kit/cartesian.js.map +1 -1
- package/dist/kit/chart-border.d.ts +9 -18
- package/dist/kit/chart-border.d.ts.map +1 -1
- package/dist/kit/chart-border.js +4 -9
- package/dist/kit/chart-border.js.map +1 -1
- package/dist/kit/chart-canvas.d.ts +25 -36
- package/dist/kit/chart-canvas.d.ts.map +1 -1
- package/dist/kit/chart-canvas.js +13 -13
- package/dist/kit/chart-canvas.js.map +1 -1
- package/dist/kit/chart-legend.d.ts +14 -61
- package/dist/kit/chart-legend.d.ts.map +1 -1
- package/dist/kit/chart-legend.js +17 -65
- package/dist/kit/chart-legend.js.map +1 -1
- package/dist/kit/entries.d.ts +2 -0
- package/dist/kit/entries.d.ts.map +1 -1
- package/dist/kit/entries.js +2 -0
- package/dist/kit/entries.js.map +1 -1
- package/dist/kit/motion.d.ts +11 -3
- package/dist/kit/motion.d.ts.map +1 -1
- package/dist/kit/motion.js +7 -1
- package/dist/kit/motion.js.map +1 -1
- package/dist/kit/shared.d.ts +60 -175
- package/dist/kit/shared.d.ts.map +1 -1
- package/dist/kit/shared.js +40 -157
- package/dist/kit/shared.js.map +1 -1
- package/dist/kit/vertical-axis.d.ts +16 -45
- package/dist/kit/vertical-axis.d.ts.map +1 -1
- package/dist/kit/vertical-axis.js +17 -42
- package/dist/kit/vertical-axis.js.map +1 -1
- package/dist/line-chart/chart-line.d.ts +16 -41
- package/dist/line-chart/chart-line.d.ts.map +1 -1
- package/dist/line-chart/chart-line.js +14 -43
- package/dist/line-chart/chart-line.js.map +1 -1
- package/dist/line-chart/chart-region.d.ts +14 -27
- package/dist/line-chart/chart-region.d.ts.map +1 -1
- package/dist/line-chart/chart-region.js +8 -22
- package/dist/line-chart/chart-region.js.map +1 -1
- package/dist/line-chart/horizontal-axis.d.ts +16 -43
- package/dist/line-chart/horizontal-axis.d.ts.map +1 -1
- package/dist/line-chart/horizontal-axis.js +13 -42
- package/dist/line-chart/horizontal-axis.js.map +1 -1
- package/dist/line-chart/index.d.ts +1 -13
- package/dist/line-chart/index.d.ts.map +1 -1
- package/dist/line-chart/index.js +0 -12
- package/dist/line-chart/index.js.map +1 -1
- package/dist/line-chart/line-chart.d.ts +23 -109
- package/dist/line-chart/line-chart.d.ts.map +1 -1
- package/dist/line-chart/line-chart.js +45 -141
- package/dist/line-chart/line-chart.js.map +1 -1
- package/dist/line-chart/shared.d.ts +33 -107
- package/dist/line-chart/shared.d.ts.map +1 -1
- package/dist/line-chart/shared.js +28 -81
- package/dist/line-chart/shared.js.map +1 -1
- package/dist/line-chart/x-scale.d.ts +14 -55
- package/dist/line-chart/x-scale.d.ts.map +1 -1
- package/dist/line-chart/x-scale.js +29 -111
- package/dist/line-chart/x-scale.js.map +1 -1
- package/dist/nodes.d.ts +0 -12
- package/dist/nodes.d.ts.map +1 -1
- package/dist/nodes.js +0 -12
- package/dist/nodes.js.map +1 -1
- package/dist/pie-chart/index.d.ts +1 -12
- package/dist/pie-chart/index.d.ts.map +1 -1
- package/dist/pie-chart/index.js +0 -9
- package/dist/pie-chart/index.js.map +1 -1
- package/dist/pie-chart/pie-chart.d.ts +37 -71
- package/dist/pie-chart/pie-chart.d.ts.map +1 -1
- package/dist/pie-chart/pie-chart.js +31 -65
- package/dist/pie-chart/pie-chart.js.map +1 -1
- package/dist/pie-chart/pie-legend.d.ts +11 -26
- package/dist/pie-chart/pie-legend.d.ts.map +1 -1
- package/dist/pie-chart/pie-legend.js +14 -39
- package/dist/pie-chart/pie-legend.js.map +1 -1
- package/dist/pie-chart/pie-ring.d.ts +50 -192
- package/dist/pie-chart/pie-ring.d.ts.map +1 -1
- package/dist/pie-chart/pie-ring.js +75 -247
- package/dist/pie-chart/pie-ring.js.map +1 -1
- package/dist/pie-chart/shared.d.ts +45 -131
- package/dist/pie-chart/shared.d.ts.map +1 -1
- package/dist/pie-chart/shared.js +29 -72
- package/dist/pie-chart/shared.js.map +1 -1
- package/package.json +4 -4
- package/src/bar-chart/bar-chart.ts +51 -165
- package/src/bar-chart/category-axis.ts +16 -57
- package/src/bar-chart/chart-bars.ts +43 -120
- package/src/bar-chart/index.ts +2 -10
- package/src/bar-chart/shared.ts +29 -97
- package/src/engine.ts +4 -16
- package/src/kit/cartesian.ts +11 -26
- package/src/kit/chart-border.ts +6 -20
- package/src/kit/chart-canvas.ts +15 -40
- package/src/kit/chart-legend.ts +17 -86
- package/src/kit/entries.ts +4 -1
- package/src/kit/motion.ts +11 -2
- package/src/kit/shared.ts +58 -219
- package/src/kit/vertical-axis.ts +18 -71
- package/src/line-chart/chart-line.ts +16 -44
- package/src/line-chart/chart-region.ts +10 -23
- package/src/line-chart/horizontal-axis.ts +13 -42
- package/src/line-chart/index.ts +1 -13
- package/src/line-chart/line-chart.ts +50 -184
- package/src/line-chart/shared.ts +51 -145
- package/src/line-chart/x-scale.ts +31 -121
- package/src/nodes.ts +0 -12
- package/src/pie-chart/index.ts +1 -12
- package/src/pie-chart/pie-chart.ts +34 -102
- package/src/pie-chart/pie-legend.ts +14 -55
- package/src/pie-chart/pie-ring.ts +80 -307
- package/src/pie-chart/shared.ts +50 -139
- package/dist/browser/chunks/chunk-TJNHLQGV.js +0 -2
- package/dist/browser/chunks/chunk-TJNHLQGV.js.map +0 -7
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Graphics2D, Text, Types, component2d, fillOps, shadowOps, strokeOps, textOps, } from "@motionscript/sdk";
|
|
1
|
+
import { Graphics2D, Text, Types, clamp, component2d, fillOps, shadowOps, strokeOps, textOps, } from "@motionscript/sdk";
|
|
2
2
|
import { fresh } from "../kit/entries.js";
|
|
3
3
|
import { frameEase } from "../kit/motion.js";
|
|
4
4
|
import { loadPaints } from "../kit/paints.js";
|
|
5
|
-
import {
|
|
5
|
+
import { formatMarker } from "../kit/shared.js";
|
|
6
6
|
import { DEFAULT_BAR_CHART_THEME } from "./shared.js";
|
|
7
7
|
/** Gap between a grouped column's end and the figure printed over it, in px. */
|
|
8
8
|
const VALUE_GAP = 10;
|
|
@@ -11,50 +11,36 @@ const VALUE_FIT = 1.6;
|
|
|
11
11
|
/** Fallback type size when the theme's value style leaves it unset or autofit. */
|
|
12
12
|
const VALUE_SIZE = 24;
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* The captions read this rather than being hidden by `render`'s guard: they are
|
|
18
|
-
* real child nodes, so a `return` in the draw would leave them on screen over a
|
|
19
|
-
* series that isn't there.
|
|
14
|
+
* Column `i`'s dimming: the category spotlight, then the series switch. Captions
|
|
15
|
+
* read this because they are child nodes, which a `render` guard would leave on
|
|
16
|
+
* screen over a series that is not there.
|
|
20
17
|
*/
|
|
21
18
|
function dimAt(s, index) {
|
|
22
19
|
if (!s.enabled)
|
|
23
20
|
return 0;
|
|
24
|
-
return
|
|
21
|
+
return clamp(s.dims[index] ?? 1, 0, 1);
|
|
25
22
|
}
|
|
26
|
-
/** The two ends of column `i` at the current growth. */
|
|
27
23
|
function endsAt(s, index) {
|
|
28
24
|
const bar = s.bars[index];
|
|
29
25
|
if (!bar)
|
|
30
26
|
return null;
|
|
31
|
-
const g =
|
|
27
|
+
const g = clamp(s.growth, 0, 1);
|
|
32
28
|
return { base: s.baseline + (bar.from - s.baseline) * g, end: s.baseline + (bar.to - s.baseline) * g };
|
|
33
29
|
}
|
|
34
|
-
/** The type size the figures are set at, guarding the autofit/unset cases. */
|
|
35
30
|
function valueSize(s) {
|
|
36
31
|
const size = s.valueStyle.fontSize;
|
|
37
32
|
return typeof size === "number" ? size : VALUE_SIZE;
|
|
38
33
|
}
|
|
39
|
-
/** Whether column `i`'s figure sits inside the column (a stacked segment) or past its end. */
|
|
40
34
|
function insideAt(s, index) {
|
|
41
35
|
const bar = s.bars[index];
|
|
42
36
|
return bar !== undefined && Math.abs(bar.from - s.baseline) > 0.5;
|
|
43
37
|
}
|
|
44
|
-
/**
|
|
45
|
-
* The figure printed on column `i`, or `""` where there is no room for it.
|
|
46
|
-
*
|
|
47
|
-
* Blanking the text rather than dropping the node keeps the caption list
|
|
48
|
-
* index-aligned with the columns, so a chart that rescales into more room simply
|
|
49
|
-
* starts printing again.
|
|
50
|
-
*/
|
|
38
|
+
/** Column `i`'s figure, or `""` where there is no room. Blanking rather than dropping the node keeps captions index-aligned, so a rescale into more room prints again. */
|
|
51
39
|
function captionAt(s, index) {
|
|
52
40
|
const bar = s.bars[index];
|
|
53
41
|
if (!bar || bar.value === 0)
|
|
54
42
|
return "";
|
|
55
|
-
// An interior segment prints inside itself
|
|
56
|
-
// hold a line of type; a grouped column prints in the headroom above its end,
|
|
57
|
-
// where the only constraint is the plot's own top.
|
|
43
|
+
// An interior segment prints inside itself and must hold a line of type; a grouped column prints past its end.
|
|
58
44
|
if (insideAt(s, index)) {
|
|
59
45
|
const ends = endsAt(s, index);
|
|
60
46
|
if (!ends)
|
|
@@ -64,54 +50,52 @@ function captionAt(s, index) {
|
|
|
64
50
|
}
|
|
65
51
|
return bar.caption ?? formatMarker(bar.value);
|
|
66
52
|
}
|
|
67
|
-
/** Where column `i`'s figure sits, in the node's centred y-up space. */
|
|
68
53
|
function captionY(s, index) {
|
|
69
54
|
const ends = endsAt(s, index);
|
|
70
55
|
if (!ends)
|
|
71
56
|
return 0;
|
|
72
57
|
if (insideAt(s, index))
|
|
73
58
|
return (ends.base + ends.end) / 2;
|
|
74
|
-
// Text is centred on
|
|
75
|
-
// line — on whichever side of the baseline the column actually reached.
|
|
59
|
+
// Text is centred on `y`: clear the end by the gap plus half a line, on the side the column reached.
|
|
76
60
|
const direction = ends.end >= ends.base ? 1 : -1;
|
|
77
61
|
return ends.end + direction * (VALUE_GAP + valueSize(s) / 2);
|
|
78
62
|
}
|
|
79
63
|
/**
|
|
80
|
-
* One
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
*
|
|
84
|
-
* unit `ChartLine` is, which is what lets `showSeries`/`hideSeries`/
|
|
85
|
-
* `spotlightSeries` mean exactly the same thing on a bar chart as on a line
|
|
86
|
-
* chart: enable the node, or tween its opacity. The columns' *positions* come
|
|
87
|
-
* from the parent (it owns the slot arithmetic both modes share), so this part
|
|
88
|
-
* only has to know how to draw a span and grow it.
|
|
64
|
+
* One series of a {@link BarChart}: its column in every category plus the
|
|
65
|
+
* printed figures. A node per series, like `ChartLine`, so `showSeries` and
|
|
66
|
+
* `spotlightSeries` mean the same on both: enable the node or tween its opacity.
|
|
67
|
+
* Positions come from the parent, which owns the slot arithmetic.
|
|
89
68
|
*
|
|
90
|
-
* The figures are
|
|
91
|
-
*
|
|
92
|
-
* and ride the node's own opacity — which is why hiding the series takes its
|
|
93
|
-
* figures with it for free.
|
|
69
|
+
* The figures are {@link Text} children, so they take the theme's type style,
|
|
70
|
+
* are measured by layout, and hide with the series.
|
|
94
71
|
*/
|
|
95
72
|
export const ChartBars = component2d({
|
|
96
73
|
key: "chartBars",
|
|
97
74
|
state: {
|
|
98
75
|
bars: fresh(() => []),
|
|
76
|
+
/** Pixel y of value 0, where every column grows from. */
|
|
99
77
|
baseline: 0,
|
|
100
78
|
fill: Types.custom([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
|
|
101
79
|
barStroke: Types.custom(DEFAULT_BAR_CHART_THEME.bar.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
|
|
102
80
|
barShadow: Types.custom(DEFAULT_BAR_CHART_THEME.bar.shadow, { resolve: shadowOps.resolve, lerp: shadowOps.lerp }),
|
|
103
81
|
cornerRadius: DEFAULT_BAR_CHART_THEME.bar.cornerRadius,
|
|
82
|
+
/**
|
|
83
|
+
* Rise of every column in `[0, 1]` about the baseline, not each column's own
|
|
84
|
+
* base: every segment travels by the same factor, so a stack stays flush
|
|
85
|
+
* mid-animation and a negative column grows down.
|
|
86
|
+
*/
|
|
104
87
|
growth: 1,
|
|
88
|
+
/** Per-column opacity by row index, how the category spotlight reaches one column. Missing reads as 1. */
|
|
105
89
|
dims: fresh(() => []),
|
|
106
90
|
showValues: false,
|
|
107
91
|
valueStyle: Types.custom(DEFAULT_BAR_CHART_THEME.valueStyle),
|
|
92
|
+
/** The wholesale switch behind `showSeries`/`hideSeries`; off skips the columns and their figures. */
|
|
108
93
|
enabled: true,
|
|
109
94
|
},
|
|
110
|
-
// A
|
|
95
|
+
// A node made of its figures would otherwise hug them.
|
|
111
96
|
defaults: { width: "fill", height: "fill" },
|
|
112
|
-
// One caption per column, built once (the row count is fixed at construction
|
|
113
|
-
//
|
|
114
|
-
// with its column as the chart grows, rescales or reflows.
|
|
97
|
+
// One caption per column, built once (the row count is fixed at construction)
|
|
98
|
+
// and bound to the live geometry so it travels with its column.
|
|
115
99
|
children: (state) => {
|
|
116
100
|
if (!state.showValues)
|
|
117
101
|
return [];
|
|
@@ -123,17 +107,10 @@ export const ChartBars = component2d({
|
|
|
123
107
|
opacity: () => dimAt(state, i),
|
|
124
108
|
}));
|
|
125
109
|
},
|
|
126
|
-
// The
|
|
110
|
+
// The stroke and shadow sit past the conventional slots, so they are named here.
|
|
127
111
|
load: (loader, state) => loadPaints(loader, { fills: [state.fill], shadows: [state.barShadow], strokes: [state.barStroke] }),
|
|
128
112
|
commands: {
|
|
129
|
-
/**
|
|
130
|
-
* Raise every column from the baseline by tweening `growth` `0 → 1`.
|
|
131
|
-
*
|
|
132
|
-
* The mirror of `ChartLine.enter`: same contract that the resting state is
|
|
133
|
-
* the finished one, so the chart arms this back to 0 before animating rather
|
|
134
|
-
* than the node hiding itself at construction. No priming to 0 first: the
|
|
135
|
-
* value at `t` is a function of `t`, so a repeat call re-raises by definition.
|
|
136
|
-
*/
|
|
113
|
+
/** Raise every column from the baseline (`growth` 0 to 1). The resting state is the finished one; the chart arms it back to 0. */
|
|
137
114
|
enter: (timeline) => {
|
|
138
115
|
const ease = frameEase(timeline);
|
|
139
116
|
return timeline.animate((t) => ({ growth: ease(t) }));
|
|
@@ -150,19 +127,14 @@ export const ChartBars = component2d({
|
|
|
150
127
|
if (height <= 0)
|
|
151
128
|
continue;
|
|
152
129
|
const radius = bar.round ? Math.min(state.cornerRadius, height) : 0;
|
|
153
|
-
//
|
|
154
|
-
// category spotlight dims individual columns, and opacity is a property
|
|
155
|
-
// of the command list rather than of a shape within it.
|
|
130
|
+
// One `Graphics2D` per column: opacity belongs to the command list, and the spotlight dims single columns.
|
|
156
131
|
const g = new Graphics2D();
|
|
157
132
|
const rect = g.rect({
|
|
158
133
|
x: bar.x,
|
|
159
134
|
y: (ends.base + ends.end) / 2,
|
|
160
135
|
width: bar.width,
|
|
161
136
|
height,
|
|
162
|
-
// Corner keys are visual (
|
|
163
|
-
// so a column reaching *up* rounds its `top*` corners and one reaching
|
|
164
|
-
// down its `bottom*` ones. Only the far end rounds, which is what makes
|
|
165
|
-
// a stack read as a single capped column.
|
|
137
|
+
// Corner keys are visual (y-up): a column reaching up rounds `top*`, one reaching down `bottom*`. Only the far end rounds.
|
|
166
138
|
cornerRadius: radius > 0
|
|
167
139
|
? ends.end >= ends.base
|
|
168
140
|
? { topLeft: radius, topRight: radius, bottomLeft: 0, bottomRight: 0 }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-bars.js","sourceRoot":"","sources":["../../src/bar-chart/chart-bars.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Graphics2D,\n Text,\n Types,\n component2d,\n fillOps,\n shadowOps,\n strokeOps,\n textOps,\n type Fill,\n type FillResolved,\n type NodeOf,\n // Named so this component's emitted type reaches `Node2D` through the sdk, not core.\n type Node2D as _Node2D,\n type Node2DProps,\n type Shadow,\n type ShadowResolved,\n type Stroke,\n type StrokeResolved,\n type TextStyle,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"../kit/entries\"\nimport { frameEase } from \"../kit/motion\"\nimport { loadPaints } from \"../kit/paints\"\nimport { clampUnit, formatMarker } from \"../kit/shared\"\nimport { DEFAULT_BAR_CHART_THEME } from \"./shared\"\n\n/**\n * One drawn column, already mapped into the plot's **centred pixel space**\n * (origin at the plot centre, y-up) by the parent {@link BarChart}.\n *\n * `from`/`to` are the two ends of the column rather than a base and a height,\n * for the same reason {@link BarSpan} is a span: it is the one shape that fits a\n * grouped bar, a stacked segment and a negative value without a special case.\n */\nexport interface BarGeometry {\n /** Centre x of the column. */\n x: number\n /** Column width in px. */\n width: number\n /** Pixel y of the column's base — the baseline when grouped, the running stack top when stacked. */\n from: number\n /** Pixel y of its far end, at full {@link ChartBarsProps.growth}. */\n to: number\n /** Whether the far end takes the theme's corner radius (the stack's cap). */\n round: boolean\n /** The value this column plots, for the figure printed on it. */\n value: number\n /**\n * The figure printed on it, written as the chart's value axis writes its\n * ticks, so the two cannot disagree. Absent, the bare marker reading of\n * {@link value}.\n */\n caption?: string\n}\n\n/** Gap between a grouped column's end and the figure printed over it, in px. */\nconst VALUE_GAP = 10\n/** A segment shorter than this many multiples of the type size prints no figure. */\nconst VALUE_FIT = 1.6\n/** Fallback type size when the theme's value style leaves it unset or autofit. */\nconst VALUE_SIZE = 24\n\nexport interface ChartBarsProps extends Node2DProps {\n /** This series' columns, one per row of the chart's data. */\n bars: BarGeometry[]\n /** Pixel y of value 0 — where every column grows *from*. */\n baseline: number\n /** Column paint — this series' own, or the theme palette's entry for its index. */\n fill: Fill\n /** Optional outline on every column. */\n barStroke: Stroke\n /** Optional drop shadow on every column. */\n barShadow: Shadow\n /** Radius of the far-end corners, in px. */\n cornerRadius: number\n /**\n * Rise of every column in `[0, 1]`, measured **about the baseline**: 0\n * collapses them all onto it, 1 draws them at full length.\n *\n * Scaling about the baseline rather than about each column's own base is what\n * keeps a stack flush mid-animation — every segment's base and end travel by\n * the same factor, so the segments stay stacked instead of the upper ones\n * floating above the still-growing lower ones. It also means a negative\n * column grows *down* out of the same signal.\n */\n growth: number\n /**\n * Per-column opacity multiplier, by row index — how the chart's category\n * spotlight reaches a single column without touching the series it belongs\n * to. Missing entries read as 1.\n */\n dims: number[]\n /** Whether the figure each column plots is printed on it. */\n showValues: boolean\n /** Type style for those figures. */\n valueStyle: TextStyle\n /**\n * Whether this series draws at all — the wholesale switch behind\n * `BarChart.showSeries`/`hideSeries`, alongside the slot weight that animates\n * the reflow. Off skips the columns *and* their figures.\n */\n enabled: boolean\n}\n\n/** What the column geometry reads. */\ninterface Columns {\n readonly bars: readonly BarGeometry[]\n readonly baseline: number\n readonly growth: number\n readonly dims: readonly number[]\n readonly enabled: boolean\n readonly valueStyle: TextStyle\n}\n\n/**\n * How far column `i` is dimmed — the chart's category spotlight, and the series\n * switch on top of it.\n *\n * The captions read this rather than being hidden by `render`'s guard: they are\n * real child nodes, so a `return` in the draw would leave them on screen over a\n * series that isn't there.\n */\nfunction dimAt(s: Columns, index: number): number {\n if (!s.enabled) return 0\n return clampUnit(s.dims[index] ?? 1)\n}\n\n/** The two ends of column `i` at the current growth. */\nfunction endsAt(s: Columns, index: number): { base: number; end: number } | null {\n const bar = s.bars[index]\n if (!bar) return null\n const g = clampUnit(s.growth)\n return { base: s.baseline + (bar.from - s.baseline) * g, end: s.baseline + (bar.to - s.baseline) * g }\n}\n\n/** The type size the figures are set at, guarding the autofit/unset cases. */\nfunction valueSize(s: Columns): number {\n const size = s.valueStyle.fontSize\n return typeof size === \"number\" ? size : VALUE_SIZE\n}\n\n/** Whether column `i`'s figure sits inside the column (a stacked segment) or past its end. */\nfunction insideAt(s: Columns, index: number): boolean {\n const bar = s.bars[index]\n return bar !== undefined && Math.abs(bar.from - s.baseline) > 0.5\n}\n\n/**\n * The figure printed on column `i`, or `\"\"` where there is no room for it.\n *\n * Blanking the text rather than dropping the node keeps the caption list\n * index-aligned with the columns, so a chart that rescales into more room simply\n * starts printing again.\n */\nfunction captionAt(s: Columns, index: number): string {\n const bar = s.bars[index]\n if (!bar || bar.value === 0) return \"\"\n // An interior segment prints inside itself, so it has to be tall enough to\n // hold a line of type; a grouped column prints in the headroom above its end,\n // where the only constraint is the plot's own top.\n if (insideAt(s, index)) {\n const ends = endsAt(s, index)\n if (!ends) return \"\"\n if (Math.abs(ends.end - ends.base) < valueSize(s) * VALUE_FIT) return \"\"\n }\n return bar.caption ?? formatMarker(bar.value)\n}\n\n/** Where column `i`'s figure sits, in the node's centred y-up space. */\nfunction captionY(s: Columns, index: number): number {\n const ends = endsAt(s, index)\n if (!ends) return 0\n if (insideAt(s, index)) return (ends.base + ends.end) / 2\n // Text is centred on its `y`, so clear the column's end by the gap plus half a\n // line — on whichever side of the baseline the column actually reached.\n const direction = ends.end >= ends.base ? 1 : -1\n return ends.end + direction * (VALUE_GAP + valueSize(s) / 2)\n}\n\n/**\n * One **series** of a {@link BarChart}, drawn as one command list: its column in\n * every category, plus the figures printed on them.\n *\n * A node per series rather than a node per bar, deliberately — it is the same\n * unit `ChartLine` is, which is what lets `showSeries`/`hideSeries`/\n * `spotlightSeries` mean exactly the same thing on a bar chart as on a line\n * chart: enable the node, or tween its opacity. The columns' *positions* come\n * from the parent (it owns the slot arithmetic both modes share), so this part\n * only has to know how to draw a span and grow it.\n *\n * The figures are real {@link Text} children rather than glyphs in the command\n * list, so they take the theme's type style, are measured by the layout engine,\n * and ride the node's own opacity — which is why hiding the series takes its\n * figures with it for free.\n */\nexport const ChartBars = component2d({\n key: \"chartBars\",\n state: {\n bars: fresh<BarGeometry[]>(() => []),\n baseline: 0,\n fill: Types.custom<Fill, FillResolved[]>([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n barStroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_BAR_CHART_THEME.bar.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n barShadow: Types.custom<Shadow, ShadowResolved[]>(DEFAULT_BAR_CHART_THEME.bar.shadow, { resolve: shadowOps.resolve, lerp: shadowOps.lerp }),\n cornerRadius: DEFAULT_BAR_CHART_THEME.bar.cornerRadius,\n growth: 1,\n dims: fresh<number[]>(() => []),\n showValues: false,\n valueStyle: Types.custom<TextStyle>(DEFAULT_BAR_CHART_THEME.valueStyle),\n enabled: true,\n },\n // A plain node filled its parent; one made of its figures would hug them.\n defaults: { width: \"fill\", height: \"fill\" },\n // One caption per column, built once (the row count is fixed at construction,\n // like an axis's marker count) and bound to the live geometry so it travels\n // with its column as the chart grows, rescales or reflows.\n children: (state) => {\n if (!state.showValues) return []\n return state.bars.map((_, i) =>\n Text({\n ...textOps.styleProps(state.valueStyle),\n text: () => captionAt(state, i),\n x: () => state.bars[i]?.x ?? 0,\n y: () => captionY(state, i),\n opacity: () => dimAt(state, i),\n })\n )\n },\n // The column stroke and shadow are named past the conventional slots, so they are named here.\n load: (loader, state) =>\n loadPaints(loader, { fills: [state.fill], shadows: [state.barShadow], strokes: [state.barStroke] }),\n commands: {\n /**\n * Raise every column from the baseline by tweening `growth` `0 → 1`.\n *\n * The mirror of `ChartLine.enter`: same contract that the resting state is\n * the finished one, so the chart arms this back to 0 before animating rather\n * than the node hiding itself at construction. No priming to 0 first: the\n * value at `t` is a function of `t`, so a repeat call re-raises by definition.\n */\n enter: (timeline) => {\n const ease = frameEase(timeline)\n return timeline.animate((t) => ({ growth: ease(t) }))\n },\n },\n render: (ctx, state) => {\n if (state.enabled) {\n for (let i = 0; i < state.bars.length; i++) {\n const bar = state.bars[i]\n const ends = endsAt(state, i)\n if (!ends || bar.width <= 0) continue\n const height = Math.abs(ends.end - ends.base)\n if (height <= 0) continue\n\n const radius = bar.round ? Math.min(state.cornerRadius, height) : 0\n // A column per `Graphics2D` rather than one list for the series: the\n // category spotlight dims individual columns, and opacity is a property\n // of the command list rather than of a shape within it.\n const g = new Graphics2D()\n const rect = g.rect({\n x: bar.x,\n y: (ends.base + ends.end) / 2,\n width: bar.width,\n height,\n // Corner keys are visual (the renderer keeps them in y-up author space),\n // so a column reaching *up* rounds its `top*` corners and one reaching\n // down its `bottom*` ones. Only the far end rounds, which is what makes\n // a stack read as a single capped column.\n cornerRadius:\n radius > 0\n ? ends.end >= ends.base\n ? { topLeft: radius, topRight: radius, bottomLeft: 0, bottomRight: 0 }\n : { bottomLeft: radius, bottomRight: radius, topLeft: 0, topRight: 0 }\n : 0,\n })\n rect.shadow(state.barShadow)\n rect.fill(state.fill)\n rect.stroke(state.barStroke)\n ctx.draw(g.opacity(dimAt(state, i)))\n }\n }\n ctx.children()\n },\n})\n\nexport type ChartBars = NodeOf<typeof ChartBars>\n"]}
|
|
1
|
+
{"version":3,"file":"chart-bars.js","sourceRoot":"","sources":["../../src/bar-chart/chart-bars.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Graphics2D,\n Text,\n Types,\n clamp,\n component2d,\n fillOps,\n shadowOps,\n strokeOps,\n textOps,\n type Fill,\n type FillResolved,\n type NodeOf,\n // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.\n type Node2D as _Node2D,\n type Node2DProps as _Node2DProps,\n type Shadow,\n type ShadowResolved,\n type Stroke,\n type StrokeResolved,\n type TextStyle,\n} from \"@motionscript/sdk\"\n\nimport { fresh } from \"../kit/entries\"\nimport { frameEase } from \"../kit/motion\"\nimport { loadPaints } from \"../kit/paints\"\nimport { formatMarker } from \"../kit/shared\"\nimport { DEFAULT_BAR_CHART_THEME } from \"./shared\"\n\n/**\n * One drawn column in the plot's centred pixel space (origin at the centre,\n * y-up), mapped by the parent {@link BarChart}. `from`/`to` are the two ends\n * rather than a base and a height, like {@link BarSpan}: one shape fits grouped,\n * stacked and negative.\n */\nexport interface BarGeometry {\n /** Centre x. */\n x: number\n width: number\n /** Pixel y of the base: the baseline when grouped, the running stack top when stacked. */\n from: number\n /** Pixel y of the far end at full growth. */\n to: number\n /** Whether the far end takes the corner radius (the stack's cap). */\n round: boolean\n /** The value plotted, for the printed figure. */\n value: number\n /** The printed figure, written as the value axis writes its ticks; absent, the bare marker reading of `value`. */\n caption?: string\n}\n\n/** Gap between a grouped column's end and the figure printed over it, in px. */\nconst VALUE_GAP = 10\n/** A segment shorter than this many multiples of the type size prints no figure. */\nconst VALUE_FIT = 1.6\n/** Fallback type size when the theme's value style leaves it unset or autofit. */\nconst VALUE_SIZE = 24\n\ninterface Columns {\n readonly bars: readonly BarGeometry[]\n readonly baseline: number\n readonly growth: number\n readonly dims: readonly number[]\n readonly enabled: boolean\n readonly valueStyle: TextStyle\n}\n\n/**\n * Column `i`'s dimming: the category spotlight, then the series switch. Captions\n * read this because they are child nodes, which a `render` guard would leave on\n * screen over a series that is not there.\n */\nfunction dimAt(s: Columns, index: number): number {\n if (!s.enabled) return 0\n return clamp(s.dims[index] ?? 1, 0, 1)\n}\n\nfunction endsAt(s: Columns, index: number): { base: number; end: number } | null {\n const bar = s.bars[index]\n if (!bar) return null\n const g = clamp(s.growth, 0, 1)\n return { base: s.baseline + (bar.from - s.baseline) * g, end: s.baseline + (bar.to - s.baseline) * g }\n}\n\nfunction valueSize(s: Columns): number {\n const size = s.valueStyle.fontSize\n return typeof size === \"number\" ? size : VALUE_SIZE\n}\n\nfunction insideAt(s: Columns, index: number): boolean {\n const bar = s.bars[index]\n return bar !== undefined && Math.abs(bar.from - s.baseline) > 0.5\n}\n\n/** Column `i`'s figure, or `\"\"` where there is no room. Blanking rather than dropping the node keeps captions index-aligned, so a rescale into more room prints again. */\nfunction captionAt(s: Columns, index: number): string {\n const bar = s.bars[index]\n if (!bar || bar.value === 0) return \"\"\n // An interior segment prints inside itself and must hold a line of type; a grouped column prints past its end.\n if (insideAt(s, index)) {\n const ends = endsAt(s, index)\n if (!ends) return \"\"\n if (Math.abs(ends.end - ends.base) < valueSize(s) * VALUE_FIT) return \"\"\n }\n return bar.caption ?? formatMarker(bar.value)\n}\n\nfunction captionY(s: Columns, index: number): number {\n const ends = endsAt(s, index)\n if (!ends) return 0\n if (insideAt(s, index)) return (ends.base + ends.end) / 2\n // Text is centred on `y`: clear the end by the gap plus half a line, on the side the column reached.\n const direction = ends.end >= ends.base ? 1 : -1\n return ends.end + direction * (VALUE_GAP + valueSize(s) / 2)\n}\n\n/**\n * One series of a {@link BarChart}: its column in every category plus the\n * printed figures. A node per series, like `ChartLine`, so `showSeries` and\n * `spotlightSeries` mean the same on both: enable the node or tween its opacity.\n * Positions come from the parent, which owns the slot arithmetic.\n *\n * The figures are {@link Text} children, so they take the theme's type style,\n * are measured by layout, and hide with the series.\n */\nexport const ChartBars = component2d({\n key: \"chartBars\",\n state: {\n bars: fresh<BarGeometry[]>(() => []),\n /** Pixel y of value 0, where every column grows from. */\n baseline: 0,\n fill: Types.custom<Fill, FillResolved[]>([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),\n barStroke: Types.custom<Stroke, StrokeResolved[]>(DEFAULT_BAR_CHART_THEME.bar.stroke, { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),\n barShadow: Types.custom<Shadow, ShadowResolved[]>(DEFAULT_BAR_CHART_THEME.bar.shadow, { resolve: shadowOps.resolve, lerp: shadowOps.lerp }),\n cornerRadius: DEFAULT_BAR_CHART_THEME.bar.cornerRadius,\n /**\n * Rise of every column in `[0, 1]` about the baseline, not each column's own\n * base: every segment travels by the same factor, so a stack stays flush\n * mid-animation and a negative column grows down.\n */\n growth: 1,\n /** Per-column opacity by row index, how the category spotlight reaches one column. Missing reads as 1. */\n dims: fresh<number[]>(() => []),\n showValues: false,\n valueStyle: Types.custom<TextStyle>(DEFAULT_BAR_CHART_THEME.valueStyle),\n /** The wholesale switch behind `showSeries`/`hideSeries`; off skips the columns and their figures. */\n enabled: true,\n },\n // A node made of its figures would otherwise hug them.\n defaults: { width: \"fill\", height: \"fill\" },\n // One caption per column, built once (the row count is fixed at construction)\n // and bound to the live geometry so it travels with its column.\n children: (state) => {\n if (!state.showValues) return []\n return state.bars.map((_, i) =>\n Text({\n ...textOps.styleProps(state.valueStyle),\n text: () => captionAt(state, i),\n x: () => state.bars[i]?.x ?? 0,\n y: () => captionY(state, i),\n opacity: () => dimAt(state, i),\n })\n )\n },\n // The stroke and shadow sit past the conventional slots, so they are named here.\n load: (loader, state) =>\n loadPaints(loader, { fills: [state.fill], shadows: [state.barShadow], strokes: [state.barStroke] }),\n commands: {\n /** Raise every column from the baseline (`growth` 0 to 1). The resting state is the finished one; the chart arms it back to 0. */\n enter: (timeline) => {\n const ease = frameEase(timeline)\n return timeline.animate((t) => ({ growth: ease(t) }))\n },\n },\n render: (ctx, state) => {\n if (state.enabled) {\n for (let i = 0; i < state.bars.length; i++) {\n const bar = state.bars[i]\n const ends = endsAt(state, i)\n if (!ends || bar.width <= 0) continue\n const height = Math.abs(ends.end - ends.base)\n if (height <= 0) continue\n\n const radius = bar.round ? Math.min(state.cornerRadius, height) : 0\n // One `Graphics2D` per column: opacity belongs to the command list, and the spotlight dims single columns.\n const g = new Graphics2D()\n const rect = g.rect({\n x: bar.x,\n y: (ends.base + ends.end) / 2,\n width: bar.width,\n height,\n // Corner keys are visual (y-up): a column reaching up rounds `top*`, one reaching down `bottom*`. Only the far end rounds.\n cornerRadius:\n radius > 0\n ? ends.end >= ends.base\n ? { topLeft: radius, topRight: radius, bottomLeft: 0, bottomRight: 0 }\n : { bottomLeft: radius, bottomRight: radius, topLeft: 0, topRight: 0 }\n : 0,\n })\n rect.shadow(state.barShadow)\n rect.fill(state.fill)\n rect.stroke(state.barStroke)\n ctx.draw(g.opacity(dimAt(state, i)))\n }\n }\n ctx.children()\n },\n})\n\nexport type ChartBars = NodeOf<typeof ChartBars>\n"]}
|
|
@@ -1,16 +1,8 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The bar chart: grouped or stacked columns off a category axis.
|
|
3
|
-
*
|
|
4
|
-
* Shares the plot panel, the value axis and the legend with the line chart —
|
|
5
|
-
* which is what lets a scene swap one for the other without re-theming — and
|
|
6
|
-
* brings its own category axis, since a band scale is not a continuous one.
|
|
7
|
-
*/
|
|
8
1
|
export { BarChart, barChartDomain } from "./bar-chart.js";
|
|
9
|
-
export type { BarChartDomain,
|
|
2
|
+
export type { BarChartDomain, BarChartValues } from "./bar-chart.js";
|
|
10
3
|
export { ChartBars } from "./chart-bars.js";
|
|
11
|
-
export type { BarGeometry
|
|
4
|
+
export type { BarGeometry } from "./chart-bars.js";
|
|
12
5
|
export { CategoryAxis } from "./category-axis.js";
|
|
13
|
-
export type { CategoryAxisProps } from "./category-axis.js";
|
|
14
6
|
export { DEFAULT_BAR_CHART_THEME, barCategories, barSpans, barValueExtent, lerpBarChartTheme, resolveBarChartTheme, resolveBarFill, resolveBarScale, stackCapIndex, } from "./shared.js";
|
|
15
7
|
export type { BarChartConfig, BarChartTheme, BarSeries, BarSpan, BarStyleConfig, } from "./shared.js";
|
|
16
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/bar-chart/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/bar-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AACtD,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EACL,uBAAuB,EACvB,aAAa,EACb,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,YAAY,EACV,cAAc,EACd,aAAa,EACb,SAAS,EACT,OAAO,EACP,cAAc,GACf,MAAM,UAAU,CAAA"}
|
package/dist/bar-chart/index.js
CHANGED
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The bar chart: grouped or stacked columns off a category axis.
|
|
3
|
-
*
|
|
4
|
-
* Shares the plot panel, the value axis and the legend with the line chart —
|
|
5
|
-
* which is what lets a scene swap one for the other without re-theming — and
|
|
6
|
-
* brings its own category axis, since a band scale is not a continuous one.
|
|
7
|
-
*/
|
|
8
1
|
export { BarChart, barChartDomain } from "./bar-chart.js";
|
|
9
2
|
export { ChartBars } from "./chart-bars.js";
|
|
10
3
|
export { CategoryAxis } from "./category-axis.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/bar-chart/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/bar-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EACL,uBAAuB,EACvB,aAAa,EACb,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,UAAU,CAAA","sourcesContent":["export { BarChart, barChartDomain } from \"./bar-chart\"\nexport type { BarChartDomain, BarChartValues } from \"./bar-chart\"\nexport { ChartBars } from \"./chart-bars\"\nexport type { BarGeometry } from \"./chart-bars\"\nexport { CategoryAxis } from \"./category-axis\"\nexport {\n DEFAULT_BAR_CHART_THEME,\n barCategories,\n barSpans,\n barValueExtent,\n lerpBarChartTheme,\n resolveBarChartTheme,\n resolveBarFill,\n resolveBarScale,\n stackCapIndex,\n} from \"./shared\"\nexport type {\n BarChartConfig,\n BarChartTheme,\n BarSeries,\n BarSpan,\n BarStyleConfig,\n} from \"./shared\"\n"]}
|
|
@@ -1,125 +1,69 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Types and pure helpers specific to the {@link BarChart} family: how a row's
|
|
3
|
-
* values become the spans its columns cover, how the value axis is scaled around
|
|
4
|
-
* them, and the theme the bars add to the shared chart vocabulary.
|
|
5
|
-
*
|
|
6
|
-
* Everything a line or a pie chart would want too — what a series is, the axis
|
|
7
|
-
* domain model, the theme leaf resolvers, the legend and plot-panel branches —
|
|
8
|
-
* lives in `../kit/shared.ts` and is imported here.
|
|
9
|
-
*
|
|
10
|
-
* Kept renderer-agnostic (no `Node` imports) so a host's inspector mapping
|
|
11
|
-
* can build a partial {@link BarChartTheme} without
|
|
12
|
-
* pulling the components in.
|
|
13
|
-
*/
|
|
14
1
|
import { type DataRecord, type Fill, type Shadow, type Stroke, type TextStyle } from "@motionscript/sdk";
|
|
15
2
|
import { type AxisConfig, type ChartSeries, type LegendConfig, type LegendTheme, type PlotAreaConfig, type Range } from "../kit/shared.js";
|
|
16
|
-
/**
|
|
17
|
-
* One series in a {@link BarChart}: a column of the table drawn as one bar per
|
|
18
|
-
* row — side by side with its siblings within each category's slot, or stacked
|
|
19
|
-
* on top of them.
|
|
20
|
-
*
|
|
21
|
-
* The family-wide {@link ChartSeries} under a name that says what it draws here.
|
|
22
|
-
*/
|
|
3
|
+
/** One bar per row, beside its siblings in the category slot or stacked on them: {@link ChartSeries} under the name for what it draws here. */
|
|
23
4
|
export type BarSeries = ChartSeries;
|
|
24
5
|
/**
|
|
25
|
-
* One
|
|
26
|
-
* value
|
|
27
|
-
*
|
|
28
|
-
* A span rather than a height because that is the one shape both modes fit. A
|
|
29
|
-
* grouped bar runs from zero to its value; a stacked segment runs from the
|
|
30
|
-
* running total below it to that total plus its own value. Negative values fall
|
|
31
|
-
* out of the same arithmetic — the span simply runs the other way — so a chart
|
|
32
|
-
* with a loss in it needs no special case, only a baseline that isn't the floor.
|
|
6
|
+
* One bar's span in data units. A span rather than a height because both modes
|
|
7
|
+
* fit it, and a negative value just runs the other way with no special case.
|
|
33
8
|
*/
|
|
34
9
|
export interface BarSpan {
|
|
35
|
-
/**
|
|
10
|
+
/** Where the base sits: 0 when grouped, the running total below when stacked. */
|
|
36
11
|
from: number;
|
|
37
|
-
/** Value its far end reaches. */
|
|
38
12
|
to: number;
|
|
39
|
-
/**
|
|
13
|
+
/** `to - from`, kept for the figure printed on the bar. */
|
|
40
14
|
value: number;
|
|
41
15
|
}
|
|
42
16
|
/**
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
* the order they're drawn: series 0 sits on the baseline and each later one
|
|
47
|
-
* rides on what's below it. A zero-valued series still yields a (degenerate)
|
|
48
|
-
* span so the returned list stays index-aligned with the series list.
|
|
17
|
+
* One row's spans, in series order. Stacking is a running sum in listed order,
|
|
18
|
+
* so series 0 sits on the baseline. A zero value still yields a degenerate span,
|
|
19
|
+
* keeping the list index-aligned with the series.
|
|
49
20
|
*/
|
|
50
21
|
export declare function barSpans(row: DataRecord, series: BarSeries[], stacked: boolean): BarSpan[];
|
|
51
22
|
/**
|
|
52
|
-
* The
|
|
53
|
-
* the
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
* Read off the *last non-zero* series rather than the last one listed, so a
|
|
57
|
-
* series that happens to be 0 in this row doesn't take the cap and leave the
|
|
58
|
-
* segment below it square.
|
|
23
|
+
* The series ending a row's stack, which gets the rounded cap; `-1` when the row
|
|
24
|
+
* is all zero. It is the last non-zero series, so a zero one does not take the
|
|
25
|
+
* cap and leave the segment below square.
|
|
59
26
|
*/
|
|
60
27
|
export declare function stackCapIndex(row: DataRecord, series: BarSeries[]): number;
|
|
61
|
-
/** The captions beneath the baseline: one per row, read off the category column. */
|
|
62
28
|
export declare function barCategories(data: DataRecord[], field: string): string[];
|
|
63
29
|
/**
|
|
64
|
-
* The `[min, max]` of everything
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
* zero: a scale starting at 40 draws a column three times its neighbour for a
|
|
68
|
-
* 10% difference, which is the classic way to lie with one. A chart that really
|
|
69
|
-
* does want a cropped axis says so with an explicit range.
|
|
30
|
+
* The `[min, max]` of everything drawn, zero always included: a scale starting
|
|
31
|
+
* at 40 draws a column three times its neighbour for a 10% difference. A cropped
|
|
32
|
+
* axis takes an explicit range.
|
|
70
33
|
*/
|
|
71
34
|
export declare function barValueExtent(data: DataRecord[], series: BarSeries[], stacked: boolean): Range;
|
|
72
|
-
/**
|
|
73
|
-
* Effective value scale: the explicit `range`, else the data's extent nudged out
|
|
74
|
-
* to tidy step bounds so the markers read as round numbers.
|
|
75
|
-
*
|
|
76
|
-
* `divisions` is how many segments the auto-range is stepped into (one fewer
|
|
77
|
-
* than the marker count), so the ticks the axis draws land on the bounds this
|
|
78
|
-
* picks.
|
|
79
|
-
*/
|
|
35
|
+
/** The explicit `range`, else the data's extent nudged to tidy bounds; `divisions` (one fewer than the marker count) makes the drawn ticks land on them. */
|
|
80
36
|
export declare function resolveBarScale(data: DataRecord[], series: BarSeries[], stacked: boolean, range: Range | undefined, divisions: number): Range;
|
|
81
|
-
/** How the columns
|
|
37
|
+
/** How the columns are drawn and the slot divided. */
|
|
82
38
|
export interface BarStyleConfig {
|
|
83
|
-
/**
|
|
84
|
-
* Radius of a column's far-end corners, in px. Only the outer end rounds — an
|
|
85
|
-
* interior stacked segment stays square, so the stack reads as one column.
|
|
86
|
-
*/
|
|
39
|
+
/** Radius in px of a column's far-end corners; an interior stacked segment stays square. */
|
|
87
40
|
cornerRadius: number;
|
|
88
|
-
/**
|
|
89
|
-
* Fraction of its category's slot the bars fill, `[0, 1]`. The remainder is
|
|
90
|
-
* the channel between one category and the next, which is what makes a bar
|
|
91
|
-
* chart read as groups rather than as a solid block.
|
|
92
|
-
*/
|
|
41
|
+
/** Fraction of the category slot the bars fill, `[0, 1]`; the rest separates groups. */
|
|
93
42
|
slotFill: number;
|
|
94
|
-
/** Gap between
|
|
43
|
+
/** Gap in px between grouped bars within a slot; ignored when stacked. */
|
|
95
44
|
groupGap: number;
|
|
96
|
-
/** Optional outline on every column. */
|
|
97
45
|
stroke: Stroke;
|
|
98
|
-
/** Optional drop shadow on every column. */
|
|
99
46
|
shadow: Shadow;
|
|
100
47
|
}
|
|
101
48
|
/** A {@link BarChart}'s full, resolved visual theme. */
|
|
102
49
|
export interface BarChartConfig {
|
|
103
|
-
/**
|
|
104
|
-
* Default per-series bar paint, cycled by series index (`i % length`). A
|
|
105
|
-
* series' own `fill`, when set, replaces its entry outright.
|
|
106
|
-
*/
|
|
50
|
+
/** Cycled by series index; a series' own `fill` replaces its entry outright. */
|
|
107
51
|
seriesFills: Fill[];
|
|
108
52
|
bar: BarStyleConfig;
|
|
109
|
-
/** The category axis
|
|
53
|
+
/** The category axis. */
|
|
110
54
|
xAxis: AxisConfig;
|
|
111
|
-
/** The
|
|
55
|
+
/** The value axis. */
|
|
112
56
|
yAxis: AxisConfig;
|
|
113
57
|
plotArea: PlotAreaConfig;
|
|
114
58
|
legend: LegendConfig;
|
|
115
|
-
/** The figure printed on each column
|
|
59
|
+
/** The figure printed on each column. */
|
|
116
60
|
valueStyle: TextStyle;
|
|
117
|
-
/** How far everything
|
|
61
|
+
/** How far everything outside a spotlit series or category fades. */
|
|
118
62
|
spotlight: {
|
|
119
63
|
dimOpacity: number;
|
|
120
64
|
};
|
|
121
65
|
}
|
|
122
|
-
/**
|
|
66
|
+
/** The author's partial theme, deep-merged onto {@link DEFAULT_BAR_CHART_THEME}. */
|
|
123
67
|
export type BarChartTheme = {
|
|
124
68
|
seriesFills?: Fill[];
|
|
125
69
|
bar?: Partial<BarStyleConfig>;
|
|
@@ -130,17 +74,10 @@ export type BarChartTheme = {
|
|
|
130
74
|
valueStyle?: TextStyle;
|
|
131
75
|
spotlight?: Partial<BarChartConfig["spotlight"]>;
|
|
132
76
|
};
|
|
133
|
-
/** The bar chart's out-of-the-box look. */
|
|
134
77
|
export declare const DEFAULT_BAR_CHART_THEME: BarChartConfig;
|
|
135
|
-
/**
|
|
136
|
-
* {@link BarChart}'s `theme` entry's resolve: merges the author's partial
|
|
137
|
-
* {@link BarChartTheme} onto `previous` (falling back to
|
|
138
|
-
* {@link DEFAULT_BAR_CHART_THEME} on first resolution), fully resolving every
|
|
139
|
-
* leaf so the tween below always has resolved data to interpolate.
|
|
140
|
-
*/
|
|
78
|
+
/** The `theme` entry's resolve: merges a partial {@link BarChartTheme} onto `previous` (first resolution: the default). */
|
|
141
79
|
export declare function resolveBarChartTheme(theme: BarChartTheme | undefined, previous?: BarChartConfig): BarChartConfig;
|
|
142
|
-
/** {@link BarChart}'s `theme` entry's lerp — leaf by leaf. */
|
|
143
80
|
export declare function lerpBarChartTheme(from: BarChartConfig, to: BarChartConfig, t: number): BarChartConfig;
|
|
144
|
-
/**
|
|
81
|
+
/** Series `index`'s own `fill`, else the palette's entry. */
|
|
145
82
|
export declare function resolveBarFill(palette: Fill[], series: BarSeries, index: number): Fill;
|
|
146
83
|
//# sourceMappingURL=shared.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/bar-chart/shared.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/bar-chart/shared.ts"],"names":[],"mappings":"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"}
|