@nebula.js/sn-org-chart 1.8.0 → 1.9.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 +61 -9
- package/api-specifications/properties.json +1 -1
- package/api-specifications/sn-org-chart.json +3968 -0
- package/core/esm/index.js +2 -2
- package/dist/sn-org-chart.js +2 -2
- package/dist/sn-org-chart.systemjs.js +2 -2
- package/package.json +31 -23
- package/sn-org-chart-ext/dist/sn-org-chart.js +2 -2
- package/sn-org-chart-ext/ext.js +1 -1
- package/sn-org-chart-ext/sn-org-chart.qext +1 -1
package/README.md
CHANGED
|
@@ -13,20 +13,72 @@ You can also load through the script tag directly from [https://unpkg.com](https
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
15
|
```js
|
|
16
|
-
|
|
17
|
-
import
|
|
18
|
-
import org from '@nebula.js/sn-org-chart';
|
|
16
|
+
import { embed } from "@nebula.js/stardust";
|
|
17
|
+
import org from "@nebula.js/sn-org-chart";
|
|
19
18
|
|
|
20
19
|
// 'app' is an enigma app model
|
|
21
20
|
const nuked = embed(app, {
|
|
22
|
-
types: [
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
types: [
|
|
22
|
+
{
|
|
23
|
+
name: "orgchart",
|
|
24
|
+
load: () => Promise.resolve(org),
|
|
25
|
+
},
|
|
26
|
+
],
|
|
26
27
|
});
|
|
27
28
|
|
|
28
|
-
|
|
29
|
+
nuked.render({
|
|
29
30
|
element,
|
|
30
|
-
type:
|
|
31
|
+
type: "orgchart",
|
|
32
|
+
fields: ["EmployeeID", "ManagerID"],
|
|
31
33
|
});
|
|
32
34
|
```
|
|
35
|
+
|
|
36
|
+
## Data requirements
|
|
37
|
+
|
|
38
|
+
The chart needs exactly two dimensions and accepts one optional measure:
|
|
39
|
+
|
|
40
|
+
| Position | Role | Notes |
|
|
41
|
+
| ----------- | ----------------- | ----------------------------------------------------------------------------- |
|
|
42
|
+
| Dimension 1 | Node id | Must be unique per node. Shown as the card title unless a label is provided. |
|
|
43
|
+
| Dimension 2 | Parent id | Must match another row's node id. A non-matching value makes the node a root. |
|
|
44
|
+
| Measure | Value on the card | Optional. Rendered as `<measure title>: <value>`. |
|
|
45
|
+
|
|
46
|
+
Extra content per node is added as attribute expressions on dimension 1, matched by `id`:
|
|
47
|
+
|
|
48
|
+
| Attribute expression id | Shown as |
|
|
49
|
+
| ----------------------- | ----------------------------------------------- |
|
|
50
|
+
| `labelExpression` | Card title |
|
|
51
|
+
| `subLabelExpression` | Card sub-title |
|
|
52
|
+
| `extraLabelExpression` | Card description (only when no measure is used) |
|
|
53
|
+
| `imageExpression` | Image URL (`http`, `https` or `data:`) |
|
|
54
|
+
| `colorByExpression` | Card background color |
|
|
55
|
+
|
|
56
|
+
Multiple roots are grouped under a synthetic root node, and circular references are reported as a warning. See the [data model documentation](./docs/data-model.md) for details.
|
|
57
|
+
|
|
58
|
+
## Development
|
|
59
|
+
|
|
60
|
+
Requires Node.js 24 or later and pnpm.
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
pnpm install
|
|
64
|
+
pnpm start # dev server on http://localhost:8000
|
|
65
|
+
pnpm test:unit # vitest
|
|
66
|
+
pnpm test:e2e # playwright rendering tests
|
|
67
|
+
pnpm build # dist/, core/esm/ and the Qlik Sense extension in sn-org-chart-ext/
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
See [.github/CONTRIBUTION.md](./.github/CONTRIBUTION.md) for the contribution workflow.
|
|
71
|
+
|
|
72
|
+
## Documentation
|
|
73
|
+
|
|
74
|
+
Deeper documentation lives in [`docs/`](./docs/README.md):
|
|
75
|
+
|
|
76
|
+
- [Data model](./docs/data-model.md) — hypercube setup and how rows become a tree
|
|
77
|
+
- [Architecture](./docs/architecture.md) — modules, render lifecycle, property panel
|
|
78
|
+
- [Layout and navigation](./docs/layout-and-navigation.md) — positioning, expand/collapse, zoom, selections, snapshots
|
|
79
|
+
- [Styling and theming](./docs/styling-and-theming.md) — card styling model, colours, theme integration
|
|
80
|
+
- [Development](./docs/development.md) — scripts, tests, CI and release
|
|
81
|
+
|
|
82
|
+
## License
|
|
83
|
+
|
|
84
|
+
[MIT](./LICENSE)
|