@martinomagnifico/tablechart 1.0.4 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [1.0.6] - 2026-10-16
+
+### Changed
+
+- Any key closes a tooltip, not only Escape.
+- Only a mouse that moves opens a tooltip.
+- A Markdown table with chart attributes is wrapped in a `figure`, not a `div`.
+- The console asks for a `figure` when a chart is another element.
+
+
+
+## [1.0.5] - 2026-10-16
+
+### Added
+
+- 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.
+- `--tablechart-tooltip-surface`, `-color`, `-border`, `-radius`, `-padding` and `-shadow`.
+- 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.
+- `PRINTING_CLASS` in the building blocks, to get a chart ready for print. See the API reference.
+
+### Changed
+
+- A number left out for lack of room is shown in the tooltip, not on the chart.
+
+### Fixed
+
+- 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.
+
+### Removed
+
+- The band behind a row that is pointed at, and `--tablechart-pointer-color`: the tooltip shows the row.
+
+### Deprecated
+
+- The `hover` option and `data-chart-hover`, now `tooltip` and `data-chart-tooltip`. Removed in the next minor version.
+
+
 ## [1.0.4] - 2026-10-14
 
 ### Added

package/README.md

@@ -1,6 +1,7 @@
 # Tablechart
 
 [![Version](https://img.shields.io/npm/v/@martinomagnifico/tablechart)](https://www.npmjs.com/package/@martinomagnifico/tablechart)
+[![Downloads](https://img.shields.io/npm/dt/@martinomagnifico/tablechart)]()
 
 [<img src="screenshot.png" width="100%" alt="Tablechart: a column chart, a donut and a waterfall">](https://martinomagnifico.github.io/tablechart/)
 
@@ -15,6 +16,8 @@ Tablechart makes simple charts from a table: an HTML table, a Markdown table or
 * **Real text:** names and numbers are HTML, so they use the font of the page and do not scale with the drawing.
 * **CSS for the looks:** colours, sizes and animation are CSS variables. Light and dark mode follow the page.
 * **Annotations:** badges, brackets, trend arrows and a break in the scale
+* **Tooltips:** when a chart leaves numbers out, point at a row, or tap it, to see all its values
+* **Print and PDF:** every chart prints whole, and the table can be shown under a chart that leaves numbers out
 * **Step by step:** show the rows one at a time, with Previous and Next buttons
 * **Animation:** a chart builds when it scrolls into view
 
@@ -74,6 +77,8 @@ init({
 	threshold: 0.5,     // How much of a chart must be in view before it builds
 	replay: false,      // Build again each time a chart scrolls back into view
 	controls: true,     // Previous and Next buttons on a chart that steps
+	tooltip: "auto",    // Tooltips: "auto" only when a chart leaves numbers out, true or false
+	table: "never",     // The table under the chart: "never", "auto" (in print, if numbers are left out), "print" or "always"
 	locale: undefined,  // Locale for numbers; the language of the page if not set
 });
 ```
@@ -84,7 +89,7 @@ Most options can also be set on one chart with a `data-chart-*` attribute. All o
 
 `init()` returns `{ charts, refresh, destroy }`. `refresh()` lays out every chart again. `destroy()` stops watching scroll, size and language changes.
 
-To make a chart of one element, use `create()`. Each chart is also on its element, as `element.tablechart`.
+To make a chart of one figure, use `create()`. Each chart is also on its figure, as `figure.tablechart`.
 
 ```js
 import { create } from "@martinomagnifico/tablechart";

package/dist/tablechart-core.d.mts

@@ -1,4 +1,4 @@
-import { _ as stepTo, c as PLACED_CLASS, d as SHOWN_CLASS, f as defaultConfig, g as StepPlan, h as Series, i as entranceOf, l as PLOT_CLASS, m as Row, o as prepare, p as ChartState, s as Config, u as QUEUED_CLASS } from "./tablechart-shared.mjs";
+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";
 //#region src/js/core.d.ts
 /** Pass 2: everything a reader will read, before a translation script looks. */
 export declare const build: (figure: HTMLElement, config: Config, asKind?: string | null) => ChartState | null;
@@ -12,7 +12,7 @@ export declare const unbuild: (state: ChartState) => void;
 export declare const setShown: (state: ChartState, shown: boolean) => void;
 //#endregion
 //#region src/js/functions/sources.d.ts
-/** A Markdown table, or a caption with chart attributes, is wrapped in a div with the caption and annotations beside it. */
+/** A Markdown table, or a caption with chart attributes, is wrapped in a figure with the caption and annotations beside it. */
 export declare const adoptTables: (figures: HTMLElement[]) => HTMLElement[];
 /** `data-chart-src` fills the figure's table with the rows of a JSON file, keeping a header row the author wrote; a file that fails is reported. */
 export declare const loadSources: (figures: HTMLElement[]) => Promise<void>;
@@ -23,4 +23,4 @@ export declare const readMarkdownRows: (figures: HTMLElement[]) => void;
 /** Writes translation keys such as `harvest-row1` onto a figure with `data-chart-keys`; a duplicate prefix gets a number. */
 export declare const assignKeys: (figures: HTMLElement[], langattribute: string | false) => void;
 //#endregion
-export { type ChartState, type Config, PLACED_CLASS, PLOT_CLASS, QUEUED_CLASS, type Row, SHOWN_CLASS, type Series, type StepPlan, defaultConfig, entranceOf, prepare, stepTo };
+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

@@ -1 +1 @@
-export { h as PLACED_CLASS, g as PLOT_CLASS, _ as QUEUED_CLASS, v as SHOWN_CLASS, a as adoptTables, m as assignKeys, c as build, y 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";
+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";

package/dist/tablechart-shared.d.mts

@@ -159,6 +159,23 @@ interface ChartType {
   /** Default: one bar per row from the baseline. */
   segments?: (rows: Row[]) => Segment[];
   draw: (geo: Geometry) => void;
+  /** The lines of the tooltip of a row. Default: each value with the name of its series, and the total of a stack. */
+  tooltip?: (state: ChartState, index: number, config: Config) => TooltipLine[];
+}
+/** One line of a tooltip, under the name of the row. */
+interface TooltipLine {
+  /** The name of the series; empty for a chart with one series. */
+  name: string;
+  value: string;
+  /** A small key in the colour of the series. */
+  colour?: string;
+  /** The shape of that key, as in the legend: a line with its point, or a box. */
+  sample?: {
+    marker: string | null;
+    open: boolean;
+    line: string | null;
+    box: boolean;
+  };
 }
 interface HeadroomInput {
   labelHeight: number;
@@ -215,6 +232,7 @@ interface ChartState {
 declare const PLOT_CLASS = "tablechart-plot";
 declare const PLACED_CLASS = "is-placed";
 declare const SHOWN_CLASS = "is-shown";
+declare const PRINTING_CLASS = "is-printing";
 declare const QUEUED_CLASS = "tablechart-queued";
 interface Config {
   /** Which elements Tablechart turns into charts. */
@@ -237,8 +255,12 @@ interface Config {
   shape: "straight" | "step" | "smooth";
   /** Names of several lines in a legend instead of at the end of each line. A figure overrides it with `data-chart-legend`. */
   legend: boolean;
-  /** Pointing at a row shows numbers that were left out for lack of room. A figure turns it off with `data-chart-hover="false"`. */
-  hover: boolean;
+  /** 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`. */
+  tooltip: boolean | "auto";
+  /** The old name of `tooltip`, until the next minor version. */
+  hover?: boolean;
+  /** 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`. */
+  table: "never" | "auto" | "print" | "always";
   /** The name of the total that a donut without a total row works out, for screen readers. */
   totallabel: string;
   /** Previous and Next buttons under a chart that steps (`data-fragment`). `false` leaves them out, for buttons of your own. */
@@ -294,9 +316,9 @@ declare global {
 declare const entranceOf: (figure: HTMLElement, config: Config) => number;
 /** Turns elements into figures with a table and translation keys, all at once, so duplicate keys are found. */
 declare const prepare: (found: HTMLElement[], config: Config) => Promise<HTMLElement[]>;
-/** Makes a chart of one element; returns the existing chart if there is one, or null without data. */
+/** Makes a chart of one figure; returns the existing chart if there is one, or null without data. */
 declare const create: (element: HTMLElement, options?: Partial<Config>) => Promise<TablechartChart | null>;
-/** Makes a chart of every element in `root` that matches the selector, skipping existing charts. */
+/** Makes a chart of every figure in `root` that matches the selector, skipping existing charts. */
 declare const init: (options?: Partial<Config>, root?: ParentNode) => Promise<TablechartInstance>;
 //#endregion
-export { stepTo as _, init as a, PLACED_CLASS as c, SHOWN_CLASS as d, defaultConfig as f, StepPlan as g, Series as h, entranceOf as i, PLOT_CLASS as l, Row as m, TablechartInstance as n, prepare as o, ChartState as p, create as r, Config as s, TablechartChart as t, QUEUED_CLASS as u };
+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 };