@visactor/vchart 2.0.3-alpha.1 → 2.0.3
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/build/es5/index.js +1 -1
- package/build/index.es.js +462 -500
- package/build/index.js +461 -500
- package/build/index.min.js +2 -2
- package/build/tsconfig.tsbuildinfo +1 -1
- package/cjs/chart/index.d.ts +2 -2
- package/cjs/chart/index.js +2 -7
- package/cjs/chart/index.js.map +1 -1
- package/cjs/core/index.d.ts +1 -1
- package/cjs/core/index.js +1 -1
- package/cjs/core/index.js.map +1 -1
- package/cjs/mark/base/base-mark.js +2 -1
- package/cjs/mark/base/base-mark.js.map +1 -1
- package/cjs/series/sankey/sankey.d.ts +10 -10
- package/cjs/series/sankey/sankey.js +194 -199
- package/cjs/series/sankey/sankey.js.map +1 -1
- package/esm/chart/index.d.ts +2 -2
- package/esm/chart/index.js +2 -2
- package/esm/chart/index.js.map +1 -1
- package/esm/core/index.d.ts +1 -1
- package/esm/core/index.js +1 -1
- package/esm/core/index.js.map +1 -1
- package/esm/mark/base/base-mark.js +2 -1
- package/esm/mark/base/base-mark.js.map +1 -1
- package/esm/series/sankey/sankey.d.ts +10 -10
- package/esm/series/sankey/sankey.js +187 -192
- package/esm/series/sankey/sankey.js.map +1 -1
- package/package.json +11 -11
|
@@ -5,7 +5,7 @@ import type { Datum, StringOrNumber } from '../../typings';
|
|
|
5
5
|
import { DataView } from '@visactor/vdataset';
|
|
6
6
|
import type { ISankeySeriesSpec } from './interface';
|
|
7
7
|
import type { ExtendEventParam } from '../../event/interface';
|
|
8
|
-
import type {
|
|
8
|
+
import type { IMark, IMarkGraphic, ITextMark } from '../../mark/interface';
|
|
9
9
|
import { SankeySeriesSpecTransformer } from './sankey-transformer';
|
|
10
10
|
import type { ILabelSpec } from '../../component';
|
|
11
11
|
export declare class SankeySeries<T extends ISankeySeriesSpec = ISankeySeriesSpec> extends CartesianSeries<T> {
|
|
@@ -17,8 +17,8 @@ export declare class SankeySeries<T extends ISankeySeriesSpec = ISankeySeriesSpe
|
|
|
17
17
|
static readonly builtInTheme: {
|
|
18
18
|
sankey: import("./interface").ISankeySeriesTheme;
|
|
19
19
|
};
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
private _nodeMark;
|
|
21
|
+
private _linkMark;
|
|
22
22
|
private _nodeLayoutZIndex;
|
|
23
23
|
private _labelLayoutZIndex;
|
|
24
24
|
protected _nodesSeriesData?: DataView;
|
|
@@ -27,7 +27,7 @@ export declare class SankeySeries<T extends ISankeySeriesSpec = ISankeySeriesSpe
|
|
|
27
27
|
protected _categoryField: string;
|
|
28
28
|
private _colorScale;
|
|
29
29
|
private _nodeList;
|
|
30
|
-
|
|
30
|
+
private _needClear;
|
|
31
31
|
get direction(): "horizontal" | "vertical";
|
|
32
32
|
getCategoryField(): string;
|
|
33
33
|
setCategoryField(f: string): string;
|
|
@@ -55,12 +55,12 @@ export declare class SankeySeries<T extends ISankeySeriesSpec = ISankeySeriesSpe
|
|
|
55
55
|
private nodesSeriesDataUpdate;
|
|
56
56
|
private linksSeriesDataUpdate;
|
|
57
57
|
protected _handleEmphasisElement: (params: ExtendEventParam) => void;
|
|
58
|
-
protected _handleClearEmpty()
|
|
59
|
-
protected _handleNodeAdjacencyClick(graphic: IMarkGraphic)
|
|
60
|
-
protected _handleLinkAdjacencyClick(graphic: IMarkGraphic)
|
|
61
|
-
protected _handleNodeRelatedClick(graphic: IMarkGraphic)
|
|
62
|
-
protected _handleLinkRelatedClick(graphic: IMarkGraphic)
|
|
63
|
-
protected _highLightElements(graphics: IMarkGraphic[], highlightNodes:
|
|
58
|
+
protected _handleClearEmpty: () => void;
|
|
59
|
+
protected _handleNodeAdjacencyClick: (graphic: IMarkGraphic) => void;
|
|
60
|
+
protected _handleLinkAdjacencyClick: (graphic: IMarkGraphic) => void;
|
|
61
|
+
protected _handleNodeRelatedClick: (graphic: IMarkGraphic) => void;
|
|
62
|
+
protected _handleLinkRelatedClick: (graphic: IMarkGraphic) => void;
|
|
63
|
+
protected _highLightElements(graphics: IMarkGraphic[], highlightNodes: string[]): void;
|
|
64
64
|
protected initTooltip(): void;
|
|
65
65
|
_setNodeOrdinalColorScale(): void;
|
|
66
66
|
getNodeList(): any;
|
|
@@ -86,6 +86,193 @@ export class SankeySeries extends CartesianSeries {
|
|
|
86
86
|
var _a;
|
|
87
87
|
const emphasisSpec = null !== (_a = this._spec.emphasis) && void 0 !== _a ? _a : {}, graphic = params.item;
|
|
88
88
|
"adjacency" === emphasisSpec.effect ? graphic && params.mark === this._nodeMark ? this._handleNodeAdjacencyClick(graphic) : graphic && params.mark === this._linkMark ? this._handleLinkAdjacencyClick(graphic) : this._handleClearEmpty() : "related" === emphasisSpec.effect && (graphic && params.mark === this._nodeMark ? this._handleNodeRelatedClick(graphic) : graphic && params.mark === this._linkMark ? this._handleLinkRelatedClick(graphic) : this._handleClearEmpty());
|
|
89
|
+
}, this._handleClearEmpty = () => {
|
|
90
|
+
var _a, _b;
|
|
91
|
+
if (!this._needClear) return;
|
|
92
|
+
const allNodeElements = null === (_a = this._nodeMark) || void 0 === _a ? void 0 : _a.getGraphics();
|
|
93
|
+
if (!allNodeElements || !allNodeElements.length) return;
|
|
94
|
+
const allLinkElements = null === (_b = this._linkMark) || void 0 === _b ? void 0 : _b.getGraphics();
|
|
95
|
+
allLinkElements && allLinkElements.length && (allNodeElements.forEach((el => {
|
|
96
|
+
el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
|
|
97
|
+
})), allLinkElements.forEach((el => {
|
|
98
|
+
el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
|
|
99
|
+
})), this._needClear = !1);
|
|
100
|
+
}, this._handleNodeAdjacencyClick = graphic => {
|
|
101
|
+
const nodeDatum = getDatumOfGraphic(graphic), highlightNodes = [ nodeDatum.key ];
|
|
102
|
+
if (this._linkMark) {
|
|
103
|
+
const allLinkElements = this._linkMark.getGraphics();
|
|
104
|
+
if (!allLinkElements || !allLinkElements.length) return;
|
|
105
|
+
allLinkElements.forEach(((linkEl, i) => {
|
|
106
|
+
const linkDatum = getDatumOfGraphic(linkEl);
|
|
107
|
+
linkDatum.source === nodeDatum.key ? (highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target),
|
|
108
|
+
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : linkDatum.target === nodeDatum.key ? (highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
109
|
+
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS),
|
|
110
|
+
linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
|
|
111
|
+
}));
|
|
112
|
+
}
|
|
113
|
+
this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes),
|
|
114
|
+
this._needClear = !0;
|
|
115
|
+
}, this._handleLinkAdjacencyClick = graphic => {
|
|
116
|
+
const curLinkDatum = getDatumOfGraphic(graphic), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ];
|
|
117
|
+
if (this._linkMark) {
|
|
118
|
+
const allLinkElements = this._linkMark.getGraphics();
|
|
119
|
+
if (!allLinkElements || !allLinkElements.length) return;
|
|
120
|
+
allLinkElements.forEach((linkEl => {
|
|
121
|
+
linkEl === graphic ? (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE),
|
|
122
|
+
addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
123
|
+
ratio: 1
|
|
124
|
+
})) : (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
|
|
125
|
+
}));
|
|
126
|
+
}
|
|
127
|
+
this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes),
|
|
128
|
+
this._needClear = !0;
|
|
129
|
+
}, this._handleNodeRelatedClick = graphic => {
|
|
130
|
+
var _a;
|
|
131
|
+
const nodeDatum = getDatumOfGraphic(graphic), allNodeElements = this._nodeMark.getGraphics();
|
|
132
|
+
if (!allNodeElements || !allNodeElements.length) return;
|
|
133
|
+
const allLinkElements = this._linkMark.getGraphics();
|
|
134
|
+
if (!allLinkElements || !allLinkElements.length) return;
|
|
135
|
+
const father = (null === (_a = getDatumOfGraphic(allLinkElements[0])) || void 0 === _a ? void 0 : _a.parents) ? "parents" : "source";
|
|
136
|
+
if ("source" === father) {
|
|
137
|
+
const highlightNodes = [ nodeDatum.key ], highlightLinks = [];
|
|
138
|
+
if (allLinkElements.forEach(((linkEl, i) => {
|
|
139
|
+
var _a, _b, _c, _d;
|
|
140
|
+
const linkDatum = getDatumOfGraphic(linkEl), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source";
|
|
141
|
+
if (array(linkDatum[father]).includes(nodeDatum.key)) {
|
|
142
|
+
if (highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) || highlightLinks.push(null !== (_b = linkDatum.key) && void 0 !== _b ? _b : linkDatum.index),
|
|
143
|
+
highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
144
|
+
!highlightNodes.includes(linkDatum.target)) {
|
|
145
|
+
highlightNodes.push(linkDatum.target);
|
|
146
|
+
let targetNodeSourceLinks = allNodeElements.find((nodeElement => nodeElement.data[0].key === linkDatum.target)).data[0].sourceLinks;
|
|
147
|
+
for (;(null == targetNodeSourceLinks ? void 0 : targetNodeSourceLinks.length) > 0; ) {
|
|
148
|
+
const newTargetNodeSourceLinks = [];
|
|
149
|
+
return targetNodeSourceLinks.forEach((targetNodeSourceLinkDatum => {
|
|
150
|
+
var _a, _b;
|
|
151
|
+
if (!highlightLinks.includes(null !== (_a = targetNodeSourceLinkDatum.key) && void 0 !== _a ? _a : targetNodeSourceLinkDatum.index) && (highlightLinks.push(null !== (_b = targetNodeSourceLinkDatum.key) && void 0 !== _b ? _b : targetNodeSourceLinkDatum.index),
|
|
152
|
+
!highlightNodes.includes(targetNodeSourceLinkDatum.target))) {
|
|
153
|
+
highlightNodes.push(targetNodeSourceLinkDatum.target);
|
|
154
|
+
const sourceNodeTemp = allNodeElements.find((nodeElement => nodeElement.data[0].key === targetNodeSourceLinkDatum.target));
|
|
155
|
+
newTargetNodeSourceLinks.push(sourceNodeTemp.data[0].targetLinks);
|
|
156
|
+
}
|
|
157
|
+
})), void (targetNodeSourceLinks = newTargetNodeSourceLinks);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
} else if (linkDatum.target === nodeDatum.key && (highlightLinks.includes(null !== (_c = linkDatum.key) && void 0 !== _c ? _c : linkDatum.index) || highlightLinks.push(null !== (_d = linkDatum.key) && void 0 !== _d ? _d : linkDatum.index),
|
|
161
|
+
!highlightNodes.includes(linkDatum.source))) {
|
|
162
|
+
highlightNodes.push(linkDatum.source);
|
|
163
|
+
let sourceNodeTargetLinks = allNodeElements.find((nodeElement => nodeElement.data[0].key === linkDatum.source)).data[0].targetLinks;
|
|
164
|
+
for (;(null == sourceNodeTargetLinks ? void 0 : sourceNodeTargetLinks.length) > 0; ) {
|
|
165
|
+
const newSourceNodeTargetLinks = [];
|
|
166
|
+
return sourceNodeTargetLinks.forEach((sourceNodeTargetLinkDatum => {
|
|
167
|
+
var _a, _b;
|
|
168
|
+
if (!highlightLinks.includes(null !== (_a = sourceNodeTargetLinkDatum.key) && void 0 !== _a ? _a : sourceNodeTargetLinkDatum.index) && (highlightLinks.push(null !== (_b = sourceNodeTargetLinkDatum.key) && void 0 !== _b ? _b : sourceNodeTargetLinkDatum.index),
|
|
169
|
+
!highlightNodes.includes(sourceNodeTargetLinkDatum.source))) {
|
|
170
|
+
highlightNodes.push(sourceNodeTargetLinkDatum.source);
|
|
171
|
+
const sourceNodeTemp = allNodeElements.find((nodeElement => nodeElement.data[0].key === sourceNodeTargetLinkDatum.source));
|
|
172
|
+
newSourceNodeTargetLinks.push(sourceNodeTemp.data[0].targetLinks);
|
|
173
|
+
}
|
|
174
|
+
})), void (sourceNodeTargetLinks = newSourceNodeTargetLinks);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
})), this._linkMark) {
|
|
178
|
+
const allLinkElements = this._linkMark.getGraphics();
|
|
179
|
+
if (!allLinkElements || !allLinkElements.length) return;
|
|
180
|
+
allLinkElements.forEach(((linkEl, i) => {
|
|
181
|
+
var _a;
|
|
182
|
+
const linkDatum = getDatumOfGraphic(linkEl);
|
|
183
|
+
highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) ? (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE),
|
|
184
|
+
linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS),
|
|
185
|
+
linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
|
|
186
|
+
}));
|
|
187
|
+
}
|
|
188
|
+
this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
|
|
189
|
+
} else {
|
|
190
|
+
const highlightNodes = [ nodeDatum.key ], upstreamLinks = nodeDatum.targetLinks.reduce(((res, link) => (array(link.datum).forEach((dividedLink => {
|
|
191
|
+
const parents = dividedLink.parents, len = parents.length;
|
|
192
|
+
for (let i = 0; i < len; i++) {
|
|
193
|
+
const source = parents[i].key, target = parents[i + 1] ? parents[i + 1].key : nodeDatum.key, value = dividedLink.value, existingItem = res.find((item => item.source === source && item.target === target));
|
|
194
|
+
existingItem ? existingItem.value += value : res.push({
|
|
195
|
+
source: source,
|
|
196
|
+
target: target,
|
|
197
|
+
value: value
|
|
198
|
+
});
|
|
199
|
+
}
|
|
200
|
+
})), res)), []);
|
|
201
|
+
allLinkElements.forEach(((linkEl, i) => {
|
|
202
|
+
const linkDatum = getDatumOfGraphic(linkEl), originalDatum = linkDatum.datum, selectedDatum = originalDatum ? originalDatum.filter((entry => entry[father].some((par => par.key === nodeDatum.key)))) : null, upSelectedLink = upstreamLinks.find((upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target));
|
|
203
|
+
if (selectedDatum && selectedDatum.length) {
|
|
204
|
+
highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
205
|
+
highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target);
|
|
206
|
+
const ratio = selectedDatum.reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
|
|
207
|
+
return linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
208
|
+
ratio: ratio
|
|
209
|
+
});
|
|
210
|
+
}
|
|
211
|
+
if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
212
|
+
highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target),
|
|
213
|
+
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
214
|
+
ratio: upSelectedLink.value / linkDatum.value
|
|
215
|
+
});
|
|
216
|
+
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
|
|
217
|
+
})), this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
|
|
218
|
+
}
|
|
219
|
+
this._needClear = !0;
|
|
220
|
+
}, this._handleLinkRelatedClick = graphic => {
|
|
221
|
+
const allNodeElements = this._nodeMark.getGraphics();
|
|
222
|
+
if (!allNodeElements || !allNodeElements.length) return;
|
|
223
|
+
const allLinkElements = this._linkMark.getGraphics();
|
|
224
|
+
if (!allLinkElements || !allLinkElements.length) return;
|
|
225
|
+
if ("source" === (getDatumOfGraphic(graphic) ? "parents" : "source")) this._linkMark && allLinkElements.forEach((linkEl => {
|
|
226
|
+
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
|
|
227
|
+
})), this._nodeMark && allNodeElements.forEach((el => {
|
|
228
|
+
el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
|
|
229
|
+
})); else {
|
|
230
|
+
const curLinkDatum = getDatumOfGraphic(graphic), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ], upstreamLinks = [];
|
|
231
|
+
array(curLinkDatum.datum).forEach((dividedLink => {
|
|
232
|
+
const parents = dividedLink.parents, len = parents.length;
|
|
233
|
+
for (let i = 0; i < len - 1; i++) {
|
|
234
|
+
const source = parents[i].key, target = parents[i + 1].key, value = dividedLink.value, existingItem = upstreamLinks.find((item => item.source === source && item.target === target));
|
|
235
|
+
upstreamLinks.push({
|
|
236
|
+
source: parents[i].key,
|
|
237
|
+
target: parents[i + 1].key,
|
|
238
|
+
value: dividedLink.value
|
|
239
|
+
}), existingItem ? existingItem.value += value : upstreamLinks.push({
|
|
240
|
+
source: source,
|
|
241
|
+
target: target,
|
|
242
|
+
value: value
|
|
243
|
+
});
|
|
244
|
+
}
|
|
245
|
+
})), allLinkElements.forEach((linkEl => {
|
|
246
|
+
const linkDatum = getDatumOfGraphic(linkEl), originalDatum = linkDatum.datum;
|
|
247
|
+
if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) return linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE),
|
|
248
|
+
void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
249
|
+
ratio: 1
|
|
250
|
+
});
|
|
251
|
+
const selectedDatum = originalDatum ? originalDatum.filter((entry => {
|
|
252
|
+
const parentKeysList = entry.parents.map((item => item.key));
|
|
253
|
+
return parentKeysList.includes(curLinkDatum.source) && parentKeysList.includes(curLinkDatum.target);
|
|
254
|
+
})) : null;
|
|
255
|
+
if (selectedDatum && selectedDatum.length) {
|
|
256
|
+
highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
257
|
+
highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target);
|
|
258
|
+
const ratio = selectedDatum.filter((entry => entry.parents.some(((par, index) => {
|
|
259
|
+
var _a;
|
|
260
|
+
return par.key === curLinkDatum.source && (null === (_a = entry.parents[index + 1]) || void 0 === _a ? void 0 : _a.key) === curLinkDatum.target;
|
|
261
|
+
})))).reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
|
|
262
|
+
return linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
263
|
+
ratio: ratio
|
|
264
|
+
});
|
|
265
|
+
}
|
|
266
|
+
const upSelectedLink = upstreamLinks.find((upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target));
|
|
267
|
+
if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
268
|
+
highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target),
|
|
269
|
+
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
270
|
+
ratio: upSelectedLink.value / linkDatum.value
|
|
271
|
+
});
|
|
272
|
+
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
|
|
273
|
+
})), this._highLightElements(allNodeElements, highlightNodes);
|
|
274
|
+
}
|
|
275
|
+
this._needClear = !0;
|
|
89
276
|
};
|
|
90
277
|
}
|
|
91
278
|
get direction() {
|
|
@@ -325,198 +512,6 @@ export class SankeySeries extends CartesianSeries {
|
|
|
325
512
|
linksSeriesDataUpdate() {
|
|
326
513
|
this._linkMark.getData().updateData();
|
|
327
514
|
}
|
|
328
|
-
_handleClearEmpty() {
|
|
329
|
-
var _a, _b;
|
|
330
|
-
if (!this._needClear) return;
|
|
331
|
-
const allNodeElements = null === (_a = this._nodeMark) || void 0 === _a ? void 0 : _a.getGraphics();
|
|
332
|
-
if (!allNodeElements || !allNodeElements.length) return;
|
|
333
|
-
const allLinkElements = null === (_b = this._linkMark) || void 0 === _b ? void 0 : _b.getGraphics();
|
|
334
|
-
allLinkElements && allLinkElements.length && (allNodeElements.forEach((el => {
|
|
335
|
-
el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
|
|
336
|
-
})), allLinkElements.forEach((el => {
|
|
337
|
-
el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
|
|
338
|
-
})), this._needClear = !1);
|
|
339
|
-
}
|
|
340
|
-
_handleNodeAdjacencyClick(graphic) {
|
|
341
|
-
const nodeDatum = getDatumOfGraphic(graphic), highlightNodes = [ nodeDatum.key ];
|
|
342
|
-
if (this._linkMark) {
|
|
343
|
-
const allLinkElements = this._linkMark.getGraphics();
|
|
344
|
-
if (!allLinkElements || !allLinkElements.length) return;
|
|
345
|
-
allLinkElements.forEach(((linkEl, i) => {
|
|
346
|
-
const linkDatum = getDatumOfGraphic(linkEl);
|
|
347
|
-
linkDatum.source === nodeDatum.key ? (highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target),
|
|
348
|
-
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : linkDatum.target === nodeDatum.key ? (highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
349
|
-
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS),
|
|
350
|
-
linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
|
|
351
|
-
}));
|
|
352
|
-
}
|
|
353
|
-
this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes),
|
|
354
|
-
this._needClear = !0;
|
|
355
|
-
}
|
|
356
|
-
_handleLinkAdjacencyClick(graphic) {
|
|
357
|
-
const curLinkDatum = getDatumOfGraphic(graphic), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ];
|
|
358
|
-
if (this._linkMark) {
|
|
359
|
-
const allLinkElements = this._linkMark.getGraphics();
|
|
360
|
-
if (!allLinkElements || !allLinkElements.length) return;
|
|
361
|
-
allLinkElements.forEach((linkEl => {
|
|
362
|
-
linkEl === graphic ? (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE),
|
|
363
|
-
addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
364
|
-
ratio: 1
|
|
365
|
-
})) : (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
|
|
366
|
-
}));
|
|
367
|
-
}
|
|
368
|
-
this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes),
|
|
369
|
-
this._needClear = !0;
|
|
370
|
-
}
|
|
371
|
-
_handleNodeRelatedClick(graphic) {
|
|
372
|
-
var _a;
|
|
373
|
-
const nodeDatum = getDatumOfGraphic(graphic), allNodeElements = this._nodeMark.getGraphics();
|
|
374
|
-
if (!allNodeElements || !allNodeElements.length) return;
|
|
375
|
-
const allLinkElements = this._linkMark.getGraphics();
|
|
376
|
-
if (!allLinkElements || !allLinkElements.length) return;
|
|
377
|
-
const father = (null === (_a = getDatumOfGraphic(allLinkElements[0])) || void 0 === _a ? void 0 : _a.parents) ? "parents" : "source";
|
|
378
|
-
if ("source" === father) {
|
|
379
|
-
const highlightNodes = [ nodeDatum.key ], highlightLinks = [];
|
|
380
|
-
if (allLinkElements.forEach(((linkEl, i) => {
|
|
381
|
-
var _a, _b, _c, _d;
|
|
382
|
-
const linkDatum = getDatumOfGraphic(linkEl), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source";
|
|
383
|
-
if (array(linkDatum[father]).includes(nodeDatum.key)) {
|
|
384
|
-
if (highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) || highlightLinks.push(null !== (_b = linkDatum.key) && void 0 !== _b ? _b : linkDatum.index),
|
|
385
|
-
highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
386
|
-
!highlightNodes.includes(linkDatum.target)) {
|
|
387
|
-
highlightNodes.push(linkDatum.target);
|
|
388
|
-
let targetNodeSourceLinks = allNodeElements.find((nodeElement => nodeElement.data[0].key === linkDatum.target)).data[0].sourceLinks;
|
|
389
|
-
for (;(null == targetNodeSourceLinks ? void 0 : targetNodeSourceLinks.length) > 0; ) {
|
|
390
|
-
const newTargetNodeSourceLinks = [];
|
|
391
|
-
return targetNodeSourceLinks.forEach((targetNodeSourceLinkDatum => {
|
|
392
|
-
var _a, _b;
|
|
393
|
-
if (!highlightLinks.includes(null !== (_a = targetNodeSourceLinkDatum.key) && void 0 !== _a ? _a : targetNodeSourceLinkDatum.index) && (highlightLinks.push(null !== (_b = targetNodeSourceLinkDatum.key) && void 0 !== _b ? _b : targetNodeSourceLinkDatum.index),
|
|
394
|
-
!highlightNodes.includes(targetNodeSourceLinkDatum.target))) {
|
|
395
|
-
highlightNodes.push(targetNodeSourceLinkDatum.target);
|
|
396
|
-
const sourceNodeTemp = allNodeElements.find((nodeElement => nodeElement.data[0].key === targetNodeSourceLinkDatum.target));
|
|
397
|
-
newTargetNodeSourceLinks.push(sourceNodeTemp.data[0].targetLinks);
|
|
398
|
-
}
|
|
399
|
-
})), void (targetNodeSourceLinks = newTargetNodeSourceLinks);
|
|
400
|
-
}
|
|
401
|
-
}
|
|
402
|
-
} else if (linkDatum.target === nodeDatum.key && (highlightLinks.includes(null !== (_c = linkDatum.key) && void 0 !== _c ? _c : linkDatum.index) || highlightLinks.push(null !== (_d = linkDatum.key) && void 0 !== _d ? _d : linkDatum.index),
|
|
403
|
-
!highlightNodes.includes(linkDatum.source))) {
|
|
404
|
-
highlightNodes.push(linkDatum.source);
|
|
405
|
-
let sourceNodeTargetLinks = allNodeElements.find((nodeElement => nodeElement.data[0].key === linkDatum.source)).data[0].targetLinks;
|
|
406
|
-
for (;(null == sourceNodeTargetLinks ? void 0 : sourceNodeTargetLinks.length) > 0; ) {
|
|
407
|
-
const newSourceNodeTargetLinks = [];
|
|
408
|
-
return sourceNodeTargetLinks.forEach((sourceNodeTargetLinkDatum => {
|
|
409
|
-
var _a, _b;
|
|
410
|
-
if (!highlightLinks.includes(null !== (_a = sourceNodeTargetLinkDatum.key) && void 0 !== _a ? _a : sourceNodeTargetLinkDatum.index) && (highlightLinks.push(null !== (_b = sourceNodeTargetLinkDatum.key) && void 0 !== _b ? _b : sourceNodeTargetLinkDatum.index),
|
|
411
|
-
!highlightNodes.includes(sourceNodeTargetLinkDatum.source))) {
|
|
412
|
-
highlightNodes.push(sourceNodeTargetLinkDatum.source);
|
|
413
|
-
const sourceNodeTemp = allNodeElements.find((nodeElement => nodeElement.data[0].key === sourceNodeTargetLinkDatum.source));
|
|
414
|
-
newSourceNodeTargetLinks.push(sourceNodeTemp.data[0].targetLinks);
|
|
415
|
-
}
|
|
416
|
-
})), void (sourceNodeTargetLinks = newSourceNodeTargetLinks);
|
|
417
|
-
}
|
|
418
|
-
}
|
|
419
|
-
})), this._linkMark) {
|
|
420
|
-
const allLinkElements = this._linkMark.getGraphics();
|
|
421
|
-
if (!allLinkElements || !allLinkElements.length) return;
|
|
422
|
-
allLinkElements.forEach(((linkEl, i) => {
|
|
423
|
-
var _a;
|
|
424
|
-
const linkDatum = getDatumOfGraphic(linkEl);
|
|
425
|
-
highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) ? (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE),
|
|
426
|
-
linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS),
|
|
427
|
-
linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
|
|
428
|
-
}));
|
|
429
|
-
}
|
|
430
|
-
this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
|
|
431
|
-
} else {
|
|
432
|
-
const highlightNodes = [ nodeDatum.key ], upstreamLinks = nodeDatum.targetLinks.reduce(((res, link) => (array(link.datum).forEach((dividedLink => {
|
|
433
|
-
const parents = dividedLink.parents, len = parents.length;
|
|
434
|
-
for (let i = 0; i < len; i++) {
|
|
435
|
-
const source = parents[i].key, target = parents[i + 1] ? parents[i + 1].key : nodeDatum.key, value = dividedLink.value, existingItem = res.find((item => item.source === source && item.target === target));
|
|
436
|
-
existingItem ? existingItem.value += value : res.push({
|
|
437
|
-
source: source,
|
|
438
|
-
target: target,
|
|
439
|
-
value: value
|
|
440
|
-
});
|
|
441
|
-
}
|
|
442
|
-
})), res)), []);
|
|
443
|
-
allLinkElements.forEach(((linkEl, i) => {
|
|
444
|
-
const linkDatum = getDatumOfGraphic(linkEl), originalDatum = linkDatum.datum, selectedDatum = originalDatum ? originalDatum.filter((entry => entry[father].some((par => par.key === nodeDatum.key)))) : null, upSelectedLink = upstreamLinks.find((upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target));
|
|
445
|
-
if (selectedDatum && selectedDatum.length) {
|
|
446
|
-
highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
447
|
-
highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target);
|
|
448
|
-
const ratio = selectedDatum.reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
|
|
449
|
-
return linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
450
|
-
ratio: ratio
|
|
451
|
-
});
|
|
452
|
-
}
|
|
453
|
-
if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
454
|
-
highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target),
|
|
455
|
-
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
456
|
-
ratio: upSelectedLink.value / linkDatum.value
|
|
457
|
-
});
|
|
458
|
-
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
|
|
459
|
-
})), this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
|
|
460
|
-
}
|
|
461
|
-
this._needClear = !0;
|
|
462
|
-
}
|
|
463
|
-
_handleLinkRelatedClick(graphic) {
|
|
464
|
-
const allNodeElements = this._nodeMark.getGraphics();
|
|
465
|
-
if (!allNodeElements || !allNodeElements.length) return;
|
|
466
|
-
const allLinkElements = this._linkMark.getGraphics();
|
|
467
|
-
if (!allLinkElements || !allLinkElements.length) return;
|
|
468
|
-
if ("source" === (getDatumOfGraphic(graphic) ? "parents" : "source")) this._linkMark && allLinkElements.forEach((linkEl => {
|
|
469
|
-
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
|
|
470
|
-
})), this._nodeMark && allNodeElements.forEach((el => {
|
|
471
|
-
el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
|
|
472
|
-
})); else {
|
|
473
|
-
const curLinkDatum = getDatumOfGraphic(graphic), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ], upstreamLinks = [];
|
|
474
|
-
array(curLinkDatum.datum).forEach((dividedLink => {
|
|
475
|
-
const parents = dividedLink.parents, len = parents.length;
|
|
476
|
-
for (let i = 0; i < len - 1; i++) {
|
|
477
|
-
const source = parents[i].key, target = parents[i + 1].key, value = dividedLink.value, existingItem = upstreamLinks.find((item => item.source === source && item.target === target));
|
|
478
|
-
upstreamLinks.push({
|
|
479
|
-
source: parents[i].key,
|
|
480
|
-
target: parents[i + 1].key,
|
|
481
|
-
value: dividedLink.value
|
|
482
|
-
}), existingItem ? existingItem.value += value : upstreamLinks.push({
|
|
483
|
-
source: source,
|
|
484
|
-
target: target,
|
|
485
|
-
value: value
|
|
486
|
-
});
|
|
487
|
-
}
|
|
488
|
-
})), allLinkElements.forEach((linkEl => {
|
|
489
|
-
const linkDatum = getDatumOfGraphic(linkEl), originalDatum = linkDatum.datum;
|
|
490
|
-
if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) return linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE),
|
|
491
|
-
void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
492
|
-
ratio: 1
|
|
493
|
-
});
|
|
494
|
-
const selectedDatum = originalDatum ? originalDatum.filter((entry => {
|
|
495
|
-
const parentKeysList = entry.parents.map((item => item.key));
|
|
496
|
-
return parentKeysList.includes(curLinkDatum.source) && parentKeysList.includes(curLinkDatum.target);
|
|
497
|
-
})) : null;
|
|
498
|
-
if (selectedDatum && selectedDatum.length) {
|
|
499
|
-
highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
500
|
-
highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target);
|
|
501
|
-
const ratio = selectedDatum.filter((entry => entry.parents.some(((par, index) => {
|
|
502
|
-
var _a;
|
|
503
|
-
return par.key === curLinkDatum.source && (null === (_a = entry.parents[index + 1]) || void 0 === _a ? void 0 : _a.key) === curLinkDatum.target;
|
|
504
|
-
})))).reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
|
|
505
|
-
return linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
506
|
-
ratio: ratio
|
|
507
|
-
});
|
|
508
|
-
}
|
|
509
|
-
const upSelectedLink = upstreamLinks.find((upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target));
|
|
510
|
-
if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source),
|
|
511
|
-
highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target),
|
|
512
|
-
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
|
|
513
|
-
ratio: upSelectedLink.value / linkDatum.value
|
|
514
|
-
});
|
|
515
|
-
linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
|
|
516
|
-
})), this._highLightElements(allNodeElements, highlightNodes);
|
|
517
|
-
}
|
|
518
|
-
this._needClear = !0;
|
|
519
|
-
}
|
|
520
515
|
_highLightElements(graphics, highlightNodes) {
|
|
521
516
|
graphics && graphics.length && graphics.forEach((g => {
|
|
522
517
|
g.removeState([ STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS ]),
|