@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/canvas/CanvasTemplateMenu.js

@@ -0,0 +1,151 @@
+import { FormDialog } from '../FormDialog.js';
+import { pickFile } from '../toolbar/pickFile.js';
+
+/**
+ * CanvasTemplateMenu — the menu items for canvases and their templates: a new
+ * canvas (empty, or from a model template or a library entry), saving a canvas
+ * as a template (in the model, or in the library for every model), importing
+ * Archi's templates into the library, and looking after both kinds of
+ * template. One source for the model tree and the File menu, as ViewMenu is
+ * for views. Items are PopupMenu items: `{label, action}`, `{label, items}`
+ * (a submenu) or `{separator: true}`.
+ */
+export class CanvasTemplateMenu {
+    /**
+     * @param {ArchimateModel} model
+     * @param {Object} [options]
+     * @param {CanvasTemplateLibrary} [options.library] - Templates across models; none, no library items
+     * @param {Document|Function} [options.document] - The page, or a function returning it
+     * @param {(accept: string) => Promise<File|null>} [options.chooseFile] - Asks for a file (pickFile by default)
+     * @param {(title: string, value: string, onName: (name: string) => void) => void} [options.askName] - Asks for a name
+     *   (a FormDialog by default) and calls onName with it, unless cancelled
+     * @param {(message: string) => void} [options.report] - Says what went wrong (an import that failed)
+     */
+    constructor(model, { library = null, document: doc = null, chooseFile = null, askName = null, report = null } = {}) {
+        this.model = model;
+        this.library = library;
+        this._document = doc;
+        this.chooseFile = chooseFile ?? ((accept) => pickFile(accept, this.document));
+        this.report = report ?? ((message) => (this.document.defaultView ?? globalThis).alert?.(message));
+        this.askName = askName ?? ((title, value, onName) => this._askName(title, value, onName));
+    }
+
+    get document() {
+        const doc = typeof this._document === 'function' ? this._document() : this._document;
+        return doc ?? globalThis.document;
+    }
+
+    /** "New canvas…" and, when there are templates, "New canvas from template" (a submenu). */
+    newCanvasItems() {
+        const fromTemplate = this._templateChoices();
+        return [
+            { label: 'New canvas…', action: () => this.askName('New canvas', `Canvas ${this.model.canvases().length + 1}`, (title) => this.model.createCanvas(title)) },
+            ...(fromTemplate.length ? [{ label: 'New canvas from template', items: fromTemplate }] : []),
+        ];
+    }
+
+    /**
+     * For a canvas, or some of its boxes (`itemIds`: a selection, a group): save
+     * them as a model template, or into the library.
+     */
+    saveAsTemplateItems(viewId, { itemIds = null } = {}) {
+        const view = this.model.getView(viewId);
+        if (view?.constructor.kind !== 'canvas' || view.template) return [];
+        const name = itemIds ? `${view.name} (part)` : view.name;
+        return [
+            { label: 'Save as model template…', action: () => this.askName('Save as model template', name, (title) => this.model.saveAsTemplate(viewId, title, { itemIds })) },
+            ...(this.library ? [{ label: 'Save to template library…', action: () => this.askName('Save to template library', name, (entryName) => this.library.add({ view: view.toJSON({ itemIds }), name: entryName, description: view.documentation ?? '' })) }] : []),
+        ];
+    }
+
+    /**
+     * Every template (the model's, then the library's) as an item that places
+     * it on a canvas at `at` (CanvasView#placeTemplate: its own locked
+     * background group). None for a view that is not a canvas.
+     * @param {string} viewId
+     * @param {{x: number, y: number}} [at] - Where its top left goes
+     */
+    placeTemplateItems(viewId, at = null) {
+        const view = this.model.getView(viewId);
+        if (view?.constructor.kind !== 'canvas') return [];
+        return this._templateChoices((source, name) => view.placeTemplate(source, { at, name: `${name} (template)` }), { except: view });
+    }
+
+    /** For a model template: make a canvas from it, copy it to the library. */
+    modelTemplateItems(viewId) {
+        const view = this.model.getView(viewId);
+        if (!view?.template) return [];
+        return [
+            { label: 'New canvas from this', action: () => this._newFrom(view) },
+            ...(this.library ? [{ label: 'Copy to template library', action: () => this.library.add({ view: view.toJSON(), description: view.documentation ?? '' }) }] : []),
+        ];
+    }
+
+    /** For a library entry: make a canvas from it, copy it into the model, and (unless built in) rename, remove. */
+    libraryEntryItems(entryId) {
+        const entry = this.library?.get(entryId);
+        if (!entry) return [];
+        const shared = [
+            { label: 'New canvas from this', action: () => this._newFrom(entry.view, entry.name) },
+            { label: 'Copy to model templates', action: () => this.model.addTemplate(entry.view, entry.name) },
+        ];
+        if (entry.builtIn) return shared;
+        return [
+            ...shared,
+            { label: 'Rename…', action: () => this.askName('Rename template', entry.name, (name) => this.library.update(entryId, { name })) },
+            { separator: true },
+            { label: 'Remove from library', danger: true, action: () => this._confirm(`Remove "${entry.name}" from the template library?`, () => this.library.remove(entryId)) },
+        ];
+    }
+
+    /** "Import Archi template…": an .archicanvas or .architemplate file into the library. */
+    importItem() {
+        if (!this.library) return null;
+        return { label: 'Import Archi template…', action: () => this.importArchiTemplate() };
+    }
+
+    /** Ask for an Archi template file and add its canvases to the library. @returns {Promise<Array<Object>>} the entries added */
+    async importArchiTemplate() {
+        const file = await this.chooseFile('.archicanvas,.architemplate');
+        if (!file) return [];
+        try {
+            return this.library.importArchiTemplate(new Uint8Array(await file.arrayBuffer()));
+        } catch (error) {
+            this.report(`Could not import ${file.name ?? 'the template'}: ${error.message}`);
+            return [];
+        }
+    }
+
+    /**
+     * An item per template (the model's, then the library's) doing `act(source, name)`:
+     * by default, a new canvas from it.
+     * @private
+     */
+    _templateChoices(act = (source, name) => this._newFrom(source, name), { except = null } = {}) {
+        const model = this.model.templates().filter(view => view !== except).map(view => ({ label: view.name, action: () => act(view, view.name) }));
+        const library = (this.library?.list() ?? []).map(entry => ({ label: entry.name, action: () => act(entry.view, entry.name) }));
+        return [...model, ...(model.length && library.length ? [{ separator: true }] : []), ...library];
+    }
+
+    /** @private */
+    _newFrom(template, name = template.name) {
+        return this.model.newCanvasFromTemplate(template, name);
+    }
+
+    /** @private */
+    _askName(title, value, onTitle) {
+        new FormDialog({
+            title,
+            submitLabel: 'OK',
+            document: this.document,
+            fields: [{ key: 'title', label: 'Name', type: 'text', value }],
+            onApply: ({ title: t }) => { if (t?.trim()) onTitle(t.trim()); },
+        }).open();
+    }
+
+    /** @private */
+    _confirm(message, then) {
+        const win = this.document.defaultView ?? globalThis;
+        if (win.confirm(message)) then();
+    }
+}

package/src/charting/canvas/EditHintCommand.js

@@ -0,0 +1,28 @@
+import { Command } from '../CommandHistory.js';
+import { ArchiHint } from './ArchiHint.js';
+
+/**
+ * EditHintCommand — set or clear the hint on anything that keeps an Archi
+ * record (`archi`): a canvas, or a box on one. One undo step.
+ */
+export class EditHintCommand extends Command {
+    /**
+     * @param {{archi: Object|null}} holder - A view or an instance
+     * @param {{title?: string, text?: string}} hint - Empty title and text clear it
+     */
+    constructor(holder, hint) {
+        super('Edit hint');
+        this.holder = holder;
+        this.hint = hint;
+        this._before = undefined;
+    }
+
+    execute() {
+        this._before = this.holder.archi ?? null;
+        this.holder.archi = ArchiHint.write(this.holder.archi, this.hint);
+    }
+
+    undo() {
+        this.holder.archi = this._before;
+    }
+}

package/src/charting/canvas/canvasBoxKinds.js

@@ -0,0 +1,27 @@
+import { CanvasBoxKind } from './CanvasBoxKind.js';
+
+/**
+ * Archi's canvas palette: Block, Sticky and Image (its Connection is a plain
+ * line, CanvasView#connect). The looks match what Archi draws for a new one:
+ * a block is a bordered white box with its text at the top, a sticky a
+ * borderless yellow note with its text in the middle.
+ */
+export const CANVAS_BOX_KINDS = Object.freeze([
+    new CanvasBoxKind({
+        key: 'block', label: 'Block', icon: '▭', archiVisualType: 'canvas-model-block', width: 200, height: 150,
+        appearance: { fillColor: '#ffffff', strokeColor: '#000000', textAlign: 'center', textPosition: 'top' },
+    }),
+    new CanvasBoxKind({
+        key: 'sticky', label: 'Sticky', icon: '🗒', archiVisualType: 'canvas-model-sticky', width: 120, height: 80,
+        appearance: { fillColor: '#fff59d', strokeColor: 'none', textAlign: 'center', textPosition: 'middle' },
+    }),
+    new CanvasBoxKind({
+        key: 'image', label: 'Image', icon: '🖼', archiVisualType: 'canvas-model-image', width: 160, height: 120, shape: 'image',
+        appearance: { strokeColor: 'none' },
+    }),
+]);
+
+/** A canvas box kind by key, or undefined. */
+export function canvasBoxKind(key) {
+    return CANVAS_BOX_KINDS.find(k => k.key === key);
+}

package/src/charting/canvas/canvasBoxMenuItems.js

@@ -0,0 +1,40 @@
+import { pickFile } from '../toolbar/pickFile.js';
+
+/**
+ * The boxes a view adds besides elements, as menu items: on a canvas Add
+ * Block, Add Sticky, Add Image…; on an ArchiMate view Add Note, Add Image…
+ * (the view's BOX_KINDS). Each adds the box centred at `at` (addBox, one undo
+ * step). One definition for every editor that shows a view.
+ * @param {ArchimateView} view
+ * @param {{x: number, y: number}} at
+ * @param {Object} [options]
+ * @param {(box) => void} [options.onAdded] - After a box is added (redraw, select it)
+ * @param {() => Promise<string|null>} [options.chooseImage] - Asks for a picture, as a data: URL
+ *   (default: a file chooser)
+ * @param {Document} [options.document]
+ * @returns {Array<{label, action}>}
+ */
+export function canvasBoxMenuItems(view, at, { onAdded = () => {}, chooseImage = null, document: doc = globalThis.document } = {}) {
+    if (typeof view?.addBox !== 'function') return [];
+    const choose = chooseImage ?? (() => chooseImageFile(doc));
+    return (view.constructor.BOX_KINDS ?? []).map(kind => ({
+        label: `${kind.icon} Add ${kind.label}${kind.shape === 'image' ? '…' : ''}`,
+        action: async () => {
+            const iconUrl = kind.shape === 'image' ? await choose() : undefined;
+            if (kind.shape === 'image' && !iconUrl) return;
+            onAdded(view.addBox(kind.key, at, iconUrl ? { iconUrl } : {}));
+        },
+    }));
+}
+
+/** Ask for a picture file and read it as a data: URL (null if none is chosen). */
+export async function chooseImageFile(doc = globalThis.document) {
+    const file = await pickFile('image/*', doc);
+    if (!file) return null;
+    return new Promise((resolve) => {
+        const reader = new (doc.defaultView ?? globalThis).FileReader();
+        reader.onload = (e) => resolve(e.target.result);
+        reader.onerror = () => resolve(null);
+        reader.readAsDataURL(file);
+    });
+}

package/src/charting/canvas/defaultCanvasTemplates.js

@@ -0,0 +1,186 @@
+/**
+ * The canvas templates a CanvasTemplateLibrary offers out of the box: common
+ * planning and analysis canvases, written here (Archi's own templates are
+ * licensed CC BY-SA, so they are imported from an Archi install, not bundled).
+ *
+ * Each is a library entry: `{ id, name, description, thumbnail, builtIn, view }`,
+ * the view in CanvasView JSON form, made by `canvasTemplate()` from a list of
+ * blocks. Every block carries a hint (Archi's hintTitle / hintContent), as
+ * Archi's canvases do, so the template explains itself in Archi too.
+ */
+
+/** Pale fills that keep black text readable. */
+const FILL = Object.freeze({
+    green: '#d9f2d0', red: '#fadbd8', blue: '#d6e9f8', yellow: '#fff5c2', orange: '#fde5cc',
+    purple: '#e8dcf2', grey: '#eeeeee', teal: '#d4f0ec', white: '#ffffff',
+});
+
+/**
+ * A canvas template entry from its blocks.
+ * @param {Object} spec
+ * @param {string} spec.id - The entry's id (kept stable: `builtin-...`)
+ * @param {string} spec.name
+ * @param {string} spec.description
+ * @param {Array<{title: string, x: number, y: number, width: number, height: number, fill?: string,
+ *   hint?: string, kind?: 'block'|'sticky', fontSize?: string}>} spec.blocks - Top-left corners
+ * @returns {Object} a library entry
+ */
+export function canvasTemplate({ id, name, description, blocks }) {
+    const elementInstances = blocks.map((block, i) => {
+        const kind = block.kind ?? 'block';
+        const boxId = `${id}-${i + 1}`;
+        const isBlock = kind === 'block';
+        return {
+            id: `${boxId}-instance`,
+            elementId: boxId,
+            x: block.x + block.width / 2,
+            y: block.y + block.height / 2,
+            labelOverride: null,
+            visible: true,
+            zIndex: i,
+            size: { width: block.width, height: block.height },
+            appearance: {
+                fillColor: block.fill ?? (isBlock ? FILL.white : FILL.yellow),
+                strokeColor: isBlock ? '#555555' : 'none',
+                textAlign: 'center',
+                textPosition: isBlock ? 'top' : 'middle',
+                fontSize: block.fontSize ?? (isBlock ? '12pt' : '10pt'),
+                ...(isBlock && { fontWeight: 'bold' }),
+            },
+            ...(block.hint && {
+                archi: {
+                    attributes: { hintTitle: block.title },
+                    elements: [{ tag: 'hintContent', text: block.hint, attributes: {} }],
+                },
+            }),
+            content: {
+                id: boxId, name: block.title, label: block.title, shape: 'rect',
+                archiVisualType: isBlock ? 'canvas-model-block' : 'canvas-model-sticky',
+                width: block.width, height: block.height,
+            },
+        };
+    });
+    return Object.freeze({
+        id, name, description, thumbnail: null, builtIn: true,
+        view: {
+            name, documentation: description, properties: [],
+            archi: { attributes: { hintTitle: name }, elements: [{ tag: 'hintContent', text: description, attributes: {} }] },
+            elementInstances, viewConnections: [], arrangement: { groups: [], locked: [] },
+        },
+    });
+}
+
+/** Blocks in a grid of `columns`, each `width` x `height`, starting at (x, y). */
+function grid(cells, { columns, width, height, x = 20, y = 80, gap = 10 }) {
+    return cells.map((cell, i) => ({
+        ...cell,
+        x: x + (i % columns) * (width + gap),
+        y: y + Math.floor(i / columns) * (height + gap),
+        width, height,
+    }));
+}
+
+/** A title sticky across the top. */
+const title = (text, width) => ({ title: text, x: 20, y: 20, width, height: 50, kind: 'sticky', fill: FILL.white, fontSize: '16pt' });
+
+export const DEFAULT_CANVAS_TEMPLATES = Object.freeze([
+    canvasTemplate({
+        id: 'builtin-swot',
+        name: 'SWOT analysis',
+        description: 'Strengths and weaknesses inside the organisation; opportunities and threats outside it.',
+        blocks: [
+            title('SWOT analysis', 830),
+            ...grid([
+                { title: 'Strengths', fill: FILL.green, hint: 'What does the organisation do well? What advantages does it have over others?' },
+                { title: 'Weaknesses', fill: FILL.red, hint: 'What could be improved? Where does it lack resources or capability?' },
+                { title: 'Opportunities', fill: FILL.blue, hint: 'Which outside trends, changes or openings could it use?' },
+                { title: 'Threats', fill: FILL.yellow, hint: 'Which outside changes, competitors or risks could harm it?' },
+            ], { columns: 2, width: 410, height: 260 }),
+        ],
+    }),
+    canvasTemplate({
+        id: 'builtin-pestle',
+        name: 'PESTLE analysis',
+        description: 'The outside factors that shape a strategy: political, economic, social, technological, legal and environmental.',
+        blocks: [
+            title('PESTLE analysis', 830),
+            ...grid([
+                { title: 'Political', fill: FILL.red, hint: 'Government policy, stability, trade and tax policy.' },
+                { title: 'Economic', fill: FILL.orange, hint: 'Growth, interest and exchange rates, inflation, spending.' },
+                { title: 'Social', fill: FILL.yellow, hint: 'Demographics, culture, attitudes, education, lifestyle.' },
+                { title: 'Technological', fill: FILL.blue, hint: 'New technology, automation, research, rate of change.' },
+                { title: 'Legal', fill: FILL.purple, hint: 'Laws and regulation: employment, consumer, data, health and safety.' },
+                { title: 'Environmental', fill: FILL.green, hint: 'Climate, sustainability, environmental regulation, resources.' },
+            ], { columns: 3, width: 270, height: 240 }),
+        ],
+    }),
+    canvasTemplate({
+        id: 'builtin-stakeholders',
+        name: 'Stakeholder map',
+        description: 'Stakeholders placed by their power over the work and their interest in it, with how to engage each group.',
+        blocks: [
+            title('Stakeholder map: power and interest', 830),
+            ...grid([
+                { title: 'Keep satisfied (high power, low interest)', fill: FILL.yellow, hint: 'Meet their needs; keep them content without overloading them.' },
+                { title: 'Manage closely (high power, high interest)', fill: FILL.red, hint: 'Engage fully and make the greatest effort to satisfy them.' },
+                { title: 'Monitor (low power, low interest)', fill: FILL.grey, hint: 'Watch them, with minimum effort.' },
+                { title: 'Keep informed (low power, high interest)', fill: FILL.green, hint: 'Keep them adequately informed and talk to them to ensure no major issues arise.' },
+            ], { columns: 2, width: 410, height: 240 }),
+        ],
+    }),
+    canvasTemplate({
+        id: 'builtin-priority',
+        name: 'Priority matrix',
+        description: 'Tasks sorted by urgency and importance: do, schedule, delegate or drop.',
+        blocks: [
+            title('Priority matrix: urgent and important', 830),
+            ...grid([
+                { title: 'Do now (urgent, important)', fill: FILL.red, hint: 'Crises and deadlines: do these first.' },
+                { title: 'Schedule (not urgent, important)', fill: FILL.blue, hint: 'Planning, improvement, relationships: give them time.' },
+                { title: 'Delegate (urgent, not important)', fill: FILL.yellow, hint: 'Interruptions and some requests: hand them on.' },
+                { title: 'Drop (not urgent, not important)', fill: FILL.grey, hint: 'Busywork and distractions: stop doing them.' },
+            ], { columns: 2, width: 410, height: 240 }),
+        ],
+    }),
+    canvasTemplate({
+        id: 'builtin-retrospective',
+        name: 'Retrospective',
+        description: 'A team looks back on a piece of work: what went well, what to improve, and what it will do next.',
+        blocks: [
+            title('Retrospective', 830),
+            ...grid([
+                { title: 'Went well', fill: FILL.green, hint: 'What worked, and should be kept?' },
+                { title: 'To improve', fill: FILL.orange, hint: 'What got in the way, or could be done better?' },
+                { title: 'Actions', fill: FILL.blue, hint: 'What will the team do differently, who owns it, and by when?' },
+            ], { columns: 3, width: 270, height: 420 }),
+        ],
+    }),
+    canvasTemplate({
+        id: 'builtin-kanban',
+        name: 'Kanban board',
+        description: 'Work items moving across the board from backlog to done.',
+        blocks: [
+            title('Kanban board', 830),
+            ...grid([
+                { title: 'Backlog', fill: FILL.grey, hint: 'Work not yet started, in priority order.' },
+                { title: 'To do', fill: FILL.yellow, hint: 'Work ready to start next.' },
+                { title: 'In progress', fill: FILL.blue, hint: 'Work being done now. Keep this column short.' },
+                { title: 'Done', fill: FILL.green, hint: 'Finished work.' },
+            ], { columns: 4, width: 200, height: 460 }),
+        ],
+    }),
+    canvasTemplate({
+        id: 'builtin-decision',
+        name: 'Architecture decision',
+        description: 'One architecture decision recorded: its context, the options considered, what was decided and what follows from it.',
+        blocks: [
+            title('Architecture decision', 830),
+            ...grid([
+                { title: 'Context', fill: FILL.grey, hint: 'The situation and forces that make a decision necessary.' },
+                { title: 'Options', fill: FILL.blue, hint: 'The options considered, with their pros and cons.' },
+                { title: 'Decision', fill: FILL.green, hint: 'What was decided, and why.' },
+                { title: 'Consequences', fill: FILL.orange, hint: 'What becomes easier or harder because of it; follow-up work.' },
+            ], { columns: 2, width: 410, height: 240 }),
+        ],
+    }),
+]);

package/src/charting/canvas/diagramBoxKinds.js

@@ -0,0 +1,12 @@
+import { CanvasBoxKind } from './CanvasBoxKind.js';
+
+/**
+ * The boxes Archi adds to an ArchiMate view besides elements: a Note and an
+ * Image (its Group is a folder drawn on the view). They carry no Archi class
+ * of their own: a note and a picture are written as Archi's Note and Image
+ * from their shape, as imported ones are.
+ */
+export const DIAGRAM_BOX_KINDS = Object.freeze([
+    new CanvasBoxKind({ key: 'note', label: 'Note', icon: '📝', width: 185, height: 80, shape: 'note' }),
+    new CanvasBoxKind({ key: 'image', label: 'Image', icon: '🖼', width: 160, height: 120, shape: 'image', appearance: { strokeColor: 'none' } }),
+]);

package/src/charting/canvas/hintMenuItems.js

@@ -0,0 +1,49 @@
+import { ArchiHint } from './ArchiHint.js';
+import { EditHintCommand } from './EditHintCommand.js';
+import { FormDialog } from '../FormDialog.js';
+
+/**
+ * "Edit Hint…" for a box on a canvas, or "Edit Canvas Hint…" for the canvas
+ * itself (no `itemId`): one definition for every editor that shows a canvas.
+ * The hint is asked for as a title and plain text, and set as one undo step on
+ * the canvas (EditHintCommand). None for a view that is not a canvas.
+ * @param {ArchimateView} view
+ * @param {string|null} itemId - The box, or null for the canvas
+ * @param {Object} [options]
+ * @param {(hint) => void} [options.onChange] - After it is set (redraw, show it)
+ * @param {(current, done) => void} [options.askHint] - Asks for {title, text} and calls done with it
+ *   (default: a FormDialog)
+ * @param {Document} [options.document]
+ * @returns {Array<{label, action}>}
+ */
+export function hintMenuItems(view, itemId = null, { onChange = () => {}, askHint = null, document: doc = globalThis.document } = {}) {
+    if (view?.constructor.kind !== 'canvas') return [];
+    const holder = itemId ? view.getElementInstance(itemId) : view;
+    if (!holder) return [];
+    const ask = askHint ?? ((current, done) => askHintDialog(current, done, { document: doc, what: itemId ? 'Hint' : 'Canvas hint' }));
+    return [{
+        label: itemId ? '💡 Edit Hint…' : '💡 Edit Canvas Hint…',
+        action: () => {
+            const current = ArchiHint.of(holder.archi) ?? { title: '', text: '' };
+            ask({ title: current.title, text: current.text }, (hint) => {
+                view.history.execute(new EditHintCommand(holder, hint));
+                onChange(ArchiHint.of(holder.archi));
+            });
+        },
+    }];
+}
+
+/** Ask for a hint's title and text in a FormDialog. */
+export function askHintDialog(current, done, { document: doc = globalThis.document, what = 'Hint' } = {}) {
+    new FormDialog({
+        title: `Edit ${what.toLowerCase()}`,
+        description: 'Shown in the Hints panel (and Archi\'s Hints view). Leave both empty to remove it.',
+        fields: [
+            { key: 'title', label: 'Title', type: 'text', value: current.title },
+            { key: 'text', label: 'Hint', type: 'textarea', rows: 6, value: current.text },
+        ],
+        submitLabel: 'Save',
+        document: doc,
+        onApply: ({ title, text }) => done({ title: title ?? '', text: text ?? '' }),
+    }).open();
+}

package/src/charting/charts/ArcGauge.js

@@ -0,0 +1,55 @@
+import { GaugeChart } from './GaugeChart.js';
+import { ArcTrack } from '../gauges/ArcTrack.js';
+
+/**
+ * ArcGauge — an arc filled to the value, its number in the middle: a half
+ * circle by default, or any start angle and sweep.
+ *
+ * Options: cx, cy, r (100, 100, 70), thickness (16), startAngle and sweep in
+ * degrees (180 and 180: a half circle over the top), cap ('round' ends), and
+ * every GaugeChart option (min, max, bands, target, ticks, ...). Without
+ * ticks the scale's two ends are labelled.
+ */
+export class ArcGauge extends GaugeChart {
+    static chartType = 'arcGauge';
+
+    static LAYOUT = { cx: 100, cy: 100, r: 70, thickness: 16, startAngle: 180, sweep: 180 };
+
+    track() { return new ArcTrack(this.layout); }
+
+    _render() {
+        const { title, cap } = this.options;
+        const track = this.track();
+        const capOption = cap ? { cap } : {};
+        this.drawBackground(track, capOption);
+        this.drawValue(track, capOption);
+        this.drawTarget(track);
+        if (this.options.ticks) this.drawTicks(track);
+        else this.drawEnds(track);
+        this.drawLabels(track);
+        this._renderTitle(title, track.cx, this.titleY(track), { textAnchor: 'middle', fontSize: '12px', fill: '#747d8c' });
+    }
+
+    /** The value's number in the middle, a little above the centre for an open arc. */
+    drawLabels(track) {
+        const { cx, cy, r } = track;
+        this._renderValueLabel(cx, cy - r * 0.15, { fontSize: `${Math.max(12, Math.round(r * 0.32))}px`, fill: '#2f3542', fontWeight: 'bold' });
+    }
+
+    /** Below the arc's lowest point. */
+    titleY(track) {
+        const lowest = Math.max(track.point(0).y, track.point(1).y, track.cy);
+        return lowest + track.thickness / 2 + 18;
+    }
+
+    /** The scale's min and max under the arc's two ends. */
+    drawEnds(track) {
+        const below = track.thickness / 2 + 2;
+        for (const f of [0, 1]) {
+            const at = track.point(f);
+            this.renderer.text(this.scale.tickLabel(this.scale.valueAt(f), 1), at.x, at.y + below + 8, {
+                textAnchor: 'middle', verticalAlign: 'middle', fontSize: '10px', fill: '#747d8c',
+            });
+        }
+    }
+}

package/src/charting/charts/AreaChart.js

@@ -0,0 +1,71 @@
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { Legend } from '../Legend.js';
+import { ColorPalette } from '../ColorPalette.js';
+
+/**
+ * AreaChart — stacked or overlaid area chart.
+ */
+export class AreaChart extends Chart {
+    static chartType = 'area';
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            colors, title, xAxisLabel, yAxisLabel, stacked = false, legend: showLegend = false,
+        } = options;
+        const plotBox = { x, y, width, height };
+        const isMultiline = Array.isArray(data[0]?.values);
+        const series = isMultiline ? data : [{ name: 'default', values: data }];
+        const pointCount = series[0].values.length;
+        const pointMargin = pointCount > 1 ? width / (pointCount - 1) : width;
+        const palette = new ColorPalette(colors);
+        const textAnchor = this.renderer.centerTextAnchor;
+
+        // Precompute each series' [base, top] band per point — base is 0
+        // unless stacked, in which case it's the running cumulative of prior
+        // series (computed once here, not re-derived during render).
+        let running = new Array(pointCount).fill(0);
+        const bands = series.map(s => {
+            const band = s.values.map((d, i) => {
+                const base = stacked ? running[i] : 0;
+                return { base, top: base + d.value };
+            });
+            if (stacked) running = band.map(b => b.top);
+            return band;
+        });
+        const maxValue = Math.max(...bands.flat().map(b => b.top)) || 1;
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
+
+        series.forEach((s, seriesIndex) => {
+            const band = bands[seriesIndex];
+            const color = palette.colorAt(seriesIndex);
+            const topPts = band.map((b, i) => ({ px: x + i * pointMargin, py: y + height - (b.top / maxValue) * height }));
+            const basePts = band.map((b, i) => ({ px: x + i * pointMargin, py: y + height - (b.base / maxValue) * height }));
+            const areaPath = 'M' + topPts.map(p => `${p.px},${p.py}`).join(' L')
+                + ' L' + [...basePts].reverse().map(p => `${p.px},${p.py}`).join(' L') + ' Z';
+            const { r, g, b: bl } = palette.hexToRgb(color);
+            this.renderer.path(areaPath, `rgba(${r},${g},${bl},0.35)`, null, { tooltip: s.name });
+            this.renderer.path('M' + topPts.map(p => `${p.px},${p.py}`).join(' L'), 'none', { color, width: 2 });
+
+            if (seriesIndex === 0) {
+                s.values.forEach((d, i) => {
+                    this.renderer.text(d.label, x + i * pointMargin, y + height + 20, { textAnchor, fontSize: '10px' });
+                });
+            }
+        });
+
+        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,
+                itemHeight: 20, markerSize: 12,
+            }).draw(this.renderer);
+        }
+    }
+}