@martinomagnifico/tablechart 1.0.4 → 1.0.5
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 +26 -0
- package/README.md +5 -0
- package/dist/tablechart-core.d.mts +2 -2
- package/dist/tablechart-core.mjs +1 -1
- package/dist/tablechart-shared.d.mts +25 -3
- package/dist/tablechart-shared.mjs +637 -511
- package/dist/tablechart.css +1 -1
- package/dist/tablechart.d.mts +1 -1
- package/dist/tablechart.js +1 -1
- package/dist/tablechart.mjs +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.0.5] - 2026-10-16
|
|
4
|
+
|
|
5
|
+
### Added
|
|
6
|
+
|
|
7
|
+
- Tooltips: on a chart that leaves some (or all) numbers out, hovering or tapping, shows tooltips now. `tooltip` and `data-chart-tooltip`: `"auto"` by default, `true` always, `false` never.
|
|
8
|
+
- `--tablechart-tooltip-surface`, `-color`, `-border`, `-radius`, `-padding` and `-shadow`.
|
|
9
|
+
- The `table` option and `data-chart-table`: the table under the chart, always, in print, or in print when the chart does not show all its numbers.
|
|
10
|
+
- `PRINTING_CLASS` in the building blocks, to get a chart ready for print. See the API reference.
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- A number left out for lack of room is shown in the tooltip, not on the chart.
|
|
15
|
+
|
|
16
|
+
### Fixed
|
|
17
|
+
|
|
18
|
+
- Every chart is printed whole, also one that had not scrolled into view or was still building, in every browser. A chart is not split over two pages.
|
|
19
|
+
|
|
20
|
+
### Removed
|
|
21
|
+
|
|
22
|
+
- The band behind a row that is pointed at, and `--tablechart-pointer-color`: the tooltip shows the row.
|
|
23
|
+
|
|
24
|
+
### Deprecated
|
|
25
|
+
|
|
26
|
+
- The `hover` option and `data-chart-hover`, now `tooltip` and `data-chart-tooltip`. Removed in the next minor version.
|
|
27
|
+
|
|
28
|
+
|
|
3
29
|
## [1.0.4] - 2026-10-14
|
|
4
30
|
|
|
5
31
|
### Added
|
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# Tablechart
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@martinomagnifico/tablechart)
|
|
4
|
+
[]()
|
|
4
5
|
|
|
5
6
|
[<img src="screenshot.png" width="100%" alt="Tablechart: a column chart, a donut and a waterfall">](https://martinomagnifico.github.io/tablechart/)
|
|
6
7
|
|
|
@@ -15,6 +16,8 @@ Tablechart makes simple charts from a table: an HTML table, a Markdown table or
|
|
|
15
16
|
* **Real text:** names and numbers are HTML, so they use the font of the page and do not scale with the drawing.
|
|
16
17
|
* **CSS for the looks:** colours, sizes and animation are CSS variables. Light and dark mode follow the page.
|
|
17
18
|
* **Annotations:** badges, brackets, trend arrows and a break in the scale
|
|
19
|
+
* **Tooltips:** when a chart leaves numbers out, point at a row, or tap it, to see all its values
|
|
20
|
+
* **Print and PDF:** every chart prints whole, and the table can be shown under a chart that leaves numbers out
|
|
18
21
|
* **Step by step:** show the rows one at a time, with Previous and Next buttons
|
|
19
22
|
* **Animation:** a chart builds when it scrolls into view
|
|
20
23
|
|
|
@@ -74,6 +77,8 @@ init({
|
|
|
74
77
|
threshold: 0.5, // How much of a chart must be in view before it builds
|
|
75
78
|
replay: false, // Build again each time a chart scrolls back into view
|
|
76
79
|
controls: true, // Previous and Next buttons on a chart that steps
|
|
80
|
+
tooltip: "auto", // Tooltips: "auto" only when a chart leaves numbers out, true or false
|
|
81
|
+
table: "never", // The table under the chart: "never", "auto" (in print, if numbers are left out), "print" or "always"
|
|
77
82
|
locale: undefined, // Locale for numbers; the language of the page if not set
|
|
78
83
|
});
|
|
79
84
|
```
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _ as
|
|
1
|
+
import { _ as StepPlan, c as PLACED_CLASS, d as QUEUED_CLASS, f as SHOWN_CLASS, g as Series, h as Row, i as entranceOf, l as PLOT_CLASS, m as ChartState, o as prepare, p as defaultConfig, s as Config, u as PRINTING_CLASS, v as stepTo } from "./tablechart-shared.mjs";
|
|
2
2
|
//#region src/js/core.d.ts
|
|
3
3
|
/** Pass 2: everything a reader will read, before a translation script looks. */
|
|
4
4
|
export declare const build: (figure: HTMLElement, config: Config, asKind?: string | null) => ChartState | null;
|
|
@@ -23,4 +23,4 @@ export declare const readMarkdownRows: (figures: HTMLElement[]) => void;
|
|
|
23
23
|
/** Writes translation keys such as `harvest-row1` onto a figure with `data-chart-keys`; a duplicate prefix gets a number. */
|
|
24
24
|
export declare const assignKeys: (figures: HTMLElement[], langattribute: string | false) => void;
|
|
25
25
|
//#endregion
|
|
26
|
-
export { type ChartState, type Config, PLACED_CLASS, PLOT_CLASS, QUEUED_CLASS, type Row, SHOWN_CLASS, type Series, type StepPlan, defaultConfig, entranceOf, prepare, stepTo };
|
|
26
|
+
export { type ChartState, type Config, PLACED_CLASS, PLOT_CLASS, PRINTING_CLASS, QUEUED_CLASS, type Row, SHOWN_CLASS, type Series, type StepPlan, defaultConfig, entranceOf, prepare, stepTo };
|
package/dist/tablechart-core.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { h as PLACED_CLASS, g as PLOT_CLASS, _ as
|
|
1
|
+
export { h as PLACED_CLASS, g as PLOT_CLASS, _ as PRINTING_CLASS, v as QUEUED_CLASS, y as SHOWN_CLASS, a as adoptTables, m as assignKeys, c as build, b as defaultConfig, n as entranceOf, l as layout, o as loadSources, i as prepare, s as readMarkdownRows, u as relabel, d as setShown, p as stepTo, f as unbuild } from "./tablechart-shared.mjs";
|
|
@@ -159,6 +159,23 @@ interface ChartType {
|
|
|
159
159
|
/** Default: one bar per row from the baseline. */
|
|
160
160
|
segments?: (rows: Row[]) => Segment[];
|
|
161
161
|
draw: (geo: Geometry) => void;
|
|
162
|
+
/** The lines of the tooltip of a row. Default: each value with the name of its series, and the total of a stack. */
|
|
163
|
+
tooltip?: (state: ChartState, index: number, config: Config) => TooltipLine[];
|
|
164
|
+
}
|
|
165
|
+
/** One line of a tooltip, under the name of the row. */
|
|
166
|
+
interface TooltipLine {
|
|
167
|
+
/** The name of the series; empty for a chart with one series. */
|
|
168
|
+
name: string;
|
|
169
|
+
value: string;
|
|
170
|
+
/** A small key in the colour of the series. */
|
|
171
|
+
colour?: string;
|
|
172
|
+
/** The shape of that key, as in the legend: a line with its point, or a box. */
|
|
173
|
+
sample?: {
|
|
174
|
+
marker: string | null;
|
|
175
|
+
open: boolean;
|
|
176
|
+
line: string | null;
|
|
177
|
+
box: boolean;
|
|
178
|
+
};
|
|
162
179
|
}
|
|
163
180
|
interface HeadroomInput {
|
|
164
181
|
labelHeight: number;
|
|
@@ -215,6 +232,7 @@ interface ChartState {
|
|
|
215
232
|
declare const PLOT_CLASS = "tablechart-plot";
|
|
216
233
|
declare const PLACED_CLASS = "is-placed";
|
|
217
234
|
declare const SHOWN_CLASS = "is-shown";
|
|
235
|
+
declare const PRINTING_CLASS = "is-printing";
|
|
218
236
|
declare const QUEUED_CLASS = "tablechart-queued";
|
|
219
237
|
interface Config {
|
|
220
238
|
/** Which elements Tablechart turns into charts. */
|
|
@@ -237,8 +255,12 @@ interface Config {
|
|
|
237
255
|
shape: "straight" | "step" | "smooth";
|
|
238
256
|
/** Names of several lines in a legend instead of at the end of each line. A figure overrides it with `data-chart-legend`. */
|
|
239
257
|
legend: boolean;
|
|
240
|
-
/**
|
|
241
|
-
|
|
258
|
+
/** A tooltip with the values of a row that is pointed at or tapped: `"auto"`, the default, only on a chart that does not show all its numbers; `true` always; `false` never. A figure overrides it with `data-chart-tooltip`. */
|
|
259
|
+
tooltip: boolean | "auto";
|
|
260
|
+
/** The old name of `tooltip`, until the next minor version. */
|
|
261
|
+
hover?: boolean;
|
|
262
|
+
/** The table under the chart: `"always"`, only in `"print"`, in print when numbers are left out (`"auto"`), or `"never"`. A figure overrides it with `data-chart-table`. */
|
|
263
|
+
table: "never" | "auto" | "print" | "always";
|
|
242
264
|
/** The name of the total that a donut without a total row works out, for screen readers. */
|
|
243
265
|
totallabel: string;
|
|
244
266
|
/** Previous and Next buttons under a chart that steps (`data-fragment`). `false` leaves them out, for buttons of your own. */
|
|
@@ -299,4 +321,4 @@ declare const create: (element: HTMLElement, options?: Partial<Config>) => Promi
|
|
|
299
321
|
/** Makes a chart of every element in `root` that matches the selector, skipping existing charts. */
|
|
300
322
|
declare const init: (options?: Partial<Config>, root?: ParentNode) => Promise<TablechartInstance>;
|
|
301
323
|
//#endregion
|
|
302
|
-
export {
|
|
324
|
+
export { StepPlan as _, init as a, PLACED_CLASS as c, QUEUED_CLASS as d, SHOWN_CLASS as f, Series as g, Row as h, entranceOf as i, PLOT_CLASS as l, ChartState as m, TablechartInstance as n, prepare as o, defaultConfig as p, create as r, Config as s, TablechartChart as t, PRINTING_CLASS as u, stepTo as v };
|