sun-card-design 1.1.32 → 1.1.34

package/dist/mobile/sun-card-design-mobile.es1954.js

@@ -1,719 +1,174 @@
 import { __extends } from "./sun-card-design-mobile.es1725.js";
-import { bind, each, indexOf, isFunction, isString } from "./sun-card-design-mobile.es930.js";
-import { stop } from "./sun-card-design-mobile.es2009.js";
-import { getTransform, transformDirection, applyTransform } from "./sun-card-design-mobile.es1764.js";
-import { createOrUpdate, clear } from "./sun-card-design-mobile.es1738.js";
-import DataZoomView from "./sun-card-design-mobile.es2150.js";
-import { linearMap, parsePercent, asc } from "./sun-card-design-mobile.es1970.js";
-import { getLayoutParams, getLayoutRect } from "./sun-card-design-mobile.es1766.js";
-import sliderMove from "./sun-card-design-mobile.es2131.js";
-import { getAxisMainType, collectReferCoordSysModelInfo } from "./sun-card-design-mobile.es2151.js";
-import { enableHoverEmphasis } from "./sun-card-design-mobile.es1736.js";
-import { symbolBuildProxies, createSymbol } from "./sun-card-design-mobile.es2038.js";
-import { deprecateLog } from "./sun-card-design-mobile.es1748.js";
-import { createTextStyle } from "./sun-card-design-mobile.es1926.js";
+import { retrieve, each, bind, map, clone } from "./sun-card-design-mobile.es930.js";
+import VisualMapView from "./sun-card-design-mobile.es2148.js";
+import { createSymbol } from "./sun-card-design-mobile.es2008.js";
+import { box } from "./sun-card-design-mobile.es1766.js";
+import { makeHighDownBatch, getItemAlign } from "./sun-card-design-mobile.es2149.js";
+import { createTextStyle } from "./sun-card-design-mobile.es1921.js";
 import Group from "./sun-card-design-mobile.es1760.js";
-import Rect$1 from "./sun-card-design-mobile.es1756.js";
-import ZRText from "./sun-card-design-mobile.es1928.js";
-import Point from "./sun-card-design-mobile.es1988.js";
-import Polygon from "./sun-card-design-mobile.es1979.js";
-import Polyline from "./sun-card-design-mobile.es1980.js";
-var Rect = Rect$1;
-var DEFAULT_LOCATION_EDGE_GAP = 7;
-var DEFAULT_FRAME_BORDER_WIDTH = 1;
-var DEFAULT_FILLER_SIZE = 30;
-var DEFAULT_MOVE_HANDLE_SIZE = 7;
-var HORIZONTAL = "horizontal";
-var VERTICAL = "vertical";
-var LABEL_GAP = 5;
-var SHOW_DATA_SHADOW_SERIES_TYPE = ["line", "bar", "candlestick", "scatter"];
-var REALTIME_ANIMATION_CONFIG = {
-  easing: "cubicOut",
-  duration: 100,
-  delay: 0
-};
-var SliderZoomView = (
+import ZRText from "./sun-card-design-mobile.es1923.js";
+var PiecewiseVisualMapView = (
   /** @class */
   (function(_super) {
-    __extends(SliderZoomView2, _super);
-    function SliderZoomView2() {
+    __extends(PiecewiseVisualMapView2, _super);
+    function PiecewiseVisualMapView2() {
       var _this = _super !== null && _super.apply(this, arguments) || this;
-      _this.type = SliderZoomView2.type;
-      _this._displayables = {};
+      _this.type = PiecewiseVisualMapView2.type;
       return _this;
     }
-    SliderZoomView2.prototype.init = function(ecModel, api) {
-      this.api = api;
-      this._onBrush = bind(this._onBrush, this);
-      this._onBrushEnd = bind(this._onBrushEnd, this);
-    };
-    SliderZoomView2.prototype.render = function(dataZoomModel, ecModel, api, payload) {
-      _super.prototype.render.apply(this, arguments);
-      createOrUpdate(this, "_dispatchZoomAction", dataZoomModel.get("throttle"), "fixRate");
-      this._orient = dataZoomModel.getOrient();
-      if (dataZoomModel.get("show") === false) {
-        this.group.removeAll();
-        return;
-      }
-      if (dataZoomModel.noTarget()) {
-        this._clear();
-        this.group.removeAll();
-        return;
-      }
-      if (!payload || payload.type !== "dataZoom" || payload.from !== this.uid) {
-        this._buildView();
-      }
-      this._updateView();
-    };
-    SliderZoomView2.prototype.dispose = function() {
-      this._clear();
-      _super.prototype.dispose.apply(this, arguments);
-    };
-    SliderZoomView2.prototype._clear = function() {
-      clear(this, "_dispatchZoomAction");
-      var zr = this.api.getZr();
-      zr.off("mousemove", this._onBrush);
-      zr.off("mouseup", this._onBrushEnd);
-    };
-    SliderZoomView2.prototype._buildView = function() {
+    PiecewiseVisualMapView2.prototype.doRender = function() {
       var thisGroup = this.group;
       thisGroup.removeAll();
-      this._brushing = false;
-      this._displayables.brushRect = null;
-      this._resetLocation();
-      this._resetInterval();
-      var barGroup = this._displayables.sliderGroup = new Group();
-      this._renderBackground();
-      this._renderHandle();
-      this._renderDataShadow();
-      thisGroup.add(barGroup);
-      this._positionGroup();
-    };
-    SliderZoomView2.prototype._resetLocation = function() {
-      var dataZoomModel = this.dataZoomModel;
-      var api = this.api;
-      var showMoveHandle = dataZoomModel.get("brushSelect");
-      var moveHandleSize = showMoveHandle ? DEFAULT_MOVE_HANDLE_SIZE : 0;
-      var coordRect = this._findCoordRect();
-      var ecSize = {
-        width: api.getWidth(),
-        height: api.getHeight()
-      };
-      var positionInfo = this._orient === HORIZONTAL ? {
-        // Why using 'right', because right should be used in vertical,
-        // and it is better to be consistent for dealing with position param merge.
-        right: ecSize.width - coordRect.x - coordRect.width,
-        top: ecSize.height - DEFAULT_FILLER_SIZE - DEFAULT_LOCATION_EDGE_GAP - moveHandleSize,
-        width: coordRect.width,
-        height: DEFAULT_FILLER_SIZE
-      } : {
-        right: DEFAULT_LOCATION_EDGE_GAP,
-        top: coordRect.y,
-        width: DEFAULT_FILLER_SIZE,
-        height: coordRect.height
-      };
-      var layoutParams = getLayoutParams(dataZoomModel.option);
-      each(["right", "top", "width", "height"], function(name) {
-        if (layoutParams[name] === "ph") {
-          layoutParams[name] = positionInfo[name];
+      var visualMapModel = this.visualMapModel;
+      var textGap = visualMapModel.get("textGap");
+      var textStyleModel = visualMapModel.textStyleModel;
+      var textFont = textStyleModel.getFont();
+      var textFill = textStyleModel.getTextColor();
+      var itemAlign = this._getItemAlign();
+      var itemSize = visualMapModel.itemSize;
+      var viewData = this._getViewData();
+      var endsText = viewData.endsText;
+      var showLabel = retrieve(visualMapModel.get("showLabel", true), !endsText);
+      var silent = !visualMapModel.get("selectedMode");
+      endsText && this._renderEndsText(thisGroup, endsText[0], itemSize, showLabel, itemAlign);
+      each(viewData.viewPieceList, function(item) {
+        var piece = item.piece;
+        var itemGroup = new Group();
+        itemGroup.onclick = bind(this._onItemClick, this, piece);
+        this._enableHoverLink(itemGroup, item.indexInModelPieceList);
+        var representValue = visualMapModel.getRepresentValue(piece);
+        this._createItemSymbol(itemGroup, representValue, [0, 0, itemSize[0], itemSize[1]], silent);
+        if (showLabel) {
+          var visualState = this.visualMapModel.getValueState(representValue);
+          itemGroup.add(new ZRText({
+            style: {
+              x: itemAlign === "right" ? -textGap : itemSize[0] + textGap,
+              y: itemSize[1] / 2,
+              text: piece.text,
+              verticalAlign: "middle",
+              align: itemAlign,
+              font: textFont,
+              fill: textFill,
+              opacity: visualState === "outOfRange" ? 0.5 : 1
+            },
+            silent
+          }));
         }
+        thisGroup.add(itemGroup);
+      }, this);
+      endsText && this._renderEndsText(thisGroup, endsText[1], itemSize, showLabel, itemAlign);
+      box(visualMapModel.get("orient"), thisGroup, visualMapModel.get("itemGap"));
+      this.renderBackground(thisGroup);
+      this.positionGroup(thisGroup);
+    };
+    PiecewiseVisualMapView2.prototype._enableHoverLink = function(itemGroup, pieceIndex) {
+      var _this = this;
+      itemGroup.on("mouseover", function() {
+        return onHoverLink("highlight");
+      }).on("mouseout", function() {
+        return onHoverLink("downplay");
       });
-      var layoutRect = getLayoutRect(layoutParams, ecSize);
-      this._location = {
-        x: layoutRect.x,
-        y: layoutRect.y
+      var onHoverLink = function(method) {
+        var visualMapModel = _this.visualMapModel;
+        visualMapModel.option.hoverLink && _this.api.dispatchAction({
+          type: method,
+          batch: makeHighDownBatch(visualMapModel.findTargetDataIndices(pieceIndex), visualMapModel)
+        });
       };
-      this._size = [layoutRect.width, layoutRect.height];
-      this._orient === VERTICAL && this._size.reverse();
     };
-    SliderZoomView2.prototype._positionGroup = function() {
-      var thisGroup = this.group;
-      var location = this._location;
-      var orient = this._orient;
-      var targetAxisModel = this.dataZoomModel.getFirstTargetAxisModel();
-      var inverse = targetAxisModel && targetAxisModel.get("inverse");
-      var sliderGroup = this._displayables.sliderGroup;
-      var otherAxisInverse = (this._dataShadowInfo || {}).otherAxisInverse;
-      sliderGroup.attr(orient === HORIZONTAL && !inverse ? {
-        scaleY: otherAxisInverse ? 1 : -1,
-        scaleX: 1
-      } : orient === HORIZONTAL && inverse ? {
-        scaleY: otherAxisInverse ? 1 : -1,
-        scaleX: -1
-      } : orient === VERTICAL && !inverse ? {
-        scaleY: otherAxisInverse ? -1 : 1,
-        scaleX: 1,
-        rotation: Math.PI / 2
-      } : {
-        scaleY: otherAxisInverse ? -1 : 1,
-        scaleX: -1,
-        rotation: Math.PI / 2
-      });
-      var rect = thisGroup.getBoundingRect([sliderGroup]);
-      thisGroup.x = location.x - rect.x;
-      thisGroup.y = location.y - rect.y;
-      thisGroup.markRedraw();
-    };
-    SliderZoomView2.prototype._getViewExtent = function() {
-      return [0, this._size[0]];
-    };
-    SliderZoomView2.prototype._renderBackground = function() {
-      var dataZoomModel = this.dataZoomModel;
-      var size = this._size;
-      var barGroup = this._displayables.sliderGroup;
-      var brushSelect = dataZoomModel.get("brushSelect");
-      barGroup.add(new Rect({
-        silent: true,
-        shape: {
-          x: 0,
-          y: 0,
-          width: size[0],
-          height: size[1]
-        },
-        style: {
-          fill: dataZoomModel.get("backgroundColor")
-        },
-        z2: -40
-      }));
-      var clickPanel = new Rect({
-        shape: {
-          x: 0,
-          y: 0,
-          width: size[0],
-          height: size[1]
-        },
-        style: {
-          fill: "transparent"
-        },
-        z2: 0,
-        onclick: bind(this._onClickPanel, this)
-      });
-      var zr = this.api.getZr();
-      if (brushSelect) {
-        clickPanel.on("mousedown", this._onBrushStart, this);
-        clickPanel.cursor = "crosshair";
-        zr.on("mousemove", this._onBrush);
-        zr.on("mouseup", this._onBrushEnd);
+    PiecewiseVisualMapView2.prototype._getItemAlign = function() {
+      var visualMapModel = this.visualMapModel;
+      var modelOption = visualMapModel.option;
+      if (modelOption.orient === "vertical") {
+        return getItemAlign(visualMapModel, this.api, visualMapModel.itemSize);
       } else {
-        zr.off("mousemove", this._onBrush);
-        zr.off("mouseup", this._onBrushEnd);
-      }
-      barGroup.add(clickPanel);
-    };
-    SliderZoomView2.prototype._renderDataShadow = function() {
-      var info = this._dataShadowInfo = this._prepareDataShadowInfo();
-      this._displayables.dataShadowSegs = [];
-      if (!info) {
-        return;
-      }
-      var size = this._size;
-      var oldSize = this._shadowSize || [];
-      var seriesModel = info.series;
-      var data = seriesModel.getRawData();
-      var candlestickDim = seriesModel.getShadowDim && seriesModel.getShadowDim();
-      var otherDim = candlestickDim && data.getDimensionInfo(candlestickDim) ? seriesModel.getShadowDim() : info.otherDim;
-      if (otherDim == null) {
-        return;
-      }
-      var polygonPts = this._shadowPolygonPts;
-      var polylinePts = this._shadowPolylinePts;
-      if (data !== this._shadowData || otherDim !== this._shadowDim || size[0] !== oldSize[0] || size[1] !== oldSize[1]) {
-        var otherDataExtent_1 = data.getDataExtent(otherDim);
-        var otherOffset = (otherDataExtent_1[1] - otherDataExtent_1[0]) * 0.3;
-        otherDataExtent_1 = [otherDataExtent_1[0] - otherOffset, otherDataExtent_1[1] + otherOffset];
-        var otherShadowExtent_1 = [0, size[1]];
-        var thisShadowExtent = [0, size[0]];
-        var areaPoints_1 = [[size[0], 0], [0, 0]];
-        var linePoints_1 = [];
-        var step_1 = thisShadowExtent[1] / (data.count() - 1);
-        var thisCoord_1 = 0;
-        var stride_1 = Math.round(data.count() / size[0]);
-        var lastIsEmpty_1;
-        data.each([otherDim], function(value, index) {
-          if (stride_1 > 0 && index % stride_1) {
-            thisCoord_1 += step_1;
-            return;
-          }
-          var isEmpty = value == null || isNaN(value) || value === "";
-          var otherCoord = isEmpty ? 0 : linearMap(value, otherDataExtent_1, otherShadowExtent_1, true);
-          if (isEmpty && !lastIsEmpty_1 && index) {
-            areaPoints_1.push([areaPoints_1[areaPoints_1.length - 1][0], 0]);
-            linePoints_1.push([linePoints_1[linePoints_1.length - 1][0], 0]);
-          } else if (!isEmpty && lastIsEmpty_1) {
-            areaPoints_1.push([thisCoord_1, 0]);
-            linePoints_1.push([thisCoord_1, 0]);
-          }
-          areaPoints_1.push([thisCoord_1, otherCoord]);
-          linePoints_1.push([thisCoord_1, otherCoord]);
-          thisCoord_1 += step_1;
-          lastIsEmpty_1 = isEmpty;
-        });
-        polygonPts = this._shadowPolygonPts = areaPoints_1;
-        polylinePts = this._shadowPolylinePts = linePoints_1;
-      }
-      this._shadowData = data;
-      this._shadowDim = otherDim;
-      this._shadowSize = [size[0], size[1]];
-      var dataZoomModel = this.dataZoomModel;
-      function createDataShadowGroup(isSelectedArea) {
-        var model = dataZoomModel.getModel(isSelectedArea ? "selectedDataBackground" : "dataBackground");
-        var group2 = new Group();
-        var polygon = new Polygon({
-          shape: {
-            points: polygonPts
-          },
-          segmentIgnoreThreshold: 1,
-          style: model.getModel("areaStyle").getAreaStyle(),
-          silent: true,
-          z2: -20
-        });
-        var polyline = new Polyline({
-          shape: {
-            points: polylinePts
-          },
-          segmentIgnoreThreshold: 1,
-          style: model.getModel("lineStyle").getLineStyle(),
-          silent: true,
-          z2: -19
-        });
-        group2.add(polygon);
-        group2.add(polyline);
-        return group2;
-      }
-      for (var i = 0; i < 3; i++) {
-        var group = createDataShadowGroup(i === 1);
-        this._displayables.sliderGroup.add(group);
-        this._displayables.dataShadowSegs.push(group);
+        var align = modelOption.align;
+        if (!align || align === "auto") {
+          align = "left";
+        }
+        return align;
       }
     };
-    SliderZoomView2.prototype._prepareDataShadowInfo = function() {
-      var dataZoomModel = this.dataZoomModel;
-      var showDataShadow = dataZoomModel.get("showDataShadow");
-      if (showDataShadow === false) {
+    PiecewiseVisualMapView2.prototype._renderEndsText = function(group, text, itemSize, showLabel, itemAlign) {
+      if (!text) {
         return;
       }
-      var result;
-      var ecModel = this.ecModel;
-      dataZoomModel.eachTargetAxis(function(axisDim, axisIndex) {
-        var seriesModels = dataZoomModel.getAxisProxy(axisDim, axisIndex).getTargetSeriesModels();
-        each(seriesModels, function(seriesModel) {
-          if (result) {
-            return;
-          }
-          if (showDataShadow !== true && indexOf(SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get("type")) < 0) {
-            return;
-          }
-          var thisAxis = ecModel.getComponent(getAxisMainType(axisDim), axisIndex).axis;
-          var otherDim = getOtherDim(axisDim);
-          var otherAxisInverse;
-          var coordSys = seriesModel.coordinateSystem;
-          if (otherDim != null && coordSys.getOtherAxis) {
-            otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse;
-          }
-          otherDim = seriesModel.getData().mapDimension(otherDim);
-          result = {
-            thisAxis,
-            series: seriesModel,
-            thisDim: axisDim,
-            otherDim,
-            otherAxisInverse
-          };
-        }, this);
-      }, this);
-      return result;
-    };
-    SliderZoomView2.prototype._renderHandle = function() {
-      var thisGroup = this.group;
-      var displayables = this._displayables;
-      var handles = displayables.handles = [null, null];
-      var handleLabels = displayables.handleLabels = [null, null];
-      var sliderGroup = this._displayables.sliderGroup;
-      var size = this._size;
-      var dataZoomModel = this.dataZoomModel;
-      var api = this.api;
-      var borderRadius = dataZoomModel.get("borderRadius") || 0;
-      var brushSelect = dataZoomModel.get("brushSelect");
-      var filler = displayables.filler = new Rect({
-        silent: brushSelect,
-        style: {
-          fill: dataZoomModel.get("fillerColor")
-        },
-        textConfig: {
-          position: "inside"
-        }
-      });
-      sliderGroup.add(filler);
-      sliderGroup.add(new Rect({
-        silent: true,
-        subPixelOptimize: true,
-        shape: {
-          x: 0,
-          y: 0,
-          width: size[0],
-          height: size[1],
-          r: borderRadius
-        },
-        style: {
-          // deprecated option
-          stroke: dataZoomModel.get("dataBackgroundColor") || dataZoomModel.get("borderColor"),
-          lineWidth: DEFAULT_FRAME_BORDER_WIDTH,
-          fill: "rgba(0,0,0,0)"
-        }
+      var itemGroup = new Group();
+      var textStyleModel = this.visualMapModel.textStyleModel;
+      itemGroup.add(new ZRText({
+        style: createTextStyle(textStyleModel, {
+          x: showLabel ? itemAlign === "right" ? itemSize[0] : 0 : itemSize[0] / 2,
+          y: itemSize[1] / 2,
+          verticalAlign: "middle",
+          align: showLabel ? itemAlign : "center",
+          text
+        })
       }));
-      each([0, 1], function(handleIndex) {
-        var iconStr = dataZoomModel.get("handleIcon");
-        if (!symbolBuildProxies[iconStr] && iconStr.indexOf("path://") < 0 && iconStr.indexOf("image://") < 0) {
-          iconStr = "path://" + iconStr;
-          if (process.env.NODE_ENV !== "production") {
-            deprecateLog("handleIcon now needs 'path://' prefix when using a path string");
-          }
-        }
-        var path = createSymbol(iconStr, -1, 0, 2, 2, null, true);
-        path.attr({
-          cursor: getCursor(this._orient),
-          draggable: true,
-          drift: bind(this._onDragMove, this, handleIndex),
-          ondragend: bind(this._onDragEnd, this),
-          onmouseover: bind(this._showDataInfo, this, true),
-          onmouseout: bind(this._showDataInfo, this, false),
-          z2: 5
-        });
-        var bRect = path.getBoundingRect();
-        var handleSize = dataZoomModel.get("handleSize");
-        this._handleHeight = parsePercent(handleSize, this._size[1]);
-        this._handleWidth = bRect.width / bRect.height * this._handleHeight;
-        path.setStyle(dataZoomModel.getModel("handleStyle").getItemStyle());
-        path.style.strokeNoScale = true;
-        path.rectHover = true;
-        path.ensureState("emphasis").style = dataZoomModel.getModel(["emphasis", "handleStyle"]).getItemStyle();
-        enableHoverEmphasis(path);
-        var handleColor = dataZoomModel.get("handleColor");
-        if (handleColor != null) {
-          path.style.fill = handleColor;
-        }
-        sliderGroup.add(handles[handleIndex] = path);
-        var textStyleModel = dataZoomModel.getModel("textStyle");
-        var handleLabel = dataZoomModel.get("handleLabel") || {};
-        var handleLabelShow = handleLabel.show || false;
-        thisGroup.add(handleLabels[handleIndex] = new ZRText({
-          silent: true,
-          invisible: !handleLabelShow,
-          style: createTextStyle(textStyleModel, {
-            x: 0,
-            y: 0,
-            text: "",
-            verticalAlign: "middle",
-            align: "center",
-            fill: textStyleModel.getTextColor(),
-            font: textStyleModel.getFont()
-          }),
-          z2: 10
-        }));
-      }, this);
-      var actualMoveZone = filler;
-      if (brushSelect) {
-        var moveHandleHeight = parsePercent(dataZoomModel.get("moveHandleSize"), size[1]);
-        var moveHandle_1 = displayables.moveHandle = new Rect$1({
-          style: dataZoomModel.getModel("moveHandleStyle").getItemStyle(),
-          silent: true,
-          shape: {
-            r: [0, 0, 2, 2],
-            y: size[1] - 0.5,
-            height: moveHandleHeight
-          }
-        });
-        var iconSize = moveHandleHeight * 0.8;
-        var moveHandleIcon = displayables.moveHandleIcon = createSymbol(dataZoomModel.get("moveHandleIcon"), -iconSize / 2, -iconSize / 2, iconSize, iconSize, "#fff", true);
-        moveHandleIcon.silent = true;
-        moveHandleIcon.y = size[1] + moveHandleHeight / 2 - 0.5;
-        moveHandle_1.ensureState("emphasis").style = dataZoomModel.getModel(["emphasis", "moveHandleStyle"]).getItemStyle();
-        var moveZoneExpandSize = Math.min(size[1] / 2, Math.max(moveHandleHeight, 10));
-        actualMoveZone = displayables.moveZone = new Rect$1({
-          invisible: true,
-          shape: {
-            y: size[1] - moveZoneExpandSize,
-            height: moveHandleHeight + moveZoneExpandSize
-          }
-        });
-        actualMoveZone.on("mouseover", function() {
-          api.enterEmphasis(moveHandle_1);
-        }).on("mouseout", function() {
-          api.leaveEmphasis(moveHandle_1);
-        });
-        sliderGroup.add(moveHandle_1);
-        sliderGroup.add(moveHandleIcon);
-        sliderGroup.add(actualMoveZone);
-      }
-      actualMoveZone.attr({
-        draggable: true,
-        cursor: getCursor(this._orient),
-        drift: bind(this._onDragMove, this, "all"),
-        ondragstart: bind(this._showDataInfo, this, true),
-        ondragend: bind(this._onDragEnd, this),
-        onmouseover: bind(this._showDataInfo, this, true),
-        onmouseout: bind(this._showDataInfo, this, false)
-      });
-    };
-    SliderZoomView2.prototype._resetInterval = function() {
-      var range = this._range = this.dataZoomModel.getPercentRange();
-      var viewExtent = this._getViewExtent();
-      this._handleEnds = [linearMap(range[0], [0, 100], viewExtent, true), linearMap(range[1], [0, 100], viewExtent, true)];
-    };
-    SliderZoomView2.prototype._updateInterval = function(handleIndex, delta) {
-      var dataZoomModel = this.dataZoomModel;
-      var handleEnds = this._handleEnds;
-      var viewExtend = this._getViewExtent();
-      var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();
-      var percentExtent = [0, 100];
-      sliderMove(delta, handleEnds, viewExtend, dataZoomModel.get("zoomLock") ? "all" : handleIndex, minMaxSpan.minSpan != null ? linearMap(minMaxSpan.minSpan, percentExtent, viewExtend, true) : null, minMaxSpan.maxSpan != null ? linearMap(minMaxSpan.maxSpan, percentExtent, viewExtend, true) : null);
-      var lastRange = this._range;
-      var range = this._range = asc([linearMap(handleEnds[0], viewExtend, percentExtent, true), linearMap(handleEnds[1], viewExtend, percentExtent, true)]);
-      return !lastRange || lastRange[0] !== range[0] || lastRange[1] !== range[1];
-    };
-    SliderZoomView2.prototype._updateView = function(nonRealtime) {
-      var displaybles = this._displayables;
-      var handleEnds = this._handleEnds;
-      var handleInterval = asc(handleEnds.slice());
-      var size = this._size;
-      each([0, 1], function(handleIndex) {
-        var handle = displaybles.handles[handleIndex];
-        var handleHeight = this._handleHeight;
-        handle.attr({
-          scaleX: handleHeight / 2,
-          scaleY: handleHeight / 2,
-          // This is a trick, by adding an extra tiny offset to let the default handle's end point align to the drag window.
-          // NOTE: It may affect some custom shapes a bit. But we prefer to have better result by default.
-          x: handleEnds[handleIndex] + (handleIndex ? -1 : 1),
-          y: size[1] / 2 - handleHeight / 2
-        });
-      }, this);
-      displaybles.filler.setShape({
-        x: handleInterval[0],
-        y: 0,
-        width: handleInterval[1] - handleInterval[0],
-        height: size[1]
+      group.add(itemGroup);
+    };
+    PiecewiseVisualMapView2.prototype._getViewData = function() {
+      var visualMapModel = this.visualMapModel;
+      var viewPieceList = map(visualMapModel.getPieceList(), function(piece, index) {
+        return {
+          piece,
+          indexInModelPieceList: index
+        };
       });
-      var viewExtent = {
-        x: handleInterval[0],
-        width: handleInterval[1] - handleInterval[0]
+      var endsText = visualMapModel.get("text");
+      var orient = visualMapModel.get("orient");
+      var inverse = visualMapModel.get("inverse");
+      if (orient === "horizontal" ? inverse : !inverse) {
+        viewPieceList.reverse();
+      } else if (endsText) {
+        endsText = endsText.slice().reverse();
+      }
+      return {
+        viewPieceList,
+        endsText
       };
-      if (displaybles.moveHandle) {
-        displaybles.moveHandle.setShape(viewExtent);
-        displaybles.moveZone.setShape(viewExtent);
-        displaybles.moveZone.getBoundingRect();
-        displaybles.moveHandleIcon && displaybles.moveHandleIcon.attr("x", viewExtent.x + viewExtent.width / 2);
-      }
-      var dataShadowSegs = displaybles.dataShadowSegs;
-      var segIntervals = [0, handleInterval[0], handleInterval[1], size[0]];
-      for (var i = 0; i < dataShadowSegs.length; i++) {
-        var segGroup = dataShadowSegs[i];
-        var clipPath = segGroup.getClipPath();
-        if (!clipPath) {
-          clipPath = new Rect$1();
-          segGroup.setClipPath(clipPath);
-        }
-        clipPath.setShape({
-          x: segIntervals[i],
-          y: 0,
-          width: segIntervals[i + 1] - segIntervals[i],
-          height: size[1]
-        });
-      }
-      this._updateDataInfo(nonRealtime);
-    };
-    SliderZoomView2.prototype._updateDataInfo = function(nonRealtime) {
-      var dataZoomModel = this.dataZoomModel;
-      var displaybles = this._displayables;
-      var handleLabels = displaybles.handleLabels;
-      var orient = this._orient;
-      var labelTexts = ["", ""];
-      if (dataZoomModel.get("showDetail")) {
-        var axisProxy = dataZoomModel.findRepresentativeAxisProxy();
-        if (axisProxy) {
-          var axis = axisProxy.getAxisModel().axis;
-          var range = this._range;
-          var dataInterval = nonRealtime ? axisProxy.calculateDataWindow({
-            start: range[0],
-            end: range[1]
-          }).valueWindow : axisProxy.getDataValueWindow();
-          labelTexts = [this._formatLabel(dataInterval[0], axis), this._formatLabel(dataInterval[1], axis)];
-        }
-      }
-      var orderedHandleEnds = asc(this._handleEnds.slice());
-      setLabel.call(this, 0);
-      setLabel.call(this, 1);
-      function setLabel(handleIndex) {
-        var barTransform = getTransform(displaybles.handles[handleIndex].parent, this.group);
-        var direction = transformDirection(handleIndex === 0 ? "right" : "left", barTransform);
-        var offset = this._handleWidth / 2 + LABEL_GAP;
-        var textPoint = applyTransform([orderedHandleEnds[handleIndex] + (handleIndex === 0 ? -offset : offset), this._size[1] / 2], barTransform);
-        handleLabels[handleIndex].setStyle({
-          x: textPoint[0],
-          y: textPoint[1],
-          verticalAlign: orient === HORIZONTAL ? "middle" : direction,
-          align: orient === HORIZONTAL ? direction : "center",
-          text: labelTexts[handleIndex]
-        });
-      }
-    };
-    SliderZoomView2.prototype._formatLabel = function(value, axis) {
-      var dataZoomModel = this.dataZoomModel;
-      var labelFormatter = dataZoomModel.get("labelFormatter");
-      var labelPrecision = dataZoomModel.get("labelPrecision");
-      if (labelPrecision == null || labelPrecision === "auto") {
-        labelPrecision = axis.getPixelPrecision();
-      }
-      var valueStr = value == null || isNaN(value) ? "" : axis.type === "category" || axis.type === "time" ? axis.scale.getLabel({
-        value: Math.round(value)
-      }) : value.toFixed(Math.min(labelPrecision, 20));
-      return isFunction(labelFormatter) ? labelFormatter(value, valueStr) : isString(labelFormatter) ? labelFormatter.replace("{value}", valueStr) : valueStr;
     };
-    SliderZoomView2.prototype._showDataInfo = function(isEmphasis) {
-      var handleLabel = this.dataZoomModel.get("handleLabel") || {};
-      var normalShow = handleLabel.show || false;
-      var emphasisHandleLabel = this.dataZoomModel.getModel(["emphasis", "handleLabel"]);
-      var emphasisShow = emphasisHandleLabel.get("show") || false;
-      var toShow = isEmphasis || this._dragging ? emphasisShow : normalShow;
-      var displayables = this._displayables;
-      var handleLabels = displayables.handleLabels;
-      handleLabels[0].attr("invisible", !toShow);
-      handleLabels[1].attr("invisible", !toShow);
-      displayables.moveHandle && this.api[toShow ? "enterEmphasis" : "leaveEmphasis"](displayables.moveHandle, 1);
-    };
-    SliderZoomView2.prototype._onDragMove = function(handleIndex, dx, dy, event) {
-      this._dragging = true;
-      stop(event.event);
-      var barTransform = this._displayables.sliderGroup.getLocalTransform();
-      var vertex = applyTransform([dx, dy], barTransform, true);
-      var changed = this._updateInterval(handleIndex, vertex[0]);
-      var realtime = this.dataZoomModel.get("realtime");
-      this._updateView(!realtime);
-      changed && realtime && this._dispatchZoomAction(true);
-    };
-    SliderZoomView2.prototype._onDragEnd = function() {
-      this._dragging = false;
-      this._showDataInfo(false);
-      var realtime = this.dataZoomModel.get("realtime");
-      !realtime && this._dispatchZoomAction(false);
-    };
-    SliderZoomView2.prototype._onClickPanel = function(e) {
-      var size = this._size;
-      var localPoint = this._displayables.sliderGroup.transformCoordToLocal(e.offsetX, e.offsetY);
-      if (localPoint[0] < 0 || localPoint[0] > size[0] || localPoint[1] < 0 || localPoint[1] > size[1]) {
-        return;
-      }
-      var handleEnds = this._handleEnds;
-      var center = (handleEnds[0] + handleEnds[1]) / 2;
-      var changed = this._updateInterval("all", localPoint[0] - center);
-      this._updateView();
-      changed && this._dispatchZoomAction(false);
-    };
-    SliderZoomView2.prototype._onBrushStart = function(e) {
-      var x = e.offsetX;
-      var y = e.offsetY;
-      this._brushStart = new Point(x, y);
-      this._brushing = true;
-      this._brushStartTime = +/* @__PURE__ */ new Date();
-    };
-    SliderZoomView2.prototype._onBrushEnd = function(e) {
-      if (!this._brushing) {
-        return;
-      }
-      var brushRect = this._displayables.brushRect;
-      this._brushing = false;
-      if (!brushRect) {
-        return;
-      }
-      brushRect.attr("ignore", true);
-      var brushShape = brushRect.shape;
-      var brushEndTime = +/* @__PURE__ */ new Date();
-      if (brushEndTime - this._brushStartTime < 200 && Math.abs(brushShape.width) < 5) {
+    PiecewiseVisualMapView2.prototype._createItemSymbol = function(group, representValue, shapeParam, silent) {
+      var itemSymbol = createSymbol(
+        // symbol will be string
+        this.getControllerVisual(representValue, "symbol"),
+        shapeParam[0],
+        shapeParam[1],
+        shapeParam[2],
+        shapeParam[3],
+        // color will be string
+        this.getControllerVisual(representValue, "color")
+      );
+      itemSymbol.silent = silent;
+      group.add(itemSymbol);
+    };
+    PiecewiseVisualMapView2.prototype._onItemClick = function(piece) {
+      var visualMapModel = this.visualMapModel;
+      var option = visualMapModel.option;
+      var selectedMode = option.selectedMode;
+      if (!selectedMode) {
         return;
       }
-      var viewExtend = this._getViewExtent();
-      var percentExtent = [0, 100];
-      this._range = asc([linearMap(brushShape.x, viewExtend, percentExtent, true), linearMap(brushShape.x + brushShape.width, viewExtend, percentExtent, true)]);
-      this._handleEnds = [brushShape.x, brushShape.x + brushShape.width];
-      this._updateView();
-      this._dispatchZoomAction(false);
-    };
-    SliderZoomView2.prototype._onBrush = function(e) {
-      if (this._brushing) {
-        stop(e.event);
-        this._updateBrushRect(e.offsetX, e.offsetY);
-      }
-    };
-    SliderZoomView2.prototype._updateBrushRect = function(mouseX, mouseY) {
-      var displayables = this._displayables;
-      var dataZoomModel = this.dataZoomModel;
-      var brushRect = displayables.brushRect;
-      if (!brushRect) {
-        brushRect = displayables.brushRect = new Rect({
-          silent: true,
-          style: dataZoomModel.getModel("brushStyle").getItemStyle()
+      var selected = clone(option.selected);
+      var newKey = visualMapModel.getSelectedMapKey(piece);
+      if (selectedMode === "single" || selectedMode === true) {
+        selected[newKey] = true;
+        each(selected, function(o, key) {
+          selected[key] = key === newKey;
         });
-        displayables.sliderGroup.add(brushRect);
+      } else {
+        selected[newKey] = !selected[newKey];
       }
-      brushRect.attr("ignore", false);
-      var brushStart = this._brushStart;
-      var sliderGroup = this._displayables.sliderGroup;
-      var endPoint = sliderGroup.transformCoordToLocal(mouseX, mouseY);
-      var startPoint = sliderGroup.transformCoordToLocal(brushStart.x, brushStart.y);
-      var size = this._size;
-      endPoint[0] = Math.max(Math.min(size[0], endPoint[0]), 0);
-      brushRect.setShape({
-        x: startPoint[0],
-        y: 0,
-        width: endPoint[0] - startPoint[0],
-        height: size[1]
-      });
-    };
-    SliderZoomView2.prototype._dispatchZoomAction = function(realtime) {
-      var range = this._range;
       this.api.dispatchAction({
-        type: "dataZoom",
+        type: "selectDataRange",
         from: this.uid,
-        dataZoomId: this.dataZoomModel.id,
-        animation: realtime ? REALTIME_ANIMATION_CONFIG : null,
-        start: range[0],
-        end: range[1]
+        visualMapId: this.visualMapModel.id,
+        selected
       });
     };
-    SliderZoomView2.prototype._findCoordRect = function() {
-      var rect;
-      var coordSysInfoList = collectReferCoordSysModelInfo(this.dataZoomModel).infoList;
-      if (!rect && coordSysInfoList.length) {
-        var coordSys = coordSysInfoList[0].model.coordinateSystem;
-        rect = coordSys.getRect && coordSys.getRect();
-      }
-      if (!rect) {
-        var width = this.api.getWidth();
-        var height = this.api.getHeight();
-        rect = {
-          x: width * 0.2,
-          y: height * 0.2,
-          width: width * 0.6,
-          height: height * 0.6
-        };
-      }
-      return rect;
-    };
-    SliderZoomView2.type = "dataZoom.slider";
-    return SliderZoomView2;
-  })(DataZoomView)
+    PiecewiseVisualMapView2.type = "visualMap.piecewise";
+    return PiecewiseVisualMapView2;
+  })(VisualMapView)
 );
-function getOtherDim(thisDim) {
-  var map = {
-    x: "y",
-    y: "x",
-    radius: "angle",
-    angle: "radius"
-  };
-  return map[thisDim];
-}
-function getCursor(orient) {
-  return orient === "vertical" ? "ns-resize" : "ew-resize";
-}
 export {
-  SliderZoomView as default
+  PiecewiseVisualMapView as default
 };