@visactor/vchart 1.12.1-alpha.0 → 1.12.2-alpha.0

package/build/index.js

@@ -591,7 +591,7 @@
           const length = objValue.length;
           for (; ++index < length;) newValue[index] = objValue[index];
         }
-      } else isPlainObject$1(srcValue) ? (newValue = objValue, "function" != typeof objValue && "object" == typeof objValue || (newValue = {})) : isCommon = !1;
+      } else isPlainObject$1(srcValue) ? (newValue = null != objValue ? objValue : {}, "function" != typeof objValue && "object" == typeof objValue || (newValue = {})) : isCommon = !1;
       isCommon && baseMerge(newValue, srcValue, shallowArray, skipTargetArray), assignMergeValue(target, key, newValue);
     }
     function assignMergeValue(target, key, value) {
@@ -24587,6 +24587,16 @@
       Factory$2.registerPlugin("ViewTransform3dPlugin", ViewTransform3dPlugin);
     };
 
+    function combineArray(arr) {
+        const uniqueValues = new Set();
+        arr.forEach(subArray => {
+            subArray.forEach(value => {
+                uniqueValues.add(value);
+            });
+        });
+        return Array.from(uniqueValues);
+    }
+
     const warn = (msg, detail) => {
         if (isFunction$1(config.warnHandler)) {
             config.warnHandler.call(null, msg, detail);
@@ -33236,7 +33246,7 @@
 
     var AXIS_ELEMENT_NAME;
     !function (AXIS_ELEMENT_NAME) {
-      AXIS_ELEMENT_NAME.innerView = "inner-view", AXIS_ELEMENT_NAME.axisContainer = "axis-container", AXIS_ELEMENT_NAME.labelContainer = "axis-label-container", AXIS_ELEMENT_NAME.tickContainer = "axis-tick-container", AXIS_ELEMENT_NAME.tick = "axis-tick", AXIS_ELEMENT_NAME.subTick = "axis-sub-tick", AXIS_ELEMENT_NAME.label = "axis-label", AXIS_ELEMENT_NAME.title = "axis-title", AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", AXIS_ELEMENT_NAME.grid = "axis-grid", AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", AXIS_ELEMENT_NAME.line = "axis-line", AXIS_ELEMENT_NAME.background = "axis-background", AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background";
+      AXIS_ELEMENT_NAME.innerView = "inner-view", AXIS_ELEMENT_NAME.axisContainer = "axis-container", AXIS_ELEMENT_NAME.labelContainer = "axis-label-container", AXIS_ELEMENT_NAME.tickContainer = "axis-tick-container", AXIS_ELEMENT_NAME.tick = "axis-tick", AXIS_ELEMENT_NAME.subTick = "axis-sub-tick", AXIS_ELEMENT_NAME.label = "axis-label", AXIS_ELEMENT_NAME.title = "axis-title", AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", AXIS_ELEMENT_NAME.grid = "axis-grid", AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", AXIS_ELEMENT_NAME.line = "axis-line", AXIS_ELEMENT_NAME.background = "axis-background", AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background", AXIS_ELEMENT_NAME.axisBreakSymbol = "axis-break-symbol";
     }(AXIS_ELEMENT_NAME || (AXIS_ELEMENT_NAME = {}));
     var AxisStateValue;
     !function (AxisStateValue) {
@@ -33303,6 +33313,12 @@
         }
       }
     };
+    const DEFAULT_AXIS_BREAK_SYMBOL_STYLE = {
+      size: 8,
+      stroke: "#000",
+      lineWidth: 1,
+      zIndex: 1
+    };
 
     const clampRadian = function () {
       let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -33334,6 +33350,19 @@
         y: baseY - dy
       };
     }
+    function getAxisBreakSymbolAttrs() {
+      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var _a, _b;
+      const {
+          style = {}
+        } = props,
+        symbolStyle = merge$2({}, DEFAULT_AXIS_BREAK_SYMBOL_STYLE, style),
+        symbolSize = null !== (_a = symbolStyle.size) && void 0 !== _a ? _a : DEFAULT_AXIS_BREAK_SYMBOL_STYLE.size;
+      return Object.assign(Object.assign({}, symbolStyle), {
+        symbolType: null !== (_b = symbolStyle.symbolType) && void 0 !== _b ? _b : `M ${-symbolSize / 2} ${symbolSize / 6} L ${symbolSize / 2} ${-symbolSize / 6}`,
+        symbolSize: symbolSize
+      });
+    }
     function getElMap(g) {
       const elMap = {};
       return traverseGroup(g, el => {
@@ -34024,7 +34053,37 @@
       }
       _renderInner(container) {
         var _a;
-        super._renderInner(container);
+        this.attribute.breaks && this.attribute.breaks.length && (this._breaks = this.attribute.breaks.sort((preBreak, currBreak) => preBreak.range[0] - currBreak.range[1]).map(breakProps => {
+          const {
+            range: range,
+            breakSymbol: breakSymbol
+          } = breakProps;
+          return {
+            startPoint: this.getTickCoord(range[0]),
+            endPoint: this.getTickCoord(range[1]),
+            range: range,
+            breakSymbol: breakSymbol
+          };
+        })), super._renderInner(container), this._breaks && this._breaks.length && this._breaks.forEach(b => {
+          const {
+            startPoint: startPoint,
+            endPoint: endPoint,
+            breakSymbol: breakSymbol
+          } = b;
+          if (!1 !== (null == breakSymbol ? void 0 : breakSymbol.visible)) {
+            const symbolStyle = getAxisBreakSymbolAttrs(breakSymbol),
+              shape1 = graphicCreator.symbol(Object.assign({
+                x: startPoint.x,
+                y: startPoint.y
+              }, symbolStyle));
+            shape1.name = AXIS_ELEMENT_NAME.axisBreakSymbol;
+            const shape2 = graphicCreator.symbol(Object.assign({
+              x: endPoint.x,
+              y: endPoint.y
+            }, symbolStyle));
+            shape2.name = AXIS_ELEMENT_NAME.axisBreakSymbol, container.add(shape1), container.add(shape2);
+          }
+        });
         const {
           panel: panel
         } = this.attribute;
@@ -34051,18 +34110,25 @@
             startSymbol: startSymbol,
             endSymbol: endSymbol,
             style: style,
-            breakRange: breakRange,
-            breakShape: breakShape,
-            breakShapeStyle: breakShapeStyle,
             state: state
           } = _a,
-          restLineAttrs = __rest$4(_a, ["startSymbol", "endSymbol", "style", "breakRange", "breakShape", "breakShapeStyle", "state"]),
+          restLineAttrs = __rest$4(_a, ["startSymbol", "endSymbol", "style", "state"]),
           lineAttrs = Object.assign({
-            points: [start, end],
             startSymbol: startSymbol,
             endSymbol: endSymbol,
             lineStyle: style
           }, restLineAttrs);
+        if (this._breaks && this._breaks.length) {
+          const linePoints = [];
+          let lastStartPoint = start;
+          this._breaks.forEach(b => {
+            const {
+              startPoint: startPoint,
+              endPoint: endPoint
+            } = b;
+            linePoints.push([lastStartPoint, startPoint]), lastStartPoint = endPoint;
+          }), linePoints.push([lastStartPoint, end]), lineAttrs.points = linePoints, lineAttrs.multiSegment = !0;
+        } else lineAttrs.points = [start, end];
         isEmpty(state) || (lineAttrs.state = {
           line: merge$2({}, DEFAULT_STATES$1, state),
           symbol: merge$2({}, DEFAULT_STATES$1, state)
@@ -35669,7 +35735,34 @@
       }
     }
 
+    function getScaleTicks(op, scale, count, getTicks) {
+      let scaleTicks;
+      const {
+        breakData: breakData
+      } = op;
+      if (breakData) {
+        const {
+            scope: scope,
+            range: breakRanges
+          } = breakData(),
+          domain = scale.domain();
+        scaleTicks = [];
+        for (let i = 0; i < domain.length; i++) if (i < domain.length - 1) {
+          const range = [domain[i], domain[i + 1]],
+            [start, end] = scope[i],
+            subCount = (end - start) * count;
+          if (subCount > 0) {
+            getTicks(subCount > 1 ? Math.floor(subCount) : 1, range).forEach(tick => {
+              breakRanges.some(breakRange => tick >= breakRange[0] && tick <= breakRange[1]) || scaleTicks.push(tick);
+            });
+          }
+        }
+        scale.domain(domain);
+      } else scaleTicks = getTicks(count);
+      return scaleTicks;
+    }
     const continuousTicks = (scale, op) => {
+      var _a, _b;
       if (!isContinuous(scale.type)) return convertDomainToTickData(scale.domain());
       const range = scale.range(),
         rangeSize = Math.abs(range[range.length - 1] - range[0]);
@@ -35679,27 +35772,33 @@
         forceTickCount: forceTickCount,
         tickStep: tickStep,
         noDecimals = !1,
-        labelStyle: labelStyle
+        labelStyle: labelStyle,
+        breakData: breakData
       } = op;
       let scaleTicks;
-      if (isValid$1(tickStep)) scaleTicks = scale.stepTicks(tickStep);else if (isValid$1(forceTickCount)) scaleTicks = scale.forceTicks(forceTickCount);else if ("d3" === op.tickMode) {
-        const count = isFunction$1(tickCount) ? tickCount({
+      if (isValid$1(tickStep)) scaleTicks = scale.stepTicks(tickStep);else if (isValid$1(forceTickCount)) scaleTicks = getScaleTicks(op, scale, forceTickCount, (count, range) => range && range.length ? scale.domain(range).forceTicks(count) : scale.forceTicks(count));else if ("d3" === op.tickMode) {
+        const count = null !== (_a = isFunction$1(tickCount) ? tickCount({
           axisLength: rangeSize,
           labelStyle: labelStyle
-        }) : tickCount;
-        scaleTicks = scale.d3Ticks(null != count ? count : 5, {
+        }) : tickCount) && void 0 !== _a ? _a : 5;
+        scaleTicks = getScaleTicks(op, scale, count, (count, range) => range && range.length ? scale.domain(range).d3Ticks(count, {
           noDecimals: noDecimals
-        });
+        }) : scale.d3Ticks(count, {
+          noDecimals: noDecimals
+        }));
       } else {
-        const count = isFunction$1(tickCount) ? tickCount({
+        const count = null !== (_b = isFunction$1(tickCount) ? tickCount({
             axisLength: rangeSize,
             labelStyle: labelStyle
-          }) : tickCount,
+          }) : tickCount) && void 0 !== _b ? _b : 5,
           customTicks = isFunction$1(op.tickMode) ? op.tickMode : void 0;
-        scaleTicks = scale.ticks(null != count ? count : 5, {
+        scaleTicks = getScaleTicks(op, scale, count, (count, range) => range && range.length ? scale.domain(range).ticks(count, {
           noDecimals: noDecimals,
           customTicks: customTicks
-        });
+        }) : scale.ticks(count, {
+          noDecimals: noDecimals,
+          customTicks: customTicks
+        }));
       }
       if (op.sampling && ("cartesian" === op.coordinateType || "polar" === op.coordinateType && "radius" === op.axisOrientType)) {
         const {
@@ -41285,6 +41384,15 @@
     const forwardStep = (direction, currentIndex, min, max) => "default" === direction ? Math.min(currentIndex + 1, max) : Math.max(currentIndex - 1, min);
 
     class BasePlayer extends AbstractComponent {
+      getMinIndex() {
+        return this._minIndex;
+      }
+      getMaxIndex() {
+        return this._maxIndex;
+      }
+      getDataIndex() {
+        return this._dataIndex;
+      }
       constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, BasePlayer.defaultAttributes, attributes)), this._data = [], this._dataIndex = 0, this._layoutInfo = {}, this._updateSliderAttrs = () => {
           var _a, _b;
@@ -54382,13 +54490,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return targetAxisInfo;
     };
     const getDimensionInfoByPosition = (axis, posValue, posKey, getDimensionField) => {
-        const scale = axis.getScale();
-        const scalePos = posValue - axis.getLayoutStartPoint()[posKey];
-        if ((scalePos - scale.range()[0]) * (scalePos - scale.range()[1]) > 0) {
-            return null;
-        }
-        const value = scale.invert(scalePos);
-        return getDimensionInfoByValue(axis, value, getDimensionField);
+        const value = axis.positionToData(posValue, true);
+        return isNil$1(value) ? null : getDimensionInfoByValue(axis, value, getDimensionField);
     };
     const getDimensionInfoByValue = (axis, value, getDimensionField) => {
         const scale = axis.getScale();
@@ -55135,7 +55238,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         if (_deep) {
             return cloneDeep(d.latestData);
         }
-        return d.latestData.slice();
+        return d.latestData && d.latestData.slice();
     }
     const copyDataView = (data, options) => {
         if (data.length === 0) {
@@ -60732,11 +60835,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.12.1-alpha.0";
+    const version = "1.12.2-alpha.0";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
-        data.forEach((d, i) => op.call(d, i, context));
+        data && data.forEach((d, i) => op.call(d, i, context));
         if (context.keyMap) {
             context.keyMap.clear();
             context.keyMap = null;
@@ -61028,11 +61131,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const isNumberField = operations.some(op => op === 'min' || op === 'max' || op === 'allValid');
             let allValid = true;
             fValues.length = 0;
-            latestData.forEach((d) => {
-                if (d) {
-                    fValues.push(d[key]);
-                }
-            });
+            latestData &&
+                latestData.forEach((d) => {
+                    if (d) {
+                        fValues.push(d[key]);
+                    }
+                });
             const len = fValues.length;
             if (isNumberField) {
                 nextFValues.length = 0;
@@ -63644,13 +63748,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     function isValidAlignDomain(domain) {
-        return domain.length === 2 && isValidNumber$1(domain[0]) && isValidNumber$1(domain[1]) && domain[1] >= domain[0];
+        return domain.length === 2 && isValidNumber$1(domain[0]) && isValidNumber$1(last(domain)) && last(domain) >= domain[0];
     }
     function getScaleInfo(axis, domain) {
-        const total = domain[1] - domain[0];
-        const includeZero = domain[1] * domain[0] < 0;
+        const total = last(domain) - domain[0];
+        const includeZero = last(domain) * domain[0] < 0;
         let negative = domain[0] <= 0 ? 0 - domain[0] : 0;
-        let positive = domain[1] > 0 ? domain[1] - 0 : 0;
+        let positive = last(domain) > 0 ? last(domain) - 0 : 0;
         if (total === 0) {
             if (domain[0] < 0) {
                 negative = 1;
@@ -63885,12 +63989,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return data;
         }
         const targetDomain = targetScale.domain();
-        const targetRange = targetDomain[1] - targetDomain[0];
+        const targetRange = last(targetDomain) - targetDomain[0];
         if (targetRange === 0) {
             return data;
         }
         const currentDomain = currentScale.domain();
-        const currentRange = currentDomain[1] - currentDomain[0];
+        const currentRange = last(currentDomain) - currentDomain[0];
         if (targetRange === 0) {
             return data;
         }
@@ -64510,10 +64614,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                     else if (viewData && viewData.latestData && viewData.latestData.length) {
                         const seriesData = (_a = s.getViewDataStatistics) === null || _a === void 0 ? void 0 : _a.call(s);
+                        const userSetBreaks = this.type === ComponentTypeEnum.cartesianLinearAxis && this._spec.breaks && this._spec.breaks.length;
                         field.forEach(f => {
                             var _a;
                             if ((_a = seriesData === null || seriesData === void 0 ? void 0 : seriesData.latestData) === null || _a === void 0 ? void 0 : _a[f]) {
-                                data.push(seriesData.latestData[f]);
+                                if (userSetBreaks) {
+                                    data.push(Object.assign(Object.assign({}, seriesData.latestData[f]), { values: viewData.latestData.map((obj) => obj[f]) }));
+                                }
+                                else {
+                                    data.push(seriesData.latestData[f]);
+                                }
                             }
                         });
                     }
@@ -64984,7 +65094,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                 ? (_a = item
                                     .getTickData()
                                     .getLatestData()) === null || _a === void 0 ? void 0 : _a.find((d) => d.value === 0)
-                                : item.getScale().domain()[0] <= 0 && item.getScale().domain()[1] >= 0));
+                                : item.getScale().domain()[0] <= 0 && last(item.getScale().domain()) >= 0));
                     };
                     const relativeAxes = axesComponents.filter(item => isValidAxis(item));
                     if (relativeAxes.length) {
@@ -65090,8 +65200,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         setLayout3dBox(box3d) {
             this.layout3dBox = box3d;
         }
-        updateScaleRange() {
-            let isScaleChange = false;
+        getNewScaleRange() {
             const { width, height } = this.getLayoutRect();
             const { left, right, top, bottom } = this._innerOffset;
             let newRange = [];
@@ -65111,8 +65220,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     newRange = this._inverse ? [top, height - bottom] : [height - bottom, top];
                 }
             }
-            const [start, end] = this._scale.range();
-            if (newRange[0] !== start || newRange[1] !== end) {
+            return newRange;
+        }
+        updateScaleRange() {
+            let isScaleChange = false;
+            const newRange = this.getNewScaleRange();
+            const range = this._scale.range();
+            if (newRange.length === range.length && newRange.every((value, index) => value === range[index])) {
+                isScaleChange = false;
+            }
+            else {
                 isScaleChange = true;
                 this._scale.range(newRange);
             }
@@ -65337,6 +65454,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return result;
         }
+        positionToData(pos, isViewPos) {
+            const isX = isXAxis(this.getOrient());
+            if (isViewPos) {
+                pos -= isX ? this.getLayoutStartPoint().x : this.getLayoutStartPoint().y;
+            }
+            if (this._innerOffset) {
+                pos = isX
+                    ? clamp$1(pos, this._innerOffset.left, this.getLayoutRect().width - this._innerOffset.right)
+                    : clamp$1(pos, this._innerOffset.top, this.getLayoutRect().height - this._innerOffset.bottom);
+            }
+            const range = this._scale.range();
+            if ((pos - range[0]) * (pos - last(range)) > 0) {
+                return null;
+            }
+            return this._scale.invert(pos);
+        }
         _getTitleLimit(isX) {
             var _a, _b, _c, _d, _e;
             if (this._spec.title.visible && isNil$1((_a = this._spec.title.style) === null || _a === void 0 ? void 0 : _a.maxLineWidth)) {
@@ -65466,12 +65599,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const tickLatestData = (_a = this.getTickData()) === null || _a === void 0 ? void 0 : _a.getLatestData();
             if (tickLatestData && tickLatestData.length) {
                 return [
-                    tickLatestData
-                        .map((obj) => {
+                    tickLatestData.map((obj) => {
                         const normalizedValue = this._getNormalizedValue([obj.value], length);
                         return getAxisItem(obj.value, normalizedValue);
                     })
-                        .filter((entry) => entry.value >= 0 && entry.value <= 1)
                 ];
             }
             return [];
@@ -65500,17 +65631,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             if (this._autoIndentOnce && this._hasAutoIndent) {
                 ['x1', 'x2', 'y1', 'y2'].forEach(key => {
-                    this.layout.getLastComputeOutBounds()[key] = this._layoutCache._lastComputeOutBounds[key];
+                    this.layout.getLastComputeOutBounds()[key] =
+                        this._layoutCache._lastComputeOutBounds[key];
                 });
             }
             else {
                 this._hasAutoIndent = true;
                 ['x1', 'x2', 'y1', 'y2'].forEach(key => {
-                    if (this.layout.getLastComputeOutBounds()[key] < this._layoutCache._lastComputeOutBounds[key]) {
-                        this.layout.getLastComputeOutBounds()[key] = this._layoutCache._lastComputeOutBounds[key];
+                    if (this.layout.getLastComputeOutBounds()[key] <
+                        this._layoutCache._lastComputeOutBounds[key]) {
+                        this.layout.getLastComputeOutBounds()[key] =
+                            this._layoutCache._lastComputeOutBounds[key];
                     }
                     else {
-                        this._layoutCache._lastComputeOutBounds[key] = this.layout.getLastComputeOutBounds()[key];
+                        this._layoutCache._lastComputeOutBounds[key] =
+                            this.layout.getLastComputeOutBounds()[key];
                     }
                 });
             }
@@ -65580,6 +65715,72 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     CartesianAxis.type = ComponentTypeEnum.cartesianAxis;
     CartesianAxis.specKey = 'axes';
 
+    const setDomain = (min, max, breaks) => breaks.reduce((r, b, i) => {
+        r.push([b, breaks.length === i + 1 ? max : breaks[i + 1]]);
+        return r;
+    }, [[min, breaks[0]]]);
+    function breakDomain(data, points) {
+        const min = data[0];
+        const max = data[data.length - 1];
+        const breaks = points.sort().filter(point => point > min && point < max);
+        return setDomain(min, max, breaks);
+    }
+    const sorter = (a, b) => a - b;
+    const fillBins = (data, points) => {
+        const bins = [0];
+        let i = 0;
+        let j = 0;
+        while (i < points.length) {
+            if (data[j] <= points[i]) {
+                bins[i] += 1;
+                j += 1;
+            }
+            else {
+                i += 1;
+                bins[i] = 0;
+            }
+        }
+        bins[i] = data.slice(j).length;
+        return bins;
+    };
+    function breakScope(data, points) {
+        const bins = fillBins(data, points);
+        const count = data.length;
+        return bins
+            .reduce((res, bin, i) => {
+            const last = res[i - 1] ? res[i - 1][1] : 0;
+            const next = (last * 100 + +(bin / count).toFixed(2) * 100) / 100;
+            res.push([last, next > 1 ? 1 : next > 0.95 ? 1 : next]);
+            return res;
+        }, [])
+            .filter(s => {
+            return !(s[0] === 0 && s[1] === 0) && !(s[0] === 1 && s[1] === 1);
+        });
+    }
+    function breakData(data, points) {
+        data.sort(sorter);
+        points.sort(sorter);
+        return {
+            domain: breakDomain(data, points),
+            scope: breakScope(data, points)
+        };
+    }
+    function mergeAndSortRanges(ranges) {
+        ranges.sort((a, b) => a[0] - b[0]);
+        const merged = [ranges[0]];
+        for (let index = 1; index < ranges.length; index++) {
+            const last = merged[merged.length - 1];
+            const range = ranges[index];
+            if (range[0] <= last[1]) {
+                last[1] = Math.max(last[1], range[1]);
+            }
+            else {
+                merged.push(range);
+            }
+        }
+        return merged;
+    }
+
     const e10 = Math.sqrt(50);
     const e5 = Math.sqrt(10);
     const e2 = Math.sqrt(2);
@@ -65671,13 +65872,60 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._scale.scale(value);
         }
         computeLinearDomain(data) {
-            const domain = [];
+            let domain = [];
             if (data.length) {
+                const userSetBreaks = this._spec.breaks && this._spec.breaks.length;
+                let values = [];
+                let minDomain;
+                let maxDomain;
                 data.forEach(d => {
                     const { min, max } = d;
-                    domain[0] = domain[0] === undefined ? min : Math.min(domain[0], min);
-                    domain[1] = domain[1] === undefined ? max : Math.max(domain[1], max);
+                    minDomain = minDomain === undefined ? min : Math.min(minDomain, min);
+                    maxDomain = maxDomain === undefined ? max : Math.max(maxDomain, max);
+                    if (userSetBreaks) {
+                        values = values.concat(d.values);
+                    }
                 });
+                if (userSetBreaks) {
+                    const breakRanges = mergeAndSortRanges(this._spec.breaks.map((breakSpec) => breakSpec.range));
+                    const breakDomains = [];
+                    const breakScopes = [];
+                    let source = [...values];
+                    for (let index = 0; index < breakRanges.length; index++) {
+                        const breakRange = breakRanges[index];
+                        const { domain, scope } = breakData(source, breakRange);
+                        let finalScope = scope;
+                        const finalDomain = domain;
+                        if (index > 0) {
+                            const lastRatio = last(breakScopes)[1];
+                            const restRarioRange = 1 - lastRatio;
+                            finalScope = scope.map(eachScope => {
+                                return [lastRatio + eachScope[0] * restRarioRange, lastRatio + eachScope[1] * restRarioRange];
+                            });
+                            finalDomain[0][0] = last(breakDomains)[1];
+                        }
+                        breakDomains.push(finalDomain[0]);
+                        breakDomains.push(finalDomain[1]);
+                        breakScopes.push(finalScope[0]);
+                        breakScopes.push(finalScope[1]);
+                        if (index === breakRanges.length - 1) {
+                            breakDomains.push(finalDomain[2]);
+                            breakScopes.push(finalScope[2]);
+                        }
+                        else {
+                            source = source.filter(val => val >= finalDomain[2][0]);
+                        }
+                    }
+                    domain = combineArray(breakDomains);
+                    this._break = {
+                        domain: breakDomains,
+                        scope: breakScopes,
+                        range: breakRanges
+                    };
+                }
+                else {
+                    domain = [minDomain, maxDomain];
+                }
             }
             else {
                 domain[0] = 0;
@@ -65724,7 +65972,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 num = Math.abs(num);
                 if (num < 1) {
                     domain[0] = 0;
-                    domain[1] = 1;
+                    domain[domain.length - 1] = 1;
                 }
                 else {
                     let step = num / DEFAULT_TICK_COUNT;
@@ -65732,12 +65980,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const err = step / Math.pow(10, power);
                     step = (err >= e10 ? 10 : err >= e5 ? 5 : err >= e2 ? 2 : 1) * Math.pow(10, power);
                     domain[0] = 0;
-                    domain[1] = step * 10;
+                    domain[domain.length - 1] = step * 10;
                 }
                 if (flag < 0) {
                     domain.reverse();
                     domain[0] *= -1;
-                    domain[1] *= -1;
+                    domain[domain.length - 1] *= -1;
                 }
             }
             return domain;
@@ -65787,7 +66035,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const { min, max } = this._domain;
             isValid$1(min) && (domain[0] = min);
-            isValid$1(max) && (domain[1] = max);
+            isValid$1(max) && (domain[domain.length - 1] = max);
         }
         setSoftDomainMinMax(domain) {
             const { softMin, softMax } = this._spec;
@@ -65804,10 +66052,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isValid$1(softMax)) {
                 let softMaxValue = isFunction$1(softMax) ? softMax(domain) : softMax;
                 if (isNil$1(softMaxValue)) {
-                    softMaxValue = domain[1];
+                    softMaxValue = domain[domain.length - 1];
                 }
-                if (softMaxValue >= domain[1]) {
-                    domain[1] = softMaxValue;
+                if (softMaxValue >= domain[domain.length - 1]) {
+                    domain[domain.length - 1] = softMaxValue;
                 }
                 this._softMaxValue = softMaxValue;
             }
@@ -65846,7 +66094,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._domainAfterSpec;
         }
         _updateNiceLabelFormatter(domain) {
-            const domainSpan = Math.abs(domain[1] - domain[0]);
+            const domainSpan = Math.abs(domain[domain.length - 1] - domain[0]);
             const n = Math.max(-Math.floor(Math.log10(domainSpan)), 0) + 2;
             const unit = Math.pow(10, n);
             this.niceLabelFormatter = (value) => {
@@ -65883,6 +66131,44 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._scale.domain(range);
         }
+        _tickTransformOption() {
+            var _a;
+            return Object.assign(Object.assign({}, super._tickTransformOption()), { breakData: ((_a = this._spec.breaks) === null || _a === void 0 ? void 0 : _a.length) ? () => this._break : null });
+        }
+        _getUpdateAttribute(ignoreGrid) {
+            var _a;
+            const attrs = super._getUpdateAttribute(ignoreGrid);
+            if (!isZAxis(this._orient) && ((_a = this._spec.breaks) === null || _a === void 0 ? void 0 : _a.length) && this._break) {
+                const { width, height } = this.getLayoutRect();
+                const isX = isXAxis(this._orient);
+                const axisLength = isX ? width : height;
+                attrs.breaks = this._spec.breaks.map(obj => {
+                    const { range, breakSymbol, gap = 6 } = obj;
+                    const index = this._break.domain.findIndex(domainRange => range[0] === domainRange[0] && range[1] === domainRange[1]);
+                    const ratio = 1 - (this._break.scope[index][0] + this._break.scope[index][1]) / 2;
+                    let gapRatio;
+                    if (isPercent(gap)) {
+                        gapRatio = Number(gap.substring(0, gap.length - 1)) / 100;
+                    }
+                    else {
+                        gapRatio = gap / axisLength;
+                    }
+                    return {
+                        range: [ratio - gapRatio / 2, ratio + gapRatio / 2],
+                        breakSymbol: Object.assign({ visible: true }, breakSymbol)
+                    };
+                });
+            }
+            return attrs;
+        }
+        getNewScaleRange() {
+            var _a, _b;
+            let newRange = super.getNewScaleRange();
+            if (((_a = this._spec.breaks) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this._break) === null || _b === void 0 ? void 0 : _b.scope)) {
+                newRange = combineArray(this._break.scope).map(val => newRange[0] + (last(newRange) - newRange[0]) * val);
+            }
+            return newRange;
+        }
         computeDomain(data) {
             return this.computeLinearDomain(data);
         }
@@ -67413,11 +67699,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         updateComponentSpec(result) {
             const componentCache = {};
+            const checkVisibleComponents = {
+                [ComponentTypeEnum.title]: true,
+                [ComponentTypeEnum.brush]: true,
+                [ComponentTypeEnum.mapLabel]: true
+            };
             this._components.forEach(c => {
                 var _a, _b;
                 if (c.type === ComponentTypeEnum.label || c.type === ComponentTypeEnum.totalLabel) {
                     return;
                 }
+                if (checkVisibleComponents[c.type]) {
+                    checkVisibleComponents[c.type] = false;
+                }
                 const compSpecKey = c.specKey || c.type;
                 const cmpSpec = (_a = this._spec[compSpecKey]) !== null && _a !== void 0 ? _a : {};
                 if (isArray$1(cmpSpec)) {
@@ -67440,6 +67734,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 }
             }
+            Object.keys(checkVisibleComponents).forEach(type => {
+                if (checkVisibleComponents[type]) {
+                    const compSpec = this._spec[type];
+                    const switchToVisible = isArray$1(compSpec) ? compSpec.some(entry => entry === null || entry === void 0 ? void 0 : entry.visible) : compSpec === null || compSpec === void 0 ? void 0 : compSpec.visible;
+                    if (switchToVisible) {
+                        result.reMake = true;
+                    }
+                }
+            });
         }
         updateSeriesSpec(result) {
             if (this._spec.series.length !== this._series.length) {
@@ -67843,7 +68146,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 transform = (constructor, specInfo, chartSpecInfo) => {
                     const { spec, specPath, specInfoPath, type } = specInfo;
                     const transformer = new constructor.transformerConstructor(Object.assign(Object.assign({}, this._option), { type }));
-                    setProperty(chartSpecInfo, specInfoPath !== null && specInfoPath !== void 0 ? specInfoPath : specPath, Object.assign(Object.assign({}, specInfo), { theme: transformer.getTheme(spec, chartSpec) }));
+                    const transformResult = transformer.transformSpec(spec, chartSpec, chartSpecInfo);
+                    setProperty(chartSpecInfo, specInfoPath !== null && specInfoPath !== void 0 ? specInfoPath : specPath, Object.assign(Object.assign(Object.assign({}, specInfo), transformResult), { theme: transformer.getTheme(spec, chartSpec) }));
                 };
             }
             const currentChartSpecInfo = {};
@@ -68195,33 +68499,34 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         let nextNode;
         let leaf;
         data.forEach(dv => {
-            dv.latestData.forEach((d) => {
-                temp = result;
-                for (let i = 0; i < fields.length; i++) {
-                    const f = fields[i];
-                    const fV = d[f];
-                    if (isNil$1(fV)) {
-                        break;
-                    }
-                    temp.groupField = f;
-                    if (!temp.nodes[fV]) {
+            dv.latestData &&
+                dv.latestData.forEach((d) => {
+                    temp = result;
+                    for (let i = 0; i < fields.length; i++) {
+                        const f = fields[i];
+                        const fV = d[f];
+                        if (isNil$1(fV)) {
+                            break;
+                        }
+                        temp.groupField = f;
+                        if (!temp.nodes[fV]) {
+                            if (i === lastFieldIndex) {
+                                temp.nodes[fV] = { values: [] };
+                            }
+                            else {
+                                nextNode = { nodes: {} };
+                                temp.nodes[fV] = nextNode;
+                            }
+                        }
                         if (i === lastFieldIndex) {
-                            temp.nodes[fV] = { values: [] };
+                            leaf = temp.nodes[fV];
+                            leaf.values.push(d);
                         }
                         else {
-                            nextNode = { nodes: {} };
-                            temp.nodes[fV] = nextNode;
+                            temp = temp.nodes[fV];
                         }
                     }
-                    if (i === lastFieldIndex) {
-                        leaf = temp.nodes[fV];
-                        leaf.values.push(d);
-                    }
-                    else {
-                        temp = temp.nodes[fV];
-                    }
-                }
-            });
+                });
         });
         return result;
     };
@@ -73831,7 +74136,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             layoutRadius: chartSpec.layoutRadius
         };
     };
-    const computeLayoutRadius = (layoutRadius, getLayoutRect, getCenter, startAngle = 0, endAngle = 0 * Math.PI) => {
+    const computeLayoutRadius = (getLayoutRadius, getLayoutRect, getCenter, getAngles) => {
+        const layoutRadius = getLayoutRadius();
         if (isNumber$1(layoutRadius)) {
             return layoutRadius;
         }
@@ -73840,6 +74146,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         const rect = getLayoutRect();
         if (layoutRadius === 'auto' && rect.width > 0 && rect.height > 0) {
+            const { startAngle = 0, endAngle = 2 * Math.PI } = getAngles();
             return calculateMaxRadius(rect, getCenter(), startAngle, endAngle);
         }
         return Math.min(rect.width / 2, rect.height / 2);
@@ -73962,7 +74269,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return field$2(ARC_END_ANGLE)(datum);
         }
         _computeLayoutRadius() {
-            return computeLayoutRadius(this._spec.layoutRadius, this.getLayoutRect, this.getCenter, this._startAngle, this._endAngle);
+            return computeLayoutRadius(() => this._spec.layoutRadius, this.getLayoutRect, this.getCenter, () => ({ startAngle: this._startAngle, endAngle: this._endAngle }));
         }
         initMarkStyle() {
             const initialStyle = {
@@ -74511,6 +74818,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const region = (_a = this.getRegions()) === null || _a === void 0 ? void 0 : _a[0];
                 return region ? region.getLayoutStartPoint() : pos;
             };
+            this.getCenter = () => {
+                var _a, _b;
+                const layoutRect = this.getRefLayoutRect();
+                const { width, height } = layoutRect;
+                return {
+                    x: calcLayoutNumber((_a = this._center) === null || _a === void 0 ? void 0 : _a.x, width, layoutRect, width / 2),
+                    y: calcLayoutNumber((_b = this._center) === null || _b === void 0 ? void 0 : _b.y, height, layoutRect, height / 2)
+                };
+            };
             this.getRefLayoutRect = () => {
                 return this.getRegions()[0].getLayoutRect();
             };
@@ -74653,15 +74969,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 angle: radian
             };
         }
-        getCenter() {
-            var _a, _b;
-            const layoutRect = this.getRefLayoutRect();
-            const { width, height } = layoutRect;
-            return {
-                x: calcLayoutNumber((_a = this._center) === null || _a === void 0 ? void 0 : _a.x, width, layoutRect, width / 2),
-                y: calcLayoutNumber((_b = this._center) === null || _b === void 0 ? void 0 : _b.y, height, layoutRect, height / 2)
-            };
-        }
         getOuterRadius() {
             return this.computeLayoutOuterRadius();
         }
@@ -74745,7 +75052,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return undefined;
         }
         _computeLayoutRadius() {
-            return computeLayoutRadius(this._spec.layoutRadius, this.getRefLayoutRect, this.getCenter, this._startAngle, this._endAngle);
+            return computeLayoutRadius(() => this._spec.layoutRadius, this.getRefLayoutRect, this.getCenter, () => ({ startAngle: this._startAngle, endAngle: this._endAngle }));
         }
         computeLayoutOuterRadius() {
             var _a;
@@ -76661,7 +76968,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._progressMark = null;
             this._trackMark = null;
             this._defaultProgressCustomShape = (datum, attrs, path) => {
-                const cornerRadius = this._spec.cornerRadius;
+                var _a, _b;
+                const cornerRadius = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.cornerRadius;
                 const width = isValid$1(attrs.width) ? attrs.width : attrs.x1 - attrs.x;
                 const height = isValid$1(attrs.height) ? attrs.height : attrs.y1 - attrs.y;
                 const x0 = Math.min(0, width);
@@ -76670,7 +76978,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const y1 = Math.max(0, height);
                 if (cornerRadius > 0) {
                     let realCornerRadius = cornerRadius;
-                    if (this._spec.direction === 'vertical') {
+                    if (((_b = this._spec) === null || _b === void 0 ? void 0 : _b.direction) === 'vertical') {
                         realCornerRadius = Math.min(Math.abs(width / 2), cornerRadius);
                         if (2 * realCornerRadius > Math.abs(height)) {
                             const angle = Math.acos((realCornerRadius - Math.abs(height) / 2) / realCornerRadius);
@@ -91765,7 +92073,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         });
         let filter = null;
         if (isContinuous()) {
-            filter = (d) => d[datumField] >= newDomain[0] && d[datumField] <= newDomain[1];
+            filter = (d) => d[datumField] >= newDomain[0] && d[datumField] <= last(newDomain);
         }
         else {
             filter = (d) => {
@@ -92263,15 +92571,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const domain = scale.domain();
             if (isContinuous(scale.type)) {
                 if (this._isReverse()) {
-                    return domain[0] + (domain[1] - domain[0]) * (1 - state);
+                    return domain[0] + (last(domain) - domain[0]) * (1 - state);
                 }
-                return domain[0] + (domain[1] - domain[0]) * state;
+                return domain[0] + (last(domain) - domain[0]) * state;
             }
             let range = scale.range();
             if (this._isReverse()) {
                 range = range.slice().reverse();
             }
-            const posInRange = range[0] + (range[1] - range[0]) * state;
+            const posInRange = range[0] + (last(range) - range[0]) * state;
             return scale.invert(posInRange);
         }
         dataToStatePoint(data) {
@@ -92281,7 +92589,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!this._isHorizontal && isContinuous(scale.type)) {
                 range = range.slice().reverse();
             }
-            return (pos - range[0]) / (range[1] - range[0]);
+            return (pos - range[0]) / (last(range) - range[0]);
         }
         _modeCheck(statePoint, mode) {
             if (statePoint === 'start') {
@@ -92315,12 +92623,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._end = end;
             this._minSpan = (_a = this._spec.minSpan) !== null && _a !== void 0 ? _a : 0;
             this._maxSpan = (_b = this._spec.maxSpan) !== null && _b !== void 0 ? _b : 1;
-            if (isContinuous(this._stateScale.type) && this._stateScale.domain()[0] !== this._stateScale.domain()[1]) {
+            if (isContinuous(this._stateScale.type) && this._stateScale.domain()[0] !== last(this._stateScale.domain())) {
                 if (this._spec.minValueSpan) {
-                    this._minSpan = this._spec.minValueSpan / (this._stateScale.domain()[1] - this._stateScale.domain()[0]);
+                    this._minSpan = this._spec.minValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0]);
                 }
                 if (this._spec.maxValueSpan) {
-                    this._maxSpan = this._spec.maxValueSpan / (this._stateScale.domain()[1] - this._stateScale.domain()[0]);
+                    this._maxSpan = this._spec.maxValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0]);
                 }
             }
             this._minSpan = Math.max(0, this._minSpan);
@@ -92792,7 +93100,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return false;
             }
             const domain = scale.domain();
-            if (isContinuous(scale.type) && domain[0] === domain[1]) {
+            if (isContinuous(scale.type) && domain[0] === last(domain)) {
                 return false;
             }
             if (isDiscrete(scale.type) && uniqArray(domain).length === 1) {
@@ -94817,7 +95125,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _compareSpec(spec, prevSpec) {
             const result = super._compareSpec(spec, prevSpec);
-            if ((prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.orient) !== (spec === null || spec === void 0 ? void 0 : spec.orient)) {
+            if ((prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.orient) !== (spec === null || spec === void 0 ? void 0 : spec.orient) || (prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.visible) !== spec.visible) {
                 result.reMake = true;
             }
             result.change = true;
@@ -94869,6 +95177,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getTitleAttrs() {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             const realWidth = Math.max(0, (_a = this._spec.width) !== null && _a !== void 0 ? _a : this.getLayoutRect().width);
+            if (this._spec.visible === false) {
+                return { visible: false };
+            }
             return Object.assign(Object.assign({}, pickWithout(this._spec, ['padding'])), { textType: (_b = this._spec.textType) !== null && _b !== void 0 ? _b : 'text', text: (_c = this._spec.text) !== null && _c !== void 0 ? _c : '', subtextType: (_d = this._spec.subtextType) !== null && _d !== void 0 ? _d : 'text', subtext: (_e = this._spec.subtext) !== null && _e !== void 0 ? _e : '', x: (_f = this._spec.x) !== null && _f !== void 0 ? _f : 0, y: (_g = this._spec.y) !== null && _g !== void 0 ? _g : 0, width: realWidth, height: this._spec.height, minWidth: this._spec.minWidth, maxWidth: this._spec.maxWidth, minHeight: this._spec.minHeight, maxHeight: this._spec.maxHeight, padding: this._spec.innerPadding, align: (_h = this._spec.align) !== null && _h !== void 0 ? _h : 'left', verticalAlign: (_j = this._spec.verticalAlign) !== null && _j !== void 0 ? _j : 'top', textStyle: Object.assign({ width: realWidth }, this._spec.textStyle), subtextStyle: Object.assign({ width: realWidth }, this._spec.subtextStyle) });
         }
         _createOrUpdateTitleComponent(attrs) {
@@ -96726,7 +97037,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         const endPercent = dataZoom.dataToStatePoint(endValue);
                         const newStartPercent = this._stateClamp(startPercent - axisRangeExpand);
                         const newEndPercent = this._stateClamp(endPercent + axisRangeExpand);
-                        dataZoom.setStartAndEnd(newStartPercent, newEndPercent, ['percent', 'percent']);
+                        dataZoom.setStartAndEnd(Math.min(newStartPercent, newEndPercent), Math.max(newStartPercent, newEndPercent), [
+                            'percent',
+                            'percent'
+                        ]);
                         this._zoomRecord.push({
                             operateComponent: dataZoom,
                             start: newStartPercent,
@@ -96736,13 +97050,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     else {
                         const range = axis.getScale().range();
                         const rangeFactor = (_b = axis.getScale().rangeFactor()) !== null && _b !== void 0 ? _b : [0, 1];
-                        const isAxisReverse = range[1] < range[0];
+                        const isAxisReverse = last(range) < range[0];
                         const startPosTemp = boundsStart - region.getLayoutStartPoint()[regionStartAttr];
                         const endPosTemp = boundsEnd - region.getLayoutStartPoint()[regionStartAttr];
                         const endPos = isAxisReverse ? Math.min(startPosTemp, endPosTemp) : Math.max(startPosTemp, endPosTemp);
                         const startPos = isAxisReverse ? Math.max(startPosTemp, endPosTemp) : Math.min(startPosTemp, endPosTemp);
-                        const start = ((startPos - range[0]) / (range[1] - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
-                        const end = ((endPos - range[0]) / (range[1] - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
+                        const start = ((startPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
+                        const end = ((endPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
                         const newStart = this._stateClamp(start - axisRangeExpand);
                         const newEnd = this._stateClamp(end + axisRangeExpand);
                         axis.getScale().rangeFactor([newStart, newEnd]);
@@ -98476,7 +98790,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return 0;
             };
             this._getActualTooltipPosition = (actualTooltip, params, tooltipBoxSize) => {
-                var _a, _b, _c, _d, _e, _f, _g;
+                var _a, _b, _c, _d, _e, _f, _g, _h;
                 const event = params.event;
                 const { tooltipSpec } = params;
                 const firstDimensionInfo = (_a = params.dimensionInfo) === null || _a === void 0 ? void 0 : _a[0];
@@ -98512,8 +98826,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     containerSize.width = window.innerWidth;
                     containerSize.height = window.innerHeight;
                     if (!isCanvas) {
-                        tooltipParentElementRect = (_f = tooltipParentElement === null || tooltipParentElement === void 0 ? void 0 : tooltipParentElement.getBoundingClientRect()) !== null && _f !== void 0 ? _f : invalidPosition;
-                        const chartElement = ((_g = this._compiler.getCanvas()) !== null && _g !== void 0 ? _g : this._chartContainer);
+                        tooltipParentElementRect = (_g = (_f = tooltipParentElement === null || tooltipParentElement === void 0 ? void 0 : tooltipParentElement.getBoundingClientRect) === null || _f === void 0 ? void 0 : _f.call(tooltipParentElement)) !== null && _g !== void 0 ? _g : invalidPosition;
+                        const chartElement = ((_h = this._compiler.getCanvas()) !== null && _h !== void 0 ? _h : this._chartContainer);
                         const chartElementRect = chartElement === null || chartElement === void 0 ? void 0 : chartElement.getBoundingClientRect();
                         relativePosOffset = {
                             x: chartElementRect.x - tooltipParentElementRect.x,
@@ -99848,7 +100162,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initEl() {
             const tooltipSpec = this._component.getSpec();
             const parentElement = tooltipSpec.parentElement;
-            if (domDocument && parentElement) {
+            if (domDocument && parentElement && parentElement.children && parentElement.children.length) {
                 for (let i = 0; i < parentElement.children.length; i++) {
                     if (parentElement.children[i].classList.contains(TOOLTIP_CONTAINER_EL_CLASS_NAME)) {
                         this._container = parentElement.children[i];
@@ -100618,9 +100932,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const infoList = array((_f = (_e = chartSpecInfo.component) === null || _e === void 0 ? void 0 : _e[specKey]) !== null && _f !== void 0 ? _f : []);
             (_h = array((_g = chartSpec[specKey]) !== null && _g !== void 0 ? _g : [])) === null || _h === void 0 ? void 0 : _h.forEach((componentSpec, i) => {
                 const specInfo = infoList[i];
-                if (specInfo.type === filterType) {
+                if (specInfo && specInfo.type === filterType) {
                     result.modelInfo.push(Object.assign(Object.assign({}, specInfo), { spec: componentSpec }));
                 }
+                else if (componentSpec && componentSpec.visible === false) {
+                    result.modelInfo.push({
+                        type: filterType,
+                        spec: componentSpec
+                    });
+                }
             });
         }
         else {