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

package/esm/series/sankey/sankey.js

@@ -48,10 +48,15 @@ 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._nodeLayoutZIndex = LayoutZIndex.Node, 
-        this._labelLayoutZIndex = LayoutZIndex.Label, this._viewBox = new Bounds, this._fillByNode = datum => {
+        super(...arguments), this.type = SeriesTypeEnum.sankey, this.transformerConstructor = SankeySeriesSpecTransformer, 
+        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;
@@ -76,20 +81,16 @@ 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, _c;
+            var _a, _b;
             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 ];
@@ -114,8 +115,7 @@ export class SankeySeries extends CartesianSeries {
                     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);
+            this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes);
         }, this._handleLinkAdjacencyClick = element => {
             const curLinkDatum = element.getDatum(), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ];
             if (this._linkMark) {
@@ -128,8 +128,7 @@ 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._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
+            this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes);
         }, this._handleNodeRelatedClick = element => {
             var _a;
             const nodeDatum = element.getDatum(), allNodeElements = this._nodeMark.getProductElements();
@@ -187,8 +186,7 @@ export class SankeySeries extends CartesianSeries {
                         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);
+                this._nodeMark && this._highLightElements(this._nodeMark.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;
@@ -219,8 +217,7 @@ 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._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
+                })), this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes);
             }
         }, this._handleLinkRelatedClick = element => {
             var _a;
@@ -230,17 +227,11 @@ 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 ];
-                if (this._linkMark && allLinkElements.forEach((linkEl => {
+                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 => {
@@ -287,10 +278,14 @@ 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._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
+                })), this._highLightElements(allNodeElements, highlightNodes);
             }
         };
     }
+    get direction() {
+        var _a;
+        return null !== (_a = this._spec.direction) && void 0 !== _a ? _a : "horizontal";
+    }
     getCategoryField() {
         return this._categoryField;
     }
@@ -304,10 +299,9 @@ export class SankeySeries extends CartesianSeries {
         return this._valueField = f, this._valueField;
     }
     setAttrFromSpec() {
-        var _a, _b, _c;
+        var _a;
         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._labelLimit = null !== (_c = null === (_b = this._spec.label) || void 0 === _b ? void 0 : _b.limit) && void 0 !== _c ? _c : 100;
+        this.setSeriesField(null !== (_a = this._spec.seriesField) && void 0 !== _a ? _a : this._spec.categoryField);
     }
     initData() {
         var _a, _b, _c, _d;
@@ -329,7 +323,7 @@ export class SankeySeries extends CartesianSeries {
                     sourceField: this._spec.sourceField,
                     targetField: this._spec.targetField,
                     valueField: this._spec.valueField,
-                    direction: this._spec.direction,
+                    direction: this.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,
@@ -409,13 +403,7 @@ 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
         });
-        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);
-        }
+        linkMark && (this._linkMark = linkMark);
     }
     _buildMarkAttributeContext() {
         super._buildMarkAttributeContext(), this._markAttributeContext.valueToNode = this.valueToNode.bind(this), 
@@ -438,7 +426,7 @@ export class SankeySeries extends CartesianSeries {
         return null == node ? void 0 : node.y0;
     }
     initMarkStyle() {
-        this._initNodeMarkStyle(), this._initLinkMarkStyle(), this._initLabelMarkStyle();
+        this._initNodeMarkStyle(), this._initLinkMarkStyle();
     }
     _initNodeMarkStyle() {
         const nodeMark = this._nodeMark;
@@ -451,7 +439,6 @@ 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,
@@ -460,119 +447,35 @@ export class SankeySeries extends CartesianSeries {
             y1: datum => datum.y1,
             thickness: datum => datum.thickness,
             fill: this._fillByLink,
-            direction: null !== (_a = this._spec.direction) && void 0 !== _a ? _a : "horizontal"
+            direction: this.direction
         }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
     }
-    _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),
-            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) : 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),
-            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,
+    initLabelMarkStyle(labelMark, labelSpec) {
+        if (!labelMark) return;
+        const position = labelSpec.position;
+        position && position.includes("inside") ? this.setMarkStyle(labelMark, {
             fill: "#ffffff",
-            text: datum => this._createText(datum),
-            limit: datum => {
+            text: datum => this._createText(datum, labelSpec),
+            maxLineWidth: 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,
+                return null !== (_a = labelSpec.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
+            }
+        }) : this.setMarkStyle(labelMark, {
             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));
+            text: datum => this._createText(datum, labelSpec),
+            maxLineWidth: labelSpec.limit
+        }), labelMark.setZIndex(this._labelLayoutZIndex);
     }
-    _createText(datum) {
-        var _a;
+    _createText(datum, labelSpec) {
         if (isNil(datum) || isNil(datum.datum)) return "";
         let text = datum.datum[this._spec.categoryField] || "";
-        return (null === (_a = this._spec.label) || void 0 === _a ? void 0 : _a.formatMethod) && (text = this._spec.label.formatMethod(text, datum.datum)), 
-        text;
+        const {formatMethod: formatMethod, formatter: formatter} = labelSpec || {}, {formatFunc: formatFunc, args: args} = getFormatFunction(formatMethod, formatter, text, datum.datum);
+        return formatFunc && (text = formatFunc(...args, {
+            series: this
+        })), text;
     }
     initAnimation() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const animationParams = {
             direction: this.direction,
             growFrom: () => {
@@ -581,8 +484,7 @@ 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._labelMark && this._labelMark.setAnimationConfig(animationConfig(null === (_e = Factory.getAnimationInKey("fadeInOut")) || void 0 === _e ? void 0 : _e(), userAnimationConfig("label", 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)));
     }
     initEvent() {
         var _a, _b, _c;
@@ -610,8 +512,7 @@ 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._labelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._labelMark);
+        this._linkMark && this._tooltipHelper.activeTriggerSet.mark.add(this._linkMark);
     }
     _setNodeOrdinalColorScale() {
         var _a, _b, _c, _d, _e;
@@ -626,9 +527,9 @@ export class SankeySeries extends CartesianSeries {
         this._colorScale = ordinalScale;
     }
     getNodeList() {
-        var _a;
+        var _a, _b;
         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 == data ? void 0 : data.values.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 === (_b = null == data ? void 0 : data.values) || void 0 === _b ? void 0 : _b.map(((datum, index) => datum[this._spec.categoryField]));
         return this._nodeList = nodeList, nodeList;
     }
     _getNodeNameFromData(datum) {
@@ -689,7 +590,8 @@ export class SankeySeries extends CartesianSeries {
     }
 }
 
-SankeySeries.type = SeriesTypeEnum.sankey, SankeySeries.mark = sankeySeriesMark;
+SankeySeries.type = SeriesTypeEnum.sankey, SankeySeries.transformerConstructor = SankeySeriesSpecTransformer, 
+SankeySeries.mark = sankeySeriesMark;
 
 export const registerSankeySeries = () => {
     registerSankeyTransforms(), registerRectMark(), registerLinkPathMark(), registerTextMark(),