@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/DiagramTypeRegistry.js

@@ -0,0 +1,326 @@
+/**
+ * DiagramTypeRegistry — palette categories: which shapes each kind of diagram offers.
+ *
+ * Each category is pure data: `{ name, group, description, templates }`, where a
+ * template entry is `{ id, name, factory(id, x, y) }`. `group` drives the
+ * grouped category picker. The 'generic' key is the fallback for unknown types.
+ */
+import {
+    RectangleTemplate, RoundedRectangleTemplate, StadiumTemplate, PredefinedProcessTemplate,
+    ClassTemplate, ComponentTemplate, SwimlaneTemplate, CircleTemplate, FinalStateTemplate,
+    EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate,
+    OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate,
+    CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate,
+    PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate,
+} from './templates/index.js';
+
+const C = {
+    blue: '#dbeafe', green: '#dcfce7', yellow: '#fef9c3', red: '#fee2e2', purple: '#ede9fe',
+    orange: '#ffedd5', teal: '#ccfbf1', grey: '#f1f5f9', white: '#ffffff', dark: '#334155',
+};
+
+/** Palette entry whose instances are `TemplateClass` created with `options` and named `name`. */
+function shape(id, name, TemplateClass, options = {}) {
+    return { id, name, factory: (instanceId, x, y) => new TemplateClass(instanceId, name, { ...options, x, y }) };
+}
+
+const note = shape('note', 'Note', NoteTemplate);
+
+export const DIAGRAM_TYPES = {
+    'generic': {
+        name: 'Basic Shapes',
+        group: 'General',
+        description: 'General-purpose geometric shapes',
+        templates: [
+            shape('rectangle', 'Rectangle', RectangleTemplate, { fillColor: C.blue }),
+            shape('rounded-rectangle', 'Rounded', RoundedRectangleTemplate, { fillColor: C.blue }),
+            shape('circle', 'Circle', CircleTemplate, { fillColor: C.red }),
+            shape('ellipse', 'Ellipse', EllipseTemplate, { fillColor: C.purple }),
+            shape('diamond', 'Diamond', DiamondTemplate, { fillColor: C.yellow }),
+            shape('triangle', 'Triangle', TriangleTemplate, { fillColor: C.green }),
+            shape('pentagon', 'Pentagon', PentagonTemplate, { fillColor: C.teal }),
+            shape('hexagon', 'Hexagon', HexagonTemplate, { fillColor: C.orange }),
+            shape('octagon', 'Octagon', OctagonTemplate, { fillColor: C.red }),
+            shape('star', 'Star', StarTemplate, { fillColor: C.yellow }),
+            shape('parallelogram', 'Parallelogram', ParallelogramTemplate, { fillColor: C.green }),
+            shape('trapezoid', 'Trapezoid', TrapezoidTemplate, { fillColor: C.purple }),
+            shape('cylinder', 'Cylinder', CylinderTemplate, { fillColor: C.grey }),
+            shape('document', 'Document', DocumentTemplate, { fillColor: C.white }),
+            shape('cloud', 'Cloud', CloudTemplate, { fillColor: C.blue }),
+            note,
+        ],
+    },
+
+    'flowchart': {
+        name: 'Flowchart',
+        group: 'Process',
+        description: 'Steps, decisions and data in a process or algorithm',
+        templates: [
+            shape('terminator', 'Start / End', StadiumTemplate, { fillColor: C.green }),
+            shape('process', 'Process', RectangleTemplate, { fillColor: C.blue }),
+            shape('decision', 'Decision', DiamondTemplate, { fillColor: C.yellow }),
+            shape('data', 'Data (I/O)', ParallelogramTemplate, { fillColor: C.purple }),
+            shape('predefined-process', 'Subroutine', PredefinedProcessTemplate, { fillColor: C.blue }),
+            shape('document', 'Document', DocumentTemplate, { fillColor: C.white }),
+            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
+            shape('manual-input', 'Manual Input', ManualInputTemplate, { fillColor: C.orange }),
+            shape('manual-operation', 'Manual Op', TrapezoidTemplate, { fillColor: C.orange }),
+            shape('preparation', 'Preparation', HexagonTemplate, { fillColor: C.teal }),
+            shape('connector', 'Connector', CircleTemplate, { width: 30, height: 30, fillColor: C.white }),
+            note,
+        ],
+    },
+
+    'bpmn': {
+        name: 'BPMN Process',
+        group: 'Process',
+        description: 'Business process: events, tasks, gateways and lanes',
+        templates: [
+            shape('start-event', 'Start Event', CircleTemplate, { width: 40, height: 40, fillColor: C.green }),
+            shape('end-event', 'End Event', CircleTemplate, { width: 40, height: 40, fillColor: C.red, strokeWidth: 4 }),
+            shape('task', 'Task', RoundedRectangleTemplate, { fillColor: C.blue }),
+            shape('subprocess', 'Sub-Process', PredefinedProcessTemplate, { fillColor: C.blue }),
+            shape('gateway', 'Gateway', DiamondTemplate, { width: 50, height: 50, fillColor: C.yellow }),
+            shape('data-object', 'Data Object', NoteTemplate, { width: 50, height: 64, fillColor: C.white }),
+            shape('data-store', 'Data Store', CylinderTemplate, { width: 60, height: 60, fillColor: C.grey }),
+            shape('lane', 'Lane', SwimlaneTemplate, { zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'swimlane-diagram': {
+        name: 'Swimlane',
+        group: 'Process',
+        description: 'Flow steps divided into lanes by actor or department',
+        templates: [
+            shape('lane', 'Lane', SwimlaneTemplate, { zIndex: -1 }),
+            shape('start', 'Start / End', StadiumTemplate, { fillColor: C.green }),
+            shape('task', 'Task', RoundedRectangleTemplate, { width: 110, height: 50, fillColor: C.blue }),
+            shape('decision', 'Decision', DiamondTemplate, { width: 80, height: 80, fillColor: C.yellow }),
+            shape('document', 'Document', DocumentTemplate, { fillColor: C.white }),
+            note,
+        ],
+    },
+
+    'class-diagram': {
+        name: 'Class',
+        group: 'UML',
+        description: 'Classes, interfaces and their relationships',
+        templates: [
+            shape('class', 'Class', ClassTemplate, { fillColor: C.white }),
+            shape('abstract-class', 'Abstract Class', ClassTemplate, { fillColor: C.grey }),
+            shape('interface', '«interface»', ClassTemplate, { height: 80, fillColor: C.green }),
+            shape('enumeration', '«enumeration»', ClassTemplate, { height: 90, fillColor: C.yellow }),
+            shape('package', 'Package', PackageTemplate, { fillColor: C.grey, zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'sequence-diagram': {
+        name: 'Sequence',
+        group: 'UML',
+        description: 'Messages exchanged between participants over time',
+        templates: [
+            shape('actor', 'Actor', ActorTemplate),
+            shape('lifeline', 'Participant', LifelineTemplate, { fillColor: C.blue }),
+            shape('activation', 'Activation', RectangleTemplate, { width: 14, height: 80, fillColor: C.white }),
+            shape('fragment', 'Fragment', SwimlaneTemplate, { width: 300, height: 140, fillColor: C.white, fillOpacity: 0.3, zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'activity-diagram': {
+        name: 'Activity',
+        group: 'UML',
+        description: 'Actions, control flow, forks and joins',
+        templates: [
+            shape('initial', 'Initial', CircleTemplate, { width: 28, height: 28, fillColor: C.dark }),
+            shape('action', 'Action', RoundedRectangleTemplate, { fillColor: C.blue }),
+            shape('decision', 'Decision / Merge', DiamondTemplate, { width: 44, height: 44, fillColor: C.yellow }),
+            shape('fork-join', 'Fork / Join', RectangleTemplate, { width: 120, height: 8, fillColor: C.dark }),
+            shape('object', 'Object', RectangleTemplate, { fillColor: C.white }),
+            shape('final', 'Final', FinalStateTemplate),
+            shape('partition', 'Partition', SwimlaneTemplate, { zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'state-machine': {
+        name: 'State Machine',
+        group: 'UML',
+        description: 'States and the transitions between them',
+        templates: [
+            shape('initial', 'Initial', CircleTemplate, { width: 28, height: 28, fillColor: C.dark }),
+            shape('state', 'State', RoundedRectangleTemplate, { fillColor: C.blue }),
+            shape('composite-state', 'Composite State', RoundedRectangleTemplate, { width: 260, height: 160, fillColor: C.grey, zIndex: -1 }),
+            shape('choice', 'Choice', DiamondTemplate, { width: 40, height: 40, fillColor: C.yellow }),
+            shape('final', 'Final', FinalStateTemplate),
+            note,
+        ],
+    },
+
+    'use-case-diagram': {
+        name: 'Use Case',
+        group: 'UML',
+        description: 'Actors and the system functions they use',
+        templates: [
+            shape('actor', 'Actor', ActorTemplate),
+            shape('use-case', 'Use Case', EllipseTemplate, { width: 140, height: 60, fillColor: C.blue }),
+            shape('system', 'System Boundary', RectangleTemplate, { width: 300, height: 360, fillColor: C.white, zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'component-diagram': {
+        name: 'Component',
+        group: 'UML',
+        description: 'Software components and the interfaces that wire them',
+        templates: [
+            shape('component', 'Component', ComponentTemplate, { fillColor: C.blue }),
+            shape('interface', 'Interface', CircleTemplate, { width: 24, height: 24, fillColor: C.white }),
+            shape('package', 'Package', PackageTemplate, { fillColor: C.grey, zIndex: -1 }),
+            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
+            note,
+        ],
+    },
+
+    'deployment-diagram': {
+        name: 'Deployment',
+        group: 'UML',
+        description: 'Hardware nodes and the artifacts deployed to them',
+        templates: [
+            shape('node', 'Node', BoxTemplate, { fillColor: C.grey }),
+            shape('device', '«device»', BoxTemplate, { fillColor: C.blue }),
+            shape('execution-environment', '«exec env»', BoxTemplate, { fillColor: C.green }),
+            shape('artifact', '«artifact»', NoteTemplate, { fillColor: C.white }),
+            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
+            note,
+        ],
+    },
+
+    'er-diagram': {
+        name: 'Entity-Relationship',
+        group: 'Data',
+        description: 'Entities, attributes and relationships (Chen notation)',
+        templates: [
+            shape('entity', 'Entity', RectangleTemplate, { width: 140, height: 60, fillColor: C.blue }),
+            shape('relationship', 'Relationship', DiamondTemplate, { width: 120, height: 70, fillColor: C.yellow }),
+            shape('attribute', 'Attribute', EllipseTemplate, { width: 110, height: 50, fillColor: C.green }),
+            shape('table', 'Table', ClassTemplate, { fillColor: C.white }),
+            note,
+        ],
+    },
+
+    'data-flow-diagram': {
+        name: 'Data Flow',
+        group: 'Data',
+        description: 'How data moves between processes, stores and external entities',
+        templates: [
+            shape('process', 'Process', CircleTemplate, { width: 100, height: 100, fillColor: C.blue }),
+            shape('external-entity', 'External Entity', RectangleTemplate, { fillColor: C.grey }),
+            shape('data-store', 'Data Store', DataStoreTemplate, { fillColor: C.yellow }),
+            note,
+        ],
+    },
+
+    'network-diagram': {
+        name: 'Network',
+        group: 'Infrastructure',
+        description: 'Servers, clients and the connections between them',
+        templates: [
+            shape('server', 'Server', BoxTemplate, { width: 100, height: 110, fillColor: C.grey }),
+            shape('client', 'Client', RectangleTemplate, { width: 100, height: 70, fillColor: C.blue }),
+            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
+            shape('cloud', 'Cloud', CloudTemplate, { fillColor: C.blue }),
+            shape('router', 'Router', CircleTemplate, { width: 60, height: 60, fillColor: C.green }),
+            shape('firewall', 'Firewall', RectangleTemplate, { width: 40, height: 100, fillColor: C.red }),
+            shape('load-balancer', 'Load Balancer', HexagonTemplate, { fillColor: C.orange }),
+            shape('zone', 'Zone', SwimlaneTemplate, { fillColor: C.grey, fillOpacity: 0.5, zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'organizational-chart': {
+        name: 'Org Chart',
+        group: 'Business',
+        description: 'Reporting lines and departments',
+        templates: [
+            shape('executive', 'Executive', RoundedRectangleTemplate, { width: 140, height: 60, fillColor: C.purple }),
+            shape('manager', 'Manager', RoundedRectangleTemplate, { width: 130, height: 56, fillColor: C.blue }),
+            shape('staff', 'Staff', RoundedRectangleTemplate, { width: 120, height: 50, fillColor: C.white }),
+            shape('vacancy', 'Vacancy', RoundedRectangleTemplate, { width: 120, height: 50, fillColor: C.grey }),
+            shape('department', 'Department', SwimlaneTemplate, { width: 320, height: 200, zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'mind-map': {
+        name: 'Mind Map',
+        group: 'Ideas',
+        description: 'Topics radiating from a central idea',
+        templates: [
+            shape('central-topic', 'Central Topic', EllipseTemplate, { width: 170, height: 80, fillColor: C.orange, strokeWidth: 3 }),
+            shape('main-topic', 'Main Topic', StadiumTemplate, { width: 130, height: 44, fillColor: C.blue }),
+            shape('subtopic', 'Subtopic', RoundedRectangleTemplate, { width: 110, height: 34, fillColor: C.white }),
+            shape('idea', 'Idea', CloudTemplate, { width: 120, height: 72, fillColor: C.yellow }),
+            note,
+        ],
+    },
+
+    'concept-map': {
+        name: 'Concept Map',
+        group: 'Ideas',
+        description: 'Concepts joined by labelled relationships',
+        templates: [
+            shape('concept', 'Concept', RoundedRectangleTemplate, { fillColor: C.blue }),
+            shape('key-concept', 'Key Concept', EllipseTemplate, { width: 140, height: 70, fillColor: C.orange }),
+            shape('linking-phrase', 'Linking Phrase', RectangleTemplate, { width: 100, height: 30, fillColor: C.white, strokeWidth: 1 }),
+            note,
+        ],
+    },
+
+    'decision-tree': {
+        name: 'Decision Tree',
+        group: 'Ideas',
+        description: 'Decisions, chance events and outcomes',
+        templates: [
+            shape('decision', 'Decision', RectangleTemplate, { width: 60, height: 60, fillColor: C.blue }),
+            shape('chance', 'Chance', CircleTemplate, { width: 60, height: 60, fillColor: C.yellow }),
+            shape('outcome', 'Outcome', TriangleTemplate, { width: 60, height: 54, fillColor: C.green }),
+            shape('label', 'Label', RectangleTemplate, { width: 110, height: 30, fillColor: C.white, strokeWidth: 1 }),
+            note,
+        ],
+    },
+
+    'venn-diagram': {
+        name: 'Venn',
+        group: 'Ideas',
+        description: 'Overlapping sets',
+        templates: [
+            shape('set-a', 'Set A', CircleTemplate, { width: 180, height: 180, fillColor: '#60a5fa', fillOpacity: 0.35 }),
+            shape('set-b', 'Set B', CircleTemplate, { width: 180, height: 180, fillColor: '#f87171', fillOpacity: 0.35 }),
+            shape('set-c', 'Set C', CircleTemplate, { width: 180, height: 180, fillColor: '#4ade80', fillOpacity: 0.35 }),
+            shape('universe', 'Universe', RectangleTemplate, { width: 420, height: 320, fillColor: C.white, zIndex: -1 }),
+            note,
+        ],
+    },
+};
+
+/** Template entries for a category, falling back to 'generic' for unknown keys. */
+export function getTemplatesForDiagramType(diagramType) {
+    return (DIAGRAM_TYPES[diagramType] ?? DIAGRAM_TYPES.generic).templates;
+}
+
+export function getAllDiagramTypes() {
+    return Object.keys(DIAGRAM_TYPES);
+}
+
+/** Categories grouped for a picker, in registry order: [{ group, types: [{ key, name, description }] }]. */
+export function getDiagramTypesByGroup(types = DIAGRAM_TYPES) {
+    const groups = new Map();
+    for (const [key, { name, group = 'Other', description }] of Object.entries(types)) {
+        if (!groups.has(group)) groups.set(group, []);
+        groups.get(group).push({ key, name, description });
+    }
+    return [...groups].map(([group, entries]) => ({ group, types: entries }));
+}

package/src/charting/DiagramViewPropertiesDialog.js

@@ -0,0 +1,46 @@
+import { ViewPropertiesDialog } from './ViewPropertiesDialog.js';
+import { inheritableFields, readInheritableFields } from './SettingsCascade.js';
+import { EDGE_STYLE_PROPERTIES } from './edgeStyle/EdgeStyleSchema.js';
+import { SetStyleCommand } from './edgeStyle/SetStyleCommand.js';
+
+/**
+ * DiagramViewPropertiesDialog — a template-editor diagram's properties plus
+ * its line-style defaults: the diagram level of the line-style cascade
+ * (diagram → model → tool), each property inheriting unless set. The style
+ * change is one step on the model's undo history. Used by
+ * DiagramEditorPart.
+ */
+export class DiagramViewPropertiesDialog extends ViewPropertiesDialog {
+    /**
+     * @param {Object} options - As ViewPropertiesDialog, plus:
+     * @param {EdgeStyleCascade} options.cascade - The diagram's line-style levels, the diagram's own keyed `levelKey`
+     * @param {string} [options.levelKey] - Which level is this diagram's
+     * @param {() => void} [options.onStyleChange] - After the style changes (e.g. redraw)
+     */
+    constructor({ cascade, levelKey = 'view', onStyleChange = () => {}, ...rest }) {
+        super(rest);
+        this.cascade = cascade;
+        this.levelKey = levelKey;
+        this.onStyleChange = onStyleChange;
+    }
+
+    /** The diagram's own line style (its level's style object). */
+    get style() {
+        return this.cascade.level(this.levelKey).style;
+    }
+
+    sections() {
+        return [
+            { type: 'heading', label: 'Line style' },
+            ...inheritableFields(EDGE_STYLE_PROPERTIES, this.style, this.cascade.inheritedBy(this.levelKey)),
+        ];
+    }
+
+    applySections(values) {
+        const patch = readInheritableFields(EDGE_STYLE_PROPERTIES, values);
+        const changed = Object.entries(patch).some(([k, v]) => this.style[k] !== v);
+        if (!changed) return;
+        this.view.history.execute(new SetStyleCommand(this.style, patch, 'Diagram line style'));
+        this.onStyleChange();
+    }
+}

package/src/charting/Edge.js

@@ -0,0 +1,113 @@
+import { EDGE_STYLE_PROPERTIES } from './edgeStyle/EdgeStyleSchema.js';
+
+/**
+ * Edge — a connection between two diagram elements (templates).
+ *
+ * Style properties (routing, attach, lineStyle, strokeColor, strokeWidth,
+ * startMarker, endMarker — see EDGE_STYLE_PROPERTIES) are set only when this
+ * line overrides them; unset means "inherit" from the diagram, model or tool
+ * level via EdgeStyleCascade.
+ */
+export class Edge {
+    /**
+     * @param {string} id - Unique identifier
+     * @param {string} sourceId - Source template id
+     * @param {string} targetId - Target template id
+     * @param {Object} options - Line-only properties plus any style overrides
+     */
+    constructor(id, sourceId, targetId, options = {}) {
+        this.id = id;
+        this._initState(sourceId, targetId, options);
+
+        for (const { key } of EDGE_STYLE_PROPERTIES) {
+            if (options[key] !== undefined) this[key] = options[key];
+        }
+
+        // Selection is editor state (DiagramEditor#selectedEdgeId), not stored here,
+        // so a shared or copied edge can never carry a stale selection.
+    }
+
+    /**
+     * Set what this line keeps as its own fields: its ends, label, route (bend
+     * points; pinned sides 'auto', 'top', 'right', 'bottom', 'left', which beat
+     * the cascaded `attach`) and visibility. A subclass that keeps them
+     * elsewhere (an ArchiMate line keeps them on its view instance and model
+     * relationship) overrides this.
+     * @protected
+     */
+    _initState(sourceId, targetId, options) {
+        this.sourceId = sourceId;
+        this.targetId = targetId;
+        this.label = options.label || '';
+        this.waypoints = (options.waypoints ?? []).map(({ x, y }) => ({ x, y }));
+        this.sourceSide = options.sourceSide || 'auto';
+        this.targetSide = options.targetSide || 'auto';
+        this.visible = options.visible !== false;
+    }
+
+    /** Whether the user can select, route, reconnect and delete this line; a line only drawn from elsewhere (DerivedEdge) cannot. */
+    get editable() {
+        return true;
+    }
+
+    /** The style properties this line sets for itself (the properties dialog offers these): all of them here. */
+    get styleProperties() {
+        return EDGE_STYLE_PROPERTIES;
+    }
+
+    /** Extra text for the line's tooltip, or null. */
+    get tooltip() {
+        return null;
+    }
+
+    /** This line's own style overrides only. */
+    styleOverrides() {
+        return Object.fromEntries(EDGE_STYLE_PROPERTIES.filter(p => this[p.key] !== undefined).map(p => [p.key, this[p.key]]));
+    }
+
+    /**
+     * Create a copy of this edge; waypoints are copied, not shared.
+     */
+    clone() {
+        return new Edge(this.id, this.sourceId, this.targetId, {
+            label: this.label,
+            waypoints: this.waypoints,
+            sourceSide: this.sourceSide,
+            targetSide: this.targetSide,
+            visible: this.visible,
+            ...this.styleOverrides(),
+        });
+    }
+
+    /**
+     * Add a waypoint at the specified index.
+     */
+    addWaypoint(x, y, index = this.waypoints.length) {
+        this.waypoints.splice(index, 0, { x, y });
+    }
+
+    /**
+     * Remove a waypoint at the specified index.
+     */
+    removeWaypoint(index) {
+        if (index >= 0 && index < this.waypoints.length) {
+            this.waypoints.splice(index, 1);
+        }
+    }
+
+    /**
+     * Move a waypoint to a new position.
+     */
+    moveWaypoint(index, x, y) {
+        if (index >= 0 && index < this.waypoints.length) {
+            this.waypoints[index] = { x, y };
+        }
+    }
+
+    /**
+     * Clear all waypoints.
+     */
+    clearWaypoints() {
+        this.waypoints = [];
+    }
+}

package/src/charting/ErrorBars.js

@@ -0,0 +1,37 @@
+/**
+ * ErrorBars — helper for drawing x/y error bars on scatter and line charts.
+ *
+ * All coordinates are already in screen space; this class just draws the
+ * standard "I" shape with end caps per axis.
+ */
+export class ErrorBars {
+    /**
+     * Draw error bars for one point.
+     * @param {*} renderer the renderer implementing .path()
+     * @param {number} cx screen x of the central point
+     * @param {number} cy screen y of the central point
+     * @param {number|null} xLow left edge of horizontal error bar (or null for none)
+     * @param {number|null} xHigh right edge of horizontal error bar (or null for none)
+     * @param {number|null} yLow bottom edge of vertical error bar (or null for none)
+     * @param {number|null} yHigh top edge of vertical error bar (or null for none)
+     * @param {string} [color='#333'] stroke color
+     * @param {number} [cap=4] cap length in pixels
+     */
+    static draw(renderer, cx, cy, xLow, xHigh, yLow, yHigh, color = '#333', cap = 4) {
+        const stroke = { color, width: 1 };
+
+        if (xLow != null && xHigh != null && xLow !== xHigh) {
+            // Horizontal error bar
+            renderer.path(`M${xLow},${cy} L${xHigh},${cy}`, 'none', stroke);
+            renderer.path(`M${xLow},${cy - cap / 2} L${xLow},${cy + cap / 2}`, 'none', stroke);
+            renderer.path(`M${xHigh},${cy - cap / 2} L${xHigh},${cy + cap / 2}`, 'none', stroke);
+        }
+
+        if (yLow != null && yHigh != null && yLow !== yHigh) {
+            // Vertical error bar
+            renderer.path(`M${cx},${yLow} L${cx},${yHigh}`, 'none', stroke);
+            renderer.path(`M${cx - cap / 2},${yLow} L${cx + cap / 2},${yLow}`, 'none', stroke);
+            renderer.path(`M${cx - cap / 2},${yHigh} L${cx + cap / 2},${yHigh}`, 'none', stroke);
+        }
+    }
+}