@visactor/vchart 1.13.21-alpha.1 → 1.13.21-alpha.3

package/build/index.js

@@ -31839,8 +31839,8 @@
       style: {}
     };
     const SCROLLBAR_START_EVENT = "scrollDown";
-    const SCROLLBAR_EVENT$1 = "scrollDrag";
-    const SCROLLBAR_END_EVENT$1 = "scrollUp";
+    const SCROLLBAR_EVENT$2 = "scrollDrag";
+    const SCROLLBAR_END_EVENT$2 = "scrollUp";
 
     function getEndTriggersOfDrag() {
       return "browser" === vglobal.env ? ["pointerup", "pointerleave", "pointercancel"] : ["pointerup", "pointerleave", "pointerupoutside"];
@@ -31935,7 +31935,7 @@
             preScrollRange = this.getScrollRange(),
             [currentPos, currentScrollValue] = this._computeScrollValue(e),
             range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
-          this._prePos = null, this._dispatchEvent(SCROLLBAR_END_EVENT$1, {
+          this._prePos = null, this._dispatchEvent(SCROLLBAR_END_EVENT$2, {
             pre: preRange,
             value: clampRange$1(range, limitRange[0], limitRange[1])
           }), this._clearDragEvents();
@@ -31963,7 +31963,7 @@
             }, !0), this.stage && !this.stage.autoRender && this.stage.renderNextFrame();
           }
         }
-        this.attribute.range = currScrollRange, realTime && this._dispatchEvent(SCROLLBAR_EVENT$1, {
+        this.attribute.range = currScrollRange, realTime && this._dispatchEvent(SCROLLBAR_EVENT$2, {
           pre: preRange,
           value: currScrollRange
         });
@@ -32202,7 +32202,7 @@
           scrollbar.setAttribute("visibleAll", !0);
         }), scrollbar.addEventListener("pointerout", () => {
           scrollbar.setAttribute("visibleAll", !0);
-        }), scrollbar.addEventListener("scrollUp", this.handleScrollBarChange), scrollbar.addEventListener(SCROLLBAR_EVENT$1, this.handleScrollBarChange);
+        }), scrollbar.addEventListener("scrollUp", this.handleScrollBarChange), scrollbar.addEventListener(SCROLLBAR_EVENT$2, this.handleScrollBarChange);
       }
       addOrUpdateScroll(showH, showV, container, scrollContainer) {
         if (showH) {
@@ -62894,6 +62894,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super();
             this.globalInstance = globalInstance;
         }
+        getPlugin(name) {
+            return this._plugins.find(plugin => plugin.name === name);
+        }
         onInit(chartSpec) {
             this._plugins.forEach(plugin => {
                 plugin.onInit && plugin.onInit(this, chartSpec);
@@ -63054,6 +63057,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getDataSet() {
             return this._dataSet;
         }
+        get chartPlugin() {
+            return this._chartPlugin;
+        }
         constructor(spec, options) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             this.id = createID();
@@ -64274,7 +64280,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.13.21-alpha.1";
+    const version = "1.13.21-alpha.3";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -85803,7 +85809,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         this._ascendingSourceBreadth = (a, b) => ascendingNodeBreadth(this._nodeMap[a.source], this._nodeMap[b.source]) || a.index - b.index, this._ascendingTargetBreadth = (a, b) => ascendingNodeBreadth(this._nodeMap[a.target], this._nodeMap[b.target]) || a.index - b.index, this.options = Object.assign({}, SankeyLayout.defaultOptions, options);
         const keyOption = this.options.nodeKey,
           keyFunc = isFunction$1(keyOption) ? keyOption : keyOption ? field$3(keyOption) : null;
-        this._getNodeKey = keyFunc, this._logger = Logger.getInstance(), this._alignFunc = isFunction$1(this.options.setNodeLayer) ? node => this.options.setNodeLayer(node.datum) : alignFunctions[this.options.nodeAlign];
+        this._getNodeKey = keyFunc;
+        const depthOption = this.options.depthKey,
+          depthFunc = isFunction$1(depthOption) ? depthOption : depthOption ? field$3(depthOption) : null;
+        this._getNodeDepth = depthFunc, this._logger = Logger.getInstance(), this._alignFunc = isFunction$1(this.options.setNodeLayer) ? node => this.options.setNodeLayer(node.datum) : alignFunctions[this.options.nodeAlign];
       }
       layout(data, config) {
         if (!data) return null;
@@ -85908,11 +85917,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         calculateNodeValue(originalNodes);
         const doSubTree = (subTree, depth, parents) => {
           subTree.forEach((node, index) => {
+            var _a;
             const nodeKey = this._getNodeKey ? this._getNodeKey(node) : parents ? `${parents[parents.length - 1].key}-${index}` : `${depth}-${index}`,
               nodeValue = isNil$1(node.value) ? 0 : toValidNumber$1(node.value);
             if (nodeMap[nodeKey]) nodeMap[nodeKey].value = void 0;else {
               const nodeElement = {
-                depth: depth,
+                depth: this._getNodeDepth && null !== (_a = this._getNodeDepth(node)) && void 0 !== _a ? _a : depth,
                 datum: node,
                 index: index,
                 key: nodeKey,
@@ -86030,7 +86040,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
       }
       computeNodeDepths(nodes) {
-        var _a;
+        var _a, _b;
         const n = nodes.length;
         let next,
           nextMap,
@@ -86042,9 +86052,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           next = [], nextMap = {};
           for (let i = 0, curLen = current.length; i < curLen; i++) {
             const node = current[i];
-            if (node && (node.depth = setNodeLayer && null !== (_a = setNodeLayer(node.datum)) && void 0 !== _a ? _a : depth, setNodeLayer && (maxDepth = Math.max(node.depth, maxDepth)), node.sourceLinks && node.sourceLinks.length)) for (let j = 0, linkLen = node.sourceLinks.length; j < linkLen; j++) {
-              const link = node.sourceLinks[j];
-              nextMap[link.target] || (next.push(this._nodeMap[link.target]), nextMap[link.target] = !0);
+            if (node) {
+              const tempDepth = setNodeLayer && null !== (_a = setNodeLayer(node.datum)) && void 0 !== _a ? _a : depth;
+              if (node.depth = this._getNodeDepth && null !== (_b = this._getNodeDepth(node.datum)) && void 0 !== _b ? _b : tempDepth, setNodeLayer && (maxDepth = Math.max(node.depth, maxDepth)), node.sourceLinks && node.sourceLinks.length) for (let j = 0, linkLen = node.sourceLinks.length; j < linkLen; j++) {
+                const link = node.sourceLinks[j];
+                nextMap[link.target] || (next.push(this._nodeMap[link.target]), nextMap[link.target] = !0);
+              }
             }
           }
           current = next, depth += 1;
@@ -86448,7 +86461,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         const layout = new SankeyLayout(op);
         const result = [];
-        result.push(layout.layout(originalData, view));
+        if (op.customLayout) {
+            result.push(op.customLayout(layout, originalData, view, op));
+        }
+        else {
+            result.push(layout.layout(originalData, view));
+        }
         return result;
     };
 
@@ -86768,6 +86786,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         maxLinkHeight: this._spec.maxLinkHeight,
                         iterations: this._spec.iterations,
                         nodeKey: this._spec.nodeKey,
+                        depthKey: this._spec.depthKey,
                         linkSortBy: this._spec.linkSortBy,
                         nodeSortBy: this._spec.nodeSortBy,
                         setNodeLayer: this._spec.setNodeLayer,
@@ -86776,7 +86795,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         linkHeight: this._spec.linkHeight,
                         equalNodeHeight: this._spec.equalNodeHeight,
                         linkOverlap: this._spec.linkOverlap,
-                        inverse: this._spec.inverse
+                        inverse: this._spec.inverse,
+                        customLayout: this._spec.customLayout
                     },
                     level: TransformLevel.sankeyLayout
                 });
@@ -92710,6 +92730,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 'linkOverlap',
                 'iterations',
                 'nodeKey',
+                'depthKey',
                 'linkSortBy',
                 'nodeSortBy',
                 'setNodeLayer',
@@ -92717,7 +92738,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 'link',
                 'emphasis',
                 'inverse',
-                'overflow'
+                'overflow',
+                'customLayout'
             ]);
             return series;
         }
@@ -97500,8 +97522,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory$1.registerComponent(DataZoom.type, DataZoom);
     };
 
-    const SCROLLBAR_EVENT = 'scrollDrag';
-    const SCROLLBAR_END_EVENT = 'scrollUp';
+    const SCROLLBAR_EVENT$1 = 'scrollDrag';
+    const SCROLLBAR_END_EVENT$1 = 'scrollUp';
     class ScrollBar extends DataFilterBaseComponent {
         constructor(spec, options) {
             var _a;
@@ -97571,11 +97593,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             else {
                 const container = this.getContainer();
                 this._component = new ScrollBar$1(attrs);
-                this._component.addEventListener(SCROLLBAR_EVENT, (e) => {
+                this._component.addEventListener(SCROLLBAR_EVENT$1, (e) => {
                     const value = e.detail.value;
                     this._handleChange(value[0], value[1]);
                 });
-                this._component.addEventListener(SCROLLBAR_END_EVENT, (e) => {
+                this._component.addEventListener(SCROLLBAR_END_EVENT$1, (e) => {
                     const value = e.detail.value;
                     this._handleChange(value[0], value[1]);
                 });
@@ -104669,6 +104691,231 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerChartPlugin(MediaQuery);
     };
 
+    const SCROLLBAR_EVENT = 'scrollDrag';
+    const SCROLLBAR_END_EVENT = 'scrollUp';
+    const DefaultTheme = {
+        size: 10,
+        railStyle: undefined,
+        sliderStyle: undefined
+    };
+    class ScrollPlugin extends BasePlugin {
+        constructor() {
+            super(ScrollPlugin.type);
+            this.type = 'chartScroll';
+            this.name = ScrollPlugin.type;
+            this._lastScrollX = 0;
+            this._lastScrollY = 0;
+            this._scrollLimit = {
+                x: {
+                    min: 0,
+                    max: 0,
+                    size: 0,
+                    percent: 0
+                },
+                y: {
+                    min: 0,
+                    max: 0,
+                    size: 0,
+                    percent: 0
+                }
+            };
+            this.onWheel = (e) => {
+                var _a, _b;
+                const scrollX = e.deltaX;
+                const scrollY = e.deltaY;
+                const rootMark = this.getRootMark();
+                if (!rootMark) {
+                    return;
+                }
+                const { percent: yPercent, y } = (_a = this._computeFinalScrollY(rootMark.attribute.y - scrollY)) !== null && _a !== void 0 ? _a : {};
+                const { percent: xPercent, x } = (_b = this._computeFinalScrollX(rootMark.attribute.x - scrollX)) !== null && _b !== void 0 ? _b : {};
+                const eventResult = {};
+                if (isValidNumber$1(x)) {
+                    this._updateScrollX(rootMark, x, xPercent);
+                    eventResult.x = x;
+                }
+                if (isValidNumber$1(y)) {
+                    this._updateScrollY(rootMark, y, yPercent);
+                    eventResult.y = y;
+                }
+                this._event.emit('chartScroll', eventResult);
+            };
+        }
+        onInit(service, chartSpec) {
+            var _a;
+            this._spec = (_a = chartSpec[ScrollPlugin.type]) !== null && _a !== void 0 ? _a : {};
+            this._service = service;
+            this._bindEvent(service);
+        }
+        onLayoutRectUpdate(service) {
+            const viewBoxSize = service.globalInstance.getChart().getViewRect();
+            const canvasSize = service.globalInstance.getChart().getCanvasRect();
+            this._scrollLimit.x.min = Math.min(canvasSize.width - viewBoxSize.width, 0);
+            this._scrollLimit.x.percent = Math.abs(canvasSize.width / viewBoxSize.width);
+            this._scrollLimit.x.size = viewBoxSize.width;
+            this._scrollLimit.y.min = Math.min(canvasSize.height - viewBoxSize.height, 0);
+            this._scrollLimit.y.percent = Math.abs(canvasSize.height / viewBoxSize.height);
+            this._scrollLimit.y.size = viewBoxSize.height;
+            if (!this._event) {
+                this._event = new Event$1(this._service.globalInstance.getChart().getOption().eventDispatcher, null);
+            }
+        }
+        onAfterRender() {
+            const rootMark = this.getRootMark();
+            if (rootMark) {
+                if (!this._xScrollComponent) {
+                    this._updateScrollX(rootMark, 0, 0);
+                }
+                if (!this._yScrollComponent) {
+                    this._updateScrollY(rootMark, 0, 0);
+                }
+            }
+        }
+        release() {
+            var _a;
+            (_a = this._service.globalInstance.getStage()) === null || _a === void 0 ? void 0 : _a.off('wheel', this.onWheel);
+        }
+        _bindEvent(service) {
+            var _a;
+            (_a = service.globalInstance.getStage()) === null || _a === void 0 ? void 0 : _a.on('wheel', this.onWheel);
+        }
+        getRootMark() {
+            var _a;
+            return (_a = this._service.globalInstance.getStage()) === null || _a === void 0 ? void 0 : _a.find(node => node.name === 'root', true);
+        }
+        _computeFinalScrollY(y) {
+            var _a;
+            if (this._lastScrollY === y) {
+                return null;
+            }
+            this._lastScrollY = y;
+            if (((_a = this._spec.y) === null || _a === void 0 ? void 0 : _a.enable) === false) {
+                return null;
+            }
+            const finalY = Math.max(this._scrollLimit.y.min, Math.min(y, this._scrollLimit.y.max));
+            const percent = Math.abs(finalY / this._scrollLimit.y.size);
+            return {
+                y: finalY,
+                percent
+            };
+        }
+        _computeFinalScrollX(x) {
+            var _a;
+            if (this._lastScrollX === x) {
+                return null;
+            }
+            this._lastScrollX = x;
+            if (((_a = this._spec.x) === null || _a === void 0 ? void 0 : _a.enable) === false) {
+                return null;
+            }
+            const finalX = Math.max(this._scrollLimit.x.min, Math.min(x, this._scrollLimit.x.max));
+            const percent = Math.abs(finalX / this._scrollLimit.x.size);
+            return {
+                x: finalX,
+                percent
+            };
+        }
+        _updateScrollY(rootMark, y, percent) {
+            const yScrollComponent = this._getYScrollComponent();
+            yScrollComponent.setAttribute('range', [percent, percent + this._scrollLimit.y.percent]);
+            rootMark.setAttributes({
+                y: y
+            });
+        }
+        _getYScrollComponent() {
+            var _a, _b, _c, _d, _e;
+            if (!this._yScrollComponent) {
+                const canvasSize = this._service.globalInstance.getChart().getCanvasRect();
+                const viewSize = this._service.globalInstance.getChart().getViewRect();
+                const _f = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : {}, rest = __rest$e(_f, ["enable"]);
+                this._yScrollComponent = new ScrollBar$1(Object.assign(Object.assign({}, rest), { zIndex: 9999, x: canvasSize.width - DefaultTheme.size, y: 0, width: DefaultTheme.size, height: canvasSize.height, range: [0, canvasSize.height / viewSize.height], direction: 'vertical', delayTime: (_c = rest === null || rest === void 0 ? void 0 : rest.delayTime) !== null && _c !== void 0 ? _c : 30, realTime: (_d = rest === null || rest === void 0 ? void 0 : rest.realTime) !== null && _d !== void 0 ? _d : true, railStyle: DefaultTheme.railStyle, sliderStyle: DefaultTheme.sliderStyle }));
+                this._yScrollComponent.addEventListener(SCROLLBAR_EVENT, (e) => {
+                    var _a;
+                    const value = e.detail.value;
+                    const { percent, y } = (_a = this._computeFinalScrollY(-value[0] * this._scrollLimit.y.size)) !== null && _a !== void 0 ? _a : {};
+                    if (percent !== undefined && y !== undefined) {
+                        this._updateScrollY(this.getRootMark(), y, percent);
+                        this._event.emit('chartScroll', { y });
+                    }
+                });
+                this._yScrollComponent.addEventListener(SCROLLBAR_END_EVENT, (e) => {
+                    var _a;
+                    const value = e.detail.value;
+                    const { percent, y } = (_a = this._computeFinalScrollY(-value[0] * this._scrollLimit.y.size)) !== null && _a !== void 0 ? _a : {};
+                    if (percent !== undefined && y !== undefined) {
+                        this._updateScrollY(this.getRootMark(), y, percent);
+                        this._event.emit('chartScroll', { y });
+                    }
+                });
+                (_e = this.getRootMark().parent) === null || _e === void 0 ? void 0 : _e.addChild(this._yScrollComponent);
+            }
+            return this._yScrollComponent;
+        }
+        _updateScrollX(rootMark, x, percent) {
+            const xScrollComponent = this._getXScrollComponent();
+            xScrollComponent.setAttribute('range', [percent, percent + this._scrollLimit.x.percent]);
+            rootMark.setAttributes({
+                x: x
+            });
+        }
+        _getXScrollComponent() {
+            var _a, _b, _c, _d, _e;
+            if (!this._xScrollComponent) {
+                const canvasSize = this._service.globalInstance.getChart().getCanvasRect();
+                const viewSize = this._service.globalInstance.getChart().getViewRect();
+                const _f = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : {}, rest = __rest$e(_f, ["enable"]);
+                this._xScrollComponent = new ScrollBar$1(Object.assign(Object.assign({}, rest), { zIndex: 9999, x: 0, y: canvasSize.height - DefaultTheme.size, width: canvasSize.width, height: DefaultTheme.size, range: [0, canvasSize.width / viewSize.width], direction: 'horizontal', delayTime: (_c = rest === null || rest === void 0 ? void 0 : rest.delayTime) !== null && _c !== void 0 ? _c : 30, realTime: (_d = rest === null || rest === void 0 ? void 0 : rest.realTime) !== null && _d !== void 0 ? _d : true, sliderStyle: DefaultTheme.sliderStyle, railStyle: DefaultTheme.railStyle }));
+                this._xScrollComponent.addEventListener(SCROLLBAR_EVENT, (e) => {
+                    var _a;
+                    const value = e.detail.value;
+                    const { percent, x } = (_a = this._computeFinalScrollX(-value[0] * this._scrollLimit.x.size)) !== null && _a !== void 0 ? _a : {};
+                    if (percent !== undefined && x !== undefined) {
+                        this._updateScrollX(this.getRootMark(), x, percent);
+                        this._event.emit('chartScroll', { x });
+                    }
+                });
+                this._xScrollComponent.addEventListener(SCROLLBAR_END_EVENT, (e) => {
+                    var _a;
+                    const value = e.detail.value;
+                    const { percent, x } = (_a = this._computeFinalScrollX(-value[0] * this._scrollLimit.x.size)) !== null && _a !== void 0 ? _a : {};
+                    if (percent !== undefined && x !== undefined) {
+                        this._updateScrollX(this.getRootMark(), x, percent);
+                        this._event.emit('chartScroll', { x });
+                    }
+                });
+                (_e = this.getRootMark().parent) === null || _e === void 0 ? void 0 : _e.addChild(this._xScrollComponent);
+            }
+            return this._xScrollComponent;
+        }
+        scrollTo({ x, y }) {
+            var _a, _b;
+            const rootMark = this.getRootMark();
+            if (rootMark) {
+                if (x !== undefined) {
+                    const { x: finalX, percent } = (_a = this._computeFinalScrollX(x)) !== null && _a !== void 0 ? _a : {};
+                    if (finalX !== undefined && percent !== undefined) {
+                        this._updateScrollX(rootMark, finalX, percent);
+                    }
+                }
+                if (y !== undefined) {
+                    const { y: finalY, percent } = (_b = this._computeFinalScrollY(y)) !== null && _b !== void 0 ? _b : {};
+                    if (finalY !== undefined && percent !== undefined) {
+                        this._updateScrollY(rootMark, finalY, percent);
+                    }
+                }
+            }
+        }
+    }
+    ScrollPlugin.pluginType = 'chart';
+    ScrollPlugin.type = 'chartScroll';
+    const registerScrollPlugin = (theme) => {
+        var _a, _b, _c, _d, _e;
+        DefaultTheme.size = (_a = theme === null || theme === void 0 ? void 0 : theme.size) !== null && _a !== void 0 ? _a : DefaultTheme.size;
+        DefaultTheme.railStyle = merge$1({}, (_b = DefaultTheme.railStyle) !== null && _b !== void 0 ? _b : {}, (_c = theme === null || theme === void 0 ? void 0 : theme.railStyle) !== null && _c !== void 0 ? _c : {});
+        DefaultTheme.sliderStyle = merge$1({}, (_d = DefaultTheme.sliderStyle) !== null && _d !== void 0 ? _d : {}, (_e = theme === null || theme === void 0 ? void 0 : theme.sliderStyle) !== null && _e !== void 0 ? _e : {});
+        registerChartPlugin(ScrollPlugin);
+    };
+
     exports.Arc3dMark = Arc3dMark;
     exports.ArcMark = ArcMark;
     exports.AreaChart = AreaChart;
@@ -104821,6 +105068,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.ScatterChart = ScatterChart;
     exports.ScatterSeries = ScatterSeries;
     exports.ScrollBar = ScrollBar;
+    exports.ScrollPlugin = ScrollPlugin;
     exports.SequenceChart = SequenceChart;
     exports.StreamLight = StreamLight;
     exports.SunburstChart = SunburstChart;
@@ -105009,6 +105257,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.registerScatterChart = registerScatterChart;
     exports.registerScatterSeries = registerScatterSeries;
     exports.registerScrollBar = registerScrollBar;
+    exports.registerScrollPlugin = registerScrollPlugin;
     exports.registerSequenceChart = registerSequenceChart;
     exports.registerSunBurstSeries = registerSunBurstSeries;
     exports.registerSunburstChart = registerSunburstChart;