@peter.prib/renderengine 0.14.0 → 0.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (113) hide show
  1. package/README.md +45 -19
  2. package/bin/renderengine.mjs +157 -0
  3. package/dist/renderengine-workspace.umd.js +49641 -39747
  4. package/dist/renderengine.umd.js +25366 -15650
  5. package/documentation/REFERENCE.md +206 -0
  6. package/examples/decision-workbench.html +26 -0
  7. package/package.json +7 -1
  8. package/src/CanvasRenderer.js +225 -200
  9. package/src/SVGRenderer.js +476 -454
  10. package/src/archimate.js +22 -2
  11. package/src/archimateArchiFormat.js +1735 -1701
  12. package/src/archimateArchive.js +36 -7
  13. package/src/archimateCSV.js +93 -37
  14. package/src/archimateDrawio.js +2 -0
  15. package/src/archimateExchangeFormat.js +3 -1
  16. package/src/chartCatalog.js +219 -0
  17. package/src/charting/Annotations.js +169 -0
  18. package/src/charting/ArchimateDiagramEditor.js +54 -10
  19. package/src/charting/Axis.js +217 -5
  20. package/src/charting/Chart.js +99 -9
  21. package/src/charting/Chart3D.js +3 -0
  22. package/src/charting/ChartBox.js +8 -1
  23. package/src/charting/ColorPalette.js +42 -4
  24. package/src/charting/DiagramEditor.js +174 -39
  25. package/src/charting/DiagramEditorCommands.js +28 -0
  26. package/src/charting/Edge.js +7 -0
  27. package/src/charting/Hierarchy.js +114 -0
  28. package/src/charting/InteractionManager.js +4 -0
  29. package/src/charting/ModelFileFormat.js +5 -1
  30. package/src/charting/SettingsManager.js +35 -0
  31. package/src/charting/ShapePaths.js +82 -10
  32. package/src/charting/archimate/ArchimateCsvFileFormat.js +51 -12
  33. package/src/charting/archimate/ArchimateElementTemplate.js +235 -231
  34. package/src/charting/charts/AlluvialDiagram.js +311 -0
  35. package/src/charting/charts/AreaChart.js +52 -15
  36. package/src/charting/charts/BarChart.js +38 -3
  37. package/src/charting/charts/BarChart3D.js +5 -3
  38. package/src/charting/charts/BarChartBase.js +26 -6
  39. package/src/charting/charts/BeeswarmChart.js +164 -0
  40. package/src/charting/charts/BoxPlotChart.js +23 -1
  41. package/src/charting/charts/CalendarHeatmapChart.js +2 -1
  42. package/src/charting/charts/CandlestickChart.js +172 -4
  43. package/src/charting/charts/ChordDiagram.js +105 -2
  44. package/src/charting/charts/CirclePackChart.js +81 -0
  45. package/src/charting/charts/ComboChart.js +233 -0
  46. package/src/charting/charts/ContourChart.js +310 -0
  47. package/src/charting/charts/DonutChart3D.js +13 -0
  48. package/src/charting/charts/DumbbellChart.js +217 -0
  49. package/src/charting/charts/EcdfChart.js +150 -0
  50. package/src/charting/charts/FunnelChart.js +4 -1
  51. package/src/charting/charts/GeoMapChart.js +132 -11
  52. package/src/charting/charts/GroupedBarChart.js +44 -3
  53. package/src/charting/charts/GroupedDistributionChart.js +26 -1
  54. package/src/charting/charts/HeatmapChart.js +2 -2
  55. package/src/charting/charts/HexbinChart.js +137 -0
  56. package/src/charting/charts/HierarchyChart.js +77 -3
  57. package/src/charting/charts/HorizonChart.js +105 -0
  58. package/src/charting/charts/KagiChart.js +167 -0
  59. package/src/charting/charts/LineChart.js +74 -18
  60. package/src/charting/charts/OhlcChart.js +79 -0
  61. package/src/charting/charts/ParallelCoordinatesChart.js +9 -1
  62. package/src/charting/charts/PieChart.js +195 -17
  63. package/src/charting/charts/PieChart3D.js +137 -0
  64. package/src/charting/charts/PointAndFigureChart.js +198 -0
  65. package/src/charting/charts/PolarAreaChart.js +189 -0
  66. package/src/charting/charts/RadarChart.js +7 -1
  67. package/src/charting/charts/RadialBarChart.js +5 -2
  68. package/src/charting/charts/RenkoChart.js +178 -0
  69. package/src/charting/charts/RidgelineChart.js +113 -0
  70. package/src/charting/charts/SankeyDiagram.js +127 -4
  71. package/src/charting/charts/ScatterChart.js +13 -0
  72. package/src/charting/charts/ScatterMatrixChart.js +119 -0
  73. package/src/charting/charts/SlopegraphChart.js +205 -0
  74. package/src/charting/charts/SparklineTableChart.js +166 -0
  75. package/src/charting/charts/StackedBarChart.js +48 -5
  76. package/src/charting/charts/StackedBarChart3DOrbit.js +10 -5
  77. package/src/charting/charts/StreamGraphChart.js +10 -3
  78. package/src/charting/charts/SunburstChart.js +27 -7
  79. package/src/charting/charts/SurfaceChart3D.js +157 -0
  80. package/src/charting/charts/TreemapChart.js +28 -8
  81. package/src/charting/charts/ViolinChart.js +18 -0
  82. package/src/charting/datamodel/ArchimateDataLink.js +70 -0
  83. package/src/charting/datamodel/DataLineage.js +150 -0
  84. package/src/charting/datamodel/DataModel.js +83 -1
  85. package/src/charting/datamodel/ModelMapping.js +87 -0
  86. package/src/charting/datamodel/SqlDdl.js +110 -85
  87. package/src/charting/datamodel/index.js +3 -0
  88. package/src/charting/decision/DecisionWorkbench.js +295 -0
  89. package/src/charting/diagrams/ArchimateDiagram.js +25 -9
  90. package/src/charting/diagrams/ArchimateModel.js +1382 -1238
  91. package/src/charting/diagrams/GraphDiagram.js +1424 -1350
  92. package/src/charting/diagrams/SketchView.js +121 -0
  93. package/src/charting/diagrams/sketchBoxKinds.js +30 -0
  94. package/src/charting/modelTree/AnalysisPanel.js +101 -23
  95. package/src/charting/modelTree/NavigatorModel.js +410 -0
  96. package/src/charting/modelTree/NavigatorPanel.js +453 -0
  97. package/src/charting/pivot/PivotChart.js +109 -4
  98. package/src/charting/pivot/PivotGridChart.js +321 -33
  99. package/src/charting/pivot/PivotView.js +82 -0
  100. package/src/charting/report/TemplatedReport.js +547 -0
  101. package/src/charting/templates/BoxTemplate.js +28 -27
  102. package/src/charting/templates/PackageTemplate.js +26 -25
  103. package/src/charting/templates/SwimlaneTemplate.js +19 -18
  104. package/src/charting/templates/Template.js +219 -212
  105. package/src/cli.js +146 -0
  106. package/src/index.js +3370 -2995
  107. package/src/workspace/Workspace.js +126 -7
  108. package/src/workspace/archimateServices.js +4 -0
  109. package/src/workspace/index.js +3 -0
  110. package/src/workspace/parts/ArchimateCanvasPart.js +1 -1
  111. package/src/workspace/parts/DecisionWorkbenchPart.js +58 -0
  112. package/src/workspace/parts/ViewsPart.js +196 -0
  113. package/src/workspace/styles.js +36 -1
package/README.md CHANGED
@@ -322,30 +322,48 @@ The engine underneath draws **over 50 chart and diagram types** to interchangeab
322
322
  all driven by a single declarative catalog (`CHART_CATALOG`):
323
323
 
324
324
  - **Categorical & comparison**: `barChart`, `groupedBarChart`, `stackedBarChart` (standard and **100% normalized**
325
- `normalize: true`), `lollipopChart` (single and multi-series dot-and-stem), `marimekkoChart` (variable-width
326
- 2D mosaic), `paretoChart` (descending bars + cumulative 0–100% curve + 80% threshold line), `waterfallChart`,
327
- `funnelChart`, `populationPyramid`, `radialBarChart`, `wordCloud`.
328
- - **Time-series & trend**: `lineChart` (with error bars and multi-series), `areaChart` (standard, stacked, and
329
- **100% normalized** `normalize: true`), `stackedAreaChart`, `streamGraph`, `pipeChart` (variable-width flow),
330
- `candlestick` (OHLC with event markers), `ganttChart`, `calendarHeatmap`.
331
- - **Hierarchical & part-of-whole**: `pieChart`, `donutChart`, `treemapChart`, `sunburstChart`, `icicleChart`
332
- (top-down rectangular partition), `outlineChart` (collapsible indented tree with inline proportion bars).
333
- - **Statistical & distribution**: `histogram`, `boxPlot`, `densityChart` (kernel density estimation), `violinChart`,
334
- `qqPlot` (normal quantile-quantile), `lagPlot` (lag-1 autocorrelation), `scatterChart` (with 2D error bars and
335
- reference lines), `bubbleChart`.
336
- - **Multivariate, matrix & network flow**: `heatmap` (correlation and matrix grids), `radarChart` (spider),
337
- `parallelCoordinates`, `sankeyDiagram`, `chordDiagram`, `geoMap` (choropleth polygons + city bubbles).
338
- - **3D & orbit camera**: `barChart3D`, `bubbleChart3D`, `lineChart3D`, and true 4×4 matrix perspective orbit charts
339
- (`scatter3DOrbit`, `barChart3DOrbit`, `stackedBarChart3DOrbit`, `graphDiagram3D`).
340
- - **Gauges & KPIs**: `dialGauge` (bands, ticks, multi-needle, targets), `arcGauge`, `ringGauge`, `ringsGauge`,
341
- `barGauge`, `bulletChart`, `thermometerGauge`, `ledGauge`, `kpiTile` (with sparklines and delta badges).
325
+ `normalize: true`; vertical and horizontal `orientation: 'horizontal'`), `comboChart` (multi-type bar + line/area with dual/secondary Y-axes),
326
+ `dumbbellChart` (before/after gap change with directional delta indicators), `slopegraph` (multi-stage
327
+ trajectory lines with direct collision-resolved labels), `lollipopChart` (single and multi-series dot-and-stem),
328
+ `marimekkoChart` (variable-width 2D mosaic), `paretoChart` (descending bars + cumulative 0–100% curve + 80% threshold line),
329
+ `waterfallChart`, `funnelChart`, `populationPyramid`, `radialBarChart`, `polarAreaChart` (2D & 3D Nightingale Rose / Coxcomb
330
+ with exploded wedges and hover pull-out), `wordCloud`.
331
+ - **Time-series & trend**: `lineChart` (with step modes `'before'|'after'|'center'`, dual Y-axes, direct data labels `showValues`, error bars and multi-series),
332
+ `areaChart` (standard, step, stacked, and **100% normalized** `normalize: true`), `stackedAreaChart`, `streamGraph`, `horizonChart`
333
+ (multi-band folded density for vertical strip comparison), `pipeChart` (variable-width flow), `candlestick` (OHLC with event markers),
334
+ `ohlcChart` (equity price bars with bullish/bearish color encoding), `ganttChart`, `calendarHeatmap`.
335
+ - **Hierarchical & part-of-whole**: `pieChart` and `donutChart` (with exploded slices, smooth hover slice pull-out,
336
+ callout leader lines, `"Other"` roll-up, and center KPI totals), `pieChart3D` and `donutChart3D` (extruded 3D
337
+ tilted wedges and rings with cylinder skirts, radial cut walls, exploded slices, and interactive hover pull-out),
338
+ `circlePackChart` (nested tangent circles with translucent branch containment and hover elevation),
339
+ `treemapChart`, `sunburstChart` (with radial hover arc pull-out), `icicleChart` (top-down rectangular partition),
340
+ `outlineChart` (collapsible indented tree with inline proportion bars).
341
+ - **Statistical & distribution**: `hexbinChart` (2D hexagonal binning density plot for dense observation clouds),
342
+ `ecdfChart` (empirical cumulative step distribution with Kolmogorov–Smirnov distance test),
343
+ `scatterMatrix` (SPLOM pairwise scatter matrix with diagonal distribution histograms),
344
+ `ridgelineChart` (vertically staggered, partially overlapping Joy plot KDE curves),
345
+ `beeswarmChart` (deterministic force-packed observation points; optional Raincloud mode pairing half-KDE cloud,
346
+ mini-box, and packed dots), `histogram`, `boxPlot` (vertical and horizontal), `densityChart` (kernel density estimation),
347
+ `violinChart` (vertical and horizontal), `qqPlot` (normal quantile-quantile), `lagPlot` (lag-1 autocorrelation),
348
+ `scatterChart` (with 2D error bars and reference lines), `bubbleChart`.
349
+ - **Multivariate, matrix & network flow**: `alluvialDiagram` (multi-stage categorical flow ribbons across arbitrary stages),
350
+ `heatmap` (correlation and matrix grids), `radarChart` (spider), `parallelCoordinates`, `sankeyDiagram`
351
+ (with interactive connected-flow hover highlighting), `chordDiagram` (with radial arc pull-out and connected-chord illumination),
352
+ `geoMap` (choropleth polygons + city bubbles).
353
+ - **3D & orbit camera**: `pieChart3D`, `donutChart3D`, `polarAreaChart` (`extrude3D: true`), `barChart3D`,
354
+ `bubbleChart3D`, `lineChart3D`, and true 4×4 matrix perspective orbit charts (`scatter3DOrbit`, `barChart3DOrbit`,
355
+ `stackedBarChart3DOrbit` with 100% normalized mode, `surfaceChart3D` continuous 3D surface mesh, `graphDiagram3D`).
356
+ - **Gauges & KPIs**: `sparklineTable` (executive KPI table with inline trend sparklines), `dialGauge` (bands, ticks, multi-needle, targets),
357
+ `arcGauge`, `ringGauge`, `ringsGauge`, `barGauge`, `bulletChart`, `thermometerGauge`, `ledGauge`, `kpiTile` (with sparklines and delta badges).
342
358
  - **Interactive tables & diagrams**: `tableChart`, `resultView` (sortable, filterable, pageable table that switches
343
359
  into any fitting chart via `ChartChooser`), `pivotView`, `pivotChart`, `graphDiagram` (force-directed, hierarchical
344
360
  Dewey keys, table nodes, orthogonal/polyline obstacle-avoiding routing, manual bendpoints), `archimateDiagram`,
345
361
  `dataModelDiagram`, `railroadDiagram`, `ebnfDiagram`.
346
362
 
347
- `test/charts.html` is the full interactive workspace gallery (including the dedicated **Cubing** perspective), and
348
- `examples/csv-chart-builder.html` builds charts from a CSV file without code.
363
+ `test/charts.html` is the full interactive workspace gallery (including the dedicated **Cubing** perspective,
364
+ nested perspective sub-menus with instant search filtering & smooth card jumping, and a **`</> JS`** button on
365
+ every card to view and 1-click copy the generating JavaScript), and `examples/csv-chart-builder.html` builds charts
366
+ from a CSV file without code.
349
367
 
350
368
  ```javascript
351
369
  const engine = new RenderEngine('#chart', { rendererType: 'svg' });
@@ -368,6 +386,14 @@ engine.stackedBarChart([
368
386
  engine.marimekkoChart(seriesData, { title: 'Market Share by Region & Segment' });
369
387
  engine.lollipopChart(seriesData, { title: 'Regional Revenue Comparison', legend: true });
370
388
  engine.icicleChart(hierarchyTree, { title: 'Disk Usage by Category' });
389
+
390
+ // 3D Pie & 3D Donut with pre-exploded slice and smooth hover pull-out
391
+ engine.pieChart3D(sectorData, {
392
+ title: '3D Sector Exposure',
393
+ exploded: 'max', // pre-explode largest slice (or pass index, label, array, or predicate)
394
+ hoverExplode: true, // smoothly slides any slice out along its radial angle on hover
395
+ showLabels: 'percent',
396
+ });
371
397
  ```
372
398
 
373
399
  ![Gauges: a dial with bands, ticks and a target; arc, ring and nested rings; a two-needle dial; LED segments; a thermometer; KPI tiles with sparklines](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/gauges.png)
@@ -0,0 +1,157 @@
1
+ #!/usr/bin/env node
2
+
3
+ import fs from 'node:fs';
4
+ import path from 'node:path';
5
+ import { fileURLToPath } from 'node:url';
6
+ import { loadModel, checkModel, reportModel, saveModel, formatFindings } from '../src/cli.js';
7
+
8
+ const __filename = fileURLToPath(import.meta.url);
9
+ const __dirname = path.dirname(__filename);
10
+
11
+ function getPackageVersion() {
12
+ try {
13
+ const pkg = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../package.json'), 'utf8'));
14
+ return pkg.version || '0.0.0';
15
+ } catch {
16
+ return '0.0.0';
17
+ }
18
+ }
19
+
20
+ function printUsage() {
21
+ console.log(`RenderEngine CLI v${getPackageVersion()}
22
+
23
+ Usage:
24
+ renderengine <command> [options]
25
+
26
+ Commands:
27
+ check <modelPath> Validate a model and display issues
28
+ --json Output findings as JSON
29
+ --severity <level> Filter by severity: error, warning, info
30
+
31
+ report <modelPath> Generate a standalone HTML report
32
+ --output, -o <file> Output HTML path (default: <modelName>-report.html)
33
+ --title <title> Report title
34
+
35
+ save <modelPath> Convert or save a model
36
+ --output, -o <file> Output file path (required)
37
+ --format <format> Output format: archi (default), exchange, json
38
+
39
+ General Options:
40
+ --help, -h Show this help message
41
+ --version, -v Show version number
42
+ `);
43
+ }
44
+
45
+ function parseArgs(args) {
46
+ const parsed = { _: [], flags: {} };
47
+ for (let i = 0; i < args.length; i++) {
48
+ const arg = args[i];
49
+ if (arg === '--help' || arg === '-h') {
50
+ parsed.flags.help = true;
51
+ } else if (arg === '--version' || arg === '-v') {
52
+ parsed.flags.version = true;
53
+ } else if (arg === '--json') {
54
+ parsed.flags.json = true;
55
+ } else if (arg === '--output' || arg === '-o') {
56
+ parsed.flags.output = args[++i];
57
+ } else if (arg === '--format') {
58
+ parsed.flags.format = args[++i];
59
+ } else if (arg === '--title') {
60
+ parsed.flags.title = args[++i];
61
+ } else if (arg === '--severity') {
62
+ parsed.flags.severity = args[++i];
63
+ } else if (arg.startsWith('--')) {
64
+ const [k, v] = arg.slice(2).split('=');
65
+ parsed.flags[k] = v ?? true;
66
+ } else {
67
+ parsed._.push(arg);
68
+ }
69
+ }
70
+ return parsed;
71
+ }
72
+
73
+ export async function run(argv = process.argv.slice(2)) {
74
+ const { _, flags } = parseArgs(argv);
75
+
76
+ if (flags.version) {
77
+ console.log(`v${getPackageVersion()}`);
78
+ return 0;
79
+ }
80
+
81
+ if (flags.help || !_.length) {
82
+ printUsage();
83
+ return 0;
84
+ }
85
+
86
+ const command = _[0];
87
+ const modelPath = _[1];
88
+
89
+ if (!modelPath && command !== 'help') {
90
+ console.error(`Error: Model path required for '${command}'`);
91
+ printUsage();
92
+ return 1;
93
+ }
94
+
95
+ try {
96
+ const readInput = (file) => {
97
+ if (!fs.existsSync(file)) throw new Error(`File not found: ${file}`);
98
+ return fs.readFileSync(file);
99
+ };
100
+
101
+ if (command === 'check') {
102
+ const model = loadModel(readInput(modelPath));
103
+ const { findings, summary } = checkModel(model, { severity: flags.severity });
104
+
105
+ if (flags.json) {
106
+ console.log(JSON.stringify({ findings, summary }, null, 2));
107
+ } else {
108
+ console.log(formatFindings(findings, summary));
109
+ }
110
+ return summary.errors > 0 ? 1 : 0;
111
+ }
112
+
113
+ if (command === 'report') {
114
+ const model = loadModel(readInput(modelPath));
115
+ const title = flags.title || model.name || 'Model Report';
116
+ const html = reportModel(model, { title });
117
+ const defaultOut = `${path.basename(modelPath, path.extname(modelPath))}-report.html`;
118
+ const outPath = flags.output || defaultOut;
119
+
120
+ fs.writeFileSync(outPath, html, 'utf8');
121
+ console.log(`Report generated: ${outPath} (${html.length} bytes)`);
122
+ return 0;
123
+ }
124
+
125
+ if (command === 'save') {
126
+ if (!flags.output) {
127
+ console.error('Error: --output (-o) is required for the save command');
128
+ return 1;
129
+ }
130
+ const model = loadModel(readInput(modelPath));
131
+ const format = flags.format || 'archi';
132
+ const { data } = saveModel(model, { format });
133
+
134
+ if (data instanceof Uint8Array || Buffer.isBuffer(data)) {
135
+ fs.writeFileSync(flags.output, Buffer.from(data));
136
+ } else {
137
+ fs.writeFileSync(flags.output, String(data), 'utf8');
138
+ }
139
+ console.log(`Saved model to: ${flags.output} (${format})`);
140
+ return 0;
141
+ }
142
+
143
+ console.error(`Unknown command: ${command}`);
144
+ printUsage();
145
+ return 1;
146
+ } catch (err) {
147
+ console.error(`Error: ${err.message}`);
148
+ return 1;
149
+ }
150
+ }
151
+
152
+ // Only execute when run directly from the command line
153
+ if (process.argv[1] && path.resolve(process.argv[1]) === path.resolve(__filename)) {
154
+ run().then(code => {
155
+ if (code !== 0) process.exit(code);
156
+ });
157
+ }