@peter.prib/renderengine 0.9.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peter.prib/renderengine",
-  "version": "0.9.0",
+  "version": "0.12.0",
   "description": "ArchiMate modeller, diagram editor and chart library for the browser, with no runtime dependencies.",
   "type": "module",
   "main": "src/index.js",
@@ -20,7 +20,7 @@
     "examples/diagram-editor.html",
     "examples/data-model.html",
     "README.md",
-    "REFERENCE.md",
+    "documentation/REFERENCE.md",
     "LICENSE"
   ],
   "scripts": {
@@ -28,7 +28,7 @@
     "archimate": "node scripts/open.mjs examples/archimate.html",
     "diagram": "node scripts/open.mjs examples/diagram-editor.html",
     "datamodel": "node scripts/open.mjs examples/data-model.html",
-    "test": "node --test --test-timeout=10000 ./test/*.js ./test/charting/*.js ./test/charting/charts/*.js ./test/charting/table/*.js ./test/charting/diagrams/*.js ./test/charting/shapes/*.js",
+    "test": "node --test --test-timeout=10000 ./test/*.js ./test/charting/*.js ./test/charting/charts/*.js ./test/charting/table/*.js ./test/charting/pivot/*.js ./test/charting/diagrams/*.js ./test/charting/shapes/*.js",
     "build": "rollup -c",
     "prepublishOnly": "npm test && npm run build",
     "screenshots": "node scripts/screenshots/screenshots.mjs"

package/src/bian.js

@@ -12,7 +12,7 @@
  * (github.com/bian-official/public, Apache-2.0) for the names control records
  * have and, where a pattern aggregates two creating terms (Monitor: evaluate
  * and initiate), the one its APIs use. Every value is BIAN's; `inferred` is
- * kept for a value that is not. See BIAN_ALIGNMENT.md.
+ * kept for a value that is not. See documentation/BIAN_ALIGNMENT.md.
  */
 
 /** One way a service domain behaves: what it does to its asset, and the record it keeps of it. */

package/src/chartCatalog.js

@@ -1,7 +1,7 @@
 // Copyright 2026 Jaroslav Peter Prib, Purveyor of Excellence
 /**
  * Single source of truth for "what chart types does RenderEngine support" —
- * see ARCHITECTURE.md's "Chart-type catalog" section for the full story.
+ * see documentation/ARCHITECTURE.md's "Chart-type catalog" section for the full story.
  *
  * This is not just a flat {key,label} list. Chart types share real,
  * composable capabilities — every one of them takes a title; several accept

package/src/charting/Chart.js

@@ -4,6 +4,10 @@
  * Subclasses implement `_render()` and are instantiated by RenderEngine's
  * chart methods. Keeping each chart in its own class removes the giant
  * RenderEngine God class one chart at a time.
+ *
+ * A chart that draws one mark per value (a bar, a slice, a point) records it with `_datum()`; when
+ * the options carry `onDatumClick(datum, event)` and the renderer's shapes take clicks (SVG), each
+ * such mark answers a click with its datum, `{ label, series }` — how a host drills from a chart.
  */
 export class Chart {
     /** Registry key / catalog key for this chart type. Subclasses override. */
@@ -16,13 +20,34 @@ export class Chart {
         this.renderer = renderer;
         this.data = data;
         this.options = options;
+        /** The marks drawn for values, `{ shape, datum }`, as the last render() drew them. */
+        this.datums = [];
     }
 
     /** Render the chart. Subclasses implement `_render()`. */
     render() {
         if (!this.renderer) return;
         this.renderer.clear();
+        this.datums = [];
         this._render();
+        this._wireDatums();
+    }
+
+    /** Records that `shape` (what the renderer returned) shows one value, `datum` = { label, series? }. */
+    _datum(shape, datum) {
+        this.datums.push({ shape, datum: { series: null, ...datum } });
+        return shape;
+    }
+
+    /** Gives each recorded mark the host's onDatumClick, where the renderer's shapes take clicks. */
+    _wireDatums() {
+        const handler = this.options?.onDatumClick;
+        if (typeof handler !== 'function' || this.renderer.supportsSceneGraph !== true) return;
+        for (const { shape, datum } of this.datums) {
+            if (typeof shape?.addEventListener !== 'function') continue;
+            shape.addEventListener('click', (event) => { event.stopPropagation?.(); handler(datum, event); });
+            if (shape.style) shape.style.cursor = 'pointer';
+        }
     }
 
     /** Subclasses implement the actual drawing here. */

package/src/charting/ChartChooser.js

@@ -186,14 +186,15 @@ class CategorySeries extends ResultShape {
         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 [];
+        // groupedBarChart leaves a gap for a missing value; lineChart has none (a null would have to be
+        // drawn as 0, a figure the data does not hold), so a result with one is offered as bars only.
+        const gaps = rows.some(r => this.numbers.some(n => r[n.name] == null));
         const data = this.numbers.map(n => ({
             name: n.name,
-            values: rows.map(r => ({ label: label(r[category.name]), value: r[n.name] })),
+            values: rows.map(r => ({ label: label(r[category.name]), value: r[n.name] ?? null })),
         }));
         const names = this.numbers.map(n => n.name).join(', ');
+        if (gaps) return [{ key: 'groupedBar', reason: `${names} for each ${category.name} (a gap where there is no value)`, data }];
         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 }];

package/src/charting/Legend.js

@@ -36,6 +36,19 @@ export class Legend {
      * @param {number} drawingWidth - The renderer's width
      * @param {object} options - As the constructor's, without x and y
      */
+    /**
+     * The plot width that leaves room for this legend beside the plot, so it never covers the data:
+     * narrower by as much as the legend would run off the drawing — unless that would leave the plot
+     * under MIN_PLOT_SHARE of its width; then the plot keeps its width and beside() insets the legend.
+     */
+    static plotWidthBeside(box, drawingWidth, options) {
+        const { width } = new Legend({ ...options, x: 0, y: 0 }).size();
+        const over = box.x + box.width + 20 + width - drawingWidth;
+        if (!(drawingWidth > 0) || over <= 0) return box.width;
+        const narrower = box.width - over;
+        return narrower >= box.width * Legend.MIN_PLOT_SHARE ? narrower : box.width;
+    }
+
     static beside(box, drawingWidth, options) {
         const legend = new Legend({ ...options, x: 0, y: 0 });
         const { width } = legend.size();
@@ -99,3 +112,6 @@ export class Legend {
         }
     }
 }
+
+/** The least share of its width a plot keeps when it narrows for a legend beside it. */
+Legend.MIN_PLOT_SHARE = 0.65;

package/src/charting/charts/BarChart.js

@@ -43,7 +43,7 @@ export class BarChart extends BarChartBase {
             const barX = x + i * (bandWidth + margin);
             const barY = y + height - barHeight;
 
-            this.renderer.rect(barX, barY, bandWidth, barHeight, color, null, { bar: true, dataIndex: i, tooltip: `${d.label}: ${d.value}` });
+            this._datum(this.renderer.rect(barX, barY, bandWidth, barHeight, color, null, { bar: true, dataIndex: i, tooltip: `${d.label}: ${d.value}` }), { label: d.label });
             this.renderer.text(String(d.value), barX + bandWidth / 2, barY - 5, { textAnchor, fontSize: '10px', fill: '#333' });
             if (i % labelStep === 0) this.renderer.text(d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
         });

package/src/charting/charts/GroupedBarChart.js

@@ -1,5 +1,7 @@
+import { Axis } from '../Axis.js';
 import { Legend } from '../Legend.js';
 import { BarChartBase } from './BarChartBase.js';
+import { TableChart } from './TableChart.js';
 
 /**
  * GroupedBarChart — vertical grouped (multi-set) bar chart.
@@ -7,7 +9,8 @@ import { BarChartBase } from './BarChartBase.js';
  * Data shape:
  *   Array<{name: string, values: Array<{label: string, value: number}>}>
  *
- * Each category (`label`) gets a cluster of bars side-by-side, one per series.
+ * Each category (`label`) gets a cluster of bars side-by-side, one per series. A value a series does
+ * not have (missing, or null) is a gap in its cluster — no bar — never a bar of zero.
  */
 export class GroupedBarChart extends BarChartBase {
     static chartType = 'groupedBar';
@@ -15,7 +18,7 @@ export class GroupedBarChart extends BarChartBase {
     _computeMaxValue() {
         const series = this.data;
         const rawMax = Math.max(
-            ...series.flatMap(s => s.values.map(v => v.value)),
+            ...series.flatMap(s => s.values.map(v => v.value).filter(v => v != null)),
             1,
         );
         return this._drawYAxis(rawMax);
@@ -32,7 +35,7 @@ export class GroupedBarChart extends BarChartBase {
         const labels = [...new Set(series.flatMap(s => s.values.map(v => v.label)))];
         const categoryCount = labels.length;
 
-        // Build a value lookup so missing labels per series render as 0.
+        // A value lookup per series; a label a series lacks is a gap.
         const valueBySeriesLabel = series.map(s => {
             const map = new Map();
             for (const v of s.values) map.set(v.label, v.value);
@@ -47,26 +50,50 @@ export class GroupedBarChart extends BarChartBase {
         const finalBarWidth = barWidth - barGap;
 
         const textAnchor = this.renderer.centerTextAnchor;
+        // Labels that would overlap: each cut to its cluster ("…") while a cluster has room for a few
+        // characters, so every cluster stays named; past that, every nth label, as BarChart does.
+        const measure = (s) => this.renderer.measureText?.(s, { fontSize: '12px' }) ?? s.length * 12 * 0.55;
+        const room = clusterWidth - 4;
+        const cut = room >= measure('x'.repeat(GroupedBarChart.MIN_LABEL_CHARS));
+        const labelStep = cut ? 1 : Axis.categoryLabelStep(labels, width);
 
         labels.forEach((label, categoryIndex) => {
             const clusterX = x + categoryIndex * clusterWidth + groupGap / 2;
 
             series.forEach((seriesData, seriesIndex) => {
-                const value = valueBySeriesLabel[seriesIndex].get(label) ?? 0;
+                const value = valueBySeriesLabel[seriesIndex].get(label);
+                if (value == null) return;
                 const barHeight = (value / maxValue) * height;
                 const barX = clusterX + seriesIndex * barWidth + barGap / 2;
                 const barY = y + height - barHeight;
                 const color = this._palette.colorAt(seriesIndex);
 
-                this.renderer.rect(barX, barY, finalBarWidth, barHeight, color, null, {
+                this._datum(this.renderer.rect(barX, barY, finalBarWidth, barHeight, color, null, {
                     tooltip: `${seriesData.name} — ${label}: ${value}`,
-                });
+                }), { label, series: seriesData.name });
             });
 
-            this.renderer.text(label, clusterX + availableWidth / 2, y + height + 20, { textAnchor });
+            if (categoryIndex % labelStep === 0) {
+                this.renderer.text(cut ? TableChart.fit(String(label), room, measure) : label, clusterX + availableWidth / 2, y + height + 20, { textAnchor });
+            }
         });
     }
 
+    /** With a legend, the plot leaves room for it beside, so it does not cover the last bars. */
+    _setup() {
+        super._setup();
+        if (this.options.legend && this.options.width === undefined) {
+            this._plotBox.width = Legend.plotWidthBeside(this._plotBox, this.renderer.width, this._legendOptions());
+        }
+    }
+
+    _legendOptions() {
+        return {
+            items: this.data.map((s, i) => ({ label: s.name, color: this._palette.colorAt(i), dataIndex: i })),
+            itemHeight: 20, markerSize: 10,
+        };
+    }
+
     _afterBars() {
         const series = this.data;
         const options = this.options;
@@ -74,15 +101,10 @@ export class GroupedBarChart extends BarChartBase {
         const { legend: showLegend = false } = options;
 
         if (showLegend) {
-            const legendItems = series.map((s, i) => ({
-                label: s.name,
-                color: this._palette.colorAt(i),
-                dataIndex: i,
-            }));
-            Legend.beside({ x, y, width }, this.renderer.width, {
-                items: legendItems,
-                itemHeight: 20, markerSize: 10,
-            }).draw(this.renderer);
+            Legend.beside({ x, y, width }, this.renderer.width, this._legendOptions()).draw(this.renderer);
         }
     }
 }
+
+/** The fewest characters a cut label keeps; clusters narrower than that thin their labels instead. */
+GroupedBarChart.MIN_LABEL_CHARS = 6;

package/src/charting/charts/LineChart.js

@@ -17,15 +17,19 @@ export class LineChart extends Chart {
         const options = this.options;
         const box = ChartBox.fromRenderer(this.renderer);
         const {
-            x = box.x, y = box.y, width = box.width, height = box.height,
+            x = box.x, y = box.y, height = box.height,
             lineColor = 'steelblue', pointColor = '#fff', title, xAxisLabel, yAxisLabel,
             colors, zAxis = false, legend: showLegend = false, depth: zDepth = 20,
         } = options;
-        const plotBox = { x, y, width, height };
 
         // Check if data is multiline (array of series) or single line
         const isMultiline = Array.isArray(data[0]?.values);
         const series = isMultiline ? data : [{ name: 'default', values: data }];
+        const legendOptions = { items: series.map(s => ({ name: s.name })), itemHeight: 20, markerSize: 12 };
+        // With a legend, the plot leaves room for it beside, so it does not cover the last points.
+        const width = options.width ?? (isMultiline && showLegend
+            ? Legend.plotWidthBeside({ x, width: box.width }, this.renderer.width, legendOptions) : box.width);
+        const plotBox = { x, y, width, height };
 
         // Determine max value across all series
         const maxValue = Math.max(...series.flatMap(s =>
@@ -82,13 +86,13 @@ export class LineChart extends Chart {
                 const pointY = y + height - (d.value / maxValue) * height - seriesDepth;
                 const textAnchor = this.renderer.centerTextAnchor;
 
-                this.renderer.circle(
+                this._datum(this.renderer.circle(
                     pointX, pointY,
                     3,
                     seriesColor,
                     { color: pointColor, width: 1.5 },
                     { tooltip: `${isMultiline ? seriesData.name + ': ' : ''}${d.label}: ${d.value}` }
-                );
+                ), { label: d.label, series: isMultiline ? seriesData.name : null });
 
                 const errMinus = d.errorMinus != null ? d.errorMinus : d.error != null ? d.error : null;
                 const errPlus = d.errorPlus != null ? d.errorPlus : d.error != null ? d.error : null;
@@ -118,10 +122,7 @@ export class LineChart extends Chart {
         // Draw legend for multiline
         if (isMultiline && showLegend) {
             const legendItems = series.map((s, i) => ({ name: s.name, color: palette.colorAt(i) }));
-            Legend.beside({ x, y, width }, this.renderer.width, {
-                items: legendItems,
-                itemHeight: 20, markerSize: 12,
-            }).draw(this.renderer);
+            Legend.beside({ x, y, width }, this.renderer.width, { ...legendOptions, items: legendItems }).draw(this.renderer);
         }
     }
 }

package/src/charting/charts/PieChart.js

@@ -33,9 +33,9 @@ export class PieChart extends Chart {
             const slice = (d.value / total) * Math.PI * 2;
             const color = palette.colorAt(i);
             const path = ShapePaths.donutSlicePath(cx, cy, radius, rInner, angle, angle + slice);
-            this.renderer.path(path, color, { color: '#fff', width: 1 }, {
+            this._datum(this.renderer.path(path, color, { color: '#fff', width: 1 }, {
                 tooltip: `${d.label}: ${d.value} (${(d.value / total * 100).toFixed(1)}%)`,
-            });
+            }), { label: d.label });
             angle += slice;
         });
 

package/src/charting/charts/TableChart.js

@@ -85,11 +85,24 @@ export class TableChart extends Chart {
         }
     }
 
+    /**
+     * `text` cut to fit `room` px, ending in "…" when cut, so a long value never draws over the next
+     * column. `measure(s)` gives a string's width; the whole text comes back when it fits.
+     */
+    static fit(text, room, measure) {
+        if (measure(text) <= room) return text;
+        let keep = text.length - 1;
+        while (keep > 0 && measure(text.slice(0, keep) + '…') > room) keep--;
+        return keep > 0 ? text.slice(0, keep) + '…' : '';
+    }
+
     _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,
-        });
+        const style = { textAnchor: end ? 'end' : 'start', verticalAlign: 'middle', fontSize: '12px', ...attrs };
+        const font = { fontSize: style.fontSize, fontWeight: style.fontWeight };
+        const measure = (s) => this.renderer.measureText?.(s, font) ?? s.length * (parseFloat(font.fontSize) || 12) * 0.55;
+        const shown = TableChart.fit(text, colW - 2 * TableChart.PAD_X, measure);
+        return this.renderer.text(shown, end ? left + colW - TableChart.PAD_X : left + TableChart.PAD_X, top + TableChart.ROW_H / 2, style);
     }
 
     _rule(x, y, width) {

package/src/charting/pivot/PivotChart.js

@@ -0,0 +1,50 @@
+import { ChartChooser } from '../ChartChooser.js';
+
+/**
+ * PivotChart — a chart linked to a pivot grid (Alphablox's ChartBlox): it charts what the grid shows
+ * (PivotView.chartData: the members not broken down further, no totals), follows every change to the
+ * grid, and a click on a bar, point or slice drills the grid there (PivotView.drillFrom: expand a
+ * collapsed member, or ask the host to drill a level down). Which chart is ChartChooser's, from the
+ * charts that fit; the chart's own menu changes it. Kept apart from drawing, as PivotView is;
+ * RenderEngine.pivotChart draws it.
+ */
+export class PivotChart {
+    /**
+     * @param {PivotView} view the grid's state
+     * @param {object} [options]
+     * @param {string} [options.type] a catalog key to prefer while it fits (else ChartChooser's best)
+     * @param {ChartChooser} [options.chooser]
+     */
+    constructor(view, { type = null, chooser = null } = {}) {
+        this.view = view;
+        this.type = type;
+        this.chooser = chooser ?? new ChartChooser();
+    }
+
+    /** The charts that fit what the grid shows, best first. The grid itself is the table. */
+    choices() {
+        const { rows, columns, complete } = this.view.chartData();
+        return this.chooser.choose(rows, columns, { complete }).filter(c => c.key !== 'table');
+    }
+
+    /** The chart to draw: the one asked for while it still fits, else the best; null when none fits. */
+    chosen() {
+        const choices = this.choices();
+        return choices.find(c => c.key === this.type) ?? choices[0] ?? null;
+    }
+
+    /** The chart's menu: "Chart as" each chart that fits, the one showing ticked. */
+    menu(redraw) {
+        const current = this.chosen()?.key;
+        return [{
+            label: 'Chart as',
+            items: this.choices().map(c => ({
+                label: `${c.label}${c.key === current ? ' ✓' : ''}`,
+                action: () => { this.type = c.key; redraw(); },
+            })),
+        }];
+    }
+
+    /** A click on a charted value: drill the grid at its member. */
+    click(datum) { return this.view.drillFrom(datum.label); }
+}

package/src/charting/pivot/PivotGridChart.js

@@ -0,0 +1,191 @@
+import { TableChart } from '../charts/TableChart.js';
+import { TableViewChart } from '../table/TableViewChart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { PivotView } from './PivotView.js';
+
+/**
+ * PivotGridChart — a pivot grid drawn from a PivotView's state, whose parts answer clicks: the
+ * column-axis members across the top (spanning the members beneath them), the row-axis members down
+ * the side (indented by level), and the measures in the cells. A member's ▸ / ▾ collapses or expands
+ * it; its label opens its menu (expand, collapse, drill down or up); the corner ⋮ opens the grid's
+ * menu (swap the axes, expand all, copy). Each change goes through the view, whose `onChange` redraws.
+ * With the view's `onLayout`, a layout strip above the grid shows the rows, the columns, the page
+ * filters and the dimensions that may be added, each a chip whose menu moves, filters or removes it.
+ *
+ * It shares the interactive table's drawing and click plumbing (TableViewChart). Interaction needs a
+ * renderer whose shapes are DOM elements (SVG); anywhere else the same grid is drawn without clicks.
+ */
+export class PivotGridChart extends TableViewChart {
+    static INDENT = 14;
+    /** A value column is never narrower: past it the grid is drawn wider than its container, which scrolls. */
+    static MIN_COL_W = 88;
+    /** What a container that scrolls sideways adds for its scrollbar (and its border). */
+    static SCROLLBAR_H = 20;
+    static TOTAL_FILL = '#eef2f8';
+    static EXPANDED = '▾';
+    static COLLAPSED = '▸';
+
+    /** Lines the layout strip takes, when the view's layout is the host's to change. */
+    static layoutLines(view) { return view.onLayout ? 2 : 0; }
+
+    /** The height this draws: title, layout strip, the column headers' lines, a line per row, and a note if any. */
+    static heightFor(view, { title } = {}) {
+        const { top, bottom } = TableChart.margins(title);
+        const notes = (view.unplaced > 0 ? 1 : 0) + (view.lights ? 1 : 0);
+        const lines = PivotGridChart.layoutLines(view) + view.columnHeaders().length + view.visibleRows().length + notes;
+        return top + lines * TableChart.ROW_H + bottom;
+    }
+
+    /** The row headers' width: room for the deepest indent and a label, within a third of the grid. */
+    static rowHeaderWidth(view, width) {
+        const depth = Math.max(0, view.rowAxis.length - 1);
+        return Math.min(Math.max(120, 110 + depth * PivotGridChart.INDENT), 240, Math.max(90, width / 3));
+    }
+
+    /**
+     * The width this draws in a container `available` wide: that width, or wider when the value
+     * columns would otherwise be narrower than MIN_COL_W (a value cut short would mislead).
+     */
+    static widthFor(view, available) {
+        const { left, right } = TableChart.margins();
+        const columns = view.visibleColumns().length;
+        let width = available;
+        for (let pass = 0; pass < 2; pass++) {   // the side's width depends on the total; twice settles it
+            width = Math.max(available, left + right + PivotGridChart.rowHeaderWidth(view, width) + columns * PivotGridChart.MIN_COL_W);
+        }
+        return width;
+    }
+
+    _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 lines = view.columnHeaders();
+        const columns = view.visibleColumns();
+        const sideW = PivotGridChart.rowHeaderWidth(view, box.width);
+        const colW = Math.max(PivotGridChart.MIN_COL_W, columns.length > 0 ? (box.width - sideW) / columns.length : box.width - sideW);
+        const x0 = box.x + sideW;
+        const end = { align: 'end' };
+
+        new ChartLabels({ title }).draw(this.renderer, { x: box.x, y: box.y, width: box.width, height: box.height });
+
+        // The corner: the grid's menu, and what each axis holds.
+        let top = box.y;
+        if (view.onLayout) top = this._layoutStrip(box, top, interactive);
+        const corner = this.renderer.rect(box.x, top, sideW, lines.length * ROW_H, TableChart.HEADER_FILL, null);
+        const glyph = this._text(TableViewChart.TABLE_GLYPH, box.x + PAD_X + 2, top, { textAnchor: 'middle', fontWeight: 'bold', fill: '#555' });
+        this._on(interactive, [corner, glyph], (e) => this.showMenu(e.clientX, e.clientY, view.gridMenu()), 'Grid menu');
+        if (view.columnAxis.length > 0 && lines.length > 1) {
+            this._cell(view.columnAxis.join(' › '), end, box.x + 16, top, sideW - 16, { fill: '#666', fontSize: '11px' });
+        }
+        if (view.rowAxis.length > 0) {
+            this._cell(view.rowAxis.join(' › '), {}, box.x + 12, top + (lines.length - 1) * ROW_H, sideW - 12, { fontWeight: 'bold', fill: '#333' });
+        }
+
+        // The column headers: a line per level, a member spanning the columns beneath it.
+        for (const line of lines) {
+            let left = x0;
+            for (const cell of line) {
+                const w = cell.span * colW;
+                this.renderer.rect(left, top, w, ROW_H, TableChart.HEADER_FILL, null);
+                this._member('columns', cell.node, cell.text, left, top, w, interactive, { fontWeight: 'bold', fill: '#333' });
+                left += w;
+            }
+            top += ROW_H;
+            this._rule(box.x, top, box.width);
+        }
+
+        // The rows: a member (indented, with its ▸ / ▾) and its cells; members with members below are totals.
+        const cuts = view.lights && view.lights !== 'rules' ? view.thirds() : null;   // once per drawing, not per cell
+        view.visibleRows().forEach(({ node, depth }, r) => {
+            const total = node.children.size > 0 || node.path.length === 0;
+            if (total) this.renderer.rect(box.x, top, box.width, ROW_H, PivotGridChart.TOTAL_FILL, null);
+            else if (r % 2 === 1) this.renderer.rect(box.x, top, box.width, ROW_H, TableChart.STRIPE_FILL, null);
+            const indent = node.path.length === 0 ? 0 : depth * PivotGridChart.INDENT;
+            const weight = total ? { fontWeight: 'bold' } : {};
+            this._member('rows', node.path.length === 0 ? null : node, PivotView.label(node), box.x + indent, top, sideW - indent, interactive, { fill: '#222', ...weight });
+            columns.forEach((c, i) => {
+                const lit = view.cellFill(node, c, cuts);
+                if (lit) this.renderer.rect(x0 + i * colW + 1, top + 1, colW - 2, ROW_H - 2, lit, null);
+                const row = view.cell(node, c.node);
+                const text = row === null ? '' : TableChart.cellText(row[c.measure], nullText);
+                const shown = this._cell(text, end, x0 + i * colW, top, colW, { fill: row?.[c.measure] == null ? '#999' : '#222', ...weight });
+                // A cell with a value opens its menu (drill-through) where the host gives one.
+                if (row !== null && view.cellHasMenu()) {
+                    const hit = this.renderer.rect(x0 + i * colW, top, colW, ROW_H, 'transparent', null);
+                    this._on(interactive, [hit, shown], (e) => this.showMenu(e.clientX, e.clientY, view.cellMenu(node, c)), 'Cell menu');
+                }
+            });
+            top += ROW_H;
+            this._rule(box.x, top, box.width);
+        });
+
+        if (view.unplaced > 0) {
+            this._text(`${view.unplaced} row(s) total an outer level but not an inner one, and are not shown`, box.x + PAD_X, top,
+                { textAnchor: 'start', fill: '#888', fontSize: '11px' });
+            top += ROW_H;
+        }
+        const legend = view.lightsLegend();
+        if (legend) this._text(legend, box.x + PAD_X, top, { textAnchor: 'start', fill: '#666', fontSize: '11px' });
+    }
+
+    /**
+     * The layout strip: "Rows" and "Columns" with their dimensions, then "Filters" (each held to a
+     * member, or All) and "Add" (the dimensions not placed). Each dimension is a chip; a click opens
+     * its layout menu. Returns where the grid starts.
+     */
+    _layoutStrip(box, top, interactive) {
+        const { view } = this;
+        const zones = [
+            [['Rows', view.rowAxis.map(d => [d, d + view.memberFilterText(d)])], ['Columns', view.columnAxis.map(d => [d, d + view.memberFilterText(d)])]],
+            [['Filters', view.pageAxis.map(p => [p.dimension, `${p.dimension}: ${p.value === null ? 'All' : TableChart.cellText(p.value)}`])],
+                ['Add', view.addable().map(d => [d, `+ ${d}`])]],
+        ];
+        const measure = (s) => this.renderer.measureText?.(s, { fontSize: '12px' }) ?? s.length * 12 * 0.55;
+        for (const line of zones) {
+            let x = box.x + TableChart.PAD_X;
+            for (const [name, chips] of line) {
+                this._text(name, x, top, { textAnchor: 'start', fill: '#666', fontSize: '11px', fontWeight: 'bold' });
+                x += measure(name) + 8;
+                if (chips.length === 0) {
+                    this._text('—', x, top, { textAnchor: 'start', fill: '#aaa' });
+                    x += 16;
+                }
+                for (const [dimension, text] of chips) {
+                    const label = `${text} ▾`;
+                    const w = measure(label) + 14;
+                    const chip = this.renderer.rect(x, top + 3, w, TableChart.ROW_H - 6, PivotGridChart.TOTAL_FILL, { color: '#c5cde0', width: 1 });
+                    const t = this._text(label, x + 7, top, { textAnchor: 'start', fill: '#2b3f66' });
+                    this._on(interactive, [chip, t], (e) => this.showMenu(e.clientX, e.clientY, view.layoutMenu(dimension)), `${dimension}: move, filter or remove`);
+                    x += w + 6;
+                }
+                x += 18;
+            }
+            top += TableChart.ROW_H;
+        }
+        return top;
+    }
+
+    /**
+     * A member's header: ▸ / ▾ when it can collapse onto its total (a click toggles it), then its label
+     * (a click opens its menu). Without a member (a total's or a blank header) just the text.
+     */
+    _member(axis, node, text, left, top, width, interactive, attrs) {
+        const { PAD_X } = TableChart;
+        if (node === null) {
+            this._cell(text, {}, left, top, width, attrs);
+            return;
+        }
+        // Room for the ▸ / ▾ on every member, so a level down is indented whether or not it has one.
+        const labelLeft = left + 14;
+        if (this.view.collapsible(node)) {
+            const sign = this.view.isCollapsed(axis, node) ? PivotGridChart.COLLAPSED : PivotGridChart.EXPANDED;
+            const toggle = this._text(sign, left + PAD_X + 3, top, { textAnchor: 'middle', fill: '#555' });
+            this._on(interactive, [toggle], () => this.view.toggle(axis, node), this.view.isCollapsed(axis, node) ? 'Expand' : 'Collapse');
+        }
+        const label = this._cell(text, {}, labelLeft, top, width - (labelLeft - left), attrs);
+        this._on(interactive, [label], (e) => this.showMenu(e.clientX, e.clientY, this.view.memberMenu(axis, node)), `${text} menu`);
+    }
+}