@visactor/vchart-extension 1.13.21-alpha.0 → 1.13.21-alpha.1

package/build/index.js

@@ -495,6 +495,18 @@
 	  return target;
 	}
 
+	function pickWithout(obj, keys) {
+	  if (!obj || !isPlainObject$1(obj)) return obj;
+	  const result = {};
+	  return Object.keys(obj).forEach(k => {
+	    const v = obj[k];
+	    let match = !1;
+	    keys.forEach(itKey => {
+	      (isString$1(itKey) && itKey === k || itKey instanceof RegExp && k.match(itKey)) && (match = !0);
+	    }), match || (result[k] = v);
+	  }), result;
+	}
+
 	function array(arr) {
 	  return isValid$1(arr) ? isArray$1(arr) ? arr : [arr] : [];
 	}
@@ -618,6 +630,28 @@
 	};
 	var clamp$1 = clamp;
 
+	function toValidNumber(v) {
+	  if (isValidNumber$1(v)) return v;
+	  const value = +v;
+	  return isValidNumber$1(value) ? value : 0;
+	}
+
+	const getter = path => obj => get$1(obj, path);
+	const fieldSingle = function (fieldStr) {
+	  let opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+	  if (isFunction$1(fieldStr)) return fieldStr;
+	  const path = [fieldStr];
+	  return (opt && opt.get || getter)(path);
+	};
+	const field = function (fieldStr) {
+	  let opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+	  if (isArray$1(fieldStr)) {
+	    const funcs = fieldStr.map(entry => fieldSingle(entry, opt));
+	    return datum => funcs.map(func => func(datum));
+	  }
+	  return fieldSingle(fieldStr, opt);
+	};
+
 	const epsilon = 1e-12;
 	const pi = Math.PI;
 	const halfPi = pi / 2;
@@ -4232,6 +4266,411 @@
 	    }
 	};
 
+	class CompareSankeyChartSpecTransformer extends vchart.SankeyChartSpecTransformer {
+	    transformSpec(spec) {
+	        super.transformSpec(spec);
+	    }
+	    _getDefaultSeriesSpec(spec) {
+	        const seriesSpec = super._getDefaultSeriesSpec(spec);
+	        seriesSpec.subNodeGap = spec.subNodeGap;
+	        seriesSpec.compareNodeColor = spec.compareNodeColor;
+	        seriesSpec.compareLinkColor = spec.compareLinkColor;
+	        seriesSpec.activeLink = spec.activeLink;
+	        return seriesSpec;
+	    }
+	}
+
+	const compareSankeySubNodes = (data) => {
+	    const viewData = data[0];
+	    if (!viewData.latestData) {
+	        return [];
+	    }
+	    const subData = Object.keys(viewData.latestData);
+	    if (!subData.length) {
+	        return {};
+	    }
+	    const subNodes = [];
+	    subData.forEach(key => {
+	        subNodes.push(...viewData.latestData[key].nodes);
+	    });
+	    return [{ nodes: subNodes }];
+	};
+
+	const calculateNodeValue = (subTree) => {
+	    let sum = 0;
+	    subTree.forEach(node => {
+	        var _a;
+	        if (isNil$1(node.value)) {
+	            if ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) {
+	                node.value = calculateNodeValue(node.children);
+	            }
+	            else {
+	                node.value = 0;
+	            }
+	        }
+	        sum += Math.abs(node.value);
+	    });
+	    return sum;
+	};
+	function makeHierarchicNodes(originalNodes, nodeKeyFunc, nodes = [], nodeMap = {}, originalLinks) {
+	    calculateNodeValue(originalNodes);
+	    const doSubTree = (subTree, depth, parents) => {
+	        subTree.forEach((node, index) => {
+	            const nodeKey = nodeKeyFunc
+	                ? nodeKeyFunc(node)
+	                : parents
+	                    ? `${parents[parents.length - 1].key}-${index}`
+	                    : `${depth}-${index}`;
+	            const nodeValue = (isNil$1(node.value) ? 0 : toValidNumber(node.value));
+	            if (nodeMap[nodeKey]) {
+	                nodeMap[nodeKey].value = undefined;
+	            }
+	            else {
+	                const nodeElement = {
+	                    depth,
+	                    datum: node,
+	                    index: index,
+	                    key: nodeKey,
+	                    value: nodeValue,
+	                    sourceLinks: [],
+	                    targetLinks: []
+	                };
+	                nodeMap[nodeKey] = nodeElement;
+	                nodes.push(nodeElement);
+	            }
+	            if (parents && originalLinks) {
+	                originalLinks.push({
+	                    source: parents[parents.length - 1].key,
+	                    target: nodeKey,
+	                    value: nodeValue,
+	                    parents
+	                });
+	            }
+	            if (node.children && node.children.length) {
+	                doSubTree(node.children, depth + 1, parents ? parents.concat([nodeMap[nodeKey]]) : [nodeMap[nodeKey]]);
+	            }
+	        });
+	    };
+	    doSubTree(originalNodes, 0, null);
+	    return nodes;
+	}
+	function computeHierarchicNodeLinks(originalNodes, nodeKeyFunc) {
+	    const nodes = [];
+	    const links = [];
+	    const nodeMap = {};
+	    const linkMap = {};
+	    const originalLinks = [];
+	    makeHierarchicNodes(originalNodes, nodeKeyFunc, nodes, nodeMap, originalLinks);
+	    originalLinks.forEach((link, index) => {
+	        const key = `${link.source}-${link.target}`;
+	        const linkDatum = pickWithout(link, ['parents']);
+	        linkDatum.parents = link.parents.map(node => {
+	            return pickWithout(node, ['sourceLinks', 'targetLinks']);
+	        });
+	        if (linkMap[key]) {
+	            linkMap[key].value += toValidNumber(link.value);
+	            linkMap[key].datum.push(linkDatum);
+	            return;
+	        }
+	        const linkElement = {
+	            index,
+	            key: `${link.source}-${link.target}`,
+	            source: link.source,
+	            target: link.target,
+	            datum: [linkDatum],
+	            value: link.value,
+	            parents: link.parents.map(parent => parent.key)
+	        };
+	        links.push(linkElement);
+	        nodeMap[link.source].sourceLinks.push(linkElement);
+	        nodeMap[link.target].targetLinks.push(linkElement);
+	        linkMap[key] = linkElement;
+	    });
+	    return { nodes, links, nodeMap };
+	}
+	function computeNodeValues(nodes) {
+	    for (let i = 0, len = nodes.length; i < len; i++) {
+	        const node = nodes[i];
+	        node.value = Math.max(isNil$1(node.value) ? 0 : toValidNumber(node.value), node.sourceLinks.reduce((sum, link) => {
+	            var _a;
+	            return sum + ((_a = toValidNumber(link.value)) !== null && _a !== void 0 ? _a : 0);
+	        }, 0), node.targetLinks.reduce((sum, link) => {
+	            var _a;
+	            return sum + ((_a = toValidNumber(link.value)) !== null && _a !== void 0 ? _a : 0);
+	        }, 0));
+	    }
+	}
+	const compareSankeySubData = (data, opt) => {
+	    var _a;
+	    const viewData = data[0];
+	    if (!((_a = viewData.latestData) === null || _a === void 0 ? void 0 : _a.length)) {
+	        return {};
+	    }
+	    const rawDataTree = opt.rawData().latestData[0];
+	    const subNodeGap = opt.subNodeGap;
+	    const keyFunc = isFunction$1(opt.nodeKey) ? opt.nodeKey : opt.nodeKey ? field(opt.nodeKey) : null;
+	    const subNodeMap = {};
+	    rawDataTree.subNode.forEach((sunGroup) => {
+	        subNodeMap[sunGroup.type] = computeHierarchicNodeLinks(sunGroup.nodes, keyFunc);
+	        computeNodeValues(subNodeMap[sunGroup.type].nodes);
+	    });
+	    const subCount = Object.keys(subNodeMap).length;
+	    viewData.latestData[0].nodes.forEach((n) => {
+	        let path = [];
+	        if (n.targetLinks.length) {
+	            const link = n.targetLinks[0];
+	            path = [...link.parents];
+	        }
+	        path.push(n.key);
+	        let currentY = n.y0;
+	        const totalSize = n.y1 - n.y0 - (subCount - 1) * subNodeGap;
+	        const totalValue = n.value;
+	        rawDataTree.subNode.forEach((sunGroup) => {
+	            const subNode = subNodeMap[sunGroup.type].nodes.find(subN => subN.key === n.key);
+	            if (!subNode) {
+	                return;
+	            }
+	            const percent = subNode.value / totalValue;
+	            subNode.x0 = n.x0;
+	            subNode.x1 = n.x1;
+	            subNode.y0 = currentY;
+	            subNode.y1 = currentY + totalSize * percent;
+	            subNode.type = sunGroup.type;
+	            subNode.sourceNode = n;
+	            currentY += totalSize * percent + subNodeGap;
+	        });
+	    });
+	    return subNodeMap;
+	};
+
+	const getDatumOfGraphic = (g) => {
+	    if (!g || !g.graphicItem) {
+	        return null;
+	    }
+	    if (isCollectionMark(g.graphicItem.type)) {
+	        return g.data;
+	    }
+	    return g.data[0];
+	};
+	const isCollectionMark = (type) => {
+	    return type === 'line' || type === 'area';
+	};
+
+	class CompareSankeyChart extends vchart.SankeyChart {
+	    constructor() {
+	        super(...arguments);
+	        this.type = 'compareSankey';
+	        this.transformerConstructor = CompareSankeyChartSpecTransformer;
+	    }
+	}
+	CompareSankeyChart.type = 'compareSankey';
+	CompareSankeyChart.transformerConstructor = CompareSankeyChartSpecTransformer;
+	class CompareSankeySeries extends vchart.SankeySeries {
+	    constructor() {
+	        super(...arguments);
+	        this._fillCompareNode = (datum) => {
+	            var _a, _b, _c;
+	            if ((_a = this._spec.compareNodeColor) === null || _a === void 0 ? void 0 : _a[datum.type]) {
+	                return this._spec.compareNodeColor[datum.type];
+	            }
+	            return (_c = (_b = this._spec.node.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this._fillByNode(datum);
+	        };
+	        this._fillActiveLink = (datum) => {
+	            var _a, _b, _c;
+	            if ((_a = this._spec.compareLinkColor) === null || _a === void 0 ? void 0 : _a[datum.type]) {
+	                return this._spec.compareLinkColor[datum.type];
+	            }
+	            return (_c = (_b = this._spec.link.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this._fillByLink(datum);
+	        };
+	    }
+	    initData() {
+	        var _a;
+	        super.initData();
+	        const { dataSet } = this._option;
+	        const compareSubData = new DataView(dataSet, { name: `compare-sankey-sub-data-${this.id}-data` });
+	        compareSubData.parse([this.getViewData()], {
+	            type: 'dataview'
+	        });
+	        this._subData = compareSubData;
+	        const compareNodeData = new DataView(dataSet, { name: `compare-sankey-node-${this.id}-data` });
+	        compareNodeData.parse([compareSubData], {
+	            type: 'dataview'
+	        });
+	        vchart.registerDataSetInstanceTransform(this._dataSet, 'compareSankeySubData', compareSankeySubData);
+	        compareSubData.transform({
+	            type: 'compareSankeySubData',
+	            options: {
+	                rawData: () => this.getRawData(),
+	                valueField: this._valueField,
+	                nodeKey: this._spec.nodeKey,
+	                subNodeGap: (_a = this._spec.subNodeGap) !== null && _a !== void 0 ? _a : 2
+	            }
+	        });
+	        vchart.registerDataSetInstanceTransform(this._dataSet, 'compareSankeySubNodes', compareSankeySubNodes);
+	        compareNodeData.transform({
+	            type: 'compareSankeySubNodes'
+	        });
+	        this._nodesSeriesData.getDataView().parse([compareNodeData], {
+	            type: 'dataview'
+	        });
+	        this._activeLinkData = new DataView(dataSet, { name: `compare-sankey-link-${this.id}-data` });
+	    }
+	    initEvent() {
+	        var _a;
+	        super.initEvent();
+	        (_a = this._activeLinkData) === null || _a === void 0 ? void 0 : _a.target.addListener('change', this.activeLinkDataUpdate.bind(this));
+	    }
+	    initMark() {
+	        super.initMark();
+	        const linkMark = this._createMark(Object.assign(Object.assign({}, vchart.SankeySeries.mark.link), { name: 'activeLink' }), {
+	            dataView: this._activeLinkData
+	        });
+	        if (linkMark) {
+	            this._activeLinkMark = linkMark;
+	        }
+	    }
+	    compileData() {
+	        var _a;
+	        super.compileData();
+	        (_a = this._activeLinkMark) === null || _a === void 0 ? void 0 : _a.compileData();
+	    }
+	    _initLinkMarkStyle() {
+	        super._initLinkMarkStyle();
+	        this._activeLinkMark.setAttribute('direction', this.direction);
+	        this.setMarkStyle(this._activeLinkMark, {
+	            x0: (datum) => datum.x0,
+	            x1: (datum) => datum.x1,
+	            y0: (datum) => datum.y0,
+	            y1: (datum) => datum.y1,
+	            thickness: (datum) => datum.thickness
+	        }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+	        this.setMarkStyle(this._activeLinkMark, {
+	            fill: this._fillActiveLink
+	        }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.User_Mark);
+	    }
+	    _initNodeMarkStyle() {
+	        super._initNodeMarkStyle();
+	        if (this._spec.compareNodeColor) {
+	            this.setMarkStyle(this._nodeMark, {
+	                fill: this._fillCompareNode
+	            }, 'normal', vchart.AttributeLevel.User_Mark);
+	        }
+	    }
+	    activeLinkDataUpdate() {
+	        this._activeLinkMark.getData().updateData();
+	    }
+	    _handleNodeRelatedClick(element, highlightState, blurState) {
+	        const nodeDatum = element.getDatum();
+	        const allNodeElements = this._nodeMark.getProductElements();
+	        if (!allNodeElements || !allNodeElements.length) {
+	            return;
+	        }
+	        const allLinkElements = this._linkMark.getProductElements();
+	        if (!allLinkElements || !allLinkElements.length) {
+	            return;
+	        }
+	        allLinkElements.forEach(el => {
+	            el.removeState([vchart.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS]);
+	        });
+	        this._highLightElements(allLinkElements, [], highlightState, blurState);
+	        const nodeDatums = allNodeElements.map(el => getDatumOfGraphic(el));
+	        const pickNodeDatums = nodeDatums.filter(d => d.key === nodeDatum.key);
+	        const highlightLinksData = [];
+	        const highlightNodeKeys = [];
+	        this._activeTargetLink(nodeDatum, pickNodeDatums, allNodeElements, allLinkElements, highlightNodeKeys, highlightLinksData, highlightState, blurState);
+	        this._activeSourceLink(nodeDatum, pickNodeDatums, nodeDatums, allNodeElements, highlightNodeKeys, highlightLinksData, highlightState, blurState);
+	        this._highLightElements(allNodeElements, highlightNodeKeys, highlightState, blurState);
+	        this._activeLinkData.parseNewData(highlightLinksData);
+	        this._needClear = true;
+	    }
+	    _activeTargetLink(nodeDatum, pickNodeDatums, allNodeElements, allLinkElements, highlightNodeKeys, highlightLinksData, highlightState, blurState) {
+	        this._handleClearEmpty(highlightState, blurState);
+	        const sourceNode = nodeDatum.sourceNode;
+	        const firstTarget = sourceNode.targetLinks[0];
+	        if (!firstTarget) {
+	            return;
+	        }
+	        let percent = 0;
+	        pickNodeDatums.forEach(n => {
+	            const link = n.targetLinks.find((l) => l.key === firstTarget.key);
+	            if (link) {
+	                const p = link.value / firstTarget.value;
+	                const key = firstTarget.key + '_' + n.type;
+	                const activeLink = Object.assign(Object.assign({}, firstTarget), { y0: firstTarget.y0 - firstTarget.thickness / 2 + (percent + p / 2) * firstTarget.thickness, y1: n.y0 + (p * firstTarget.thickness) / 2, thickness: p * firstTarget.thickness, key, type: n.type, [vchart.DEFAULT_DATA_INDEX]: highlightLinksData.length, [vchart.DEFAULT_DATA_KEY]: key });
+	                highlightLinksData.push(activeLink);
+	                percent += p;
+	            }
+	        });
+	        highlightNodeKeys.push(...firstTarget.parents, nodeDatum.key);
+	        const linkKeys = [];
+	        for (let i = 0; i < firstTarget.parents.length - 1; i++) {
+	            linkKeys.push(firstTarget.parents[i] + '-' + firstTarget.parents[i + 1]);
+	        }
+	        this._highLightElements(allLinkElements, linkKeys, highlightState, blurState);
+	    }
+	    _activeSourceLink(nodeDatum, pickNodeDatums, allNodeDatums, allNodeElements, highlightNodeKeys, highlightLinksData, highlightState, blurState) {
+	        this._handleClearEmpty(highlightState, blurState);
+	        const sourceNode = nodeDatum.sourceNode;
+	        const sourceLinks = sourceNode.sourceLinks;
+	        if (!(sourceLinks === null || sourceLinks === void 0 ? void 0 : sourceLinks.length)) {
+	            return;
+	        }
+	        const sourceValueTemp = {};
+	        sourceLinks.forEach((sourceLink) => {
+	            highlightNodeKeys.push(sourceLink.target);
+	            pickNodeDatums.forEach((n, index) => {
+	                var _a;
+	                sourceValueTemp[n.type] = (_a = sourceValueTemp[n.type]) !== null && _a !== void 0 ? _a : 0;
+	                const link = n.sourceLinks.find((l) => l.key === sourceLink.key);
+	                if (link) {
+	                    const p = link.value / n.value;
+	                    const totalSize = n.y1 - n.y0;
+	                    const size = totalSize * p;
+	                    const key = sourceLink.key + '_' + n.type;
+	                    const activeLink = Object.assign(Object.assign({}, sourceLink), { y0: n.y0 + sourceValueTemp[n.type] * totalSize + size / 2, thickness: size, key, type: n.type, [vchart.DEFAULT_DATA_INDEX]: highlightLinksData.length, [vchart.DEFAULT_DATA_KEY]: key });
+	                    if (index === 0) {
+	                        activeLink.y1 = sourceLink.y1 - sourceLink.thickness / 2 + size / 2;
+	                    }
+	                    else {
+	                        const targetNode = allNodeDatums.find(_n => _n.key === link.target && _n.type === n.type);
+	                        if (targetNode) {
+	                            activeLink.y1 = targetNode.y0 + size / 2;
+	                        }
+	                        else {
+	                            return;
+	                        }
+	                    }
+	                    highlightLinksData.push(activeLink);
+	                    sourceValueTemp[n.type] += p;
+	                }
+	            });
+	        });
+	    }
+	    _handleClearEmpty(highlightState, blurState) {
+	        super._handleClearEmpty(highlightState, blurState);
+	        this._activeLinkData.parseNewData([]);
+	        const allNodeElements = this._nodeMark.getProductElements();
+	        if (allNodeElements || !allNodeElements.length) {
+	            allNodeElements.forEach(el => {
+	                el.removeState(vchart.STATE_VALUE_ENUM.STATE_HOVER);
+	            });
+	        }
+	        const allLinkElements = this._linkMark.getProductElements();
+	        if (allLinkElements || !allLinkElements.length) {
+	            allLinkElements.forEach(el => {
+	                el.removeState(vchart.STATE_VALUE_ENUM.STATE_HOVER);
+	            });
+	        }
+	    }
+	}
+	const registerCompareSankeyChart = (option) => {
+	    const vchartConstructor = (option === null || option === void 0 ? void 0 : option.VChart) || vchart.VChart;
+	    if (vchartConstructor) {
+	        vchartConstructor.useChart([CompareSankeyChart]);
+	        vchartConstructor.useSeries([CompareSankeySeries]);
+	    }
+	};
+
 	class Generator {
 	  static GenAutoIncrementId() {
 	    return Generator.auto_increment_id++;
@@ -13957,6 +14396,8 @@
 
 	exports.BAR_LINK = BAR_LINK;
 	exports.BarLinkComponent = BarLinkComponent;
+	exports.CompareSankeyChart = CompareSankeyChart;
+	exports.CompareSankeySeries = CompareSankeySeries;
 	exports.ConversionFunnelChart = ConversionFunnelChart;
 	exports.ConversionFunnelSeries = ConversionFunnelSeries;
 	exports.DEFAULT_ARROW_MARK_STYLE = DEFAULT_ARROW_MARK_STYLE;
@@ -13978,6 +14419,7 @@
 	exports.getSeriesBreakConfig = getSeriesBreakConfig;
 	exports.getSeriesLabelConfig = getSeriesLabelConfig;
 	exports.registerBarLink = registerBarLink;
+	exports.registerCompareSankeyChart = registerCompareSankeyChart;
 	exports.registerConversionFunnelChart = registerConversionFunnelChart;
 	exports.registerRankingBarChart = registerRankingBarChart;
 	exports.registerRankingList = registerRankingList;