@peter.prib/renderengine 0.5.0 → 0.8.0

package/package.json

@@ -1,70 +1,70 @@
-{
-  "name": "@peter.prib/renderengine",
-  "version": "0.5.0",
-  "description": "ArchiMate modeller, diagram editor and chart library for the browser, with no runtime dependencies.",
-  "type": "module",
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "browser": "dist/renderengine.umd.js",
-  "exports": {
-    ".": "./src/index.js",
-    "./workspace": "./src/workspace/index.js",
-    "./src/*": "./src/*",
-    "./dist/*": "./dist/*",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "src/",
-    "dist/*.umd.js",
-    "examples/archimate.html",
-    "examples/diagram-editor.html",
-    "examples/data-model.html",
-    "README.md",
-    "REFERENCE.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "start": "node scripts/open.mjs examples/archimate.html",
-    "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/diagrams/*.js ./test/charting/shapes/*.js",
-    "build": "rollup -c",
-    "prepublishOnly": "npm test && npm run build",
-    "screenshots": "node scripts/screenshots/screenshots.mjs"
-  },
-  "keywords": [
-    "archimate",
-    "archi",
-    "diagram",
-    "diagram-editor",
-    "modelling",
-    "charts",
-    "svg",
-    "canvas",
-    "render",
-    "engine",
-    "graphics"
-  ],
-  "author": "Peter Prib <peter.prib@gmail.com>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitlab.com/peter.prib/renderengine.git"
-  },
-  "homepage": "https://gitlab.com/peter.prib/renderengine#readme",
-  "bugs": {
-    "url": "https://gitlab.com/peter.prib/renderengine/-/issues"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.8",
-    "@rollup/plugin-node-resolve": "^15.3.1",
-    "rollup": "^3.30.0"
-  }
-}
+{
+  "name": "@peter.prib/renderengine",
+  "version": "0.8.0",
+  "description": "ArchiMate modeller, diagram editor and chart library for the browser, with no runtime dependencies.",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "browser": "dist/renderengine.umd.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./workspace": "./src/workspace/index.js",
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src/",
+    "dist/*.umd.js",
+    "examples/archimate.html",
+    "examples/diagram-editor.html",
+    "examples/data-model.html",
+    "README.md",
+    "REFERENCE.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "start": "node scripts/open.mjs examples/archimate.html",
+    "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/diagrams/*.js ./test/charting/shapes/*.js",
+    "build": "rollup -c",
+    "prepublishOnly": "npm test && npm run build",
+    "screenshots": "node scripts/screenshots/screenshots.mjs"
+  },
+  "keywords": [
+    "archimate",
+    "archi",
+    "diagram",
+    "diagram-editor",
+    "modelling",
+    "charts",
+    "svg",
+    "canvas",
+    "render",
+    "engine",
+    "graphics"
+  ],
+  "author": "Peter Prib <peter.prib@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/peter.prib/renderengine.git"
+  },
+  "homepage": "https://gitlab.com/peter.prib/renderengine#readme",
+  "bugs": {
+    "url": "https://gitlab.com/peter.prib/renderengine/-/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "rollup": "^3.30.0"
+  }
+}

package/src/archimateArchiFormat.js

@@ -207,6 +207,8 @@ export function parseArchiModel(xml) {
         elements: [],
         relationships: [],
         views: [],
+        // The Views sub-folders that hold no view (each a path of folder steps); a view carries its own.
+        emptyViewFolders: [],
         // The model's own documentation (Archi's "purpose") and properties, in order (keys may repeat).
         documentation: _childText(root, 'purpose'),
         properties: _propertyPairs(root),
@@ -240,8 +242,10 @@ function _folderStep(folder) {
 }
 
 /** Every view in the Views folder, sub-folders included, in file order; each
- *  remembers its sub-folder path (`archiFolder`). @private */
+ *  remembers its sub-folder path (`archiFolder`). A sub-folder with nothing in
+ *  it is kept as its path (`emptyViewFolders`), as Archi shows it. @private */
 function _walkViewFolder(folder, model, path = []) {
+    if (path.length && !folder.children.some(c => c.tagName === 'element' || c.tagName === 'folder')) model.emptyViewFolders.push(path);
     for (const child of folder.children) {
         if (child.tagName === 'element') {
             const view = _parseView(child);
@@ -754,6 +758,7 @@ export function toArchimateModel(archiModel) {
         id: archiModel.id ?? undefined,
         name: archiModel.name ?? '', elements, relationships, folders, elementFolders, views,
         documentation: archiModel.documentation || undefined, properties: archiModel.properties ?? [],
+        emptyViewFolders: archiModel.emptyViewFolders ?? [],
         // The specializations written for element types Archi lacks are not the model's own.
         archi: archiModel.archi ? {
             ...archiModel.archi,
@@ -1372,6 +1377,7 @@ export function toArchiExport(model) {
         documentation: model.documentation,
         properties: model.properties,
         archi: model.archi,
+        emptyViewFolders: model.emptyViewFolders ?? [],
         elements: model.elements(),
         relationships: model.relationships(),
     }, views];
@@ -1406,7 +1412,8 @@ function _propertyLines(pairs, indent) {
  */
 function _inSubFolders(items, write, indent = '    ') {
     const lines = [];
-    const direct = items.filter(item => !item.archiFolder?.length);
+    // An empty folder comes as {archiFolder, folderOnly}: it makes its folders and writes nothing itself.
+    const direct = items.filter(item => !item.archiFolder?.length && !item.folderOnly);
     // Sub-folders in the order they are first named, each holding the items one level deeper.
     const groups = new Map();
     for (const item of items.filter(item => item.archiFolder?.length)) {
@@ -1492,7 +1499,8 @@ export function toArchiXML(model, views) {
                     { id: rel.id, ...(name && { name }), source: rel.source, target: rel.target, ...(directed && { directed: 'true' }) }, rel, indent);
             }));
         } else if (folder.type === 'diagrams') {
-            body.push(..._inSubFolders(viewArray, (view, indent) => _serializeView(view).map(line => indent.slice(4) + line)));
+            const emptyFolders = (model.emptyViewFolders ?? []).map(archiFolder => ({ archiFolder, folderOnly: true }));
+            body.push(..._inSubFolders([...viewArray, ...emptyFolders], (view, indent) => _serializeView(view).map(line => indent.slice(4) + line)));
         } else {
             body.push(..._inSubFolders(items.map(item => ({ ...item, archiFolder: item.el.archiFolder })),
                 ({ el, type, original, profile }, indent) => _serializeConcept(`archimate:${_toPascalType(type)}`,

package/src/archimateExchangeFormat.js

@@ -80,7 +80,7 @@ export function parseExchangeModel(xml) {
         key: definitions.get(p.getAttribute('propertyDefinitionRef') ?? p.getAttribute('identifierRef')) ?? '',
         value: _text(p, 'value') ?? '',
     }));
-    const folders = _organizationPaths(root);
+    const { paths: folders, emptyViewFolders } = _organizationPaths(root);
 
     const model = {
         id: root.getAttribute('identifier'),
@@ -91,6 +91,7 @@ export function parseExchangeModel(xml) {
         elements: [],
         relationships: [],
         views: [],
+        emptyViewFolders,
     };
     for (const el of _kids(_kid(root, 'elements'), 'element')) {
         model.elements.push(_inFolder(_parseElement(el, pairs(el)), folders));
@@ -116,26 +117,31 @@ function _inFolder(item, folders) {
  * The folder path of every item the organizations hold, by its id: each
  * labelled item it is in, outermost first. An outermost item named as one of
  * Archi's top-level folders is that folder, not a sub-folder (Archi exports
- * its folders so); any other is a sub-folder.
+ * its folders so); any other is a sub-folder. An empty sub-folder of Views
+ * is kept as its path, as parseArchiModel keeps one.
  * @private
+ * @returns {{paths: Map<string, Array>, emptyViewFolders: Array<Array>}}
  */
 function _organizationPaths(root) {
     const topNames = new Set(ARCHI_FOLDERS.map(f => f.name));
+    const viewsName = ARCHI_FOLDERS.find(f => f.type === 'diagrams').name;
     const paths = new Map();
+    const emptyViewFolders = [];
     let made = 0;
-    const walk = (item, path, outermost) => {
+    const walk = (item, path, outermost, top) => {
         for (const child of _kids(item, 'item')) {
             const ref = child.getAttribute('identifierRef');
             if (ref) { paths.set(ref, path); continue; }
             const name = _text(child, 'label') ?? '';
-            if (outermost && topNames.has(name)) { walk(child, path, false); continue; }
+            if (outermost && topNames.has(name)) { walk(child, path, false, name); continue; }
             const documentation = _text(child, 'documentation');
             const step = { id: child.getAttribute('identifier') ?? `folder-${++made}`, name, ...(documentation && { documentation }) };
-            walk(child, [...path, step], false);
+            if (top === viewsName && !_kids(child, 'item').length) emptyViewFolders.push([...path, step]);
+            walk(child, [...path, step], false, top);
         }
     };
-    for (const organization of _kids(root, 'organizations')) walk(organization, [], true);
-    return paths;
+    for (const organization of _kids(root, 'organizations')) walk(organization, [], true, null);
+    return { paths, emptyViewFolders };
 }
 
 /** An element as parseArchiModel gives it (type: Archi's class name). @private */
@@ -390,7 +396,8 @@ export function toExchangeXML(model, views = []) {
     });
 
     const viewLines = diagrams.flatMap(view => _viewLines(view, { ids, known, propertyLines, textLines }));
-    const organizationLines = _organizationLines({ elements, relationships, views: diagrams, ids });
+    const emptyFolders = (model.emptyViewFolders ?? []).map(archiFolder => ({ archiFolder, folderOnly: true }));
+    const organizationLines = _organizationLines({ elements, relationships, views: [...diagrams, ...emptyFolders], ids });
 
     // Read once every property is defined: the model's, the concepts' and the views'.
     const modelLines = [
@@ -534,7 +541,8 @@ function _organizationLines({ elements, relationships, views, ids }) {
             if (step.documentation) lines.push(`${indent}  <documentation>${escapeXml(step.documentation)}</documentation>`);
             lines.push(...write(inner, `${indent}  `), `${indent}</item>`);
         }
-        for (const item of items.filter(i => !i.archiFolder?.length)) lines.push(`${indent}<item identifierRef="${ids.ref(item.id)}"/>`);
+        // An empty folder ({archiFolder, folderOnly}) makes its folders and lists nothing itself.
+        for (const item of items.filter(i => !i.archiFolder?.length && !i.folderOnly)) lines.push(`${indent}<item identifierRef="${ids.ref(item.id)}"/>`);
         return lines;
     };
     return ARCHI_FOLDERS.filter(f => inFolder.get(f.type).length).flatMap(folder => [

package/src/chartCatalog.js

@@ -457,6 +457,16 @@ export const CHART_CATALOG = [
     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,

package/src/charting/ArchimateDiagramEditor.js

@@ -303,7 +303,7 @@ export class ArchimateDiagramEditor extends DiagramEditor {
             library: this.templateLibrary,
             document: () => this.document,
         });
-        this.tree = new this.workspace.ModelTree(model, { mode: 'byLayer' });
+        this.tree = new this.workspace.ModelTree(model, { mode: 'byLayer', ...(this.settingsManager?.treeOptions?.() ?? {}) });
         this.currentView = model.currentView ?? this.tree.getSelectedView();
         this._wireTreeSelection();
         this._unsubscribeModel = model.onChange(() => this._onModelChange());

package/src/charting/Axis.js

@@ -27,6 +27,26 @@ export class Axis {
         return ticks;
     }
 
+    /**
+     * How often a category label fits along an axis `width` wide: 1 (every
+     * label), 2 (every other), … — so a long series (a minute of samples, a
+     * day of timestamps) shows readable labels rather than an overprinted
+     * smear. Estimated from the longest label at `fontSize` (a character is
+     * about 0.6 em wide), with a small gap between labels.
+     * @param {Array<*>} labels
+     * @param {number} width
+     * @param {Object} [options]
+     * @param {number} [options.fontSize=12] - In px
+     * @returns {number} the step: draw label i when i % step === 0
+     */
+    static categoryLabelStep(labels, width, { fontSize = 12 } = {}) {
+        const count = labels?.length ?? 0;
+        if (count < 2 || !(width > 0)) return 1;
+        const longest = Math.max(...labels.map(l => String(l ?? '').length));
+        const need = longest * fontSize * 0.6 + 6;
+        return Math.max(1, Math.ceil(need / (width / count)));
+    }
+
     /**
      * Format a numeric value for axis labels (k/M suffixes, fixed decimals).
      * @param {number} v

package/src/charting/ChartChooser.js

@@ -0,0 +1,229 @@
+import { AXIS_KIND, chartRegistry } from '../chartCatalog.js';
+
+/**
+ * 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 });
+ */
+export 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'),
+        };
+    }
+}
+
+/** 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 ? 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 ? 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 ? 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];

package/src/charting/DiagramEditor.js

@@ -59,6 +59,9 @@ import {
  * toolbar container) to itself.
  */
 export class DiagramEditor {
+    /** How a selected shape (besides the one with handles) is marked: an outline `pad` outside it, tinted. */
+    static SELECTION_OUTLINE = Object.freeze({ pad: 4, stroke: '#0066cc', strokeWidth: 2, dash: '5,3', fill: 'rgba(0, 102, 204, 0.08)' });
+
     /**
      * @param {Object} options
      * @param {string} [options.diagramContainerId] - Id of the SVG (or its container) to draw into
@@ -389,6 +392,7 @@ export class DiagramEditor {
         svgElement.addEventListener('contextmenu', (e) => {
             e.stopPropagation();
             e.preventDefault();
+            this.selectForMenu(elementId, { extend: e.ctrlKey || e.metaKey || e.shiftKey });
             this._showOrderingMenu(elementId, e.clientX, e.clientY);
         });
     }
@@ -914,16 +918,31 @@ export class DiagramEditor {
     showModelCheck() {
         const checker = this.model?.checker?.(this.checkerOptions());
         if (!checker) return [];
-        const findings = checker.run();
+        return this.showFindings(checker.run());
+    }
+
+    /**
+     * Some findings in the model check's dialog (each shown when chosen, with
+     * its actions), under `title` (text, or a function of the findings) and
+     * saying `empty` when there are none.
+     */
+    showFindings(findings, { title = null, empty = undefined } = {}) {
         new ModelCheckDialog({
             findings,
             onReveal: (finding) => this.revealFinding(finding),
             actionsFor: (finding) => this.findingActions(finding),
             document: this.document ?? document,
+            title: typeof title === 'function' ? title(findings) : title,
+            ...(empty !== undefined && { empty }),
         }).open();
         return findings;
     }
 
+    /** Edits of the whole model this editor offers (the Edit menu shows them): none here; a subclass adds its own. */
+    modelMenuItems() {
+        return [];
+    }
+
     /** What can be done about a finding, beside showing it (`[{label, action}]`): nothing here; a subclass offers its own (Merge…). */
     findingActions(finding) {
         return [];
@@ -1051,9 +1070,11 @@ export class DiagramEditor {
             if (!t) continue;
             const b = box(t);
             if (id !== this.selectedTemplateId) {
+                // Set off the shape's own border, and tinted, so it shows on any box.
+                const { pad, stroke, strokeWidth, dash, fill } = this.constructor.SELECTION_OUTLINE;
                 layer.appendChild(this._svg('rect', {
-                    class: 'selection-outline', x: b.x1, y: b.y1, width: b.x2 - b.x1, height: b.y2 - b.y1,
-                    fill: 'none', stroke: '#0066cc', 'stroke-width': 1.5, 'stroke-dasharray': '4,3',
+                    class: 'selection-outline', x: b.x1 - pad, y: b.y1 - pad, width: b.x2 - b.x1 + 2 * pad, height: b.y2 - b.y1 + 2 * pad,
+                    fill, stroke, 'stroke-width': strokeWidth, 'stroke-dasharray': dash, rx: 3,
                 }));
             }
             if (this.arrangement.isLocked(id)) {
@@ -3146,6 +3167,17 @@ export class DiagramEditor {
      * @param {string} templateId
      * @param {{extend?: boolean}} [options]
      */
+    /**
+     * Before a shape's menu: with `extend` (Ctrl, ⌘ or Shift held) the shape
+     * joins the selection; otherwise a shape outside the selection becomes it.
+     * A shape already selected leaves the selection as it is, so the menu acts
+     * on all of it (Merge, Match size, Properties of N shapes).
+     */
+    selectForMenu(templateId, { extend = false } = {}) {
+        if (this.selectedIds.has(templateId)) return;
+        this.selectTemplate(templateId, { extend });
+    }
+
     selectTemplate(templateId, { extend = false } = {}) {
         if (extend) {
             if (this.selectedIds.has(templateId)) {