@martinomagnifico/tablechart 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,24 +1,57 @@
 # Changelog
 
-## [0.1.0]
+## [0.1.2] - 2026-10-07
 
 ### Added
 
+- Smooth lines and areas: `data-chart-shape="smooth"`, or the `shape` option for every chart. The curve goes through every point and never overshoots them (monotone cubic interpolation), so it shows no peak or dip that is not in the data. A missing value still splits the line, and in a stack each area follows the curve of the one below it.
+- The `shape` option: `"straight"` (the default), `"step"` or `"smooth"`. `data-chart-shape` on a figure overrides it, so `data-chart-shape="straight"` turns a chart back.
+- Lines and areas that grow up from zero: `data-chart-animate="up"`, or `animate: "up"` for every chart. `data-chart-animate="across"` is the opposite. Other chart types are not affected.
+- The moment a chart builds inside an element that animates in can be set: `data-chart-entrance` on a figure, or the `entrance` option, from `0` (when the element starts to move) to `1` (when it is in). It is `0.5`, halfway, by default, as before.
+- With `debug: true`, the console says how long each chart takes to build and to lay out, with a warning above 50 ms.
+
+### Fixed
+
+- A step line (`data-chart-shape="step"`) now takes as long to build as other lines. Its rises and drops are drawn quickly, so the line no longer stops moving to the right while it goes up or down.
+- A line or area with more than seven points takes no longer to build than one with seven: six stagger steps in all. It was one step per point, so a long line was much slower than a short one.
+- The fill of an area fades in at an even speed while its line builds, so it is no longer there before the line.
+- A line or bar chart with many rows lays out much faster. A layout now reads the size of every number and name at once, before it places anything: 10,000 rows took 23 to 65 seconds and now take well under a second.
+- A chart with about 100,000 rows or more no longer stops with an error.
+- After a resize, a line chart whose first number is hidden, such as on a line out of focus, keeps the room for the numbers above it.
+
+
+
+## [0.1.1] - 2026-10-05
+
+### Fixed
+
+- The key under a donut is no longer made smaller when a name does not fit a column: its names are not in columns.
+- Removed some comments
+
+
+
+## [0.1.0] - 2026-10-04
+
+### Added
 
 - The legend of an area chart has a square in front of each name.
 - 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.
 - `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.
 
 
+
 ## [0.0.8]
 
 ### Changed
+
 - 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.
 - 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.
 - All text in the drawing is `inert`, so Safari with VoiceOver does not read it.
 - 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.
 - 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.
 
+
+
 ## [0.0.7]
 
 ### Added
@@ -39,6 +72,7 @@
 - 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.
 
 
+
 ## [0.0.6]
 
 ### Added

package/dist/tablechart-core.d.ts

@@ -1,63 +1,26 @@
-/**
- * Some Markdown tools put attributes on the table itself, so the table matches
- * the selector, such as `{data-chart=column}` with markdown-it-attrs. A chart draws into its
- * figure, and a table cannot hold a plot, so the table is wrapped in a `div` that
- * takes over its chart attributes and classes.
- *
- * Markdown has no way to put anything inside it, so what belongs to the chart is
- * taken in from beside the table: a caption paragraph just before or after it, and
- * after that a list of annotations or a `.chart-annotations` block.
- *
- * A chart that reads its rows from a file has no table, so the attributes go on
- * its caption instead. If they end up on the bold title inside the caption, the
- * caption is taken to be the chart.
- */
+/** A Markdown table, or a caption with chart attributes, is wrapped in a div with the caption and annotations beside it. */
 export declare const adoptTables: (figures: HTMLElement[]) => HTMLElement[];
 
-/**
- * An annotation in two halves, because the two need different moments.
- * `create` runs before anything is laid out, so anything translatable exists in the DOM
- * by the time a translation plugin takes its one sweep of the page. `draw` runs
- * once the figure has a width, and only ever places what `create` already made.
- */
+/** `create` runs before layout, so a translation script finds its text; `draw` only places it. */
 declare interface AnnotationType {
     create: (spec: HTMLElement, plot: HTMLElement) => HTMLElement | null;
     draw: (spec: HTMLElement, badge: HTMLElement | null, geo: Geometry) => void;
 }
 
-/**
- * Translation keys, written onto the source table before anything is drawn, for
- * a figure with `data-chart-keys`. Its value starts each key: `harvest-row1` for
- * the name of the first row, `harvest-col1` for the header of the first value
- * column. A cell that has a key already keeps it.
- *
- * The value has to be unique on the page. If two figures use
- * the same value, the second one gets a number added, and a warning says so.
- *
- * Keys are written here, in a pass of its own, so that extraction never depends
- * on whether a chart has been drawn yet.
- */
+/** 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;
 
-/**
- * Pass 2. Everything a reader will read, before a translation script looks.
- *
- */
+/** 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;
 
-/** One value cell of the source table. */
 declare interface Cell {
-    /** The cell exactly as written. */
     raw: string;
-    /** The number in the cell as written, so its decimal places survive. Empty
-     * when the cell holds no number. */
+    /** As written, so its decimal places survive. Empty when the cell holds no number. */
     number: string;
-    /** Whatever the cell says around its number, such as a % or the * of a
-     * footnote. It is kept on the label, either side of the formatted number. */
+    /** Text around the number, such as `%` or a footnote `*`, kept either side of the formatted number. */
     prefix: string;
     suffix: string;
-    /** The cell holds no number, such as "n/a": the row has no mark, and its label
-     * says what the cell does. Its value counts as zero wherever one is needed. */
+    /** No number, such as "n/a": no mark, and the label says what the cell says. Counts as zero. */
     missing: boolean;
     value: number;
 }
@@ -74,76 +37,55 @@ export declare interface ChartState {
     seriesValues: HTMLElement[][];
     names: HTMLElement[];
     categories: HTMLElement[];
-    /** The number in the middle of a donut. Null for a chart that has no middle. */
     centre: HTMLElement | null;
     stacked: boolean;
     totals: HTMLElement[];
-    /** The cell of the total row Tablechart adds to a donut's table, if it adds one. */
     totalCell: HTMLElement | null;
-    /** The row at a point in the plot, in screen pixels from its corner, or null.
-     * Set by the layout; null for a chart whose rows are not side by side. */
+    /** In screen pixels from the plot's corner. Null for a chart whose rows are not side by side. */
     rowAt: ((x: number, y: number) => number | null) | null;
-    /** Where a row is in the plot, as percentages: left, top, width and height. */
+    /** As percentages: left, top, width and height. */
     rowBox: ((index: number) => [number, number, number, number]) | null;
     annotations: {
         spec: HTMLElement;
         type: AnnotationType;
         badge: HTMLElement | null;
-        /** The line it reads, as a position from 0. `data-series` counts from 1; the first line when left out. */
+        /** From 0; `data-series` counts from 1. */
         series: number;
-        /** How many stagger steps it waits, so it lands after the data. */
         after: number;
     }[];
     checks: Check[];
 }
 
-/** A chart kind: it reserves room for its text, then draws its own marks. */
 declare interface ChartType {
-    /** Height as a share of width, when the page's own aspect does not suit. A
-     * donut needs a squarer box than a row of columns does. */
     aspect?: number;
-    /** This kind has a middle, so a row marked as a total belongs in it rather
-     * than among the marks. */
+    /** A row marked as a total goes in the middle rather than among the marks. */
     centre?: boolean;
-    /** A break in the scale means something here: its bars stand on the baseline,
-     * or, for a waterfall, its totals do and its floating steps keep clear of the
-     * break, which the scale checks for. */
+    /** A break in the scale works here; a waterfall keeps its floating steps clear of it. */
     breakable?: boolean;
-    /** `data-chart-stack` works for this kind. */
     stackable?: boolean;
-    /** A stacked chart of this kind shows the total of each row. */
     totals?: boolean;
-    /** The sample in front of a name in the legend, when it is not a line. A kind
-     * with `legend` always has a legend; one with only `swatch` has one when asked. */
+    /** The sample in front of a legend name when it is not a line; the legend shows only when asked. */
     swatch?: "box";
-    /** Where the category names go: in a row under the plot, or beside the marks,
-     * which is what a chart whose bars run sideways needs. */
     categories?: "under" | "beside";
-    /** This kind draws every value column, not only the first. */
     series?: boolean;
-    /** With several series, the names go in a legend whatever the options say, with
-     * a sample of this shape: a square for bars. */
+    /** With several series, always a legend, with a sample of this shape. */
     legend?: "box";
-    /** Extra headroom above the tallest bar, in viewBox units. */
     headroom?: (geo: HeadroomInput) => number;
-    /** The least height this kind needs, in viewBox units, whatever its shape. */
     minHeight?: (input: {
         labelHeight: number;
-        /** The height of the tallest category name, which can wrap onto several lines. */
         nameHeight: number;
         unit: number;
         rows: number;
         series: number;
         stacked: boolean;
     }) => number;
-    /** Room under the baseline, for numbers that hang below a mark near it. */
+    /** Room under the baseline for numbers that hang below a mark near it. */
     footroom?: (geo: HeadroomInput) => number;
-    /** Lay out the rows. Default is one bar per row from the baseline. */
+    /** Default: one bar per row from the baseline. */
     segments?: (rows: Row[]) => Segment[];
     draw: (geo: Geometry) => void;
 }
 
-/** An authored figure next to the one the data implies. */
 declare interface Check {
     label: string;
     computed: number;
@@ -160,32 +102,19 @@ export declare interface Config {
     barfill: number;
     /** Share of a donut's radius that the ring itself takes. */
     ringfill: number;
-    /**
-     * Locale for number formatting. Left unset, the document's own language is
-     * used and followed when it changes, so a translated page reformats itself.
-     */
+    /** Locale for numbers. Unset, the document's language is used and followed when it changes. */
     locale?: string;
-    /** Animate a chart when it builds. */
-    animate: boolean;
-    /**
-     * Where a column's number goes: `outside`, standing on the bar, or `inside`,
-     * in the middle of it, in the bar's own ink. A bar too short to hold its
-     * number keeps it outside. A figure says otherwise with `data-chart-labels`.
-     */
+    /** Animate a chart when it builds. `"up"` grows lines and areas from zero instead of across; a figure overrides it with `data-chart-animate`. */
+    animate: boolean | "across" | "up";
+    /** How far an animated parent is in before its chart builds: 0 when it starts moving, 1 when it is in. A figure overrides it with `data-chart-entrance`. */
+    entrance: number;
+    /** Where a column's number goes: on the bar, or inside it. A figure overrides it with `data-chart-labels`. */
     labels: "outside" | "inside";
-    /**
-     * Where the names of the lines go, in a chart with several lines: `false` puts
-     * each name at the end of its line, `true` puts them all in a legend under the
-     * chart. A figure says otherwise with `data-chart-legend`, or
-     * `data-chart-legend="false"`.
-     */
+    /** How a line or area runs between points: `straight`, `step` or `smooth`. A figure overrides it with `data-chart-shape`. */
+    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;
-    /**
-     * 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. The other
-     * numbers are hidden for that time. A figure turns it off with
-     * `data-chart-hover="false"`.
-     */
+    /** 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;
     /** The name of the total that a donut without a total row works out, for screen readers. */
     totallabel: string;
@@ -193,10 +122,7 @@ export declare interface Config {
     threshold: number;
     /** Build again each time a chart scrolls back into view, not only the first time. */
     replay: boolean;
-    /**
-     * The attribute that holds translation keys, for a translation script. A figure
-     * with `data-chart-keys` gets translation keys on its names. `false` turns them off.
-     */
+    /** The attribute for translation keys, for a translation script. `false` turns keys off. */
     langattribute: string | false;
     /** Show messages in the console for whoever is working on the page. */
     debug?: boolean;
@@ -204,65 +130,46 @@ export declare interface Config {
 
 export declare const defaultConfig: Config;
 
-/**
- * What a chart hands to the drawing pass, and to any annotation on it. Scales
- * only, no pixel positions, so an annotation follows the data.
- */
+/** How far an animated parent is in before the chart builds: the figure's `data-chart-entrance`, or else the option. */
+export declare const entranceOf: (figure: HTMLElement, config: Config) => number;
+
+/** Scales only, no pixel positions, so an annotation follows the data. */
 declare interface Geometry {
     rows: Row[];
     segments: Segment[];
-    /** Centre of a band, in viewBox units. */
     cx: (index: number) => number;
-    /** A value's height, in viewBox units. */
     y: (value: number) => number;
-    /** Bar width, in viewBox units. */
     barWidth: number;
-    /** The widest a bar may be, in viewBox units, from `--tablechart-bar-max`. */
     barMax: number;
-    /** viewBox height. */
     height: number;
-    /** viewBox units per screen pixel, for anything that should look the same at any size. */
+    /** viewBox units per screen pixel. */
     unit: number;
-    /** Measured height of a value label, in viewBox units. */
     labelHeight: number;
-    /** Measured height of a badge, in viewBox units. Zero when the chart has none. */
     badgeHeight: number;
-    /** How many stagger steps the data itself takes, so commentary can land after it. */
+    /** How many stagger steps the data takes, so commentary can land after it. */
     after: number;
-    /** For an annotation: its number in the figure, counted from 1. Each of its
-     * marks gets it as `data-note`. Zero for the chart itself. */
+    /** An annotation's number in the figure, from 1, set as `data-note` on its marks. Zero for the chart. */
     note: number;
-    /** Where the break's mark goes, as a value: the scale jumps just above it. Null
-     * when the scale runs straight through. */
+    /** Where the break's mark goes, as a value. Null when the scale runs straight through. */
     breakAt: number | null;
-    /** Where the numbers on the marks go, by the figure's say or the page's. */
     labels: "outside" | "inside";
-    /** `data-chart-stack` on the figure: the series of a row are drawn on top of
-     * each other, the first at the bottom. */
     stacked: boolean;
-    /** `data-chart-shape` on the figure: "step" holds each value until the next
-     * point. For line and area charts. */
-    shape: "straight" | "step";
-    /** The total of each row of a stacked chart, in row order. Empty when the chart
-     * is not stacked or its kind shows no totals. */
+    shape: Shape;
+    /** Empty when the chart is not stacked or its kind shows no totals. */
     totals: HTMLElement[];
     svg: SVGSVGElement;
     plot: HTMLElement;
-    /** The value labels, in row order. Created earlier; a chart only places them. */
+    /** Made by `build`; a chart only places them. */
     values: HTMLElement[];
-    /** The value columns. A chart kind that draws only one is given only one. */
     series: Series[];
-    /** The value labels of each series, in row order. The first is `values`. */
     seriesValues: HTMLElement[][];
-    /** The name of each series, to be placed by its marks. Empty with one series. */
+    /** Empty with one series. */
     names: HTMLElement[];
-    /** The category names, in row order. A chart that keeps them beside its marks
-     * places these too; one that keeps them under the plot never touches them. */
+    /** A chart with its names beside the marks places these; one with them under the plot does not. */
     categories: HTMLElement[];
-    /** The number in the middle, for a chart kind that has one. */
     centre: HTMLElement | null;
     config: Config;
-    /** Numbers an annotation worked out, against the numbers the author wrote. */
+    /** Numbers an annotation worked out, against the ones the author wrote. */
     checks: Check[];
 }
 
@@ -271,7 +178,6 @@ declare interface HeadroomInput {
     badgeHeight: number;
     hasAnnotations: boolean;
     unit: number;
-    /** How many series the chart draws, and whether one of them is in focus. */
     series: number;
     focused: boolean;
     stacked: boolean;
@@ -280,100 +186,60 @@ declare interface HeadroomInput {
 /** Pass 3. Needs layout; makes no text, only places it. */
 export declare const layout: (state: ChartState, config: Config) => boolean;
 
-/**
- * `data-chart-src` names a JSON file that holds the chart's rows. The file is the
- * whole of the data: a table written inside the figure is removed, so there is
- * never a question of which of the two is drawn. The file is either an array of
- * rows or an object with a `rows` array.
- *
- * The file becomes an ordinary table before anything else happens, so a screen
- * reader, a translation plugin and print all get the same table they would from
- * HTML. A file that cannot be read leaves its chart empty and says why; the rest
- * of the page goes on.
- */
+/** `data-chart-src` replaces any table in the figure with one made from a JSON file; a file that fails is reported. */
 export declare const loadSources: (figures: HTMLElement[]) => Promise<void>;
 
 export declare const PLACED_CLASS = "is-placed";
 
 export declare const PLOT_CLASS = "tablechart-plot";
 
-/**
- * Turns elements into figures with a table, ready to build: a table from Markdown
- * is wrapped, a JSON file becomes a table, and translation keys are added. All at
- * once, so two charts with the same `data-chart-keys` are found.
- */
+/** Turns elements into figures with a table and translation keys, all at once, so duplicate keys are found. */
 export declare const prepare: (found: HTMLElement[], config: Config) => Promise<HTMLElement[]>;
 
 export declare const QUEUED_CLASS = "tablechart-queued";
 
-/**
- * A Markdown table has no header cells in its body and no attributes on its rows,
- * so it says the same things differently. The first cell of a row is its label,
- * and a label in **bold**, or in a `.total` span, makes the row a total, like
- * `data-kind="total"` in HTML. A total is set in bold in most tables of figures
- * already. The bold is taken off once read, so the label is plain text again.
- * Rows written in HTML already have their `th` and are left as they are.
- *
- * The header over the value columns names the series. A name in bold is the
- * series in focus, like `data-kind="focus"`.
- */
+/** In a Markdown table, a bold label makes the row a total, and a bold header puts that series in focus. */
 export declare const readMarkdownRows: (figures: HTMLElement[]) => void;
 
 /** Numbers are reformatted in place, so a language change costs no redraw. */
 export declare const relabel: (state: ChartState, config: Config) => void;
 
-/** One row of the source table. Its own value is its first cell's. */
 export declare interface Row extends Cell {
-    /** The category label, as authored. */
     label: string;
-    /** Its translation key, authored or generated. */
     key: string | null;
-    /** Every value cell in the row, one per series. The first is the row's own. */
     cells: Cell[];
-    /** The classes on the row in the table. They are copied to its bar, slice,
-     * number and name, so one class styles everything drawn for the row. */
+    /** Copied to everything drawn for the row, so one class styles all of it. */
     classes: string[];
-    /** A row marked `data-kind="total"` is a total. */
     isTotal: boolean;
-    /** Where it is in the run that animates with it: the stagger counts from here. */
+    /** The stagger counts from here. */
     slot: number;
 }
 
-/** A row once a chart has worked out where it goes. */
 declare interface Segment extends Row {
     from: number;
     to: number;
     kind: "bar" | "up" | "down" | "total";
 }
 
-/**
- * A value column of the source table. A table with one is a chart with one series,
- * and its header is not read; with more, the header names each one.
- */
 export declare interface Series {
-    /** The column's header, as authored. Empty when the table has no header. */
     name: string;
-    /** Its translation key, authored or generated. */
     key: string | null;
-    /** `data-kind="focus"` on the header, or a bold one in Markdown: the series the
-     * chart is about. The others are shown fainter. */
+    /** `data-kind="focus"`, or bold in Markdown: the others are shown fainter. */
     focus: boolean;
-    /** `data-marker` on the header: the point of its line, such as `square` or
-     * `diamond open`. Null for the point its place gives it. */
+    /** `data-marker` on the header, such as `square` or `diamond open`. */
     marker: string | null;
-    /** `data-line` on the header: a dashed or dotted line. Null for a solid one. */
     line: "dashed" | "dotted" | null;
 }
 
 /** One class, `is-shown`, starts the whole build. */
 export declare const setShown: (state: ChartState, shown: boolean) => void;
 
+/** How a line or an area runs from one point to the next. */
+declare type Shape = "straight" | "step" | "smooth";
+
 export declare const SHOWN_CLASS = "is-shown";
 
-/**
- * Removes what `build` added to the figure, so it can be built again. The table
- * and the figure's own attributes stay.
- */
+/** Removes what `build` added, so the chart can be built again. */
 export declare const unbuild: (state: ChartState) => void;
 
 export { }
@@ -381,7 +247,6 @@ export { }
 
 declare global {
     interface HTMLElement {
-        /** The chart made of this element, by `init` or `create`. */
         tablechart?: TablechartChart;
     }
 }

package/dist/tablechart-core.mjs

@@ -1,2 +1,2 @@
-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";
-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 };
+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, n as u, o as d, p as f, s as p, u as m, v as h } from "./tablechart-shared.mjs";
+export { l as PLACED_CLASS, o as PLOT_CLASS, a as QUEUED_CLASS, e as SHOWN_CLASS, t as adoptTables, f as assignKeys, n as build, h as defaultConfig, u as entranceOf, c as layout, d as loadSources, s as prepare, p as readMarkdownRows, m as relabel, r as setShown, i as unbuild };