ngx-apexsankey 1.0.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/LICENSE +80 -0
- package/README.md +230 -0
- package/dist/LICENSE +80 -0
- package/dist/README.md +230 -0
- package/dist/esm2022/lib/ngx-apexsankey.component.mjs +182 -0
- package/dist/esm2022/lib/types.mjs +2 -0
- package/dist/esm2022/lib/utils.mjs +50 -0
- package/dist/esm2022/ngx-apexsankey.mjs +5 -0
- package/dist/esm2022/public-api.mjs +5 -0
- package/dist/fesm2022/ngx-apexsankey.mjs +240 -0
- package/dist/fesm2022/ngx-apexsankey.mjs.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/lib/ngx-apexsankey.component.d.ts +70 -0
- package/dist/lib/types.d.ts +173 -0
- package/dist/lib/utils.d.ts +24 -0
- package/dist/public-api.d.ts +3 -0
- package/package.json +43 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
## 📄 License Options for ngx-apexsankey
|
|
2
|
+
|
|
3
|
+
ngx-apexsankey is offered under a **dual-license model** to support individuals, startups, and commercial products of all sizes.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
### 🔓 Community License (Free)
|
|
8
|
+
|
|
9
|
+
For individuals, non-profits, educators, and small businesses with **less than $2 million USD in annual revenue**.
|
|
10
|
+
|
|
11
|
+
✅ What's allowed:
|
|
12
|
+
|
|
13
|
+
- Personal, educational, or non-profit use
|
|
14
|
+
- Commercial use by small orgs (< $2M annual revenue)
|
|
15
|
+
- Modifications and redistribution (with attribution)
|
|
16
|
+
|
|
17
|
+
🚫 Not allowed:
|
|
18
|
+
|
|
19
|
+
- Use by companies or entities over $2M/year revenue
|
|
20
|
+
- Use in competing charting products
|
|
21
|
+
- Sublicensing under different terms
|
|
22
|
+
|
|
23
|
+
➡ By using ngx-apexsankey under this license, you confirm that **you qualify as a Small Organization**.
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
### 💼 Commercial License (Paid)
|
|
28
|
+
|
|
29
|
+
Required if **you or your affiliated organization earns $2 million USD or more per year**.
|
|
30
|
+
|
|
31
|
+
✅ What's included:
|
|
32
|
+
|
|
33
|
+
- Use in internal tools and commercial applications
|
|
34
|
+
- Modifications and app-level distribution
|
|
35
|
+
- 12-month subscription with updates & support
|
|
36
|
+
|
|
37
|
+
🚫 Not allowed:
|
|
38
|
+
|
|
39
|
+
- Redistribution in toolkits, SDKs, or platforms
|
|
40
|
+
- Use by unlicensed developers
|
|
41
|
+
- Competing charting products
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
### 🔄 OEM / Redistribution License (Paid)
|
|
46
|
+
|
|
47
|
+
Required if you are **embedding ngx-apexsankey into a product or platform used by other people**, such as:
|
|
48
|
+
|
|
49
|
+
- No-code dashboards
|
|
50
|
+
- Developer platforms
|
|
51
|
+
- Embedded BI tools
|
|
52
|
+
- White-labeled apps or SDKs
|
|
53
|
+
|
|
54
|
+
✅ What's included:
|
|
55
|
+
|
|
56
|
+
- Redistribution rights for 1 application or product
|
|
57
|
+
- 12-month subscription with updates & support
|
|
58
|
+
|
|
59
|
+
✅ OEM **not required** if your app simply renders static charts and users **cannot** configure or interact with them.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
### ⚠️ License Acceptance
|
|
64
|
+
|
|
65
|
+
By installing ngx-apexsankey (e.g., via `npm install ngx-apexsankey`), you are agreeing to the applicable license based on your usage:
|
|
66
|
+
|
|
67
|
+
- Community License (if under $2M revenue)
|
|
68
|
+
- Commercial License (if over $2M revenue)
|
|
69
|
+
- OEM License (if redistributing to third-party users)
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
### 🛠 Need a License or Have Questions?
|
|
74
|
+
|
|
75
|
+
📧 Contact us at [sales@apexcharts.com](mailto:sales@apexcharts.com)
|
|
76
|
+
📚 Read full license agreements here: [https://apexcharts.com/license](https://apexcharts.com/license)
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
Thank you for supporting ApexCharts! Your licensing helps keep it free and open for individuals and small teams.
|
package/README.md
ADDED
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
# ngx-apexsankey
|
|
2
|
+
|
|
3
|
+
Angular wrapper for [ApexSankey](https://github.com/apexcharts/apexsankey) - A JavaScript library to create Sankey diagrams.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install ngx-apexsankey apexsankey @svgdotjs/svg.js
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Loading ApexSankey
|
|
12
|
+
|
|
13
|
+
**Important:** You must load ApexSankey before using the Angular component. Choose one of the following methods:
|
|
14
|
+
|
|
15
|
+
### Option 1: CDN Script Tags (Recommended)
|
|
16
|
+
|
|
17
|
+
Add the scripts to your `index.html`:
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<!DOCTYPE html>
|
|
21
|
+
<html>
|
|
22
|
+
<head>
|
|
23
|
+
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js"></script>
|
|
24
|
+
<script src="https://cdn.jsdelivr.net/npm/apexsankey/apexsankey.min.js"></script>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
<app-root></app-root>
|
|
28
|
+
</body>
|
|
29
|
+
</html>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Option 2: Angular.json Scripts
|
|
33
|
+
|
|
34
|
+
Add to the `scripts` array in your `angular.json`:
|
|
35
|
+
|
|
36
|
+
```json
|
|
37
|
+
{
|
|
38
|
+
"architect": {
|
|
39
|
+
"build": {
|
|
40
|
+
"options": {
|
|
41
|
+
"scripts": [
|
|
42
|
+
"node_modules/@svgdotjs/svg.js/dist/svg.min.js",
|
|
43
|
+
"node_modules/apexsankey/apexsankey.min.js"
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Quick Start
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
import { Component } from '@angular/core';
|
|
55
|
+
import { NgxApexsankeyComponent, GraphData, SankeyOptions } from 'ngx-apexsankey';
|
|
56
|
+
|
|
57
|
+
@Component({
|
|
58
|
+
selector: 'app-example',
|
|
59
|
+
standalone: true,
|
|
60
|
+
imports: [NgxApexsankeyComponent],
|
|
61
|
+
template: `
|
|
62
|
+
<ngx-apexsankey
|
|
63
|
+
[data]="data"
|
|
64
|
+
[options]="options"
|
|
65
|
+
(nodeClick)="onNodeClick($event)">
|
|
66
|
+
</ngx-apexsankey>
|
|
67
|
+
`
|
|
68
|
+
})
|
|
69
|
+
export class ExampleComponent {
|
|
70
|
+
data: GraphData = {
|
|
71
|
+
nodes: [
|
|
72
|
+
{ id: 'oil', title: 'Oil' },
|
|
73
|
+
{ id: 'gas', title: 'Natural Gas' },
|
|
74
|
+
{ id: 'fossil', title: 'Fossil Fuels' },
|
|
75
|
+
{ id: 'energy', title: 'Energy' }
|
|
76
|
+
],
|
|
77
|
+
edges: [
|
|
78
|
+
{ source: 'oil', target: 'fossil', value: 15 },
|
|
79
|
+
{ source: 'gas', target: 'fossil', value: 20 },
|
|
80
|
+
{ source: 'fossil', target: 'energy', value: 35 }
|
|
81
|
+
]
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
options: Partial<SankeyOptions> = {
|
|
85
|
+
width: 800,
|
|
86
|
+
height: 600,
|
|
87
|
+
nodeWidth: 20
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
onNodeClick(node: any) {
|
|
91
|
+
console.log('Node clicked:', node);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## License Setup
|
|
97
|
+
|
|
98
|
+
If you have a commercial license, set it once at app initialization:
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
// app.config.ts
|
|
102
|
+
import { setApexSankeyLicense } from 'ngx-apexsankey';
|
|
103
|
+
|
|
104
|
+
setApexSankeyLicense('your-license-key-here');
|
|
105
|
+
|
|
106
|
+
export const appConfig: ApplicationConfig = {
|
|
107
|
+
providers: []
|
|
108
|
+
};
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Inputs
|
|
112
|
+
|
|
113
|
+
| Input | Type | Required | Description |
|
|
114
|
+
| --------- | ------------------------ | -------- | ------------------------------------- |
|
|
115
|
+
| `data` | `GraphData` | Yes | Sankey diagram data (nodes and edges) |
|
|
116
|
+
| `options` | `Partial<SankeyOptions>` | No | Configuration options for the diagram |
|
|
117
|
+
|
|
118
|
+
## Outputs
|
|
119
|
+
|
|
120
|
+
| Output | Type | Description |
|
|
121
|
+
| ----------- | -------------------------- | ---------------------------- |
|
|
122
|
+
| `nodeClick` | `EventEmitter<SankeyNode>` | Emits when a node is clicked |
|
|
123
|
+
|
|
124
|
+
## Data Format
|
|
125
|
+
|
|
126
|
+
### Nodes
|
|
127
|
+
|
|
128
|
+
```typescript
|
|
129
|
+
interface SankeyNode {
|
|
130
|
+
id: string; // unique identifier
|
|
131
|
+
title: string; // display label
|
|
132
|
+
color?: string; // optional custom color
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Edges
|
|
137
|
+
|
|
138
|
+
```typescript
|
|
139
|
+
interface SankeyEdge {
|
|
140
|
+
source: string; // source node id
|
|
141
|
+
target: string; // target node id
|
|
142
|
+
value: number; // edge weight/size
|
|
143
|
+
type?: string; // optional grouping type
|
|
144
|
+
color?: string; // optional custom color
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## Options
|
|
149
|
+
|
|
150
|
+
| Option | Type | Default | Description |
|
|
151
|
+
| ------------------ | ---------------------- | ---------------------------- | -------------------------------------------- |
|
|
152
|
+
| `width` | `number \| string` | `800` | Width of graph container |
|
|
153
|
+
| `height` | `number \| string` | `800` | Height of graph container |
|
|
154
|
+
| `canvasStyle` | `string` | `""` | CSS styles for canvas root container |
|
|
155
|
+
| `spacing` | `number` | `100` | Spacing from top and left of graph container |
|
|
156
|
+
| `nodeWidth` | `number` | `20` | Width of graph nodes |
|
|
157
|
+
| `nodeBorderWidth` | `number` | `1` | Border width of nodes in pixels |
|
|
158
|
+
| `nodeBorderColor` | `string` | `""` | Border color of nodes |
|
|
159
|
+
| `onNodeClick` | `(node) => void` | `undefined` | Callback function for node click |
|
|
160
|
+
| `edgeOpacity` | `number` | `0.4` | Opacity value for edges (0 to 1) |
|
|
161
|
+
| `edgeGradientFill` | `boolean` | `true` | Enable gradient fill based on node colors |
|
|
162
|
+
| `enableTooltip` | `boolean` | `false` | Enable tooltip on hover |
|
|
163
|
+
| `enableToolbar` | `boolean` | `false` | Enable/disable graph toolbar |
|
|
164
|
+
| `tooltipId` | `string` | `"sankey-tooltip-container"` | Tooltip HTML element id |
|
|
165
|
+
| `tooltipTemplate` | `(content) => string` | default template | HTML template for tooltip |
|
|
166
|
+
| `tooltipBorderColor` | `string` | `"#BCBCBC"` | Border color of tooltip |
|
|
167
|
+
| `tooltipBGColor` | `string` | `"#FFFFFF"` | Background color of tooltip |
|
|
168
|
+
| `fontSize` | `string` | `"14px"` | Font size of node labels |
|
|
169
|
+
| `fontFamily` | `string` | `""` | Font family of node labels |
|
|
170
|
+
| `fontWeight` | `string` | `"400"` | Font weight of node labels |
|
|
171
|
+
| `fontColor` | `string` | `"#000000"` | Font color of node labels |
|
|
172
|
+
|
|
173
|
+
## Custom Node Ordering
|
|
174
|
+
|
|
175
|
+
```typescript
|
|
176
|
+
const data: GraphData = {
|
|
177
|
+
nodes: [...],
|
|
178
|
+
edges: [...],
|
|
179
|
+
options: {
|
|
180
|
+
order: [
|
|
181
|
+
[['a', 'b']], // first layer
|
|
182
|
+
[['c']] // second layer
|
|
183
|
+
]
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## Custom Tooltip
|
|
189
|
+
|
|
190
|
+
```typescript
|
|
191
|
+
const options: Partial<SankeyOptions> = {
|
|
192
|
+
enableTooltip: true,
|
|
193
|
+
tooltipTemplate: ({ source, target, value }) => `
|
|
194
|
+
<div style="padding: 8px;">
|
|
195
|
+
<strong>${source.title}</strong> → <strong>${target.title}</strong>
|
|
196
|
+
<br />Value: ${value}
|
|
197
|
+
</div>
|
|
198
|
+
`
|
|
199
|
+
};
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
## TypeScript
|
|
203
|
+
|
|
204
|
+
All types are exported:
|
|
205
|
+
|
|
206
|
+
```typescript
|
|
207
|
+
import {
|
|
208
|
+
NgxApexsankeyComponent,
|
|
209
|
+
GraphData,
|
|
210
|
+
SankeyNode,
|
|
211
|
+
SankeyEdge,
|
|
212
|
+
SankeyOptions,
|
|
213
|
+
SankeyGraph,
|
|
214
|
+
setApexSankeyLicense
|
|
215
|
+
} from 'ngx-apexsankey';
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
## Browser Support
|
|
219
|
+
|
|
220
|
+
- Angular 17+
|
|
221
|
+
- Modern browsers (Chrome, Firefox, Safari, Edge)
|
|
222
|
+
|
|
223
|
+
## License
|
|
224
|
+
|
|
225
|
+
See [LICENSE](./LICENSE) file for details.
|
|
226
|
+
|
|
227
|
+
## Links
|
|
228
|
+
|
|
229
|
+
- [ApexSankey Documentation](https://apexcharts.com/docs/sankey)
|
|
230
|
+
- [ApexSankey GitHub](https://github.com/apexcharts/apexsankey)
|
package/dist/LICENSE
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
## 📄 License Options for ngx-apexsankey
|
|
2
|
+
|
|
3
|
+
ngx-apexsankey is offered under a **dual-license model** to support individuals, startups, and commercial products of all sizes.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
### 🔓 Community License (Free)
|
|
8
|
+
|
|
9
|
+
For individuals, non-profits, educators, and small businesses with **less than $2 million USD in annual revenue**.
|
|
10
|
+
|
|
11
|
+
✅ What's allowed:
|
|
12
|
+
|
|
13
|
+
- Personal, educational, or non-profit use
|
|
14
|
+
- Commercial use by small orgs (< $2M annual revenue)
|
|
15
|
+
- Modifications and redistribution (with attribution)
|
|
16
|
+
|
|
17
|
+
🚫 Not allowed:
|
|
18
|
+
|
|
19
|
+
- Use by companies or entities over $2M/year revenue
|
|
20
|
+
- Use in competing charting products
|
|
21
|
+
- Sublicensing under different terms
|
|
22
|
+
|
|
23
|
+
➡ By using ngx-apexsankey under this license, you confirm that **you qualify as a Small Organization**.
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
### 💼 Commercial License (Paid)
|
|
28
|
+
|
|
29
|
+
Required if **you or your affiliated organization earns $2 million USD or more per year**.
|
|
30
|
+
|
|
31
|
+
✅ What's included:
|
|
32
|
+
|
|
33
|
+
- Use in internal tools and commercial applications
|
|
34
|
+
- Modifications and app-level distribution
|
|
35
|
+
- 12-month subscription with updates & support
|
|
36
|
+
|
|
37
|
+
🚫 Not allowed:
|
|
38
|
+
|
|
39
|
+
- Redistribution in toolkits, SDKs, or platforms
|
|
40
|
+
- Use by unlicensed developers
|
|
41
|
+
- Competing charting products
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
### 🔄 OEM / Redistribution License (Paid)
|
|
46
|
+
|
|
47
|
+
Required if you are **embedding ngx-apexsankey into a product or platform used by other people**, such as:
|
|
48
|
+
|
|
49
|
+
- No-code dashboards
|
|
50
|
+
- Developer platforms
|
|
51
|
+
- Embedded BI tools
|
|
52
|
+
- White-labeled apps or SDKs
|
|
53
|
+
|
|
54
|
+
✅ What's included:
|
|
55
|
+
|
|
56
|
+
- Redistribution rights for 1 application or product
|
|
57
|
+
- 12-month subscription with updates & support
|
|
58
|
+
|
|
59
|
+
✅ OEM **not required** if your app simply renders static charts and users **cannot** configure or interact with them.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
### ⚠️ License Acceptance
|
|
64
|
+
|
|
65
|
+
By installing ngx-apexsankey (e.g., via `npm install ngx-apexsankey`), you are agreeing to the applicable license based on your usage:
|
|
66
|
+
|
|
67
|
+
- Community License (if under $2M revenue)
|
|
68
|
+
- Commercial License (if over $2M revenue)
|
|
69
|
+
- OEM License (if redistributing to third-party users)
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
### 🛠 Need a License or Have Questions?
|
|
74
|
+
|
|
75
|
+
📧 Contact us at [sales@apexcharts.com](mailto:sales@apexcharts.com)
|
|
76
|
+
📚 Read full license agreements here: [https://apexcharts.com/license](https://apexcharts.com/license)
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
Thank you for supporting ApexCharts! Your licensing helps keep it free and open for individuals and small teams.
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
# ngx-apexsankey
|
|
2
|
+
|
|
3
|
+
Angular wrapper for [ApexSankey](https://github.com/apexcharts/apexsankey) - A JavaScript library to create Sankey diagrams.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install ngx-apexsankey apexsankey @svgdotjs/svg.js
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Loading ApexSankey
|
|
12
|
+
|
|
13
|
+
**Important:** You must load ApexSankey before using the Angular component. Choose one of the following methods:
|
|
14
|
+
|
|
15
|
+
### Option 1: CDN Script Tags (Recommended)
|
|
16
|
+
|
|
17
|
+
Add the scripts to your `index.html`:
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<!DOCTYPE html>
|
|
21
|
+
<html>
|
|
22
|
+
<head>
|
|
23
|
+
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js"></script>
|
|
24
|
+
<script src="https://cdn.jsdelivr.net/npm/apexsankey/apexsankey.min.js"></script>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
<app-root></app-root>
|
|
28
|
+
</body>
|
|
29
|
+
</html>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Option 2: Angular.json Scripts
|
|
33
|
+
|
|
34
|
+
Add to the `scripts` array in your `angular.json`:
|
|
35
|
+
|
|
36
|
+
```json
|
|
37
|
+
{
|
|
38
|
+
"architect": {
|
|
39
|
+
"build": {
|
|
40
|
+
"options": {
|
|
41
|
+
"scripts": [
|
|
42
|
+
"node_modules/@svgdotjs/svg.js/dist/svg.min.js",
|
|
43
|
+
"node_modules/apexsankey/apexsankey.min.js"
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Quick Start
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
import { Component } from '@angular/core';
|
|
55
|
+
import { NgxApexsankeyComponent, GraphData, SankeyOptions } from 'ngx-apexsankey';
|
|
56
|
+
|
|
57
|
+
@Component({
|
|
58
|
+
selector: 'app-example',
|
|
59
|
+
standalone: true,
|
|
60
|
+
imports: [NgxApexsankeyComponent],
|
|
61
|
+
template: `
|
|
62
|
+
<ngx-apexsankey
|
|
63
|
+
[data]="data"
|
|
64
|
+
[options]="options"
|
|
65
|
+
(nodeClick)="onNodeClick($event)">
|
|
66
|
+
</ngx-apexsankey>
|
|
67
|
+
`
|
|
68
|
+
})
|
|
69
|
+
export class ExampleComponent {
|
|
70
|
+
data: GraphData = {
|
|
71
|
+
nodes: [
|
|
72
|
+
{ id: 'oil', title: 'Oil' },
|
|
73
|
+
{ id: 'gas', title: 'Natural Gas' },
|
|
74
|
+
{ id: 'fossil', title: 'Fossil Fuels' },
|
|
75
|
+
{ id: 'energy', title: 'Energy' }
|
|
76
|
+
],
|
|
77
|
+
edges: [
|
|
78
|
+
{ source: 'oil', target: 'fossil', value: 15 },
|
|
79
|
+
{ source: 'gas', target: 'fossil', value: 20 },
|
|
80
|
+
{ source: 'fossil', target: 'energy', value: 35 }
|
|
81
|
+
]
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
options: Partial<SankeyOptions> = {
|
|
85
|
+
width: 800,
|
|
86
|
+
height: 600,
|
|
87
|
+
nodeWidth: 20
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
onNodeClick(node: any) {
|
|
91
|
+
console.log('Node clicked:', node);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## License Setup
|
|
97
|
+
|
|
98
|
+
If you have a commercial license, set it once at app initialization:
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
// app.config.ts
|
|
102
|
+
import { setApexSankeyLicense } from 'ngx-apexsankey';
|
|
103
|
+
|
|
104
|
+
setApexSankeyLicense('your-license-key-here');
|
|
105
|
+
|
|
106
|
+
export const appConfig: ApplicationConfig = {
|
|
107
|
+
providers: []
|
|
108
|
+
};
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Inputs
|
|
112
|
+
|
|
113
|
+
| Input | Type | Required | Description |
|
|
114
|
+
| --------- | ------------------------ | -------- | ------------------------------------- |
|
|
115
|
+
| `data` | `GraphData` | Yes | Sankey diagram data (nodes and edges) |
|
|
116
|
+
| `options` | `Partial<SankeyOptions>` | No | Configuration options for the diagram |
|
|
117
|
+
|
|
118
|
+
## Outputs
|
|
119
|
+
|
|
120
|
+
| Output | Type | Description |
|
|
121
|
+
| ----------- | -------------------------- | ---------------------------- |
|
|
122
|
+
| `nodeClick` | `EventEmitter<SankeyNode>` | Emits when a node is clicked |
|
|
123
|
+
|
|
124
|
+
## Data Format
|
|
125
|
+
|
|
126
|
+
### Nodes
|
|
127
|
+
|
|
128
|
+
```typescript
|
|
129
|
+
interface SankeyNode {
|
|
130
|
+
id: string; // unique identifier
|
|
131
|
+
title: string; // display label
|
|
132
|
+
color?: string; // optional custom color
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Edges
|
|
137
|
+
|
|
138
|
+
```typescript
|
|
139
|
+
interface SankeyEdge {
|
|
140
|
+
source: string; // source node id
|
|
141
|
+
target: string; // target node id
|
|
142
|
+
value: number; // edge weight/size
|
|
143
|
+
type?: string; // optional grouping type
|
|
144
|
+
color?: string; // optional custom color
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## Options
|
|
149
|
+
|
|
150
|
+
| Option | Type | Default | Description |
|
|
151
|
+
| ------------------ | ---------------------- | ---------------------------- | -------------------------------------------- |
|
|
152
|
+
| `width` | `number \| string` | `800` | Width of graph container |
|
|
153
|
+
| `height` | `number \| string` | `800` | Height of graph container |
|
|
154
|
+
| `canvasStyle` | `string` | `""` | CSS styles for canvas root container |
|
|
155
|
+
| `spacing` | `number` | `100` | Spacing from top and left of graph container |
|
|
156
|
+
| `nodeWidth` | `number` | `20` | Width of graph nodes |
|
|
157
|
+
| `nodeBorderWidth` | `number` | `1` | Border width of nodes in pixels |
|
|
158
|
+
| `nodeBorderColor` | `string` | `""` | Border color of nodes |
|
|
159
|
+
| `onNodeClick` | `(node) => void` | `undefined` | Callback function for node click |
|
|
160
|
+
| `edgeOpacity` | `number` | `0.4` | Opacity value for edges (0 to 1) |
|
|
161
|
+
| `edgeGradientFill` | `boolean` | `true` | Enable gradient fill based on node colors |
|
|
162
|
+
| `enableTooltip` | `boolean` | `false` | Enable tooltip on hover |
|
|
163
|
+
| `enableToolbar` | `boolean` | `false` | Enable/disable graph toolbar |
|
|
164
|
+
| `tooltipId` | `string` | `"sankey-tooltip-container"` | Tooltip HTML element id |
|
|
165
|
+
| `tooltipTemplate` | `(content) => string` | default template | HTML template for tooltip |
|
|
166
|
+
| `tooltipBorderColor` | `string` | `"#BCBCBC"` | Border color of tooltip |
|
|
167
|
+
| `tooltipBGColor` | `string` | `"#FFFFFF"` | Background color of tooltip |
|
|
168
|
+
| `fontSize` | `string` | `"14px"` | Font size of node labels |
|
|
169
|
+
| `fontFamily` | `string` | `""` | Font family of node labels |
|
|
170
|
+
| `fontWeight` | `string` | `"400"` | Font weight of node labels |
|
|
171
|
+
| `fontColor` | `string` | `"#000000"` | Font color of node labels |
|
|
172
|
+
|
|
173
|
+
## Custom Node Ordering
|
|
174
|
+
|
|
175
|
+
```typescript
|
|
176
|
+
const data: GraphData = {
|
|
177
|
+
nodes: [...],
|
|
178
|
+
edges: [...],
|
|
179
|
+
options: {
|
|
180
|
+
order: [
|
|
181
|
+
[['a', 'b']], // first layer
|
|
182
|
+
[['c']] // second layer
|
|
183
|
+
]
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## Custom Tooltip
|
|
189
|
+
|
|
190
|
+
```typescript
|
|
191
|
+
const options: Partial<SankeyOptions> = {
|
|
192
|
+
enableTooltip: true,
|
|
193
|
+
tooltipTemplate: ({ source, target, value }) => `
|
|
194
|
+
<div style="padding: 8px;">
|
|
195
|
+
<strong>${source.title}</strong> → <strong>${target.title}</strong>
|
|
196
|
+
<br />Value: ${value}
|
|
197
|
+
</div>
|
|
198
|
+
`
|
|
199
|
+
};
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
## TypeScript
|
|
203
|
+
|
|
204
|
+
All types are exported:
|
|
205
|
+
|
|
206
|
+
```typescript
|
|
207
|
+
import {
|
|
208
|
+
NgxApexsankeyComponent,
|
|
209
|
+
GraphData,
|
|
210
|
+
SankeyNode,
|
|
211
|
+
SankeyEdge,
|
|
212
|
+
SankeyOptions,
|
|
213
|
+
SankeyGraph,
|
|
214
|
+
setApexSankeyLicense
|
|
215
|
+
} from 'ngx-apexsankey';
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
## Browser Support
|
|
219
|
+
|
|
220
|
+
- Angular 17+
|
|
221
|
+
- Modern browsers (Chrome, Firefox, Safari, Edge)
|
|
222
|
+
|
|
223
|
+
## License
|
|
224
|
+
|
|
225
|
+
See [LICENSE](./LICENSE) file for details.
|
|
226
|
+
|
|
227
|
+
## Links
|
|
228
|
+
|
|
229
|
+
- [ApexSankey Documentation](https://apexcharts.com/docs/sankey)
|
|
230
|
+
- [ApexSankey GitHub](https://github.com/apexcharts/apexsankey)
|