@visactor/vchart 1.6.0 → 1.6.1-alpha.0

package/build/index.js

@@ -6889,24 +6889,31 @@
             palette: {
                 backgroundColor: '#ffffff',
                 borderColor: '#e3e5e8',
-                shadowColor: '#21252c',
+                shadowColor: 'rgba(33,37,44,0.1)',
+                hoverBackgroundColor: '#f1f2f5',
+                sliderRailColor: '#f1f3f4',
+                sliderHandleColor: '#ffffff',
+                sliderTrackColor: '#0040ff',
+                popupBackgroundColor: '#ffffff',
                 primaryFontColor: '#21252c',
                 secondaryFontColor: '#606773',
-                axisFontColor: '#89909d',
+                tertiaryFontColor: '#89909d',
+                axisLabelFontColor: '#89909d',
                 disableFontColor: '#bcc1cb',
-                labelReverseFontColor: '#ffffff',
+                axisMarkerFontColor: '#ffffff',
                 axisGridColor: '#f1f2f5',
                 axisDomainColor: '#d9dde4',
-                dataZoomHandlerStrokeColor: '#aeb5be',
-                dataZoomHandlerFillColor: '#ffffff',
-                dataZoomBackgroundColor: '#f1f3f4',
+                dataZoomHandleStrokeColor: '#aeb5be',
                 dataZoomChartColor: '#c9ced8',
-                dataZoomSelectedColor: '#0040ff',
+                playerControllerColor: '#0040ff',
                 scrollBarSliderColor: '#000000',
-                tooltipBackgroundColor: '#ffffff',
-                markLabelBackgroundColor: '#ffc528',
-                titleFontColor: '#21252c',
-                labelFontColor: '#89909d'
+                axisMarkerBackgroundColor: '#21252c',
+                markLabelBackgroundColor: '#f1f2f5',
+                markLineStrokeColor: '#606773',
+                dangerColor: '#e33232',
+                warningColor: '#ffc528',
+                successColor: '#07a35a',
+                infoColor: '#3073f2'
             }
         }
     };
@@ -7674,9 +7681,6 @@
       return encoder.scale && (dependencies = isGrammar(encoder.scale) ? [encoder.scale] : array(view.getScaleById(encoder.scale))), dependencies.concat(parseFunctionType(encoder, view));
     }
 
-    function parseXY(val) {
-      return null === val ? 0 : val;
-    }
     function isValidPointsChannel(channels, markType) {
       switch (markType) {
         case "line":
@@ -7710,8 +7714,8 @@
       return items.some(item => isValidPointsChannel(Object.keys(item.nextAttrs), "line")) ? items.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const attrs = item.nextAttrs,
-          x = parseXY(null !== (_a = attrs.x) && void 0 !== _a ? _a : null === (_b = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _b ? void 0 : _b.x),
-          y = parseXY(null !== (_c = attrs.y) && void 0 !== _c ? _c : null === (_d = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _d ? void 0 : _d.y),
+          x = null !== (_a = attrs.x) && void 0 !== _a ? _a : null === (_b = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _b ? void 0 : _b.x,
+          y = null !== (_c = attrs.y) && void 0 !== _c ? _c : null === (_d = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _d ? void 0 : _d.y,
           defined = null !== (_e = attrs.defined) && void 0 !== _e ? _e : null === (_f = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _f ? void 0 : _f.defined,
           point = {
             x: x,
@@ -7719,8 +7723,8 @@
             context: item.key
           };
         if (isArea) {
-          const x1 = parseXY(null !== (_g = attrs.x1) && void 0 !== _g ? _g : null === (_h = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _h ? void 0 : _h.x1),
-            y1 = parseXY(null !== (_j = attrs.y1) && void 0 !== _j ? _j : null === (_k = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _k ? void 0 : _k.y1);
+          const x1 = null !== (_g = attrs.x1) && void 0 !== _g ? _g : null === (_h = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _h ? void 0 : _h.x1,
+            y1 = null !== (_j = attrs.y1) && void 0 !== _j ? _j : null === (_k = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _k ? void 0 : _k.y1;
           point.x1 = x1, point.y1 = y1;
         }
         return !1 === defined && (point.defined = !1), point;
@@ -7732,10 +7736,10 @@
       return items.forEach((item, index) => {
         var _a, _b, _c, _d;
         const attrs = item.nextAttrs,
-          x = parseXY(null !== (_a = attrs.x) && void 0 !== _a ? _a : null == lastPoints ? void 0 : lastPoints[4 * index]),
-          y = parseXY(null !== (_b = attrs.y) && void 0 !== _b ? _b : null == lastPoints ? void 0 : lastPoints[4 * index + 1]),
-          width = parseXY(null !== (_c = attrs.width) && void 0 !== _c ? _c : null == lastPoints ? void 0 : lastPoints[4 * index + 2]),
-          y1 = parseXY(null !== (_d = attrs.y1) && void 0 !== _d ? _d : null == lastPoints ? void 0 : lastPoints[4 * index + 3]);
+          x = null !== (_a = attrs.x) && void 0 !== _a ? _a : null == lastPoints ? void 0 : lastPoints[4 * index],
+          y = null !== (_b = attrs.y) && void 0 !== _b ? _b : null == lastPoints ? void 0 : lastPoints[4 * index + 1],
+          width = null !== (_c = attrs.width) && void 0 !== _c ? _c : null == lastPoints ? void 0 : lastPoints[4 * index + 2],
+          y1 = null !== (_d = attrs.y1) && void 0 !== _d ? _d : null == lastPoints ? void 0 : lastPoints[4 * index + 3];
         arr[4 * index] = x, arr[4 * index + 1] = y, arr[4 * index + 2] = width, arr[4 * index + 3] = y1 - y;
       }), arr;
     }
@@ -7745,191 +7749,11 @@
       return items.forEach((item, index) => {
         var _a, _b;
         const attrs = item.nextAttrs,
-          x = parseXY(null !== (_a = attrs.x) && void 0 !== _a ? _a : null == lastPoints ? void 0 : lastPoints[2 * index]),
-          y = parseXY(null !== (_b = attrs.y) && void 0 !== _b ? _b : null == lastPoints ? void 0 : lastPoints[2 * index + 1]);
+          x = null !== (_a = attrs.x) && void 0 !== _a ? _a : null == lastPoints ? void 0 : lastPoints[2 * index],
+          y = null !== (_b = attrs.y) && void 0 !== _b ? _b : null == lastPoints ? void 0 : lastPoints[2 * index + 1];
         arr[2 * index] = x, arr[2 * index + 1] = y;
       }), arr;
     }
-
-    const commonAttributes = ["fillOpacity", "x", "y", "dx", "dy"];
-    const transformCommonAttribute = (graphicAttributes, changedKey, nextAttrs) => {
-      var _a;
-      return "fillOpacity" === changedKey ? (graphicAttributes.fillOpacity = null !== (_a = nextAttrs.fillOpacity) && void 0 !== _a ? _a : 1, ["fillOpacity"]) : "x" === changedKey ? (graphicAttributes.x = parseXY(nextAttrs.x), ["x"]) : "y" === changedKey ? (graphicAttributes.y = parseXY(nextAttrs.y), ["y"]) : "dx" === changedKey ? (graphicAttributes.dx = parseXY(nextAttrs.dx), ["dx"]) : "dy" === changedKey ? (graphicAttributes.dy = parseXY(nextAttrs.dy), ["dy"]) : [];
-    };
-
-    function isPointsMarkType(markType) {
-      return [GrammarMarkType.line, GrammarMarkType.area, GrammarMarkType.largeRects, GrammarMarkType.largeSymbols].includes(markType);
-    }
-    function storeOriginAttributes(name, channels, graphicAttributes, nextAttrs, element, markName) {
-      var _a;
-      const prevStoredAttrs = null !== (_a = element.getGraphicAttribute(name, !1, markName)) && void 0 !== _a ? _a : {},
-        storedAttrs = {};
-      return channels.forEach(channel => {
-        var _a;
-        storedAttrs[channel] = null !== (_a = nextAttrs[channel]) && void 0 !== _a ? _a : prevStoredAttrs[channel];
-      }), graphicAttributes[name] = storedAttrs, storedAttrs;
-    }
-    const transformsByType = {
-      [GrammarMarkType.largeRects]: [{
-        channels: ["x", "y", "y1", "x1", "width", "height"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          graphicAttributes.x = 0, graphicAttributes.y = 0;
-        }
-      }],
-      [GrammarMarkType.largeSymbols]: [{
-        channels: ["x", "y", "size"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          graphicAttributes.x = 0, graphicAttributes.y = 0;
-        }
-      }],
-      [GrammarMarkType.area]: [{
-        channels: ["x", "y", "x1", "y1"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          graphicAttributes.x = 0, graphicAttributes.y = 0, graphicAttributes.x1 = 0, graphicAttributes.y1 = 0;
-        }
-      }],
-      [GrammarMarkType.line]: [{
-        channels: ["x", "y", "defined", "enableSegments"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          graphicAttributes.x = 0, graphicAttributes.y = 0;
-        }
-      }],
-      [GrammarMarkType.rect]: [{
-        channels: ["x", "y", "x1", "y1", "width", "height"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          var _a, _b, _c, _d, _e, _f, _g, _h;
-          isValidNumber$1(nextAttrs.width) || !isValidNumber$1(nextAttrs.x1) && isValidNumber$1(storedAttrs.width) ? (graphicAttributes.x = Math.min(null !== (_a = storedAttrs.x) && void 0 !== _a ? _a : 0, null !== (_b = storedAttrs.x1) && void 0 !== _b ? _b : 1 / 0), graphicAttributes.width = storedAttrs.width) : isValidNumber$1(nextAttrs.x1) || !isValidNumber$1(nextAttrs.width) && isValidNumber$1(storedAttrs.x1) ? (graphicAttributes.x = Math.min(storedAttrs.x, storedAttrs.x1), graphicAttributes.width = Math.abs(storedAttrs.x1 - storedAttrs.x)) : (graphicAttributes.x = Math.min(null !== (_c = storedAttrs.x) && void 0 !== _c ? _c : 0, null !== (_d = storedAttrs.x1) && void 0 !== _d ? _d : 1 / 0), graphicAttributes.width = storedAttrs.width), isValidNumber$1(nextAttrs.height) || !isValidNumber$1(nextAttrs.y1) && isValidNumber$1(storedAttrs.height) ? (graphicAttributes.y = Math.min(null !== (_e = storedAttrs.y) && void 0 !== _e ? _e : 0, null !== (_f = storedAttrs.y1) && void 0 !== _f ? _f : 1 / 0), graphicAttributes.height = storedAttrs.height) : isValidNumber$1(nextAttrs.y1) || !isValidNumber$1(nextAttrs.height) && isValidNumber$1(storedAttrs.y1) ? (graphicAttributes.y = Math.min(storedAttrs.y, storedAttrs.y1), graphicAttributes.height = Math.abs(storedAttrs.y1 - storedAttrs.y)) : (graphicAttributes.y = Math.min(null !== (_g = storedAttrs.y) && void 0 !== _g ? _g : 0, null !== (_h = storedAttrs.y1) && void 0 !== _h ? _h : 1 / 0), graphicAttributes.height = storedAttrs.height);
-        },
-        storedAttrs: "sizeAttrs"
-      }],
-      rect3d: [{
-        channels: ["x", "y", "z", "x1", "y1", "width", "height", "length"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-          isValidNumber$1(nextAttrs.width) || !isValidNumber$1(nextAttrs.x1) && isValidNumber$1(storedAttrs.width) ? (graphicAttributes.x = Math.min(null !== (_a = storedAttrs.x) && void 0 !== _a ? _a : 0, null !== (_b = storedAttrs.x1) && void 0 !== _b ? _b : 1 / 0), graphicAttributes.width = storedAttrs.width) : isValidNumber$1(nextAttrs.x1) || !isValidNumber$1(nextAttrs.width) && isValidNumber$1(storedAttrs.x1) ? (graphicAttributes.x = Math.min(storedAttrs.x, storedAttrs.x1), graphicAttributes.width = Math.abs(storedAttrs.x1 - storedAttrs.x)) : (graphicAttributes.x = Math.min(null !== (_c = storedAttrs.x) && void 0 !== _c ? _c : 0, null !== (_d = storedAttrs.x1) && void 0 !== _d ? _d : 1 / 0), graphicAttributes.width = storedAttrs.width), isValidNumber$1(nextAttrs.height) || !isValidNumber$1(nextAttrs.y1) && isValidNumber$1(storedAttrs.height) ? (graphicAttributes.y = Math.min(null !== (_e = storedAttrs.y) && void 0 !== _e ? _e : 0, null !== (_f = storedAttrs.y1) && void 0 !== _f ? _f : 1 / 0), graphicAttributes.height = storedAttrs.height) : isValidNumber$1(nextAttrs.y1) || !isValidNumber$1(nextAttrs.height) && isValidNumber$1(storedAttrs.y1) ? (graphicAttributes.y = Math.min(storedAttrs.y, storedAttrs.y1), graphicAttributes.height = Math.abs(storedAttrs.y1 - storedAttrs.y)) : (graphicAttributes.y = Math.min(null !== (_g = storedAttrs.y) && void 0 !== _g ? _g : 0, null !== (_h = storedAttrs.y1) && void 0 !== _h ? _h : 1 / 0), graphicAttributes.height = storedAttrs.height), isValidNumber$1(nextAttrs.length) || !isValidNumber$1(nextAttrs.z1) && isValidNumber$1(storedAttrs.length) ? (graphicAttributes.z = Math.min(null !== (_j = storedAttrs.z) && void 0 !== _j ? _j : 0, null !== (_k = storedAttrs.z1) && void 0 !== _k ? _k : 1 / 0), graphicAttributes.length = storedAttrs.length) : isValidNumber$1(nextAttrs.z1) || !isValidNumber$1(nextAttrs.length) && isValidNumber$1(storedAttrs.z1) ? (graphicAttributes.z = Math.min(storedAttrs.z, storedAttrs.z1), graphicAttributes.length = Math.abs(storedAttrs.z1 - storedAttrs.z)) : (graphicAttributes.z = Math.min(null !== (_l = storedAttrs.z) && void 0 !== _l ? _l : 0, null !== (_m = storedAttrs.z1) && void 0 !== _m ? _m : 1 / 0), graphicAttributes.length = storedAttrs.length);
-        },
-        storedAttrs: "sizeAttrs"
-      }],
-      [GrammarMarkType.text]: [{
-        channels: ["text", "limit", "autoLimit", "maxLineWidth"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          var _a, _b, _c, _d;
-          const limit = null !== (_a = storedAttrs.limit) && void 0 !== _a ? _a : 1 / 0,
-            autoLimit = null !== (_b = storedAttrs.autoLimit) && void 0 !== _b ? _b : 1 / 0,
-            maxWidth = Math.min(limit, autoLimit),
-            isTextConfig = isPlainObject$1(storedAttrs.text) && !isNil$1(storedAttrs.text.text),
-            text = isTextConfig ? storedAttrs.text.text : storedAttrs.text;
-          graphicAttributes.maxLineWidth = maxWidth === 1 / 0 ? storedAttrs.maxLineWidth : maxWidth, isTextConfig ? "html" === storedAttrs.text.type ? (graphicAttributes.html = {
-            dom: text,
-            width: null !== (_c = nextAttrs.width) && void 0 !== _c ? _c : maxWidth,
-            height: null !== (_d = nextAttrs.height) && void 0 !== _d ? _d : nextAttrs.fontSize,
-            anchorType: "position"
-          }, graphicAttributes.text = "") : "rich" === storedAttrs.text.type ? graphicAttributes.textConfig = text : graphicAttributes.text = text : graphicAttributes.text = text;
-        },
-        storedAttrs: "limitAttrs"
-      }],
-      [GrammarMarkType.rule]: [{
-        channels: ["x", "y", "x1", "y1"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          const points = getRulePoints(storedAttrs);
-          graphicAttributes.points = points, graphicAttributes.x = 0, graphicAttributes.y = 0;
-        },
-        storedAttrs: "pointAttrs"
-      }],
-      [GrammarMarkType.symbol]: [{
-        channels: ["shape", "symbolType"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          var _a;
-          graphicAttributes.symbolType = null !== (_a = nextAttrs.shape) && void 0 !== _a ? _a : nextAttrs.symbolType;
-        }
-      }, {
-        channels: ["image", "fill", "background"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          nextAttrs.image ? (graphicAttributes.background = nextAttrs.image, graphicAttributes.fill = !1) : storedAttrs.image ? (graphicAttributes.background = storedAttrs.image, graphicAttributes.fill = !1) : (graphicAttributes.fill = storedAttrs.fill, graphicAttributes.background = storedAttrs.background);
-        },
-        storedAttrs: "imageAttrs"
-      }],
-      [GrammarMarkType.richtext]: [{
-        channels: ["text", "textConfig"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          var _a, _b, _c, _d;
-          graphicAttributes.text = null, "rich" === (null === (_a = nextAttrs.text) || void 0 === _a ? void 0 : _a.type) ? graphicAttributes.textConfig = nextAttrs.text.text : "html" === (null === (_b = nextAttrs.textConfig) || void 0 === _b ? void 0 : _b.type) ? (graphicAttributes.html = {
-            dom: nextAttrs.textConfig.text,
-            width: nextAttrs.width,
-            height: null !== (_c = nextAttrs.height) && void 0 !== _c ? _c : nextAttrs.fontSize,
-            anchorType: "position"
-          }, graphicAttributes.text = "") : "rich" === (null === (_d = nextAttrs.textConfig) || void 0 === _d ? void 0 : _d.type) ? graphicAttributes.textConfig = nextAttrs.textConfig.text : graphicAttributes.textConfig = nextAttrs.textConfig;
-        }
-      }]
-    };
-    function cloneTransformAttributes(markType, attributes) {
-      var _a;
-      return (null !== (_a = transformsByType[markType]) && void 0 !== _a ? _a : []).reduce((clonedAttributes, transform) => (transform.channels.forEach(channel => {
-        has$1(attributes, channel) && (clonedAttributes[channel] = attributes[channel]);
-      }), clonedAttributes), {});
-    }
-    const transformAttributes = (markType, nextAttrs, element, markName) => {
-      const graphicAttributes = {},
-        changedKeys = nextAttrs ? Object.keys(nextAttrs) : [],
-        transforms = isString$1(markType) ? transformsByType[markType] : markType;
-      if (null == transforms ? void 0 : transforms.length) {
-        const tags = [];
-        changedKeys.forEach(key => {
-          let isTransformed = !1;
-          transforms.forEach((transform, index) => {
-            if (transform.channels.includes(key)) {
-              if (!tags[index]) if (transform.storedAttrs) {
-                const storedAttrs = storeOriginAttributes(transform.storedAttrs, transform.channels, graphicAttributes, nextAttrs, element, markName);
-                transform.transform(graphicAttributes, nextAttrs, storedAttrs);
-              } else transform.transform(graphicAttributes, nextAttrs, null);
-              tags[index] = !0, isTransformed = !0;
-            }
-          }), isTransformed || (commonAttributes.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key]);
-        });
-      } else changedKeys.forEach(key => {
-        commonAttributes.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key];
-      });
-      return graphicAttributes;
-    };
-    const isStopsEqual = (prev, next) => {
-        var _a, _b;
-        if (prev === next) return !0;
-        const prevLength = null !== (_a = prev && prev.length) && void 0 !== _a ? _a : 0;
-        return prevLength === (null !== (_b = next && next.length) && void 0 !== _b ? _b : 0) && 0 !== prevLength && prev.every((prevEntry, prevIndex) => !prevEntry && !next[prevIndex] || prevEntry && next[prevIndex] && prevEntry.color === next[prevIndex].color && prevEntry.offset === next[prevIndex].offset);
-      },
-      isColorAttrEqual = (prev, next) => {
-        if (prev === next) return !0;
-        if (typeof prev != typeof next) return !1;
-        if (isString$1(prev)) return !1;
-        if (prev.gradient !== next.gradient) return !1;
-        const prevKeys = Object.keys(prev),
-          nextKeys = Object.keys(next);
-        return prevKeys.length === nextKeys.length && prevKeys.every(key => "stops" === key ? isStopsEqual(prev[key], next[key]) : prev[key] === next[key]);
-      },
-      isLineDashEqual = (prev, next) => prev.length === next.length && prev.join("-") === next.join("-"),
-      isSegmentAttrEqual = (prev, next, key) => !(!isNil$1(prev) || !isNil$1(next)) || !isNil$1(prev) && !isNil$1(next) && ("lineDash" === key ? isLineDashEqual(prev, next) : "stroke" === key || "fill" === key ? isColorAttrEqual(prev, next) : prev === next),
-      fillAttrs = ["fill", "fillOpacity", "background", "texture", "texturePadding", "textureSize", "textureColor"],
-      strokeAttrs = ["stroke", "strokeOpacity", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "lineWidth", "miterLimit"],
-      areaAttrs = fillAttrs.concat(strokeAttrs);
-    function getLineSegmentConfigs(items, points, element) {
-      var _a;
-      if (!items || items.length <= 1) return null;
-      const checkAttributes = "area" === (null === (_a = null == element ? void 0 : element.mark) || void 0 === _a ? void 0 : _a.markType) ? areaAttrs : strokeAttrs,
-        segments = [];
-      let prevSegmentAttrs = null;
-      return items.forEach((item, index) => {
-        prevSegmentAttrs && checkAttributes.every(key => isSegmentAttrEqual(prevSegmentAttrs[key], item[key], key)) || (segments.length && (segments[segments.length - 1].endIndex = index), prevSegmentAttrs = item, segments.push({
-          attrs: prevSegmentAttrs,
-          startIndex: index
-        }));
-      }), segments.length >= 2 ? segments.map(entry => {
-        const res = transformAttributes(GrammarMarkType.line, entry.attrs, element);
-        return res.points = points.slice(entry.startIndex, isNil$1(entry.endIndex) ? points.length : entry.endIndex), res;
-      }) : null;
-    }
-    function getLinePointsFromSegments(segments) {
-      return segments ? segments.reduce((points, segment) => points.concat(segment.points), []) : null;
-    }
     function isPositionOrSizeChannel(type, channel) {
       if (["x", "y", "dx", "dy"].includes(channel)) return !0;
       switch (type) {
@@ -7957,6 +7781,9 @@
       }
       return !1;
     }
+    function isPointsMarkType(markType) {
+      return [GrammarMarkType.line, GrammarMarkType.area, GrammarMarkType.largeRects, GrammarMarkType.largeSymbols].includes(markType);
+    }
 
     class GlyphMeta {
       constructor(marks, encoders, defaultEncoder, progressiveChannels) {
@@ -7999,6 +7826,16 @@
         if (!Factory._plotMarks[type]) return null;
         return new (Factory._plotMarks[type])(id);
       }
+      static registerMark(key, mark) {
+        Factory._marks[key] = mark;
+      }
+      static createMark(type, view, group) {
+        if (!Factory._marks[type]) return null;
+        return new (Factory._marks[type])(view, type, group);
+      }
+      static hasMark(type) {
+        return !!Factory._marks[type];
+      }
       static registerComponent(key, component) {
         Factory._components[key] = component;
       }
@@ -8052,7 +7889,7 @@
         return Ctor ? new Ctor(view, options) : null;
       }
     };
-    Factory$1._plotMarks = {}, Factory$1._components = {}, Factory$1._graphicComponents = {}, Factory$1._transforms = {}, Factory$1._grammars = {}, Factory$1._glyphs = {}, Factory$1._animations = {}, Factory$1._interactions = {}, Factory$1.registerGlyph = (glyphType, marks, encoders, defaultEncoder, progressiveChannels) => (Factory$1._glyphs[glyphType] = new GlyphMeta(marks, encoders, defaultEncoder, progressiveChannels), Factory$1._glyphs[glyphType]), Factory$1.registerAnimationType = (animationType, animation) => {
+    Factory$1._plotMarks = {}, Factory$1._marks = {}, Factory$1._components = {}, Factory$1._graphicComponents = {}, Factory$1._transforms = {}, Factory$1._grammars = {}, Factory$1._glyphs = {}, Factory$1._animations = {}, Factory$1._interactions = {}, Factory$1.registerGlyph = (glyphType, marks, encoders, defaultEncoder, progressiveChannels) => (Factory$1._glyphs[glyphType] = new GlyphMeta(marks, encoders, defaultEncoder, progressiveChannels), Factory$1._glyphs[glyphType]), Factory$1.registerAnimationType = (animationType, animation) => {
       Factory$1._animations[animationType] = animation;
     }, Factory$1.getAnimationType = animationType => Factory$1._animations[animationType], Factory$1.registerInteraction = (interactionType, interaction) => {
       Factory$1._interactions[interactionType] = interaction;
@@ -26288,6 +26125,184 @@
       graphicItem && (graphicItem[BridgeElementKey] = null, graphicItem.release(), graphicItem.parent && graphicItem.parent.removeChild(graphicItem));
     };
 
+    const commonAttributes = ["fillOpacity"];
+    const transformCommonAttribute = (graphicAttributes, changedKey, nextAttrs) => {
+      var _a;
+      return "fillOpacity" === changedKey ? (graphicAttributes.fillOpacity = null !== (_a = nextAttrs.fillOpacity) && void 0 !== _a ? _a : 1, ["fillOpacity"]) : [];
+    };
+
+    function storeOriginAttributes(name, channels, graphicAttributes, nextAttrs, element, markName) {
+      var _a;
+      const prevStoredAttrs = null !== (_a = element.getGraphicAttribute(name, !1, markName)) && void 0 !== _a ? _a : {},
+        storedAttrs = {};
+      return channels.forEach(channel => {
+        var _a;
+        storedAttrs[channel] = null !== (_a = nextAttrs[channel]) && void 0 !== _a ? _a : prevStoredAttrs[channel];
+      }), graphicAttributes[name] = storedAttrs, storedAttrs;
+    }
+    const transformsByType = {
+      [GrammarMarkType.largeRects]: [{
+        channels: ["x", "y", "y1", "x1", "width", "height"],
+        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+          graphicAttributes.x = 0, graphicAttributes.y = 0;
+        }
+      }],
+      [GrammarMarkType.largeSymbols]: [{
+        channels: ["x", "y", "size"],
+        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+          graphicAttributes.x = 0, graphicAttributes.y = 0;
+        }
+      }],
+      [GrammarMarkType.area]: [{
+        channels: ["x", "y", "x1", "y1"],
+        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+          graphicAttributes.x = 0, graphicAttributes.y = 0, graphicAttributes.x1 = 0, graphicAttributes.y1 = 0;
+        }
+      }],
+      [GrammarMarkType.line]: [{
+        channels: ["x", "y", "defined", "enableSegments"],
+        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+          graphicAttributes.x = 0, graphicAttributes.y = 0;
+        }
+      }],
+      [GrammarMarkType.rect]: [{
+        channels: ["x", "y", "x1", "y1", "width", "height"],
+        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+          var _a, _b, _c, _d, _e, _f, _g, _h;
+          isValidNumber$1(nextAttrs.width) || !isValidNumber$1(nextAttrs.x1) && isValidNumber$1(storedAttrs.width) ? (graphicAttributes.x = Math.min(null !== (_a = storedAttrs.x) && void 0 !== _a ? _a : 0, null !== (_b = storedAttrs.x1) && void 0 !== _b ? _b : 1 / 0), graphicAttributes.width = storedAttrs.width) : isValidNumber$1(nextAttrs.x1) || !isValidNumber$1(nextAttrs.width) && isValidNumber$1(storedAttrs.x1) ? (graphicAttributes.x = Math.min(storedAttrs.x, storedAttrs.x1), graphicAttributes.width = Math.abs(storedAttrs.x1 - storedAttrs.x)) : (graphicAttributes.x = Math.min(null !== (_c = storedAttrs.x) && void 0 !== _c ? _c : 0, null !== (_d = storedAttrs.x1) && void 0 !== _d ? _d : 1 / 0), graphicAttributes.width = storedAttrs.width), isValidNumber$1(nextAttrs.height) || !isValidNumber$1(nextAttrs.y1) && isValidNumber$1(storedAttrs.height) ? (graphicAttributes.y = Math.min(null !== (_e = storedAttrs.y) && void 0 !== _e ? _e : 0, null !== (_f = storedAttrs.y1) && void 0 !== _f ? _f : 1 / 0), graphicAttributes.height = storedAttrs.height) : isValidNumber$1(nextAttrs.y1) || !isValidNumber$1(nextAttrs.height) && isValidNumber$1(storedAttrs.y1) ? (graphicAttributes.y = Math.min(storedAttrs.y, storedAttrs.y1), graphicAttributes.height = Math.abs(storedAttrs.y1 - storedAttrs.y)) : (graphicAttributes.y = Math.min(null !== (_g = storedAttrs.y) && void 0 !== _g ? _g : 0, null !== (_h = storedAttrs.y1) && void 0 !== _h ? _h : 1 / 0), graphicAttributes.height = storedAttrs.height);
+        },
+        storedAttrs: "sizeAttrs"
+      }],
+      rect3d: [{
+        channels: ["x", "y", "z", "x1", "y1", "width", "height", "length"],
+        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+          isValidNumber$1(nextAttrs.width) || !isValidNumber$1(nextAttrs.x1) && isValidNumber$1(storedAttrs.width) ? (graphicAttributes.x = Math.min(null !== (_a = storedAttrs.x) && void 0 !== _a ? _a : 0, null !== (_b = storedAttrs.x1) && void 0 !== _b ? _b : 1 / 0), graphicAttributes.width = storedAttrs.width) : isValidNumber$1(nextAttrs.x1) || !isValidNumber$1(nextAttrs.width) && isValidNumber$1(storedAttrs.x1) ? (graphicAttributes.x = Math.min(storedAttrs.x, storedAttrs.x1), graphicAttributes.width = Math.abs(storedAttrs.x1 - storedAttrs.x)) : (graphicAttributes.x = Math.min(null !== (_c = storedAttrs.x) && void 0 !== _c ? _c : 0, null !== (_d = storedAttrs.x1) && void 0 !== _d ? _d : 1 / 0), graphicAttributes.width = storedAttrs.width), isValidNumber$1(nextAttrs.height) || !isValidNumber$1(nextAttrs.y1) && isValidNumber$1(storedAttrs.height) ? (graphicAttributes.y = Math.min(null !== (_e = storedAttrs.y) && void 0 !== _e ? _e : 0, null !== (_f = storedAttrs.y1) && void 0 !== _f ? _f : 1 / 0), graphicAttributes.height = storedAttrs.height) : isValidNumber$1(nextAttrs.y1) || !isValidNumber$1(nextAttrs.height) && isValidNumber$1(storedAttrs.y1) ? (graphicAttributes.y = Math.min(storedAttrs.y, storedAttrs.y1), graphicAttributes.height = Math.abs(storedAttrs.y1 - storedAttrs.y)) : (graphicAttributes.y = Math.min(null !== (_g = storedAttrs.y) && void 0 !== _g ? _g : 0, null !== (_h = storedAttrs.y1) && void 0 !== _h ? _h : 1 / 0), graphicAttributes.height = storedAttrs.height), isValidNumber$1(nextAttrs.length) || !isValidNumber$1(nextAttrs.z1) && isValidNumber$1(storedAttrs.length) ? (graphicAttributes.z = Math.min(null !== (_j = storedAttrs.z) && void 0 !== _j ? _j : 0, null !== (_k = storedAttrs.z1) && void 0 !== _k ? _k : 1 / 0), graphicAttributes.length = storedAttrs.length) : isValidNumber$1(nextAttrs.z1) || !isValidNumber$1(nextAttrs.length) && isValidNumber$1(storedAttrs.z1) ? (graphicAttributes.z = Math.min(storedAttrs.z, storedAttrs.z1), graphicAttributes.length = Math.abs(storedAttrs.z1 - storedAttrs.z)) : (graphicAttributes.z = Math.min(null !== (_l = storedAttrs.z) && void 0 !== _l ? _l : 0, null !== (_m = storedAttrs.z1) && void 0 !== _m ? _m : 1 / 0), graphicAttributes.length = storedAttrs.length);
+        },
+        storedAttrs: "sizeAttrs"
+      }],
+      [GrammarMarkType.text]: [{
+        channels: ["text", "limit", "autoLimit", "maxLineWidth"],
+        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+          var _a, _b, _c, _d;
+          const limit = null !== (_a = storedAttrs.limit) && void 0 !== _a ? _a : 1 / 0,
+            autoLimit = null !== (_b = storedAttrs.autoLimit) && void 0 !== _b ? _b : 1 / 0,
+            maxWidth = Math.min(limit, autoLimit),
+            isTextConfig = isPlainObject$1(storedAttrs.text) && !isNil$1(storedAttrs.text.text),
+            text = isTextConfig ? storedAttrs.text.text : storedAttrs.text;
+          graphicAttributes.maxLineWidth = maxWidth === 1 / 0 ? storedAttrs.maxLineWidth : maxWidth, isTextConfig ? "html" === storedAttrs.text.type ? (graphicAttributes.html = {
+            dom: text,
+            width: null !== (_c = nextAttrs.width) && void 0 !== _c ? _c : maxWidth,
+            height: null !== (_d = nextAttrs.height) && void 0 !== _d ? _d : nextAttrs.fontSize,
+            anchorType: "position"
+          }, graphicAttributes.text = "") : "rich" === storedAttrs.text.type ? graphicAttributes.textConfig = text : graphicAttributes.text = text : graphicAttributes.text = text;
+        },
+        storedAttrs: "limitAttrs"
+      }],
+      [GrammarMarkType.rule]: [{
+        channels: ["x", "y", "x1", "y1"],
+        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+          const points = getRulePoints(storedAttrs);
+          graphicAttributes.points = points, graphicAttributes.x = 0, graphicAttributes.y = 0;
+        },
+        storedAttrs: "pointAttrs"
+      }],
+      [GrammarMarkType.symbol]: [{
+        channels: ["shape", "symbolType"],
+        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+          var _a;
+          graphicAttributes.symbolType = null !== (_a = nextAttrs.shape) && void 0 !== _a ? _a : nextAttrs.symbolType;
+        }
+      }, {
+        channels: ["image", "fill", "background"],
+        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+          nextAttrs.image ? (graphicAttributes.background = nextAttrs.image, graphicAttributes.fill = !1) : storedAttrs.image ? (graphicAttributes.background = storedAttrs.image, graphicAttributes.fill = !1) : (graphicAttributes.fill = storedAttrs.fill, graphicAttributes.background = storedAttrs.background);
+        },
+        storedAttrs: "imageAttrs"
+      }],
+      [GrammarMarkType.richtext]: [{
+        channels: ["text", "textConfig"],
+        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+          var _a, _b, _c, _d;
+          graphicAttributes.text = null, "rich" === (null === (_a = nextAttrs.text) || void 0 === _a ? void 0 : _a.type) ? graphicAttributes.textConfig = nextAttrs.text.text : "html" === (null === (_b = nextAttrs.textConfig) || void 0 === _b ? void 0 : _b.type) ? (graphicAttributes.html = {
+            dom: nextAttrs.textConfig.text,
+            width: nextAttrs.width,
+            height: null !== (_c = nextAttrs.height) && void 0 !== _c ? _c : nextAttrs.fontSize,
+            anchorType: "position"
+          }, graphicAttributes.text = "") : "rich" === (null === (_d = nextAttrs.textConfig) || void 0 === _d ? void 0 : _d.type) ? graphicAttributes.textConfig = nextAttrs.textConfig.text : graphicAttributes.textConfig = nextAttrs.textConfig;
+        }
+      }]
+    };
+    function cloneTransformAttributes(markType, attributes) {
+      var _a;
+      return (null !== (_a = transformsByType[markType]) && void 0 !== _a ? _a : []).reduce((clonedAttributes, transform) => (transform.channels.forEach(channel => {
+        has$1(attributes, channel) && (clonedAttributes[channel] = attributes[channel]);
+      }), clonedAttributes), {});
+    }
+    const transformAttributes = (markType, nextAttrs, element, markName) => {
+      const graphicAttributes = {},
+        changedKeys = nextAttrs ? Object.keys(nextAttrs) : [],
+        transforms = isString$1(markType) ? transformsByType[markType] : markType;
+      if (null == transforms ? void 0 : transforms.length) {
+        const tags = [];
+        changedKeys.forEach(key => {
+          let isTransformed = !1;
+          transforms.forEach((transform, index) => {
+            if (transform.channels.includes(key)) {
+              if (!tags[index]) if (transform.storedAttrs) {
+                const storedAttrs = storeOriginAttributes(transform.storedAttrs, transform.channels, graphicAttributes, nextAttrs, element, markName);
+                transform.transform(graphicAttributes, nextAttrs, storedAttrs);
+              } else transform.transform(graphicAttributes, nextAttrs, null);
+              tags[index] = !0, isTransformed = !0;
+            }
+          }), isTransformed || (commonAttributes.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key]);
+        });
+      } else changedKeys.forEach(key => {
+        commonAttributes.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key];
+      });
+      return graphicAttributes;
+    };
+
+    const isStopsEqual = (prev, next) => {
+        var _a, _b;
+        if (prev === next) return !0;
+        const prevLength = null !== (_a = prev && prev.length) && void 0 !== _a ? _a : 0;
+        return prevLength === (null !== (_b = next && next.length) && void 0 !== _b ? _b : 0) && 0 !== prevLength && prev.every((prevEntry, prevIndex) => !prevEntry && !next[prevIndex] || prevEntry && next[prevIndex] && prevEntry.color === next[prevIndex].color && prevEntry.offset === next[prevIndex].offset);
+      },
+      isColorAttrEqual = (prev, next) => {
+        if (prev === next) return !0;
+        if (typeof prev != typeof next) return !1;
+        if (isString$1(prev)) return !1;
+        if (prev.gradient !== next.gradient) return !1;
+        const prevKeys = Object.keys(prev),
+          nextKeys = Object.keys(next);
+        return prevKeys.length === nextKeys.length && prevKeys.every(key => "stops" === key ? isStopsEqual(prev[key], next[key]) : prev[key] === next[key]);
+      },
+      isLineDashEqual = (prev, next) => prev.length === next.length && prev.join("-") === next.join("-"),
+      isSegmentAttrEqual = (prev, next, key) => !(!isNil$1(prev) || !isNil$1(next)) || !isNil$1(prev) && !isNil$1(next) && ("lineDash" === key ? isLineDashEqual(prev, next) : "stroke" === key || "fill" === key ? isColorAttrEqual(prev, next) : prev === next),
+      fillAttrs = ["fill", "fillOpacity", "background", "texture", "texturePadding", "textureSize", "textureColor"],
+      strokeAttrs = ["stroke", "strokeOpacity", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "lineWidth", "miterLimit"],
+      areaAttrs = fillAttrs.concat(strokeAttrs);
+    function getLineSegmentConfigs(items, points, element) {
+      var _a;
+      if (!items || items.length <= 1) return null;
+      const checkAttributes = "area" === (null === (_a = null == element ? void 0 : element.mark) || void 0 === _a ? void 0 : _a.markType) ? areaAttrs : strokeAttrs,
+        segments = [];
+      let prevSegmentAttrs = null;
+      return items.forEach((item, index) => {
+        prevSegmentAttrs && checkAttributes.every(key => isSegmentAttrEqual(prevSegmentAttrs[key], item[key], key)) || (segments.length && (segments[segments.length - 1].endIndex = index), prevSegmentAttrs = item, segments.push({
+          attrs: prevSegmentAttrs,
+          startIndex: index
+        }));
+      }), segments.length >= 2 ? segments.map(entry => {
+        const res = transformAttributes(GrammarMarkType.line, entry.attrs, element);
+        return res.points = points.slice(entry.startIndex, isNil$1(entry.endIndex) ? points.length : entry.endIndex), res;
+      }) : null;
+    }
+    function getLinePointsFromSegments(segments) {
+      return segments ? segments.reduce((points, segment) => points.concat(segment.points), []) : null;
+    }
+
     let Element$1 = class Element {
       constructor(mark) {
         this.data = null, this.states = [], this.diffState = DiffState.enter, this.isReserved = !1, this.runtimeStatesEncoder = null, this.items = [], this.getStateAttrs = (stateName, nextStates) => {
@@ -41499,7 +41514,7 @@
             title: viewOptions.rendererTitle,
             beforeRender: viewOptions.beforeRender,
             afterRender: viewOptions.afterRender,
-            disableDirtyBounds: !!viewOptions.disableDirtyBounds,
+            disableDirtyBounds: !0,
             autoRender: !0,
             pluginList: viewOptions.pluginList,
             enableHtmlAttribute: viewOptions.enableHtmlAttribute
@@ -41980,7 +41995,7 @@
         value: null !== (_b = option[SIGNAL_HEIGHT]) && void 0 !== _b ? _b : 0
       }, {
         id: SIGNAL_PADDING,
-        value: normalizePadding(null !== (_d = null !== (_c = option[SIGNAL_PADDING]) && void 0 !== _c ? _c : config[SIGNAL_PADDING]) && void 0 !== _d ? _d : theme.padding)
+        value: normalizePadding(null !== (_d = null !== (_c = option[SIGNAL_PADDING]) && void 0 !== _c ? _c : config[SIGNAL_PADDING]) && void 0 !== _d ? _d : null == theme ? void 0 : theme.padding)
       }, {
         id: SIGNAL_VIEW_WIDTH,
         update: {
@@ -43203,7 +43218,7 @@
         const currentData = null != data ? data : DefaultMarkData;
         isCollectionMark || this.differ.setCurrentData(groupData(currentData, datum => `${groupKeyGetter(datum)}-${keyGetter(datum)}`, void 0)), this.differ.doDiff(), enterElements.forEach(element => {
           this.elementMap.delete(isCollectionMark ? element.groupKey : `${element.groupKey}-${element.key}`), element.remove(), element.release();
-        }), this.elements = elements, sort && this.elements.sort((elementA, elementB) => sort(elementA.getDatum(), elementB.getDatum()));
+        }), this.elements = elements, sort && this.elements.length >= 2 && this.elements.sort((elementA, elementB) => sort(elementA.getDatum(), elementB.getDatum()));
       }
       evaluateState(elements, stateSpec, parameters) {
         stateSpec && elements.forEach(element => {
@@ -44401,7 +44416,7 @@
 
     class ViewAnimate {
       constructor(view) {
-        this._animations = [], this._additionalAnimateMarks = [], this._onAnimationStart = event => {
+        this._animations = [], this._additionalAnimateMarks = [], this.isEnabled = !0, this._onAnimationStart = event => {
           this._additionalAnimateMarks = this._additionalAnimateMarks.filter(mark => {
             var _a;
             return null === (_a = null == mark ? void 0 : mark.animate) || void 0 === _a ? void 0 : _a.isAnimating();
@@ -44444,13 +44459,13 @@
         }), this;
       }
       enable() {
-        return this._view.traverseMarkTree(mark => {
+        return this.isEnabled = !0, this._view.traverseMarkTree(mark => {
           var _a, _b;
           null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.enable) || void 0 === _b || _b.call(_a);
         }), this;
       }
       disable() {
-        return this._view.traverseMarkTree(mark => {
+        return this.isEnabled = !1, this._view.traverseMarkTree(mark => {
           var _a, _b;
           null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.disable) || void 0 === _b || _b.call(_a);
         }), this._additionalAnimateMarks.forEach(mark => {
@@ -44477,9 +44492,9 @@
         });
       }
       animate() {
-        return this._view.traverseMarkTree(mark => {
+        return this.isEnabled ? (this._view.traverseMarkTree(mark => {
           mark.isUpdated && mark.animate && mark.animate.animate(), mark.cleanExitElements(), mark.isUpdated = !1;
-        }, null, !0), this;
+        }, null, !0), this) : this;
       }
       animateAddition(additionMark) {
         return additionMark.animate.animate(), this._additionalAnimateMarks.push(additionMark), this;
@@ -44489,120 +44504,6 @@
       }
     }
 
-    class Interval extends Mark {
-      encodeState(state, channel, value) {
-        return super.encodeState(state, channel, value), this._updateComponentEncoders(state), this;
-      }
-      _updateComponentEncoders(state) {
-        this._encoders || (this._encoders = {});
-        const userEncoder = this.spec.encode[state];
-        if (userEncoder && "update" === state) {
-          const params = this.parameters(),
-            scales = isFunctionType(userEncoder) ? null : Object.keys(userEncoder).reduce((res, channel) => (isScaleEncode(userEncoder[channel]) && (res[channel] = getGrammarOutput(userEncoder[channel].scale, params)), res), {});
-          this._encoders[state] = {
-            callback: (datum, element, parameters) => {
-              var _a, _b, _c;
-              const userEncodeRes = invokeEncoder(userEncoder, datum, element, parameters);
-              if (this.disableCoordinateTransform = !1, scales && scales.x && scales.x.type === ScaleEnum.Band) {
-                if (!isNil$1(scales.y)) {
-                  const domain = scales.y.domain(),
-                    min = Math.min.apply(null, domain),
-                    max = Math.max.apply(null, domain),
-                    baseValue = min > 0 ? min : max < 0 ? max : 0;
-                  userEncodeRes.y1 = scales.y.scale(baseValue);
-                }
-                const bandWidth = scales.x.bandwidth();
-                userEncodeRes.x = userEncodeRes.x + bandWidth / 4, userEncodeRes.x1 = userEncodeRes.x + bandWidth / 2;
-              } else if (scales && scales.y && scales.y.type === ScaleEnum.Band) {
-                if (!isNil$1(scales.x)) {
-                  const domain = scales.x.domain(),
-                    min = Math.min.apply(null, domain),
-                    max = Math.max.apply(null, domain),
-                    baseValue = min > 0 ? min : max < 0 ? max : 0;
-                  userEncodeRes.x1 = scales.x.scale(baseValue);
-                }
-                const bandWidth = scales.y.bandwidth();
-                userEncodeRes.y = userEncodeRes.y + bandWidth / 4, userEncodeRes.y1 = userEncodeRes.y + bandWidth / 2;
-              }
-              if (scales) {
-                const coord = (null !== (_b = this.view.getScaleById(null === (_a = userEncoder.x) || void 0 === _a ? void 0 : _a.scale)) && void 0 !== _b ? _b : this.view.getScaleById(null === (_c = userEncoder.y) || void 0 === _c ? void 0 : _c.scale)).getCoordinate();
-                if (coord && "polar" === coord.type) {
-                  this.disableCoordinateTransform = !0;
-                  const origin = coord.origin();
-                  userEncodeRes.cx = origin.x, userEncodeRes.cy = origin.y;
-                }
-              }
-              return userEncodeRes;
-            }
-          };
-        } else this._encoders[state] = userEncoder;
-      }
-      _getEncoders() {
-        var _a;
-        return null !== (_a = this._encoders) && void 0 !== _a ? _a : {};
-      }
-      getAttributeTransforms() {
-        return this.coord && "polar" === this.coord.output().type ? [{
-          channels: ["x", "y", "x1", "y1", "cx", "cy"],
-          transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-            graphicAttributes.x = storedAttrs.cx, graphicAttributes.y = storedAttrs.cy, this.coord.output().isTransposed() ? (graphicAttributes.startAngle = storedAttrs.y, graphicAttributes.endAngle = storedAttrs.y1, graphicAttributes.innerRadius = storedAttrs.x, graphicAttributes.outerRadius = storedAttrs.x1) : (graphicAttributes.startAngle = storedAttrs.x, graphicAttributes.endAngle = storedAttrs.x1, graphicAttributes.innerRadius = storedAttrs.y, graphicAttributes.outerRadius = storedAttrs.y1);
-          },
-          storedAttrs: "sizeAttrs"
-        }] : transformsByType.rect;
-      }
-      addGraphicItem(attrs, groupKey) {
-        const graphicItem = createGraphicItem(this, this.coord && "polar" === this.coord.output().type ? GrammarMarkType.arc : GrammarMarkType.rect, attrs);
-        return super.addGraphicItem(attrs, groupKey, graphicItem);
-      }
-      release() {
-        super.release(), this._encoders = null;
-      }
-    }
-
-    class Cell extends Mark {
-      encodeState(state, channel, value) {
-        return super.encodeState(state, channel, value), this._updateComponentEncoders(state), this;
-      }
-      _updateComponentEncoders(state) {
-        this._encoders || (this._encoders = {});
-        const userEncoder = this.spec.encode[state];
-        if (userEncoder && "update" === state) {
-          const params = this.parameters(),
-            scales = isFunctionType(userEncoder) ? null : Object.keys(userEncoder).reduce((res, channel) => (isScaleEncode(userEncoder[channel]) && (res[channel] = getGrammarOutput(userEncoder[channel].scale, params)), res), {});
-          this._encoders[state] = {
-            callback: (datum, element, parameters) => {
-              const userEncodeRes = invokeEncoder(userEncoder, datum, element, parameters);
-              if (isNil$1(userEncodeRes.size)) {
-                const sizeX = scales.x ? getBandWidthOfScale(scales.x) : void 0,
-                  sizeY = scales.y ? getBandWidthOfScale(scales.y) : void 0;
-                isNil$1(sizeX) && isNil$1(sizeY) ? userEncodeRes.size = 10 : isNil$1(sizeX) ? userEncodeRes.size = sizeY : isNil$1(sizeY) && (userEncodeRes.size = sizeX), userEncodeRes.size = [sizeX, sizeY];
-              }
-              return isNil$1(userEncodeRes.shape) && (userEncodeRes.shape = "rect"), userEncodeRes;
-            }
-          };
-        } else this._encoders[state] = userEncoder;
-      }
-      _getEncoders() {
-        var _a;
-        return null !== (_a = this._encoders) && void 0 !== _a ? _a : {};
-      }
-      getAttributeTransforms() {
-        return [{
-          channels: ["size", "padding"],
-          transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-            if (isNumber$2(storedAttrs.padding) && storedAttrs.padding > 0) graphicAttributes.size = isArray$1(storedAttrs.size) ? storedAttrs.size.map(entry => Math.max(entry - storedAttrs.padding, 1)) : Math.max(storedAttrs.size - storedAttrs.padding, 1);else if (isArray$1(storedAttrs.padding) && 2 === storedAttrs.padding.length) {
-              const arraySize = isArray$1(storedAttrs.size) ? storedAttrs.size : [storedAttrs.size, storedAttrs.size];
-              graphicAttributes.size = [Math.max(arraySize[0] - storedAttrs.padding[0], 1), Math.max(arraySize[1] - storedAttrs.padding[1], 1)];
-            } else graphicAttributes.size = storedAttrs.size;
-          },
-          storedAttrs: "paddingAttrs"
-        }].concat(transformsByType.symbol);
-      }
-      release() {
-        super.release(), this._encoders = null;
-      }
-    }
-
     class Text extends Mark {
       addGraphicItem(initAttrs, groupKey) {
         const textConfig = null == initAttrs ? void 0 : initAttrs.text,
@@ -44618,6 +44519,7 @@
         super.release();
       }
     }
+    Text.markType = GrammarMarkType.text;
 
     const axis = {
         label: {
@@ -45426,17 +45328,11 @@
           case GrammarMarkType.component:
             mark = Factory$1.hasComponent(null == markOptions ? void 0 : markOptions.componentType) ? Factory$1.createComponent(null == markOptions ? void 0 : markOptions.componentType, this, groupMark, null == markOptions ? void 0 : markOptions.mode) : new Component(this, null == markOptions ? void 0 : markOptions.componentType, groupMark, null == markOptions ? void 0 : markOptions.mode);
             break;
-          case GrammarMarkType.interval:
-            mark = new Interval(this, type, groupMark);
-            break;
-          case GrammarMarkType.cell:
-            mark = new Cell(this, type, groupMark);
-            break;
           case GrammarMarkType.text:
             mark = new Text(this, type, groupMark);
             break;
           default:
-            mark = new Mark(this, type, groupMark);
+            mark = Factory$1.hasMark(type) ? Factory$1.createMark(type, this, groupMark) : new Mark(this, type, groupMark);
         }
         return this.grammars.record(mark), this._dataflow.add(mark), mark;
       }
@@ -45556,7 +45452,7 @@
         return this.removeAllInteractions(), this.removeAllGrammars(), this.parseSpec(spec);
       }
       parseBuiltIn() {
-        builtInSignals(this._options, this._config, this.getCurrentTheme()).map(signalSpec => {
+        builtInSignals(this._options, this._config, this.getCurrentTheme()).forEach(signalSpec => {
           const signal = this.signal().parse(signalSpec);
           signalSpec.value && signal.set(signalSpec.value);
         });
@@ -45592,8 +45488,8 @@
         });
       }
       theme(theme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return isString$1(theme) ? this._theme = null !== (_a = ThemeManager$1.getTheme(theme)) && void 0 !== _a ? _a : ThemeManager$1.getDefaultTheme() : this._theme = theme, this.background(null !== (_d = null !== (_c = null === (_b = this._spec) || void 0 === _b ? void 0 : _b.background) && void 0 !== _c ? _c : this._options.background) && void 0 !== _d ? _d : this._theme.background), this.padding(null !== (_g = null !== (_f = null === (_e = this._spec) || void 0 === _e ? void 0 : _e.padding) && void 0 !== _f ? _f : this._options.padding) && void 0 !== _g ? _g : this._theme.padding), null === (_j = null === (_h = this.renderer.stage()) || void 0 === _h ? void 0 : _h.setTheme) || void 0 === _j || _j.call(_h, Object.assign({}, this._theme.marks)), this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        return isString$1(theme) ? this._theme = null !== (_a = ThemeManager$1.getTheme(theme)) && void 0 !== _a ? _a : ThemeManager$1.getDefaultTheme() : this._theme = theme, this._theme ? (this.background(null !== (_d = null !== (_c = null === (_b = this._spec) || void 0 === _b ? void 0 : _b.background) && void 0 !== _c ? _c : this._options.background) && void 0 !== _d ? _d : this._theme.background), this.padding(null !== (_g = null !== (_f = null === (_e = this._spec) || void 0 === _e ? void 0 : _e.padding) && void 0 !== _f ? _f : this._options.padding) && void 0 !== _g ? _g : this._theme.padding), null === (_j = null === (_h = this.renderer.stage()) || void 0 === _h ? void 0 : _h.setTheme) || void 0 === _j || _j.call(_h, Object.assign({}, this._theme.marks))) : (this.background(null !== (_l = null === (_k = this._spec) || void 0 === _k ? void 0 : _k.background) && void 0 !== _l ? _l : this._options.background), this.padding(null !== (_o = null === (_m = this._spec) || void 0 === _m ? void 0 : _m.padding) && void 0 !== _o ? _o : this._options.padding)), this;
       }
       getCurrentTheme() {
         return this._theme;
@@ -45718,7 +45614,7 @@
           const normalizedRunningConfig = normalizeRunningConfig(runningConfig);
           this.reuseCachedGrammars(normalizedRunningConfig);
           const grammarWillDetach = this._cachedGrammars.size() > 0;
-          this.detachCachedGrammar();
+          grammarWillDetach && this.detachCachedGrammar();
           const hasResize = this._resizeRenderer(),
             hasUpdate = this._dataflow.hasCommitted();
           return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), yield this._dataflow.evaluate(), this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, yield this._dataflow.evaluate()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!1), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach(morphMarks => {
@@ -45731,7 +45627,7 @@
         const normalizedRunningConfig = normalizeRunningConfig(runningConfig);
         this.reuseCachedGrammars(normalizedRunningConfig);
         const grammarWillDetach = this._cachedGrammars.size() > 0;
-        this.detachCachedGrammar();
+        grammarWillDetach && this.detachCachedGrammar();
         const hasResize = this._resizeRenderer(),
           hasUpdate = this._dataflow.hasCommitted();
         return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), this._dataflow.evaluateSync(), this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, this._dataflow.evaluateSync()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!0), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach(morphMarks => {
@@ -45972,12 +45868,9 @@
       }
       initialize() {
         var _a;
-        this.grammars = new RecordedGrammars(grammar => grammar.id(), (key, grammar) => this.logger.warn(`Grammar id '${key}' has been occupied`, grammar)), this._cachedGrammars = new RecordedTreeGrammars(grammar => grammar.id()), this._options.logger && Logger.setInstance(this._options.logger), this.logger = Logger.getInstance(null !== (_a = this._options.logLevel) && void 0 !== _a ? _a : 0), this._dataflow = new Dataflow(), this.animate = new ViewAnimate(this), this._morph = new Morph(), this._theme = ThemeManager$1.getDefaultTheme(), this._options.hooks && (Object.keys(this._options.hooks).forEach(key => {
+        this.grammars = new RecordedGrammars(grammar => grammar.id(), (key, grammar) => this.logger.warn(`Grammar id '${key}' has been occupied`, grammar)), this._cachedGrammars = new RecordedTreeGrammars(grammar => grammar.id()), this._options.logger && Logger.setInstance(this._options.logger), this.logger = Logger.getInstance(null !== (_a = this._options.logLevel) && void 0 !== _a ? _a : 0), this._dataflow = new Dataflow(), this.animate = new ViewAnimate(this), this._morph = new Morph(), this._options.hooks && (Object.keys(this._options.hooks).forEach(key => {
           this.on(key, this._options.hooks[key]);
-        }), this.hooks = this._options.hooks), this.container = null, this.renderer = null, this._eventListeners = [], this._eventConfig = initializeEventConfig(this._options.eventConfig), this._theme = ThemeManager$1.getDefaultTheme(), this.parseBuiltIn(), configureEnvironment(this._options), this.initializeRenderer(), this._eventConfig.disable || this.initEvent(), this._bindResizeEvent(), this._currentDataflow = null, this._needBuildLayoutTree = !0, this._layoutState = LayoutState.before, this.theme(this._theme);
-      }
-      normalBrowserEnv() {
-        return "browser" === this._options.mode;
+        }), this.hooks = this._options.hooks), this.container = null, this.renderer = null, this._eventListeners = [], this._eventConfig = initializeEventConfig(this._options.eventConfig), this._theme = this._options.disableTheme ? null : ThemeManager$1.getDefaultTheme(), this.parseBuiltIn(), configureEnvironment(this._options), this.initializeRenderer(), this._eventConfig.disable || this.initEvent(), this._bindResizeEvent(), this._currentDataflow = null, this._needBuildLayoutTree = !0, this._layoutState = LayoutState.before, this.theme(this._theme);
       }
       pauseProgressive() {
         return !1;
@@ -47935,15 +47828,16 @@
     });
 
     const moveIn = (element, options, animationParameters) => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c;
       const offset = null !== (_a = null == options ? void 0 : options.offset) && void 0 !== _a ? _a : 0,
         groupBounds = animationParameters.group ? animationParameters.group.getBounds() : null,
         groupWidth = null !== (_b = null == groupBounds ? void 0 : groupBounds.width()) && void 0 !== _b ? _b : animationParameters.width,
         groupHeight = null !== (_c = null == groupBounds ? void 0 : groupBounds.height()) && void 0 !== _c ? _c : animationParameters.height,
         changedX = ("negative" === (null == options ? void 0 : options.orient) ? groupWidth : 0) + offset,
         changedY = ("negative" === (null == options ? void 0 : options.orient) ? groupHeight : 0) + offset,
-        fromX = isValidNumber$1(null === (_d = null == options ? void 0 : options.point) || void 0 === _d ? void 0 : _d.x) ? options.point.x : changedX,
-        fromY = isValidNumber$1(null === (_e = null == options ? void 0 : options.point) || void 0 === _e ? void 0 : _e.y) ? options.point.y : changedY;
+        point = isFunction$1(null == options ? void 0 : options.point) ? options.point.call(null, element.getDatum(), element, animationParameters) : null == options ? void 0 : options.point,
+        fromX = isValidNumber$1(null == point ? void 0 : point.x) ? point.x : changedX,
+        fromY = isValidNumber$1(null == point ? void 0 : point.y) ? point.y : changedY;
       switch (null == options ? void 0 : options.direction) {
         case "x":
           return {
@@ -47977,15 +47871,16 @@
       }
     };
     const moveOut = (element, options, animationParameters) => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c;
       const offset = null !== (_a = null == options ? void 0 : options.offset) && void 0 !== _a ? _a : 0,
         groupBounds = animationParameters.group ? animationParameters.group.getBounds() : null,
         groupWidth = null !== (_b = null == groupBounds ? void 0 : groupBounds.width()) && void 0 !== _b ? _b : animationParameters.width,
         groupHeight = null !== (_c = null == groupBounds ? void 0 : groupBounds.height()) && void 0 !== _c ? _c : animationParameters.height,
         changedX = ("negative" === (null == options ? void 0 : options.orient) ? groupWidth : 0) + offset,
         changedY = ("negative" === (null == options ? void 0 : options.orient) ? groupHeight : 0) + offset,
-        fromX = isValidNumber$1(null === (_d = null == options ? void 0 : options.point) || void 0 === _d ? void 0 : _d.x) ? options.point.x : changedX,
-        fromY = isValidNumber$1(null === (_e = null == options ? void 0 : options.point) || void 0 === _e ? void 0 : _e.y) ? options.point.y : changedY;
+        point = isFunction$1(null == options ? void 0 : options.point) ? options.point.call(null, element.getDatum(), element, animationParameters) : null == options ? void 0 : options.point,
+        fromX = isValidNumber$1(null == point ? void 0 : point.x) ? point.x : changedX,
+        fromY = isValidNumber$1(null == point ? void 0 : point.y) ? point.y : changedY;
       switch (null == options ? void 0 : options.direction) {
         case "x":
           return {
@@ -48210,6 +48105,54 @@
       Factory$1.registerAnimationType("update", update);
     };
 
+    class Cell extends Mark {
+      encodeState(state, channel, value) {
+        return super.encodeState(state, channel, value), this._updateComponentEncoders(state), this;
+      }
+      _updateComponentEncoders(state) {
+        this._encoders || (this._encoders = {});
+        const userEncoder = this.spec.encode[state];
+        if (userEncoder && "update" === state) {
+          const params = this.parameters(),
+            scales = isFunctionType(userEncoder) ? null : Object.keys(userEncoder).reduce((res, channel) => (isScaleEncode(userEncoder[channel]) && (res[channel] = getGrammarOutput(userEncoder[channel].scale, params)), res), {});
+          this._encoders[state] = {
+            callback: (datum, element, parameters) => {
+              const userEncodeRes = invokeEncoder(userEncoder, datum, element, parameters);
+              if (isNil$1(userEncodeRes.size)) {
+                const sizeX = scales.x ? getBandWidthOfScale(scales.x) : void 0,
+                  sizeY = scales.y ? getBandWidthOfScale(scales.y) : void 0;
+                isNil$1(sizeX) && isNil$1(sizeY) ? userEncodeRes.size = 10 : isNil$1(sizeX) ? userEncodeRes.size = sizeY : isNil$1(sizeY) && (userEncodeRes.size = sizeX), userEncodeRes.size = [sizeX, sizeY];
+              }
+              return isNil$1(userEncodeRes.shape) && (userEncodeRes.shape = "rect"), userEncodeRes;
+            }
+          };
+        } else this._encoders[state] = userEncoder;
+      }
+      _getEncoders() {
+        var _a;
+        return null !== (_a = this._encoders) && void 0 !== _a ? _a : {};
+      }
+      getAttributeTransforms() {
+        return [{
+          channels: ["size", "padding"],
+          transform: (graphicAttributes, nextAttrs, storedAttrs) => {
+            if (isNumber$2(storedAttrs.padding) && storedAttrs.padding > 0) graphicAttributes.size = isArray$1(storedAttrs.size) ? storedAttrs.size.map(entry => Math.max(entry - storedAttrs.padding, 1)) : Math.max(storedAttrs.size - storedAttrs.padding, 1);else if (isArray$1(storedAttrs.padding) && 2 === storedAttrs.padding.length) {
+              const arraySize = isArray$1(storedAttrs.size) ? storedAttrs.size : [storedAttrs.size, storedAttrs.size];
+              graphicAttributes.size = [Math.max(arraySize[0] - storedAttrs.padding[0], 1), Math.max(arraySize[1] - storedAttrs.padding[1], 1)];
+            } else graphicAttributes.size = storedAttrs.size;
+          },
+          storedAttrs: "paddingAttrs"
+        }].concat(transformsByType.symbol);
+      }
+      release() {
+        super.release(), this._encoders = null;
+      }
+    }
+    Cell.markType = GrammarMarkType.cell;
+    const registerCellMark = () => {
+      Factory$1.registerMark(GrammarMarkType.cell, Cell);
+    };
+
     const BASE_EVENTS = [
         'pointerdown',
         'pointerup',
@@ -48461,7 +48404,7 @@
             offset: 5,
             position: 'inside',
             style: {
-                fill: { type: 'palette', key: 'labelReverseFontColor' }
+                fill: { type: 'palette', key: 'axisMarkerFontColor' }
             },
             minLabel: {
                 position: minMaxPositionEnum.end
@@ -48692,7 +48635,7 @@
             visible: false,
             style: {
                 fontSize: THEME_CONSTANTS.l5FontSize,
-                fill: { type: 'palette', key: 'axisFontColor' },
+                fill: { type: 'palette', key: 'axisLabelFontColor' },
                 fontWeight: 'normal',
                 fillOpacity: 1
             }
@@ -48712,7 +48655,7 @@
             visible: false,
             style: {
                 fontSize: THEME_CONSTANTS.l5FontSize,
-                fill: { type: 'palette', key: 'axisFontColor' },
+                fill: { type: 'palette', key: 'axisLabelFontColor' },
                 fontWeight: 'normal',
                 fillOpacity: 1
             }
@@ -48769,7 +48712,7 @@
             space: 10,
             style: {
                 fontSize: THEME_CONSTANTS.l5FontSize,
-                fill: { type: 'palette', key: 'axisFontColor' },
+                fill: { type: 'palette', key: 'axisLabelFontColor' },
                 fontWeight: 'normal',
                 fillOpacity: 1
             }
@@ -48845,7 +48788,7 @@
         visible: false,
         style: {
             fontWeight: 'normal',
-            fill: { type: 'palette', key: 'labelReverseFontColor' },
+            fill: { type: 'palette', key: 'axisMarkerFontColor' },
             fontSize: THEME_CONSTANTS.l5FontSize
         },
         labelBackground: {
@@ -48856,9 +48799,9 @@
                 right: 2
             },
             style: {
-                fill: { type: 'palette', key: 'primaryFontColor' },
+                fill: { type: 'palette', key: 'axisMarkerBackgroundColor' },
                 outerBorder: {
-                    stroke: { type: 'palette', key: 'primaryFontColor' },
+                    stroke: { type: 'palette', key: 'axisMarkerBackgroundColor' },
                     distance: 0,
                     lineWidth: 3
                 },
@@ -48885,7 +48828,7 @@
             type: 'line',
             visible: true,
             style: {
-                stroke: { type: 'palette', key: 'secondaryFontColor' },
+                stroke: { type: 'palette', key: 'markLineStrokeColor' },
                 opacity: 0.7,
                 lineDash: [2, 3]
             }
@@ -48911,15 +48854,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             background: {
                 size: 6,
                 style: {
-                    stroke: { type: 'palette', key: 'dataZoomHandlerStrokeColor' },
+                    stroke: { type: 'palette', key: 'dataZoomHandleStrokeColor' },
                     cornerRadius: 2
                 }
             },
             icon: {
                 style: {
                     size: 4,
-                    fill: { type: 'palette', key: 'dataZoomHandlerFillColor' },
-                    stroke: { type: 'palette', key: 'dataZoomHandlerStrokeColor' },
+                    fill: { type: 'palette', key: 'sliderHandleColor' },
+                    stroke: { type: 'palette', key: 'dataZoomHandleStrokeColor' },
                     symbolType: 'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',
                     lineWidth: 0.5
                 }
@@ -48928,16 +48871,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         background: {
             size: 20,
             style: {
-                fill: { type: 'palette', key: 'dataZoomBackgroundColor' },
+                fill: { type: 'palette', key: 'sliderRailColor' },
                 lineWidth: 0
             }
         },
         selectedBackground: {
             style: {
-                fill: { type: 'palette', key: 'dataZoomSelectedColor' },
+                fill: { type: 'palette', key: 'sliderTrackColor' },
                 fillOpacity: 0.1,
                 outerBorder: {
-                    stroke: { type: 'palette', key: 'dataZoomSelectedColor' },
+                    stroke: { type: 'palette', key: 'sliderTrackColor' },
                     strokeOpacity: 0.2,
                     distance: -0.5,
                     lineWidth: 1
@@ -48963,10 +48906,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         startHandler: {
             style: {
                 symbolType: DataZoomHandlerSymbolType,
-                fill: { type: 'palette', key: 'dataZoomHandlerFillColor' },
+                fill: { type: 'palette', key: 'sliderHandleColor' },
                 scaleX: 1.2,
                 scaleY: 1.2,
-                stroke: { type: 'palette', key: 'dataZoomHandlerStrokeColor' },
+                stroke: { type: 'palette', key: 'dataZoomHandleStrokeColor' },
                 lineWidth: 1,
                 zIndex: 100
             }
@@ -48974,10 +48917,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         endHandler: {
             style: {
                 symbolType: DataZoomHandlerSymbolType,
-                fill: { type: 'palette', key: 'dataZoomHandlerFillColor' },
+                fill: { type: 'palette', key: 'sliderHandleColor' },
                 scaleX: 1.2,
                 scaleY: 1.2,
-                stroke: { type: 'palette', key: 'dataZoomHandlerStrokeColor' },
+                stroke: { type: 'palette', key: 'dataZoomHandleStrokeColor' },
                 lineWidth: 1,
                 zIndex: 100
             }
@@ -49032,7 +48975,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             visible: true,
             style: {
                 fontSize: THEME_CONSTANTS.l2FontSize,
-                fill: { type: 'palette', key: 'secondaryFontColor' },
+                fill: { type: 'palette', key: 'tertiaryFontColor' },
                 fontWeight: 'normal',
                 fillOpacity: 1,
                 textBaseline: 'top',
@@ -49100,7 +49043,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             shadowBlur: 12,
             shadowOffsetX: 0,
             shadowOffsetY: 4,
-            shadowColor: { type: 'palette', key: 'shadowColor', a: 0.3 }
+            shadowColor: { type: 'palette', key: 'shadowColor' }
         }
     };
     const colorLegend$1 = {
@@ -49108,14 +49051,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 width: 200,
                 height: 8,
                 style: {
-                    fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
+                    fill: { type: 'palette', key: 'sliderRailColor' }
                 }
             }, handler: handlerTheme$2 }),
         vertical: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME$1), { rail: {
                 width: 8,
                 height: 200,
                 style: {
-                    fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
+                    fill: { type: 'palette', key: 'sliderRailColor' }
                 }
             }, handler: handlerTheme$2 })
     };
@@ -49143,10 +49086,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             background: {
                 state: {
                     selectedHover: {
-                        fill: { type: 'palette', key: 'axisGridColor' }
+                        fill: { type: 'palette', key: 'hoverBackgroundColor' }
                     },
                     unSelectedHover: {
-                        fill: { type: 'palette', key: 'axisGridColor' }
+                        fill: { type: 'palette', key: 'hoverBackgroundColor' }
                     }
                 }
             },
@@ -49190,9 +49133,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             outerBorder: {
                 lineWidth: 2,
                 distance: 0.8,
-                stroke: { type: 'palette', key: 'dataZoomSelectedColor' }
+                stroke: { type: 'palette', key: 'sliderTrackColor' }
             },
-            fill: { type: 'palette', key: 'dataZoomHandlerFillColor' }
+            fill: { type: 'palette', key: 'sliderHandleColor' }
         }
     };
     const sizeLegend$1 = {
@@ -49200,26 +49143,26 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 fill: { type: 'palette', key: 'dataZoomChartColor' }
             }, track: {
                 style: {
-                    fill: { type: 'palette', key: 'dataZoomSelectedColor', a: 0.8 }
+                    fill: { type: 'palette', key: 'sliderTrackColor', a: 0.8 }
                 }
             }, rail: {
                 width: 200,
                 height: 4,
                 style: {
-                    fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
+                    fill: { type: 'palette', key: 'sliderRailColor' }
                 }
             }, handler: handlerTheme$1 }),
         vertical: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME$1), { sizeBackground: {
                 fill: { type: 'palette', key: 'dataZoomChartColor' }
             }, track: {
                 style: {
-                    fill: { type: 'palette', key: 'dataZoomSelectedColor', a: 0.8 }
+                    fill: { type: 'palette', key: 'sliderTrackColor', a: 0.8 }
                 }
             }, rail: {
                 width: 4,
                 height: 200,
                 style: {
-                    fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
+                    fill: { type: 'palette', key: 'sliderRailColor' }
                 }
             }, handler: handlerTheme$1 })
     };
@@ -49298,7 +49241,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         line: {
             style: {
                 lineDash: [3, 3],
-                stroke: { type: 'palette', key: 'primaryFontColor' }
+                stroke: { type: 'palette', key: 'markLineStrokeColor' }
             }
         },
         startSymbol: {
@@ -49306,9 +49249,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             symbolType: 'triangle',
             size: 10,
             style: {
+                fill: { type: 'palette', key: 'markLineStrokeColor' },
                 stroke: null,
-                lineWidth: 0,
-                fill: { type: 'palette', key: 'primaryFontColor' }
+                lineWidth: 0
             }
         },
         endSymbol: {
@@ -49316,9 +49259,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             symbolType: 'triangle',
             size: 10,
             style: {
+                fill: { type: 'palette', key: 'markLineStrokeColor' },
                 stroke: null,
-                lineWidth: 0,
-                fill: { type: 'palette', key: 'primaryFontColor' }
+                lineWidth: 0
             }
         },
         label: {
@@ -49353,12 +49296,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 size: 5,
                 visible: true,
                 style: {
-                    fill: { type: 'palette', key: 'primaryFontColor' }
+                    fill: { type: 'palette', key: 'markLineStrokeColor' },
+                    stroke: null,
+                    lineWidth: 0
+                }
+            },
+            endSymbol: {
+                style: {
+                    fill: { type: 'palette', key: 'markLineStrokeColor' },
+                    stroke: null,
+                    lineWidth: 0
                 }
             },
             line: {
                 style: {
-                    stroke: { type: 'palette', key: 'primaryFontColor' }
+                    stroke: { type: 'palette', key: 'markLineStrokeColor' }
                 }
             }
         },
@@ -49377,17 +49329,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         slider: {
             space: 10,
             trackStyle: {
-                fill: { type: 'palette', key: 'dataZoomSelectedColor' },
+                fill: { type: 'palette', key: 'sliderTrackColor' },
                 fillOpacity: 0.8
             },
             railStyle: {
-                fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
+                fill: { type: 'palette', key: 'sliderRailColor' }
             },
             handlerStyle: {
                 size: 15,
                 stroke: { type: 'palette', key: 'backgroundColor' },
                 lineWidth: 2,
-                fill: { type: 'palette', key: 'dataZoomSelectedColor' }
+                fill: { type: 'palette', key: 'playerControllerColor' }
             }
         },
         controller: {
@@ -49396,7 +49348,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 space: 0,
                 style: {
                     size: 25,
-                    fill: { type: 'palette', key: 'dataZoomSelectedColor' },
+                    fill: { type: 'palette', key: 'playerControllerColor' },
                     fillOpacity: 0.8
                 }
             },
@@ -49405,7 +49357,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 space: 0,
                 style: {
                     size: 25,
-                    fill: { type: 'palette', key: 'dataZoomSelectedColor' },
+                    fill: { type: 'palette', key: 'playerControllerColor' },
                     fillOpacity: 0.8
                 }
             },
@@ -49415,7 +49367,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 position: 'start',
                 style: {
                     size: 12,
-                    fill: { type: 'palette', key: 'dataZoomSelectedColor' },
+                    fill: { type: 'palette', key: 'playerControllerColor' },
                     fillOpacity: 0.8
                 }
             },
@@ -49425,7 +49377,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 position: 'end',
                 style: {
                     size: 12,
-                    fill: { type: 'palette', key: 'dataZoomSelectedColor' },
+                    fill: { type: 'palette', key: 'playerControllerColor' },
                     fillOpacity: 0.8
                 }
             }
@@ -49445,7 +49397,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         subtextStyle: {
             fontSize: THEME_CONSTANTS.l4FontSize,
             lineHeight: THEME_CONSTANTS.l4LineHeight,
-            fill: { type: 'palette', key: 'secondaryFontColor' }
+            fill: { type: 'palette', key: 'tertiaryFontColor' }
         }
     };
 
@@ -49461,9 +49413,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 right: 10,
                 bottom: 10
             },
-            backgroundColor: { type: 'palette', key: 'tooltipBackgroundColor' },
+            backgroundColor: { type: 'palette', key: 'popupBackgroundColor' },
             border: {
-                color: { type: 'palette', key: 'tooltipBackgroundColor' },
+                color: { type: 'palette', key: 'popupBackgroundColor' },
                 width: 0,
                 radius: 3
             },
@@ -49472,7 +49424,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 y: 4,
                 blur: 12,
                 spread: 0,
-                color: { type: 'palette', key: 'shadowColor', a: 0.1 }
+                color: { type: 'palette', key: 'shadowColor' }
             }
         },
         spaceRow: 6,
@@ -49518,17 +49470,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         },
         contentStyle: {
             fontSize: THEME_CONSTANTS.l5FontSize,
-            fill: { type: 'palette', key: 'secondaryFontColor' }
+            fill: { type: 'palette', key: 'primaryFontColor' }
         },
         panel: {
             visible: true,
-            fill: { type: 'palette', key: 'tooltipBackgroundColor' },
+            fill: { type: 'palette', key: 'popupBackgroundColor' },
             cornerRadius: 3,
             lineWidth: 0,
             shadowBlur: 12,
             shadowOffsetX: 0,
             shadowOffsetY: 4,
-            shadowColor: { type: 'palette', key: 'shadowColor', a: 0.1 },
+            shadowColor: { type: 'palette', key: 'shadowColor' },
             size: 0,
             space: 12
         }
@@ -49553,7 +49505,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         slider: {
             style: {
                 fill: { type: 'palette', key: 'scrollBarSliderColor' },
-                fillOpacity: 0.5
+                fillOpacity: 0.3
             }
         }
     };
@@ -50044,24 +49996,31 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             palette: {
                 backgroundColor: '#202226',
                 borderColor: '#404349',
-                shadowColor: '#000000',
+                shadowColor: 'rgba(0,0,0,0.1)',
+                hoverBackgroundColor: '#404349',
+                sliderRailColor: '#404349',
+                sliderHandleColor: '#202226',
+                sliderTrackColor: '#4284FF',
+                popupBackgroundColor: '#404349',
                 primaryFontColor: '#fdfdfd',
-                secondaryFontColor: '#888c93',
-                axisFontColor: '#bbbdc3',
+                secondaryFontColor: '#bbbdc3',
+                tertiaryFontColor: '#888c93',
+                axisLabelFontColor: '#888c93',
                 disableFontColor: '#55595f',
-                labelReverseFontColor: '#202226',
+                axisMarkerFontColor: '#202226',
                 axisGridColor: '#404349',
                 axisDomainColor: '#4b4f54',
-                dataZoomHandlerStrokeColor: '#888c93',
-                dataZoomHandlerFillColor: '#202226',
-                dataZoomBackgroundColor: '#404349',
+                dataZoomHandleStrokeColor: '#bbbdc3',
                 dataZoomChartColor: '#55595F',
-                dataZoomSelectedColor: '#4284FF',
+                playerControllerColor: '#4284FF',
                 scrollBarSliderColor: '#ffffff',
-                tooltipBackgroundColor: '#404349',
-                markLabelBackgroundColor: '#f0bd30',
-                titleFontColor: '#fdfdfd',
-                labelFontColor: '#bbbdc3'
+                axisMarkerBackgroundColor: '#fdfdfd',
+                markLabelBackgroundColor: '#404349',
+                markLineStrokeColor: '#bbbdc3',
+                dangerColor: '#eb4b4b',
+                warningColor: '#f0bd30',
+                successColor: '#14b267',
+                infoColor: '#4284ff'
             }
         }
     };
@@ -50897,10 +50856,30 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return bounds.x1 > x || bounds.x2 < x || bounds.y1 > y || bounds.y2 < y;
     }
     function min(data, field) {
-        return minInArray(data.map(d => +d[field]).filter(d => isValidNumber$1(d)));
+        const dataArray = [];
+        data.forEach(d => {
+            const value = +d[field];
+            if (isValidNumber$1(value)) {
+                dataArray.push(value);
+            }
+        });
+        if (dataArray.length === 0) {
+            return null;
+        }
+        return minInArray(dataArray);
     }
     function max(data, field) {
-        return maxInArray(data.map(d => +d[field]).filter(d => isValidNumber$1(d)));
+        const dataArray = [];
+        data.forEach(d => {
+            const value = +d[field];
+            if (isValidNumber$1(value)) {
+                dataArray.push(value);
+            }
+        });
+        if (dataArray.length === 0) {
+            return null;
+        }
+        return maxInArray(dataArray);
     }
     function sum(data, field) {
         return data.reduce((pre, _cur) => {
@@ -55937,7 +55916,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return;
             }
             const { enterStyles } = this._separateStyle();
-            this._product.encodeState(this._facet ? 'group' : 'enter', enterStyles);
+            this._product.encodeState('group', enterStyles);
         }
         _separateStyle() {
             const _a = this.stateStyle, _b = STATE_VALUE_ENUM.STATE_NORMAL, normalStyle = _a[_b]; __rest$8(_a, [typeof _b === "symbol" ? _b : _b + ""]);
@@ -55966,7 +55945,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const _a = this.stateStyle, _b = STATE_VALUE_ENUM.STATE_NORMAL; _a[_b]; const temp = __rest$8(_a, [typeof _b === "symbol" ? _b : _b + ""]);
             const { enterStyles, updateStyles } = this._separateStyle();
             this._product.encode(updateStyles);
-            this._product.encodeState(this._facet ? 'group' : 'enter', enterStyles);
+            this._product.encodeState('group', enterStyles);
             Object.keys(temp).forEach(state => {
                 const styles = {};
                 Object.keys(temp[state]).forEach(key => {
@@ -57812,7 +57791,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.6.0";
+    const version = "1.6.1-alpha.0";
 
     class ChartData {
         get dataList() {
@@ -64767,7 +64746,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.seriesType = exports.SeriesTypeEnum.map;
         }
         _getDefaultSeriesSpec(spec) {
-            const series = Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { type: spec.type, nameField: spec.nameField, valueField: spec.valueField, seriesField: spec.seriesField, map: spec.map, nameProperty: spec.nameProperty, nameMap: spec.nameMap, area: spec.area, defaultFillColor: spec.defaultFillColor });
+            const series = Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { type: spec.type, nameField: spec.nameField, valueField: spec.valueField, seriesField: spec.seriesField, map: spec.map, nameProperty: spec.nameProperty, centroidProperty: spec.centroidProperty, nameMap: spec.nameMap, area: spec.area, defaultFillColor: spec.defaultFillColor });
             return series;
         }
         isValidSeries(type) {
@@ -65518,7 +65497,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c;
             const animationParams = {
                 growFrom: (datum, element, state) => {
-                    var _a, _b;
+                    var _a;
                     if (state === AnimationStateEnum.appear) {
                         return this._startAngle;
                     }
@@ -65535,11 +65514,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (markElements.find(e => { var _a; return ((_a = e.data[0]) === null || _a === void 0 ? void 0 : _a[DEFAULT_DATA_INDEX]) > dataIndex; }) === undefined) {
                         return this._endAngle;
                     }
-                    const prevMarkElement = markElements.findLast(e => { var _a; return ((_a = e.data[0]) === null || _a === void 0 ? void 0 : _a[DEFAULT_DATA_INDEX]) < dataIndex; });
+                    const prevMarkElement = [...markElements].reverse().find(e => { var _a; return ((_a = e.data[0]) === null || _a === void 0 ? void 0 : _a[DEFAULT_DATA_INDEX]) < dataIndex; });
                     if (outState.includes(state)) {
-                        return (_a = prevMarkElement === null || prevMarkElement === void 0 ? void 0 : prevMarkElement.getGraphicItem().nextAttrs) === null || _a === void 0 ? void 0 : _a.endAngle;
+                        return (_a = prevMarkElement === null || prevMarkElement === void 0 ? void 0 : prevMarkElement.getNextGraphicAttributes()) === null || _a === void 0 ? void 0 : _a.endAngle;
                     }
-                    return (_b = prevMarkElement === null || prevMarkElement === void 0 ? void 0 : prevMarkElement.getGraphicItem().prevAttrs) === null || _b === void 0 ? void 0 : _b.endAngle;
+                    return prevMarkElement === null || prevMarkElement === void 0 ? void 0 : prevMarkElement.getGraphicAttribute('endAngle', true);
                 }
             };
             const appearPreset = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset;
@@ -75368,7 +75347,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const attr = labelMark.getAttribute(key, datum);
             textAttribute[key] = attr;
             if (key === 'text' && formatMethod) {
-                textAttribute[key] = formatMethod(textAttribute[key], datum);
+                textAttribute[key] = formatMethod(textAttribute[key], datum, { series });
             }
         }
         return textAttribute;
@@ -78545,6 +78524,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     HeatmapSeries.type = exports.SeriesTypeEnum.heatmap;
     HeatmapSeries.mark = heatmapSeriesMark;
     const registerHeatmapSeries = () => {
+        registerCellMark();
         Factory.registerMark(CellMark.type, CellMark);
         Factory.registerMark(TextMark.type, TextMark);
         Factory.registerSeries(HeatmapSeries.type, HeatmapSeries);
@@ -79503,9 +79483,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         updateScaleDomain() {
         }
-        computeData() {
-            this._tickData.getDataView().reRunAllTransform();
-            this._tickData.updateData();
+        computeData(updateType) {
+            if (updateType === 'force' || !isEqual$1(this._scale.range(), [0, 1])) {
+                this._tickData.getDataView().reRunAllTransform();
+                this._tickData.updateData();
+            }
         }
         initScales() {
             this._scales = [this._scale];
@@ -79731,8 +79713,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._tick = undefined;
             this._layoutCache = { width: 0, height: 0, _lastComputeOutBounds: { x1: 0, x2: 0, y1: 0, y2: 0 } };
             this.effect = {
-                scaleUpdate: () => {
-                    this.computeData();
+                scaleUpdate: params => {
+                    this.computeData(params === null || params === void 0 ? void 0 : params.value);
                     eachSeries(this._regions, s => {
                         if (isXAxis(this.getOrient())) {
                             s.setXAxisHelper(this.axisHelper());
@@ -80015,7 +79997,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         onLayoutEnd(ctx) {
             const isRangeChange = this.updateScaleRange();
             if (isRangeChange) {
-                this.event.emit(ChartEvent.scaleUpdate, { model: this });
+                this.event.emit(ChartEvent.scaleUpdate, { model: this, value: 'range' });
             }
             else {
                 this.updateSeriesScale();
@@ -80150,8 +80132,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._verticalLimitSize = isXAxis(this.getOrient()) ? rect.height : rect.width;
             this.setLayoutRect(rect);
-            this.updateScaleRange();
-            this.computeData();
+            const isChanged = this.updateScaleRange();
+            if (isChanged) {
+                this.computeData('range');
+            }
             const context = { skipLayout: false };
             const isX = isXAxis(this.getOrient());
             if (this.pluginService) {
@@ -80164,29 +80148,35 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     });
             }
             const product = this._axisMark.getProduct();
-            this._latestBounds = product.getBounds();
+            let hasBounds = false;
             {
                 const attrs = this._getUpdateAttribute(true);
                 const axisComponent = product.getGroupGraphicItem();
-                const updateBounds = axisComponent.getBoundsWithoutRender(mergeSpec(Object.assign({}, this.getLayoutStartPoint()), this._axisStyle, attrs));
+                const spec = mergeSpec(Object.assign({}, this.getLayoutStartPoint()), this._axisStyle, attrs, { line: { visible: false } });
+                const updateBounds = axisComponent.getBoundsWithoutRender(spec);
                 if (isFinite(updateBounds.width())) {
                     result = this._appendAxisUnit(updateBounds, isX);
+                    hasBounds = true;
                     this._latestBounds = updateBounds;
                 }
             }
+            if (!hasBounds) {
+                this._latestBounds = product.getBounds();
+            }
             return result;
         }
         updateLayoutAttribute() {
             if (!this.visible) {
                 return;
             }
+            const startPoint = this.getLayoutStartPoint();
             const _a = this._getUpdateAttribute(false), { grid: updateGridAttrs } = _a, updateAxisAttrs = __rest$8(_a, ["grid"]);
             const axisProduct = this._axisMark.getProduct();
-            const axisAttrs = mergeSpec(Object.assign({}, this.getLayoutStartPoint()), this._axisStyle, updateAxisAttrs);
+            const axisAttrs = mergeSpec({ x: startPoint.x, y: startPoint.y }, this._axisStyle, updateAxisAttrs);
             axisProduct.encode(axisAttrs);
             if (this._gridMark) {
                 const gridProduct = this._gridMark.getProduct();
-                gridProduct.encode(mergeSpec(Object.assign({}, this.getLayoutStartPoint()), this._getGridAttributes(), updateGridAttrs));
+                gridProduct.encode(mergeSpec({ x: startPoint.x, y: startPoint.y }, this._getGridAttributes(), updateGridAttrs));
             }
             super.updateLayoutAttribute();
         }
@@ -80555,7 +80545,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.niceDomain(domain);
             this._scale.domain(domain, this._nice);
             this.setScaleNice();
-            this.event.emit(ChartEvent.scaleUpdate, { model: this });
+            this.event.emit(ChartEvent.scaleUpdate, { model: this, value: 'domain' });
         }
         extendDomain(domain) {
             let temp;
@@ -80604,7 +80594,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._scale.domain(domain, this._nice);
             this.setScaleNice();
             this.event.emit(ChartEvent.scaleDomainUpdate, { model: this });
-            this.event.emit(ChartEvent.scaleUpdate, { model: this });
+            this.event.emit(ChartEvent.scaleUpdate, { model: this, value: 'domain' });
         }
     }
 
@@ -80729,7 +80719,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this.transformScaleDomain();
             this.event.emit(ChartEvent.scaleDomainUpdate, { model: this });
-            this.event.emit(ChartEvent.scaleUpdate, { model: this });
+            this.event.emit(ChartEvent.scaleUpdate, { model: this, value: 'domain' });
         }
     }
 
@@ -80811,8 +80801,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.type = ComponentTypeEnum.cartesianTimeAxis;
             this._zero = false;
             this.effect = {
-                scaleUpdate: () => {
-                    this.computeData();
+                scaleUpdate: params => {
+                    this.computeData(params === null || params === void 0 ? void 0 : params.value);
                     eachSeries(this._regions, s => {
                         if (isXAxis(this.getOrient())) {
                             s.setXAxisHelper(this.axisHelper());
@@ -80860,8 +80850,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._layerTickData = new CompilableData(this._option, layerTickData);
             }
         }
-        computeData() {
-            super.computeData();
+        computeData(updateType) {
+            super.computeData(updateType);
             if (this._layerTickData) {
                 this._layerTickData.getDataView().reRunAllTransform();
                 this._layerTickData.updateData();
@@ -80983,8 +80973,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._orient = 'radius';
             this._groupScales = [];
             this.effect = {
-                scaleUpdate: () => {
-                    this.computeData();
+                scaleUpdate: param => {
+                    this.computeData(param === null || param === void 0 ? void 0 : param.value);
                     eachSeries(this._regions, s => {
                         if (this.getOrient() === 'radius') {
                             s.radiusAxisHelper = this.axisHelper();
@@ -81094,9 +81084,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super.setLayoutStartPosition(startPoint);
         }
         onLayoutEnd(ctx) {
-            this.updateScaleRange();
-            this.updateSeriesScale();
-            this.event.emit(ChartEvent.scaleUpdate, { model: this });
+            const isChanged = this.updateScaleRange();
+            if (isChanged) {
+                this.updateSeriesScale();
+                this.event.emit(ChartEvent.scaleUpdate, { model: this, value: 'range' });
+            }
             super.onLayoutEnd(ctx);
         }
         onRender(ctx) {
@@ -81147,14 +81139,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         updateScaleRange() {
             const inverse = this._spec.inverse;
+            const prevRange = this._scale.range();
+            let newRange;
             if (this.getOrient() === 'radius') {
-                this._scale.range(inverse
+                newRange = inverse
                     ? [this.computeLayoutOuterRadius(), this.computeLayoutInnerRadius()]
-                    : [this.computeLayoutInnerRadius(), this.computeLayoutOuterRadius()]);
+                    : [this.computeLayoutInnerRadius(), this.computeLayoutOuterRadius()];
             }
             else {
-                this._scale.range(inverse ? [this._endAngle, this._startAngle] : [this._startAngle, this._endAngle]);
+                newRange = inverse ? [this._endAngle, this._startAngle] : [this._startAngle, this._endAngle];
             }
+            if (prevRange && newRange && prevRange[0] === newRange[0] && prevRange[1] === newRange[1]) {
+                return false;
+            }
+            this._scale.range(newRange);
+            return true;
         }
         collectData(depth) {
             const data = [];
@@ -81281,6 +81280,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this.computeLayoutInnerRadius();
         }
         tickValues() {
+            const latestData = this._tickData.getLatestData();
+            if (latestData && !isArray$1(latestData)) {
+                this.computeData('force');
+            }
             return this._tickData.getLatestData() || [];
         }
         updateLayoutAttribute() {
@@ -81451,8 +81454,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this.computeBandDomain(data);
         }
         updateScaleRange() {
-            super.updateScaleRange();
+            const isChanged = super.updateScaleRange();
             this.updateGroupScaleRange();
+            return isChanged;
         }
         axisHelper() {
             const helper = super.axisHelper();
@@ -82893,7 +82897,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._cacheActualTooltip = undefined;
                 }
                 if (changePositionOnly && this._cacheViewSpec && this._cacheActualTooltip) {
-                    return this.changeTooltipPosition(changePositionOnly, this._cacheActualTooltip, this._cacheViewSpec, activeType, data, params);
+                    return this.changeTooltipPosition(changePositionOnly, data, params);
                 }
                 return this.changeTooltip(true, params, changePositionOnly, activeType, data);
             };
@@ -82946,14 +82950,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     return TooltipResult.failed;
                 }
                 this._cacheActualTooltip = actualTooltip;
-                return this._changeTooltipPosition(!!changePositionOnly, actualTooltip, spec, activeType, data, params);
+                return this._changeTooltipPosition(!!changePositionOnly, data, params);
             };
-            this._changeTooltipPosition = (changePositionOnly, actualTooltip, spec, activeType, data, params) => {
+            this._changeTooltipPosition = (changePositionOnly, data, params) => {
                 var _a, _b, _c;
                 if (this._isReleased) {
                     return TooltipResult.failed;
                 }
                 const event = params.event;
+                const spec = this._cacheViewSpec;
+                const actualTooltip = this._cacheActualTooltip;
+                if (!spec || !actualTooltip) {
+                    return TooltipResult.failed;
+                }
+                const activeType = actualTooltip.activeType;
                 if (spec.handler) {
                     return (_c = (_b = (_a = spec.handler).showTooltip) === null || _b === void 0 ? void 0 : _b.call(_a, activeType, data, params)) !== null && _c !== void 0 ? _c : TooltipResult.success;
                 }