@blueprint-chart/docs 0.1.29 → 0.1.30
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/dist/manifest.json +1 -1
- package/package.json +5 -4
- package/src/charts/area-stacked.md +1 -1
- package/src/charts/bar-grouped.md +1 -1
- package/src/charts/bar-multi.md +1 -1
- package/src/charts/bar-split.md +1 -1
- package/src/charts/bar-stacked.md +1 -1
- package/src/charts/column-stacked.md +1 -1
- package/src/charts/line-multi.md +1 -1
- package/src/guide/accessibility.md +1 -1
- package/src/guide/dsl-editor.md +4 -4
- package/src/guide/embed.md +7 -7
- package/src/guide/getting-started.md +2 -2
- package/src/guide/mcp.md +1 -0
- package/src/guide/palettes.md +1 -1
- package/src/guide/scenes.md +4 -4
- package/src/handbook/annotations.md +3 -3
- package/src/handbook/anti-patterns.md +2 -2
- package/src/handbook/frame-elements.md +1 -1
- package/src/handbook/labels.md +1 -1
- package/src/handbook/tooltips.md +1 -1
- package/src/reference/api/index.md +1 -1
- package/src/reference/dsl/annotations.md +10 -9
- package/src/reference/dsl/index.md +11 -10
- package/src/reference/dsl/properties.md +5 -5
- package/src/reference/dsl/scenes-and-transforms.md +5 -7
package/dist/manifest.json
CHANGED
|
@@ -228,7 +228,7 @@
|
|
|
228
228
|
"slug": "annotations",
|
|
229
229
|
"group": "reference/dsl",
|
|
230
230
|
"title": "annotations",
|
|
231
|
-
"blurb": "Two families of named blocks that target specific data values to draw the eye: **color directives** (`colorize`, `highlight`, `
|
|
231
|
+
"blurb": "Two families of named blocks that target specific data values to draw the eye: **color directives** (`colorize`, `highlight`, `area-fill`) recolor or emphasize parts of the chart, and **annotations** ",
|
|
232
232
|
"mdPath": "reference/dsl/annotations.md"
|
|
233
233
|
},
|
|
234
234
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blueprint-chart/docs",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.30",
|
|
4
4
|
"description": "Public documentation for Blueprint Chart — handbook, guide, BPC DSL spec, and lib API reference.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -33,11 +33,12 @@
|
|
|
33
33
|
"provenance": true
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@types/node": "^22.10.0",
|
|
37
36
|
"@fontsource-variable/geist": "^5.2.8",
|
|
38
37
|
"@fontsource-variable/geist-mono": "^5.2.7",
|
|
39
38
|
"@fontsource/dm-serif-display": "^5.2.8",
|
|
40
39
|
"@iconify-json/ph": "^1.2.2",
|
|
40
|
+
"@types/node": "^22.10.0",
|
|
41
|
+
"@vitejs/plugin-vue": "^5.2.4",
|
|
41
42
|
"@vue/test-utils": "^2.4.6",
|
|
42
43
|
"@vueuse/core": "^14.2.1",
|
|
43
44
|
"gray-matter": "^4.0.3",
|
|
@@ -48,8 +49,8 @@
|
|
|
48
49
|
"vitepress": "^1.5.0",
|
|
49
50
|
"vitest": "^3.2.4",
|
|
50
51
|
"vue": "^3.5",
|
|
51
|
-
"@blueprint-chart/lib": "0.1.
|
|
52
|
-
"@blueprint-chart/ui": "0.1.
|
|
52
|
+
"@blueprint-chart/lib": "0.1.30",
|
|
53
|
+
"@blueprint-chart/ui": "0.1.30"
|
|
53
54
|
},
|
|
54
55
|
"scripts": {
|
|
55
56
|
"dev": "vitepress dev src --host 0.0.0.0 --port 4445",
|
package/src/charts/bar-multi.md
CHANGED
package/src/charts/bar-split.md
CHANGED
package/src/charts/line-multi.md
CHANGED
package/src/guide/dsl-editor.md
CHANGED
|
@@ -76,7 +76,7 @@ The CodeMirror 6 stack pulls in `@codemirror/view`, `@codemirror/state`, `@codem
|
|
|
76
76
|
- `bpcHighlighter` — a `syntaxHighlighting` extension pre-wired to the class-based highlighter.
|
|
77
77
|
- `highlightDsl(code)` — one-shot server-style highlight, used by read-only previews; returns HTML.
|
|
78
78
|
|
|
79
|
-
The Lezer parser tags DSL keywords (`chart`, `data`, `colorize`, `highlight`, `
|
|
79
|
+
The Lezer parser tags DSL keywords (`chart`, `data`, `colorize`, `highlight`, `area-fill`, `annotation`, `range`, `note`, `series`, `scene`, `transform`) and lexical tokens (`Identifier`, `String`, `Number`, `Percentage`, `Equals`, `LineComment`, braces). Each tag maps to a token class in `packages/editor/src/dsl-lang/highlight.scss`, with separate light- and dark-mode rules driven by the `--bc-syn-*` CSS custom properties.
|
|
80
80
|
|
|
81
81
|
## Two-way sync between DSL and panels
|
|
82
82
|
|
|
@@ -130,7 +130,7 @@ const html = highlightDsl(`chart line-multi {
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
data {
|
|
133
|
-
|
|
133
|
+
series = "United States","China","Germany"
|
|
134
134
|
"2018" = 2.9,6.7,1.0
|
|
135
135
|
"2020" = -2.8,2.2,-3.7
|
|
136
136
|
"2024" = 2.8,5.0,-0.2
|
|
@@ -140,8 +140,8 @@ const html = highlightDsl(`chart line-multi {
|
|
|
140
140
|
document.querySelector('#preview')!.innerHTML = html
|
|
141
141
|
```
|
|
142
142
|
|
|
143
|
-
::: tip
|
|
144
|
-
The DSL string is
|
|
143
|
+
::: tip Inline example
|
|
144
|
+
The DSL string is an abbreviated GDP series (the 2018, 2020, and 2024 rows). Good stress-case for the highlighter — multi-series data, palette name, a negative number, an annotation block.
|
|
145
145
|
:::
|
|
146
146
|
|
|
147
147
|
This skips the editor surface entirely and is the right tool when the user shouldn't be able to type.
|
package/src/guide/embed.md
CHANGED
|
@@ -26,7 +26,7 @@ The simplest path. Load the standalone runtime once per page, then add one `<scr
|
|
|
26
26
|
tooltips = true
|
|
27
27
|
|
|
28
28
|
data {
|
|
29
|
-
|
|
29
|
+
series = "Hydro","Wind","Solar"
|
|
30
30
|
"2010" = 16.0,1.6,0.3
|
|
31
31
|
"2012" = 16.2,2.4,0.6
|
|
32
32
|
"2014" = 16.3,3.3,1.1
|
|
@@ -40,8 +40,8 @@ The simplest path. Load the standalone runtime once per page, then add one `<scr
|
|
|
40
40
|
</script>
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
-
::: tip
|
|
44
|
-
|
|
43
|
+
::: tip Inline example
|
|
44
|
+
A multi-series line with explicit per-series colours and a single trailing symbol on the last datapoint of each series. Pasted verbatim into a page, it renders to a self-contained iframe with no extra wiring.
|
|
45
45
|
:::
|
|
46
46
|
|
|
47
47
|
The runtime auto-runs on `DOMContentLoaded`, finds every chart script tag, and replaces it with a sandboxed iframe (`sandbox="allow-scripts"`) sized via `postMessage` to match the rendered chart.
|
|
@@ -144,8 +144,8 @@ Two end-to-end examples drawn straight from the lib's sample library — paste e
|
|
|
144
144
|
</script>
|
|
145
145
|
```
|
|
146
146
|
|
|
147
|
-
::: tip
|
|
148
|
-
|
|
147
|
+
::: tip Inline example
|
|
148
|
+
A donut chart with an explicit categorical palette, right-anchored legend, and percentage display.
|
|
149
149
|
:::
|
|
150
150
|
|
|
151
151
|
### Line: a single-series time series with an annotation
|
|
@@ -185,8 +185,8 @@ This is `packages/lib/src/samples/energy-sources.bpc` — a donut chart with an
|
|
|
185
185
|
</script>
|
|
186
186
|
```
|
|
187
187
|
|
|
188
|
-
::: tip
|
|
189
|
-
|
|
188
|
+
::: tip Inline example
|
|
189
|
+
A single-series line with circular symbols on every datapoint, a pinned annotation on the peak, and a one-decimal vertical number format.
|
|
190
190
|
:::
|
|
191
191
|
|
|
192
192
|
## Security model
|
|
@@ -115,8 +115,8 @@ If you don't need the programmatic API, use the bundled runtime. It picks up eve
|
|
|
115
115
|
</script>
|
|
116
116
|
```
|
|
117
117
|
|
|
118
|
-
::: tip
|
|
119
|
-
|
|
118
|
+
::: tip Inline example
|
|
119
|
+
A donut chart with a hand-picked categorical palette, percentage display, and a right-anchored legend.
|
|
120
120
|
:::
|
|
121
121
|
|
|
122
122
|
See the [embedding guide](/guide/embed) for static sites, CMS integrations, and the base64 iframe pattern.
|
package/src/guide/mcp.md
CHANGED
|
@@ -129,6 +129,7 @@ The handbook, DSL grammar, guides, chart-type docs, and canonical samples are al
|
|
|
129
129
|
> **Your assistant:** *(calls `list_chart_types` and `get_example`, writes the `.bpc`, calls
|
|
130
130
|
> `validate_dsl` to confirm it parses, then `render` and shows you the image and the source)*
|
|
131
131
|
|
|
132
|
+
<!-- bpc-no-parse -->
|
|
132
133
|
```bpc
|
|
133
134
|
chart bar-horizontal {
|
|
134
135
|
title = "E is the most frequent letter in English"
|
package/src/guide/palettes.md
CHANGED
|
@@ -203,5 +203,5 @@ For the accessibility helpers (`wcagContrastRatio`, `wcagLevel`, `checkCvdColors
|
|
|
203
203
|
|
|
204
204
|
- [Accessibility](/guide/accessibility) — WCAG and CVD utilities.
|
|
205
205
|
- [Colour handbook](/handbook/color) — palette theory and reduction techniques.
|
|
206
|
-
- [BPC DSL — Color directives](/reference/dsl/annotations#color-directives) for `colorize`, `highlight`, `
|
|
206
|
+
- [BPC DSL — Color directives](/reference/dsl/annotations#color-directives) for `colorize`, `highlight`, `area-fill`.
|
|
207
207
|
- [API reference](/reference/api/#palettes) for the full export list.
|
package/src/guide/scenes.md
CHANGED
|
@@ -108,7 +108,7 @@ scene "Bulgaria: subsidies explode" {
|
|
|
108
108
|
description = "85% of Bulgarian subsidies are direct payments — the highest share among new members"
|
|
109
109
|
|
|
110
110
|
data {
|
|
111
|
-
|
|
111
|
+
series = "Indirect subsidies","Direct subsidies"
|
|
112
112
|
"2000" = 0,5
|
|
113
113
|
"2004" = 0,67
|
|
114
114
|
"2007" = 59,250
|
|
@@ -150,7 +150,7 @@ Scene #5 of `packages/lib/src/samples/farm-compass.bpc`. The story changes chart
|
|
|
150
150
|
|
|
151
151
|
### Hide an annotation in a later scene
|
|
152
152
|
|
|
153
|
-
Use `
|
|
153
|
+
Use `hide-annotation`, `hide-range`, or `hide-note` with the annotation's id to peel things back as the story progresses:
|
|
154
154
|
|
|
155
155
|
```bpc
|
|
156
156
|
annotation "2015" {
|
|
@@ -159,11 +159,11 @@ annotation "2015" {
|
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
scene "Without Paris callout" {
|
|
162
|
-
|
|
162
|
+
hide-annotation "paris"
|
|
163
163
|
}
|
|
164
164
|
```
|
|
165
165
|
|
|
166
|
-
To bring it back later, use `
|
|
166
|
+
To bring it back later, use `show-annotation "paris"` in a subsequent scene.
|
|
167
167
|
|
|
168
168
|
### Drive playback from your own UI
|
|
169
169
|
|
|
@@ -56,7 +56,7 @@ chart bar-split {
|
|
|
56
56
|
sharedScale = true
|
|
57
57
|
|
|
58
58
|
data {
|
|
59
|
-
|
|
59
|
+
series = "Mathematics","Reading","Science"
|
|
60
60
|
"Singapore" = 575,543,561
|
|
61
61
|
"Japan" = 536,516,547
|
|
62
62
|
"Korea" = 527,515,528
|
|
@@ -68,7 +68,7 @@ chart bar-split {
|
|
|
68
68
|
```
|
|
69
69
|
|
|
70
70
|
::: tip Done right
|
|
71
|
-
`sharedScale = true` forces every panel onto the same baseline-zero axis, so the eye can compare Mathematics directly against Reading directly against Science. `valueLabels = true` then exposes the exact number, removing any temptation to truncate the axis for visual drama. This is the corrective pattern for the "truncated y-axis", "dual y-axes", and "missing context" rows above.
|
|
71
|
+
`sharedScale = true` forces every panel onto the same baseline-zero axis, so the eye can compare Mathematics directly against Reading directly against Science. `valueLabels = true` then exposes the exact number, removing any temptation to truncate the axis for visual drama. This is the corrective pattern for the "truncated y-axis", "dual y-axes", and "missing context" rows above.
|
|
72
72
|
:::
|
|
73
73
|
|
|
74
74
|
## The meta-rule
|
|
@@ -86,7 +86,7 @@ chart line {
|
|
|
86
86
|
}
|
|
87
87
|
```
|
|
88
88
|
|
|
89
|
-
::: info
|
|
89
|
+
::: info Worked example
|
|
90
90
|
A declarative title carries the insight (`"…peaked at 9.1% before retreating to near 3%"`), `description` fixes the unit and time period, `note` confines the methodology footnote to the bottom, `source` plus `sourceUrl` form the attribution pair, and `byline` is the credit slot. Each field maps one-to-one onto `FrameOptions`.
|
|
91
91
|
:::
|
|
92
92
|
|
package/src/handbook/labels.md
CHANGED
package/src/handbook/tooltips.md
CHANGED
|
@@ -141,7 +141,7 @@ The `parse → mutate → serialize` cycle is **round-trip safe**: re-parsing th
|
|
|
141
141
|
|
|
142
142
|
### AST node types
|
|
143
143
|
|
|
144
|
-
`ChartNode` · `DataNode` · `PropertyNode` · `SeriesNode` · `SceneNode` · `
|
|
144
|
+
`ChartNode` · `DataNode` · `PropertyNode` · `SeriesNode` · `SceneNode` · `TransformNode` · `ColorizeNode` · `HighlightNode` · `AreaFillNode` · `AnnotationNode` · `PointAnnotationNode` · `RangeAnnotationNode` · `FreeAnnotationNode` · `AnnotationVisibilityNode`
|
|
145
145
|
|
|
146
146
|
See [the DSL spec](/reference/dsl/) for the corresponding source-level grammar.
|
|
147
147
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# DSL — Color directives & annotations
|
|
2
2
|
|
|
3
|
-
Two families of named blocks that target specific data values to draw the eye: **color directives** (`colorize`, `highlight`, `
|
|
3
|
+
Two families of named blocks that target specific data values to draw the eye: **color directives** (`colorize`, `highlight`, `area-fill`) recolor or emphasize parts of the chart, and **annotations** (`annotation`, `range`, `note`) attach text and shapes to data points, ranges, or absolute positions. Both share the same "named block with a body" shape, and `highlight` is the verb scenes use to switch emphasis — see [Scenes & transforms](/reference/dsl/scenes-and-transforms).
|
|
4
4
|
|
|
5
5
|
## Color directives
|
|
6
6
|
|
|
@@ -8,7 +8,7 @@ Two families of named blocks that target specific data values to draw the eye: *
|
|
|
8
8
|
| --- | --- |
|
|
9
9
|
| `colorize "<target>" { … }` | Apply a color rule to a target (axis label, value label, etc.). |
|
|
10
10
|
| `highlight "<target>" { … }` or `highlight "<target>"` | Emphasize a data point or series. The short form has no body. |
|
|
11
|
-
| `
|
|
11
|
+
| `area-fill "<from>" "<to>" { … }` | Fill the area between two series with a color (line / area charts). |
|
|
12
12
|
|
|
13
13
|
### `colorize`
|
|
14
14
|
|
|
@@ -63,17 +63,17 @@ scene "Japan declining" {
|
|
|
63
63
|
Three scenes share the same data and successively highlight one country each — the canonical "guided tour" pattern.
|
|
64
64
|
:::
|
|
65
65
|
|
|
66
|
-
### `
|
|
66
|
+
### `area-fill`
|
|
67
67
|
|
|
68
68
|
```bpc
|
|
69
|
-
|
|
69
|
+
area-fill "Lower bound" "Upper bound" {
|
|
70
70
|
color = "#94a3b8"
|
|
71
71
|
opacity = 0.2
|
|
72
72
|
}
|
|
73
73
|
```
|
|
74
74
|
|
|
75
75
|
::: tip
|
|
76
|
-
No bundled sample currently uses `
|
|
76
|
+
No bundled sample currently uses `area-fill`. The grammar is documented and parser-tested; the example above is illustrative.
|
|
77
77
|
:::
|
|
78
78
|
|
|
79
79
|
## Annotations
|
|
@@ -115,13 +115,14 @@ Demonstrates `showLine` + `lineStyle = curve-right` for a labelled callout that
|
|
|
115
115
|
### Range and free annotations
|
|
116
116
|
|
|
117
117
|
```bpc
|
|
118
|
-
range {
|
|
119
|
-
|
|
120
|
-
|
|
118
|
+
range { // range: spans a domain/value window
|
|
119
|
+
orientation = vertical
|
|
120
|
+
start = "2020"
|
|
121
|
+
end = "2022"
|
|
121
122
|
text = "Pandemic rally"
|
|
122
123
|
}
|
|
123
124
|
|
|
124
|
-
note {
|
|
125
|
+
note { // free: absolutely positioned
|
|
125
126
|
text = "Methodology footnote"
|
|
126
127
|
x = "10%"
|
|
127
128
|
y = "90%"
|
|
@@ -5,7 +5,7 @@ The Blueprint Chart format (`.bpc`) is a declarative text DSL for describing a c
|
|
|
5
5
|
The canonical grammar lives in [`packages/lib/src/dsl/grammar.peggy`](https://github.com/blueprint-chart/blueprint-chart/blob/main/packages/lib/src/dsl/grammar.peggy). This page is the human-readable specification.
|
|
6
6
|
|
|
7
7
|
::: tip Stability
|
|
8
|
-
The DSL is **round-trip safe**: `parse(source)` → `serialize(ast)` → `parse(...)` produces an equivalent AST.
|
|
8
|
+
The DSL is **AST round-trip safe**: `parse(source)` → `serialize(ast)` → `parse(...)` produces an equivalent AST. The round trip is over the AST, not the source text. Comments are parsed as whitespace and are **not** preserved through `serialize`, so a re-serialized document drops any `//` or `/* */` comments the author wrote. Comment attachment is tracked on the [roadmap](https://github.com/blueprint-chart/blueprint-chart/blob/main/ROADMAP.md).
|
|
9
9
|
:::
|
|
10
10
|
|
|
11
11
|
## A minimal example
|
|
@@ -51,12 +51,13 @@ A single-series line chart with a brand color, custom symbol shape, vertical-axi
|
|
|
51
51
|
|
|
52
52
|
A BPC document is exactly one `chart` block:
|
|
53
53
|
|
|
54
|
+
<!-- bpc-no-parse -->
|
|
54
55
|
```bpc
|
|
55
56
|
chart <chartType> {
|
|
56
57
|
<properties>
|
|
57
58
|
<data block>
|
|
58
59
|
<series>
|
|
59
|
-
<colorize / highlight /
|
|
60
|
+
<colorize / highlight / area-fill / annotation / range / note>
|
|
60
61
|
<scenes>
|
|
61
62
|
<transforms>
|
|
62
63
|
}
|
|
@@ -80,20 +81,20 @@ Used for chart-type names, property keys, and transform names.
|
|
|
80
81
|
String ← '"' StringChar* '"'
|
|
81
82
|
```
|
|
82
83
|
|
|
83
|
-
Strings are double-quoted. Supported escapes: `\\`, `\"`, `\n`, `\t`, `\r
|
|
84
|
+
Strings are double-quoted. Supported escapes: `\\`, `\"`, `\n`, `\t`, `\r`, and `\uXXXX` (four hex digits, decoded to the matching code point). Any other escape sequence is a parse error.
|
|
84
85
|
|
|
85
86
|
### Numbers
|
|
86
87
|
|
|
87
88
|
```
|
|
88
|
-
Number ← '-'? Digit+ ('.' Digit+)?
|
|
89
|
+
Number ← '-'? ('.' Digit+ / Digit+ ('.' Digit*)?) ([eE] [+-]? Digit+)?
|
|
89
90
|
Percent ← Number '%'
|
|
90
91
|
```
|
|
91
92
|
|
|
92
|
-
A trailing `%` marks the value as a percentage; the parser preserves `isPercentage: true` on the AST node so downstream code can distinguish `25` from `25%`.
|
|
93
|
+
Numbers accept an optional leading minus, a fractional part (including a leading-dot form such as `.5`), and an optional scientific-notation exponent (`1e3`, `2.5E-4`). A trailing `%` marks the value as a percentage; the parser preserves `isPercentage: true` on the AST node so downstream code can distinguish `25` from `25%`.
|
|
93
94
|
|
|
94
95
|
### Comments
|
|
95
96
|
|
|
96
|
-
Line comments start with `//` and run to end-of-line.
|
|
97
|
+
Two comment forms exist. Line comments start with `//` and run to end-of-line. Block comments are delimited by `/*` and `*/` and may span multiple lines. Both are treated as whitespace and carry no meaning in the AST.
|
|
97
98
|
|
|
98
99
|
## Working with the AST
|
|
99
100
|
|
|
@@ -105,14 +106,14 @@ const text = serialize(ast) // AST → BPC text (pretty)
|
|
|
105
106
|
const tight = compactSerialize(ast) // AST → BPC text (compact)
|
|
106
107
|
```
|
|
107
108
|
|
|
108
|
-
|
|
109
|
+
For any value the grammar accepts, `parse(serialize(parse(x)))` is structurally equal to `parse(x)`, and the test suite enforces it. The guarantee covers AST structure only: because comments are consumed as whitespace during parsing, `serialize` cannot reproduce them, so the emitted text will differ from a comment-bearing original.
|
|
109
110
|
|
|
110
111
|
## Stability and versioning
|
|
111
112
|
|
|
112
113
|
- `parse` errors throw `SyntaxError` with a 1-indexed `location` (line / column) for tooling.
|
|
113
114
|
- Unknown property keys are preserved on the AST; renderers may ignore them.
|
|
114
115
|
- Unknown top-level statements are a parse error — by design.
|
|
115
|
-
-
|
|
116
|
+
- While Blueprint Chart is pre-1.0, the grammar may change in any release. Every DSL change is called out in the [CHANGELOG](https://github.com/blueprint-chart/blueprint-chart/blob/main/CHANGELOG.md) under a dedicated **DSL** heading. From 1.0 onward, a breaking grammar change requires a major version bump.
|
|
116
117
|
|
|
117
118
|
## See it in action
|
|
118
119
|
|
|
@@ -121,7 +122,7 @@ Every snippet across these DSL pages is taken verbatim from a runnable sample in
|
|
|
121
122
|
| Feature shown | Sample file | Chart-type page |
|
|
122
123
|
| --- | --- | --- |
|
|
123
124
|
| Minimal example, point annotation | `bitcoin-price.bpc` | [Line chart](/charts/line) |
|
|
124
|
-
| Multi-series data, `
|
|
125
|
+
| Multi-series data, `series` meta-row | `medal-count.bpc` | [Bar multi](/charts/bar-multi) |
|
|
125
126
|
| `colorize` single category | `letter-frequency.bpc` | [Bar vertical](/charts/bar-vertical) |
|
|
126
127
|
| Curved-leader annotation | `temperature-anomaly.bpc` | [Line chart](/charts/line) |
|
|
127
128
|
| Scene-by-scene `highlight` tour | `co2-emissions-story.bpc` | [Bar horizontal](/charts/bar-horizontal) |
|
|
@@ -133,5 +134,5 @@ Every snippet across these DSL pages is taken verbatim from a runnable sample in
|
|
|
133
134
|
The rest of the DSL specification is split across three chapter pages:
|
|
134
135
|
|
|
135
136
|
- [Properties & data](/reference/dsl/properties) — value-bearing constructs.
|
|
136
|
-
- [Color directives & annotations](/reference/dsl/annotations) — `colorize`, `highlight`, `
|
|
137
|
+
- [Color directives & annotations](/reference/dsl/annotations) — `colorize`, `highlight`, `area-fill`, and the three annotation kinds.
|
|
137
138
|
- [Scenes & transforms](/reference/dsl/scenes-and-transforms) — story-level constructs and data-pipeline operations.
|
|
@@ -16,7 +16,7 @@ lineSymbolShape = "diamond"
|
|
|
16
16
|
| Value kind | Example | Notes |
|
|
17
17
|
| --- | --- | --- |
|
|
18
18
|
| String | `"Chrome"` | Double-quoted. |
|
|
19
|
-
| Number | `42`, `3.14`, `-1.2` | Optional minus, optional decimal
|
|
19
|
+
| Number | `42`, `3.14`, `-1.2`, `.5`, `2.5e-4` | Optional minus, optional decimal (leading-dot allowed), optional `e`/`E` exponent. |
|
|
20
20
|
| Percentage | `35%` | Number suffixed with `%`. |
|
|
21
21
|
| Identifier | `true`, `false`, `right` | Used for enum-valued properties. |
|
|
22
22
|
|
|
@@ -36,11 +36,11 @@ data {
|
|
|
36
36
|
}
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
For multi-series data, comma-separated values map positionally to series. A leading `
|
|
39
|
+
For multi-series data, comma-separated values map positionally to series. A leading `series = "A","B",…` row labels each column. The unquoted key `series` inside a `data` block is reserved for this meta-row; quote your labels (`"series" = …`) if you ever need a real data row by that name:
|
|
40
40
|
|
|
41
41
|
```bpc
|
|
42
42
|
data {
|
|
43
|
-
|
|
43
|
+
series = "Gold","Silver","Bronze"
|
|
44
44
|
"USA" = 40,44,42
|
|
45
45
|
"China" = 38,32,18
|
|
46
46
|
"Japan" = 27,14,17
|
|
@@ -51,7 +51,7 @@ data {
|
|
|
51
51
|
```
|
|
52
52
|
|
|
53
53
|
::: info From `packages/lib/src/samples/medal-count.bpc`
|
|
54
|
-
A `bar-multi` chart driven by three positional columns. The `
|
|
54
|
+
A `bar-multi` chart driven by three positional columns. The `series` meta-row supplies legend labels; each subsequent row's comma-separated values map to those columns in order.
|
|
55
55
|
:::
|
|
56
56
|
|
|
57
57
|
A **tabular** form is also accepted — keys and values separated by a literal tab character — for pasting CSV-like input:
|
|
@@ -75,5 +75,5 @@ series "Renewables" {
|
|
|
75
75
|
```
|
|
76
76
|
|
|
77
77
|
::: tip
|
|
78
|
-
None of the bundled `packages/lib/src/samples/*.bpc` files currently exercise top-level `series` overrides
|
|
78
|
+
None of the bundled `packages/lib/src/samples/*.bpc` files currently exercise top-level `series` overrides. The samples lean on the `series` meta-row inside `data` plus `colors`, `colorPalette`, and `colorize` directives. The example above is illustrative; the grammar is exercised by parser tests.
|
|
79
79
|
:::
|
|
@@ -54,7 +54,7 @@ scene "Cash crops replaced vegetables" {
|
|
|
54
54
|
type = area-stacked
|
|
55
55
|
|
|
56
56
|
data {
|
|
57
|
-
|
|
57
|
+
series = "Vegetables","Cash crops","Other production"
|
|
58
58
|
"2000" = 464,615,1854
|
|
59
59
|
"2008" = 541,2045,1563
|
|
60
60
|
"2015" = 144,2986,785
|
|
@@ -72,12 +72,10 @@ Scenes accept the same member set as the top-level chart, **plus** annotation-vi
|
|
|
72
72
|
|
|
73
73
|
| Verb | Effect |
|
|
74
74
|
| --- | --- |
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
|
|
80
|
-
`step` is accepted as an alias for `scene`.
|
|
75
|
+
| `hide-annotation "<id>"` | Hide a point annotation set on the chart. |
|
|
76
|
+
| `hide-range "<id>"` | Hide a range annotation. |
|
|
77
|
+
| `hide-note "<id>"` | Hide a free / note annotation. |
|
|
78
|
+
| `show-annotation "<id>"` / `show-range "<id>"` / `show-note "<id>"` | Re-show one previously hidden by an earlier scene. |
|
|
81
79
|
|
|
82
80
|
## Transforms
|
|
83
81
|
|