@peter.prib/renderengine 0.7.0 → 0.9.0

package/dist/renderengine.umd.js

@@ -1479,6 +1479,16 @@
         dataShape: 'Array<{label, value?, children?}> — same hierarchical shape as treemap/sunburst (shares _hierarchyValue); drawn as an indented, collapsible list instead of nested rectangles/rings — a branch\'s value is auto-summed from its descendants and shown as a trailing count, a leaf\'s own extra fields (anything beyond label/value/children) shown as trailing descriptive text instead',
         streamShape: 'flat',
       },
+      {
+        key: 'table', label: 'Table', method: 'tableChart', category: '2d',
+        coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.NONE, camera: CAMERA_MODE.NONE,
+        axes: [
+          { role: 'row',   kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_ORDER, required: false },
+          { role: 'value', kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.TEXT_VALUE,     required: false },
+        ],
+        dataShape: 'Array<object> — one row per object, a column per key (options.columns: names or {key, label?, align?}; every key of the first row when absent); values shown exactly as text, numeric columns right-aligned; options.maxRows, options.nullText',
+        streamShape: 'flat',
+      },
       {
         key: 'gauge-dial', label: 'Gauge (Dial)', method: 'dialGauge', category: 'gauge',
         coordSystem: COORD_SYSTEM.RADIAL, title: true, legend: false, colorMode: COLOR_MODE.SINGLE, camera: CAMERA_MODE.NONE,
@@ -4283,153 +4293,155 @@
         return key.startsWith('--') ? key : key.replace(/[A-Z]/g, c => `-${c.toLowerCase()}`);
     }
 
-    /**
-     * PopupMenu — the one popup/context menu: a small menu at a screen position,
-     * closed by choosing an item, clicking elsewhere, Escape, or scrolling (it
-     * would no longer be beside what it was opened on). One is open at a time.
-     * Editor menus, the graph engine's ContextMenu and the model tree's menus all
-     * render through it.
-     *
-     * Items: `{ label, action, danger?, checked?, disabled? }`,
-     * `{ label, items: [...] }` for a submenu, or `{ separator: true }`.
-     */
-    class PopupMenu {
-        static _open = null;
-
-        static show(x, y, items, doc = document) {
-            PopupMenu.close();
-            if (!items.length) return null;
-            const menu = el({
-                ...PopupMenu._panel(items, doc),
-                style: { ...PopupMenu._panelStyle, position: 'fixed', left: `${x}px`, top: `${y}px` },
-            }, doc);
-            doc.body.appendChild(menu);
-            // Opened near the window's right or bottom edge, it moves back into the window.
-            const win = doc.defaultView;
-            const box = menu.getBoundingClientRect?.();
-            if (win && box?.width) {
-                const at = PopupMenu.fit(x, y, box.width, box.height, win.innerWidth, win.innerHeight);
-                Object.assign(menu.style, { left: `${at.x}px`, top: `${at.y}px` });
-            }
-            // Registered after the opening click has finished propagating.
-            const dismiss = () => PopupMenu.close();
-            const onKey = (e) => { if (e.key === 'Escape') PopupMenu.close(); };
-            setTimeout(() => {
-                if (PopupMenu._open?.menu !== menu) return;   // closed meanwhile
-                doc.addEventListener('click', dismiss, { once: true });
-                doc.addEventListener('scroll', dismiss, { once: true, capture: true });
-                doc.addEventListener('keydown', onKey);
-            }, 0);
-            PopupMenu._open = { menu, dismiss, onKey, doc };
-            return menu;
-        }
-
-        /**
-         * Where a menu of a size goes, asked for at (x, y), to be all inside a
-         * window of a size: left of the point when it would pass the right edge,
-         * above it when it would pass the bottom, never past the top-left.
-         */
-        static fit(x, y, width, height, windowWidth, windowHeight, margin = 4) {
-            const left = x + width + margin > windowWidth ? x - width : x;
-            const top = y + height + margin > windowHeight ? y - height : y;
-            return {
-                x: Math.max(margin, Math.min(left, windowWidth - width - margin)),
-                y: Math.max(margin, Math.min(top, windowHeight - height - margin)),
-            };
-        }
-
-        /**
-         * Where a submenu opens beside its item (the item's box `{left, right, top}`),
-         * to be all inside the window: to the right, or to the left when the right
-         * would pass the edge (and there is more room on the left); level with the
-         * item, or lifted by as much as it would pass the bottom. `top` is relative
-         * to the item, as the submenu is positioned.
-         */
-        static submenuPlacement(item, width, height, windowWidth, windowHeight, margin = 4) {
-            const fitsRight = item.right + width + margin <= windowWidth;
-            const side = fitsRight || item.left < windowWidth - item.right ? 'right' : 'left';
-            const top = -4;
-            const overflow = item.top + top + height + margin - windowHeight;
-            return { side, top: overflow > 0 ? Math.max(top - overflow, margin - item.top) : top };
-        }
-
-        static close() {
-            const open = PopupMenu._open;
-            if (!open) return;
-            open.menu.remove();
-            open.doc.removeEventListener('click', open.dismiss);
-            open.doc.removeEventListener('scroll', open.dismiss, { capture: true });
-            open.doc.removeEventListener('keydown', open.onKey);
-            PopupMenu._open = null;
-        }
-
-        static get isOpen() {
-            return !!PopupMenu._open;
-        }
-
-        static _panelStyle = {
-            background: '#fff', border: '1px solid #ccc', borderRadius: '3px', boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
-            zIndex: '10000', minWidth: '170px', fontSize: '12px', fontFamily: 'sans-serif', padding: '4px 0',
-        };
-
-        static _panel(items, doc) {
-            return { attrs: { role: 'menu' }, children: items.map(item => PopupMenu._item(item, doc)) };
-        }
-
-        static _item(item, doc) {
-            if (item.separator) return { attrs: { role: 'separator' }, style: { borderTop: '1px solid #ddd', margin: '4px 0' } };
-            const hover = item.danger ? '#ffe8e8' : '#f0f0f0';
-            const base = {
-                attrs: { role: 'menuitem', 'aria-disabled': item.disabled ? 'true' : null, 'aria-checked': item.checked != null ? String(!!item.checked) : null },
-                style: {
-                    padding: '7px 14px', cursor: item.disabled ? 'default' : 'pointer', position: 'relative', whiteSpace: 'nowrap',
-                    color: item.disabled ? '#aaa' : item.danger ? '#cc3333' : '', background: item.checked ? '#e3f2fd' : '',
-                },
-            };
-            if (item.items) {
-                let sub;
-                return {
-                    ...base,
-                    attrs: { ...base.attrs, 'aria-haspopup': 'menu' },
-                    on: {
-                        mouseenter: (e) => {
-                            e.currentTarget.style.background = hover;
-                            sub.style.display = 'block';
-                            // Opened near the window's right or bottom edge, it opens left, or lifts.
-                            const win = e.currentTarget.ownerDocument.defaultView;
-                            const box = sub.getBoundingClientRect?.();
-                            if (!win || !box?.width) return;
-                            const at = PopupMenu.submenuPlacement(e.currentTarget.getBoundingClientRect(), box.width, box.height, win.innerWidth, win.innerHeight);
-                            Object.assign(sub.style, at.side === 'left' ? { left: 'auto', right: '100%' } : { left: '100%', right: 'auto' }, { top: `${at.top}px` });
-                        },
-                        mouseleave: (e) => { e.currentTarget.style.background = ''; sub.style.display = 'none'; },
-                        click: (e) => e.stopPropagation(),
-                    },
-                    children: [
-                        `${item.label} ▸`,
-                        {
-                            ...PopupMenu._panel(item.items, doc),
-                            style: { ...PopupMenu._panelStyle, position: 'absolute', left: '100%', top: '-4px', display: 'none' },
-                            ref: (n) => { sub = n; },
-                        },
-                    ],
-                };
-            }
-            return {
-                ...base,
-                text: item.label,
-                on: {
-                    mouseenter: (e) => { if (!item.disabled) e.currentTarget.style.background = hover; },
-                    mouseleave: (e) => { e.currentTarget.style.background = item.checked ? '#e3f2fd' : ''; },
-                    click: (e) => {
-                        e.stopPropagation();
-                        if (item.disabled) return;
-                        PopupMenu.close();
-                        item.action();
-                    },
-                },
-            };
-        }
+    /**
+     * PopupMenu — the one popup/context menu: a small menu at a screen position,
+     * closed by choosing an item, clicking elsewhere, Escape, or scrolling (it
+     * would no longer be beside what it was opened on). One is open at a time.
+     * Editor menus, the graph engine's ContextMenu and the model tree's menus all
+     * render through it.
+     *
+     * Items: `{ label, action, danger?, checked?, disabled? }`,
+     * `{ label, items: [...] }` for a submenu, or `{ separator: true }`.
+     */
+    class PopupMenu {
+        static _open = null;
+
+        static show(x, y, items, doc = document) {
+            PopupMenu.close();
+            if (!items.length) return null;
+            const menu = el({
+                ...PopupMenu._panel(items, doc),
+                style: { ...PopupMenu._panelStyle, position: 'fixed', left: `${x}px`, top: `${y}px` },
+            }, doc);
+            doc.body.appendChild(menu);
+            // Opened near the window's right or bottom edge, it moves back into the window.
+            const win = doc.defaultView;
+            const box = menu.getBoundingClientRect?.();
+            if (win && box?.width) {
+                const at = PopupMenu.fit(x, y, box.width, box.height, win.innerWidth, win.innerHeight);
+                Object.assign(menu.style, { left: `${at.x}px`, top: `${at.y}px` });
+            }
+            // Registered after the opening click has finished propagating.
+            const dismiss = () => PopupMenu.close();
+            const onKey = (e) => { if (e.key === 'Escape') PopupMenu.close(); };
+            setTimeout(() => {
+                if (PopupMenu._open?.menu !== menu) return;   // closed meanwhile
+                doc.addEventListener('click', dismiss, { once: true });
+                doc.addEventListener('scroll', dismiss, { once: true, capture: true });
+                doc.addEventListener('keydown', onKey);
+            }, 0);
+            PopupMenu._open = { menu, dismiss, onKey, doc };
+            return menu;
+        }
+
+        /**
+         * Where a menu of a size goes, asked for at (x, y), to be all inside a
+         * window of a size: left of the point when it would pass the right edge,
+         * above it when it would pass the bottom, never past the top-left.
+         */
+        static fit(x, y, width, height, windowWidth, windowHeight, margin = 4) {
+            const left = x + width + margin > windowWidth ? x - width : x;
+            const top = y + height + margin > windowHeight ? y - height : y;
+            return {
+                x: Math.max(margin, Math.min(left, windowWidth - width - margin)),
+                y: Math.max(margin, Math.min(top, windowHeight - height - margin)),
+            };
+        }
+
+        /**
+         * Where a submenu opens beside its item (the item's box `{left, right, top}`),
+         * to be all inside the window: to the right, or to the left when the right
+         * would pass the edge (and there is more room on the left); level with the
+         * item, or lifted by as much as it would pass the bottom. `top` is relative
+         * to the item, as the submenu is positioned.
+         */
+        static submenuPlacement(item, width, height, windowWidth, windowHeight, margin = 4) {
+            const fitsRight = item.right + width + margin <= windowWidth;
+            const side = fitsRight || item.left < windowWidth - item.right ? 'right' : 'left';
+            const top = -4;
+            const overflow = item.top + top + height + margin - windowHeight;
+            return { side, top: overflow > 0 ? Math.max(top - overflow, margin - item.top) : top };
+        }
+
+        static close() {
+            const open = PopupMenu._open;
+            if (!open) return;
+            open.menu.remove();
+            open.doc.removeEventListener('click', open.dismiss);
+            open.doc.removeEventListener('scroll', open.dismiss, { capture: true });
+            open.doc.removeEventListener('keydown', open.onKey);
+            PopupMenu._open = null;
+        }
+
+        static get isOpen() {
+            return !!PopupMenu._open;
+        }
+
+        // The text colour is set with the background: inherited from a dark-themed page it was light
+        // grey on this white panel, and every item but a disabled or danger one was unreadable.
+        static _panelStyle = {
+            background: '#fff', color: '#222', border: '1px solid #ccc', borderRadius: '3px', boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
+            zIndex: '10000', minWidth: '170px', fontSize: '12px', fontFamily: 'sans-serif', padding: '4px 0',
+        };
+
+        static _panel(items, doc) {
+            return { attrs: { role: 'menu' }, children: items.map(item => PopupMenu._item(item, doc)) };
+        }
+
+        static _item(item, doc) {
+            if (item.separator) return { attrs: { role: 'separator' }, style: { borderTop: '1px solid #ddd', margin: '4px 0' } };
+            const hover = item.danger ? '#ffe8e8' : '#f0f0f0';
+            const base = {
+                attrs: { role: 'menuitem', 'aria-disabled': item.disabled ? 'true' : null, 'aria-checked': item.checked != null ? String(!!item.checked) : null },
+                style: {
+                    padding: '7px 14px', cursor: item.disabled ? 'default' : 'pointer', position: 'relative', whiteSpace: 'nowrap',
+                    color: item.disabled ? '#aaa' : item.danger ? '#cc3333' : '', background: item.checked ? '#e3f2fd' : '',
+                },
+            };
+            if (item.items) {
+                let sub;
+                return {
+                    ...base,
+                    attrs: { ...base.attrs, 'aria-haspopup': 'menu' },
+                    on: {
+                        mouseenter: (e) => {
+                            e.currentTarget.style.background = hover;
+                            sub.style.display = 'block';
+                            // Opened near the window's right or bottom edge, it opens left, or lifts.
+                            const win = e.currentTarget.ownerDocument.defaultView;
+                            const box = sub.getBoundingClientRect?.();
+                            if (!win || !box?.width) return;
+                            const at = PopupMenu.submenuPlacement(e.currentTarget.getBoundingClientRect(), box.width, box.height, win.innerWidth, win.innerHeight);
+                            Object.assign(sub.style, at.side === 'left' ? { left: 'auto', right: '100%' } : { left: '100%', right: 'auto' }, { top: `${at.top}px` });
+                        },
+                        mouseleave: (e) => { e.currentTarget.style.background = ''; sub.style.display = 'none'; },
+                        click: (e) => e.stopPropagation(),
+                    },
+                    children: [
+                        `${item.label} ▸`,
+                        {
+                            ...PopupMenu._panel(item.items, doc),
+                            style: { ...PopupMenu._panelStyle, position: 'absolute', left: '100%', top: '-4px', display: 'none' },
+                            ref: (n) => { sub = n; },
+                        },
+                    ],
+                };
+            }
+            return {
+                ...base,
+                text: item.label,
+                on: {
+                    mouseenter: (e) => { if (!item.disabled) e.currentTarget.style.background = hover; },
+                    mouseleave: (e) => { e.currentTarget.style.background = item.checked ? '#e3f2fd' : ''; },
+                    click: (e) => {
+                        e.stopPropagation();
+                        if (item.disabled) return;
+                        PopupMenu.close();
+                        item.action();
+                    },
+                },
+            };
+        }
     }
 
     /**
@@ -12541,6 +12553,729 @@
     OutlineChart.INDENT_W = 18;
     OutlineChart.HIERARCHY_STRUCTURAL_KEYS = new Set(['label', 'value', 'children']);
 
+    /**
+     * TableChart — rows of values as a table: a header row of column names, then one row per record,
+     * numeric columns right-aligned. Drawn with the renderer's primitives like every chart, so it works
+     * under SVG and canvas and needs no DOM table. Values are shown exactly (not an axis's "1.20k"):
+     * a table is where a reader goes for the actual number.
+     */
+    class TableChart extends Chart {
+        static chartType = 'table';
+
+        /** Layout constants for the rows. */
+        static ROW_H = 26;
+        static PAD_X = 8;
+        static HEADER_FILL = '#eef1f6';
+        static STRIPE_FILL = '#f8f9fb';
+        static RULE = { color: '#d9dde4', width: 1 };
+
+        /**
+         * The columns to show: `options.columns` (names, or `{ key, label?, align? }`), else every key of
+         * the first row. A column is right-aligned when every value it holds is a number (or null).
+         */
+        static columns(data, given) {
+            const specs = (given ?? Object.keys(data[0] ?? {})).map(c => (typeof c === 'string' ? { key: c } : { ...c }));
+            return specs.map(c => ({
+                key: c.key,
+                label: c.label ?? c.key,
+                align: c.align ?? (data.length > 0 && data.every(r => r[c.key] == null || typeof r[c.key] === 'number') ? 'end' : 'start'),
+            }));
+        }
+
+        /** The table has no axes, so none of a chart's axis margins: an edge all round, and room for a title. */
+        static margins(title) {
+            return { left: 8, right: 8, top: title ? 50 : 8, bottom: 8 };
+        }
+
+        /**
+         * The height a table of `rowCount` rows needs — header, rows (at most `maxRows`), the "more rows"
+         * line, a title and the edges — so a page can size its container to fit before drawing.
+         */
+        static heightFor(rowCount, { title, maxRows = Infinity } = {}) {
+            const shown = Math.min(rowCount, maxRows);
+            const more = rowCount > shown ? 1 : 0;
+            const { top, bottom } = TableChart.margins(title);
+            return top + (1 + shown + more) * TableChart.ROW_H + bottom;
+        }
+
+        /** A cell's text: a number exactly (to at most 4 decimals), null/undefined as `nullText`. */
+        static cellText(value, nullText = '—') {
+            if (value == null) return nullText;
+            if (typeof value === 'number') return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(4)));
+            if (value instanceof Date) return value.toISOString().slice(0, 10);
+            return String(value);
+        }
+
+        _render() {
+            const data = this.data ?? [];
+            const box = ChartBox.fromRenderer(this.renderer, TableChart.margins(this.options.title));
+            const { x = box.x, y = box.y, width = box.width, title, maxRows = Infinity, nullText = '—' } = this.options;
+            const { ROW_H, PAD_X } = TableChart;
+            const columns = TableChart.columns(data, this.options.columns);
+            const colW = columns.length > 0 ? width / columns.length : width;
+
+            new ChartLabels({ title }).draw(this.renderer, { x, y, width, height: box.height });
+
+            const shown = data.slice(0, maxRows);
+            let top = y;
+            this.renderer.rect(x, top, width, ROW_H, TableChart.HEADER_FILL, null);
+            columns.forEach((c, i) => this._cell(c.label, c, x + i * colW, top, colW, { fontWeight: 'bold', fill: '#333' }));
+            top += ROW_H;
+            this._rule(x, top, width);
+
+            shown.forEach((row, r) => {
+                if (r % 2 === 1) this.renderer.rect(x, top, width, ROW_H, TableChart.STRIPE_FILL, null);
+                columns.forEach((c, i) => this._cell(TableChart.cellText(row[c.key], nullText), c, x + i * colW, top, colW, { fill: '#222' }));
+                top += ROW_H;
+                this._rule(x, top, width);
+            });
+
+            if (data.length > shown.length) {
+                this.renderer.text(`${data.length - shown.length} more row(s) not shown`, x + PAD_X, top + ROW_H / 2, {
+                    textAnchor: 'start', verticalAlign: 'middle', fontSize: '11px', fill: '#888',
+                });
+            }
+        }
+
+        _cell(text, column, left, top, colW, attrs) {
+            const end = column.align === 'end';
+            return this.renderer.text(text, end ? left + colW - TableChart.PAD_X : left + TableChart.PAD_X, top + TableChart.ROW_H / 2, {
+                textAnchor: end ? 'end' : 'start', verticalAlign: 'middle', fontSize: '12px', ...attrs,
+            });
+        }
+
+        _rule(x, y, width) {
+            this.renderer.path(`M${x},${y} L${x + width},${y}`, 'none', TableChart.RULE);
+        }
+    }
+
+    /**
+     * ChartChooser — which catalog chart types fit a set of result rows, best first, each with the rows
+     * already shaped as that chart's `dataShape`. A table always fits, so it is always offered, last.
+     *
+     * The caller may describe the columns (hints). `kind` is `'categorical'`, `'numeric'` or `'time'`; a
+     * column with no hint is numeric when every value it holds is a number, else categorical. `measure`
+     * is renderengine's measure kind (`'additive'`, `'semi-additive'`, `'non-additive'`), as a data model
+     * gives it. The hints change the choice: a time column is drawn along a line, and only an additive
+     * measure is offered as shares of a whole (a pie), since a part-of-a-whole slice of an average or a
+     * balance means nothing.
+     *
+     * Every suggestion is checked against CHART_CATALOG: a chart type is offered only when the catalog
+     * has it and every axis it requires is one the result's shape provides — so the catalog stays the
+     * single source of truth for what each chart needs.
+     *
+     *     const [best, ...others] = new ChartChooser().choose(rows, [{ name: 'Day', kind: 'time' }]);
+     *     engine.renderChartType(best.key, best.data, { title: best.label });
+     */
+    class ChartChooser {
+        /** @param {ChartRegistry} [registry] — the built-in chart types, or another registry to choose from */
+        constructor(registry = chartRegistry) {
+            this.registry = registry;
+        }
+
+        /**
+         * @param {Array<object>} rows
+         * @param {Array<{name:string, kind?:string, measure?:string}>} [columns] — hints; every key of the
+         *   first row when absent, in that order
+         * @param {{complete?:boolean}} [options] — `complete: false` when the rows are only part of the
+         *   answer (a top N, a first page): then nothing is offered as shares of a whole, since the
+         *   slices would claim to be all of it
+         * @returns {Array<{key:string, label:string, data:*, reason:string}>} best first; the table last
+         */
+        choose(rows, columns = null, { complete = true } = {}) {
+            const described = ChartChooser.describe(rows, columns);
+            const shape = RESULT_SHAPES.map(S => S.of(described, rows)).find(s => s !== null) ?? null;
+            if (shape !== null) shape.complete = complete;
+            const charts = shape === null ? [] : shape.candidates()
+                .filter(({ key }) => this.fits(key, shape))
+                .map(({ key, reason, data }) => ({ key, label: this.registry.get(key).label, data, reason }));
+            return [...charts, this.table(rows, described, charts.length === 0)];
+        }
+
+        /** A catalog entry fits a shape when every axis it requires is one the shape provides. */
+        fits(key, shape) {
+            const entry = this.registry.get(key);
+            if (!entry) return false;
+            if (shape.needsSeries && !entry.seriesCapable && !entry.axes.some(a => a.role === 'series')) return false;
+            return entry.axes.filter(a => a.required).every(a => shape.provides[a.role] === a.kind);
+        }
+
+        table(rows, described, only) {
+            return {
+                key: 'table', label: this.registry.get('table')?.label ?? 'Table',
+                data: rows, columns: described.map(c => c.name),
+                reason: only ? 'no chart fits these columns' : 'every value, exactly',
+            };
+        }
+
+        /** The columns with their kinds settled: the hint's, else derived from the rows' values. */
+        static describe(rows, columns) {
+            const given = columns ?? Object.keys(rows[0] ?? {}).map(name => ({ name }));
+            return given.map(c => ({
+                name: c.name,
+                kind: c.kind ?? (rows.length > 0 && rows.every(r => r[c.name] == null || typeof r[c.name] === 'number') ? 'numeric' : 'categorical'),
+                measure: c.measure ?? null,
+            }));
+        }
+    }
+
+    /** The label a category value is drawn with. */
+    function label(value) {
+        return value == null ? '—' : value instanceof Date ? value.toISOString().slice(0, 10) : String(value);
+    }
+
+    /** Rows in time order by `column` (numbers, dates and ISO strings all sort correctly this way). */
+    function inOrder(rows, column) {
+        return [...rows].sort((a, b) => (a[column] < b[column] ? -1 : a[column] > b[column] ? 1 : 0));
+    }
+
+    /**
+     * ResultShape — what a result's columns look like: how many category, time and numeric columns.
+     * Each subclass recognises one shape (`static of`), says which catalog axes it provides, and lists
+     * the chart types that suit it, best first, with the rows shaped for each.
+     */
+    class ResultShape {
+        constructor() {
+            /** Whether the rows are all of the answer (ChartChooser.choose's `complete`). */
+            this.complete = true;
+        }
+
+        /** The axes this shape can fill, role → AXIS_KIND. */
+        get provides() { return {}; }
+        /** Whether a chart must draw several series (one per numeric column). */
+        get needsSeries() { return false; }
+        /** @returns {Array<{key, reason, data}>} */
+        candidates() { return []; }
+
+        static split(columns) {
+            return {
+                categories: columns.filter(c => c.kind !== 'numeric'),
+                numbers: columns.filter(c => c.kind === 'numeric'),
+            };
+        }
+
+        /**
+         * Whether each row has its own value of the category columns. Rows that repeat a category
+         * (rows of orders, not totals per region) would be drawn as one bar per row with the same
+         * label over and over — or, for two categories, one repeated pair would replace another's value
+         * unseen. A chart of a value per category needs one row per category: a GROUP BY first.
+         */
+        static oneRowEach(rows, categories) {
+            const keys = new Set(rows.map(r => JSON.stringify(categories.map(c => r[c.name] ?? null))));
+            return keys.size === rows.length;
+        }
+    }
+
+    /** One number and nothing to group it by: a single figure. */
+    class SingleFigure extends ResultShape {
+        static of(columns, rows) {
+            const { categories, numbers } = ResultShape.split(columns);
+            return categories.length === 0 && numbers.length === 1 && rows.length === 1 ? new SingleFigure(numbers[0], rows) : null;
+        }
+        constructor(number, rows) { super(); this.number = number; this.rows = rows; }
+        get provides() { return { value: AXIS_KIND.NUMERIC }; }
+        candidates() {
+            return [{ key: 'kpi-tile', reason: 'a single figure', data: { value: this.rows[0][this.number.name] } }];
+        }
+    }
+
+    /** One category (or time) column and one number: a value per category. */
+    class CategoryValue extends ResultShape {
+        static of(columns, rows) {
+            const { categories, numbers } = ResultShape.split(columns);
+            return categories.length === 1 && numbers.length === 1 && ResultShape.oneRowEach(rows, categories)
+                ? new CategoryValue(categories[0], numbers[0], rows) : null;
+        }
+        constructor(category, number, rows) { super(); this.category = category; this.number = number; this.rows = rows; }
+        get provides() { return { category: AXIS_KIND.CATEGORICAL, value: AXIS_KIND.NUMERIC }; }
+
+        candidates() {
+            const { category, number } = this;
+            const time = category.kind === 'time';
+            const rows = time ? inOrder(this.rows, category.name) : this.rows;
+            const data = rows.filter(r => r[number.name] != null).map(r => ({ label: label(r[category.name]), value: r[number.name] }));
+            if (time) {
+                return [
+                    { key: 'line', reason: `${number.name} over ${category.name}`, data },
+                    { key: 'area', reason: `${number.name} over ${category.name}, filled`, data },
+                    { key: 'bar', reason: `${number.name} for each ${category.name}`, data },
+                ];
+            }
+            const options = [{ key: 'bar', reason: `${number.name} for each ${category.name}`, data }];
+            if (this.isShareOfWhole(data)) {
+                options.push({ key: 'pie', reason: `each ${category.name}'s share of the total ${number.name}`, data });
+                options.push({ key: 'donut', reason: `each ${category.name}'s share of the total ${number.name}`, data });
+            }
+            return options;
+        }
+
+        /**
+         * Shares of a whole make sense only for an additive measure, over all of the rows (not a top N),
+         * with no negatives, in few slices.
+         */
+        isShareOfWhole(data) {
+            return this.complete && this.number.measure === 'additive' && data.length >= 2 && data.length <= CategoryValue.MAX_SLICES
+                && data.every(d => d.value >= 0);
+        }
+    }
+    CategoryValue.MAX_SLICES = 8;
+
+    /** One category (or time) column and several numbers: a series per number. */
+    class CategorySeries extends ResultShape {
+        static of(columns, rows) {
+            const { categories, numbers } = ResultShape.split(columns);
+            return categories.length === 1 && numbers.length >= 2 && ResultShape.oneRowEach(rows, categories)
+                ? new CategorySeries(categories[0], numbers, rows) : null;
+        }
+        constructor(category, numbers, rows) { super(); this.category = category; this.numbers = numbers; this.rows = rows; }
+        get provides() { return { category: AXIS_KIND.CATEGORICAL, value: AXIS_KIND.NUMERIC, series: AXIS_KIND.CATEGORICAL }; }
+        get needsSeries() { return true; }
+
+        candidates() {
+            const { category } = this;
+            const time = category.kind === 'time';
+            const rows = time ? inOrder(this.rows, category.name) : this.rows;
+            // lineChart and groupedBarChart have no gap for a missing value: a null would have to be drawn
+            // as 0, a figure the data does not hold. So a result with one is not offered as series.
+            if (rows.some(r => this.numbers.some(n => r[n.name] == null))) return [];
+            const data = this.numbers.map(n => ({
+                name: n.name,
+                values: rows.map(r => ({ label: label(r[category.name]), value: r[n.name] })),
+            }));
+            const names = this.numbers.map(n => n.name).join(', ');
+            return time
+                ? [{ key: 'line', reason: `${names} over ${category.name}`, data }, { key: 'groupedBar', reason: `${names} for each ${category.name}`, data }]
+                : [{ key: 'groupedBar', reason: `${names} for each ${category.name}`, data }, { key: 'line', reason: `${names} across ${category.name}`, data }];
+        }
+    }
+
+    /** Two category (or time) columns and one number: a value per pair. */
+    class TwoCategories extends ResultShape {
+        static of(columns, rows) {
+            const { categories, numbers } = ResultShape.split(columns);
+            return categories.length === 2 && numbers.length === 1 && ResultShape.oneRowEach(rows, categories)
+                ? new TwoCategories(categories, numbers[0], rows) : null;
+        }
+        constructor(categories, number, rows) {
+            super();
+            // A time column goes along the x axis, whichever order the columns came in.
+            this.across = categories.find(c => c.kind === 'time') ?? categories[0];
+            this.down = categories.find(c => c !== this.across);
+            this.number = number;
+            this.rows = rows;
+        }
+        get provides() {
+            return { x: AXIS_KIND.CATEGORICAL, y: AXIS_KIND.CATEGORICAL, category: AXIS_KIND.CATEGORICAL, value: AXIS_KIND.NUMERIC, series: AXIS_KIND.CATEGORICAL };
+        }
+
+        candidates() {
+            const { across, down, number } = this;
+            const rows = across.kind === 'time' ? inOrder(this.rows, across.name) : this.rows;
+            const heat = rows.filter(r => r[number.name] != null)
+                .map(r => ({ x: label(r[across.name]), y: label(r[down.name]), value: r[number.name] }));
+            const heatmap = { key: 'heatmap', reason: `${number.name} for each ${across.name} and ${down.name}`, data: heat };
+            // A series needs a value for every label; where a pair is missing (or null) only the heatmap,
+            // which draws just the cells present, shows the data without inventing a 0.
+            const labels = [...new Set(rows.map(r => label(r[across.name])))];
+            const value = new Map(rows.map(r => [`${label(r[across.name])}\u0000${label(r[down.name])}`, r[number.name]]));
+            const names = [...new Set(rows.map(r => label(r[down.name])))];
+            if (names.some(name => labels.some(l => value.get(`${l}\u0000${name}`) == null))) return [heatmap];
+            const series = names.map(name => ({ name, values: labels.map(l => ({ label: l, value: value.get(`${l}\u0000${name}`) })) }));
+            const grouped = { key: 'groupedBar', reason: `${number.name} for each ${across.name}, by ${down.name}`, data: series };
+            return across.kind === 'time'
+                ? [{ key: 'line', reason: `${number.name} over ${across.name}, a line per ${down.name}`, data: series }, heatmap, grouped]
+                : [grouped, heatmap];
+        }
+    }
+
+    /** Shapes in the order they are tried; the first that recognises the columns wins. */
+    const RESULT_SHAPES = [SingleFigure, CategoryValue, CategorySeries, TwoCategories];
+
+    /**
+     * TableView — the state of an interactive table over result rows, kept apart from drawing so all of
+     * it can be tested without a DOM: the sort, the filters, the hidden columns and the page, and the
+     * menus a table offers on a cell, a row, a column and the table itself (as PopupMenu item specs).
+     *
+     * Filtering is by choosing values from the table, not typing: a cell's menu keeps or excludes rows
+     * with its value (and, for a number, rows above or below it); a column's menu filters to one of its
+     * values. The table's menu offers "Show as", the chart types ChartChooser says fit what is showing.
+     *
+     * Every change calls `onChange(view)`; the host redraws. A host adds its own items with
+     * `menus: { cell(ctx), row(ctx), column(ctx), table(ctx) }`, each returning PopupMenu items.
+     */
+    const FILTER_OPS = {
+        '=': (v, x) => v === x,
+        '!=': (v, x) => v !== x,
+        '>': (v, x) => v != null && v > x,
+        '<': (v, x) => v != null && v < x,
+        'is null': (v) => v == null,
+        'is not null': (v) => v != null,
+    };
+
+    /** Order of two values for a sort: numbers numerically, everything else as text; nulls last. */
+    function compareValues(a, b) {
+        if (a == null) return b == null ? 0 : 1;
+        if (b == null) return -1;
+        if (typeof a === 'number' && typeof b === 'number') return a - b;
+        const x = String(a), y = String(b);
+        return x < y ? -1 : x > y ? 1 : 0;
+    }
+
+    /** A value as copied text: null as empty, an object as JSON. */
+    function plain(value) {
+        if (value == null) return '';
+        if (value instanceof Date) return value.toISOString();
+        return typeof value === 'object' ? JSON.stringify(value) : String(value);
+    }
+
+    class TableView {
+        /** The most distinct values a column's "Filter to" menu lists. */
+        static MAX_FILTER_VALUES = 20;
+
+        /**
+         * @param {Array<object>} rows
+         * @param {object} [options]
+         * @param {Array<{name, kind?, measure?}>} [options.columns] hints, as ChartChooser takes them
+         * @param {boolean} [options.complete] false when the rows are only part of the answer (a top N)
+         * @param {number} [options.pageSize] rows per page (50; Infinity for all)
+         * @param {function} [options.onChange] called with the view after every change
+         * @param {object} [options.menus] the host's own items: { cell, row, column, table } → items
+         * @param {function} [options.copy] writes text to the clipboard (navigator.clipboard by default)
+         * @param {ChartChooser} [options.chooser]
+         */
+        constructor(rows, { columns = null, complete = true, pageSize = 50, onChange = null, menus = {}, copy = null, chooser = null } = {}) {
+            this.rows = rows;
+            this.columns = ChartChooser.describe(rows, columns);
+            this.complete = complete;
+            this.pageSize = pageSize;
+            this.onChange = onChange;
+            this.menus = menus;
+            this.copy = copy ?? TableView.clipboard;
+            this.chooser = chooser ?? new ChartChooser();
+            this.sort = null;            // { column, direction: 'asc' | 'desc' }
+            this.filters = [];           // { column, op, value }
+            this.hidden = new Set();
+            this.page = 0;
+        }
+
+        static clipboard(text) {
+            return globalThis.navigator?.clipboard?.writeText(text);
+        }
+
+        // ── What is showing ───────────────────────────────────────────────────────
+
+        visibleColumns() { return this.columns.filter(c => !this.hidden.has(c.name)); }
+
+        filtered() {
+            return this.filters.length === 0 ? this.rows
+                : this.rows.filter(r => this.filters.every(f => FILTER_OPS[f.op](r[f.column], f.value)));
+        }
+
+        /** The filtered rows in sort order (a copy; equal values keep their order). */
+        ordered() {
+            const rows = this.filtered();
+            if (this.sort === null) return rows;
+            const { column, direction } = this.sort;
+            const sign = direction === 'desc' ? -1 : 1;
+            // Nulls stay last whichever way: a reader looks for values, not for blanks.
+            return [...rows].sort((a, b) => (a[column] == null || b[column] == null ? compareValues(a[column], b[column]) : sign * compareValues(a[column], b[column])));
+        }
+
+        pageCount() {
+            return Number.isFinite(this.pageSize) ? Math.max(1, Math.ceil(this.filtered().length / this.pageSize)) : 1;
+        }
+
+        /** The rows on the current page, each with its position in the ordered rows (`index`, from 0). */
+        pageRows() {
+            const rows = this.ordered();
+            const start = Number.isFinite(this.pageSize) ? this.page * this.pageSize : 0;
+            const end = Number.isFinite(this.pageSize) ? start + this.pageSize : rows.length;
+            return rows.slice(start, end).map((row, i) => ({ row, index: start + i }));
+        }
+
+        /** "Region = West · Revenue > 100", or '' with no filters. */
+        describeFilters() {
+            return this.filters.map(f => (f.op.startsWith('is') ? `${f.column} ${f.op}` : `${f.column} ${f.op} ${plain(f.value)}`)).join(' · ');
+        }
+
+        // ── Changes ───────────────────────────────────────────────────────────────
+
+        changed() {
+            this.page = Math.min(this.page, this.pageCount() - 1);
+            this.onChange?.(this);
+        }
+
+        /** A header click: unsorted → ascending → descending → unsorted. */
+        toggleSort(column) {
+            const current = this.sort?.column === column ? this.sort.direction : null;
+            this.sortBy(column, current === null ? 'asc' : current === 'asc' ? 'desc' : null);
+        }
+
+        sortBy(column, direction) {
+            this.sort = direction === null ? null : { column, direction };
+            this.page = 0;
+            this.changed();
+        }
+
+        addFilter(column, op, value = null) {
+            if (!Object.hasOwn(FILTER_OPS, op)) throw new Error(`Unknown filter "${op}"`);
+            this.filters = [...this.filters.filter(f => !(f.column === column && f.op === op && f.value === value)), { column, op, value }];
+            this.page = 0;
+            this.changed();
+        }
+
+        removeFilters(column) {
+            this.filters = this.filters.filter(f => f.column !== column);
+            this.changed();
+        }
+
+        clearFilters() {
+            this.filters = [];
+            this.changed();
+        }
+
+        /** Hides a column; the last one showing cannot be hidden. */
+        hide(column) {
+            if (this.visibleColumns().length <= 1) return;
+            this.hidden.add(column);
+            this.changed();
+        }
+
+        showAll() {
+            this.hidden.clear();
+            this.changed();
+        }
+
+        goToPage(page) {
+            this.page = Math.max(0, Math.min(page, this.pageCount() - 1));
+            this.changed();
+        }
+
+        // ── Text out ──────────────────────────────────────────────────────────────
+
+        /** Rows as tab-separated text, header first, the visible columns only. */
+        asTsv(rows = this.ordered()) {
+            const columns = this.visibleColumns().map(c => c.name);
+            const clean = (v) => plain(v).replace(/[\t\r\n]+/g, ' ');
+            return [columns.map(clean).join('\t'), ...rows.map(r => columns.map(c => clean(r[c])).join('\t'))].join('\n');
+        }
+
+        // ── Menus (PopupMenu items) ──────────────────────────────────────────────
+
+        cellMenu(row, column) {
+            const value = row[column];
+            const kind = this.columns.find(c => c.name === column)?.kind;
+            const shown = value == null ? 'empty' : plain(value);
+            const items = value == null
+                ? [{ label: `Only rows where ${column} is empty`, action: () => this.addFilter(column, 'is null') },
+                    { label: `Exclude rows where ${column} is empty`, action: () => this.addFilter(column, 'is not null') }]
+                : [{ label: `Only rows where ${column} = ${shown}`, action: () => this.addFilter(column, '=', value) },
+                    { label: `Exclude rows where ${column} = ${shown}`, action: () => this.addFilter(column, '!=', value) },
+                    ...(kind === 'numeric' ? [
+                        { label: `Only rows where ${column} > ${shown}`, action: () => this.addFilter(column, '>', value) },
+                        { label: `Only rows where ${column} < ${shown}`, action: () => this.addFilter(column, '<', value) },
+                    ] : [])];
+            return [
+                ...items,
+                { separator: true },
+                { label: 'Copy value', action: () => this.copy(plain(value)) },
+                ...this.extra('cell', { row, column, value }),
+            ];
+        }
+
+        rowMenu(row) {
+            return [
+                { label: 'Copy row', action: () => this.copy(this.asTsv([row])) },
+                { label: 'Copy row as JSON', action: () => this.copy(JSON.stringify(row)) },
+                ...this.extra('row', { row }),
+            ];
+        }
+
+        columnMenu(column) {
+            const sorted = this.sort?.column === column ? this.sort.direction : null;
+            const values = [...new Set(this.filtered().map(r => r[column]))].sort(compareValues);
+            const listed = values.slice(0, TableView.MAX_FILTER_VALUES);
+            return [
+                { label: 'Sort ascending', checked: sorted === 'asc', action: () => this.sortBy(column, 'asc') },
+                { label: 'Sort descending', checked: sorted === 'desc', action: () => this.sortBy(column, 'desc') },
+                ...(sorted ? [{ label: 'Clear sort', action: () => this.sortBy(column, null) }] : []),
+                { separator: true },
+                {
+                    label: 'Filter to',
+                    items: [
+                        ...listed.map(v => (v == null
+                            ? { label: '(empty)', action: () => this.addFilter(column, 'is null') }
+                            : { label: plain(v), action: () => this.addFilter(column, '=', v) })),
+                        ...(values.length > listed.length ? [{ label: `${values.length - listed.length} more — filter from a cell`, disabled: true }] : []),
+                    ],
+                },
+                ...(this.filters.some(f => f.column === column) ? [{ label: `Clear filters on ${column}`, action: () => this.removeFilters(column) }] : []),
+                { separator: true },
+                { label: 'Hide column', disabled: this.visibleColumns().length <= 1, action: () => this.hide(column) },
+                { label: 'Copy column', action: () => this.copy([column, ...this.ordered().map(r => plain(r[column]))].join('\n')) },
+                ...this.extra('column', { column }),
+            ];
+        }
+
+        /** The table's menu; `onShowAs(choice)` draws a chosen chart (the host's — RenderEngine.resultView). */
+        tableMenu(onShowAs = null) {
+            const choices = onShowAs ? this.chartChoices() : [];
+            return [
+                ...(onShowAs ? [{
+                    label: 'Show as',
+                    items: choices.length > 0
+                        ? choices.map(c => ({ label: `${c.label} — ${c.reason}`, action: () => onShowAs(c) }))
+                        : [{ label: 'No chart fits these columns', disabled: true }],
+                }, { separator: true }] : []),
+                { label: 'Clear all filters', disabled: this.filters.length === 0, action: () => this.clearFilters() },
+                { label: 'Show hidden columns', disabled: this.hidden.size === 0, action: () => this.showAll() },
+                { label: 'Copy table', action: () => this.copy(this.asTsv()) },
+                ...this.extra('table', {}),
+            ];
+        }
+
+        /**
+         * The chart types that fit what the table is showing — its filtered, sorted rows and visible
+         * columns — as ChartChooser gives them, without the table. Filtered rows are not the whole
+         * answer, so they are never offered as shares of a whole.
+         */
+        chartChoices() {
+            const columns = this.visibleColumns();
+            const names = columns.map(c => c.name);
+            const rows = this.ordered().map(r => Object.fromEntries(names.map(n => [n, r[n]])));
+            return this.chooser.choose(rows, columns, { complete: this.complete && this.filters.length === 0 })
+                .filter(c => c.key !== 'table');
+        }
+
+        extra(kind, context) {
+            const items = this.menus?.[kind]?.({ view: this, ...context }) ?? [];
+            return items.length > 0 ? [{ separator: true }, ...items] : [];
+        }
+    }
+
+    /**
+     * TableViewChart — the interactive table: a TableChart drawn from a TableView's state, whose parts
+     * answer clicks. A header sorts (and its ▾ opens the column's menu); a cell opens the cell's menu; a
+     * row number opens the row's menu; the corner ⋮ opens the table's menu (with "Show as" when the host
+     * can draw a chart); the footer's ‹ › page. Each change goes through the view, whose `onChange`
+     * redraws.
+     *
+     * Interaction needs a renderer whose shapes are DOM elements (SVG: `supportsSceneGraph`); anywhere
+     * else it draws the same table without the clicks.
+     */
+    class TableViewChart extends TableChart {
+        static GUTTER_W = 44;
+        static MENU_GLYPH = '▾';
+        static TABLE_GLYPH = '⋮';
+
+        /**
+         * @param renderer
+         * @param {TableView} view
+         * @param {object} [options] title, nullText; onShowAs(choice) — draws a chart for the table menu's
+         *   "Show as"; showMenu(x, y, items) — opens a menu (PopupMenu.show by default)
+         */
+        constructor(renderer, view, options = {}) {
+            super(renderer, view.rows, options);
+            this.view = view;
+            this.showMenu = options.showMenu ?? ((x, y, items) => PopupMenu.show(x, y, items));
+        }
+
+        /** The height this draws: title, header, the page's rows and the footer. */
+        static heightFor(view, { title } = {}) {
+            const { top, bottom } = TableChart.margins(title);
+            return top + (2 + view.pageRows().length) * TableChart.ROW_H + bottom;
+        }
+
+        _render() {
+            const { view } = this;
+            const { title, nullText = '—' } = this.options;
+            const { ROW_H, PAD_X } = TableChart;
+            const box = ChartBox.fromRenderer(this.renderer, TableChart.margins(title));
+            const interactive = this.renderer.supportsSceneGraph === true;
+            const columns = view.visibleColumns().map(c => ({ key: c.name, label: c.name, align: c.kind === 'numeric' ? 'end' : 'start' }));
+            const gutter = TableViewChart.GUTTER_W;
+            const colW = columns.length > 0 ? (box.width - gutter) / columns.length : box.width - gutter;
+            const x0 = box.x + gutter;
+
+            new ChartLabels({ title }).draw(this.renderer, { x: box.x, y: box.y, width: box.width, height: box.height });
+
+            // Header: the corner (table menu), then a header per column (sort; ▾ column menu).
+            let top = box.y;
+            this.renderer.rect(box.x, top, box.width, ROW_H, TableChart.HEADER_FILL, null);
+            const corner = this.renderer.rect(box.x, top, gutter, ROW_H, TableChart.HEADER_FILL, null);
+            const cornerGlyph = this._text(TableViewChart.TABLE_GLYPH, box.x + gutter / 2, top, { textAnchor: 'middle', fontWeight: 'bold', fill: '#555' });
+            this._on(interactive, [corner, cornerGlyph], (e) => this.showMenu(e.clientX, e.clientY, view.tableMenu(this.options.onShowAs ?? null)), 'Table menu');
+
+            columns.forEach((c, i) => {
+                const left = x0 + i * colW;
+                const sorted = view.sort?.column === c.key ? (view.sort.direction === 'asc' ? ' ▲' : ' ▼') : '';
+                // In words: an arrow-like mark here read as a second sort arrow.
+                const filtered = view.filters.some(f => f.column === c.key) ? ' (filtered)' : '';
+                const head = this.renderer.rect(left, top, colW, ROW_H, TableChart.HEADER_FILL, null);
+                // The label leaves room at the right for the ▾.
+                const label = this._cell(`${c.label}${sorted}${filtered}`, c, left, top, colW - 16, { fontWeight: 'bold', fill: '#333' });
+                this._on(interactive, [head, label], () => view.toggleSort(c.key), 'Sort');
+                const glyph = this._text(TableViewChart.MENU_GLYPH, left + colW - 8, top, { textAnchor: 'middle', fill: '#777' });
+                this._on(interactive, [glyph], (e) => this.showMenu(e.clientX, e.clientY, view.columnMenu(c.key)), `${c.label} menu`);
+            });
+            top += ROW_H;
+            this._rule(box.x, top, box.width);
+
+            // Rows: a number in the gutter (row menu), a cell per column (cell menu).
+            view.pageRows().forEach(({ row, index }, r) => {
+                if (r % 2 === 1) this.renderer.rect(box.x, top, box.width, ROW_H, TableChart.STRIPE_FILL, null);
+                const number = this._text(String(index + 1), box.x + gutter - PAD_X, top, { textAnchor: 'end', fill: '#999', fontSize: '11px' });
+                this._on(interactive, [number], (e) => this.showMenu(e.clientX, e.clientY, view.rowMenu(row)), 'Row menu');
+                columns.forEach((c, i) => {
+                    const left = x0 + i * colW;
+                    const hit = this.renderer.rect(left, top, colW, ROW_H, 'transparent', null);
+                    const text = this._cell(TableChart.cellText(row[c.key], nullText), c, left, top, colW, { fill: row[c.key] == null ? '#999' : '#222' });
+                    this._on(interactive, [hit, text], (e) => this.showMenu(e.clientX, e.clientY, view.cellMenu(row, c.key)), null);
+                });
+                top += ROW_H;
+                this._rule(box.x, top, box.width);
+            });
+
+            this._footer(box, top, interactive);
+        }
+
+        /** "1–50 of 120 rows (filtered from 300: Region = West)", and ‹ › when there is more than a page. */
+        _footer(box, top, interactive) {
+            const { view } = this;
+            const shown = view.pageRows();
+            const total = view.filtered().length;
+            const range = shown.length === 0 ? 'No rows' : `${shown[0].index + 1}–${shown.at(-1).index + 1} of ${total} row${total === 1 ? '' : 's'}`;
+            const filters = view.filters.length > 0 ? ` (filtered from ${view.rows.length}: ${view.describeFilters()})` : '';
+            this._text(`${range}${filters}`, box.x + TableChart.PAD_X, top, { textAnchor: 'start', fill: '#666', fontSize: '11px' });
+            if (view.pageCount() > 1) {
+                const right = box.x + box.width - TableChart.PAD_X;
+                const previous = this._text('‹ previous', right - 70, top, { textAnchor: 'end', fill: view.page > 0 ? '#2b5fd9' : '#bbb', fontSize: '11px' });
+                const next = this._text('next ›', right, top, { textAnchor: 'end', fill: view.page < view.pageCount() - 1 ? '#2b5fd9' : '#bbb', fontSize: '11px' });
+                this._on(interactive, [previous], () => view.goToPage(view.page - 1), 'Previous page');
+                this._on(interactive, [next], () => view.goToPage(view.page + 1), 'Next page');
+            }
+        }
+
+        _text(text, x, top, attrs) {
+            return this.renderer.text(text, x, top + TableChart.ROW_H / 2, { verticalAlign: 'middle', fontSize: '12px', ...attrs });
+        }
+
+        /** Wires a click to each element that can take one (SVG); a pointer cursor and a tooltip say so. */
+        _on(interactive, elements, handler, title) {
+            if (!interactive) return;
+            for (const el of elements) {
+                if (typeof el?.addEventListener !== 'function') continue;
+                el.addEventListener('click', (event) => { event.stopPropagation?.(); handler(event); });
+                if (el.style) el.style.cursor = 'pointer';
+                if (title && typeof el.setAttribute === 'function' && el.ownerDocument) {
+                    const t = el.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'title');
+                    t.textContent = title;
+                    el.appendChild(t);
+                }
+            }
+        }
+    }
+
     /**
      * RadarChart — one polygon per series across N shared axes, each axis scaled
      * independently by its own max value across all series.
@@ -49441,6 +50176,80 @@ ${theirs}` : theirs;
             this._renderChart(new FunnelChart(this.renderer, data, options));
         }
 
+        /**
+         * Renders rows as a table — a header of column names, a row per record, numeric columns
+         * right-aligned, values shown exactly. Drawn with the renderer's primitives, so it works under
+         * SVG and canvas. ChartChooser offers it for any result, last.
+         * @param {Array<object>} data one object per row
+         * @param {object} [options]
+         * @param {Array<string|{key:string, label?:string, align?:'start'|'end'}>} [options.columns] every key of the first row when absent
+         * @param {number} [options.maxRows] rows beyond it are counted, not drawn
+         * @param {string} [options.nullText] what a null or missing value shows ('—')
+         * @param {string} [options.title]
+         */
+        tableChart(data, options = {}) {
+            if (!this.renderer) return;
+            this._chart3D = false;
+            this._chartState = { type: 'table', data, options };
+            this._renderChart(new TableChart(this.renderer, data, options));
+        }
+
+        /**
+         * Shows result rows as an interactive table — sort, filter, hide columns, page, copy, through
+         * menus on its cells, rows, columns and the table itself — whose table menu can show what it
+         * holds as any chart type ChartChooser says fits ("Show as"); a chart drawn that way has a
+         * "◂ Table" link back to the table as it was left. One output for a result, table or chart.
+         *
+         * The container's height follows what is drawn (the table's rows, or `chartHeight` for a chart),
+         * so the host gives the container a width only. Interaction needs the SVG renderer; on canvas
+         * the table is drawn without it.
+         * @param {Array<object>} rows
+         * @param {object} [options]
+         * @param {Array<{name, kind?, measure?}>} [options.columns] hints (ChartChooser's)
+         * @param {boolean} [options.complete] false when the rows are only part of the answer
+         * @param {number} [options.pageSize] rows per page (50)
+         * @param {object} [options.menus] the host's own items: { cell, row, column, table } → items
+         * @param {string} [options.title]
+         * @param {number} [options.chartHeight] a chart's height (360)
+         * @param {boolean} [options.fitHeight] size the container to what is drawn (true)
+         * @returns {TableView|null} the table's state, for the host to read or change
+         */
+        resultView(rows, options = {}) {
+            if (!this.renderer) return null;
+            const view = new TableView(rows, { ...options, onChange: () => this._drawResultTable(view, options) });
+            this._drawResultTable(view, options);
+            return view;
+        }
+
+        _drawResultTable(view, options) {
+            this._fitResultHeight(TableViewChart.heightFor(view, options), options);
+            this._chart3D = false;
+            this._chartState = { type: 'table', data: view.rows, options };
+            this._renderChart(new TableViewChart(this.renderer, view, {
+                ...options,
+                onShowAs: (choice) => this._drawResultChart(view, choice, options),
+            }));
+        }
+
+        _drawResultChart(view, choice, options) {
+            this._fitResultHeight(options.chartHeight ?? 360, options);
+            this.renderChartType(choice.key, choice.data, { title: options.title ?? choice.reason });
+            // The way back, drawn over the chart: the same table, as it was left.
+            if (!this.renderer.supportsSceneGraph) return;
+            const back = this.renderer.text('◂ Table', 8, 14, { fill: '#2b5fd9', fontSize: '12px', verticalAlign: 'middle' });
+            back?.addEventListener?.('click', () => this._drawResultTable(view, options));
+            if (back?.style) back.style.cursor = 'pointer';
+        }
+
+        _fitResultHeight(height, options) {
+            if (options.fitHeight === false || !this.container?.style) return;
+            // min-height as well: in a flex layout (a notebook, a workbench pane) a height alone is
+            // shrunk to fit, and the table drawn into the shrunk box lost its last rows.
+            this.container.style.height = `${height}px`;
+            this.container.style.minHeight = `${height}px`;
+            this.fitToContainer();
+        }
+
         /**
          * Renders a waterfall chart — running-total bars, each floating from the
          * previous cumulative value to the new one (a "delta" bar), except
@@ -50805,6 +51614,7 @@ ${theirs}` : theirs;
     exports.CanvasTemplateMenu = CanvasTemplateMenu;
     exports.CanvasView = CanvasView;
     exports.CatalogDialog = CatalogDialog;
+    exports.ChartChooser = ChartChooser;
     exports.CheckboxTreeSelector = CheckboxTreeSelector;
     exports.CircleMarker = CircleMarker;
     exports.CircleTemplate = CircleTemplate;
@@ -50986,6 +51796,9 @@ ${theirs}` : theirs;
     exports.TREE_LAYERS = TREE_LAYERS;
     exports.TREE_MODE_CATALOG = TREE_MODE_CATALOG;
     exports.TREE_SETTINGS_PROPERTIES = TREE_SETTINGS_PROPERTIES;
+    exports.TableChart = TableChart;
+    exports.TableView = TableView;
+    exports.TableViewChart = TableViewChart;
     exports.Template = Template;
     exports.TemplateCatalog = TemplateCatalog;
     exports.TemplateLibrary = TemplateLibrary;