chartjs-chart-sankey 0.15.3 → 0.16.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 +25 -134
- package/dist/chartjs-chart-sankey.cjs +1 -1
- package/dist/chartjs-chart-sankey.esm.js +1 -1
- package/dist/chartjs-chart-sankey.min.js +1 -1
- package/dist/controller.d.cts +127 -0
- package/dist/flow.d.cts +78 -0
- package/dist/index.d.cts +4 -0
- package/dist/index.esm.d.cts +3 -0
- package/dist/labels.d.cts +22 -0
- package/dist/types.d.cts +140 -0
- package/package.json +32 -32
package/README.md
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
# chartjs-chart-sankey
|
|
2
2
|
|
|
3
|
-
[Chart.js](https://www.chartjs.org/) **^3.3** module for creating sankey diagrams
|
|
4
|
-
|
|
5
3
|
[](https://www.npmjs.com/package/chartjs-chart-sankey)
|
|
6
4
|
[](https://github.com/kurkle/chartjs-chart-sankey/releases/latest)
|
|
7
5
|

|
|
@@ -10,165 +8,60 @@
|
|
|
10
8
|
[](https://chartjs-chart-sankey.pages.dev)
|
|
11
9
|

|
|
12
10
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
All modern and up-to-date browsers are supported, including, but not limited to:
|
|
16
|
-
|
|
17
|
-
- Chrome
|
|
18
|
-
- Edge
|
|
19
|
-
- Firefox
|
|
20
|
-
- Safari
|
|
21
|
-
|
|
22
|
-
Internet Explorer 11 is not supported.
|
|
23
|
-
|
|
24
|
-
## Typescript
|
|
25
|
-
|
|
26
|
-
Typescript 3.x and higher is supported.
|
|
11
|
+
[Chart.js](https://www.chartjs.org/) **v3.3+, v4+** module that adds a sankey chart type, drawing flows between named nodes as directional bands whose width is proportional to the flow value — useful for visualizing energy transfers, budgets, funnels, and other flow-style data, for anyone already charting with Chart.js.
|
|
27
12
|
|
|
28
|
-
##
|
|
29
|
-
|
|
30
|
-
You can find documentation for chartjs-chart-sankey at [https://chartjs-chart-sankey.pages.dev/](https://chartjs-chart-sankey.pages.dev/).
|
|
31
|
-
|
|
32
|
-
## Integration
|
|
13
|
+
## Example
|
|
33
14
|
|
|
34
|
-
|
|
15
|
+

|
|
35
16
|
|
|
36
|
-
|
|
37
|
-
import {Chart} from 'chart.js';
|
|
38
|
-
import {SankeyController, Flow} from 'chartjs-chart-sankey';
|
|
17
|
+
## Installation
|
|
39
18
|
|
|
40
|
-
|
|
19
|
+
```bash
|
|
20
|
+
npm install chartjs-chart-sankey
|
|
41
21
|
```
|
|
42
22
|
|
|
43
|
-
|
|
44
|
-
and flow element automatically.
|
|
23
|
+
Or via CDN:
|
|
45
24
|
|
|
46
25
|
```html
|
|
47
26
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
48
27
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-sankey"></script>
|
|
49
28
|
```
|
|
50
29
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
```html
|
|
54
|
-
<script src="https://unpkg.com/chart.js"></script>
|
|
55
|
-
<script src="https://unpkg.com/chartjs-chart-sankey"></script>
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
If a CDN does not use the package metadata for its default file, reference the browser bundle directly:
|
|
59
|
-
|
|
60
|
-
```html
|
|
61
|
-
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-sankey/dist/chartjs-chart-sankey.min.js"></script>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
To create a sankey chart, include chartjs-chart-sankey.js after chart.js and then create the chart by setting the `type`
|
|
65
|
-
attribute to `'sankey'`
|
|
30
|
+
## Quickstart
|
|
66
31
|
|
|
67
32
|
```js
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
data: dataObject
|
|
71
|
-
});
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
## Configuration
|
|
75
|
-
|
|
76
|
-
Example:
|
|
77
|
-
|
|
78
|
-
```js
|
|
79
|
-
const colors = {
|
|
80
|
-
a: 'red',
|
|
81
|
-
b: 'green',
|
|
82
|
-
c: 'blue',
|
|
83
|
-
d: 'gray'
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
const getHover = (key) => colors[key];
|
|
87
|
-
const getColor = (key) => colors[key];
|
|
88
|
-
|
|
89
|
-
const chart = new Chart(ctx, {
|
|
90
|
-
type: 'sankey',
|
|
91
|
-
data: {
|
|
92
|
-
datasets: [{
|
|
93
|
-
label: 'My sankey',
|
|
94
|
-
data: [
|
|
95
|
-
{from: 'a', to: 'b', flow: 10},
|
|
96
|
-
{from: 'a', to: 'c', flow: 5},
|
|
97
|
-
{from: 'b', to: 'c', flow: 10},
|
|
98
|
-
{from: 'd', to: 'c', flow: 7}
|
|
99
|
-
],
|
|
100
|
-
colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
|
|
101
|
-
colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
|
|
102
|
-
hoverColorFrom: (c) => getHover(c.dataset.data[c.dataIndex].from),
|
|
103
|
-
hoverColorTo: (c) => getHover(c.dataset.data[c.dataIndex].to),
|
|
104
|
-
colorMode: 'gradient', // or 'from' or 'to'
|
|
105
|
-
/* optionally override default alpha (0.5) applied to colorFrom and colorTo */
|
|
106
|
-
alpha: 1,
|
|
107
|
-
/* optional labels */
|
|
108
|
-
labels: {
|
|
109
|
-
a: 'Label A',
|
|
110
|
-
b: 'Label B',
|
|
111
|
-
c: 'Label C',
|
|
112
|
-
d: 'Label D'
|
|
113
|
-
},
|
|
114
|
-
/* optional priority */
|
|
115
|
-
priority: {
|
|
116
|
-
b: 1,
|
|
117
|
-
d: 0
|
|
118
|
-
},
|
|
119
|
-
/* optional column overrides */
|
|
120
|
-
column: {
|
|
121
|
-
d: 1
|
|
122
|
-
},
|
|
123
|
-
size: 'max', // or 'min' if flow overlap is preferred
|
|
124
|
-
}]
|
|
125
|
-
},
|
|
126
|
-
});
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
### Custom data structure
|
|
33
|
+
import { Chart, LinearScale } from 'chart.js';
|
|
34
|
+
import { Flow, SankeyController } from 'chartjs-chart-sankey';
|
|
130
35
|
|
|
131
|
-
|
|
132
|
-
For example:
|
|
36
|
+
Chart.register(LinearScale, SankeyController, Flow);
|
|
133
37
|
|
|
134
|
-
|
|
135
|
-
const chart = new Chart(ctx, {
|
|
38
|
+
new Chart(document.getElementById('chart'), {
|
|
136
39
|
type: 'sankey',
|
|
137
40
|
data: {
|
|
138
41
|
datasets: [
|
|
139
42
|
{
|
|
43
|
+
label: 'My sankey',
|
|
140
44
|
data: [
|
|
141
|
-
{
|
|
142
|
-
{
|
|
143
|
-
{
|
|
45
|
+
{from: 'a', to: 'b', flow: 10},
|
|
46
|
+
{from: 'a', to: 'c', flow: 5},
|
|
47
|
+
{from: 'b', to: 'd', flow: 6},
|
|
48
|
+
{from: 'c', to: 'd', flow: 4},
|
|
144
49
|
],
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
}
|
|
148
|
-
]
|
|
50
|
+
},
|
|
51
|
+
],
|
|
149
52
|
},
|
|
150
|
-
options: {
|
|
151
|
-
parsing: {
|
|
152
|
-
from: 'source',
|
|
153
|
-
to: 'destination',
|
|
154
|
-
flow: 'value'
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
53
|
});
|
|
158
54
|
```
|
|
159
55
|
|
|
160
|
-
|
|
56
|
+
See more integration options (script tag, other module loaders) in the [documentation](https://chartjs-chart-sankey.pages.dev/integration/).
|
|
161
57
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
## Online examples
|
|
58
|
+
## Documentation
|
|
165
59
|
|
|
166
|
-
[
|
|
167
|
-
[Vue.js 2](https://codesandbox.io/s/reverent-boyd-od2fr?file=/src/App.vue)
|
|
60
|
+
You can find documentation for chartjs-chart-sankey at [https://chartjs-chart-sankey.pages.dev/](https://chartjs-chart-sankey.pages.dev/). The full dataset and options reference lives there, not in this README — this file stays a quickstart.
|
|
168
61
|
|
|
169
62
|
## Development
|
|
170
63
|
|
|
171
|
-
You first need to install node dependencies
|
|
64
|
+
You first need to install node dependencies (requires [Node.js](https://nodejs.org/)):
|
|
172
65
|
|
|
173
66
|
```bash
|
|
174
67
|
> npm install
|
|
@@ -177,12 +70,10 @@ You first need to install node dependencies (requires [Node.js](https://nodejs.
|
|
|
177
70
|
The following commands will then be available from the repository root:
|
|
178
71
|
|
|
179
72
|
```bash
|
|
180
|
-
> npm run build
|
|
73
|
+
> npm run build // build dist files
|
|
181
74
|
> npm run autobuild // build and watch for changes
|
|
182
75
|
> npm test // run all tests
|
|
183
|
-
> npm
|
|
184
|
-
> npm lint // perform code linting
|
|
185
|
-
> npm package // create an archive with dist files and samples
|
|
76
|
+
> npm run lint // perform code linting
|
|
186
77
|
```
|
|
187
78
|
|
|
188
79
|
## License
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import type { ChartMeta } from 'chart.js' with { 'resolution-mode': 'import' };
|
|
2
|
+
import type Flow from './flow.cjs';
|
|
3
|
+
import type { AnyObject, SankeyControllerDatasetOptions, SankeyParsedData } from './types.cjs';
|
|
4
|
+
import type { DatasetController } from 'chart.js' with { 'resolution-mode': 'import' };
|
|
5
|
+
export default class SankeyController extends DatasetController {
|
|
6
|
+
static readonly id = "sankey";
|
|
7
|
+
static readonly descriptors: {
|
|
8
|
+
_indexable: boolean;
|
|
9
|
+
_scriptable: boolean;
|
|
10
|
+
nodeLabels: {
|
|
11
|
+
_indexable: boolean;
|
|
12
|
+
_scriptable: boolean;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
static readonly defaults: {
|
|
16
|
+
animations: {
|
|
17
|
+
colors: {
|
|
18
|
+
properties: string[];
|
|
19
|
+
type: string;
|
|
20
|
+
};
|
|
21
|
+
numbers: {
|
|
22
|
+
properties: string[];
|
|
23
|
+
type: string;
|
|
24
|
+
};
|
|
25
|
+
progress: {
|
|
26
|
+
delay: (ctx: any) => number | undefined;
|
|
27
|
+
duration: (ctx: any) => number | undefined;
|
|
28
|
+
easing: string;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
borderColor: string;
|
|
32
|
+
borderWidth: number;
|
|
33
|
+
color: string;
|
|
34
|
+
dataElementType: string;
|
|
35
|
+
modeX: string;
|
|
36
|
+
nodePadding: number;
|
|
37
|
+
nodeWidth: number;
|
|
38
|
+
orientation: string;
|
|
39
|
+
transitions: {
|
|
40
|
+
hide: {
|
|
41
|
+
animations: {
|
|
42
|
+
colors: {
|
|
43
|
+
properties: string[];
|
|
44
|
+
to: string;
|
|
45
|
+
type: string;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
show: {
|
|
50
|
+
animations: {
|
|
51
|
+
colors: {
|
|
52
|
+
from: string;
|
|
53
|
+
properties: string[];
|
|
54
|
+
type: string;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
static readonly overrides: {
|
|
61
|
+
datasets: {
|
|
62
|
+
clip: boolean;
|
|
63
|
+
parsing: {
|
|
64
|
+
flow: string;
|
|
65
|
+
from: string;
|
|
66
|
+
to: string;
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
interaction: {
|
|
70
|
+
intersect: boolean;
|
|
71
|
+
mode: string;
|
|
72
|
+
};
|
|
73
|
+
layout: {
|
|
74
|
+
padding: {
|
|
75
|
+
bottom: number;
|
|
76
|
+
left: number;
|
|
77
|
+
right: number;
|
|
78
|
+
top: number;
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
plugins: {
|
|
82
|
+
legend: {
|
|
83
|
+
display: boolean;
|
|
84
|
+
};
|
|
85
|
+
tooltip: {
|
|
86
|
+
callbacks: {
|
|
87
|
+
label(context: any): string;
|
|
88
|
+
title(): string;
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
scales: {
|
|
93
|
+
x: {
|
|
94
|
+
bounds: string;
|
|
95
|
+
display: boolean;
|
|
96
|
+
min: number;
|
|
97
|
+
offset: boolean;
|
|
98
|
+
type: string;
|
|
99
|
+
};
|
|
100
|
+
y: {
|
|
101
|
+
bounds: string;
|
|
102
|
+
display: boolean;
|
|
103
|
+
min: number;
|
|
104
|
+
offset: boolean;
|
|
105
|
+
reverse: boolean;
|
|
106
|
+
type: string;
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
};
|
|
110
|
+
options: SankeyControllerDatasetOptions;
|
|
111
|
+
private _nodes;
|
|
112
|
+
private _maxX;
|
|
113
|
+
private _maxY;
|
|
114
|
+
parseObjectData(meta: ChartMeta<'sankey', Flow>, data: AnyObject[], start: number, count: number): SankeyParsedData[];
|
|
115
|
+
getMinMax(scale: any): {
|
|
116
|
+
max: number;
|
|
117
|
+
min: number;
|
|
118
|
+
};
|
|
119
|
+
update(mode: any): void;
|
|
120
|
+
updateElements(elems: Flow[], start: number, count: number, mode: 'default' | 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'active'): void;
|
|
121
|
+
private _drawLabels;
|
|
122
|
+
private _drawNodes;
|
|
123
|
+
/**
|
|
124
|
+
* That's where the drawing process happens
|
|
125
|
+
*/
|
|
126
|
+
draw(): void;
|
|
127
|
+
}
|
package/dist/flow.d.cts
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import type { Color } from 'chart.js' with { 'resolution-mode': 'import' };
|
|
2
|
+
import type { FlowConfig, FlowOptions, FlowProps, SankeyNode } from './types.cjs';
|
|
3
|
+
import type { Element } from 'chart.js' with { 'resolution-mode': 'import' };
|
|
4
|
+
export default class Flow extends Element<FlowProps, FlowOptions> {
|
|
5
|
+
static readonly id = "flow";
|
|
6
|
+
static readonly defaults: {
|
|
7
|
+
alpha: number;
|
|
8
|
+
colorFrom: string;
|
|
9
|
+
colorMode: string;
|
|
10
|
+
colorTo: string;
|
|
11
|
+
flowColor: null;
|
|
12
|
+
flowLabels: {
|
|
13
|
+
borderRadius: number;
|
|
14
|
+
color: string;
|
|
15
|
+
display: boolean;
|
|
16
|
+
padding: number;
|
|
17
|
+
position: string;
|
|
18
|
+
};
|
|
19
|
+
hoverColorFrom: (_ctx: unknown, options: FlowOptions) => Color;
|
|
20
|
+
hoverColorTo: (_ctx: unknown, options: FlowOptions) => Color;
|
|
21
|
+
orientation: string;
|
|
22
|
+
};
|
|
23
|
+
static readonly descriptors: {
|
|
24
|
+
_scriptable: boolean;
|
|
25
|
+
flowLabels: {
|
|
26
|
+
_scriptable: boolean;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
flow: number;
|
|
30
|
+
x2: number;
|
|
31
|
+
y2: number;
|
|
32
|
+
width: number;
|
|
33
|
+
height: number;
|
|
34
|
+
progress: number;
|
|
35
|
+
from?: SankeyNode;
|
|
36
|
+
to?: SankeyNode;
|
|
37
|
+
constructor(cfg: FlowConfig);
|
|
38
|
+
/**
|
|
39
|
+
* @param {CanvasRenderingContext2D} ctx
|
|
40
|
+
*/
|
|
41
|
+
draw(ctx: CanvasRenderingContext2D): void;
|
|
42
|
+
/**
|
|
43
|
+
* @param {number} mouseX
|
|
44
|
+
* @param {number} mouseY
|
|
45
|
+
* @param {boolean} useFinalPosition
|
|
46
|
+
* @return {boolean}
|
|
47
|
+
*/
|
|
48
|
+
inRange(mouseX: number, mouseY: number, useFinalPosition: boolean): boolean;
|
|
49
|
+
/**
|
|
50
|
+
* @param {number} mouseX
|
|
51
|
+
* @param {boolean} useFinalPosition
|
|
52
|
+
* @return {boolean}
|
|
53
|
+
*/
|
|
54
|
+
inXRange(mouseX: number, useFinalPosition: boolean): boolean;
|
|
55
|
+
/**
|
|
56
|
+
* @param {number} mouseY
|
|
57
|
+
* @param {boolean} useFinalPosition
|
|
58
|
+
* @return {boolean}
|
|
59
|
+
*/
|
|
60
|
+
inYRange(mouseY: number, useFinalPosition: boolean): boolean;
|
|
61
|
+
/**
|
|
62
|
+
* @param {boolean} useFinalPosition
|
|
63
|
+
* @return {{x: number, y:number}}
|
|
64
|
+
*/
|
|
65
|
+
getCenterPoint(useFinalPosition: boolean): {
|
|
66
|
+
x: number;
|
|
67
|
+
y: number;
|
|
68
|
+
};
|
|
69
|
+
tooltipPosition(useFinalPosition?: boolean): {
|
|
70
|
+
x: number;
|
|
71
|
+
y: number;
|
|
72
|
+
};
|
|
73
|
+
/**
|
|
74
|
+
* @param {"x" | "y"} axis
|
|
75
|
+
* @return {number}
|
|
76
|
+
*/
|
|
77
|
+
getRange(axis: 'x' | 'y'): number;
|
|
78
|
+
}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import Sankey from './controller.cjs';
|
|
2
|
+
import Flow from './flow.cjs';
|
|
3
|
+
export type { FlowConfig, FlowOptions, FlowProps, SankeyControllerDatasetFlowLabelsOptions, SankeyControllerDatasetNodeLabelsOptions, SankeyControllerDatasetOptions, SankeyDataPoint, SankeyLabelPosition, SankeyNodeLabelOption, SankeyNodeLabelPosition, SankeyOrientation, SankeyParsedData, SankeyParsingOptions, SankeyScriptableContext, } from './types.cjs';
|
|
4
|
+
export { Flow, Sankey as SankeyController };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export type { FlowConfig, FlowOptions, FlowProps, SankeyControllerDatasetFlowLabelsOptions, SankeyControllerDatasetNodeLabelsOptions, SankeyControllerDatasetOptions, SankeyDataPoint, SankeyLabelPosition, SankeyNodeLabelOption, SankeyNodeLabelPosition, SankeyOrientation, SankeyParsedData, SankeyParsingOptions, SankeyScriptableContext, } from './types.cjs';
|
|
2
|
+
export { default as SankeyController } from './controller.cjs';
|
|
3
|
+
export { default as Flow } from './flow.cjs';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { CanvasFontSpec, Color } from 'chart.js' with { 'resolution-mode': 'import' };
|
|
2
|
+
import type { SankeyLabelPosition, SankeyNode, SankeyNodeLabelOption } from './types.cjs';
|
|
3
|
+
type ResolvableNodeLabelValue = boolean | Color | SankeyLabelPosition;
|
|
4
|
+
type ResolvedLabelPosition = Exclude<SankeyLabelPosition, 'auto'>;
|
|
5
|
+
export interface DrawLabelOptions {
|
|
6
|
+
autoPosition: ResolvedLabelPosition;
|
|
7
|
+
backgroundColor?: Color;
|
|
8
|
+
borderRadius: number;
|
|
9
|
+
borderWidth: number;
|
|
10
|
+
color: Color;
|
|
11
|
+
font: CanvasFontSpec;
|
|
12
|
+
height: number;
|
|
13
|
+
lineOffset: number;
|
|
14
|
+
padding: number;
|
|
15
|
+
position: SankeyLabelPosition;
|
|
16
|
+
width: number;
|
|
17
|
+
x: number;
|
|
18
|
+
y: number;
|
|
19
|
+
}
|
|
20
|
+
export declare function resolveNodeLabelOption<T extends ResolvableNodeLabelValue>(option: SankeyNodeLabelOption<T> | undefined, node: SankeyNode): T | undefined;
|
|
21
|
+
export declare function drawLabel(ctx: CanvasRenderingContext2D, label: string, options: DrawLabelOptions): void;
|
|
22
|
+
export {};
|
package/dist/types.d.cts
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import type {} from './types.js' with { 'resolution-mode': 'import' };
|
|
2
|
+
import type { CartesianScaleTypeRegistry, Color, ControllerDatasetOptions, CoreChartOptions, FontSpec, Scriptable, ScriptableAndArray, ScriptableContext } from 'chart.js' with { 'resolution-mode': 'import' };
|
|
3
|
+
export type AnyObject = Record<string, unknown>;
|
|
4
|
+
export interface SankeyDataPoint {
|
|
5
|
+
from: string;
|
|
6
|
+
to: string;
|
|
7
|
+
flow: number;
|
|
8
|
+
}
|
|
9
|
+
export type SankeyScriptableContext = ScriptableContext<'sankey'> & {
|
|
10
|
+
raw: SankeyDataPoint;
|
|
11
|
+
};
|
|
12
|
+
export type SankeyLabelPosition = 'auto' | 'bottom' | 'center' | 'left' | 'right' | 'top';
|
|
13
|
+
export type SankeyNodeLabelPosition = SankeyLabelPosition;
|
|
14
|
+
export type SankeyOrientation = 'horizontal' | 'vertical';
|
|
15
|
+
export type SankeyNodeLabelOption<T> = T | Record<string, T> | ((node: SankeyNode) => T | undefined);
|
|
16
|
+
export interface SankeyControllerDatasetNodeLabelsOptions {
|
|
17
|
+
backgroundColor?: SankeyNodeLabelOption<Color>;
|
|
18
|
+
borderRadius?: number;
|
|
19
|
+
color?: SankeyNodeLabelOption<Color>;
|
|
20
|
+
display?: SankeyNodeLabelOption<boolean>;
|
|
21
|
+
font?: Partial<FontSpec>;
|
|
22
|
+
padding?: number;
|
|
23
|
+
position?: SankeyNodeLabelOption<SankeyLabelPosition>;
|
|
24
|
+
}
|
|
25
|
+
export interface SankeyControllerDatasetFlowLabelsOptions {
|
|
26
|
+
backgroundColor?: Scriptable<Color, SankeyScriptableContext>;
|
|
27
|
+
borderRadius?: Scriptable<number, SankeyScriptableContext>;
|
|
28
|
+
color?: Scriptable<Color, SankeyScriptableContext>;
|
|
29
|
+
display?: Scriptable<boolean, SankeyScriptableContext>;
|
|
30
|
+
font?: Scriptable<Partial<FontSpec>, SankeyScriptableContext>;
|
|
31
|
+
padding?: Scriptable<number, SankeyScriptableContext>;
|
|
32
|
+
position?: Scriptable<SankeyLabelPosition, SankeyScriptableContext>;
|
|
33
|
+
}
|
|
34
|
+
export interface SankeyParsingOptions {
|
|
35
|
+
from: string;
|
|
36
|
+
to: string;
|
|
37
|
+
flow: string;
|
|
38
|
+
}
|
|
39
|
+
export interface SankeyControllerDatasetOptions extends Omit<ControllerDatasetOptions, 'parsing'> {
|
|
40
|
+
alpha?: number;
|
|
41
|
+
backgroundColor?: never;
|
|
42
|
+
borderColor?: Color;
|
|
43
|
+
borderWidth?: number;
|
|
44
|
+
color?: Color;
|
|
45
|
+
colorFrom?: ScriptableAndArray<Color, SankeyScriptableContext>;
|
|
46
|
+
colorMode?: 'gradient' | 'from' | 'to';
|
|
47
|
+
colorTo?: ScriptableAndArray<Color, SankeyScriptableContext>;
|
|
48
|
+
column?: Record<string, number>;
|
|
49
|
+
font?: Partial<FontSpec>;
|
|
50
|
+
flowLabels?: SankeyControllerDatasetFlowLabelsOptions;
|
|
51
|
+
hoverColorFrom?: ScriptableAndArray<Color, SankeyScriptableContext>;
|
|
52
|
+
hoverColorTo?: ScriptableAndArray<Color, SankeyScriptableContext>;
|
|
53
|
+
hoverFlowColor?: ScriptableAndArray<Color, SankeyScriptableContext>;
|
|
54
|
+
labels?: Record<string, string>;
|
|
55
|
+
flowColor?: ScriptableAndArray<Color, SankeyScriptableContext>;
|
|
56
|
+
modeX?: 'edge' | 'even';
|
|
57
|
+
nodeLabels?: SankeyControllerDatasetNodeLabelsOptions;
|
|
58
|
+
nodePadding?: number;
|
|
59
|
+
nodeWidth?: number;
|
|
60
|
+
orientation?: SankeyOrientation;
|
|
61
|
+
padding?: number;
|
|
62
|
+
parsing: SankeyParsingOptions;
|
|
63
|
+
priority?: Record<string, number>;
|
|
64
|
+
size?: 'min' | 'max';
|
|
65
|
+
}
|
|
66
|
+
export interface FromToElement {
|
|
67
|
+
addY: number;
|
|
68
|
+
flow: number;
|
|
69
|
+
key: string;
|
|
70
|
+
node: SankeyNode;
|
|
71
|
+
index: number;
|
|
72
|
+
}
|
|
73
|
+
export interface SankeyNode {
|
|
74
|
+
key: string;
|
|
75
|
+
in: number;
|
|
76
|
+
out: number;
|
|
77
|
+
size: number;
|
|
78
|
+
from: FromToElement[];
|
|
79
|
+
to: FromToElement[];
|
|
80
|
+
column?: boolean;
|
|
81
|
+
priority?: number;
|
|
82
|
+
y?: number;
|
|
83
|
+
x?: number;
|
|
84
|
+
color?: Color;
|
|
85
|
+
_visited?: number;
|
|
86
|
+
}
|
|
87
|
+
export interface SankeyParsedData {
|
|
88
|
+
x: number;
|
|
89
|
+
y: number;
|
|
90
|
+
_custom: {
|
|
91
|
+
from: SankeyNode;
|
|
92
|
+
to: SankeyNode;
|
|
93
|
+
x: number;
|
|
94
|
+
y: number;
|
|
95
|
+
height: number;
|
|
96
|
+
flow: number;
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
export interface FlowProps {
|
|
101
|
+
flow: number;
|
|
102
|
+
x: number;
|
|
103
|
+
y: number;
|
|
104
|
+
x2: number;
|
|
105
|
+
y2: number;
|
|
106
|
+
height: number;
|
|
107
|
+
width: number;
|
|
108
|
+
}
|
|
109
|
+
export interface FlowOptions {
|
|
110
|
+
alpha: number;
|
|
111
|
+
colorMode: 'gradient' | 'from' | 'to';
|
|
112
|
+
colorFrom: Color;
|
|
113
|
+
colorTo: Color;
|
|
114
|
+
hoverColorFrom: Color;
|
|
115
|
+
hoverColorTo: Color;
|
|
116
|
+
flowColor: Color | null;
|
|
117
|
+
orientation: SankeyOrientation;
|
|
118
|
+
flowLabels: {
|
|
119
|
+
backgroundColor?: Color;
|
|
120
|
+
borderRadius: number;
|
|
121
|
+
color: Color;
|
|
122
|
+
display: boolean;
|
|
123
|
+
font?: Partial<FontSpec>;
|
|
124
|
+
padding: number;
|
|
125
|
+
position: SankeyLabelPosition;
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
export interface FlowConfig {
|
|
129
|
+
flow?: number;
|
|
130
|
+
x: number;
|
|
131
|
+
y: number;
|
|
132
|
+
x2: number;
|
|
133
|
+
y2: number;
|
|
134
|
+
height: number;
|
|
135
|
+
width?: number;
|
|
136
|
+
progress?: number;
|
|
137
|
+
from?: SankeyNode;
|
|
138
|
+
to?: SankeyNode;
|
|
139
|
+
options: FlowOptions;
|
|
140
|
+
}
|
package/package.json
CHANGED
|
@@ -12,43 +12,43 @@
|
|
|
12
12
|
"@emnapi/core": "^1.11.2",
|
|
13
13
|
"@emnapi/runtime": "^1.11.2",
|
|
14
14
|
"@kurkle/astro-chartjs-editor": "^1.0.0",
|
|
15
|
-
"@kurkle/configs": "^1.
|
|
15
|
+
"@kurkle/configs": "^1.5.1",
|
|
16
16
|
"@napi-rs/canvas": "^1.0.0",
|
|
17
17
|
"@rollup/plugin-node-resolve": "^16.0.0",
|
|
18
18
|
"@rollup/plugin-swc": "^0.4.0",
|
|
19
19
|
"@rollup/plugin-terser": "^1.0.0",
|
|
20
|
-
"@swc/cli": "^0.8.1",
|
|
21
20
|
"@swc/core": "^1.7.40",
|
|
22
|
-
"@types/jasmine": "^6.0.0",
|
|
23
21
|
"@types/node": "^26.1.0",
|
|
22
|
+
"@vitest/browser": "^5.0.0",
|
|
23
|
+
"@vitest/browser-playwright": "^5.0.0",
|
|
24
|
+
"@vitest/coverage-istanbul": "^5.0.0",
|
|
25
|
+
"@vitest/coverage-v8": "^5.0.0",
|
|
24
26
|
"astro": "^7.0.6",
|
|
25
|
-
"c8": "^12.0.0",
|
|
26
27
|
"chart.js": "^4.4.5",
|
|
27
|
-
"chartjs-test-utils": "^0.5.0",
|
|
28
|
-
"cross-env": "^10.1.0",
|
|
29
28
|
"globals": "^17.0.0",
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"karma-chrome-launcher": "^3.1.0",
|
|
33
|
-
"karma-coverage": "^2.0.3",
|
|
34
|
-
"karma-firefox-launcher": "^2.1.3",
|
|
35
|
-
"karma-jasmine": "^5.0.1",
|
|
36
|
-
"karma-jasmine-html-reporter": "^2.0.0",
|
|
37
|
-
"karma-rollup-preprocessor": "^7.0.8",
|
|
38
|
-
"karma-spec-reporter": "^0.0.36",
|
|
29
|
+
"pixelmatch": "^7.1.0",
|
|
30
|
+
"playwright": "^1.63.0",
|
|
39
31
|
"png-to-ico": "^3.0.2",
|
|
40
32
|
"rollup": "^4.24.0",
|
|
41
33
|
"rollup-plugin-cleanup": "^3.2.1",
|
|
42
|
-
"rollup-plugin-istanbul": "^5.0.0",
|
|
43
34
|
"semantic-release": "^25.0.3",
|
|
44
35
|
"sharp": "^0.35.4",
|
|
45
|
-
"typescript": "^6.0.3"
|
|
36
|
+
"typescript": "^6.0.3",
|
|
37
|
+
"vitest": "^5.0.0"
|
|
46
38
|
},
|
|
47
39
|
"exports": {
|
|
48
|
-
"
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
40
|
+
".": {
|
|
41
|
+
"import": {
|
|
42
|
+
"types": "./dist/index.esm.d.ts",
|
|
43
|
+
"default": "./dist/chartjs-chart-sankey.esm.js"
|
|
44
|
+
},
|
|
45
|
+
"require": {
|
|
46
|
+
"types": "./dist/index.d.cts",
|
|
47
|
+
"default": "./dist/chartjs-chart-sankey.cjs"
|
|
48
|
+
},
|
|
49
|
+
"script": "./dist/chartjs-chart-sankey.min.js"
|
|
50
|
+
},
|
|
51
|
+
"./package.json": "./package.json"
|
|
52
52
|
},
|
|
53
53
|
"files": [
|
|
54
54
|
"dist/*",
|
|
@@ -74,27 +74,27 @@
|
|
|
74
74
|
},
|
|
75
75
|
"scripts": {
|
|
76
76
|
"autobuild": "rollup -c -w",
|
|
77
|
-
"build": "rollup -c && tsc -p tsconfig.json --emitDeclarationOnly",
|
|
78
|
-
"dev": "
|
|
79
|
-
"dev:ff": "karma start ./karma.conf.cjs --no-single-run --auto-watch --browsers firefox",
|
|
77
|
+
"build": "rollup -c && tsc -p tsconfig.json --emitDeclarationOnly && kurkle-build-cjs-types",
|
|
78
|
+
"dev": "vitest --config vitest.browser.config.ts",
|
|
80
79
|
"docs": "npm run build && astro build",
|
|
81
80
|
"docs:dev": "npm run build && astro dev",
|
|
82
81
|
"docs:version": "node ./docs/scripts/write-docs-version.cjs",
|
|
82
|
+
"fixtures:update": "node scripts/update-fixtures.mjs",
|
|
83
83
|
"format": "biome check --write",
|
|
84
|
-
"icons": "
|
|
84
|
+
"icons": "kurkle-generate-icons",
|
|
85
85
|
"lint": "biome check",
|
|
86
86
|
"predocs": "npm run docs:version",
|
|
87
87
|
"predocs:dev": "npm run docs:version",
|
|
88
88
|
"prepack": "npm run build",
|
|
89
89
|
"prepare": "git config core.hooksPath .githooks || true",
|
|
90
|
-
"
|
|
91
|
-
"test": "
|
|
92
|
-
"test:
|
|
93
|
-
"test:integration:browser-module": "karma start ./karma.integration.cjs --single-run",
|
|
90
|
+
"test": "npm run test:unit && npm run test:fixture && npm run test:integration:browser-module && npm run test:integration:node-commonjs && npm run test:integration:node-module && npm run test:pack",
|
|
91
|
+
"test:fixture": "vitest run --config vitest.browser.config.ts --coverage",
|
|
92
|
+
"test:integration:browser-module": "vitest run --config vitest.integration.config.ts",
|
|
94
93
|
"test:integration:node-commonjs": "node test/integration/node-commonjs/test.cjs",
|
|
95
94
|
"test:integration:node-module": "node test/integration/node-module/test.mjs",
|
|
96
|
-
"test:
|
|
97
|
-
"
|
|
95
|
+
"test:pack": "kurkle-check-package",
|
|
96
|
+
"test:unit": "vitest run --config vitest.config.ts --coverage",
|
|
97
|
+
"typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.test.json && tsc -p tsconfig.json --emitDeclarationOnly && tsc --noEmit -p test/types/ && tsc --noEmit -p tsconfig.tooling.json",
|
|
98
98
|
"typecheck:docs": "astro check"
|
|
99
99
|
},
|
|
100
100
|
"sideEffects": [
|
|
@@ -104,5 +104,5 @@
|
|
|
104
104
|
"type": "module",
|
|
105
105
|
"types": "dist/index.esm.d.ts",
|
|
106
106
|
"unpkg": "dist/chartjs-chart-sankey.min.js",
|
|
107
|
-
"version": "0.
|
|
107
|
+
"version": "0.16.0"
|
|
108
108
|
}
|