@peter.prib/renderengine 0.12.0 → 0.14.0

package/src/charting/charts/StackedBarChart3DOrbit.js

@@ -43,13 +43,16 @@ export class StackedBarChart3DOrbit extends Chart3D {
                 const segHeight = bar.d.values[j] / stackMax;
                 const y0 = yCursor, y1 = yCursor + segHeight;
                 yCursor = y1;
-                this.drawBox(this.renderer, bar.x0, bar.x1, y0, y1, bar.z0, bar.z1, palette.colorAt(j), toScreen);
+                const series = options.seriesLabels?.[j] ?? `Series ${j + 1}`;
+                this.drawBox(this.renderer, bar.x0, bar.x1, y0, y1, bar.z0, bar.z1, palette.colorAt(j), toScreen, {
+                    label: bar.d.x, series, x: bar.d.x, z: bar.d.z,
+                });
             }
         }
 
         const maxSegments = Math.max(...data.map(d => d.values.length));
         new Legend({
-            items: Array.from({ length: maxSegments }, (_, j) => ({ label: `Series ${j + 1}`, color: palette.colorAt(j) })),
+            items: Array.from({ length: maxSegments }, (_, j) => ({ label: options.seriesLabels?.[j] ?? `Series ${j + 1}`, color: palette.colorAt(j) })),
             x: bx + width - 100, y: by + 5, itemHeight: 18, fontSize: '11px', marker: 'circle',
         }).draw(this.renderer);
     }

package/src/charting/charts/StreamGraphChart.js

@@ -108,6 +108,14 @@ export class StreamGraphChart extends Chart {
             const path = StreamGraphChart.areaPath(topPts, bottomPts, smooth, tension);
             const { r, g, b: bl } = palette.hexToRgb(color);
             this.renderer.path(path, `rgba(${r},${g},${bl},0.75)`, { color: color, width: 1 }, { tooltip: s.name });
+            if (typeof this.renderer.circle === 'function') {
+                topPts.forEach((p, i) => {
+                    const d = s.values[i];
+                    this._datum(this.renderer.circle(p.x, p.y, 3, color, { color: '#fff', width: 1 }, {
+                        tooltip: `${isMultiline ? s.name + ': ' : ''}${d.label}: ${d.value}`,
+                    }), { label: d.label, series: isMultiline ? s.name : null });
+                });
+            }
         });
 
         // X-axis labels.

package/src/charting/charts/SunburstChart.js

@@ -37,9 +37,9 @@ export class SunburstChart extends HierarchyChart {
             const textColor = this._textColorForNode(topAncestor, depth);
 
             const path = ShapePaths.donutSlicePath(ecx, ecy, rOuter, rInner, startAngle, endAngle);
-            this.renderer.path(path, color, { color: '#fff', width: 1 }, {
+            this._datum(this.renderer.path(path, color, { color: '#fff', width: 1 }, {
                 tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
-            });
+            }), { label: node.label });
 
             if (endAngle - startAngle > 0.35) {
                 const midAngle = (startAngle + endAngle) / 2;

package/src/charting/charts/TableChart.js

@@ -46,14 +46,30 @@ export class TableChart extends Chart {
         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 = '—') {
+    /**
+     * A cell's text: a number exactly (to at most 4 decimals), null/undefined as `nullText`. With a
+     * `format` (`formatFor`'s), a number is written by it instead.
+     */
+    static cellText(value, nullText = '—', format = null) {
         if (value == null) return nullText;
+        if (typeof value === 'number' && format) return String(typeof format === 'function' ? format(value) : format.format(value));
         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);
     }
 
+    /**
+     * The number format for one column or measure, from a view's `format` option: a function
+     * (number → text) or an `Intl.NumberFormat` for every number, or an object naming either per
+     * column (`{ Amount: new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }) }`),
+     * where a column it does not name keeps the plain text. Null when there is none.
+     */
+    static formatFor(format, name) {
+        if (!format) return null;
+        if (typeof format === 'function' || format instanceof Intl.NumberFormat) return format;
+        return format[name] ?? null;
+    }
+
     _render() {
         const data = this.data ?? [];
         const box = ChartBox.fromRenderer(this.renderer, TableChart.margins(this.options.title));

package/src/charting/charts/TreemapChart.js

@@ -27,9 +27,9 @@ export class TreemapChart extends HierarchyChart {
             const textColor = this._textColorForNode(topAncestor, depth);
 
             if (isLeaf) {
-                this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), color, { color: '#fff', width: 1 }, {
+                this._datum(this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), color, { color: '#fff', width: 1 }, {
                     tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
-                });
+                }), { label: node.label });
                 if (rw > 30 && rh > 14) {
                     this.renderer.text(node.label, rx + rw / 2, ry + rh / 2, {
                         textAnchor, verticalAlign: 'middle', fontSize: '10px', fill: textColor, 'pointer-events': 'none',
@@ -38,9 +38,9 @@ export class TreemapChart extends HierarchyChart {
             } else {
                 const headerH = Math.min(rh, TreemapChart.HEADER_H);
                 this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), 'rgba(0,0,0,0.03)', { color: '#ddd', width: 1 });
-                this.renderer.rect(rx, ry, Math.max(0, rw), headerH, color, null, {
+                this._datum(this.renderer.rect(rx, ry, Math.max(0, rw), headerH, color, null, {
                     tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
-                });
+                }), { label: node.label });
                 if (rw > 30) {
                     this.renderer.text(node.label, rx + 4, ry + headerH / 2, {
                         textAnchor: 'start', verticalAlign: 'middle', fontSize: '9px', fontWeight: 'bold', fill: textColor, 'pointer-events': 'none',

package/src/charting/charts/ViolinChart.js

@@ -27,9 +27,9 @@ export class ViolinChart extends GroupedDistributionChart {
         const leftPts = curve.map(p => ({ px: cx - (p.density / maxDensity) * halfWidth, py: this._toY(p.x) }));
         const path = 'M' + rightPts.map(p => `${p.px},${p.py}`).join(' L')
             + ' L' + [...leftPts].reverse().map(p => `${p.px},${p.py}`).join(' L') + ' Z';
-        this.renderer.path(path, color, { color: '#333', width: 1 }, {
+        this._datum(this.renderer.path(path, color, { color: '#333', width: 1 }, {
             tooltip: `${d.label}: n=${d.values.length}`,
-        });
+        }), { label: d.label, series: d.label });
 
         const median = Statistics.quantile([...d.values].sort((a, b) => a - b), 0.5);
         this.renderer.path(`M${cx - halfWidth},${this._toY(median)} L${cx + halfWidth},${this._toY(median)}`, 'none', { color: '#fff', width: 2 });

package/src/charting/charts/WaterfallChart.js

@@ -58,9 +58,9 @@ export class WaterfallChart extends Chart {
             const top = toY(Math.max(band.from, band.to));
             const bottom = toY(Math.min(band.from, band.to));
             const color = band.isTotal ? totalColor : (band.to >= band.from ? upColor : downColor);
-            this.renderer.rect(barX, top, barWidth, Math.max(1, bottom - top), color, null, {
+            this._datum(this.renderer.rect(barX, top, barWidth, Math.max(1, bottom - top), color, null, {
                 tooltip: `${d.label}: ${band.isTotal ? band.to : (d.value >= 0 ? '+' : '') + d.value} (total: ${Axis.formatValue(band.to)})`,
-            });
+            }), { label: d.label });
             if (i % labelStep === 0) this.renderer.text(d.label, barX + barWidth / 2, y + height + 20, { textAnchor, fontSize: '10px' });
         });
     }

package/src/charting/charts/WordCloudChart.js

@@ -66,10 +66,10 @@ export class WordCloudChart extends Chart {
             if (!pos) return; // Could not place; skip.
             placed.push({ x: pos.x, y: pos.y, w: box.w, h: box.h });
             const color = palette.colorAt(i);
-            this.renderer.text(d.text, pos.x, pos.y + fontSize * 0.35, {
+            this._datum(this.renderer.text(d.text, pos.x, pos.y + fontSize * 0.35, {
                 textAnchor, fontSize: `${fontSize}px`, fill: color, fontFamily,
                 tooltip: `${d.text}: ${d.value}`,
-            });
+            }), { label: d.text });
         });
     }
 

package/src/charting/diagrams/ArchimateModel.js

@@ -8,6 +8,7 @@ import { ArchimateModelChecker } from './ArchimateModelChecker.js';
 import { ArchimateModelReport } from './ArchimateModelReport.js';
 import { ArchimateModelSearch } from './ArchimateModelSearch.js';
 import { MergeElementsCommand } from './MergeElementsCommand.js';
+import { DeleteFromModelCommand } from './DeleteFromModelCommand.js';
 import { ElementsCompared, RelationshipsCompared } from './ConceptsCompared.js';
 import { ArchimateViewsCompared } from './ArchimateViewsCompared.js';
 import { roadmapPlan, parseDate } from './roadmap.js';
@@ -244,6 +245,38 @@ export class ArchimateModel extends ViewSetModel {
         return new MergeElementsCommand(this, keepId, otherIds, choices);
     }
 
+    /**
+     * Where elements are used, so deleting them from the model can say what goes
+     * with them: the views drawing them (with how many boxes on each), and the
+     * relationships that go too — each one ending on one of them, and each one
+     * ending on such a relationship, and so on.
+     * @param {Array<string>} elementIds
+     * @returns {{views: Array<{view: ArchimateView, boxes: number}>, relationships: Array<Object>}}
+     */
+    usage(elementIds) {
+        const gone = new Set(elementIds);
+        const relationships = [];
+        for (let grew = true; grew;) {
+            grew = false;
+            for (const rel of this.relationships()) {
+                if (!gone.has(rel.id) && (gone.has(rel.source) || gone.has(rel.target))) {
+                    gone.add(rel.id);
+                    relationships.push(rel);
+                    grew = true;
+                }
+            }
+        }
+        const views = this.views()
+            .map(view => ({ view, boxes: [...(view.elementInstances?.values() ?? [])].filter(i => elementIds.includes(i.elementId)).length }))
+            .filter(v => v.boxes > 0);
+        return { views, relationships };
+    }
+
+    /** Take elements out of the model, with their relationships and everything drawing them (not yet executed). */
+    deleteFromModelCommand(elementIds) {
+        return new DeleteFromModelCommand(this, elementIds);
+    }
+
     /** Two models are compared on, and merged by, their elements, relationships and views (in the order brought). */
     comparedKinds() {
         return [new ElementsCompared(), new RelationshipsCompared(), new ArchimateViewsCompared()];

package/src/charting/diagrams/DeleteFromModelCommand.js

@@ -0,0 +1,81 @@
+import { Command } from '../CommandHistory.js';
+
+/**
+ * DeleteFromModelCommand — elements taken out of the model (Archi's "Delete
+ * from Model"), not just off one view: their relationships go too (and any
+ * relationship ending on one of those), and with them every box and line
+ * drawing them on every view, and every view's own line (a connection) to
+ * one of those boxes. Undo puts everything back as it was, ids and all.
+ *
+ * What goes is ArchimateModel#usage's: say it before asking.
+ */
+export class DeleteFromModelCommand extends Command {
+    /**
+     * @param {ArchimateModel} model
+     * @param {Array<string>} elementIds
+     */
+    constructor(model, elementIds) {
+        const ids = elementIds.filter(id => model.getElement(id));
+        const first = model.getElement(ids[0]);
+        super(ids.length === 1 ? `Delete "${first?.name || ids[0]}" from model` : `Delete ${ids.length} elements from model`);
+        this.model = model;
+        this.elementIds = ids;
+        this._before = null;
+    }
+
+    execute() {
+        const { model } = this;
+        if (!this.elementIds.length) return;
+        this._before = this._snapshot();
+        const { relationships } = model.usage(this.elementIds);
+        const goneElements = new Set(this.elementIds);
+        const goneRelationships = new Set(relationships.map(r => r.id));
+        for (const view of model.views()) {
+            if (Array.isArray(view.elementIds)) view.elementIds = view.elementIds.filter(id => !goneElements.has(id));
+            const goneBoxes = new Set();
+            for (const inst of [...(view.elementInstances?.values() ?? [])]) {
+                if (goneElements.has(inst.elementId)) { goneBoxes.add(inst.id); view.elementInstances.delete(inst.id); }
+            }
+            for (const inst of [...(view.relationshipInstances?.values() ?? [])]) {
+                if (goneRelationships.has(inst.relationshipId)) view.relationshipInstances.delete(inst.id);
+            }
+            for (const line of [...(view.viewConnections?.values() ?? [])]) {
+                if (goneBoxes.has(line.sourceInstanceId) || goneBoxes.has(line.targetInstanceId)) view.viewConnections.delete(line.id);
+            }
+        }
+        for (const id of goneRelationships) model.removeRelationship(id);
+        for (const id of goneElements) model.removeElement(id);
+    }
+
+    undo() {
+        if (!this._before) return;
+        const { model } = this;
+        const b = this._before;
+        model._elements = new Map(b.elements);
+        model._elementFolder = new Map(b.folders);
+        model._relationships = new Map(b.relationships);
+        for (const v of b.views) {
+            v.view.elementIds = v.elementIds;
+            if (v.instances) v.view.elementInstances = new Map(v.instances);
+            if (v.lines) v.view.relationshipInstances = new Map(v.lines);
+            if (v.connections) v.view.viewConnections = new Map(v.connections);
+        }
+    }
+
+    /** Everything the delete changes, to put back (the objects themselves, so ids and state are kept). @private */
+    _snapshot() {
+        const { model } = this;
+        return {
+            elements: [...model._elements],
+            folders: [...model._elementFolder],
+            relationships: [...model._relationships],
+            views: model.views().map(view => ({
+                view,
+                elementIds: Array.isArray(view.elementIds) ? [...view.elementIds] : view.elementIds,
+                instances: view.elementInstances ? [...view.elementInstances] : null,
+                lines: view.relationshipInstances ? [...view.relationshipInstances] : null,
+                connections: view.viewConnections ? [...view.viewConnections] : null,
+            })),
+        };
+    }
+}

package/src/charting/diagrams/EdgeGeometry.js

@@ -91,6 +91,22 @@ export class EdgeGeometry {
         return denom > 0 ? 1 / denom : Math.max(hw, hh);
     }
 
+    /** Pure. Where two boxes ({left, top, right, bottom}) face each other
+     *  across a gap with their x ranges (or y ranges) overlapping, the
+     *  shortest line between them runs straight across, at the middle of the
+     *  overlap: `{axis: 'v', at: x, forward}` (a vertical line, `forward` when
+     *  `a` is above `b`) or `{axis: 'h', at: y, forward}` (`a` left of `b`).
+     *  Null when they overlap neither way, or each other. */
+    static acrossOverlap(a, b) {
+        const left = Math.max(a.left, b.left), right = Math.min(a.right, b.right);
+        const top = Math.max(a.top, b.top), bottom = Math.min(a.bottom, b.bottom);
+        const apartV = a.bottom <= b.top || b.bottom <= a.top;
+        const apartH = a.right <= b.left || b.right <= a.left;
+        if (left < right && apartV) return { axis: 'v', at: (left + right) / 2, forward: a.bottom <= b.top };
+        if (top < bottom && apartH) return { axis: 'h', at: (top + bottom) / 2, forward: a.right <= b.left };
+        return null;
+    }
+
     /** Pure. Anchor for one end of an edge. A node that knows its own outline
      *  supplies `info.boundaryPoint(dx, dy) → {x, y}` (DiagramEditor templates
      *  do, rotation included), and the anchor is where the ray toward the other

package/src/charting/edgeStyle/EdgeStyleSchema.js

@@ -20,8 +20,12 @@ export const EDGE_STYLE_PROPERTIES = Object.freeze([
         choices: [['straight', 'Straight'], ['orthogonal', 'Orthogonal'], ['curved', 'Curved'], ['polyline', 'Around shapes']],
     },
     {
-        key: 'attach', label: 'Attach to', type: 'select', default: 'floating',
-        choices: [['floating', 'Outline, aimed at the other end'], ['sides', 'Middle of the facing side']],
+        key: 'attach', label: 'Attach to', type: 'select', default: 'shortest',
+        choices: [
+            ['shortest', 'Shortest: straight across where the shapes overlap, else aimed at the other end'],
+            ['floating', 'Outline, aimed at the other end'],
+            ['sides', 'Middle of the facing side'],
+        ],
     },
     {
         key: 'lineStyle', label: 'Line', type: 'select', default: 'solid',

package/src/charting/pivot/PivotChart.js

@@ -23,8 +23,182 @@ export class PivotChart {
 
     /** 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');
+        const chartData = this.view.chartData();
+        const { rows, columns, complete } = chartData;
+        const base = this.chooser.choose(rows, columns, { complete }).filter(c => c.key !== 'table');
+        const seen = new Set(base.map(c => c.key));
+        const extra = this._cubeChoices(chartData).filter(c => !seen.has(c.key) && this.chooser.registry.get(c.key));
+        return [...base, ...extra];
+    }
+
+    /**
+     * Additional chart types suited to a cube's hierarchy, series, and matrix structure beyond the
+     * general flat-table defaults in `ChartChooser`.
+     */
+    _cubeChoices({ rows, columns, complete, hierarchy, rowTotals = null, primaryMeasure = null }) {
+        if (!rows || rows.length === 0) return [];
+        const categories = columns.filter(c => c.kind !== 'numeric');
+        const numbers = columns.filter(c => c.kind === 'numeric');
+        if (categories.length !== 1 || numbers.length === 0) return [];
+        const category = categories[0];
+        const add = (key, reason, data, options) => ({
+            key,
+            label: this.chooser.registry.get(key)?.label ?? key,
+            reason,
+            data,
+            ...(options ? { options } : {}),
+        });
+        const out = [];
+
+        if (numbers.length === 1) {
+            const number = numbers[0];
+            const points = rows.filter(r => r[number.name] != null).map(r => ({
+                label: String(r[category.name]),
+                value: r[number.name],
+            }));
+            if (points.length < 2) return out;
+            this._addSingleSeriesChoices(out, add, category, number, points, complete, hierarchy, false);
+            return out;
+        }
+
+        // Multi-series (2+ numeric series from column-axis members or multiple measures).
+        const gaps = rows.some(r => numbers.some(n => r[n.name] == null));
+        if (gaps) return out;
+
+        const names = numbers.map(n => n.name).join(', ');
+        const seriesData = numbers.map(n => ({
+            name: n.name,
+            values: rows.map(r => ({ label: String(r[category.name]), value: r[n.name] })),
+        }));
+        const allNonNeg = rows.every(r => numbers.every(n => r[n.name] >= 0));
+        const additiveNonNeg = allNonNeg && numbers.every(n => n.measure !== 'semi-additive' && n.measure !== 'non-additive');
+
+        if (additiveNonNeg) {
+            out.push(add('stackedBar', `${names} stacked for each ${category.name}`, seriesData));
+            out.push(add('marimekko', `${names} share and total across ${category.name}, as a Marimekko mosaic`, seriesData));
+        }
+        out.push(add('lollipop', `${names} for each ${category.name}, as stems and dots`, seriesData));
+        if (allNonNeg && rows.length >= 2) {
+            out.push(add('area', `${names} across ${category.name}, filled`, seriesData));
+        }
+        if (additiveNonNeg && rows.length >= 2) {
+            out.push(add('stackedArea', `${names} stacked across ${category.name}`, seriesData));
+            out.push(add('streamGraph', `${names} flowing across ${category.name}`, seriesData));
+        }
+        if (allNonNeg && rows.length >= 2) {
+            out.push(add('pipe', `${names} tapering across ${category.name}`, seriesData.map(s => ({
+                name: s.name,
+                values: s.values.map(v => ({ label: v.label, value: v.value, metric: v.value })),
+            }))));
+        }
+        const heatData = rows.flatMap(r => numbers.map(n => ({
+            x: String(r[category.name]),
+            y: n.name,
+            value: r[n.name],
+        })));
+        out.push(add('heatmap', `${names} for each ${category.name}, as a colour grid`, heatData));
+        if (allNonNeg && rows.length >= 3 && rows.length <= 12) {
+            out.push(add('radar', `${names} across ${category.name} axes`, seriesData.map(s => ({
+                name: s.name,
+                values: s.values.map(v => ({ axis: v.label, value: v.value })),
+            }))));
+        }
+        if (rows.length >= 2) {
+            out.push(add('parallelCoordinates', `${names} across parallel axes for each ${category.name}`,
+                rows.map(r => ({
+                    label: String(r[category.name]),
+                    category: String(r[category.name]),
+                    ...Object.fromEntries(numbers.map(n => [n.name, r[n.name]])),
+                })),
+                { dimensions: numbers.map(n => n.name) }));
+            if (allNonNeg) {
+                out.push(add('populationPyramid', `${numbers[0].name} vs ${numbers[1].name} for each ${category.name}`,
+                    rows.map(r => ({ label: String(r[category.name]), left: r[numbers[0].name], right: r[numbers[1].name] })),
+                    { leftLabel: numbers[0].name, rightLabel: numbers[1].name, showValues: true }));
+                const flowLinks = rows.flatMap(r => numbers
+                    .filter(n => r[n.name] > 0)
+                    .map(n => ({ source: String(r[category.name]), target: n.name, value: r[n.name] })));
+                if (flowLinks.length > 0) {
+                    out.push(add('sankey', `flow from ${category.name} to ${names}`, { links: flowLinks }));
+                    out.push(add('chord', `chords between ${category.name} and ${names}`, { links: flowLinks }));
+                }
+            }
+            if (rows.length >= 3) {
+                const distData = numbers.map(n => ({ label: n.name, values: rows.map(r => r[n.name]) }));
+                out.push(add('boxPlot', `distribution of ${category.name} values for each of ${names}`, distData));
+                out.push(add('density', `density curve of ${category.name} values for each of ${names}`, distData));
+                out.push(add('violin', `violin distribution of ${category.name} values for each of ${names}`, distData));
+            }
+            out.push(add('scatter', `${numbers[0].name} against ${numbers[1].name} for each ${category.name}`,
+                rows.map(r => ({ x: r[numbers[0].name], y: r[numbers[1].name], label: String(r[category.name]) }))));
+            if (numbers.length >= 3 || (rowTotals && rowTotals.length === rows.length)) {
+                out.push(add('bubble', `${numbers[0].name} and ${numbers[1].name} sized by ${numbers[2]?.name ?? (primaryMeasure?.name || 'Total')}`,
+                    rows.map((r, idx) => ({
+                        x: r[numbers[0].name],
+                        y: r[numbers[1].name],
+                        z: Math.max(1, numbers[2] ? r[numbers[2].name] : rowTotals[idx].value),
+                        label: String(r[category.name]),
+                    }))));
+            }
+        }
+        if (allNonNeg) {
+            out.push(add('bar3DOrbit', `${names} for each ${category.name}, in 3D`,
+                rows.flatMap(r => numbers.map(n => ({ x: String(r[category.name]), z: n.name, value: r[n.name] })))));
+        }
+        if (additiveNonNeg) {
+            out.push(add('stackedBar3DOrbit', `${names} stacked for each ${category.name}, in 3D`,
+                rows.map(r => ({ x: String(r[category.name]), z: category.name, values: numbers.map(n => r[n.name]) })),
+                { seriesLabels: numbers.map(n => n.name) }));
+        }
+        if (rowTotals && rowTotals.length >= 2 && primaryMeasure) {
+            this._addSingleSeriesChoices(out, add, category, primaryMeasure, rowTotals, complete, hierarchy, true);
+        }
+        return out;
+    }
+
+    _addSingleSeriesChoices(out, add, category, number, points, complete, hierarchy, includeBase = false) {
+        const nonNeg = points.every(d => d.value >= 0);
+        if (includeBase) {
+            out.push(add('bar', `total ${number.name} for each ${category.name}`, points));
+            if (nonNeg && complete && number.measure === 'additive' && points.length <= 8) {
+                out.push(add('pie', `share of total ${number.name} across ${category.name}`, points));
+                out.push(add('donut', `share of total ${number.name} across ${category.name}, as a ring`, points));
+            }
+        }
+        if (hierarchy) {
+            out.push(add('treemap', `${number.name} across the ${category.name} hierarchy`, hierarchy.tree));
+            out.push(add('sunburst', `${number.name} across the ${category.name} hierarchy, in rings`, hierarchy.tree));
+            out.push(add('icicle', `${number.name} across the ${category.name} hierarchy, as an icicle partition`, hierarchy.tree));
+            out.push(add('outline', `${number.name} across the ${category.name} hierarchy, as an outline`, hierarchy.tree));
+        }
+        if (number.measure === 'additive') {
+            out.push(add('waterfall', `how each ${category.name} adds to ${number.name}`, points));
+            if (nonNeg && complete) {
+                out.push(add('pareto', `cumulative share of ${number.name} across ${category.name}`, points));
+            }
+        }
+        if (!includeBase) {
+            out.push(add('lollipop', `${number.name} for each ${category.name}, as stems and dots`, points));
+            if (nonNeg && points.length >= 2) {
+                out.push(add('pipe', `${number.name} tapering across ${category.name}`,
+                    points.map(d => ({ label: d.label, value: d.value, metric: d.value }))));
+            }
+        }
+        if (nonNeg && points.length <= 12) {
+            out.push(add('funnel', `${number.name} across ${category.name} stages`, points));
+            out.push(add('radialBar', `${number.name} for each ${category.name}, around a circle`, points));
+            if (!includeBase && points.length >= 3) {
+                out.push(add('radar', `${number.name} across ${category.name} axes`, points.map(d => ({ axis: d.label, value: d.value }))));
+            }
+            out.push(add('wordCloud', `${category.name} sized by ${number.name}`, points.map(d => ({ text: d.label, value: d.value }))));
+            out.push(add('bar3D', `${number.name} for each ${category.name}, in 3D`, points));
+        }
+        if (points.length >= 3) {
+            const sample = points.map(d => d.value);
+            out.push(add('histogram', `frequency distribution of ${number.name} across ${category.name}`, sample));
+            out.push(add('qq', `normal Q-Q plot of ${number.name} across ${category.name}`, sample));
+            out.push(add('lag', `lag-1 autocorrelation of ${number.name} across ${category.name}`, sample));
+        }
     }
 
     /** The chart to draw: the one asked for while it still fits, else the best; null when none fits. */
@@ -33,18 +207,36 @@ export class PivotChart {
         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) {
+    /** Sets the preferred chart type key (e.g. `'stackedBar'`, `'line'`, `'bar'`, `'pareto'`) and redraws if attached. */
+    setType(type) {
+        this.type = type;
+        this.redraw?.();
+        return this.chosen();
+    }
+
+    /** The chart's menu: "Chart as" each chart that fits (plus quick top-level items), the one showing ticked. */
+    menu(redraw = () => this.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(); },
-            })),
-        }];
+        const all = this.choices();
+        const toItem = (c) => ({
+            label: `${c.label}${c.key === current ? ' ✓' : ''}`,
+            action: () => { this.type = c.key; redraw(); },
+        });
+        const quickKeys = new Set([
+            'groupedBar', 'stackedBar', 'bar', 'line', 'area', 'stackedArea',
+            'pareto', 'waterfall', 'marimekko', 'lollipop', 'heatmap', 'radar',
+            'treemap', 'sunburst', 'icicle', 'sankey', 'pie', 'donut',
+        ]);
+        const quickItems = all.filter(c => quickKeys.has(c.key)).map(toItem);
+        return [
+            {
+                label: 'Chart as',
+                items: all.map(toItem),
+            },
+            ...(quickItems.length > 0 ? [{ separator: true }, ...quickItems] : []),
+        ];
     }
 
-    /** A click on a charted value: drill the grid at its member. */
-    click(datum) { return this.view.drillFrom(datum.label); }
+    /** A click on a charted value: drill the grid at its member (or its series' column member). */
+    click(datum) { return this.view.drillFrom(datum.label, datum.series ?? null); }
 }

package/src/charting/pivot/PivotGridChart.js

@@ -110,7 +110,7 @@ export class PivotGridChart extends TableViewChart {
                 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 text = view.cellText ? view.cellText(node, c, nullText) : (row === null ? '' : view.valueText(c.measure, 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()) {