@visactor/vchart 1.11.0-alpha.3 → 1.11.1-alpha.0

package/esm/series/sankey/sankey.js

@@ -26,7 +26,7 @@ import { SeriesData } from "../base/series-data";
 
 import { SankeySeriesTooltipHelper } from "./tooltip-helper";
 
-import { Bounds, array, isNil } from "@visactor/vutils";
+import { Bounds, array, isNil, isValid, isNumber } from "@visactor/vutils";
 
 import { registerSankeyAnimation } from "./animation";
 
@@ -51,12 +51,10 @@ import { addDataKey, initKeyMap } from "../../data/transforms/data-key";
 export class SankeySeries extends CartesianSeries {
     constructor() {
         super(...arguments), this.type = SeriesTypeEnum.sankey, this._nodeLayoutZIndex = LayoutZIndex.Node, 
-        this._labelLayoutZIndex = LayoutZIndex.Label, this._viewBox = new Bounds, this._handleAdjacencyClick = params => {
-            const element = params.item;
-            element && element.mark.id().includes("node") ? this._handleNodeAdjacencyClick(element) : element && element.mark.id().includes("link") ? this._handleLinkAdjacencyClick(element) : this._handleClearEmpty();
-        }, this._handleRelatedClick = params => {
-            const element = params.item;
-            element && element.mark.id().includes("node") ? this._handleNodeRelatedClick(element) : element && element.mark.id().includes("link") ? this._handleLinkRelatedClick(element) : this._handleClearEmpty();
+        this._labelLayoutZIndex = LayoutZIndex.Label, this._viewBox = new Bounds, this._handleEmphasisElement = params => {
+            var _a;
+            const emphasisSpec = null !== (_a = this._spec.emphasis) && void 0 !== _a ? _a : {}, element = params.item;
+            "adjacency" === emphasisSpec.effect ? element && element.mark.id().includes("node") ? this._handleNodeAdjacencyClick(element) : element && element.mark.id().includes("link") ? this._handleLinkAdjacencyClick(element) : this._handleClearEmpty() : "related" === emphasisSpec.effect && (element && element.mark.id().includes("node") ? this._handleNodeRelatedClick(element) : element && element.mark.id().includes("link") ? this._handleLinkRelatedClick(element) : this._handleClearEmpty());
         }, this._handleClearEmpty = () => {
             var _a, _b, _c;
             const allNodeElements = null === (_a = this._nodeMark) || void 0 === _a ? void 0 : _a.getProductElements();
@@ -64,20 +62,21 @@ export class SankeySeries extends CartesianSeries {
             const allLinkElements = null === (_b = this._linkMark) || void 0 === _b ? void 0 : _b.getProductElements();
             if (!allLinkElements || !allLinkElements.length) return;
             const allLabelElements = null === (_c = this._labelMark) || void 0 === _c ? void 0 : _c.getProductElements();
-            allLabelElements && allLabelElements.length && (allNodeElements.forEach((el => {
-                el.clearStates();
+            if (!allLabelElements || !allLabelElements.length) return;
+            const states = [ STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE ];
+            allNodeElements.forEach((el => {
+                el.removeState(states);
             })), allLinkElements.forEach((el => {
-                el.clearStates();
+                el.removeState(states);
             })), allLabelElements.forEach((el => {
-                el.clearStates();
-            })));
+                el.removeState(states);
+            }));
         }, this._handleNodeAdjacencyClick = element => {
             const nodeDatum = element.getDatum(), highlightNodes = [ nodeDatum.key ];
             if (this._linkMark) {
                 const allLinkElements = this._linkMark.getProductElements();
                 if (!allLinkElements || !allLinkElements.length) return;
                 allLinkElements.forEach(((linkEl, i) => {
-                    linkEl.clearStates();
                     const linkDatum = linkEl.getDatum(), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source";
                     if (array(linkDatum[father]).includes(nodeDatum.key)) {
                         let ratio;
@@ -87,10 +86,12 @@ export class SankeySeries extends CartesianSeries {
                             const originalDatum = linkDatum.datum;
                             ratio = (originalDatum ? originalDatum.filter((entry => entry.parents.some((par => par.key === nodeDatum.key)))).reduce(((sum, d) => sum + d.value), 0) : 0) / linkDatum.value;
                         }
-                        linkEl.addState("selected", {
+                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                        linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                             ratio: ratio
                         });
-                    } else linkDatum.target === nodeDatum.key ? highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source) : linkEl.useStates([ "blur" ]);
+                    } else linkDatum.target === nodeDatum.key ? highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source) : (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                    linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE));
                 }));
             }
             this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
@@ -101,9 +102,10 @@ export class SankeySeries extends CartesianSeries {
                 const allLinkElements = this._linkMark.getProductElements();
                 if (!allLinkElements || !allLinkElements.length) return;
                 allLinkElements.forEach((linkEl => {
-                    linkEl.clearStates(), linkEl === element ? linkEl.addState("selected", {
+                    linkEl === element ? (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                    linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                         ratio: 1
-                    }) : linkEl.useStates([ "blur" ]);
+                    })) : (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE));
                 }));
             }
             this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
@@ -118,7 +120,6 @@ export class SankeySeries extends CartesianSeries {
                 const highlightNodes = [ nodeDatum.key ], highlightLinks = [];
                 if (allLinkElements.forEach(((linkEl, i) => {
                     var _a, _b, _c, _d;
-                    linkEl.clearStates();
                     const linkDatum = linkEl.getDatum(), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source";
                     if (array(linkDatum[father]).includes(nodeDatum.key)) {
                         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), 
@@ -161,7 +162,9 @@ export class SankeySeries extends CartesianSeries {
                     if (!allLinkElements || !allLinkElements.length) return;
                     allLinkElements.forEach(((linkEl, i) => {
                         var _a;
-                        linkEl.clearStates(), highlightLinks.includes(null !== (_a = linkEl.getDatum().key) && void 0 !== _a ? _a : linkEl.getDatum().index) ? linkEl.useStates([ "selected" ]) : linkEl.useStates([ "blur" ]);
+                        highlightLinks.includes(null !== (_a = linkEl.getDatum().key) && void 0 !== _a ? _a : linkEl.getDatum().index) ? (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                        linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS)) : (linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                        linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE));
                     }));
                 }
                 this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
@@ -179,22 +182,23 @@ export class SankeySeries extends CartesianSeries {
                     }
                 })), res)), []);
                 allLinkElements.forEach(((linkEl, i) => {
-                    linkEl.clearStates();
                     const linkDatum = linkEl.getDatum(), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source", 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));
                     if (selectedDatum && selectedDatum.length) {
                         highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
                         highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target);
                         const ratio = selectedDatum.reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
-                        return linkEl.useStates([ "selected" ]), void linkEl.addState("selected", {
+                        return linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                        void linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                             ratio: ratio
                         });
                     }
                     if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
                     highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
-                    linkEl.useStates([ "selected" ]), void linkEl.addState("selected", {
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                    void linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                         ratio: upSelectedLink.value / linkDatum.value
                     });
-                    linkEl.useStates([ "blur" ]);
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
                 })), this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
                 this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
             }
@@ -205,15 +209,16 @@ export class SankeySeries extends CartesianSeries {
             const allLinkElements = this._linkMark.getProductElements();
             if (!allLinkElements || !allLinkElements.length) return;
             if ("source" === ((null === (_a = element.getDatum()) || void 0 === _a ? void 0 : _a.parents) ? "parents" : "source")) {
+                const states = [ STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE ];
                 if (this._linkMark && allLinkElements.forEach((linkEl => {
-                    linkEl.clearStates();
+                    linkEl.removeState(states);
                 })), this._nodeMark && allNodeElements.forEach((el => {
-                    el.clearStates();
+                    el.removeState(states);
                 })), this._labelMark) {
                     const allLabelElements = this._labelMark.getProductElements();
                     if (!allLabelElements || !allLabelElements.length) return;
                     allLabelElements.forEach((el => {
-                        el.clearStates();
+                        el.removeState(states);
                     }));
                 }
             } else {
@@ -233,10 +238,9 @@ export class SankeySeries extends CartesianSeries {
                         });
                     }
                 })), allLinkElements.forEach((linkEl => {
-                    linkEl.clearStates();
                     const linkDatum = linkEl.getDatum(), originalDatum = linkDatum.datum;
-                    if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) return linkEl.useStates([ "selected" ]), 
-                    void linkEl.addState("selected", {
+                    if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) return linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                    void linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                         ratio: 1
                     });
                     const selectedDatum = originalDatum ? originalDatum.filter((entry => {
@@ -250,17 +254,19 @@ export class SankeySeries extends CartesianSeries {
                             var _a;
                             return par.key === curLinkDatum.source && (null === (_a = entry.parents[index + 1]) || void 0 === _a ? void 0 : _a.key) === curLinkDatum.target;
                         })))).reduce(((sum, d) => sum + d.value), 0), ratio = val / linkDatum.value;
-                        return linkEl.useStates([ "selected" ]), void linkEl.addState("selected", {
+                        return linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                        void linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                             ratio: ratio
                         });
                     }
                     const upSelectedLink = upstreamLinks.find((upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target));
                     if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
                     highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
-                    linkEl.useStates([ "selected" ]), void linkEl.addState("selected", {
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                    void linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                         ratio: upSelectedLink.value / linkDatum.value
                     });
-                    linkEl.useStates([ "blur" ]);
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
                 })), this._highLightElements(allNodeElements, highlightNodes), this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
             }
         };
@@ -315,7 +321,12 @@ export class SankeySeries extends CartesianSeries {
                     nodeKey: this._spec.nodeKey,
                     linkSortBy: this._spec.linkSortBy,
                     nodeSortBy: this._spec.nodeSortBy,
-                    setNodeLayer: this._spec.setNodeLayer
+                    setNodeLayer: this._spec.setNodeLayer,
+                    dropIsolatedNode: this._spec.dropIsolatedNode,
+                    nodeHeight: this._spec.nodeHeight,
+                    linkHeight: this._spec.linkHeight,
+                    equalNodeHeight: this._spec.equalNodeHeight,
+                    linkOverlap: this._spec.linkOverlap
                 },
                 level: TransformLevel.sankeyLayout
             });
@@ -386,6 +397,24 @@ export class SankeySeries extends CartesianSeries {
             labelMark && (this._labelMark = labelMark);
         }
     }
+    _buildMarkAttributeContext() {
+        super._buildMarkAttributeContext(), this._markAttributeContext.valueToNode = this.valueToNode.bind(this), 
+        this._markAttributeContext.valueToLink = this.valueToLink.bind(this);
+    }
+    valueToNode(value) {
+        const nodes = this._nodesSeriesData.getLatestData(), specifyValue = array(value)[0];
+        return nodes && nodes.find((node => node.key === specifyValue));
+    }
+    valueToLink(value) {
+        const links = this._linksSeriesData.getLatestData(), specifyValue = array(value);
+        return links && links.find((link => link && link.source === specifyValue[0] && link.target === specifyValue[1]));
+    }
+    valueToPositionX(value) {
+        return this.valueToNode(value).x0;
+    }
+    valueToPositionY(value) {
+        return this.valueToNode(value).y0;
+    }
     initMarkStyle() {
         this._initNodeMarkStyle(), this._initLinkMarkStyle(), this._initLabelMarkStyle();
     }
@@ -412,11 +441,11 @@ export class SankeySeries extends CartesianSeries {
             y1: datum => datum.y1,
             thickness: datum => datum.thickness,
             fill: datum => {
-                var _a, _b, _c, _d, _e, _f;
+                var _a, _b, _c;
                 const fill = null === (_b = null === (_a = this._spec.link) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fill;
                 if (fill) return fill;
-                const sourceName = this._spec.nodeKey || (null === (_e = null === (_d = null === (_c = this._rawData.latestData[0]) || void 0 === _c ? void 0 : _c.nodes) || void 0 === _d ? void 0 : _d[0]) || void 0 === _e ? void 0 : _e.children) ? datum.source : this.getNodeList()[datum.source];
-                return null === (_f = this._colorScale) || void 0 === _f ? void 0 : _f.scale(sourceName);
+                const sourceName = isNumber(datum.source) ? this.getNodeList()[datum.source] : datum.source;
+                return null === (_c = this._colorScale) || void 0 === _c ? void 0 : _c.scale(sourceName);
             },
             direction: null !== (_a = this._spec.direction) && void 0 !== _a ? _a : "horizontal"
         }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
@@ -559,15 +588,12 @@ export class SankeySeries extends CartesianSeries {
         super.initEvent(), null === (_a = this._nodesSeriesData.getDataView()) || void 0 === _a || _a.target.addListener("change", this.nodesSeriesDataUpdate.bind(this)), 
         null === (_b = this._linksSeriesData.getDataView()) || void 0 === _b || _b.target.addListener("change", this.linksSeriesDataUpdate.bind(this));
         const emphasisSpec = null !== (_c = this._spec.emphasis) && void 0 !== _c ? _c : {};
-        !0 !== this._option.disableTriggerEvent && (emphasisSpec.enable && "adjacency" === emphasisSpec.effect && ("hover" === emphasisSpec.trigger ? this.event.on("pointerover", {
-            level: Event_Bubble_Level.chart
-        }, this._handleAdjacencyClick) : this.event.on("pointerdown", {
-            level: Event_Bubble_Level.chart
-        }, this._handleAdjacencyClick)), emphasisSpec.enable && "related" === emphasisSpec.effect && ("hover" === emphasisSpec.trigger ? this.event.on("pointerover", {
-            level: Event_Bubble_Level.chart
-        }, this._handleRelatedClick) : this.event.on("pointerdown", {
-            level: Event_Bubble_Level.chart
-        }, this._handleRelatedClick)));
+        if (!0 !== this._option.disableTriggerEvent && emphasisSpec.enable && ("adjacency" === emphasisSpec.effect || "related" === emphasisSpec.effect)) {
+            const event = "hover" === emphasisSpec.trigger ? "pointerover" : "pointerdown";
+            this.event.on(event, {
+                level: Event_Bubble_Level.chart
+            }, this._handleEmphasisElement);
+        }
     }
     nodesSeriesDataUpdate() {
         this._nodesSeriesData.updateData(), this._setNodeOrdinalColorScale();
@@ -577,7 +603,8 @@ export class SankeySeries extends CartesianSeries {
     }
     _highLightElements(vGrammarElements, highlightNodes) {
         vGrammarElements && vGrammarElements.length && vGrammarElements.forEach((el => {
-            el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
+            el.removeState([ STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS ]), 
+            highlightNodes.includes(el.getDatum().key) || el.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
         }));
     }
     initTooltip() {
@@ -598,11 +625,13 @@ export class SankeySeries extends CartesianSeries {
         this._colorScale = ordinalScale;
     }
     getNodeList() {
-        var _a, _b, _c;
-        return (null === (_a = this._rawData.latestData[0]) || void 0 === _a ? void 0 : _a.nodes) ? (null === (_b = this._rawData.latestData[0].nodes[0]) || void 0 === _b ? void 0 : _b.children) ? Array.from(this.extractNamesFromTree(this._rawData.latestData[0].nodes, this._spec.categoryField)) : this._rawData.latestData[0].nodes.map(((datum, index) => datum[this._spec.categoryField])) : null === (_c = this._rawData.latestData[0]) || void 0 === _c ? void 0 : _c.values.map(((datum, index) => datum[this._spec.categoryField]));
+        var _a;
+        const data = this._rawData.latestData[0];
+        return (null == data ? void 0 : data.nodes) ? (null === (_a = data.nodes[0]) || void 0 === _a ? void 0 : _a.children) ? Array.from(this.extractNamesFromTree(data.nodes, this._spec.categoryField)) : data.nodes.map(((datum, index) => datum[this._spec.categoryField])) : (null == data ? void 0 : data.links) ? Array.from(this.extractNamesFromLink(data.links)) : null == data ? void 0 : data.values.map(((datum, index) => datum[this._spec.categoryField]));
     }
     _getNodeNameFromData(datum) {
-        return (null == datum ? void 0 : datum.datum) ? null == datum ? void 0 : datum.datum[this._spec.categoryField] : datum[this._spec.categoryField];
+        var _a;
+        return (null == datum ? void 0 : datum.datum) ? datum.datum[this._spec.categoryField] : null !== (_a = datum.key) && void 0 !== _a ? _a : datum[this._spec.categoryField];
     }
     extractNamesFromTree(tree, categoryName) {
         const uniqueNames = new Set;
@@ -612,6 +641,12 @@ export class SankeySeries extends CartesianSeries {
             }
         })), uniqueNames;
     }
+    extractNamesFromLink(links) {
+        const uniqueNames = new Set, {sourceField: sourceField, targetField: targetField} = this._spec;
+        return links.forEach((link => {
+            isValid(link[sourceField]) && uniqueNames.add(link[sourceField]), isValid(link[targetField]) && uniqueNames.add(link[targetField]);
+        })), uniqueNames;
+    }
     getDimensionField() {
         return [ this._spec.categoryField ];
     }
@@ -641,7 +676,7 @@ export class SankeySeries extends CartesianSeries {
     }
     onLayoutEnd(ctx) {
         super.onLayoutEnd(ctx), this._viewBox.set(0, 0, this._region.getLayoutRect().width, this._region.getLayoutRect().height), 
-        this.getViewData().reRunAllTransform(), this._nodesSeriesData.updateData(), this._linksSeriesData.updateData();
+        this.getViewData().reRunAllTransform();
     }
     getDefaultShapeType() {
         return "square";