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

package/build/index.es.js

@@ -31833,8 +31833,8 @@ const DEFAULT_HTML_TEXT_SPEC = {
   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"];
@@ -31929,7 +31929,7 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
         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();
@@ -31957,7 +31957,7 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
         }, !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
     });
@@ -32196,7 +32196,7 @@ let ScrollBarPlugin = ScrollBarPlugin_1 = class {
       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) {
@@ -62888,6 +62888,9 @@ class ChartPluginService extends BasePluginService {
         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);
@@ -63048,6 +63051,9 @@ class VChart {
     getDataSet() {
         return this._dataSet;
     }
+    get chartPlugin() {
+        return this._chartPlugin;
+    }
     constructor(spec, options) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         this.id = createID();
@@ -64268,7 +64274,7 @@ const registerVChartCore = () => {
 };
 registerVChartCore();
 
-const version = "1.13.21-alpha.1";
+const version = "1.13.21-alpha.3";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -85797,7 +85803,10 @@ class SankeyLayout {
     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;
@@ -85902,11 +85911,12 @@ class SankeyLayout {
     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,
@@ -86024,7 +86034,7 @@ class SankeyLayout {
     }
   }
   computeNodeDepths(nodes) {
-    var _a;
+    var _a, _b;
     const n = nodes.length;
     let next,
       nextMap,
@@ -86036,9 +86046,12 @@ class SankeyLayout {
       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;
@@ -86442,7 +86455,12 @@ const sankeyLayout = (data, op) => {
     }
     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;
 };
 
@@ -86762,6 +86780,7 @@ class SankeySeries extends CartesianSeries {
                     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,
@@ -86770,7 +86789,8 @@ class SankeySeries extends CartesianSeries {
                     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
             });
@@ -92704,6 +92724,7 @@ class SankeyChartSpecTransformer extends BaseChartSpecTransformer {
             'linkOverlap',
             'iterations',
             'nodeKey',
+            'depthKey',
             'linkSortBy',
             'nodeSortBy',
             'setNodeLayer',
@@ -92711,7 +92732,8 @@ class SankeyChartSpecTransformer extends BaseChartSpecTransformer {
             'link',
             'emphasis',
             'inverse',
-            'overflow'
+            'overflow',
+            'customLayout'
         ]);
         return series;
     }
@@ -97494,8 +97516,8 @@ const registerDataZoom = () => {
     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;
@@ -97565,11 +97587,11 @@ class ScrollBar extends DataFilterBaseComponent {
         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]);
             });
@@ -104663,4 +104685,229 @@ const registerMediaQuery = () => {
     registerChartPlugin(MediaQuery);
 };
 
-export { Arc3dMark, ArcMark, AreaChart, AreaMark, AreaSeries, AttributeLevel, AxisSyncPlugin, Bar3dChart, Bar3dSeries, BarChart, BarSeries, BaseChart, BaseChartSpecTransformer, BaseMark, BaseSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, ComponentMark, ComposedEventMapper, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, DiscreteLegend, DomTooltipHandler, DotSeries, Event$1 as Event, Factory$1 as Factory, FormatterPlugin, Funnel3dChart, Funnel3dSeries, FunnelChart, FunnelSeries, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, Histogram3dChart, HistogramChart, ImageMark, Indicator, Label, Layout$1 as Layout, Layout3d, LineChart, LineMark, LineSeries, LinearProgressChart, LinearProgressSeries, LinkPathMark, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, ManualTicker, MapChart, MapLabelComponent, MapSeries, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PictogramChart, PictogramSeries, Pie3dChart, Pie3dSeries, PieChart, PieSeries, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, ProgressLikeSeries, Pyramid3dMark, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumn3dChart, RangeColumn3dSeries, RangeColumnChart, RangeColumnSeries, Rect3dMark, RectMark, RenderModeEnum, RippleMark, RoseChart, RoseLikeSeries, RoseSeries, RuleMark, SEGMENT_FIELD_END, SEGMENT_FIELD_START, STACK_FIELD_END, STACK_FIELD_END_OffsetSilhouette, STACK_FIELD_END_PERCENT, STACK_FIELD_KEY, STACK_FIELD_START, STACK_FIELD_START_OffsetSilhouette, STACK_FIELD_START_PERCENT, STACK_FIELD_TOTAL, STACK_FIELD_TOTAL_BOTTOM, STACK_FIELD_TOTAL_PERCENT, STACK_FIELD_TOTAL_TOP, STATE_VALUE_ENUM, STATE_VALUE_ENUM_REVERSE, SankeyChart, SankeyChartSpecTransformer, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, StreamLight, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager$1 as ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TreemapChart, TreemapSeries, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloud3dChart, WordCloud3dSeries, WordCloudChart, WordCloudSeries, alternatingWave, builtinThemes, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createSymbol, createText, darkTheme$1 as darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, functionTransform, getActualColor, getCartesianDimensionInfo, getColorSchemeBySeries, getDataScheme, getFieldAlias, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getTheme, hasThemeMerged, isColorKey, isProgressiveDataColorScheme, isTokenKey, lightTheme, mergeFields, particleEffect, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, register3DPlugin, registerAllEnv, registerAllMarks, registerAnimate, registerArc3dMark, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBar3dChart, registerBar3dSeries, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomMark, registerDataSetInstanceParser, registerDataSetInstanceTransform, registerDataZoom, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerFormatPlugin, registerFunnel3dChart, registerFunnel3dSeries, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGridLayout, registerGroupMark, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogram3dChart, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLayout3d, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkPathMark, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapLabel, registerMapSeries, registerMarkArea, registerMarkLine, registerMarkPoint, registerMediaQuery, registerMorph, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPictogramChart, registerPictogramSeries, registerPie3dChart, registerPie3dSeries, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonMark, registerPoptip, registerPyramid3dMark, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumn3dChart, registerRangeColumn3dSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRect3dMark, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloud3dChart, registerWordCloud3dSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, snakeWave, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, version, vglobal };
+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);
+};
+
+export { Arc3dMark, ArcMark, AreaChart, AreaMark, AreaSeries, AttributeLevel, AxisSyncPlugin, Bar3dChart, Bar3dSeries, BarChart, BarSeries, BaseChart, BaseChartSpecTransformer, BaseMark, BaseSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, ComponentMark, ComposedEventMapper, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, DiscreteLegend, DomTooltipHandler, DotSeries, Event$1 as Event, Factory$1 as Factory, FormatterPlugin, Funnel3dChart, Funnel3dSeries, FunnelChart, FunnelSeries, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, Histogram3dChart, HistogramChart, ImageMark, Indicator, Label, Layout$1 as Layout, Layout3d, LineChart, LineMark, LineSeries, LinearProgressChart, LinearProgressSeries, LinkPathMark, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, ManualTicker, MapChart, MapLabelComponent, MapSeries, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PictogramChart, PictogramSeries, Pie3dChart, Pie3dSeries, PieChart, PieSeries, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, ProgressLikeSeries, Pyramid3dMark, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumn3dChart, RangeColumn3dSeries, RangeColumnChart, RangeColumnSeries, Rect3dMark, RectMark, RenderModeEnum, RippleMark, RoseChart, RoseLikeSeries, RoseSeries, RuleMark, SEGMENT_FIELD_END, SEGMENT_FIELD_START, STACK_FIELD_END, STACK_FIELD_END_OffsetSilhouette, STACK_FIELD_END_PERCENT, STACK_FIELD_KEY, STACK_FIELD_START, STACK_FIELD_START_OffsetSilhouette, STACK_FIELD_START_PERCENT, STACK_FIELD_TOTAL, STACK_FIELD_TOTAL_BOTTOM, STACK_FIELD_TOTAL_PERCENT, STACK_FIELD_TOTAL_TOP, STATE_VALUE_ENUM, STATE_VALUE_ENUM_REVERSE, SankeyChart, SankeyChartSpecTransformer, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, ScrollPlugin, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, StreamLight, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager$1 as ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TreemapChart, TreemapSeries, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloud3dChart, WordCloud3dSeries, WordCloudChart, WordCloudSeries, alternatingWave, builtinThemes, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createSymbol, createText, darkTheme$1 as darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, functionTransform, getActualColor, getCartesianDimensionInfo, getColorSchemeBySeries, getDataScheme, getFieldAlias, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getTheme, hasThemeMerged, isColorKey, isProgressiveDataColorScheme, isTokenKey, lightTheme, mergeFields, particleEffect, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, register3DPlugin, registerAllEnv, registerAllMarks, registerAnimate, registerArc3dMark, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBar3dChart, registerBar3dSeries, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomMark, registerDataSetInstanceParser, registerDataSetInstanceTransform, registerDataZoom, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerFormatPlugin, registerFunnel3dChart, registerFunnel3dSeries, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGridLayout, registerGroupMark, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogram3dChart, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLayout3d, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkPathMark, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapLabel, registerMapSeries, registerMarkArea, registerMarkLine, registerMarkPoint, registerMediaQuery, registerMorph, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPictogramChart, registerPictogramSeries, registerPie3dChart, registerPie3dSeries, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonMark, registerPoptip, registerPyramid3dMark, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumn3dChart, registerRangeColumn3dSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRect3dMark, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScatterChart, registerScatterSeries, registerScrollBar, registerScrollPlugin, registerSequenceChart, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloud3dChart, registerWordCloud3dSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, snakeWave, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, version, vglobal };