@peter.prib/renderengine 0.4.0 → 0.7.0

package/src/charting/archimate/ArchimateCanvasEditor.js

@@ -33,6 +33,9 @@ import { ElementFilterRule } from './ElementFilterRule.js';
 import { ArchimateViewpoints, ArchimateNotation } from '../../archimate.js';
 import { PropertyListEditor } from '../PropertyListEditor.js';
 import { FormDialog } from '../FormDialog.js';
+import { duplicateSearchFields, duplicateSearchOptions, validateDuplicateSearch } from '../duplicateSearchForm.js';
+import { DuplicatesDialog } from '../DuplicatesDialog.js';
+import { MergeCompareDialog } from '../MergeCompareDialog.js';
 import { elementPropertyFields, elementEditCommand, conceptEditCommand, manyElementsFields, manyElementsEditCommands } from './elementProperties.js';
 
 /**
@@ -130,7 +133,10 @@ export class ArchimateCanvasEditor extends DiagramEditor {
         const items = this.templateMenu?.saveAsTemplateItems(this.view.id, { itemIds: [...this.arrangement.movers(ids)] }) ?? [];
         const element = this._elementOf(elementId);
         const missing = element ? this.missingRelationshipsOf(elementId) : [];
+        // Two or more elements chosen: merge them into one (choose the one kept).
+        const merging = this.elementIdsOf(ids);
         return [
+            ...(merging.length > 1 ? [{ label: `Merge ${merging.length} elements…`, action: () => this.askMerge(merging) }] : []),
             ...(element ? [{ label: 'Generate View For This', action: () => this.model.generateView([element.id]) }] : []),
             ...(missing.length ? [{ label: `Add Missing Relationships (${missing.length})`, action: () => this.addMissingRelationships(elementId) }] : []),
             ...hintMenuItems(this.view, elementId, { onChange: () => this.render() }),
@@ -168,7 +174,94 @@ export class ArchimateCanvasEditor extends DiagramEditor {
 
     /** The View menu, and Generate roadmap… (elements with dates on a time line). */
     viewMenuItems() {
-        return [...super.viewMenuItems(), { label: 'Generate roadmap…', action: () => this.askRoadmap() }];
+        const repeated = this.view?.repeatedBoxes?.() ?? [];
+        return [
+            ...super.viewMenuItems(),
+            { label: `Remove repeated boxes${repeated.length ? ` (${repeated.length})` : ''}`, disabled: !repeated.length || undefined, action: () => this.removeRepeatedBoxes() },
+            { label: 'Generate roadmap…', action: () => this.askRoadmap() },
+        ];
+    }
+
+    /** The model's own: Find likely duplicates…. */
+    modelMenuItems() {
+        return [...super.modelMenuItems(), { label: 'Find likely duplicates…', action: () => this.askDuplicates() }];
+    }
+
+    /**
+     * Take off this view the boxes that only repeat another box of their
+     * element (ArchimateView#repeatedBoxes: same label, same lines), with
+     * their lines, as one undo step. Returns the command, or null with none.
+     */
+    removeRepeatedBoxes() {
+        const ids = this.view.repeatedBoxes();
+        if (!ids.length) return null;
+        const cmd = this.deleteTemplatesCommand(ids);
+        cmd.label = `Remove ${ids.length} repeated box${ids.length === 1 ? '' : 'es'}`;
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /**
+     * Where Find likely duplicates… can look: the whole model, the elements on
+     * the view in front, the elements selected (two or more). [key, label, element ids or null].
+     */
+    duplicateScopes() {
+        const onView = this.elementIdsOf([...(this.view?.elementInstances?.keys() ?? [])]);
+        const selected = this.elementIdsOf(this.getSelectedIds());
+        return [
+            ['model', 'The whole model', null],
+            ...(onView.length > 1 ? [['view', `This view (${this.view.name || this.view.id})`, onView]] : []),
+            ...(selected.length > 1 ? [['selection', `The ${selected.length} elements selected`, selected]] : []),
+        ];
+    }
+
+    /**
+     * Find likely duplicates…: where to look (duplicateScopes), how to compare
+     * (names, documentation or a property's value; exactly or by their words)
+     * and what noise to leave out (duplicateSearchFields), then the groups
+     * found, each with Merge… (showDuplicates).
+     */
+    askDuplicates() {
+        const names = [...new Set(this.model.elements().flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))].sort();
+        const specializations = [...new Set(this.model.elements().map(e => e.specialization).filter(Boolean))].sort();
+        const scopes = this.duplicateScopes();
+        return new FormDialog({
+            title: 'Find likely duplicates',
+            description: 'Elements are compared by their words: case, punctuation, word order and the noise words do not count.',
+            fields: duplicateSearchFields({ scope: { label: 'Look in', choices: scopes.map(([key, label]) => [key, label]) }, properties: names, specializations }),
+            submitLabel: 'Find',
+            idPrefix: 'duplicates-',
+            document: this.document ?? globalThis.document,
+            validate: validateDuplicateSearch,
+            onApply: (values) => {
+                const { options, scope } = duplicateSearchOptions(values);
+                this.showDuplicates(options, { within: scopes.find(([key]) => key === scope)?.[2] ?? null });
+            },
+        }).open();
+    }
+
+    /**
+     * The elements that look like one thing twice (the model check's likely
+     * duplicates, compared as `options` say: DUPLICATE_OPTIONS; `within`: only
+     * among these element ids), each group with Merge….
+     */
+    showDuplicates(options = {}, { within = null } = {}) {
+        const find = () => this.model.checker(this.checkerOptions()).possibleDuplicates(options, { within });
+        const groups = find();
+        new DuplicatesDialog({
+            groups,
+            refind: find,
+            merge: async (group) => !!(await this.askMerge(group.ids)),
+            onReveal: (group) => this.revealFinding(group),
+            empty: 'No elements look like the same thing twice.',
+            document: this.document ?? globalThis.document,
+        }).open();
+        return groups;
+    }
+
+    /** The model elements of some boxes, each once (a box that is not an element is left out). */
+    elementIdsOf(instanceIds) {
+        return [...new Set(instanceIds.map(id => this._elementOf(id)?.id).filter(Boolean))];
     }
 
     /**
@@ -302,11 +395,73 @@ export class ArchimateCanvasEditor extends DiagramEditor {
     }
 
     /**
-     * Ask which of some elements to keep, then merge the others into it
-     * (ArchimateModel#mergeCommand), one undo step. Each choice says where the
-     * element is used, to help pick.
+     * What differs among some elements, for the merge to choose: their
+     * documentation (when two or more have some, and it differs), each property
+     * with different values, and the specialization.
+     * @returns {{documentation: Array<[string, string]>, properties: Map<string, Array<[string, string]>>, specializations: string[]}}
+     *   each choice [value, label]
+     */
+    mergeChoices(elements) {
+        const name = (e) => e.name || e.id;
+        const documented = elements.filter(e => (e.documentation ?? '').trim());
+        const texts = [...new Set(documented.map(e => e.documentation.trim()))];
+        const properties = new Map();
+        for (const e of elements) {
+            for (const p of e.properties ?? []) {
+                const key = p.name ?? p.key;
+                if (!properties.has(key)) properties.set(key, new Map());
+                const values = properties.get(key);
+                values.set(String(p.value ?? ''), [...(values.get(String(p.value ?? '')) ?? []), name(e)]);
+            }
+        }
+        const specializations = [...new Set(elements.map(e => e.specialization).filter(Boolean))];
+        return {
+            documentation: texts.length > 1 ? texts.map(t => [t, `${documented.filter(e => e.documentation.trim() === t).map(name).join(', ')}: ${t.length > 50 ? `${t.slice(0, 50)}…` : t}`]) : [],
+            properties: new Map([...properties].filter(([, values]) => values.size > 1)
+                .map(([key, values]) => [key, [...values].map(([value, from]) => [value, `${value || '(empty)'} (${from.join(', ')})`])])),
+            specializations: specializations.length > 1 ? specializations : [],
+        };
+    }
+
+    /**
+     * Some elements side by side, for a merge (MergeCompareDialog's rows): their
+     * names, types, specializations, documentation, each property, their
+     * relationships (kind, direction, the element at the other end) and the
+     * views they are on.
      */
-    askMerge(elementIds) {
+    mergeComparison(elements) {
+        const nameOf = (id) => this.model.getElement(id)?.name || id;
+        const valueOf = (e, key) => (e.properties ?? []).filter(p => (p.name ?? p.key) === key).map(p => p.value ?? '').join(', ');
+        const keys = [...new Set(elements.flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))];
+        const lines = (e) => {
+            const { incoming, outgoing } = this.model.relationshipsFor(e.id);
+            return [
+                ...outgoing.map(r => `${r.kind} → ${nameOf(r.target)}`),
+                ...incoming.map(r => `${r.kind} ← ${nameOf(r.source)}`),
+            ].sort().join('\n');
+        };
+        const views = (e) => this.model.views().filter(v => v.elementInstancesFor?.(e.id).length).map(v => v.name || v.id).join('\n');
+        return [
+            { label: 'Name', values: elements.map(e => e.name ?? '') },
+            { label: 'Type', values: elements.map(e => e.type ?? '') },
+            ...(elements.some(e => e.specialization) ? [{ label: 'Specialization', values: elements.map(e => e.specialization ?? '') }] : []),
+            { label: 'Documentation', values: elements.map(e => (e.documentation ?? '').trim()) },
+            ...keys.map(key => ({ label: `${key} (property)`, values: elements.map(e => valueOf(e, key)) })),
+            { label: 'Relationships', values: elements.map(lines) },
+            { label: 'Views', values: elements.map(views) },
+        ];
+    }
+
+    /**
+     * Merge some elements into one, one undo step (ArchimateModel#mergeCommand).
+     * Their relationships always come together. When they differ in anything
+     * but the views they are on, they are shown side by side
+     * (MergeCompareDialog) to choose which is kept and, where they differ, the
+     * documentation (one, or all joined), each property's value, the
+     * specialization; OK merges, Cancel leaves them. Alike, the first is kept
+     * without asking. Resolves to the merge's command, or null.
+     */
+    async askMerge(elementIds) {
         const elements = elementIds.map(id => this.model.getElement(id)).filter(Boolean);
         if (elements.length < 2) return null;
         const used = (e) => {
@@ -314,20 +469,40 @@ export class ArchimateCanvasEditor extends DiagramEditor {
             const { incoming, outgoing } = this.model.relationshipsFor(e.id);
             return `${views} view${views === 1 ? '' : 's'}, ${incoming.length + outgoing.length} relationship${incoming.length + outgoing.length === 1 ? '' : 's'}`;
         };
-        return new FormDialog({
+        const ids = elements.map(e => e.id);
+        const rows = this.mergeComparison(elements);
+        const compare = new MergeCompareDialog({
             title: `Merge ${elements.length} elements`,
-            description: 'The one kept takes the others\' relationships, their boxes on every view, and the documentation and properties it lacks; the others go.',
-            fields: [{ key: 'keep', label: 'Keep', type: 'select', value: elements[0].id, choices: elements.map(e => [e.id, `${e.name || e.id} (${used(e)})`]) }],
-            submitLabel: 'Merge',
-            idPrefix: 'merge-',
+            description: 'The one kept takes the others\' relationships, their boxes on every view, and the properties it lacks; the others go. Where they differ (marked ≠), choose.',
+            columns: elements.map(e => `${e.name || e.id} (${used(e)})`),
+            rows,
             document: this.document ?? globalThis.document,
-            onApply: ({ keep }) => this.mergeElements(keep, elementIds.filter(id => id !== keep)),
-        }).open();
+        });
+        // Views apart (their boxes all come to the kept one), nothing to choose: the first is kept.
+        if (!rows.some(row => row.label !== 'Views' && MergeCompareDialog.differs(row))) return this.mergeElements(ids[0], ids.slice(1));
+        const { documentation, properties, specializations } = this.mergeChoices(elements);
+        const JOINED = '\u0000joined';
+        const propertyKeys = [...properties.keys()];
+        compare.fields = [
+            { key: 'keep', label: 'Keep', type: 'select', value: ids[0], choices: elements.map(e => [e.id, `${e.name || e.id} (${used(e)})`]) },
+            ...(documentation.length ? [{ key: 'documentation', label: 'Documentation', type: 'select', value: JOINED, choices: [[JOINED, 'All of them, joined'], ...documentation] }] : []),
+            ...(specializations.length ? [{ key: 'specialization', label: 'Specialization', type: 'select', value: specializations[0], choices: specializations.map(s => [s, s]) }] : []),
+            ...propertyKeys.map((key, i) => ({ key: `property-${i}`, label: key, type: 'select', value: properties.get(key)[0][0], choices: properties.get(key) })),
+        ];
+        const values = await compare.ask();
+        if (!values) return null;
+        const { keep } = values;
+        const joined = () => [...new Set(elements.map(e => (e.documentation ?? '').trim()).filter(Boolean))].join('\n\n');
+        return this.mergeElements(keep, ids.filter(id => id !== keep), {
+            ...(documentation.length && { documentation: values.documentation === JOINED ? joined() : values.documentation }),
+            ...(specializations.length && { specialization: values.specialization }),
+            properties: Object.fromEntries(propertyKeys.map((key, i) => [key, values[`property-${i}`]])),
+        });
     }
 
-    /** Merge elements into one (`keepId`), one undo step; the canvas and tree redraw. */
-    mergeElements(keepId, otherIds) {
-        const cmd = this.model.mergeCommand(keepId, otherIds);
+    /** Merge elements into one (`keepId`), one undo step; the canvas and tree redraw. `choices`: MergeElementsCommand's. */
+    mergeElements(keepId, otherIds, choices = {}) {
+        const cmd = this.model.mergeCommand(keepId, otherIds, choices);
         this._executeCommand(cmd);
         return cmd;
     }

package/src/charting/archimate/ArchimatePalette.js

@@ -17,7 +17,7 @@ export class ArchimatePalette {
      * Tiles (one place, for every palette): a picture only, `columns` to a row,
      * its name on hover. A tile is there to say which type to drag, so it is small.
      */
-    static TILE = Object.freeze({ icon: 22, columns: 4, padding: '3px 1px', gap: '3px' });
+    static TILE = Object.freeze({ icon: 12, columns: 6, padding: '2px 1px', gap: '2px' });
 
     /**
      * The groups for a version: each layer that has types, then ArchiMate 4's

package/src/charting/charts/AreaChart.js

@@ -1,3 +1,4 @@
+import { Axis } from '../Axis.js';
 import { Chart } from '../Chart.js';
 import { ChartBox, ChartLabels } from '../ChartBox.js';
 import { Legend } from '../Legend.js';
@@ -54,7 +55,9 @@ export class AreaChart extends Chart {
             this.renderer.path('M' + topPts.map(p => `${p.px},${p.py}`).join(' L'), 'none', { color, width: 2 });
 
             if (seriesIndex === 0) {
+                const step = Axis.categoryLabelStep(s.values.map(d => d.label), width, { fontSize: 10 });
                 s.values.forEach((d, i) => {
+                    if (i % step) return;
                     this.renderer.text(d.label, x + i * pointMargin, y + height + 20, { textAnchor, fontSize: '10px' });
                 });
             }
@@ -62,8 +65,8 @@ export class AreaChart extends Chart {
 
         if (isMultiline && showLegend) {
             const legendItems = series.map((s, i) => ({ name: s.name, color: palette.colorAt(i) }));
-            new Legend({
-                items: legendItems, x: x + width + 20, y,
+            Legend.beside({ x, y, width }, this.renderer.width, {
+                items: legendItems,
                 itemHeight: 20, markerSize: 12,
             }).draw(this.renderer);
         }

package/src/charting/charts/BarChart.js

@@ -1,3 +1,4 @@
+import { Axis } from '../Axis.js';
 import { Legend } from '../Legend.js';
 import { DataFilter } from '../DataFilter.js';
 import { BarChartBase } from './BarChartBase.js';
@@ -27,6 +28,7 @@ export class BarChart extends BarChartBase {
         const data = this.data;
         const options = this.options;
         const { x, y, width, height } = this._plotBox;
+        const labelStep = Axis.categoryLabelStep(data.map(d => d.label), width);
         const { barColor = 'steelblue', colors } = options;
         const { bandWidth, margin } = this._bandScale(data.length);
         const textAnchor = this.renderer.centerTextAnchor;
@@ -43,7 +45,7 @@ export class BarChart extends BarChartBase {
 
             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.renderer.text(d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
+            if (i % labelStep === 0) this.renderer.text(d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
         });
     }
 
@@ -60,8 +62,8 @@ export class BarChart extends BarChartBase {
                 hidden: this._dataFilter.has(i),
                 dataIndex: i,
             }));
-            new Legend({
-                items: legendItems, x: x + width + 20, y,
+            Legend.beside({ x, y, width }, this.renderer.width, {
+                items: legendItems,
                 itemHeight: 20, markerSize: 10,
             }).draw(this.renderer);
         }

package/src/charting/charts/BarChart3DOrbit.js

@@ -1,3 +1,4 @@
+import { Legend } from '../Legend.js';
 import { ColorPalette } from '../ColorPalette.js';
 import { Chart3D } from '../Chart3D.js';
 
@@ -42,12 +43,9 @@ export class BarChart3DOrbit extends Chart3D {
             this.drawBox(this.renderer, bar.x0, bar.x1, 0, bar.y1, bar.z0, bar.z1, bar.color, toScreen);
         }
 
-        let legY = by + 10;
-        const legX = bx + width - 100;
-        zLabels.forEach((label, i) => {
-            this.renderer.circle(legX + 5, legY, 5, palette.colorAt(i), null, {});
-            this.renderer.text(String(label), legX + 16, legY + 4, { textAnchor: 'start', fontSize: '11px', fill: '#374151' });
-            legY += 18;
-        });
+        new Legend({
+            items: zLabels.map((label, i) => ({ label: String(label), color: palette.colorAt(i) })),
+            x: bx + width - 100, y: by + 5, itemHeight: 18, fontSize: '11px', marker: 'circle',
+        }).draw(this.renderer);
     }
 }

package/src/charting/charts/BubbleChart.js

@@ -1,3 +1,4 @@
+import { Legend } from '../Legend.js';
 import { Chart } from '../Chart.js';
 import { ChartBox, ChartLabels } from '../ChartBox.js';
 import { ColorPalette } from '../ColorPalette.js';
@@ -87,13 +88,10 @@ export class BubbleChart extends Chart {
 
         // Category color legend
         if (catField && catColors.size > 0) {
-            let legY = y + 10;
-            const legX = x + width + 20;
-            for (const [cat, color] of catColors) {
-                this.renderer.circle(legX + 5, legY, 5, color, null, {});
-                this.renderer.text(String(cat), legX + 16, legY + 4, { textAnchor: 'start', fontSize: '11px', fill: '#374151' });
-                legY += 18;
-            }
+            Legend.beside({ x, y, width }, this.renderer.width, {
+                items: [...catColors].map(([cat, color]) => ({ label: String(cat), color })),
+                itemHeight: 18, fontSize: '11px', marker: 'circle',
+            }).draw(this.renderer);
         }
     }
 }

package/src/charting/charts/BubbleChart3D.js

@@ -1,3 +1,4 @@
+import { Legend } from '../Legend.js';
 import { ColorPalette } from '../ColorPalette.js';
 import { Chart3D } from '../Chart3D.js';
 import { ChartData } from '../ChartData.js';
@@ -66,13 +67,10 @@ export class BubbleChart3D extends Chart3D {
         }
 
         if (catField && catColors.size > 0) {
-            let legY = by + 10;
-            const legX = bx + width - 90;
-            for (const [cat, color] of catColors) {
-                this.renderer.circle(legX + 5, legY, 5, color, null, {});
-                this.renderer.text(String(cat), legX + 16, legY + 4, { textAnchor: 'start', fontSize: '11px', fill: '#374151' });
-                legY += 18;
-            }
+            new Legend({
+                items: [...catColors].map(([cat, color]) => ({ label: String(cat), color })),
+                x: bx + width - 90, y: by + 5, itemHeight: 18, fontSize: '11px', marker: 'circle',
+            }).draw(this.renderer);
         }
     }
 }

package/src/charting/charts/CandlestickChart.js

@@ -1,3 +1,4 @@
+import { Axis } from '../Axis.js';
 import { Chart } from '../Chart.js';
 import { ChartBox, ChartLabels } from '../ChartBox.js';
 
@@ -22,6 +23,7 @@ export class CandlestickChart extends Chart {
         const vMin = Math.min(...data.map(d => d.low));
         const range = (vMax - vMin) || 1;
         const slotWidth = width / data.length;
+        const labelStep = Axis.categoryLabelStep(data.map(d => d.label), width, { fontSize: 10 });
         const bodyWidth = slotWidth * 0.6;
         const toY = (v) => y + height - ((v - vMin) / range) * height;
         const textAnchor = this.renderer.centerTextAnchor;
@@ -39,7 +41,7 @@ export class CandlestickChart extends Chart {
             this.renderer.rect(cx - bodyWidth / 2, bodyTop, bodyWidth, Math.max(1, bodyBottom - bodyTop), color, null, {
                 tooltip: `${d.label}: O ${d.open} H ${d.high} L ${d.low} C ${d.close}`,
             });
-            if (i % Math.ceil(data.length / 10 || 1) === 0) {
+            if (i % labelStep === 0) {
                 this.renderer.text(d.label, cx, y + height + 20, { textAnchor, fontSize: '10px' });
             }
         });

package/src/charting/charts/DensityChart.js

@@ -1,3 +1,4 @@
+import { Legend } from '../Legend.js';
 import { Chart } from '../Chart.js';
 import { ChartBox, ChartLabels } from '../ChartBox.js';
 import { ColorPalette } from '../ColorPalette.js';
@@ -62,12 +63,9 @@ export class DensityChart extends Chart {
         });
 
         if (showLegend) {
-            data.forEach((d, i) => {
-                const legendX = x + width + 20;
-                const legendY = y + i * 20;
-                this.renderer.rect(legendX, legendY, 12, 12, palette.colorAt(i), null);
-                this.renderer.text(d.label, legendX + 20, legendY + 6, { fontSize: '12px', fill: '#333' });
-            });
+            Legend.beside({ x, y, width }, this.renderer.width, {
+                items: data.map((d, i) => ({ label: d.label, color: palette.colorAt(i) })), markerSize: 12,
+            }).draw(this.renderer);
         }
     }
 }

package/src/charting/charts/GroupedBarChart.js

@@ -79,8 +79,8 @@ export class GroupedBarChart extends BarChartBase {
                 color: this._palette.colorAt(i),
                 dataIndex: i,
             }));
-            new Legend({
-                items: legendItems, x: x + width + 20, y,
+            Legend.beside({ x, y, width }, this.renderer.width, {
+                items: legendItems,
                 itemHeight: 20, markerSize: 10,
             }).draw(this.renderer);
         }

package/src/charting/charts/LineChart.js

@@ -1,3 +1,4 @@
+import { Axis } from '../Axis.js';
 import { Chart } from '../Chart.js';
 import { ChartBox, ChartLabels } from '../ChartBox.js';
 import { Legend } from '../Legend.js';
@@ -104,7 +105,9 @@ export class LineChart extends Chart {
             // series' own seriesDepth (not the raw max `depth`) for the x-shift
             // so labels line up under series 0's actual (depth-shifted) points.
             if (seriesIndex === 0) {
+                const step = Axis.categoryLabelStep(seriesValues.map(d => d.label), width);
                 seriesValues.forEach((d, i) => {
+                    if (i % step) return;
                     const pointX = x + i * pointMargin + seriesDepth;
                     const textAnchor = this.renderer.centerTextAnchor;
                     this.renderer.text(d.label, pointX, y + height + 20, { textAnchor: textAnchor });
@@ -115,8 +118,8 @@ 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) }));
-            new Legend({
-                items: legendItems, x: x + width + 20, y,
+            Legend.beside({ x, y, width }, this.renderer.width, {
+                items: legendItems,
                 itemHeight: 20, markerSize: 12,
             }).draw(this.renderer);
         }

package/src/charting/charts/ParallelCoordinatesChart.js

@@ -94,8 +94,8 @@ export class ParallelCoordinatesChart extends Chart {
 
         if (legendVisible && hasCategories) {
             const legendItems = categories.map((c, i) => ({ name: c, color: palette.colorAt(i) }));
-            new Legend({
-                items: legendItems, x: x + width + 20, y,
+            Legend.beside({ x, y, width }, this.renderer.width, {
+                items: legendItems,
                 itemHeight: 20, markerSize: 12,
             }).draw(this.renderer);
         }

package/src/charting/charts/PipeChart.js

@@ -1,3 +1,4 @@
+import { Legend } from '../Legend.js';
 import { Chart } from '../Chart.js';
 import { ChartBox, ChartLabels } from '../ChartBox.js';
 import { ColorPalette } from '../ColorPalette.js';
@@ -77,12 +78,9 @@ export class PipeChart extends Chart {
         });
 
         if (isMultiline && showLegend) {
-            series.forEach((s, i) => {
-                const legendX = x + width + 20;
-                const legendY = y + i * 20;
-                this.renderer.rect(legendX, legendY, 12, 12, palette.colorAt(i), null);
-                this.renderer.text(s.name, legendX + 20, legendY + 6, { fontSize: '12px', fill: '#333' });
-            });
+            Legend.beside({ x, y, width }, this.renderer.width, {
+                items: series.map((s, i) => ({ name: s.name, color: palette.colorAt(i) })), markerSize: 12,
+            }).draw(this.renderer);
         }
     }
 }

package/src/charting/charts/RadarChart.js

@@ -1,3 +1,4 @@
+import { Legend } from '../Legend.js';
 import { Chart } from '../Chart.js';
 import { ColorPalette } from '../ColorPalette.js';
 
@@ -65,12 +66,10 @@ export class RadarChart extends Chart {
         });
 
         if (isMulti && showLegend) {
-            series.forEach((s, i) => {
-                const legendX = cx + radius + 40;
-                const legendY = cy - radius + i * 20;
-                this.renderer.rect(legendX, legendY, 12, 12, palette.colorAt(i), null);
-                this.renderer.text(s.name, legendX + 18, legendY + 6, { fontSize: '12px', fill: '#333', verticalAlign: 'middle' });
-            });
+            new Legend({
+                items: series.map((s, i) => ({ name: s.name, color: palette.colorAt(i) })),
+                x: cx + radius + 40, y: cy - radius, markerSize: 12,
+            }).draw(this.renderer);
         }
     }
 }

package/src/charting/charts/ScatterChart.js

@@ -1,3 +1,4 @@
+import { Legend } from '../Legend.js';
 import { Chart } from '../Chart.js';
 import { ChartBox, ChartLabels } from '../ChartBox.js';
 import { ColorPalette } from '../ColorPalette.js';
@@ -92,13 +93,10 @@ export class ScatterChart extends Chart {
         // Category color legend — same inline pattern as bubbleChart (not the
         // generic showLegend mechanism other 2D charts use).
         if (catField && catColors.size > 0) {
-            let legY = y + 10;
-            const legX = x + width + 20;
-            for (const [cat, color] of catColors) {
-                this.renderer.circle(legX + 5, legY, 5, color, null, {});
-                this.renderer.text(String(cat), legX + 16, legY + 4, { textAnchor: 'start', fontSize: '11px', fill: '#374151' });
-                legY += 18;
-            }
+            Legend.beside({ x, y, width }, this.renderer.width, {
+                items: [...catColors].map(([cat, color]) => ({ label: String(cat), color })),
+                itemHeight: 18, fontSize: '11px', marker: 'circle',
+            }).draw(this.renderer);
         }
     }
 }

package/src/charting/charts/StackedBarChart.js

@@ -1,3 +1,4 @@
+import { Axis } from '../Axis.js';
 import { BarChartBase } from './BarChartBase.js';
 
 /**
@@ -13,7 +14,8 @@ export class StackedBarChart extends BarChartBase {
 
     _renderBars(maxStackValue) {
         const data = this.data;
-        const { x, y, height } = this._plotBox;
+        const { x, y, width, height } = this._plotBox;
+        const labelStep = Axis.categoryLabelStep(data.map(d => d.label), width);
         const { bandWidth, margin } = this._bandScale(data.length);
         const textAnchor = this.renderer.centerTextAnchor;
 
@@ -27,7 +29,7 @@ export class StackedBarChart extends BarChartBase {
                     tooltip: `${d.label} - Series ${j + 1}: ${value}`,
                 });
             });
-            this.renderer.text(d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
+            if (i % labelStep === 0) this.renderer.text(d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
         });
     }
 }

package/src/charting/charts/StackedBarChart3DOrbit.js

@@ -1,3 +1,4 @@
+import { Legend } from '../Legend.js';
 import { ColorPalette } from '../ColorPalette.js';
 import { Chart3D } from '../Chart3D.js';
 
@@ -47,12 +48,9 @@ export class StackedBarChart3DOrbit extends Chart3D {
         }
 
         const maxSegments = Math.max(...data.map(d => d.values.length));
-        let legY = by + 10;
-        const legX = bx + width - 100;
-        for (let j = 0; j < maxSegments; j++) {
-            this.renderer.circle(legX + 5, legY, 5, palette.colorAt(j), null, {});
-            this.renderer.text(`Series ${j + 1}`, legX + 16, legY + 4, { textAnchor: 'start', fontSize: '11px', fill: '#374151' });
-            legY += 18;
-        }
+        new Legend({
+            items: Array.from({ length: maxSegments }, (_, j) => ({ label: `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

@@ -1,3 +1,4 @@
+import { Axis } from '../Axis.js';
 import { Chart } from '../Chart.js';
 import { ColorPalette } from '../ColorPalette.js';
 import { Legend } from '../Legend.js';
@@ -110,7 +111,9 @@ export class StreamGraphChart extends Chart {
         });
 
         // X-axis labels.
+        const labelStep = Axis.categoryLabelStep(series[0].values.map(d => d.label), width, { fontSize: 10 });
         series[0].values.forEach((d, i) => {
+            if (i % labelStep) return;
             this.renderer.text(d.label, x + i * pointMargin, y + height + 16, { textAnchor, fontSize: '10px', fill: '#666' });
         });
 
@@ -122,8 +125,8 @@ export class StreamGraphChart extends Chart {
 
         if (isMultiline && showLegend) {
             const legendItems = series.map((s, i) => ({ label: s.name, color: palette.colorAt(i) }));
-            new Legend({
-                items: legendItems, x: x + width + 20, y,
+            Legend.beside({ x, y, width }, this.renderer.width, {
+                items: legendItems,
                 itemHeight: 20, markerSize: 12,
             }).draw(this.renderer);
         }

package/src/charting/charts/WaterfallChart.js

@@ -38,6 +38,7 @@ export class WaterfallChart extends Chart {
         const range = (vMax - vMin) || 1;
         const toY = (v) => y + height - ((v - vMin) / range) * height;
         const barWidth = width / data.length * 0.7;
+        const labelStep = Axis.categoryLabelStep(data.map(d => d.label), width, { fontSize: 10 });
         const barMargin = width / data.length * 0.3;
         const textAnchor = this.renderer.centerTextAnchor;
 
@@ -60,7 +61,7 @@ export class WaterfallChart extends Chart {
             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)})`,
             });
-            this.renderer.text(d.label, barX + barWidth / 2, y + height + 20, { textAnchor, fontSize: '10px' });
+            if (i % labelStep === 0) this.renderer.text(d.label, barX + barWidth / 2, y + height + 20, { textAnchor, fontSize: '10px' });
         });
     }
 }