@peter.prib/renderengine 0.13.0 → 0.15.0

package/src/archimateArchive.js

@@ -53,6 +53,15 @@ export function parseArchiFile(input) {
             visual.imagePath = url;
         }
     });
+    for (const el of model.archi?.elements || []) {
+        if (el.attributes?.imagePath) {
+            const url = resolve(el.attributes.imagePath);
+            if (url) {
+                el.attributes.archiImagePath = el.attributes.imagePath;
+                el.attributes.imagePath = url;
+            }
+        }
+    }
     return model;
 }
 
@@ -66,21 +75,41 @@ export function parseArchiFile(input) {
 export function toArchiFile(model, views) {
     const copies = _copyTrees(views);
     const pictures = new Map();   // data: URL -> archive path
-    _eachVisual(copies, (visual) => {
-        const url = visual.imagePath;
+    const registerPicture = (target, pathKey = 'imagePath', archiKey = 'archiImagePath') => {
+        const url = target[pathKey];
         if (!url?.startsWith('data:')) return;
         if (!pictures.has(url)) {
             // Its own archive path when it came from one (and no other picture took it), else a new one.
             const taken = new Set(pictures.values());
-            const own = visual.archiImagePath && !taken.has(visual.archiImagePath) ? visual.archiImagePath : null;
+            const own = target[archiKey] && !taken.has(target[archiKey]) ? target[archiKey] : null;
             const { mime } = _parseDataUrl(url);
             let path = own;
-            for (let n = pictures.size + 1; !path || (path !== own && taken.has(path)); n++) path = `${IMAGE_FOLDER}image-${n}.${EXTENSION_BY_MIME[mime] ?? 'bin'}`;
+            for (let n = pictures.size + 1; !path || (path !== own && taken.has(path)); n++) {
+                path = `${IMAGE_FOLDER}image-${n}.${EXTENSION_BY_MIME[mime] ?? 'bin'}`;
+            }
             pictures.set(url, path);
         }
-        visual.imagePath = pictures.get(url);
-    });
-    const xml = toArchiXML(model, copies);
+        target[pathKey] = pictures.get(url);
+    };
+
+    _eachVisual(copies, (visual) => registerPicture(visual));
+
+    let modelForXml = model;
+    if (model?.archi?.elements?.some(e => e.attributes?.imagePath?.startsWith('data:'))) {
+        modelForXml = {
+            ...model,
+            archi: {
+                ...model.archi,
+                elements: model.archi.elements.map(e => {
+                    if (!e.attributes?.imagePath?.startsWith('data:')) return e;
+                    const clonedAttr = { ...e.attributes };
+                    registerPicture(clonedAttr);
+                    return { ...e, attributes: clonedAttr };
+                }),
+            },
+        };
+    }
+    const xml = toArchiXML(modelForXml, copies);
     if (!pictures.size) return { data: xml, archive: false, mimeType: 'application/xml' };
 
     const zip = new ZipArchive().add(ARCHI_MODEL_ENTRY, xml);

package/src/archimateCSV.js

@@ -1,15 +1,13 @@
 import { parseCsvTable } from './csvTable.js';
+
 /**
- * archimateCSV — minimal CSV import/export for renderengine element/relationship
- * models. No external dependencies: a small RFC-4180-ish parser just big enough
- * for the two shapes we need.
- *
- * Two files are used:
- *   - elements.csv: id, name, type, layer, documentation, properties
- *   - relationships.csv: id, source, target, kind, label, documentation, properties
+ * archimateCSV — CSV import/export for renderengine element/relationship
+ * models and Archi interchange.
  *
- * The `properties` column is a JSON string of [{name, type, value}]. Empty cells
- * round-trip cleanly.
+ * Supports three files / tables:
+ *   - elements.csv: id, name, type, layer, documentation, properties (or Archi ID, Type, Name, Documentation)
+ *   - relations.csv / relationships.csv: id, source, target, kind, label, documentation, properties (or Archi ID, Type, Name, Documentation, Source, Target)
+ *   - properties.csv: ID, Key, Value (or id, key, value)
  */
 
 function escapeCsvCell(value) {
@@ -66,8 +64,8 @@ export function exportRelationshipsCSV(relationships = []) {
             escapeCsvCell(rel.id),
             escapeCsvCell(rel.source),
             escapeCsvCell(rel.target),
-            escapeCsvCell(rel.kind),
-            escapeCsvCell(rel.label),
+            escapeCsvCell(rel.kind || rel.type),
+            escapeCsvCell(rel.label || rel.name),
             escapeCsvCell(rel.documentation),
             escapeCsvCell(stringifyProperties(rel.properties)),
         ].join(','));
@@ -75,18 +73,55 @@ export function exportRelationshipsCSV(relationships = []) {
     return lines.join('\n');
 }
 
+/** Export properties of elements and relationships to properties.csv format (ID, Key, Value). */
+export function exportPropertiesCSV(elements = [], relationships = []) {
+    const header = ['ID', 'Key', 'Value'];
+    const lines = [header.join(',')];
+    const exportItemProps = (item) => {
+        if (!item || !Array.isArray(item.properties)) return;
+        for (const p of item.properties) {
+            const k = p.key ?? p.name;
+            const v = p.value;
+            if (k != null) {
+                lines.push([escapeCsvCell(item.id), escapeCsvCell(k), escapeCsvCell(v)].join(','));
+            }
+        }
+    };
+    for (const el of elements) exportItemProps(el);
+    for (const rel of relationships) exportItemProps(rel);
+    return lines.join('\n');
+}
+
+/** Parse a properties CSV string into a Map of itemId -> Array<{name, value}>. */
+export function importPropertiesCSV(csv) {
+    const rows = parseCsv(csv);
+    const byId = new Map();
+    for (const row of rows) {
+        const id = row.ID ?? row.id;
+        const key = row.Key ?? row.key ?? row.Name ?? row.name;
+        const val = row.Value ?? row.value ?? '';
+        if (id && key) {
+            if (!byId.has(id)) byId.set(id, []);
+            byId.get(id).push({ name: key, value: val });
+        }
+    }
+    return byId;
+}
+
 /** Parse an elements CSV string into element objects. */
 export function importElementsCSV(csv) {
     const rows = parseCsv(csv);
     return rows.map(row => {
-        const el = {
-            id: row.id,
-            name: row.name,
-            type: row.type,
-        };
-        if (row.layer) el.layer = row.layer;
-        if (row.documentation) el.documentation = row.documentation;
-        const props = parseProperties(row.properties);
+        const id = row.id ?? row.ID;
+        const name = row.name ?? row.Name;
+        const type = row.type ?? row.Type;
+        const layer = row.layer ?? row.Layer;
+        const doc = row.documentation ?? row.Documentation;
+
+        const el = { id, name, type };
+        if (layer) el.layer = layer;
+        if (doc) el.documentation = doc;
+        const props = parseProperties(row.properties ?? row.Properties);
         if (props) el.properties = props;
         return el;
     });
@@ -96,32 +131,53 @@ export function importElementsCSV(csv) {
 export function importRelationshipsCSV(csv) {
     const rows = parseCsv(csv);
     return rows.map(row => {
-        const rel = {
-            id: row.id,
-            source: row.source,
-            target: row.target,
-            kind: row.kind,
-        };
-        if (row.label) rel.label = row.label;
-        if (row.documentation) rel.documentation = row.documentation;
-        const props = parseProperties(row.properties);
+        const id = row.id ?? row.ID;
+        const source = row.source ?? row.Source;
+        const target = row.target ?? row.Target;
+        const kind = row.kind ?? row.Kind ?? row.type ?? row.Type;
+        const label = row.label ?? row.Label ?? row.name ?? row.Name;
+        const doc = row.documentation ?? row.Documentation;
+
+        const rel = { id, source, target, kind };
+        if (label) rel.label = label;
+        if (doc) rel.documentation = doc;
+        const props = parseProperties(row.properties ?? row.Properties);
         if (props) rel.properties = props;
         return rel;
     });
 }
 
-/** Convenience: export both in one call. Returns { elementsCSV, relationshipsCSV }. */
+/** Convenience: export all three tables in one call. Returns { elementsCSV, relationshipsCSV, propertiesCSV }. */
 export function exportModelCSV(model = {}) {
+    const elements = model.elements || [];
+    const relationships = model.relationships || [];
     return {
-        elementsCSV: exportElementsCSV(model.elements || []),
-        relationshipsCSV: exportRelationshipsCSV(model.relationships || []),
+        elementsCSV: exportElementsCSV(elements),
+        relationshipsCSV: exportRelationshipsCSV(relationships),
+        propertiesCSV: exportPropertiesCSV(elements, relationships),
     };
 }
 
-/** Convenience: import both in one call. Returns { elements, relationships }. */
-export function importModelCSV(elementsCSV = '', relationshipsCSV = '') {
-    return {
-        elements: importElementsCSV(elementsCSV),
-        relationships: importRelationshipsCSV(relationshipsCSV),
-    };
+/** Convenience: import all three tables in one call. Attaches parsed properties to items. */
+export function importModelCSV(elementsCSV = '', relationshipsCSV = '', propertiesCSV = '') {
+    const elements = importElementsCSV(elementsCSV);
+    const relationships = importRelationshipsCSV(relationshipsCSV);
+
+    if (propertiesCSV && propertiesCSV.trim()) {
+        const propsById = importPropertiesCSV(propertiesCSV);
+        for (const el of elements) {
+            const props = propsById.get(el.id);
+            if (props?.length) {
+                el.properties = [...(el.properties || []), ...props];
+            }
+        }
+        for (const rel of relationships) {
+            const props = propsById.get(rel.id);
+            if (props?.length) {
+                rel.properties = [...(rel.properties || []), ...props];
+            }
+        }
+    }
+
+    return { elements, relationships };
 }

package/src/archimateDrawio.js

@@ -53,6 +53,8 @@ export const DRAWIO_ELEMENT_STYLES = Object.freeze({
     location: app('location', 'square'),
     grouping: box({ shape: 'folder', spacingTop: 10, tabWidth: 100, tabHeight: 25, tabPosition: 'left', dashed: 1, outlineConnect: undefined }),
     junction: box({ verticalLabelPosition: 'bottom', verticalAlign: 'top', outlineConnect: undefined }, 'ellipse;'),
+    'and-junction': box({ verticalLabelPosition: 'bottom', verticalAlign: 'top', outlineConnect: undefined }, 'ellipse;fillColor=#000000;'),
+    'or-junction': box({ verticalLabelPosition: 'bottom', verticalAlign: 'top', outlineConnect: undefined }, 'ellipse;fillColor=#ffffff;'),
 });
 
 /** The other boxes a view draws: notes, groups (folders), pictures, canvas boxes; and a type with no shape of its own. */

package/src/archimateExchangeFormat.js

@@ -353,7 +353,9 @@ export function toExchangeXML(model, views = []) {
     ] : [];
     const textLines = (tag, text, indent) => text ? [`${indent}<${tag}>${escapeXml(text)}</${tag}>`] : [];
     const conceptPairs = (concept, extra = []) => [
-        ...Object.entries(typedArrayToProperties(concept.properties)).map(([key, value]) => ({ key, value })),
+        ...(Array.isArray(concept.properties)
+            ? concept.properties.map(p => ({ key: p.name ?? p.key ?? '', value: p.value == null ? '' : String(p.value) }))
+            : Object.entries(typedArrayToProperties(concept.properties)).map(([key, value]) => ({ key, value }))),
         ...extra,
     ];
 

package/src/chartCatalog.js

@@ -242,6 +242,16 @@ export const CHART_CATALOG = [
     dataShape: 'Array<{label, value}> — angular categories with radial bar length',
     streamShape: 'flat',
   },
+  {
+    key: 'polarArea', label: 'Polar Area (Nightingale Rose)', method: 'polarAreaChart', category: '2d',
+    coordSystem: COORD_SYSTEM.RADIAL, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.ISOMETRIC,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.RADIAL_AXIS,     required: true },
+      { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.RADIAL_DISTANCE, required: true },
+    ],
+    dataShape: 'Array<{label, value, exploded?}> — equal-angle wedges whose radius (or area) encodes value; supports 3D extrusion ({extrude3D:true}) and hover pull-out',
+    streamShape: 'flat',
+  },
   {
     key: 'populationPyramid', label: 'Population Pyramid', method: 'populationPyramid', category: '2d',
     coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.SEMANTIC, camera: CAMERA_MODE.NONE,
@@ -318,12 +328,15 @@ export const CHART_CATALOG = [
   },
   {
     key: 'stackedBar', label: 'Stacked Bar', method: 'stackedBarChart', category: '2d',
-    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    seriesCapable: true,
     axes: [
       { role: 'category', kind: AXIS_KIND.CATEGORICAL,  channel: ENCODING_CHANNEL.POSITION_X,        required: true },
-      { role: 'values',   kind: AXIS_KIND.NUMERIC_LIST, channel: ENCODING_CHANNEL.POSITION_Y_STACKED, required: true },
+      { role: 'values',   kind: AXIS_KIND.NUMERIC_LIST, channel: ENCODING_CHANNEL.POSITION_Y_STACKED, required: false },
+      { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y_STACKED, required: false },
+      { role: 'series',   kind: AXIS_KIND.CATEGORICAL,  channel: ENCODING_CHANNEL.COLOR,              required: false },
     ],
-    dataShape: "Array<{label, values:number[]}> e.g. [{label:'Jan', values:[10,20]}] — no built-in legend option despite being multi-series (a real gap; areaChart's stacked mode has one, this doesn't)",
+    dataShape: "Array<{label, values:number[]}> or multi-series Array<{name, values:Array<{label,value}>}> — segments stacked from zero, with optional series legend",
     streamShape: 'flat', // a new stacked bar is a whole new {label,values} record appended to the outer array, not growth of an existing record's values
   },
   {
@@ -551,6 +564,26 @@ export const CHART_CATALOG = [
     dataShape: 'Array<{label, value, depth?}> — a single fixed-angle isometric shadow per bar, not a real camera (see bar3DOrbit for that)',
     streamShape: 'flat',
   },
+  {
+    key: 'pie3D', label: 'Pie (3D)', method: 'pieChart3D', category: '3d',
+    coordSystem: COORD_SYSTEM.RADIAL, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.ISOMETRIC,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.ANGLE_OR_AREA, required: true },
+      { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.ANGLE_OR_AREA, required: true },
+    ],
+    dataShape: 'Array<{label, value, exploded?}> — extruded 3D tilted pie with cylinder skirt, radial cut walls, exploded slices, and hover slice pull-out',
+    streamShape: 'flat',
+  },
+  {
+    key: 'donut3D', label: 'Donut (3D)', method: 'donutChart3D', category: '3d',
+    coordSystem: COORD_SYSTEM.RADIAL, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.ISOMETRIC,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.ANGLE_OR_AREA, required: true },
+      { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.ANGLE_OR_AREA, required: true },
+    ],
+    dataShape: 'Array<{label, value, exploded?}> — extruded 3D tilted doughnut (innerRadiusRatio=0.5) with inner/outer cylinder skirts, exploded slices, and hover slice pull-out',
+    streamShape: 'flat',
+  },
   {
     key: 'bubble3D', label: 'Bubble (3D)', method: 'bubbleChart3D', category: '3d',
     coordSystem: COORD_SYSTEM.ORBIT_3D, title: true, legend: false, colorMode: COLOR_MODE.GROUPED_FIELD, camera: CAMERA_MODE.ORBIT,
@@ -564,6 +597,50 @@ export const CHART_CATALOG = [
     dataShape: 'Array<{label, x, y, z, size?, category?}> — real orbit camera (drag-rotate/wheel-zoom); a future sphere/ellipsoid variant is this same shape with a second shape-size-channeled role, not a new chart type',
     streamShape: 'flat',
   },
+  {
+    key: 'pareto', label: 'Pareto', method: 'paretoChart', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.SEMANTIC, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+      { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+    ],
+    dataShape: 'Array<{label, value}> — sorted descending with a right-hand 0-100% cumulative percentage line and 80% cutoff reference line',
+    streamShape: 'flat',
+  },
+  {
+    key: 'lollipop', label: 'Lollipop', method: 'lollipopChart', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    seriesCapable: true,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+      { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+      { role: 'series',   kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.COLOR,      required: false },
+    ],
+    dataShape: 'Array<{label, value}> or multi-series Array<{name, values:Array<{label,value}>}> — stem-and-dot alternative to bars',
+    streamShape: 'flat',
+  },
+  {
+    key: 'marimekko', label: 'Marimekko', method: 'marimekkoChart', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    seriesCapable: true,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.SHAPE_WIDTH,       required: true },
+      { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y_HEIGHT, required: true },
+      { role: 'series',   kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.COLOR,             required: true },
+    ],
+    dataShape: 'Multi-series Array<{name, values:Array<{label,value}>}> or Array<{label, values:number[]}> — variable-width 100%-stacked mosaic columns',
+    streamShape: 'series',
+  },
+  {
+    key: 'icicle', label: 'Icicle', method: 'icicleChart', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'value', kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.ANGLE_OR_AREA,  required: true },
+      { role: 'group', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_ORDER, required: false },
+    ],
+    dataShape: 'Array<{label, value?, children?}> — rectangular hierarchical partition chart (top-down bands by depth, width proportional to value)',
+    streamShape: 'flat',
+  },
   {
     key: 'bar3DOrbit', label: 'Bar (3D Orbit)', method: 'barChart3DOrbit', category: '3d',
     coordSystem: COORD_SYSTEM.ORBIT_3D, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.ORBIT,
@@ -586,6 +663,195 @@ export const CHART_CATALOG = [
     dataShape: 'Array<{x, z, values:number[]}> — same grid as bar3DOrbit, each cell a stack of segments; colors indexed by segment position, not z-group',
     streamShape: 'none', // fixed x*z grid
   },
+  {
+    key: 'surface3D', label: 'Surface Mesh (3D Orbit)', method: 'surfaceChart3D', category: '3d',
+    coordSystem: COORD_SYSTEM.ORBIT_3D, title: true, legend: false, colorMode: COLOR_MODE.SCALE, camera: CAMERA_MODE.ORBIT,
+    axes: [
+      { role: 'x',     kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X,      required: true },
+      { role: 'z',     kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_Z,      required: true },
+      { role: 'value', kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y_HEIGHT, required: true },
+    ],
+    dataShape: 'Array<{x, z, value}> or {xLabels, zLabels, values:number[][]} — continuous 3D surface mesh with gradient shading, wireframe, and real orbit camera',
+    streamShape: 'none',
+  },
+  {
+    key: 'dumbbell', label: 'Dumbbell / Gap Chart', method: 'dumbbellChart', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+      { role: 'start',    kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+      { role: 'end',      kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+    ],
+    dataShape: 'Array<{label, start, end}> or multi-series Array<{name, values}> — connected pair of dots showing before/after or target/actual change across categories',
+    streamShape: 'flat',
+  },
+  {
+    key: 'slopegraph', label: 'Slopegraph', method: 'slopegraph', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL,  channel: ENCODING_CHANNEL.POSITION_ORDER, required: true },
+      { role: 'values',   kind: AXIS_KIND.NUMERIC_LIST, channel: ENCODING_CHANNEL.POSITION_Y,     required: true },
+    ],
+    dataShape: 'Array<{label, values: number[]}>, Array<{label, start, end}>, or multi-series — connects categories across stages with direct labels and hover highlighting',
+    streamShape: 'flat',
+  },
+  {
+    key: 'circlePack', label: 'Circle Packing', method: 'circlePackChart', category: '2d',
+    coordSystem: COORD_SYSTEM.RADIAL, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'value', kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.ANGLE_OR_AREA,  required: true },
+      { role: 'group', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_ORDER, required: false },
+    ],
+    dataShape: 'Array<{label, value?, children?}> — nested tangent circles sized by value with translucent branch containment and hover elevation',
+    streamShape: 'flat',
+  },
+  {
+    key: 'ridgeline', label: 'Ridgeline / Joy Plot', method: 'ridgelineChart', category: 'statistical',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'group',  kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_ORDER, required: true },
+      { role: 'sample', kind: AXIS_KIND.RAW_SAMPLE,  channel: ENCODING_CHANNEL.DERIVED,        required: true },
+    ],
+    dataShape: 'Array<{label, values: number[]}> — vertically staggered, partially overlapping Gaussian-KDE density curves (Joy plot) with median lines',
+    streamShape: 'grouped-sample',
+  },
+  {
+    key: 'beeswarm', label: 'Beeswarm / Raincloud Plot', method: 'beeswarmChart', category: 'statistical',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'group',  kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+      { role: 'sample', kind: AXIS_KIND.RAW_SAMPLE,  channel: ENCODING_CHANNEL.DERIVED,    required: true },
+    ],
+    dataShape: 'Array<{label, values: number[]}> — individual sample points circle-packed along each group slot; Raincloud mode pairs half-KDE cloud, mini-box, and packed dots',
+    streamShape: 'grouped-sample',
+  },
+  {
+    key: 'combo', label: 'Combo (Bars & Lines)', method: 'comboChart', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+      { role: 'value',    kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+      { role: 'series',   kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.COLOR,      required: true },
+    ],
+    dataShape: 'Array<{name, type?:"bar"|"line"|"area", yAxis?:"left"|"right", values}> — pairs bar series with lines/areas and optional secondary right Y-axis',
+    streamShape: 'series',
+  },
+  {
+    key: 'hexbin', label: 'Hexbin (2D Density)', method: 'hexbinChart', category: 'statistical',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.SCALE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'x', kind: AXIS_KIND.NUMERIC, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+      { role: 'y', kind: AXIS_KIND.NUMERIC, channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+    ],
+    dataShape: 'Array<{x, y, value?}> or Array<[x, y]> — 2D hexagonal binning and density plot for dense point clouds, eliminating overplotting',
+    streamShape: 'flat',
+  },
+  {
+    key: 'ecdf', label: 'Empirical CDF (Step Plot)', method: 'ecdfChart', category: 'statistical',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'sample', kind: AXIS_KIND.RAW_SAMPLE, channel: ENCODING_CHANNEL.DERIVED, required: true },
+    ],
+    dataShape: 'number[] or Array<{label, values: number[]}> — cumulative distribution step function (0..1) with median and Kolmogorov-Smirnov distance comparison',
+    streamShape: 'grouped-sample',
+  },
+  {
+    key: 'splom', label: 'Scatter Plot Matrix (SPLOM)', method: 'scatterMatrix', category: 'statistical',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'dimensions', kind: AXIS_KIND.NUMERIC_LIST, channel: ENCODING_CHANNEL.POSITION_ORDER, required: true },
+    ],
+    dataShape: 'Array<object> with options.dimensions — N x N grid of pairwise scatter plots with univariate KDE curves on the diagonal',
+    streamShape: 'flat',
+  },
+  {
+    key: 'sparklineTable', label: 'Sparkline Table', method: 'sparklineTable', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.NONE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'row',   kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_ORDER, required: true },
+      { role: 'value', kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.TEXT_VALUE,     required: true },
+    ],
+    dataShape: 'Array<{label, value, target?, sparkline?: number[], delta?: number, status?}> — multi-metric table embedding inline sparklines and bullet KPI bars',
+    streamShape: 'flat',
+  },
+  {
+    key: 'horizon', label: 'Horizon Chart', method: 'horizonChart', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'series', kind: AXIS_KIND.CATEGORICAL,  channel: ENCODING_CHANNEL.POSITION_ORDER, required: true },
+      { role: 'values', kind: AXIS_KIND.NUMERIC_LIST, channel: ENCODING_CHANNEL.POSITION_Y,     required: true },
+    ],
+    dataShape: 'Array<{label, values: number[]}> — compact layered area strips folding positive and negative magnitude bands into narrow viewports',
+    streamShape: 'flat',
+  },
+  {
+    key: 'ohlc', label: 'OHLC Bar Chart', method: 'ohlcChart', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.SEMANTIC, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+      { role: 'open',     kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+      { role: 'high',     kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+      { role: 'low',      kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+      { role: 'close',    kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+    ],
+    dataShape: 'Array<{label, open, high, low, close}> — financial price bar chart with high-low spine, left open tick, and right close tick',
+    streamShape: 'flat',
+  },
+  {
+    key: 'alluvial', label: 'Alluvial Diagram', method: 'alluvialDiagram', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'dimensions', kind: AXIS_KIND.CATEGORICAL,  channel: ENCODING_CHANNEL.POSITION_ORDER, required: true },
+      { role: 'value',      kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.SHAPE_WIDTH,    required: true },
+    ],
+    dataShape: '{dimensions: string[], rows: Array<object>} or Array<{steps: string[], value: number}> — multi-stage categorical flow diagram across 3+ ordered dimensions',
+    streamShape: 'none',
+  },
+  {
+    key: 'renko', label: 'Renko / Heikin-Ashi', method: 'renkoChart', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.SEMANTIC, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+      { role: 'open',     kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+      { role: 'high',     kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+      { role: 'low',      kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+      { role: 'close',    kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+    ],
+    dataShape: 'Array<{label, open, high, low, close}> — price trend brick chart filtering out time noise (renko), or modified smoothed momentum candles (mode: "heikinAshi")',
+    streamShape: 'flat',
+  },
+  {
+    key: 'contour', label: 'Contour Plot', method: 'contourChart', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.SCALE, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'x',     kind: AXIS_KIND.NUMERIC, channel: ENCODING_CHANNEL.POSITION_X,   required: true },
+      { role: 'y',     kind: AXIS_KIND.NUMERIC, channel: ENCODING_CHANNEL.POSITION_Y,   required: true },
+      { role: 'value', kind: AXIS_KIND.NUMERIC, channel: ENCODING_CHANNEL.COLOR_SCALE, required: true },
+    ],
+    dataShape: 'number[][] (2D scalar grid) or Array<{x, y, value}> — marching-squares isolines and filled isoband contours with numeric level labels',
+    streamShape: 'none',
+  },
+  {
+    key: 'kagi', label: 'Kagi Chart', method: 'kagiChart', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.SEMANTIC, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+      { role: 'value',    kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+    ],
+    dataShape: 'Array<{label, value}> or Array<number> — time-independent price action tracking reversals with Yang and Yin inflection lines',
+    streamShape: 'flat',
+  },
+  {
+    key: 'pointAndFigure', label: 'Point and Figure', method: 'pointAndFigure', category: '2d',
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.SEMANTIC, camera: CAMERA_MODE.NONE,
+    axes: [
+      { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+      { role: 'high',     kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+      { role: 'low',      kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+    ],
+    dataShape: 'Array<{label, high, low}> or Array<number> — classical supply/demand chart with columns of rising X and falling O boxes and 45-degree support trendlines',
+    streamShape: 'flat',
+  },
 ];
 
 import { ChartRegistry } from './charting/ChartRegistry.js';