@peter.prib/renderengine 0.10.0 → 0.13.0

package/src/charting/archimate/deleteFromModel.js

@@ -0,0 +1,57 @@
+import { FormDialog } from '../FormDialog.js';
+import { typeTitle } from './archimateNames.js';
+
+/** At most this many views or relationships are named; the rest are counted. */
+const LISTED = 10;
+
+/**
+ * What deleting elements from the model takes with it, in words, for the
+ * confirmation: the views they are on (and how many boxes), and the
+ * relationships that go too (ArchimateModel#usage).
+ * @param {ArchimateModel} model
+ * @param {Array<string>} elementIds
+ * @returns {string}
+ */
+export function deleteFromModelMessage(model, elementIds) {
+    const elements = elementIds.map(id => model.getElement(id)).filter(Boolean);
+    const name = (el) => `"${el.name || el.id}"`;
+    const { views, relationships } = model.usage(elementIds);
+    const list = (items) => [...items.slice(0, LISTED).map(s => `  • ${s}`), ...(items.length > LISTED ? [`  • and ${items.length - LISTED} more`] : [])];
+    const end = (id) => { const c = model.getElement(id) ?? model.getRelationship(id); return c ? `${c.name || typeTitle(c.type ?? c.kind ?? '') || c.id}` : id; };
+    const lines = [
+        elements.length === 1 ? `${name(elements[0])} (${typeTitle(elements[0].type ?? '')}) goes from the model.` : `These ${elements.length} elements go from the model: ${elements.map(name).join(', ')}.`,
+        '',
+        views.length
+            ? `Used in ${views.length} view${views.length === 1 ? '' : 's'}, where ${elements.length === 1 ? 'its' : 'their'} boxes go:`
+            : 'Used in no view.',
+        ...list(views.map(({ view, boxes }) => `${view.name || view.id}${boxes > 1 ? ` (${boxes} boxes)` : ''}`)),
+        '',
+        relationships.length
+            ? `${relationships.length} relationship${relationships.length === 1 ? '' : 's'} go${relationships.length === 1 ? 'es' : ''} too:`
+            : 'No relationships.',
+        ...list(relationships.map(r => `${end(r.source)} → ${end(r.target)} (${typeTitle(r.kind ?? r.type ?? '') || 'relationship'}${r.name ? `: ${r.name}` : ''})`)),
+        '',
+        'Undo puts them all back.',
+    ];
+    return lines.join('\n');
+}
+
+/**
+ * Ask before deleting elements from the model: a dialog saying where they are
+ * used and what goes with them; **Delete from model** runs `onConfirm()`.
+ * @returns {FormDialog|null} null when none of the ids is an element
+ */
+export function askDeleteFromModel(model, elementIds, { onConfirm, document: doc = globalThis.document } = {}) {
+    const ids = elementIds.filter(id => model.getElement(id));
+    if (!ids.length) return null;
+    const dialog = new FormDialog({
+        title: ids.length === 1 ? 'Delete from model' : `Delete ${ids.length} elements from model`,
+        description: deleteFromModelMessage(model, ids),
+        fields: [],
+        submitLabel: 'Delete from model',
+        document: doc,
+        onApply: () => onConfirm(ids),
+    });
+    dialog.open();
+    return dialog;
+}

package/src/charting/archimate/elementMenuItems.js

@@ -11,9 +11,10 @@
  * @param {(element) => void} host.editProperties
  * @param {(view, instanceId) => void} host.showIn - Open `view` with that box selected
  * @param {(element) => void} [host.addToView] - Show it on `view` (offered when it is not there)
+ * @param {(element) => void} [host.deleteFromModel] - Delete it from the model, after saying where it is used
  * @returns {Array<Object>} menu items
  */
-export function elementMenuItems(element, { model, view = null, editProperties, showIn, addToView = null }) {
+export function elementMenuItems(element, { model, view = null, editProperties, showIn, addToView = null, deleteFromModel = null }) {
     const placed = model.views()
         .map(v => ({ view: v, instance: v.elementInstancesFor?.(element.id)?.[0] }))
         .filter(({ instance }) => instance);
@@ -28,5 +29,6 @@ export function elementMenuItems(element, { model, view = null, editProperties,
             : { label: 'Show in View (on none)', disabled: true, action: () => {} },
         ...(addToView && view && !onThisView ? [{ label: `Add to "${view.name || 'this view'}"`, action: () => addToView(element) }] : []),
         { label: 'Generate View For This', action: () => model.generateView([element.id]) },
+        ...(deleteFromModel ? [{ separator: true }, { label: '🗑 Delete from model…', danger: true, action: () => deleteFromModel(element) }] : []),
     ];
 }

package/src/charting/archimate/heatMaps.js

@@ -0,0 +1,169 @@
+import { compileFormula } from '../../kernelExpr.js';
+
+/**
+ * Heat maps an ArchiMate view can be coloured by beyond its elements' own
+ * fields (ArchimateCanvasEditor#colourKeys): what change a deliverable or work
+ * package makes to each element, and a formula over the elements' numeric
+ * properties. Pure: no editor, no DOM.
+ */
+
+/** The change heat map's colours. */
+export const CHANGE_COLOURS = Object.freeze({ Create: '#FDD835', Update: '#1E88E5', Delete: '#D81B60' });
+
+/** Element types that make changes: their relationships to an element say what they do to it. */
+export const CHANGE_MAKERS = Object.freeze(['deliverable', 'work-package']);
+
+/** The words for each change, synonyms included (verbs as base forms; their -s, -ed, -ing forms match too). */
+export const CHANGE_WORDS = Object.freeze({
+    Delete: ['delete', 'remove', 'retire', 'decommission', 'drop', 'sunset', 'terminate', 'eliminate', 'discontinue', 'deprecate', 'withdraw', 'phase out', 'shut down', 'switch off'],
+    Create: ['create', 'add', 'new', 'introduce', 'build', 'built', 'establish', 'implement', 'insert', 'provision', 'set up', 'launch', 'develop', 'onboard'],
+    Update: ['update', 'change', 'modify', 'amend', 'enhance', 'upgrade', 'improve', 'revise', 'extend', 'migrate', 'refactor', 'replace', 'rework', 'adapt', 'alter', 'patch'],
+});
+
+/** Which change wins when an element is given more than one: the one with most consequence. */
+const PRECEDENCE = ['Delete', 'Create', 'Update'];
+
+const escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/**
+ * A word and its inflections: retire → retires, retired, retiring; drop →
+ * dropped, dropping; modify → modifies, modified, modifying.
+ */
+function forms(word) {
+    const [verb, ...rest] = word.split(' ');
+    const tail = rest.length ? `\\s+${rest.map(escape).join('\\s+')}` : '';
+    const stem = verb.endsWith('e') ? verb.slice(0, -1) : verb;
+    const doubled = /[^aeiou][aeiou][bdgmnpt]$/.test(verb) ? `|${escape(verb)}${verb.at(-1)}(?:ed|ing)` : '';
+    const y = /[^aeiou]y$/.test(verb) ? `|${escape(verb.slice(0, -1))}i(?:es|ed)` : '';
+    return `(?:${escape(verb)}(?:s|es|d|ed)?|${escape(stem)}(?:ed|ing|es)${doubled}${y})${tail}`;
+}
+
+const PATTERNS = Object.fromEntries(Object.entries(CHANGE_WORDS)
+    .map(([change, words]) => [change, new RegExp(`\\b(?:${words.map(forms).join('|')})\\b`, 'i')]));
+
+/**
+ * The change a piece of text names ('Create', 'Update' or 'Delete'), or null.
+ * Where it names more than one, the one with most consequence (delete, then
+ * create, then update).
+ */
+export function changeAction(text) {
+    if (!text) return null;
+    return PRECEDENCE.find(change => PATTERNS[change].test(String(text))) ?? null;
+}
+
+/**
+ * The change one relationship says a deliverable or work package makes: its
+ * name, or, when it has none, the name of the deliverable or work package at
+ * one of its ends (`toward`: the end that is not the element changed, when
+ * known). Null when neither end makes changes, or nothing is said.
+ * @returns {'Create'|'Update'|'Delete'|null}
+ */
+export function relationshipChange(model, rel, toward = null) {
+    const ends = toward ? [toward] : [rel.source, rel.target];
+    const maker = ends.map(id => model.getElement(id)).find(e => e && CHANGE_MAKERS.includes(e.type));
+    if (!maker) return null;
+    return changeAction((rel.name ?? '').trim() ? rel.name : maker.name);
+}
+
+/**
+ * What change the deliverables and work packages related to an element make
+ * to it: for each relationship between them (either way), relationshipChange.
+ * Where they differ, the one with most consequence. Null when none says.
+ * @param {ArchimateModel} model
+ * @param {string} elementId
+ * @returns {'Create'|'Update'|'Delete'|null}
+ */
+export function elementChange(model, elementId) {
+    const found = new Set();
+    for (const rel of model.relationships()) {
+        const other = rel.source === elementId ? rel.target : rel.target === elementId ? rel.source : null;
+        const change = other && relationshipChange(model, rel, other);
+        if (change) found.add(change);
+    }
+    return PRECEDENCE.find(change => found.has(change)) ?? null;
+}
+
+/** Whether a model has anything that makes changes (a deliverable or work package). */
+export function hasChangeMakers(model) {
+    return model.elements().some(e => CHANGE_MAKERS.includes(e.type));
+}
+
+/**
+ * The names a formula can use for the properties: each property name as an
+ * identifier (anything not a letter, digit or _ becomes _; a leading digit gets
+ * a _ before it), mapped to the property it stands for.
+ * @param {Array<Object>} elements
+ * @returns {Map<string, string>} identifier -> property name
+ */
+export function propertyParams(elements) {
+    const params = new Map();
+    for (const e of elements) {
+        for (const p of e.properties ?? []) {
+            const name = p.name ?? p.key;
+            if (!name) continue;
+            let id = String(name).replace(/[^A-Za-z0-9_]/g, '_');
+            if (/^\d/.test(id)) id = `_${id}`;
+            if (!params.has(id)) params.set(id, name);
+        }
+    }
+    return params;
+}
+
+/**
+ * A formula's result for each element (by id): the formula over the
+ * element's numeric properties, by their propertyParams names. An element
+ * missing a property the formula uses, or whose value is not a number, or
+ * whose result is not a finite number, has none.
+ * Throws the formula's own error when it does not parse (an unknown name, say).
+ * @returns {Map<string, number>}
+ */
+export function expressionValues(elements, formula) {
+    const params = propertyParams(elements);
+    const names = [...params.keys()];
+    if (!names.length) throw new Error('No element here has a property to use');
+    const fn = compileFormula(formula, names);
+    const used = names.filter(n => new RegExp(`\\b${n}\\b`).test(formula));
+    const results = new Map();
+    for (const e of elements) {
+        const valueOf = (id) => {
+            const p = (e.properties ?? []).find(q => (q.name ?? q.key) === params.get(id));
+            const n = p === undefined || p.value === null || p.value === '' ? NaN : Number(p.value);
+            return n;
+        };
+        if (used.some(id => !Number.isFinite(valueOf(id)))) continue;
+        const result = fn(...names.map(id => { const v = valueOf(id); return Number.isFinite(v) ? v : 0; }));
+        if (Number.isFinite(result)) results.set(e.id, result);
+    }
+    return results;
+}
+
+/** A number as a label: integers as they are, others to at most 3 decimals. */
+const show = (n) => (Number.isInteger(n) ? String(n) : String(Number(n.toFixed(3))));
+
+/**
+ * Labels for a formula's results: each distinct result its own, in order,
+ * when there are at most `distinct` of them; else `bands` equal-width bands
+ * from the smallest to the largest ("10 – 20"), the last taking in the largest;
+ * a band no result falls in is left out.
+ * @param {Iterable<number>} numbers
+ * @returns {{labels: string[], labelOf: (n: number) => string}}
+ */
+export function resultBands(numbers, { distinct = 8, bands = 5 } = {}) {
+    const values = [...new Set(numbers)].sort((a, b) => a - b);
+    if (values.length <= distinct) return { labels: values.map(show), labelOf: show };
+    const lo = values[0], hi = values.at(-1), width = (hi - lo) / bands;
+    const all = Array.from({ length: bands }, (_, i) => `${show(lo + i * width)} – ${show(i === bands - 1 ? hi : lo + (i + 1) * width)}`);
+    const labelOf = (n) => all[Math.min(bands - 1, Math.floor((n - lo) / width))];
+    const used = new Set(values.map(labelOf));
+    return { labels: all.filter(l => used.has(l)), labelOf };
+}
+
+/** `count` colours from light to dark (a sequential scale, light yellow to dark red), for ordered values. */
+export function sequentialColours(count) {
+    const from = [255, 247, 188], to = [189, 0, 38];
+    const hex = (c) => Math.round(c).toString(16).padStart(2, '0');
+    return Array.from({ length: count }, (_, i) => {
+        const t = count === 1 ? 1 : i / (count - 1);
+        return `#${from.map((f, k) => hex(f + (to[k] - f) * t)).join('')}`;
+    });
+}

package/src/charting/archimate/index.js

@@ -15,3 +15,4 @@ export { ViewGroupTemplate, GROUP_FILL } from './ViewGroupTemplate.js';
 export { CustomViewpoints, CUSTOM_VIEWPOINTS_STORE } from './CustomViewpoints.js';
 export { specializationCatalogDialog } from './specializationCatalogDialog.js';
 export { elementTypeChoices } from './elementTypeChoices.js';
+export { askDeleteFromModel, deleteFromModelMessage } from './deleteFromModel.js';

package/src/charting/charts/BarChart.js

@@ -17,7 +17,7 @@ export class BarChart extends BarChartBase {
     _computeMaxValue() {
         const data = this.data;
         const rawMax = Math.max(...data.map(d => d.value)) || 1;
-        return this._drawYAxis(rawMax);
+        return this._drawYAxis(rawMax, Math.min(0, ...data.map(d => d.value)));
     }
 
     _beforeBars(maxValue) {
@@ -39,12 +39,12 @@ export class BarChart extends BarChartBase {
             }
 
             const color = colors ? this._palette.colorAt(i) : barColor;
-            const barHeight = (d.value / maxValue) * height;
+            const bar = this._barSpan(d.value);
             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.renderer.text(String(d.value), barX + bandWidth / 2, barY - 5, { textAnchor, fontSize: '10px', fill: '#333' });
+            this._datum(this.renderer.rect(barX, bar.top, bandWidth, bar.height, color, null, { bar: true, dataIndex: i, tooltip: `${d.label}: ${d.value}` }), { label: d.label });
+            // The value just past the bar's end: above a bar going up, below one going down.
+            this.renderer.text(String(d.value), barX + bandWidth / 2, d.value < 0 ? bar.end + 12 : bar.end - 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/BarChartBase.js

@@ -38,9 +38,27 @@ export class BarChartBase extends Chart {
         this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
     }
 
-    /** Draw a Y axis and return the nice-rounded max value. */
-    _drawYAxis(rawMax) {
-        return new Axis().drawYAxis(this.renderer, this._plotBox, rawMax);
+    /**
+     * Draw a Y axis and return the nice-rounded max value. With a negative `rawMin` the axis goes
+     * below zero, with a zero line; `_barSpan` then draws each bar from zero, up or down.
+     */
+    _drawYAxis(rawMax, rawMin = 0) {
+        this._domain = new Axis().drawYRange(this.renderer, this._plotBox, rawMin, rawMax);
+        return this._domain.max;
+    }
+
+    /**
+     * Where a bar of `value` goes on the axis `_drawYAxis` drew: from the zero line up to it, or
+     * down to it when negative.
+     * @returns {{top: number, height: number, end: number}} `end` is the bar's far end from zero
+     */
+    _barSpan(value) {
+        const { y, height } = this._plotBox;
+        const { min, max } = this._domain;
+        const yOf = (v) => y + height - ((v - min) / (max - min)) * height;
+        const zero = yOf(0);
+        const end = yOf(value);
+        return { top: Math.min(zero, end), height: Math.abs(end - zero), end };
     }
 
     _render() {

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,18 +9,18 @@ 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. A negative value
+ * is drawn down from a zero line, the axis taking in the smallest value too.
  */
 export class GroupedBarChart extends BarChartBase {
     static chartType = 'groupedBar';
 
     _computeMaxValue() {
         const series = this.data;
-        const rawMax = Math.max(
-            ...series.flatMap(s => s.values.map(v => v.value)),
-            1,
-        );
-        return this._drawYAxis(rawMax);
+        const values = series.flatMap(s => s.values.map(v => v.value).filter(v => v != null));
+        const rawMax = Math.max(...values, 1);
+        return this._drawYAxis(rawMax, Math.min(0, ...values));
     }
 
     _renderBars(maxValue) {
@@ -32,7 +34,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 +49,49 @@ 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 barHeight = (value / maxValue) * height;
+                const value = valueBySeriesLabel[seriesIndex].get(label);
+                if (value == null) return;
+                const bar = this._barSpan(value);
                 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, bar.top, finalBarWidth, bar.height, 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 +99,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

@@ -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));
@@ -85,11 +101,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/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()];