@peter.prib/renderengine 0.12.0 → 0.14.0
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.
- package/README.md +454 -296
- package/dist/renderengine-workspace.umd.js +4122 -1167
- package/dist/renderengine.umd.js +4103 -1164
- package/documentation/REFERENCE.md +96 -6
- package/package.json +8 -3
- package/src/chartCatalog.js +50 -3
- package/src/charting/Axis.js +47 -5
- package/src/charting/Chart3D.js +4 -2
- package/src/charting/DiagramEditor.js +239 -34
- package/src/charting/Hierarchy.js +28 -0
- package/src/charting/ModelFileFormat.js +47 -0
- package/src/charting/archimate/ArchimateCanvasEditor.js +1108 -1012
- package/src/charting/archimate/deleteFromModel.js +57 -0
- package/src/charting/archimate/elementMenuItems.js +3 -1
- package/src/charting/archimate/heatMaps.js +169 -0
- package/src/charting/archimate/index.js +1 -0
- package/src/charting/ask/AskBar.js +388 -0
- package/src/charting/ask/AskView.js +400 -0
- package/src/charting/charts/AreaChart.js +20 -3
- package/src/charting/charts/BarChart.js +5 -5
- package/src/charting/charts/BarChart3D.js +2 -2
- package/src/charting/charts/BarChart3DOrbit.js +3 -1
- package/src/charting/charts/BarChartBase.js +21 -3
- package/src/charting/charts/BoxPlotChart.js +2 -2
- package/src/charting/charts/BubbleChart.js +4 -1
- package/src/charting/charts/ChordDiagram.js +4 -4
- package/src/charting/charts/DensityChart.js +1 -1
- package/src/charting/charts/FunnelChart.js +1 -1
- package/src/charting/charts/GroupedBarChart.js +7 -9
- package/src/charting/charts/HeatmapChart.js +4 -1
- package/src/charting/charts/HistogramChart.js +2 -2
- package/src/charting/charts/IcicleChart.js +47 -0
- package/src/charting/charts/LollipopChart.js +104 -0
- package/src/charting/charts/MarimekkoChart.js +75 -0
- package/src/charting/charts/OutlineChart.js +10 -8
- package/src/charting/charts/ParallelCoordinatesChart.js +2 -2
- package/src/charting/charts/ParetoChart.js +92 -0
- package/src/charting/charts/PipeChart.js +5 -2
- package/src/charting/charts/PopulationPyramidChart.js +4 -4
- package/src/charting/charts/RadarChart.js +5 -4
- package/src/charting/charts/RadialBarChart.js +2 -2
- package/src/charting/charts/SankeyDiagram.js +4 -4
- package/src/charting/charts/ScatterChart.js +6 -3
- package/src/charting/charts/StackedBarChart.js +82 -11
- package/src/charting/charts/StackedBarChart3DOrbit.js +5 -2
- package/src/charting/charts/StreamGraphChart.js +8 -0
- package/src/charting/charts/SunburstChart.js +2 -2
- package/src/charting/charts/TableChart.js +18 -2
- package/src/charting/charts/TreemapChart.js +4 -4
- package/src/charting/charts/ViolinChart.js +2 -2
- package/src/charting/charts/WaterfallChart.js +2 -2
- package/src/charting/charts/WordCloudChart.js +2 -2
- package/src/charting/diagrams/ArchimateModel.js +33 -0
- package/src/charting/diagrams/DeleteFromModelCommand.js +81 -0
- package/src/charting/diagrams/EdgeGeometry.js +16 -0
- package/src/charting/edgeStyle/EdgeStyleSchema.js +6 -2
- package/src/charting/pivot/PivotChart.js +205 -13
- package/src/charting/pivot/PivotGridChart.js +1 -1
- package/src/charting/pivot/PivotView.js +555 -23
- package/src/charting/table/TableView.js +10 -1
- package/src/charting/table/TableViewChart.js +1 -1
- package/src/charting/templates/Template.js +10 -0
- package/src/exportImage.js +45 -18
- package/src/index.js +115 -6
- package/src/workspace/parts/ArchimateCanvasPart.js +3 -0
- package/src/workspace/parts/DiagramEditorPart.js +2 -0
- package/src/workspace/parts/ModelHosted.js +15 -4
package/README.md
CHANGED
|
@@ -1,296 +1,454 @@
|
|
|
1
|
-
# RenderEngine
|
|
2
|
-
|
|
3
|
-
**An ArchiMate modeller, a data modeller, a requirements story map, a diagram editor and a chart library that run
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
parts, not a desktop application.
|
|
10
|
-
|
|
11
|
-

|
|
12
|
-
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
## Try it
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
git clone https://gitlab.com/peter.prib/renderengine.git
|
|
19
|
-
cd renderengine
|
|
20
|
-
npm start # the ArchiMate modeller
|
|
21
|
-
npm run diagram # the diagram editor (flowcharts, UML and more)
|
|
22
|
-
npm run datamodel # the data modeller: an enterprise ontology and a retail bank at BIAN level
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
No server is needed, and nothing needs installing first, because the built bundles are in `dist/`. You can also
|
|
26
|
-
open the pages directly:
|
|
27
|
-
|
|
28
|
-
- `examples/archimate.html`: the ArchiMate modeller
|
|
29
|
-
- `examples/diagram-editor.html`: the diagram editor
|
|
30
|
-
- `examples/data-model.html`: the data modeller
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
- **
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
- **
|
|
64
|
-
- **
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
- **
|
|
72
|
-
|
|
73
|
-
- **
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
- **
|
|
82
|
-
- **
|
|
83
|
-
|
|
84
|
-
- **
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
- **
|
|
100
|
-
- **
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
- **
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
- **
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
- **
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-

|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Try it
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
git clone https://gitlab.com/peter.prib/renderengine.git
|
|
19
|
+
cd renderengine
|
|
20
|
+
npm start # the ArchiMate modeller
|
|
21
|
+
npm run diagram # the diagram editor (flowcharts, UML and more)
|
|
22
|
+
npm run datamodel # the data modeller: an enterprise ontology and a retail bank at BIAN level
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
No server is needed, and nothing needs installing first, because the built bundles are in `dist/`. You can also
|
|
26
|
+
open the pages directly:
|
|
27
|
+
|
|
28
|
+
- `examples/archimate.html`: the ArchiMate modeller
|
|
29
|
+
- `examples/diagram-editor.html`: the diagram editor
|
|
30
|
+
- `examples/data-model.html`: the data modeller
|
|
31
|
+
- `test/charts.html`: the full interactive chart, diagram and OLAP cubing gallery
|
|
32
|
+
|
|
33
|
+
The models they open come from [modelengine](https://gitlab.com/peter.prib/modelengine), kept apart from the tools: with
|
|
34
|
+
it checked out beside renderengine, the pages open on its models (File ▸ Open from ▸ modelengine lists them by domain);
|
|
35
|
+
without it they start empty.
|
|
36
|
+
|
|
37
|
+
All work in current Chrome, Edge, Firefox and Safari. Save writes back to the file you opened in Chrome and Edge;
|
|
38
|
+
other browsers download the file instead.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## The ArchiMate modeller
|
|
43
|
+
|
|
44
|
+
### Works with Archi
|
|
45
|
+
|
|
46
|
+
- **Open and save Archi files** (`.archimate`, and archives that include pictures). Save writes back to the file you
|
|
47
|
+
opened; Save As picks a new one. Unsaved changes are marked (•), and the page asks before you leave or close them.
|
|
48
|
+
- **Kept in the browser, backed up to the cloud.** Every model is kept in the browser as you edit it, and those open
|
|
49
|
+
reopen next time, with no file saved. File ▸ This browser backs them all up to a folder you choose once: pick one
|
|
50
|
+
that OneDrive, Google Drive or Dropbox syncs and the backups reach the cloud (each named with the date and time,
|
|
51
|
+
plus one under its plain name); browsers that cannot write to a folder download them instead.
|
|
52
|
+
- **Import a spreadsheet** into the open model: choose the name, type, id, documentation, property and "related
|
|
53
|
+
to" columns; existing elements are updated, not duplicated (Archi's elements.csv imports as it is).
|
|
54
|
+
- **draw.io export**: every view a page, in draw.io's ArchiMate shapes, with the elements' properties.
|
|
55
|
+
- **Open Group Exchange Format** import and export, the standard way into Sparx, BiZZdesign and other tools.
|
|
56
|
+
Checked with Archi 5.8, which validates and opens the files.
|
|
57
|
+
- **Every element Archi receives is a valid ArchiMate 3.2 class.** A type Archi lacks is written as its nearest
|
|
58
|
+
3.2 type, and its own type is kept so it comes back on the next import.
|
|
59
|
+
- **Canvases, sketches, notes, groups and Archi's canvas templates** come through import and export.
|
|
60
|
+
|
|
61
|
+
### Modelling
|
|
62
|
+
|
|
63
|
+
- A **palette** of every element type, grouped by layer and limited by the view's viewpoint.
|
|
64
|
+
- **Connecting two elements offers only the relationship kinds the ArchiMate rules allow** between them.
|
|
65
|
+
- **Nesting**: drop an element inside another and choose what the nesting stands for (composition, aggregation,
|
|
66
|
+
assignment, realization or specialization). It goes into the model, and the nesting shows it.
|
|
67
|
+
- **Add from text**: paste a list of names, from a document or a spreadsheet's columns, and get an element for
|
|
68
|
+
each.
|
|
69
|
+
- **Copy and paste** within a model and between models, **Duplicate**, and **Generate View For** an element and
|
|
70
|
+
what it relates to.
|
|
71
|
+
- **Delete from model**, from the tree or a diagram, after a dialog listing the views it is on and the
|
|
72
|
+
relationships that go with it; one undo puts it all back.
|
|
73
|
+
- **Several models open at once**, a tab each. Each has its own file and its own undo history.
|
|
74
|
+
- **Undo for everything**, one history per model as in Archi: edits on any view, and adding, renaming and deleting
|
|
75
|
+
views. Undoing an edit made on another view takes you to that view.
|
|
76
|
+
- **Specializations**, custom viewpoints, label expressions (`${name}` and `{name}`), and properties with types.
|
|
77
|
+
|
|
78
|
+
### Editing
|
|
79
|
+
|
|
80
|
+
- **Align, distribute and match size**, to the shape you selected last, as in Archi; **automatic layouts** (grid,
|
|
81
|
+
circle, tree, force-directed, by layer) and **Nest its parts inside**, following composition and aggregation.
|
|
82
|
+
- **Properties of several shapes at once**: colours and text style, the elements' type and specialization, and a
|
|
83
|
+
property to set on all of them.
|
|
84
|
+
- **Format painter**: copy one shape's look onto others.
|
|
85
|
+
- **Colour by** layer, type, specialization or any property (a heat map, e.g. by lifecycle: invest, maintain,
|
|
86
|
+
retire), by a formula over properties (`Cost * Risk_score`), or by the change work packages and deliverables make
|
|
87
|
+
(create, update, delete, boxes and lines), with a legend boxed round its entries; or a legend of the element types
|
|
88
|
+
on the view.
|
|
89
|
+
- **Find and replace** across names, documentation and property values, with match case, whole words and
|
|
90
|
+
regular expressions; **transform names** (Title Case, split camelCase, ...) and **rename a property** across the
|
|
91
|
+
model; **fit a shape to its text**.
|
|
92
|
+
- **Groups and locks on any view**, multi-select, a marquee, Archi's tabbed groups, bendpoints, pinned line ends,
|
|
93
|
+
and orthogonal, curved or straight routing. Lines take the shortest way between shapes, as in Archi.
|
|
94
|
+
|
|
95
|
+
### Understanding and sharing a model
|
|
96
|
+
|
|
97
|
+
- A **model tree** by layer, by type or flat, each element with its type's picture, with search and filters (type, specialization, property) that dim the
|
|
98
|
+
diagram too.
|
|
99
|
+
- An **analysis panel** for the selected element: which views it's on, and its incoming and outgoing relationships.
|
|
100
|
+
- **Check model** finds relationships the rules don't allow, likely duplicates (by their words, so "System of
|
|
101
|
+
Order Management" matches "order-management system"), unused elements and relationships, empty views, nested
|
|
102
|
+
elements with no relationship, and unprintable characters. **Merge…** makes duplicates one element, keeping
|
|
103
|
+
every relationship and appearance on a view.
|
|
104
|
+
- **Derived relationships**, worked out and shown as dotted lines.
|
|
105
|
+
- **Roadmaps**: generate a view of work packages, plateaus or anything with start and end dates, as bars under
|
|
106
|
+
the months.
|
|
107
|
+
- An **HTML report** in one self-contained file: a tree, search, a page per element, relationship and view, and
|
|
108
|
+
diagrams whose elements link to their pages.
|
|
109
|
+
- **Images**: export PNG or SVG, or copy to the clipboard: the whole drawing with a margin (or only what is in
|
|
110
|
+
sight), at a scale you choose, from the File menu or a right-click; a setting shows where the picture will end.
|
|
111
|
+
|
|
112
|
+
### Beyond Archi
|
|
113
|
+
|
|
114
|
+
It runs in the browser and embeds in other apps. It also has:
|
|
115
|
+
|
|
116
|
+
- ArchiMate 4 types alongside 3.2;
|
|
117
|
+
- derived relationships without scripts;
|
|
118
|
+
- invalid relationships shown as you choose (highlight, tooltip or hidden), per view, per model or for the tool;
|
|
119
|
+
- groups and locks on every view, not just canvases;
|
|
120
|
+
- a canvas template library shared across models;
|
|
121
|
+
- two drawing backends, SVG and Canvas.
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## The data modeller
|
|
126
|
+
|
|
127
|
+
One model at the conceptual, logical and physical levels, read by each stakeholder in their own terms, governed and
|
|
128
|
+
checked the way DAMA-DMBOK2 has a model reviewed, and ready for banking at BIAN level. A model can be imported
|
|
129
|
+
from pasted JSON, an assistant's answer included. It shares the modeller's
|
|
130
|
+
workbench: several models open at once, undo for everything, files saved back where they came from, models kept in
|
|
131
|
+
the browser and backed up.
|
|
132
|
+
|
|
133
|
+

|
|
134
|
+
|
|
135
|
+
### One model, three levels
|
|
136
|
+
|
|
137
|
+
- **Concepts, logical entities and tables, each a schema of its own**, mapped any number either way: a concept
|
|
138
|
+
realised by several entities, several entities kept in one table. The **mapping view** draws the three side by
|
|
139
|
+
side, and **lineage** shows, for anything, what it realises and what realises it, all the way up and down.
|
|
140
|
+
- **Perspectives and contexts**: each stakeholder's names for the concepts, and what they mean in a context, with
|
|
141
|
+
its rules and where and when it applies, drawn as notes.
|
|
142
|
+
- **Chen, Crow's Foot and UML**, switched with one choice; **subtypes** (complete or not, disjoint or overlapping);
|
|
143
|
+
**data types and enumerations** defined once, code sets with their source and version, each linked to its
|
|
144
|
+
**ISO 20022** type.
|
|
145
|
+
- **Edit it on the diagram**: double-click an entity for its attribute table (keys, required, what a foreign key
|
|
146
|
+
references, classification), right-click for new and delete. Every edit is one undo step.
|
|
147
|
+
|
|
148
|
+
### Banking at BIAN level
|
|
149
|
+
|
|
150
|
+
- **Service domains** with their control records, behaviour qualifiers and the service operations BIAN names for
|
|
151
|
+
them, and the **service landscape**: every service domain in its business area and domain.
|
|
152
|
+
- **Read BIAN's own published material instead of retyping it.** A BIAN semantic API (all 258 of release 14 read,
|
|
153
|
+
plain or with ISO 20022) becomes a control record, its qualifiers, their data types and ISO 20022 types in one
|
|
154
|
+
step. BIAN's service landscape in ArchiMate becomes service domains in their areas and domains: run over BIAN's
|
|
155
|
+
v14 model, every one it places lands in the right place.
|
|
156
|
+
- BIAN's vocabulary, its functional patterns, artifacts, action terms and qualifier types, is as BIAN's v14 model
|
|
157
|
+
has it.
|
|
158
|
+
|
|
159
|
+
### Governed and checked (DAMA-DMBOK2)
|
|
160
|
+
|
|
161
|
+
- **Stewardship**: a business owner, data steward and technical custodian on each entity.
|
|
162
|
+
- **Classification**: sensitivity levels and categories (PII, PCI...) on entities and attributes, **checked down
|
|
163
|
+
the mappings**, so a table is never classified lower than the data it holds; a **lens** colours the model by it.
|
|
164
|
+
- **Check model** reviews it as DMBOK2 would: missing keys, foreign keys without relationships, repeating groups,
|
|
165
|
+
unresolved many-to-many, one name with two types, concepts without definitions, names against the **naming
|
|
166
|
+
standard** you set, **data quality rules** by dimension (completeness, validity, uniqueness...), and BIAN's one
|
|
167
|
+
owner per business object.
|
|
168
|
+
- **The Data Model Scorecard**: Steve Hoberman's ten categories, six measured from the model and four for a
|
|
169
|
+
reviewer, weighted as you choose, in one total.
|
|
170
|
+
|
|
171
|
+
### To the database and the warehouse
|
|
172
|
+
|
|
173
|
+
- **SQL DDL**: the physical level as `CREATE TABLE`s with keys, foreign keys and comments.
|
|
174
|
+
- **A dimensional scheme**: facts at their grain with additive, semi-additive or non-additive measures, dimensions
|
|
175
|
+
with their history type and conformed across facts, a **star schema** view, and checks as Kimball would make
|
|
176
|
+
them.
|
|
177
|
+
- **Bases** to start a model from, and **compare and merge** between models.
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## Requirements and story maps
|
|
182
|
+
|
|
183
|
+
Bring in the epics and stories your team already has: a Jira, Azure DevOps or GitLab export (CSV or JSON), or a
|
|
184
|
+
storyboard written in Markdown. Read as a **story map** (epics across, releases down) or a **backlog**, each story
|
|
185
|
+
carries its "As a … I want … so that …", its acceptance criteria (read from their own field, a list in the
|
|
186
|
+
description, or Given/When/Then) and its **traces** to what realises it: an ArchiMate requirement or work package,
|
|
187
|
+
a component, a data concept, entity or table. Drag a card to another epic or release; the toolbar says how many
|
|
188
|
+
stories say when they are done and how many trace to something, and **Check model** lists what is missing.
|
|
189
|
+
|
|
190
|
+
- **Every model alike**: kept, compared and merged as the ArchiMate and data models are, a newer tracker export
|
|
191
|
+
brought in over the old one replacing what changed.
|
|
192
|
+
- **Yours to extend**: a host says what can be traced to, what a story's live state is, and how to find stories by
|
|
193
|
+
meaning (a vector store) — the SqlEngine workbench does all three.
|
|
194
|
+
|
|
195
|
+
---
|
|
196
|
+
|
|
197
|
+
## The diagram editor
|
|
198
|
+
|
|
199
|
+
The ArchiMate modeller is built on a general diagram editor, and every editing feature above is part of that
|
|
200
|
+
editor rather than of ArchiMate: align, format painter, properties of several shapes, find and replace, copy and
|
|
201
|
+
paste, groups and locks, undo, HTML report, image export, several models at once. The diagram editor gives you all
|
|
202
|
+
of them for its own palettes:
|
|
203
|
+
|
|
204
|
+
- basic shapes
|
|
205
|
+
- flowchart and BPMN
|
|
206
|
+
- swimlanes
|
|
207
|
+
- UML: class, sequence, activity, state machine, use case, component, deployment
|
|
208
|
+
- entity-relationship
|
|
209
|
+
- data flow
|
|
210
|
+
- network
|
|
211
|
+
- org chart
|
|
212
|
+
|
|
213
|
+
Each model can hold several diagrams, with line styles inherited from the diagram, then the model, then the tool.
|
|
214
|
+
|
|
215
|
+

|
|
216
|
+
|
|
217
|
+
---
|
|
218
|
+
|
|
219
|
+
## OLAP cubing, linked pivot charts and predictive Ask
|
|
220
|
+
|
|
221
|
+
Turn any rolled-up query result (`GROUP BY ROLLUP`, `semanticengine`, or in-memory facts) into an interactive
|
|
222
|
+
multi-dimensional cube grid (`pivotView`), a synchronized chart (`pivotChart`) that follows every slice and drill,
|
|
223
|
+
and a natural-language query bar (`askBar`) with configurable next-word prediction.
|
|
224
|
+
|
|
225
|
+
### The cube grid (`pivotView` / `PivotView`)
|
|
226
|
+
|
|
227
|
+
- **Interactive layout chips (PresentBlox)**: move dimensions between rows, columns, and page filters, reorder
|
|
228
|
+
hierarchy levels outward or inward, or keep/exclude individual dimension members.
|
|
229
|
+
- **Expand, collapse and drill**: collapse any member onto its rolled-up subtotal (`▾` / `▸`), expand to a chosen
|
|
230
|
+
hierarchy depth (`expandToLevel`), drill down/up along a dimension hierarchy (`onDrill`), or **drill through** any
|
|
231
|
+
cell to inspect the underlying fact rows (`onDrillThrough`).
|
|
232
|
+
- **7 summary & statistical aggregations**: switch cell and subtotal calculations on the fly between **Sum**,
|
|
233
|
+
**Count**, **Average**, **Median**, **Minimum**, **Maximum**, and **Std Dev** (`setAggregation`), computed over raw
|
|
234
|
+
underlying facts (`options.facts`) or descendant leaf cells.
|
|
235
|
+
- **Post-rollup derived formula measures**: define calculated measures such as `Margin = Revenue - Cost` or
|
|
236
|
+
`MarginPct = Revenue > 0 ? Margin / Revenue * 100 : 0` (`derivedMeasures`, `addDerivedMeasure`). Formulas are
|
|
237
|
+
compiled once via `compileFormula` and evaluated *after* rollup so ratios and percentages are always accurate on
|
|
238
|
+
subtotals and grand totals.
|
|
239
|
+
- **Ranking, sorting and % of total**: hierarchical sibling sorting (`sortRowsBy`), **Top-N / Bottom-N** filtering
|
|
240
|
+
within each parent group (`setTopN`), multi-measure visibility toggles (`toggleMeasure`), percentage-of-total
|
|
241
|
+
display modes (`% of row total`, `% of column total`, `% of grand total`), traffic-light conditional formatting
|
|
242
|
+
(custom rules or automatic tertiles), and serializable saved views (`displayState` / `restoreDisplay`).
|
|
243
|
+
|
|
244
|
+
### Linked pivot chart (`pivotChart` / `PivotChart`)
|
|
245
|
+
|
|
246
|
+
- **Follows the cube automatically**: charts the finest visible members on both axes without double-counting totals,
|
|
247
|
+
and redraws whenever the cube is pivoted, collapsed, sorted, filtered, or switched to a different aggregation.
|
|
248
|
+
- **35+ cube chart types, switchable in one click**: switch live between **Line**, **Grouped Bar**, **Stacked Bar**,
|
|
249
|
+
**Bar**, **Area**, **Stacked Area**, **Stream Graph**, **Pareto (80/20)**, **Waterfall**, **Marimekko / Mekko Mosaic**,
|
|
250
|
+
**Lollipop**, **Pipe**, **Heatmap**, **Radar / Spider**, **Parallel Coordinates**, **Population Pyramid**,
|
|
251
|
+
**Sankey**, **Chord**, **Treemap**, **Sunburst**, **Icicle**, **Outline**, **Pie**, **Donut**, **Funnel**,
|
|
252
|
+
**Radial Bar**, **Word Cloud**, **Box Plot**, **Density**, **Violin**, **Histogram**, **Q-Q Plot**, **Lag Plot**,
|
|
253
|
+
**Scatter**, **Bubble**, **3D Bar**, **3D Orbit Bar**, and **3D Orbit Stacked Bar** (`pivotChartLink.setType(key)`
|
|
254
|
+
or via the in-chart `▾` menu).
|
|
255
|
+
- **Click any chart mark to drill the cube**: clicking a bar, line vertex, slice, treemap/icicle cell, Sankey node,
|
|
256
|
+
or scatter point expands a collapsed member or drills the cube down to the next hierarchy level on either axis.
|
|
257
|
+
|
|
258
|
+
### Predictive natural-language query bar (`askBar` / `AskView`)
|
|
259
|
+
|
|
260
|
+
- **Scrollable next-word prediction**: predicts the next keyword, measure, dimension, operator, or member value as
|
|
261
|
+
you type, with semantic badges (`sense`, `reference`, `relation`, `kind`) and full keyboard navigation (`↑`/`↓`,
|
|
262
|
+
`Tab`/`Enter` to accept, `Escape` to dismiss).
|
|
263
|
+
- **User-configurable viewport**: built-in `Predict next word` selector lets users choose how many predicted items
|
|
264
|
+
are visible at once in the scrollable list (`Off`, `3`, `5`, `8`, `10`, or custom `predictChoices`).
|
|
265
|
+
- **Pluggable intelligence**: pass declarative `measures`, `dimensions`, `members` and `sampleQuestions` for the
|
|
266
|
+
built-in grammar/bigram predictor, or wire `suggest: (text) => semanticEngine.suggest(text)` to connect directly
|
|
267
|
+
to `semanticengine`.
|
|
268
|
+
|
|
269
|
+
```javascript
|
|
270
|
+
import { RenderEngine } from '@peter.prib/renderengine';
|
|
271
|
+
|
|
272
|
+
// 1. Render an interactive OLAP cube with derived formulas and statistical aggregations
|
|
273
|
+
const gridEngine = new RenderEngine('#pivot-grid', { rendererType: 'svg' });
|
|
274
|
+
const cube = gridEngine.pivotView(rolledUpRows, {
|
|
275
|
+
title: 'Revenue & Margin Cube',
|
|
276
|
+
rowAxis: ['Year', 'Quarter'],
|
|
277
|
+
columnAxis: ['Region'],
|
|
278
|
+
facts: rawFactRows, // enables exact Count, Avg, Median, Min, Max, Std Dev
|
|
279
|
+
measures: ['Revenue', 'Cost'],
|
|
280
|
+
derivedMeasures: [
|
|
281
|
+
{ name: 'Margin', formula: 'Revenue - Cost' },
|
|
282
|
+
{ name: 'MarginPct', formula: 'Revenue > 0 ? Margin / Revenue * 100 : 0' },
|
|
283
|
+
],
|
|
284
|
+
columns: [
|
|
285
|
+
{ name: 'Year', kind: 'time' },
|
|
286
|
+
{ name: 'Quarter', kind: 'time' },
|
|
287
|
+
{ name: 'Region', kind: 'categorical' },
|
|
288
|
+
{ name: 'Revenue', kind: 'numeric', measure: 'additive' },
|
|
289
|
+
{ name: 'Cost', kind: 'numeric', measure: 'additive' },
|
|
290
|
+
{ name: '_rollup', kind: 'rollup', dimensions: ['Year', 'Quarter', 'Region'] },
|
|
291
|
+
],
|
|
292
|
+
});
|
|
293
|
+
|
|
294
|
+
// Switch aggregations, Top-N ranking, or % of total programmatically (or from the ⋮ menu):
|
|
295
|
+
cube.setAggregation('median'); // 'sum' | 'count' | 'avg' | 'median' | 'min' | 'max' | 'stddev'
|
|
296
|
+
cube.setTopN(5, { measure: 'Margin', direction: 'desc' });
|
|
297
|
+
cube.setValueMode('rowPercent'); // 'value' | 'rowPercent' | 'columnPercent' | 'totalPercent'
|
|
298
|
+
|
|
299
|
+
// 2. Link a Pivot Chart that follows the cube and drills on click across 35+ chart types
|
|
300
|
+
const chartEngine = new RenderEngine('#pivot-chart', { rendererType: 'svg' });
|
|
301
|
+
const pivotChart = chartEngine.pivotChart(cube, { type: 'stackedBar' });
|
|
302
|
+
pivotChart.setType('marimekko'); // switch to 'line', 'pareto', 'icicle', 'sankey', 'radar', ...
|
|
303
|
+
|
|
304
|
+
// 3. Mount a Predictive Ask Bar with configurable next-word prediction in a scrollable list
|
|
305
|
+
const askEngine = new RenderEngine('#ask-results', { rendererType: 'svg' });
|
|
306
|
+
askEngine.askBar('#ask-bar', {
|
|
307
|
+
value: 'Average Revenue by Quarter and Region',
|
|
308
|
+
measures: ['Revenue', 'Cost', 'Margin', 'MarginPct'],
|
|
309
|
+
dimensions: ['Region', 'Year', 'Quarter', 'Month'],
|
|
310
|
+
members: (dim) => [...new Set(rawFactRows.map(r => r[dim]))],
|
|
311
|
+
visibleCount: 5,
|
|
312
|
+
predictChoices: [0, 3, 5, 8, 10], // 0 = Off, or N visible items in scrollable list
|
|
313
|
+
onAsk: (question) => { /* update cube & resultView */ },
|
|
314
|
+
});
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
---
|
|
318
|
+
|
|
319
|
+
## The chart library (50+ chart & diagram types)
|
|
320
|
+
|
|
321
|
+
The engine underneath draws **over 50 chart and diagram types** to interchangeable **SVG** or **Canvas** backends,
|
|
322
|
+
all driven by a single declarative catalog (`CHART_CATALOG`):
|
|
323
|
+
|
|
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).
|
|
342
|
+
- **Interactive tables & diagrams**: `tableChart`, `resultView` (sortable, filterable, pageable table that switches
|
|
343
|
+
into any fitting chart via `ChartChooser`), `pivotView`, `pivotChart`, `graphDiagram` (force-directed, hierarchical
|
|
344
|
+
Dewey keys, table nodes, orthogonal/polyline obstacle-avoiding routing, manual bendpoints), `archimateDiagram`,
|
|
345
|
+
`dataModelDiagram`, `railroadDiagram`, `ebnfDiagram`.
|
|
346
|
+
|
|
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.
|
|
349
|
+
|
|
350
|
+
```javascript
|
|
351
|
+
const engine = new RenderEngine('#chart', { rendererType: 'svg' });
|
|
352
|
+
|
|
353
|
+
// 80/20 Pareto Chart with cumulative percentage curve and 80% reference line
|
|
354
|
+
engine.paretoChart([
|
|
355
|
+
{ label: 'Timeout', value: 142 },
|
|
356
|
+
{ label: 'Auth Expired', value: 88 },
|
|
357
|
+
{ label: 'Rate Limit', value: 54 },
|
|
358
|
+
{ label: 'Schema Mismatch', value: 26 },
|
|
359
|
+
], { title: 'Incident Root Causes', cutoffPercent: 80 });
|
|
360
|
+
|
|
361
|
+
// 100% Normalized Stacked Bar Chart
|
|
362
|
+
engine.stackedBarChart([
|
|
363
|
+
{ label: 'Q1', values: [180, 90, 50] },
|
|
364
|
+
{ label: 'Q2', values: [210, 110, 60] },
|
|
365
|
+
], { title: 'Segment Share by Quarter', normalize: true, seriesLabels: ['Enterprise', 'Mid-Market', 'SMB'], legend: true });
|
|
366
|
+
|
|
367
|
+
// Marimekko (Mekko Mosaic), Lollipop, and Icicle Partition Charts
|
|
368
|
+
engine.marimekkoChart(seriesData, { title: 'Market Share by Region & Segment' });
|
|
369
|
+
engine.lollipopChart(seriesData, { title: 'Regional Revenue Comparison', legend: true });
|
|
370
|
+
engine.icicleChart(hierarchyTree, { title: 'Disk Usage by Category' });
|
|
371
|
+
```
|
|
372
|
+
|
|
373
|
+

|
|
374
|
+
|
|
375
|
+

|
|
376
|
+
|
|
377
|
+
---
|
|
378
|
+
|
|
379
|
+
## Put it in your own page
|
|
380
|
+
|
|
381
|
+
```bash
|
|
382
|
+
npm install @peter.prib/renderengine
|
|
383
|
+
```
|
|
384
|
+
|
|
385
|
+
The package is the ES module source and the built bundles:
|
|
386
|
+
|
|
387
|
+
- `import { ArchimateModel, RenderEngine } from '@peter.prib/renderengine'`: the engine and the models (this also
|
|
388
|
+
imports under Node).
|
|
389
|
+
- `import '@peter.prib/renderengine/workspace'`: the workbench shell and its parts (browser only).
|
|
390
|
+
- `@peter.prib/renderengine/dist/renderengine-workspace.umd.js`: the same as one classic script.
|
|
391
|
+
|
|
392
|
+
The modeller is a part in the `<ws-workspace>` workbench shell. One script tag and a JSON spec is the whole host
|
|
393
|
+
page:
|
|
394
|
+
|
|
395
|
+
```html
|
|
396
|
+
<script src="dist/renderengine-workspace.umd.js"></script>
|
|
397
|
+
<script>
|
|
398
|
+
const { el, registerBuiltinParts, ArchimateCanvasPart } = RenderEngineWorkspace;
|
|
399
|
+
const ws = document.body.appendChild(el({ tag: 'ws-workspace', attrs: { label: 'Modeller' } }));
|
|
400
|
+
registerBuiltinParts(ws);
|
|
401
|
+
ws.registerPart(ArchimateCanvasPart);
|
|
402
|
+
ws.addParts([{
|
|
403
|
+
id: 'models', type: 'models', editorType: 'archimate-canvas', // several models, a tab each
|
|
404
|
+
models: [{
|
|
405
|
+
id: 'shop', name: 'Shop',
|
|
406
|
+
elements: [{ id: 'c', name: 'Customer', type: 'business-actor' }, { id: 'o', name: 'Order', type: 'business-process' }],
|
|
407
|
+
relationships: [{ source: 'c', target: 'o', kind: 'assignment' }],
|
|
408
|
+
views: [{ id: 'v', name: 'Main', elementIds: ['c', 'o'], layout: { c: { x: 100, y: 100 }, o: { x: 320, y: 100 } } }],
|
|
409
|
+
}],
|
|
410
|
+
}]);
|
|
411
|
+
ws.registerPerspective('Modelling', { type: 'part', partId: 'models' });
|
|
412
|
+
ws.activatePerspective('Modelling');
|
|
413
|
+
</script>
|
|
414
|
+
```
|
|
415
|
+
|
|
416
|
+
Use `editorType: 'diagram-editor'` with `DiagramEditorPart` for the diagram editor, `editorType: 'data-model'`
|
|
417
|
+
with `DataModelPart` for the data modeller, and `editorType: 'requirements'` with `RequirementsPart` for the story
|
|
418
|
+
map. The models are plain JavaScript APIs (`ArchimateModel`, `DiagramModel`, `DataModel`, `RequirementsModel`), so
|
|
419
|
+
you can also build, check, score, search, report on and export models with no UI at all, under Node too:
|
|
420
|
+
`new DataModel(spec).checker().run()`, `new SqlDdl().write(model)`,
|
|
421
|
+
`new RequirementsModel(new TrackerExport().read(csv)).coverage()`.
|
|
422
|
+
|
|
423
|
+
---
|
|
424
|
+
|
|
425
|
+
## Documentation
|
|
426
|
+
|
|
427
|
+
| Document | What it covers |
|
|
428
|
+
|---|---|
|
|
429
|
+
| `documentation/REFERENCE.md` | The API: chart methods and options, the editors, models, commands, file formats |
|
|
430
|
+
| `documentation/WORKSPACE_ARCHITECTURE.md` | The `<ws-workspace>` shell: parts, layout, context bus, work area |
|
|
431
|
+
| `documentation/ARCHITECTURE.md` | Module layout and the chart-type catalog |
|
|
432
|
+
| `documentation/LLM_ARCHIMATE_GUIDE.md` | Generating valid ArchiMate model data, with a prompt template |
|
|
433
|
+
| `documentation/tasks.md` | What's still to come |
|
|
434
|
+
|
|
435
|
+
## Build and test
|
|
436
|
+
|
|
437
|
+
```bash
|
|
438
|
+
npm install # dev tools only: Rollup
|
|
439
|
+
npm run build # dist/renderengine.umd.js and dist/renderengine-workspace.umd.js
|
|
440
|
+
npm test # Node's built-in test runner, no browser needed
|
|
441
|
+
npm run screenshots # this README's pictures, from the example pages (headless Chrome)
|
|
442
|
+
```
|
|
443
|
+
|
|
444
|
+
There are two bundles:
|
|
445
|
+
|
|
446
|
+
- `renderengine.umd.js` (global `RenderEngine`): the engine.
|
|
447
|
+
- `renderengine-workspace.umd.js` (global `RenderEngineWorkspace`): the workbench shell and its parts, plus the
|
|
448
|
+
whole engine API, so one script tag is enough.
|
|
449
|
+
|
|
450
|
+
The source is plain ES modules. `src/index.js` imports under Node, which is how the tests run.
|
|
451
|
+
|
|
452
|
+
## Licence
|
|
453
|
+
|
|
454
|
+
MIT. Contributions welcome.
|