@martinomagnifico/tablechart 0.1.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 ADDED
@@ -0,0 +1,73 @@
1
+ # Changelog
2
+
3
+ ## [0.1.0]
4
+
5
+ ### Added
6
+
7
+
8
+ - The legend of an area chart has a square in front of each name.
9
+ - Each line of a chart with several lines has its own point: a filled circle, an open circle, a filled square, an open square, a filled diamond and an open diamond, then from the start again. `data-marker` on a column header sets another, such as `square` or `diamond open`. The legend shows the same points. Points have `data-marker` with their shape, and `data-open` when they are open.
10
+ - `data-line="dashed"` or `data-line="dotted"` on a column header makes a dashed or dotted line. It is shown from left to right when the chart builds. The legend shows the same line. `--tablechart-dash` and `--tablechart-dot` set the pattern.
11
+
12
+
13
+ ## [0.0.8]
14
+
15
+ ### Changed
16
+ - The figure and the table of a chart get the chart's title as their name, with `aria-labelledby`, so a screen reader that jumps to the table reads the title and the unit too. A figure or table with a name of its own keeps it.
17
+ - If a donut has no total row, a hidden row with the sum is added to the bottom of its table, so screen readers read the total with a name. The `totallabel` option sets the name, "Total" by default.
18
+ - All text in the drawing is `inert`, so Safari with VoiceOver does not read it.
19
+ - A full stop, hidden from sight, is put before each line break in the title, so a screen reader pauses between the title and the subtitle.
20
+ - The drawing, its names and its legend have `aria-hidden="true"`. The names and the legend are also `inert`, because Safari with VoiceOver read them otherwise. Screen readers read the table, which has the same names and numbers, so they no longer read everything twice.
21
+
22
+ ## [0.0.7]
23
+
24
+ ### Added
25
+
26
+ - If JavaScript does not run, the table is shown instead of the chart, with `@media (scripting: none)`.
27
+ - The names beside the bars of a bar chart wrap if they are wider than `--tablechart-name-max`, 40% of the chart by default. The chart gets taller if a wrapped name needs it.
28
+ - A bar chart keeps room after its bars only for the numbers that stand there: the totals of a stacked chart, the numbers of a grouped one, or numbers that do not fit inside their bar. If every number fits inside, the bars use the whole width.
29
+ - `--tablechart-type: bar` on a column chart shows it as a bar chart, and `--tablechart-type: column` does the opposite. Set it in a container query or a media query, and the chart is built again as the other kind when the query applies.
30
+ - The names under the bars are larger by default: `--tablechart-category-size` is 0.95em. The numbers are 1.3 times the names, so they stay the same size.
31
+ - The build makes four files: `tablechart.mjs` (one ES module), `tablechart.js` (for a script tag), `tablechart.css` and `tablechart.d.ts` (all types in one file).
32
+ - `@martinomagnifico/tablechart/core` has the building blocks under `init()` and `create()`: `prepare`, `build`, `layout`, `setShown`, `relabel` and `unbuild`, for a script or plugin that decides itself when a chart is built and shown.
33
+ - `create(element, options)` makes a chart of one element, and returns it. Each chart is also on its element as `element.tablechart`, with `refresh()` and `destroy()`. `init()` returns these charts in `charts`.
34
+ - `init()` returns `refresh()`, which lays out every chart again, for example after a script has changed the text of a chart.
35
+ - If the `lang` attribute of the page changes, the charts are laid out again a moment later, so new text that is longer or shorter fits.
36
+ - The `langattribute` option is used everywhere: to read keys from the table and to put them on the names in the chart, not only to write them on the table. `false` turns translation keys off.
37
+ - `data-chart-keys` on a figure adds translation keys to its names, starting with its value: `harvest-row1` for a row, `harvest-col1` for a column header. It replaces `data-chart-prefix`. An `id` on a figure no longer adds keys.
38
+ - With more than three lines, the colour steps between lines are smaller, so the last line is still `--tablechart-series-min` of its colour, now 40% by default.
39
+ - If a chart has numbers that were left out because there is no room for them, pointing at a row, or tapping it, shows the numbers of that row, with a faint band behind the row. The other numbers are hidden for that time. The `hover` option, or `data-chart-hover="false"` on a figure, turns it off. `--tablechart-pointer-color` sets the colour of the band. In a chart that can be pointed at, the numbers in the plot cannot be selected.
40
+
41
+
42
+ ## [0.0.6]
43
+
44
+ ### Added
45
+
46
+ - Area chart, `data-chart="area"`: a line chart with the space between each line and zero filled. `--tablechart-area-opacity` and `--tablechart-area-color` set the fill.
47
+ - `data-chart-stack` on a column, bar, line or area chart with several value columns: the values of a row are on top of each other. Columns and bars show the total of the row. A number is shown inside its part if it fits.
48
+ - `data-chart-shape="step"` on a line or area chart: each value is flat across its row. A step chart has no points and shows a number only where the value changes. A number wider than its rows is left out.
49
+
50
+
51
+
52
+ ## [0.0.5]
53
+
54
+ ### Added
55
+
56
+ - First version: column, bar, line, waterfall and donut charts, with annotations, legends and CSS variables.
57
+ - A chart builds when it scrolls into view. `threshold` sets how much of it must be in view, and `replay` builds it again each time it comes back into view.
58
+ - If a chart is inside something that animates in, it builds when that animation is halfway. If that element is still invisible (opacity 0) when the chart scrolls into view, the chart waits until the element starts to animate in, or becomes visible.
59
+ - `--tablechart-bar-max` sets the widest a column, step or bar may be: 60px by default, in `px`, `%`, `em` or `rem`, or `none` for no maximum.
60
+ - Row and line numbers in the markup start at 1: a bracket's `data-from` and `data-to`, an annotation's `data-series`, and the `data-series` and `data-slice` attributes on lines, points, names and slices.
61
+ - A break in the scale is cut out of the bars with a mask, so the background behind the chart shows through the gap, whatever it is.
62
+ - The gaps between donut slices are cut out of the ring with a mask, so the background shows through. `--tablechart-slice-gap` sets their width. `--tablechart-slice-gap-color` is gone.
63
+ - A class on a table row is copied to its bar, slice, number and name, so one class styles everything drawn for that row. Bars have `data-row`, counted from 1.
64
+ - A number inside a bar is dark or light, whichever reads on the colour of the bar. The ink variables still set it.
65
+ - `--tablechart-surface` is the browser's page background by default (`Canvas`), so it follows `color-scheme`: white in light mode and dark in dark mode. Only the lighter colours of lines and slices are mixed with it.
66
+ - Open points on a line and the callout of a bracket or trend arrow are cut out of the marks under them with a mask, so the background behind the chart shows through. `--tablechart-badge-surface` has no default.
67
+ - Grouped column and bar charts: if the table has more than one value column, each row is a group with one bar per column, and the names are in a legend.
68
+ - A bar chart is at least tall enough for a number beside every bar, so it gets taller on a narrow screen instead of hiding its numbers.
69
+ - `--tablechart-min-height`: on a narrow screen, a chart is never less high than this, 200px by default. Below that width, the height stays the same.
70
+ - In a waterfall, and a column chart with numbers inside, a number only goes inside its bar if it fits in the width too. If one number does not fit, all numbers go outside.
71
+ - The numbers of a grouped chart get smaller together to fit, down to 70% of their size. If they still do not fit, none of them are shown, so they never disappear one by one while the chart gets narrower.
72
+ - The names under the bars get smaller together if one does not fit its column, down to 70%. They stay centred under their bars.
73
+ - The rules for labels are in one place (`functions/labels.ts`), so every chart type uses the same ones.
package/README.md ADDED
@@ -0,0 +1,92 @@
1
+ # Tablechart
2
+
3
+ Simple charts from an HTML or Markdown table: column, bar, line, area,
4
+ waterfall and donut, with annotations. A chart builds when it scrolls into
5
+ view. Charts are SVG and use the colours of the page, which you can change with
6
+ CSS variables.
7
+
8
+ > Work in progress. The documentation site is in `docs/`.
9
+
10
+ ## Install
11
+
12
+ ```sh
13
+ npm install @martinomagnifico/tablechart
14
+ ```
15
+
16
+ ```js
17
+ import { init } from "@martinomagnifico/tablechart";
18
+ import "@martinomagnifico/tablechart/style.css";
19
+
20
+ init();
21
+ ```
22
+
23
+ Or with a script tag:
24
+
25
+ ```html
26
+ <link rel="stylesheet" href="tablechart.css">
27
+ <script src="tablechart.js"></script>
28
+ <script>
29
+ Tablechart.init();
30
+ </script>
31
+ ```
32
+
33
+ ## Markup
34
+
35
+ A chart is an element with `data-chart` and a table in it. The first cell of a
36
+ row is the label, the second the value.
37
+
38
+ ```html
39
+ <figure data-chart="column">
40
+ <figcaption><b>Apples picked</b><br><span>thousands</span></figcaption>
41
+ <table>
42
+ <tbody>
43
+ <tr><th>Spring</th><td>58</td></tr>
44
+ <tr><th>Summer</th><td>72</td></tr>
45
+ <tr><th>Autumn</th><td>70</td></tr>
46
+ </tbody>
47
+ </table>
48
+ </figure>
49
+ ```
50
+
51
+ ## Options
52
+
53
+ ```js
54
+ init({
55
+ selector: "[data-chart]", // The elements to make charts of
56
+ threshold: 0.5, // How much of a chart must be in view before it builds
57
+ replay: false, // Build again each time a chart scrolls back into view
58
+ animate: true, // Animate the chart when it builds
59
+ langattribute: "data-i18n", // The attribute for translation keys, or false for none
60
+ debug: false
61
+ });
62
+ ```
63
+
64
+ `init` returns `{ charts, refresh, destroy }`. `refresh()` lays out every chart
65
+ again. `destroy()` stops watching scroll, size and language changes.
66
+
67
+ To make a chart of one element, use `create`. Each chart is also on its element,
68
+ as `element.tablechart`:
69
+
70
+ ```js
71
+ import { create } from "@martinomagnifico/tablechart";
72
+
73
+ const chart = await create(document.querySelector("#sales"));
74
+ chart.refresh();
75
+ ```
76
+
77
+ ## Bar width
78
+
79
+ A column, a waterfall step or a bar is never wider than `--tablechart-bar-max`,
80
+ 60px by default. Use any of `px`, `%` (of the chart's width), `em` or `rem`. In a
81
+ narrow chart, bars are 58% of their space. Set `--tablechart-bar-max: none` for
82
+ no maximum.
83
+
84
+ ## Height
85
+
86
+ The height of a chart is a share of its width: `data-chart-aspect`, 0.38 by
87
+ default. On a narrow screen it is never less than `--tablechart-min-height`,
88
+ 200px by default. Use `px`, `em` or `rem`, or `none` for no minimum.
89
+
90
+ ## Licence
91
+
92
+ MIT
@@ -0,0 +1,387 @@
1
+ /**
2
+ * Some Markdown tools put attributes on the table itself, so the table matches
3
+ * the selector, such as `{data-chart=column}` with markdown-it-attrs. A chart draws into its
4
+ * figure, and a table cannot hold a plot, so the table is wrapped in a `div` that
5
+ * takes over its chart attributes and classes.
6
+ *
7
+ * Markdown has no way to put anything inside it, so what belongs to the chart is
8
+ * taken in from beside the table: a caption paragraph just before or after it, and
9
+ * after that a list of annotations or a `.chart-annotations` block.
10
+ *
11
+ * A chart that reads its rows from a file has no table, so the attributes go on
12
+ * its caption instead. If they end up on the bold title inside the caption, the
13
+ * caption is taken to be the chart.
14
+ */
15
+ export declare const adoptTables: (figures: HTMLElement[]) => HTMLElement[];
16
+
17
+ /**
18
+ * An annotation in two halves, because the two need different moments.
19
+ * `create` runs before anything is laid out, so anything translatable exists in the DOM
20
+ * by the time a translation plugin takes its one sweep of the page. `draw` runs
21
+ * once the figure has a width, and only ever places what `create` already made.
22
+ */
23
+ declare interface AnnotationType {
24
+ create: (spec: HTMLElement, plot: HTMLElement) => HTMLElement | null;
25
+ draw: (spec: HTMLElement, badge: HTMLElement | null, geo: Geometry) => void;
26
+ }
27
+
28
+ /**
29
+ * Translation keys, written onto the source table before anything is drawn, for
30
+ * a figure with `data-chart-keys`. Its value starts each key: `harvest-row1` for
31
+ * the name of the first row, `harvest-col1` for the header of the first value
32
+ * column. A cell that has a key already keeps it.
33
+ *
34
+ * The value has to be unique on the page. If two figures use
35
+ * the same value, the second one gets a number added, and a warning says so.
36
+ *
37
+ * Keys are written here, in a pass of its own, so that extraction never depends
38
+ * on whether a chart has been drawn yet.
39
+ */
40
+ export declare const assignKeys: (figures: HTMLElement[], langattribute: string | false) => void;
41
+
42
+ /**
43
+ * Pass 2. Everything a reader will read, before a translation script looks.
44
+ *
45
+ */
46
+ export declare const build: (figure: HTMLElement, config: Config, asKind?: string | null) => ChartState | null;
47
+
48
+ /** One value cell of the source table. */
49
+ declare interface Cell {
50
+ /** The cell exactly as written. */
51
+ raw: string;
52
+ /** The number in the cell as written, so its decimal places survive. Empty
53
+ * when the cell holds no number. */
54
+ number: string;
55
+ /** Whatever the cell says around its number, such as a % or the * of a
56
+ * footnote. It is kept on the label, either side of the formatted number. */
57
+ prefix: string;
58
+ suffix: string;
59
+ /** The cell holds no number, such as "n/a": the row has no mark, and its label
60
+ * says what the cell does. Its value counts as zero wherever one is needed. */
61
+ missing: boolean;
62
+ value: number;
63
+ }
64
+
65
+ export declare interface ChartState {
66
+ figure: HTMLElement;
67
+ plot: HTMLElement;
68
+ svg: SVGSVGElement;
69
+ rows: Row[];
70
+ decimals: number;
71
+ type: ChartType;
72
+ values: HTMLElement[];
73
+ series: Series[];
74
+ seriesValues: HTMLElement[][];
75
+ names: HTMLElement[];
76
+ categories: HTMLElement[];
77
+ /** The number in the middle of a donut. Null for a chart that has no middle. */
78
+ centre: HTMLElement | null;
79
+ stacked: boolean;
80
+ totals: HTMLElement[];
81
+ /** The cell of the total row Tablechart adds to a donut's table, if it adds one. */
82
+ totalCell: HTMLElement | null;
83
+ /** The row at a point in the plot, in screen pixels from its corner, or null.
84
+ * Set by the layout; null for a chart whose rows are not side by side. */
85
+ rowAt: ((x: number, y: number) => number | null) | null;
86
+ /** Where a row is in the plot, as percentages: left, top, width and height. */
87
+ rowBox: ((index: number) => [number, number, number, number]) | null;
88
+ annotations: {
89
+ spec: HTMLElement;
90
+ type: AnnotationType;
91
+ badge: HTMLElement | null;
92
+ /** The line it reads, as a position from 0. `data-series` counts from 1; the first line when left out. */
93
+ series: number;
94
+ /** How many stagger steps it waits, so it lands after the data. */
95
+ after: number;
96
+ }[];
97
+ checks: Check[];
98
+ }
99
+
100
+ /** A chart kind: it reserves room for its text, then draws its own marks. */
101
+ declare interface ChartType {
102
+ /** Height as a share of width, when the page's own aspect does not suit. A
103
+ * donut needs a squarer box than a row of columns does. */
104
+ aspect?: number;
105
+ /** This kind has a middle, so a row marked as a total belongs in it rather
106
+ * than among the marks. */
107
+ centre?: boolean;
108
+ /** A break in the scale means something here: its bars stand on the baseline,
109
+ * or, for a waterfall, its totals do and its floating steps keep clear of the
110
+ * break, which the scale checks for. */
111
+ breakable?: boolean;
112
+ /** `data-chart-stack` works for this kind. */
113
+ stackable?: boolean;
114
+ /** A stacked chart of this kind shows the total of each row. */
115
+ totals?: boolean;
116
+ /** The sample in front of a name in the legend, when it is not a line. A kind
117
+ * with `legend` always has a legend; one with only `swatch` has one when asked. */
118
+ swatch?: "box";
119
+ /** Where the category names go: in a row under the plot, or beside the marks,
120
+ * which is what a chart whose bars run sideways needs. */
121
+ categories?: "under" | "beside";
122
+ /** This kind draws every value column, not only the first. */
123
+ series?: boolean;
124
+ /** With several series, the names go in a legend whatever the options say, with
125
+ * a sample of this shape: a square for bars. */
126
+ legend?: "box";
127
+ /** Extra headroom above the tallest bar, in viewBox units. */
128
+ headroom?: (geo: HeadroomInput) => number;
129
+ /** The least height this kind needs, in viewBox units, whatever its shape. */
130
+ minHeight?: (input: {
131
+ labelHeight: number;
132
+ /** The height of the tallest category name, which can wrap onto several lines. */
133
+ nameHeight: number;
134
+ unit: number;
135
+ rows: number;
136
+ series: number;
137
+ stacked: boolean;
138
+ }) => number;
139
+ /** Room under the baseline, for numbers that hang below a mark near it. */
140
+ footroom?: (geo: HeadroomInput) => number;
141
+ /** Lay out the rows. Default is one bar per row from the baseline. */
142
+ segments?: (rows: Row[]) => Segment[];
143
+ draw: (geo: Geometry) => void;
144
+ }
145
+
146
+ /** An authored figure next to the one the data implies. */
147
+ declare interface Check {
148
+ label: string;
149
+ computed: number;
150
+ stated: number;
151
+ agrees: boolean;
152
+ }
153
+
154
+ export declare interface Config {
155
+ /** Which elements Tablechart turns into charts. */
156
+ selector: string;
157
+ /** Height of the plot as a share of its width. */
158
+ aspect: number;
159
+ /** Share of a band that a bar fills. */
160
+ barfill: number;
161
+ /** Share of a donut's radius that the ring itself takes. */
162
+ ringfill: number;
163
+ /**
164
+ * Locale for number formatting. Left unset, the document's own language is
165
+ * used and followed when it changes, so a translated page reformats itself.
166
+ */
167
+ locale?: string;
168
+ /** Animate a chart when it builds. */
169
+ animate: boolean;
170
+ /**
171
+ * Where a column's number goes: `outside`, standing on the bar, or `inside`,
172
+ * in the middle of it, in the bar's own ink. A bar too short to hold its
173
+ * number keeps it outside. A figure says otherwise with `data-chart-labels`.
174
+ */
175
+ labels: "outside" | "inside";
176
+ /**
177
+ * Where the names of the lines go, in a chart with several lines: `false` puts
178
+ * each name at the end of its line, `true` puts them all in a legend under the
179
+ * chart. A figure says otherwise with `data-chart-legend`, or
180
+ * `data-chart-legend="false"`.
181
+ */
182
+ legend: boolean;
183
+ /**
184
+ * If a chart has numbers that were left out because there is no room for them,
185
+ * pointing at a row, or tapping it, shows the numbers of that row. The other
186
+ * numbers are hidden for that time. A figure turns it off with
187
+ * `data-chart-hover="false"`.
188
+ */
189
+ hover: boolean;
190
+ /** The name of the total that a donut without a total row works out, for screen readers. */
191
+ totallabel: string;
192
+ /** How much of a chart must be in view before it builds, from 0 to 1. */
193
+ threshold: number;
194
+ /** Build again each time a chart scrolls back into view, not only the first time. */
195
+ replay: boolean;
196
+ /**
197
+ * The attribute that holds translation keys, for a translation script. A figure
198
+ * with `data-chart-keys` gets translation keys on its names. `false` turns them off.
199
+ */
200
+ langattribute: string | false;
201
+ /** Show messages in the console for whoever is working on the page. */
202
+ debug?: boolean;
203
+ }
204
+
205
+ export declare const defaultConfig: Config;
206
+
207
+ /**
208
+ * What a chart hands to the drawing pass, and to any annotation on it. Scales
209
+ * only, no pixel positions, so an annotation follows the data.
210
+ */
211
+ declare interface Geometry {
212
+ rows: Row[];
213
+ segments: Segment[];
214
+ /** Centre of a band, in viewBox units. */
215
+ cx: (index: number) => number;
216
+ /** A value's height, in viewBox units. */
217
+ y: (value: number) => number;
218
+ /** Bar width, in viewBox units. */
219
+ barWidth: number;
220
+ /** The widest a bar may be, in viewBox units, from `--tablechart-bar-max`. */
221
+ barMax: number;
222
+ /** viewBox height. */
223
+ height: number;
224
+ /** viewBox units per screen pixel, for anything that should look the same at any size. */
225
+ unit: number;
226
+ /** Measured height of a value label, in viewBox units. */
227
+ labelHeight: number;
228
+ /** Measured height of a badge, in viewBox units. Zero when the chart has none. */
229
+ badgeHeight: number;
230
+ /** How many stagger steps the data itself takes, so commentary can land after it. */
231
+ after: number;
232
+ /** For an annotation: its number in the figure, counted from 1. Each of its
233
+ * marks gets it as `data-note`. Zero for the chart itself. */
234
+ note: number;
235
+ /** Where the break's mark goes, as a value: the scale jumps just above it. Null
236
+ * when the scale runs straight through. */
237
+ breakAt: number | null;
238
+ /** Where the numbers on the marks go, by the figure's say or the page's. */
239
+ labels: "outside" | "inside";
240
+ /** `data-chart-stack` on the figure: the series of a row are drawn on top of
241
+ * each other, the first at the bottom. */
242
+ stacked: boolean;
243
+ /** `data-chart-shape` on the figure: "step" holds each value until the next
244
+ * point. For line and area charts. */
245
+ shape: "straight" | "step";
246
+ /** The total of each row of a stacked chart, in row order. Empty when the chart
247
+ * is not stacked or its kind shows no totals. */
248
+ totals: HTMLElement[];
249
+ svg: SVGSVGElement;
250
+ plot: HTMLElement;
251
+ /** The value labels, in row order. Created earlier; a chart only places them. */
252
+ values: HTMLElement[];
253
+ /** The value columns. A chart kind that draws only one is given only one. */
254
+ series: Series[];
255
+ /** The value labels of each series, in row order. The first is `values`. */
256
+ seriesValues: HTMLElement[][];
257
+ /** The name of each series, to be placed by its marks. Empty with one series. */
258
+ names: HTMLElement[];
259
+ /** The category names, in row order. A chart that keeps them beside its marks
260
+ * places these too; one that keeps them under the plot never touches them. */
261
+ categories: HTMLElement[];
262
+ /** The number in the middle, for a chart kind that has one. */
263
+ centre: HTMLElement | null;
264
+ config: Config;
265
+ /** Numbers an annotation worked out, against the numbers the author wrote. */
266
+ checks: Check[];
267
+ }
268
+
269
+ declare interface HeadroomInput {
270
+ labelHeight: number;
271
+ badgeHeight: number;
272
+ hasAnnotations: boolean;
273
+ unit: number;
274
+ /** How many series the chart draws, and whether one of them is in focus. */
275
+ series: number;
276
+ focused: boolean;
277
+ stacked: boolean;
278
+ }
279
+
280
+ /** Pass 3. Needs layout; makes no text, only places it. */
281
+ export declare const layout: (state: ChartState, config: Config) => boolean;
282
+
283
+ /**
284
+ * `data-chart-src` names a JSON file that holds the chart's rows. The file is the
285
+ * whole of the data: a table written inside the figure is removed, so there is
286
+ * never a question of which of the two is drawn. The file is either an array of
287
+ * rows or an object with a `rows` array.
288
+ *
289
+ * The file becomes an ordinary table before anything else happens, so a screen
290
+ * reader, a translation plugin and print all get the same table they would from
291
+ * HTML. A file that cannot be read leaves its chart empty and says why; the rest
292
+ * of the page goes on.
293
+ */
294
+ export declare const loadSources: (figures: HTMLElement[]) => Promise<void>;
295
+
296
+ export declare const PLACED_CLASS = "is-placed";
297
+
298
+ export declare const PLOT_CLASS = "tablechart-plot";
299
+
300
+ /**
301
+ * Turns elements into figures with a table, ready to build: a table from Markdown
302
+ * is wrapped, a JSON file becomes a table, and translation keys are added. All at
303
+ * once, so two charts with the same `data-chart-keys` are found.
304
+ */
305
+ export declare const prepare: (found: HTMLElement[], config: Config) => Promise<HTMLElement[]>;
306
+
307
+ export declare const QUEUED_CLASS = "tablechart-queued";
308
+
309
+ /**
310
+ * A Markdown table has no header cells in its body and no attributes on its rows,
311
+ * so it says the same things differently. The first cell of a row is its label,
312
+ * and a label in **bold**, or in a `.total` span, makes the row a total, like
313
+ * `data-kind="total"` in HTML. A total is set in bold in most tables of figures
314
+ * already. The bold is taken off once read, so the label is plain text again.
315
+ * Rows written in HTML already have their `th` and are left as they are.
316
+ *
317
+ * The header over the value columns names the series. A name in bold is the
318
+ * series in focus, like `data-kind="focus"`.
319
+ */
320
+ export declare const readMarkdownRows: (figures: HTMLElement[]) => void;
321
+
322
+ /** Numbers are reformatted in place, so a language change costs no redraw. */
323
+ export declare const relabel: (state: ChartState, config: Config) => void;
324
+
325
+ /** One row of the source table. Its own value is its first cell's. */
326
+ export declare interface Row extends Cell {
327
+ /** The category label, as authored. */
328
+ label: string;
329
+ /** Its translation key, authored or generated. */
330
+ key: string | null;
331
+ /** Every value cell in the row, one per series. The first is the row's own. */
332
+ cells: Cell[];
333
+ /** The classes on the row in the table. They are copied to its bar, slice,
334
+ * number and name, so one class styles everything drawn for the row. */
335
+ classes: string[];
336
+ /** A row marked `data-kind="total"` is a total. */
337
+ isTotal: boolean;
338
+ /** Where it is in the run that animates with it: the stagger counts from here. */
339
+ slot: number;
340
+ }
341
+
342
+ /** A row once a chart has worked out where it goes. */
343
+ declare interface Segment extends Row {
344
+ from: number;
345
+ to: number;
346
+ kind: "bar" | "up" | "down" | "total";
347
+ }
348
+
349
+ /**
350
+ * A value column of the source table. A table with one is a chart with one series,
351
+ * and its header is not read; with more, the header names each one.
352
+ */
353
+ export declare interface Series {
354
+ /** The column's header, as authored. Empty when the table has no header. */
355
+ name: string;
356
+ /** Its translation key, authored or generated. */
357
+ key: string | null;
358
+ /** `data-kind="focus"` on the header, or a bold one in Markdown: the series the
359
+ * chart is about. The others are shown fainter. */
360
+ focus: boolean;
361
+ /** `data-marker` on the header: the point of its line, such as `square` or
362
+ * `diamond open`. Null for the point its place gives it. */
363
+ marker: string | null;
364
+ /** `data-line` on the header: a dashed or dotted line. Null for a solid one. */
365
+ line: "dashed" | "dotted" | null;
366
+ }
367
+
368
+ /** One class, `is-shown`, starts the whole build. */
369
+ export declare const setShown: (state: ChartState, shown: boolean) => void;
370
+
371
+ export declare const SHOWN_CLASS = "is-shown";
372
+
373
+ /**
374
+ * Removes what `build` added to the figure, so it can be built again. The table
375
+ * and the figure's own attributes stay.
376
+ */
377
+ export declare const unbuild: (state: ChartState) => void;
378
+
379
+ export { }
380
+
381
+
382
+ declare global {
383
+ interface HTMLElement {
384
+ /** The chart made of this element, by `init` or `create`. */
385
+ tablechart?: TablechartChart;
386
+ }
387
+ }
@@ -0,0 +1,2 @@
1
+ import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, o as u, p as d, r as f, s as p, u as m } from "./tablechart-shared.mjs";
2
+ export { d as PLACED_CLASS, l as PLOT_CLASS, o as QUEUED_CLASS, a as SHOWN_CLASS, s as adoptTables, i as assignKeys, p as build, e as defaultConfig, n as layout, t as loadSources, f as prepare, u as readMarkdownRows, c as relabel, m as setShown, r as unbuild };