@visactor/vchart 1.12.0-alpha.4 → 1.12.0-alpha.5

package/esm/series/sankey/sankey.js

@@ -48,15 +48,10 @@ import { TransformLevel } from "../../data/initialize";
 
 import { addDataKey, initKeyMap } from "../../data/transforms/data-key";
 
-import { SankeySeriesSpecTransformer } from "./sankey-transformer";
-
-import { getFormatFunction } from "../../component/util";
-
 export class SankeySeries extends CartesianSeries {
     constructor() {
-        super(...arguments), this.type = SeriesTypeEnum.sankey, this.transformerConstructor = SankeySeriesSpecTransformer, 
-        this._nodeLayoutZIndex = LayoutZIndex.Node, this._labelLayoutZIndex = LayoutZIndex.Label, 
-        this._viewBox = new Bounds, this._fillByNode = datum => {
+        super(...arguments), this.type = SeriesTypeEnum.sankey, this._nodeLayoutZIndex = LayoutZIndex.Node, 
+        this._labelLayoutZIndex = LayoutZIndex.Label, this._viewBox = new Bounds, this._fillByNode = datum => {
             var _a, _b, _c, _d, _e;
             if (datum && datum.sourceRect && datum.targetRect) return this._fillByLink(datum);
             const fill = null === (_b = null === (_a = this._spec.node) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fill;
@@ -81,16 +76,20 @@ export class SankeySeries extends CartesianSeries {
             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;
+            var _a, _b, _c;
             const allNodeElements = null === (_a = this._nodeMark) || void 0 === _a ? void 0 : _a.getProductElements();
             if (!allNodeElements || !allNodeElements.length) return;
             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();
+            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.removeState(states);
+            })), allLabelElements.forEach((el => {
+                el.removeState(states);
             }));
         }, this._handleNodeAdjacencyClick = element => {
             const nodeDatum = element.getDatum(), highlightNodes = [ nodeDatum.key ];
@@ -115,7 +114,8 @@ export class SankeySeries extends CartesianSeries {
                     linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE));
                 }));
             }
-            this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes);
+            this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
+            this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
         }, this._handleLinkAdjacencyClick = element => {
             const curLinkDatum = element.getDatum(), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ];
             if (this._linkMark) {
@@ -128,7 +128,8 @@ export class SankeySeries extends CartesianSeries {
                     })) : (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._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
+            this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
         }, this._handleNodeRelatedClick = element => {
             var _a;
             const nodeDatum = element.getDatum(), allNodeElements = this._nodeMark.getProductElements();
@@ -186,7 +187,8 @@ export class SankeySeries extends CartesianSeries {
                         linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE));
                     }));
                 }
-                this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes);
+                this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
+                this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
             } else {
                 const highlightNodes = [ nodeDatum.key ], upstreamLinks = nodeDatum.targetLinks.reduce(((res, link) => (array(link.datum).forEach((dividedLink => {
                     const parents = dividedLink.parents, len = parents.length;
@@ -217,7 +219,8 @@ export class SankeySeries extends CartesianSeries {
                         ratio: upSelectedLink.value / linkDatum.value
                     });
                     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._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
+                this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
             }
         }, this._handleLinkRelatedClick = element => {
             var _a;
@@ -227,11 +230,17 @@ export class SankeySeries extends CartesianSeries {
             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 ];
-                this._linkMark && allLinkElements.forEach((linkEl => {
+                if (this._linkMark && allLinkElements.forEach((linkEl => {
                     linkEl.removeState(states);
                 })), this._nodeMark && allNodeElements.forEach((el => {
                     el.removeState(states);
-                }));
+                })), this._labelMark) {
+                    const allLabelElements = this._labelMark.getProductElements();
+                    if (!allLabelElements || !allLabelElements.length) return;
+                    allLabelElements.forEach((el => {
+                        el.removeState(states);
+                    }));
+                }
             } else {
                 const curLinkDatum = element.getDatum(), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ], upstreamLinks = [];
                 array(curLinkDatum.datum).forEach((dividedLink => {
@@ -278,14 +287,10 @@ export class SankeySeries extends CartesianSeries {
                         ratio: upSelectedLink.value / linkDatum.value
                     });
                     linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                })), this._highLightElements(allNodeElements, highlightNodes);
+                })), this._highLightElements(allNodeElements, highlightNodes), this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
             }
         };
     }
-    get direction() {
-        var _a;
-        return null !== (_a = this._spec.direction) && void 0 !== _a ? _a : "horizontal";
-    }
     getCategoryField() {
         return this._categoryField;
     }
@@ -299,9 +304,10 @@ export class SankeySeries extends CartesianSeries {
         return this._valueField = f, this._valueField;
     }
     setAttrFromSpec() {
-        var _a;
+        var _a, _b, _c;
         super.setAttrFromSpec(), this.setCategoryField(this._spec.categoryField), this.setValueField(this._spec.valueField), 
-        this.setSeriesField(null !== (_a = this._spec.seriesField) && void 0 !== _a ? _a : this._spec.categoryField);
+        this.setSeriesField(null !== (_a = this._spec.seriesField) && void 0 !== _a ? _a : this._spec.categoryField), 
+        this._labelLimit = null !== (_c = null === (_b = this._spec.label) || void 0 === _b ? void 0 : _b.limit) && void 0 !== _c ? _c : 100;
     }
     initData() {
         var _a, _b, _c, _d;
@@ -323,7 +329,7 @@ export class SankeySeries extends CartesianSeries {
                     sourceField: this._spec.sourceField,
                     targetField: this._spec.targetField,
                     valueField: this._spec.valueField,
-                    direction: this.direction,
+                    direction: this._spec.direction,
                     nodeAlign: null !== (_a = this._spec.nodeAlign) && void 0 !== _a ? _a : "justify",
                     nodeGap: null !== (_b = this._spec.nodeGap) && void 0 !== _b ? _b : 8,
                     nodeWidth: null !== (_c = this._spec.nodeWidth) && void 0 !== _c ? _c : 10,
@@ -403,7 +409,13 @@ export class SankeySeries extends CartesianSeries {
             customShape: null === (_c = this._spec.link) || void 0 === _c ? void 0 : _c.customShape,
             stateSort: null === (_d = this._spec.link) || void 0 === _d ? void 0 : _d.stateSort
         });
-        linkMark && (this._linkMark = linkMark);
+        if (linkMark && (this._linkMark = linkMark), this._spec.label && this._spec.label.visible) {
+            const labelMark = this._createMark(SankeySeries.mark.label, {
+                dataView: this._nodesSeriesData.getDataView(),
+                dataProductId: this._nodesSeriesData.getProductId()
+            });
+            labelMark && (this._labelMark = labelMark);
+        }
     }
     _buildMarkAttributeContext() {
         super._buildMarkAttributeContext(), this._markAttributeContext.valueToNode = this.valueToNode.bind(this), 
@@ -426,7 +438,7 @@ export class SankeySeries extends CartesianSeries {
         return null == node ? void 0 : node.y0;
     }
     initMarkStyle() {
-        this._initNodeMarkStyle(), this._initLinkMarkStyle();
+        this._initNodeMarkStyle(), this._initLinkMarkStyle(), this._initLabelMarkStyle();
     }
     _initNodeMarkStyle() {
         const nodeMark = this._nodeMark;
@@ -439,6 +451,7 @@ export class SankeySeries extends CartesianSeries {
         }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Mark);
     }
     _initLinkMarkStyle() {
+        var _a;
         const linkMark = this._linkMark;
         linkMark && this.setMarkStyle(linkMark, {
             x0: datum => datum.x0,
@@ -447,35 +460,119 @@ export class SankeySeries extends CartesianSeries {
             y1: datum => datum.y1,
             thickness: datum => datum.thickness,
             fill: this._fillByLink,
-            direction: this.direction
+            direction: null !== (_a = this._spec.direction) && void 0 !== _a ? _a : "horizontal"
         }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
     }
-    initLabelMarkStyle(labelMark, labelSpec) {
-        if (!labelMark) return;
-        const position = labelSpec.position;
-        position && position.includes("inside") ? this.setMarkStyle(labelMark, {
+    _initLabelMarkStyle() {
+        this._labelMark && ("vertical" === this._spec.direction ? "inside-start" === this._spec.label.position ? this.setMarkStyle(this._labelMark, {
+            x: datum => datum.x0,
+            y: datum => (datum.y0 + datum.y1) / 2,
             fill: "#ffffff",
-            text: datum => this._createText(datum, labelSpec),
-            maxLineWidth: datum => {
+            text: datum => this._createText(datum),
+            limit: datum => {
                 var _a;
-                return null !== (_a = labelSpec.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
-            }
-        }) : this.setMarkStyle(labelMark, {
+                return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
+            },
+            textAlign: "left",
+            textBaseline: "middle"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series) : "inside-middle" === this._spec.label.position ? this.setMarkStyle(this._labelMark, {
+            x: datum => (datum.x0 + datum.x1) / 2,
+            y: datum => (datum.y0 + datum.y1) / 2,
+            fill: "#ffffff",
+            text: datum => this._createText(datum),
+            limit: datum => {
+                var _a;
+                return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
+            },
+            textAlign: "center",
+            textBaseline: "middle"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series) : "inside-end" === this._spec.label.position ? this.setMarkStyle(this._labelMark, {
+            x: datum => datum.x1,
+            y: datum => (datum.y0 + datum.y1) / 2,
+            fill: "#ffffff",
+            text: datum => this._createText(datum),
+            limit: datum => {
+                var _a;
+                return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
+            },
+            textAlign: "right",
+            textBaseline: "middle"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series) : this.setMarkStyle(this._labelMark, {
+            x: datum => (datum.x0 + datum.x1) / 2,
+            y: datum => datum.y1 >= this._viewBox.y2 ? datum.y0 : datum.y1,
             fill: this._fillByNode,
-            text: datum => this._createText(datum, labelSpec),
-            maxLineWidth: labelSpec.limit
-        }), labelMark.setZIndex(this._labelLayoutZIndex);
+            text: datum => this._createText(datum),
+            limit: this._labelLimit,
+            textAlign: "center",
+            textBaseline: datum => datum.y1 >= this._viewBox.y2 ? "bottom" : "top"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series) : "inside-start" === this._spec.label.position ? this.setMarkStyle(this._labelMark, {
+            x: datum => datum.x0,
+            y: datum => (datum.y0 + datum.y1) / 2,
+            fill: "#ffffff",
+            text: datum => this._createText(datum),
+            limit: datum => {
+                var _a;
+                return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
+            },
+            textAlign: "left",
+            textBaseline: "middle"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series) : "inside-middle" === this._spec.label.position ? this.setMarkStyle(this._labelMark, {
+            x: datum => (datum.x0 + datum.x1) / 2,
+            y: datum => (datum.y0 + datum.y1) / 2,
+            fill: "#ffffff",
+            text: datum => this._createText(datum),
+            limit: datum => {
+                var _a;
+                return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
+            },
+            textAlign: "center",
+            textBaseline: "middle"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series) : "inside-end" === this._spec.label.position ? this.setMarkStyle(this._labelMark, {
+            x: datum => datum.x1,
+            y: datum => (datum.y0 + datum.y1) / 2,
+            fill: "#ffffff",
+            text: datum => this._createText(datum),
+            limit: datum => {
+                var _a;
+                return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
+            },
+            textAlign: "right",
+            textBaseline: "middle"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series) : "left" === this._spec.label.position ? this.setMarkStyle(this._labelMark, {
+            x: datum => datum.x0,
+            y: datum => (datum.y0 + datum.y1) / 2,
+            fill: this._fillByNode,
+            text: datum => this._createText(datum),
+            limit: this._labelLimit,
+            textAlign: "right",
+            textBaseline: "middle"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series) : "right" === this._spec.label.position ? this.setMarkStyle(this._labelMark, {
+            x: datum => datum.x1,
+            y: datum => (datum.y0 + datum.y1) / 2,
+            fill: this._fillByNode,
+            text: datum => this._createText(datum),
+            limit: this._labelLimit,
+            textAlign: "left",
+            textBaseline: "middle"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series) : this.setMarkStyle(this._labelMark, {
+            x: datum => datum.x1 >= this._viewBox.x2 ? datum.x0 : datum.x1,
+            y: datum => (datum.y0 + datum.y1) / 2,
+            fill: this._fillByNode,
+            text: datum => this._createText(datum),
+            limit: this._labelLimit,
+            textAlign: datum => datum.x1 >= this._viewBox.x2 ? "right" : "left",
+            textBaseline: "middle"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series), this._labelMark.setZIndex(this._labelLayoutZIndex));
     }
-    _createText(datum, labelSpec) {
+    _createText(datum) {
+        var _a;
         if (isNil(datum) || isNil(datum.datum)) return "";
         let text = datum.datum[this._spec.categoryField] || "";
-        const {formatMethod: formatMethod, formatter: formatter} = labelSpec || {}, {formatFunc: formatFunc, args: args} = getFormatFunction(formatMethod, formatter, text, datum.datum);
-        return formatFunc && (text = formatFunc(...args, {
-            series: this
-        })), text;
+        return (null === (_a = this._spec.label) || void 0 === _a ? void 0 : _a.formatMethod) && (text = this._spec.label.formatMethod(text, datum.datum)), 
+        text;
     }
     initAnimation() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const animationParams = {
             direction: this.direction,
             growFrom: () => {
@@ -484,7 +581,8 @@ export class SankeySeries extends CartesianSeries {
             }
         }, appearPreset = null === (_b = null === (_a = this._spec) || void 0 === _a ? void 0 : _a.animationAppear) || void 0 === _b ? void 0 : _b.preset;
         this._nodeMark && this._nodeMark.setAnimationConfig(animationConfig(null === (_c = Factory.getAnimationInKey("sankeyNode")) || void 0 === _c ? void 0 : _c(animationParams, appearPreset), userAnimationConfig("node", this._spec, this._markAttributeContext))), 
-        this._linkMark && this._linkMark.setAnimationConfig(animationConfig(null === (_d = Factory.getAnimationInKey("sankeyLinkPath")) || void 0 === _d ? void 0 : _d(animationParams, appearPreset), userAnimationConfig("link", this._spec, this._markAttributeContext)));
+        this._linkMark && this._linkMark.setAnimationConfig(animationConfig(null === (_d = Factory.getAnimationInKey("sankeyLinkPath")) || void 0 === _d ? void 0 : _d(animationParams, appearPreset), userAnimationConfig("link", this._spec, this._markAttributeContext))), 
+        this._labelMark && this._labelMark.setAnimationConfig(animationConfig(null === (_e = Factory.getAnimationInKey("fadeInOut")) || void 0 === _e ? void 0 : _e(), userAnimationConfig("label", this._spec, this._markAttributeContext)));
     }
     initEvent() {
         var _a, _b, _c;
@@ -512,7 +610,8 @@ export class SankeySeries extends CartesianSeries {
     }
     initTooltip() {
         this._tooltipHelper = new SankeySeriesTooltipHelper(this), this._nodeMark && this._tooltipHelper.activeTriggerSet.mark.add(this._nodeMark), 
-        this._linkMark && this._tooltipHelper.activeTriggerSet.mark.add(this._linkMark);
+        this._linkMark && this._tooltipHelper.activeTriggerSet.mark.add(this._linkMark), 
+        this._labelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._labelMark);
     }
     _setNodeOrdinalColorScale() {
         var _a, _b, _c, _d, _e;
@@ -527,9 +626,9 @@ export class SankeySeries extends CartesianSeries {
         this._colorScale = ordinalScale;
     }
     getNodeList() {
-        var _a, _b;
+        var _a;
         if (this._nodeList) return this._nodeList;
-        const data = this._rawData.latestData[0], nodeList = (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 === (_b = null == data ? void 0 : data.values) || void 0 === _b ? void 0 : _b.map(((datum, index) => datum[this._spec.categoryField]));
+        const data = this._rawData.latestData[0], nodeList = (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]));
         return this._nodeList = nodeList, nodeList;
     }
     _getNodeNameFromData(datum) {
@@ -590,8 +689,7 @@ export class SankeySeries extends CartesianSeries {
     }
 }
 
-SankeySeries.type = SeriesTypeEnum.sankey, SankeySeries.transformerConstructor = SankeySeriesSpecTransformer, 
-SankeySeries.mark = sankeySeriesMark;
+SankeySeries.type = SeriesTypeEnum.sankey, SankeySeries.mark = sankeySeriesMark;
 
 export const registerSankeySeries = () => {
     registerSankeyTransforms(), registerRectMark(), registerLinkPathMark(), registerTextMark(),