q2-tecton-elements 1.23.0-alpha.0 → 1.24.0

package/dist/esm/charting-2a73ba8e.js

@@ -0,0 +1,3113 @@
+import { ad as SINGLE_REFERRING, I as each, a6 as createHashMap, ae as createSourceFromSeriesDataOption, D as isFunction, af as curry, ag as makeSeriesEncodeForAxisCoordSys, ah as prepareSeriesDataSchema, ai as enableDataStack, aj as SeriesData, ak as CoordinateSystemManager, m as map, al as SOURCE_FORMAT_ORIGINAL, a0 as isArray, am as getDataItemValue, an as getDimensionTypeByAxis, a3 as makeInner, ao as getOptionCategoryInterval, ap as makeLabelFormatter, aq as getBoundingRect, ar as shouldShowAllLabels, as as getPixelPrecision, at as linearMap, au as round, _ as __extends, av as ComponentModel, aw as mixin, ax as merge, y as defaults, ay as getLayoutParams, az as mergeLayoutParam, aA as OrdinalMeta, aB as fetchLayoutMode, a5 as filter, aC as invert, Q as BoundingRect, aD as applyTransform, aE as getScaleExtent, aF as increaseInterval, aG as IntervalScale, aH as getLayoutRect, aI as estimateLabelUnionRect, j as isObject, aJ as indexOf, aK as createScaleByModel, aL as isCartesian2DSeries, aM as findAxisModels, aN as getDataDimensionsOnAxis, aO as ifAxisCrossZero, aP as keys, aQ as isIntervalOrLogScale, aR as niceScaleExtent, V as Rect, G as Group, aS as layout, aT as AxisBuilder, a as extend, aU as groupTransition, aV as AxisView, aW as Line, aX as subPixelOptimizeLine, aY as ComponentView, a9 as use, aZ as install$3, a_ as retrieve2, E as ZRText, a$ as createTextStyle, b0 as windowOpen, d as getECData, b1 as retrieveRawValue, i as initProps, U as Sector, b2 as isString } from './installCanvasRenderer-4a470516.js';
+
+/**
+ * @class
+ * For example:
+ * {
+ *     coordSysName: 'cartesian2d',
+ *     coordSysDims: ['x', 'y', ...],
+ *     axisMap: HashMap({
+ *         x: xAxisModel,
+ *         y: yAxisModel
+ *     }),
+ *     categoryAxisMap: HashMap({
+ *         x: xAxisModel,
+ *         y: undefined
+ *     }),
+ *     // The index of the first category axis in `coordSysDims`.
+ *     // `null/undefined` means no category axis exists.
+ *     firstCategoryDimIndex: 1,
+ *     // To replace user specified encode.
+ * }
+ */
+
+var CoordSysInfo =
+/** @class */
+function () {
+  function CoordSysInfo(coordSysName) {
+    this.coordSysDims = [];
+    this.axisMap = createHashMap();
+    this.categoryAxisMap = createHashMap();
+    this.coordSysName = coordSysName;
+  }
+
+  return CoordSysInfo;
+}();
+
+function getCoordSysInfoBySeries(seriesModel) {
+  var coordSysName = seriesModel.get('coordinateSystem');
+  var result = new CoordSysInfo(coordSysName);
+  var fetch = fetchers[coordSysName];
+
+  if (fetch) {
+    fetch(seriesModel, result, result.axisMap, result.categoryAxisMap);
+    return result;
+  }
+}
+var fetchers = {
+  cartesian2d: function (seriesModel, result, axisMap, categoryAxisMap) {
+    var xAxisModel = seriesModel.getReferringComponents('xAxis', SINGLE_REFERRING).models[0];
+    var yAxisModel = seriesModel.getReferringComponents('yAxis', SINGLE_REFERRING).models[0];
+
+    result.coordSysDims = ['x', 'y'];
+    axisMap.set('x', xAxisModel);
+    axisMap.set('y', yAxisModel);
+
+    if (isCategory(xAxisModel)) {
+      categoryAxisMap.set('x', xAxisModel);
+      result.firstCategoryDimIndex = 0;
+    }
+
+    if (isCategory(yAxisModel)) {
+      categoryAxisMap.set('y', yAxisModel);
+      result.firstCategoryDimIndex == null && (result.firstCategoryDimIndex = 1);
+    }
+  },
+  singleAxis: function (seriesModel, result, axisMap, categoryAxisMap) {
+    var singleAxisModel = seriesModel.getReferringComponents('singleAxis', SINGLE_REFERRING).models[0];
+
+    result.coordSysDims = ['single'];
+    axisMap.set('single', singleAxisModel);
+
+    if (isCategory(singleAxisModel)) {
+      categoryAxisMap.set('single', singleAxisModel);
+      result.firstCategoryDimIndex = 0;
+    }
+  },
+  polar: function (seriesModel, result, axisMap, categoryAxisMap) {
+    var polarModel = seriesModel.getReferringComponents('polar', SINGLE_REFERRING).models[0];
+    var radiusAxisModel = polarModel.findAxisModel('radiusAxis');
+    var angleAxisModel = polarModel.findAxisModel('angleAxis');
+
+    result.coordSysDims = ['radius', 'angle'];
+    axisMap.set('radius', radiusAxisModel);
+    axisMap.set('angle', angleAxisModel);
+
+    if (isCategory(radiusAxisModel)) {
+      categoryAxisMap.set('radius', radiusAxisModel);
+      result.firstCategoryDimIndex = 0;
+    }
+
+    if (isCategory(angleAxisModel)) {
+      categoryAxisMap.set('angle', angleAxisModel);
+      result.firstCategoryDimIndex == null && (result.firstCategoryDimIndex = 1);
+    }
+  },
+  geo: function (seriesModel, result, axisMap, categoryAxisMap) {
+    result.coordSysDims = ['lng', 'lat'];
+  },
+  parallel: function (seriesModel, result, axisMap, categoryAxisMap) {
+    var ecModel = seriesModel.ecModel;
+    var parallelModel = ecModel.getComponent('parallel', seriesModel.get('parallelIndex'));
+    var coordSysDims = result.coordSysDims = parallelModel.dimensions.slice();
+    each(parallelModel.parallelAxisIndex, function (axisIndex, index) {
+      var axisModel = ecModel.getComponent('parallelAxis', axisIndex);
+      var axisDim = coordSysDims[index];
+      axisMap.set(axisDim, axisModel);
+
+      if (isCategory(axisModel)) {
+        categoryAxisMap.set(axisDim, axisModel);
+
+        if (result.firstCategoryDimIndex == null) {
+          result.firstCategoryDimIndex = index;
+        }
+      }
+    });
+  }
+};
+
+function isCategory(axisModel) {
+  return axisModel.get('type') === 'category';
+}
+
+function getCoordSysDimDefs(seriesModel, coordSysInfo) {
+  var coordSysName = seriesModel.get('coordinateSystem');
+  var registeredCoordSys = CoordinateSystemManager.get(coordSysName);
+  var coordSysDimDefs;
+
+  if (coordSysInfo && coordSysInfo.coordSysDims) {
+    coordSysDimDefs = map(coordSysInfo.coordSysDims, function (dim) {
+      var dimInfo = {
+        name: dim
+      };
+      var axisModel = coordSysInfo.axisMap.get(dim);
+
+      if (axisModel) {
+        var axisType = axisModel.get('type');
+        dimInfo.type = getDimensionTypeByAxis(axisType);
+      }
+
+      return dimInfo;
+    });
+  }
+
+  if (!coordSysDimDefs) {
+    // Get dimensions from registered coordinate system
+    coordSysDimDefs = registeredCoordSys && (registeredCoordSys.getDimensionsInfo ? registeredCoordSys.getDimensionsInfo() : registeredCoordSys.dimensions.slice()) || ['x', 'y'];
+  }
+
+  return coordSysDimDefs;
+}
+
+function injectOrdinalMeta(dimInfoList, createInvertedIndices, coordSysInfo) {
+  var firstCategoryDimIndex;
+  var hasNameEncode;
+  coordSysInfo && each(dimInfoList, function (dimInfo, dimIndex) {
+    var coordDim = dimInfo.coordDim;
+    var categoryAxisModel = coordSysInfo.categoryAxisMap.get(coordDim);
+
+    if (categoryAxisModel) {
+      if (firstCategoryDimIndex == null) {
+        firstCategoryDimIndex = dimIndex;
+      }
+
+      dimInfo.ordinalMeta = categoryAxisModel.getOrdinalMeta();
+
+      if (createInvertedIndices) {
+        dimInfo.createInvertedIndices = true;
+      }
+    }
+
+    if (dimInfo.otherDims.itemName != null) {
+      hasNameEncode = true;
+    }
+  });
+
+  if (!hasNameEncode && firstCategoryDimIndex != null) {
+    dimInfoList[firstCategoryDimIndex].otherDims.itemName = 0;
+  }
+
+  return firstCategoryDimIndex;
+}
+/**
+ * Caution: there are side effects to `sourceManager` in this method.
+ * Should better only be called in `Series['getInitialData']`.
+ */
+
+
+function createSeriesData(sourceRaw, seriesModel, opt) {
+  opt = opt || {};
+  var sourceManager = seriesModel.getSourceManager();
+  var source;
+  var isOriginalSource = false;
+
+  if (sourceRaw) {
+    isOriginalSource = true;
+    source = createSourceFromSeriesDataOption(sourceRaw);
+  } else {
+    source = sourceManager.getSource(); // Is series.data. not dataset.
+
+    isOriginalSource = source.sourceFormat === SOURCE_FORMAT_ORIGINAL;
+  }
+
+  var coordSysInfo = getCoordSysInfoBySeries(seriesModel);
+  var coordSysDimDefs = getCoordSysDimDefs(seriesModel, coordSysInfo);
+  var useEncodeDefaulter = opt.useEncodeDefaulter;
+  var encodeDefaulter = isFunction(useEncodeDefaulter) ? useEncodeDefaulter : useEncodeDefaulter ? curry(makeSeriesEncodeForAxisCoordSys, coordSysDimDefs, seriesModel) : null;
+  var createDimensionOptions = {
+    coordDimensions: coordSysDimDefs,
+    generateCoord: opt.generateCoord,
+    encodeDefine: seriesModel.getEncode(),
+    encodeDefaulter: encodeDefaulter,
+    canOmitUnusedDimensions: !isOriginalSource
+  };
+  var schema = prepareSeriesDataSchema(source, createDimensionOptions);
+  var firstCategoryDimIndex = injectOrdinalMeta(schema.dimensions, opt.createInvertedIndices, coordSysInfo);
+  var store = !isOriginalSource ? sourceManager.getSharedDataStore(schema) : null;
+  var stackCalculationInfo = enableDataStack(seriesModel, {
+    schema: schema,
+    store: store
+  });
+  var data = new SeriesData(schema, seriesModel);
+  data.setCalculationInfo(stackCalculationInfo);
+  var dimValueGetter = firstCategoryDimIndex != null && isNeedCompleteOrdinalData(source) ? function (itemOpt, dimName, dataIndex, dimIndex) {
+    // Use dataIndex as ordinal value in categoryAxis
+    return dimIndex === firstCategoryDimIndex ? dataIndex : this.defaultDimValueGetter(itemOpt, dimName, dataIndex, dimIndex);
+  } : null;
+  data.hasItemOption = false;
+  data.initData( // Try to reuse the data store in sourceManager if using dataset.
+  isOriginalSource ? source : store, null, dimValueGetter);
+  return data;
+}
+
+function isNeedCompleteOrdinalData(source) {
+  if (source.sourceFormat === SOURCE_FORMAT_ORIGINAL) {
+    var sampleItem = firstDataNotNull(source.data || []);
+    return !isArray(getDataItemValue(sampleItem));
+  }
+}
+
+function firstDataNotNull(arr) {
+  var i = 0;
+
+  while (i < arr.length && arr[i] == null) {
+    i++;
+  }
+
+  return arr[i];
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var AxisModelCommonMixin =
+/** @class */
+function () {
+  function AxisModelCommonMixin() {}
+
+  AxisModelCommonMixin.prototype.getNeedCrossZero = function () {
+    var option = this.option;
+    return !option.scale;
+  };
+  /**
+   * Should be implemented by each axis model if necessary.
+   * @return coordinate system model
+   */
+
+
+  AxisModelCommonMixin.prototype.getCoordSysModel = function () {
+    return;
+  };
+
+  return AxisModelCommonMixin;
+}();
+
+var inner$1 = makeInner();
+function createAxisLabels(axis) {
+  // Only ordinal scale support tick interval
+  return axis.type === 'category' ? makeCategoryLabels(axis) : makeRealNumberLabels(axis);
+}
+/**
+ * @param {module:echats/coord/Axis} axis
+ * @param {module:echarts/model/Model} tickModel For example, can be axisTick, splitLine, splitArea.
+ * @return {Object} {
+ *     ticks: Array.<number>
+ *     tickCategoryInterval: number
+ * }
+ */
+
+function createAxisTicks(axis, tickModel) {
+  // Only ordinal scale support tick interval
+  return axis.type === 'category' ? makeCategoryTicks(axis, tickModel) : {
+    ticks: map(axis.scale.getTicks(), function (tick) {
+      return tick.value;
+    })
+  };
+}
+
+function makeCategoryLabels(axis) {
+  var labelModel = axis.getLabelModel();
+  var result = makeCategoryLabelsActually(axis, labelModel);
+  return !labelModel.get('show') || axis.scale.isBlank() ? {
+    labels: [],
+    labelCategoryInterval: result.labelCategoryInterval
+  } : result;
+}
+
+function makeCategoryLabelsActually(axis, labelModel) {
+  var labelsCache = getListCache(axis, 'labels');
+  var optionLabelInterval = getOptionCategoryInterval(labelModel);
+  var result = listCacheGet(labelsCache, optionLabelInterval);
+
+  if (result) {
+    return result;
+  }
+
+  var labels;
+  var numericLabelInterval;
+
+  if (isFunction(optionLabelInterval)) {
+    labels = makeLabelsByCustomizedCategoryInterval(axis, optionLabelInterval);
+  } else {
+    numericLabelInterval = optionLabelInterval === 'auto' ? makeAutoCategoryInterval(axis) : optionLabelInterval;
+    labels = makeLabelsByNumericCategoryInterval(axis, numericLabelInterval);
+  } // Cache to avoid calling interval function repeatedly.
+
+
+  return listCacheSet(labelsCache, optionLabelInterval, {
+    labels: labels,
+    labelCategoryInterval: numericLabelInterval
+  });
+}
+
+function makeCategoryTicks(axis, tickModel) {
+  var ticksCache = getListCache(axis, 'ticks');
+  var optionTickInterval = getOptionCategoryInterval(tickModel);
+  var result = listCacheGet(ticksCache, optionTickInterval);
+
+  if (result) {
+    return result;
+  }
+
+  var ticks;
+  var tickCategoryInterval; // Optimize for the case that large category data and no label displayed,
+  // we should not return all ticks.
+
+  if (!tickModel.get('show') || axis.scale.isBlank()) {
+    ticks = [];
+  }
+
+  if (isFunction(optionTickInterval)) {
+    ticks = makeLabelsByCustomizedCategoryInterval(axis, optionTickInterval, true);
+  } // Always use label interval by default despite label show. Consider this
+  // scenario, Use multiple grid with the xAxis sync, and only one xAxis shows
+  // labels. `splitLine` and `axisTick` should be consistent in this case.
+  else if (optionTickInterval === 'auto') {
+      var labelsResult = makeCategoryLabelsActually(axis, axis.getLabelModel());
+      tickCategoryInterval = labelsResult.labelCategoryInterval;
+      ticks = map(labelsResult.labels, function (labelItem) {
+        return labelItem.tickValue;
+      });
+    } else {
+      tickCategoryInterval = optionTickInterval;
+      ticks = makeLabelsByNumericCategoryInterval(axis, tickCategoryInterval, true);
+    } // Cache to avoid calling interval function repeatedly.
+
+
+  return listCacheSet(ticksCache, optionTickInterval, {
+    ticks: ticks,
+    tickCategoryInterval: tickCategoryInterval
+  });
+}
+
+function makeRealNumberLabels(axis) {
+  var ticks = axis.scale.getTicks();
+  var labelFormatter = makeLabelFormatter(axis);
+  return {
+    labels: map(ticks, function (tick, idx) {
+      return {
+        level: tick.level,
+        formattedLabel: labelFormatter(tick, idx),
+        rawLabel: axis.scale.getLabel(tick),
+        tickValue: tick.value
+      };
+    })
+  };
+}
+
+function getListCache(axis, prop) {
+  // Because key can be a function, and cache size always is small, we use array cache.
+  return inner$1(axis)[prop] || (inner$1(axis)[prop] = []);
+}
+
+function listCacheGet(cache, key) {
+  for (var i = 0; i < cache.length; i++) {
+    if (cache[i].key === key) {
+      return cache[i].value;
+    }
+  }
+}
+
+function listCacheSet(cache, key, value) {
+  cache.push({
+    key: key,
+    value: value
+  });
+  return value;
+}
+
+function makeAutoCategoryInterval(axis) {
+  var result = inner$1(axis).autoInterval;
+  return result != null ? result : inner$1(axis).autoInterval = axis.calculateCategoryInterval();
+}
+/**
+ * Calculate interval for category axis ticks and labels.
+ * To get precise result, at least one of `getRotate` and `isHorizontal`
+ * should be implemented in axis.
+ */
+
+
+function calculateCategoryInterval(axis) {
+  var params = fetchAutoCategoryIntervalCalculationParams(axis);
+  var labelFormatter = makeLabelFormatter(axis);
+  var rotation = (params.axisRotate - params.labelRotate) / 180 * Math.PI;
+  var ordinalScale = axis.scale;
+  var ordinalExtent = ordinalScale.getExtent(); // Providing this method is for optimization:
+  // avoid generating a long array by `getTicks`
+  // in large category data case.
+
+  var tickCount = ordinalScale.count();
+
+  if (ordinalExtent[1] - ordinalExtent[0] < 1) {
+    return 0;
+  }
+
+  var step = 1; // Simple optimization. Empirical value: tick count should less than 40.
+
+  if (tickCount > 40) {
+    step = Math.max(1, Math.floor(tickCount / 40));
+  }
+
+  var tickValue = ordinalExtent[0];
+  var unitSpan = axis.dataToCoord(tickValue + 1) - axis.dataToCoord(tickValue);
+  var unitW = Math.abs(unitSpan * Math.cos(rotation));
+  var unitH = Math.abs(unitSpan * Math.sin(rotation));
+  var maxW = 0;
+  var maxH = 0; // Caution: Performance sensitive for large category data.
+  // Consider dataZoom, we should make appropriate step to avoid O(n) loop.
+
+  for (; tickValue <= ordinalExtent[1]; tickValue += step) {
+    var width = 0;
+    var height = 0; // Not precise, do not consider align and vertical align
+    // and each distance from axis line yet.
+
+    var rect = getBoundingRect(labelFormatter({
+      value: tickValue
+    }), params.font, 'center', 'top'); // Magic number
+
+    width = rect.width * 1.3;
+    height = rect.height * 1.3; // Min size, void long loop.
+
+    maxW = Math.max(maxW, width, 7);
+    maxH = Math.max(maxH, height, 7);
+  }
+
+  var dw = maxW / unitW;
+  var dh = maxH / unitH; // 0/0 is NaN, 1/0 is Infinity.
+
+  isNaN(dw) && (dw = Infinity);
+  isNaN(dh) && (dh = Infinity);
+  var interval = Math.max(0, Math.floor(Math.min(dw, dh)));
+  var cache = inner$1(axis.model);
+  var axisExtent = axis.getExtent();
+  var lastAutoInterval = cache.lastAutoInterval;
+  var lastTickCount = cache.lastTickCount; // Use cache to keep interval stable while moving zoom window,
+  // otherwise the calculated interval might jitter when the zoom
+  // window size is close to the interval-changing size.
+  // For example, if all of the axis labels are `a, b, c, d, e, f, g`.
+  // The jitter will cause that sometimes the displayed labels are
+  // `a, d, g` (interval: 2) sometimes `a, c, e`(interval: 1).
+
+  if (lastAutoInterval != null && lastTickCount != null && Math.abs(lastAutoInterval - interval) <= 1 && Math.abs(lastTickCount - tickCount) <= 1 // Always choose the bigger one, otherwise the critical
+  // point is not the same when zooming in or zooming out.
+  && lastAutoInterval > interval // If the axis change is caused by chart resize, the cache should not
+  // be used. Otherwise some hidden labels might not be shown again.
+  && cache.axisExtent0 === axisExtent[0] && cache.axisExtent1 === axisExtent[1]) {
+    interval = lastAutoInterval;
+  } // Only update cache if cache not used, otherwise the
+  // changing of interval is too insensitive.
+  else {
+      cache.lastTickCount = tickCount;
+      cache.lastAutoInterval = interval;
+      cache.axisExtent0 = axisExtent[0];
+      cache.axisExtent1 = axisExtent[1];
+    }
+
+  return interval;
+}
+
+function fetchAutoCategoryIntervalCalculationParams(axis) {
+  var labelModel = axis.getLabelModel();
+  return {
+    axisRotate: axis.getRotate ? axis.getRotate() : axis.isHorizontal && !axis.isHorizontal() ? 90 : 0,
+    labelRotate: labelModel.get('rotate') || 0,
+    font: labelModel.getFont()
+  };
+}
+
+function makeLabelsByNumericCategoryInterval(axis, categoryInterval, onlyTick) {
+  var labelFormatter = makeLabelFormatter(axis);
+  var ordinalScale = axis.scale;
+  var ordinalExtent = ordinalScale.getExtent();
+  var labelModel = axis.getLabelModel();
+  var result = []; // TODO: axisType: ordinalTime, pick the tick from each month/day/year/...
+
+  var step = Math.max((categoryInterval || 0) + 1, 1);
+  var startTick = ordinalExtent[0];
+  var tickCount = ordinalScale.count(); // Calculate start tick based on zero if possible to keep label consistent
+  // while zooming and moving while interval > 0. Otherwise the selection
+  // of displayable ticks and symbols probably keep changing.
+  // 3 is empirical value.
+
+  if (startTick !== 0 && step > 1 && tickCount / step > 2) {
+    startTick = Math.round(Math.ceil(startTick / step) * step);
+  } // (1) Only add min max label here but leave overlap checking
+  // to render stage, which also ensure the returned list
+  // suitable for splitLine and splitArea rendering.
+  // (2) Scales except category always contain min max label so
+  // do not need to perform this process.
+
+
+  var showAllLabel = shouldShowAllLabels(axis);
+  var includeMinLabel = labelModel.get('showMinLabel') || showAllLabel;
+  var includeMaxLabel = labelModel.get('showMaxLabel') || showAllLabel;
+
+  if (includeMinLabel && startTick !== ordinalExtent[0]) {
+    addItem(ordinalExtent[0]);
+  } // Optimize: avoid generating large array by `ordinalScale.getTicks()`.
+
+
+  var tickValue = startTick;
+
+  for (; tickValue <= ordinalExtent[1]; tickValue += step) {
+    addItem(tickValue);
+  }
+
+  if (includeMaxLabel && tickValue - step !== ordinalExtent[1]) {
+    addItem(ordinalExtent[1]);
+  }
+
+  function addItem(tickValue) {
+    var tickObj = {
+      value: tickValue
+    };
+    result.push(onlyTick ? tickValue : {
+      formattedLabel: labelFormatter(tickObj),
+      rawLabel: ordinalScale.getLabel(tickObj),
+      tickValue: tickValue
+    });
+  }
+
+  return result;
+}
+
+function makeLabelsByCustomizedCategoryInterval(axis, categoryInterval, onlyTick) {
+  var ordinalScale = axis.scale;
+  var labelFormatter = makeLabelFormatter(axis);
+  var result = [];
+  each(ordinalScale.getTicks(), function (tick) {
+    var rawLabel = ordinalScale.getLabel(tick);
+    var tickValue = tick.value;
+
+    if (categoryInterval(tick.value, rawLabel)) {
+      result.push(onlyTick ? tickValue : {
+        formattedLabel: labelFormatter(tick),
+        rawLabel: rawLabel,
+        tickValue: tickValue
+      });
+    }
+  });
+  return result;
+}
+
+var NORMALIZED_EXTENT = [0, 1];
+/**
+ * Base class of Axis.
+ */
+
+var Axis =
+/** @class */
+function () {
+  function Axis(dim, scale, extent) {
+    this.onBand = false;
+    this.inverse = false;
+    this.dim = dim;
+    this.scale = scale;
+    this._extent = extent || [0, 0];
+  }
+  /**
+   * If axis extent contain given coord
+   */
+
+
+  Axis.prototype.contain = function (coord) {
+    var extent = this._extent;
+    var min = Math.min(extent[0], extent[1]);
+    var max = Math.max(extent[0], extent[1]);
+    return coord >= min && coord <= max;
+  };
+  /**
+   * If axis extent contain given data
+   */
+
+
+  Axis.prototype.containData = function (data) {
+    return this.scale.contain(data);
+  };
+  /**
+   * Get coord extent.
+   */
+
+
+  Axis.prototype.getExtent = function () {
+    return this._extent.slice();
+  };
+  /**
+   * Get precision used for formatting
+   */
+
+
+  Axis.prototype.getPixelPrecision = function (dataExtent) {
+    return getPixelPrecision(dataExtent || this.scale.getExtent(), this._extent);
+  };
+  /**
+   * Set coord extent
+   */
+
+
+  Axis.prototype.setExtent = function (start, end) {
+    var extent = this._extent;
+    extent[0] = start;
+    extent[1] = end;
+  };
+  /**
+   * Convert data to coord. Data is the rank if it has an ordinal scale
+   */
+
+
+  Axis.prototype.dataToCoord = function (data, clamp) {
+    var extent = this._extent;
+    var scale = this.scale;
+    data = scale.normalize(data);
+
+    if (this.onBand && scale.type === 'ordinal') {
+      extent = extent.slice();
+      fixExtentWithBands(extent, scale.count());
+    }
+
+    return linearMap(data, NORMALIZED_EXTENT, extent, clamp);
+  };
+  /**
+   * Convert coord to data. Data is the rank if it has an ordinal scale
+   */
+
+
+  Axis.prototype.coordToData = function (coord, clamp) {
+    var extent = this._extent;
+    var scale = this.scale;
+
+    if (this.onBand && scale.type === 'ordinal') {
+      extent = extent.slice();
+      fixExtentWithBands(extent, scale.count());
+    }
+
+    var t = linearMap(coord, extent, NORMALIZED_EXTENT, clamp);
+    return this.scale.scale(t);
+  };
+  /**
+   * Convert pixel point to data in axis
+   */
+
+
+  Axis.prototype.pointToData = function (point, clamp) {
+    // Should be implemented in derived class if necessary.
+    return;
+  };
+  /**
+   * Different from `zrUtil.map(axis.getTicks(), axis.dataToCoord, axis)`,
+   * `axis.getTicksCoords` considers `onBand`, which is used by
+   * `boundaryGap:true` of category axis and splitLine and splitArea.
+   * @param opt.tickModel default: axis.model.getModel('axisTick')
+   * @param opt.clamp If `true`, the first and the last
+   *        tick must be at the axis end points. Otherwise, clip ticks
+   *        that outside the axis extent.
+   */
+
+
+  Axis.prototype.getTicksCoords = function (opt) {
+    opt = opt || {};
+    var tickModel = opt.tickModel || this.getTickModel();
+    var result = createAxisTicks(this, tickModel);
+    var ticks = result.ticks;
+    var ticksCoords = map(ticks, function (tickVal) {
+      return {
+        coord: this.dataToCoord(this.scale.type === 'ordinal' ? this.scale.getRawOrdinalNumber(tickVal) : tickVal),
+        tickValue: tickVal
+      };
+    }, this);
+    var alignWithLabel = tickModel.get('alignWithLabel');
+    fixOnBandTicksCoords(this, ticksCoords, alignWithLabel, opt.clamp);
+    return ticksCoords;
+  };
+
+  Axis.prototype.getMinorTicksCoords = function () {
+    if (this.scale.type === 'ordinal') {
+      // Category axis doesn't support minor ticks
+      return [];
+    }
+
+    var minorTickModel = this.model.getModel('minorTick');
+    var splitNumber = minorTickModel.get('splitNumber'); // Protection.
+
+    if (!(splitNumber > 0 && splitNumber < 100)) {
+      splitNumber = 5;
+    }
+
+    var minorTicks = this.scale.getMinorTicks(splitNumber);
+    var minorTicksCoords = map(minorTicks, function (minorTicksGroup) {
+      return map(minorTicksGroup, function (minorTick) {
+        return {
+          coord: this.dataToCoord(minorTick),
+          tickValue: minorTick
+        };
+      }, this);
+    }, this);
+    return minorTicksCoords;
+  };
+
+  Axis.prototype.getViewLabels = function () {
+    return createAxisLabels(this).labels;
+  };
+
+  Axis.prototype.getLabelModel = function () {
+    return this.model.getModel('axisLabel');
+  };
+  /**
+   * Notice here we only get the default tick model. For splitLine
+   * or splitArea, we should pass the splitLineModel or splitAreaModel
+   * manually when calling `getTicksCoords`.
+   * In GL, this method may be overridden to:
+   * `axisModel.getModel('axisTick', grid3DModel.getModel('axisTick'));`
+   */
+
+
+  Axis.prototype.getTickModel = function () {
+    return this.model.getModel('axisTick');
+  };
+  /**
+   * Get width of band
+   */
+
+
+  Axis.prototype.getBandWidth = function () {
+    var axisExtent = this._extent;
+    var dataExtent = this.scale.getExtent();
+    var len = dataExtent[1] - dataExtent[0] + (this.onBand ? 1 : 0); // Fix #2728, avoid NaN when only one data.
+
+    len === 0 && (len = 1);
+    var size = Math.abs(axisExtent[1] - axisExtent[0]);
+    return Math.abs(size) / len;
+  };
+  /**
+   * Only be called in category axis.
+   * Can be overridden, consider other axes like in 3D.
+   * @return Auto interval for cateogry axis tick and label
+   */
+
+
+  Axis.prototype.calculateCategoryInterval = function () {
+    return calculateCategoryInterval(this);
+  };
+
+  return Axis;
+}();
+
+function fixExtentWithBands(extent, nTick) {
+  var size = extent[1] - extent[0];
+  var len = nTick;
+  var margin = size / len / 2;
+  extent[0] += margin;
+  extent[1] -= margin;
+} // If axis has labels [1, 2, 3, 4]. Bands on the axis are
+// |---1---|---2---|---3---|---4---|.
+// So the displayed ticks and splitLine/splitArea should between
+// each data item, otherwise cause misleading (e.g., split tow bars
+// of a single data item when there are two bar series).
+// Also consider if tickCategoryInterval > 0 and onBand, ticks and
+// splitLine/spliteArea should layout appropriately corresponding
+// to displayed labels. (So we should not use `getBandWidth` in this
+// case).
+
+
+function fixOnBandTicksCoords(axis, ticksCoords, alignWithLabel, clamp) {
+  var ticksLen = ticksCoords.length;
+
+  if (!axis.onBand || alignWithLabel || !ticksLen) {
+    return;
+  }
+
+  var axisExtent = axis.getExtent();
+  var last;
+  var diffSize;
+
+  if (ticksLen === 1) {
+    ticksCoords[0].coord = axisExtent[0];
+    last = ticksCoords[1] = {
+      coord: axisExtent[0]
+    };
+  } else {
+    var crossLen = ticksCoords[ticksLen - 1].tickValue - ticksCoords[0].tickValue;
+    var shift_1 = (ticksCoords[ticksLen - 1].coord - ticksCoords[0].coord) / crossLen;
+    each(ticksCoords, function (ticksItem) {
+      ticksItem.coord -= shift_1 / 2;
+    });
+    var dataExtent = axis.scale.getExtent();
+    diffSize = 1 + dataExtent[1] - ticksCoords[ticksLen - 1].tickValue;
+    last = {
+      coord: ticksCoords[ticksLen - 1].coord + shift_1 * diffSize
+    };
+    ticksCoords.push(last);
+  }
+
+  var inverse = axisExtent[0] > axisExtent[1]; // Handling clamp.
+
+  if (littleThan(ticksCoords[0].coord, axisExtent[0])) {
+    clamp ? ticksCoords[0].coord = axisExtent[0] : ticksCoords.shift();
+  }
+
+  if (clamp && littleThan(axisExtent[0], ticksCoords[0].coord)) {
+    ticksCoords.unshift({
+      coord: axisExtent[0]
+    });
+  }
+
+  if (littleThan(axisExtent[1], last.coord)) {
+    clamp ? last.coord = axisExtent[1] : ticksCoords.pop();
+  }
+
+  if (clamp && littleThan(last.coord, axisExtent[1])) {
+    ticksCoords.push({
+      coord: axisExtent[1]
+    });
+  }
+
+  function littleThan(a, b) {
+    // Avoid rounding error cause calculated tick coord different with extent.
+    // It may cause an extra unnecessary tick added.
+    a = round(a);
+    b = round(b);
+    return inverse ? a > b : a < b;
+  }
+}
+
+var GridModel =
+/** @class */
+function (_super) {
+  __extends(GridModel, _super);
+
+  function GridModel() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  GridModel.type = 'grid';
+  GridModel.dependencies = ['xAxis', 'yAxis'];
+  GridModel.layoutMode = 'box';
+  GridModel.defaultOption = {
+    show: false,
+    // zlevel: 0,
+    z: 0,
+    left: '10%',
+    top: 60,
+    right: '10%',
+    bottom: 70,
+    // If grid size contain label
+    containLabel: false,
+    // width: {totalWidth} - left - right,
+    // height: {totalHeight} - top - bottom,
+    backgroundColor: 'rgba(0,0,0,0)',
+    borderWidth: 1,
+    borderColor: '#ccc'
+  };
+  return GridModel;
+}(ComponentModel);
+
+var CartesianAxisModel =
+/** @class */
+function (_super) {
+  __extends(CartesianAxisModel, _super);
+
+  function CartesianAxisModel() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  CartesianAxisModel.prototype.getCoordSysModel = function () {
+    return this.getReferringComponents('grid', SINGLE_REFERRING).models[0];
+  };
+
+  CartesianAxisModel.type = 'cartesian2dAxis';
+  return CartesianAxisModel;
+}(ComponentModel);
+mixin(CartesianAxisModel, AxisModelCommonMixin);
+
+var defaultOption = {
+  show: true,
+  // zlevel: 0,
+  z: 0,
+  // Inverse the axis.
+  inverse: false,
+  // Axis name displayed.
+  name: '',
+  // 'start' | 'middle' | 'end'
+  nameLocation: 'end',
+  // By degree. By default auto rotate by nameLocation.
+  nameRotate: null,
+  nameTruncate: {
+    maxWidth: null,
+    ellipsis: '...',
+    placeholder: '.'
+  },
+  // Use global text style by default.
+  nameTextStyle: {},
+  // The gap between axisName and axisLine.
+  nameGap: 15,
+  // Default `false` to support tooltip.
+  silent: false,
+  // Default `false` to avoid legacy user event listener fail.
+  triggerEvent: false,
+  tooltip: {
+    show: false
+  },
+  axisPointer: {},
+  axisLine: {
+    show: true,
+    onZero: true,
+    onZeroAxisIndex: null,
+    lineStyle: {
+      color: '#6E7079',
+      width: 1,
+      type: 'solid'
+    },
+    // The arrow at both ends the the axis.
+    symbol: ['none', 'none'],
+    symbolSize: [10, 15]
+  },
+  axisTick: {
+    show: true,
+    // Whether axisTick is inside the grid or outside the grid.
+    inside: false,
+    // The length of axisTick.
+    length: 5,
+    lineStyle: {
+      width: 1
+    }
+  },
+  axisLabel: {
+    show: true,
+    // Whether axisLabel is inside the grid or outside the grid.
+    inside: false,
+    rotate: 0,
+    // true | false | null/undefined (auto)
+    showMinLabel: null,
+    // true | false | null/undefined (auto)
+    showMaxLabel: null,
+    margin: 8,
+    // formatter: null,
+    fontSize: 12
+  },
+  splitLine: {
+    show: true,
+    lineStyle: {
+      color: ['#E0E6F1'],
+      width: 1,
+      type: 'solid'
+    }
+  },
+  splitArea: {
+    show: false,
+    areaStyle: {
+      color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+    }
+  }
+};
+var categoryAxis = merge({
+  // The gap at both ends of the axis. For categoryAxis, boolean.
+  boundaryGap: true,
+  // Set false to faster category collection.
+  deduplication: null,
+  // splitArea: {
+  // show: false
+  // },
+  splitLine: {
+    show: false
+  },
+  axisTick: {
+    // If tick is align with label when boundaryGap is true
+    alignWithLabel: false,
+    interval: 'auto'
+  },
+  axisLabel: {
+    interval: 'auto'
+  }
+}, defaultOption);
+var valueAxis = merge({
+  boundaryGap: [0, 0],
+  axisLine: {
+    // Not shown when other axis is categoryAxis in cartesian
+    show: 'auto'
+  },
+  axisTick: {
+    // Not shown when other axis is categoryAxis in cartesian
+    show: 'auto'
+  },
+  // TODO
+  // min/max: [30, datamin, 60] or [20, datamin] or [datamin, 60]
+  splitNumber: 5,
+  minorTick: {
+    // Minor tick, not available for cateogry axis.
+    show: false,
+    // Split number of minor ticks. The value should be in range of (0, 100)
+    splitNumber: 5,
+    // Length of minor tick
+    length: 3,
+    // Line style
+    lineStyle: {// Default to be same with axisTick
+    }
+  },
+  minorSplitLine: {
+    show: false,
+    lineStyle: {
+      color: '#F4F7FD',
+      width: 1
+    }
+  }
+}, defaultOption);
+var timeAxis = merge({
+  splitNumber: 6,
+  axisLabel: {
+    // To eliminate labels that are not nice
+    showMinLabel: false,
+    showMaxLabel: false,
+    rich: {
+      primary: {
+        fontWeight: 'bold'
+      }
+    }
+  },
+  splitLine: {
+    show: false
+  }
+}, valueAxis);
+var logAxis = defaults({
+  logBase: 10
+}, valueAxis);
+const axisDefault = {
+  category: categoryAxis,
+  value: valueAxis,
+  time: timeAxis,
+  log: logAxis
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+var AXIS_TYPES = {
+  value: 1,
+  category: 1,
+  time: 1,
+  log: 1
+};
+
+/**
+ * Generate sub axis model class
+ * @param axisName 'x' 'y' 'radius' 'angle' 'parallel' ...
+ */
+
+function axisModelCreator(registers, axisName, BaseAxisModelClass, extraDefaultOption) {
+  each(AXIS_TYPES, function (v, axisType) {
+    var defaultOption = merge(merge({}, axisDefault[axisType], true), extraDefaultOption, true);
+
+    var AxisModel =
+    /** @class */
+    function (_super) {
+      __extends(AxisModel, _super);
+
+      function AxisModel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+
+        _this.type = axisName + 'Axis.' + axisType;
+        return _this;
+      }
+
+      AxisModel.prototype.mergeDefaultAndTheme = function (option, ecModel) {
+        var layoutMode = fetchLayoutMode(this);
+        var inputPositionParams = layoutMode ? getLayoutParams(option) : {};
+        var themeModel = ecModel.getTheme();
+        merge(option, themeModel.get(axisType + 'Axis'));
+        merge(option, this.getDefaultOption());
+        option.type = getAxisType(option);
+
+        if (layoutMode) {
+          mergeLayoutParam(option, inputPositionParams, layoutMode);
+        }
+      };
+
+      AxisModel.prototype.optionUpdated = function () {
+        var thisOption = this.option;
+
+        if (thisOption.type === 'category') {
+          this.__ordinalMeta = OrdinalMeta.createByAxisModel(this);
+        }
+      };
+      /**
+       * Should not be called before all of 'getInitailData' finished.
+       * Because categories are collected during initializing data.
+       */
+
+
+      AxisModel.prototype.getCategories = function (rawData) {
+        var option = this.option; // FIXME
+        // warning if called before all of 'getInitailData' finished.
+
+        if (option.type === 'category') {
+          if (rawData) {
+            return option.data;
+          }
+
+          return this.__ordinalMeta.categories;
+        }
+      };
+
+      AxisModel.prototype.getOrdinalMeta = function () {
+        return this.__ordinalMeta;
+      };
+
+      AxisModel.type = axisName + 'Axis.' + axisType;
+      AxisModel.defaultOption = defaultOption;
+      return AxisModel;
+    }(BaseAxisModelClass);
+
+    registers.registerComponentModel(AxisModel);
+  });
+  registers.registerSubTypeDefaulter(axisName + 'Axis', getAxisType);
+}
+
+function getAxisType(option) {
+  // Default axis with data is category axis
+  return option.type || (option.data ? 'category' : 'value');
+}
+
+var Cartesian =
+/** @class */
+function () {
+  function Cartesian(name) {
+    this.type = 'cartesian';
+    this._dimList = [];
+    this._axes = {};
+    this.name = name || '';
+  }
+
+  Cartesian.prototype.getAxis = function (dim) {
+    return this._axes[dim];
+  };
+
+  Cartesian.prototype.getAxes = function () {
+    return map(this._dimList, function (dim) {
+      return this._axes[dim];
+    }, this);
+  };
+
+  Cartesian.prototype.getAxesByScale = function (scaleType) {
+    scaleType = scaleType.toLowerCase();
+    return filter(this.getAxes(), function (axis) {
+      return axis.scale.type === scaleType;
+    });
+  };
+
+  Cartesian.prototype.addAxis = function (axis) {
+    var dim = axis.dim;
+    this._axes[dim] = axis;
+
+    this._dimList.push(dim);
+  };
+
+  return Cartesian;
+}();
+
+var cartesian2DDimensions = ['x', 'y'];
+
+function canCalculateAffineTransform(scale) {
+  return scale.type === 'interval' || scale.type === 'time';
+}
+
+var Cartesian2D =
+/** @class */
+function (_super) {
+  __extends(Cartesian2D, _super);
+
+  function Cartesian2D() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = 'cartesian2d';
+    _this.dimensions = cartesian2DDimensions;
+    return _this;
+  }
+  /**
+   * Calculate an affine transform matrix if two axes are time or value.
+   * It's mainly for accelartion on the large time series data.
+   */
+
+
+  Cartesian2D.prototype.calcAffineTransform = function () {
+    this._transform = this._invTransform = null;
+    var xAxisScale = this.getAxis('x').scale;
+    var yAxisScale = this.getAxis('y').scale;
+
+    if (!canCalculateAffineTransform(xAxisScale) || !canCalculateAffineTransform(yAxisScale)) {
+      return;
+    }
+
+    var xScaleExtent = xAxisScale.getExtent();
+    var yScaleExtent = yAxisScale.getExtent();
+    var start = this.dataToPoint([xScaleExtent[0], yScaleExtent[0]]);
+    var end = this.dataToPoint([xScaleExtent[1], yScaleExtent[1]]);
+    var xScaleSpan = xScaleExtent[1] - xScaleExtent[0];
+    var yScaleSpan = yScaleExtent[1] - yScaleExtent[0];
+
+    if (!xScaleSpan || !yScaleSpan) {
+      return;
+    } // Accelerate data to point calculation on the special large time series data.
+
+
+    var scaleX = (end[0] - start[0]) / xScaleSpan;
+    var scaleY = (end[1] - start[1]) / yScaleSpan;
+    var translateX = start[0] - xScaleExtent[0] * scaleX;
+    var translateY = start[1] - yScaleExtent[0] * scaleY;
+    var m = this._transform = [scaleX, 0, 0, scaleY, translateX, translateY];
+    this._invTransform = invert([], m);
+  };
+  /**
+   * Base axis will be used on stacking.
+   */
+
+
+  Cartesian2D.prototype.getBaseAxis = function () {
+    return this.getAxesByScale('ordinal')[0] || this.getAxesByScale('time')[0] || this.getAxis('x');
+  };
+
+  Cartesian2D.prototype.containPoint = function (point) {
+    var axisX = this.getAxis('x');
+    var axisY = this.getAxis('y');
+    return axisX.contain(axisX.toLocalCoord(point[0])) && axisY.contain(axisY.toLocalCoord(point[1]));
+  };
+
+  Cartesian2D.prototype.containData = function (data) {
+    return this.getAxis('x').containData(data[0]) && this.getAxis('y').containData(data[1]);
+  };
+
+  Cartesian2D.prototype.containZone = function (data1, data2) {
+    var zoneDiag1 = this.dataToPoint(data1);
+    var zoneDiag2 = this.dataToPoint(data2);
+    var area = this.getArea();
+    var zone = new BoundingRect(zoneDiag1[0], zoneDiag1[1], zoneDiag2[0] - zoneDiag1[0], zoneDiag2[1] - zoneDiag1[1]);
+    return area.intersect(zone);
+  };
+
+  Cartesian2D.prototype.dataToPoint = function (data, clamp, out) {
+    out = out || [];
+    var xVal = data[0];
+    var yVal = data[1]; // Fast path
+
+    if (this._transform // It's supported that if data is like `[Inifity, 123]`, where only Y pixel calculated.
+    && xVal != null && isFinite(xVal) && yVal != null && isFinite(yVal)) {
+      return applyTransform(out, data, this._transform);
+    }
+
+    var xAxis = this.getAxis('x');
+    var yAxis = this.getAxis('y');
+    out[0] = xAxis.toGlobalCoord(xAxis.dataToCoord(xVal, clamp));
+    out[1] = yAxis.toGlobalCoord(yAxis.dataToCoord(yVal, clamp));
+    return out;
+  };
+
+  Cartesian2D.prototype.clampData = function (data, out) {
+    var xScale = this.getAxis('x').scale;
+    var yScale = this.getAxis('y').scale;
+    var xAxisExtent = xScale.getExtent();
+    var yAxisExtent = yScale.getExtent();
+    var x = xScale.parse(data[0]);
+    var y = yScale.parse(data[1]);
+    out = out || [];
+    out[0] = Math.min(Math.max(Math.min(xAxisExtent[0], xAxisExtent[1]), x), Math.max(xAxisExtent[0], xAxisExtent[1]));
+    out[1] = Math.min(Math.max(Math.min(yAxisExtent[0], yAxisExtent[1]), y), Math.max(yAxisExtent[0], yAxisExtent[1]));
+    return out;
+  };
+
+  Cartesian2D.prototype.pointToData = function (point, clamp) {
+    var out = [];
+
+    if (this._invTransform) {
+      return applyTransform(out, point, this._invTransform);
+    }
+
+    var xAxis = this.getAxis('x');
+    var yAxis = this.getAxis('y');
+    out[0] = xAxis.coordToData(xAxis.toLocalCoord(point[0]), clamp);
+    out[1] = yAxis.coordToData(yAxis.toLocalCoord(point[1]), clamp);
+    return out;
+  };
+
+  Cartesian2D.prototype.getOtherAxis = function (axis) {
+    return this.getAxis(axis.dim === 'x' ? 'y' : 'x');
+  };
+  /**
+   * Get rect area of cartesian.
+   * Area will have a contain function to determine if a point is in the coordinate system.
+   */
+
+
+  Cartesian2D.prototype.getArea = function () {
+    var xExtent = this.getAxis('x').getGlobalExtent();
+    var yExtent = this.getAxis('y').getGlobalExtent();
+    var x = Math.min(xExtent[0], xExtent[1]);
+    var y = Math.min(yExtent[0], yExtent[1]);
+    var width = Math.max(xExtent[0], xExtent[1]) - x;
+    var height = Math.max(yExtent[0], yExtent[1]) - y;
+    return new BoundingRect(x, y, width, height);
+  };
+
+  return Cartesian2D;
+}(Cartesian);
+
+var Axis2D =
+/** @class */
+function (_super) {
+  __extends(Axis2D, _super);
+
+  function Axis2D(dim, scale, coordExtent, axisType, position) {
+    var _this = _super.call(this, dim, scale, coordExtent) || this;
+    /**
+     * Index of axis, can be used as key
+     * Injected outside.
+     */
+
+
+    _this.index = 0;
+    _this.type = axisType || 'value';
+    _this.position = position || 'bottom';
+    return _this;
+  }
+
+  Axis2D.prototype.isHorizontal = function () {
+    var position = this.position;
+    return position === 'top' || position === 'bottom';
+  };
+  /**
+   * Each item cooresponds to this.getExtent(), which
+   * means globalExtent[0] may greater than globalExtent[1],
+   * unless `asc` is input.
+   *
+   * @param {boolean} [asc]
+   * @return {Array.<number>}
+   */
+
+
+  Axis2D.prototype.getGlobalExtent = function (asc) {
+    var ret = this.getExtent();
+    ret[0] = this.toGlobalCoord(ret[0]);
+    ret[1] = this.toGlobalCoord(ret[1]);
+    asc && ret[0] > ret[1] && ret.reverse();
+    return ret;
+  };
+
+  Axis2D.prototype.pointToData = function (point, clamp) {
+    return this.coordToData(this.toLocalCoord(point[this.dim === 'x' ? 0 : 1]), clamp);
+  };
+  /**
+   * Set ordinalSortInfo
+   * @param info new OrdinalSortInfo
+   */
+
+
+  Axis2D.prototype.setCategorySortInfo = function (info) {
+    if (this.type !== 'category') {
+      return false;
+    }
+
+    this.model.option.categorySortInfo = info;
+    this.scale.setSortInfo(info);
+  };
+
+  return Axis2D;
+}(Axis);
+
+var mathLog = Math.log;
+function alignScaleTicks(scale, axisModel, alignToScale) {
+  var intervalScaleProto = IntervalScale.prototype; // NOTE: There is a precondition for log scale  here:
+  // In log scale we store _interval and _extent of exponent value.
+  // So if we use the method of InternalScale to set/get these data.
+  // It process the exponent value, which is linear and what we want here.
+
+  var alignToTicks = intervalScaleProto.getTicks.call(alignToScale);
+  var alignToNicedTicks = intervalScaleProto.getTicks.call(alignToScale, true);
+  var alignToSplitNumber = alignToTicks.length - 1;
+  var alignToInterval = intervalScaleProto.getInterval.call(alignToScale);
+  var scaleExtent = getScaleExtent(scale, axisModel);
+  var rawExtent = scaleExtent.extent;
+  var isMinFixed = scaleExtent.fixMin;
+  var isMaxFixed = scaleExtent.fixMax;
+
+  if (scale.type === 'log') {
+    var logBase = mathLog(scale.base);
+    rawExtent = [mathLog(rawExtent[0]) / logBase, mathLog(rawExtent[1]) / logBase];
+  }
+
+  scale.setExtent(rawExtent[0], rawExtent[1]);
+  scale.calcNiceExtent({
+    splitNumber: alignToSplitNumber,
+    fixMin: isMinFixed,
+    fixMax: isMaxFixed
+  });
+  var extent = intervalScaleProto.getExtent.call(scale); // Need to update the rawExtent.
+  // Because value in rawExtent may be not parsed. e.g. 'dataMin', 'dataMax'
+
+  if (isMinFixed) {
+    rawExtent[0] = extent[0];
+  }
+
+  if (isMaxFixed) {
+    rawExtent[1] = extent[1];
+  }
+
+  var interval = intervalScaleProto.getInterval.call(scale);
+  var min = rawExtent[0];
+  var max = rawExtent[1];
+
+  if (isMinFixed && isMaxFixed) {
+    // User set min, max, divide to get new interval
+    interval = (max - min) / alignToSplitNumber;
+  } else if (isMinFixed) {
+    max = rawExtent[0] + interval * alignToSplitNumber; // User set min, expand extent on the other side
+
+    while (max < rawExtent[1] && isFinite(max) && isFinite(rawExtent[1])) {
+      interval = increaseInterval(interval);
+      max = rawExtent[0] + interval * alignToSplitNumber;
+    }
+  } else if (isMaxFixed) {
+    // User set max, expand extent on the other side
+    min = rawExtent[1] - interval * alignToSplitNumber;
+
+    while (min > rawExtent[0] && isFinite(min) && isFinite(rawExtent[0])) {
+      interval = increaseInterval(interval);
+      min = rawExtent[1] - interval * alignToSplitNumber;
+    }
+  } else {
+    var nicedSplitNumber = scale.getTicks().length - 1;
+
+    if (nicedSplitNumber > alignToSplitNumber) {
+      interval = increaseInterval(interval);
+    }
+
+    var range = interval * alignToSplitNumber;
+    max = Math.ceil(rawExtent[1] / interval) * interval;
+    min = round(max - range); // Not change the result that crossing zero.
+
+    if (min < 0 && rawExtent[0] >= 0) {
+      min = 0;
+      max = round(range);
+    } else if (max > 0 && rawExtent[1] <= 0) {
+      max = 0;
+      min = -round(range);
+    }
+  } // Adjust min, max based on the extent of alignTo. When min or max is set in alignTo scale
+
+
+  var t0 = (alignToTicks[0].value - alignToNicedTicks[0].value) / alignToInterval;
+  var t1 = (alignToTicks[alignToSplitNumber].value - alignToNicedTicks[alignToSplitNumber].value) / alignToInterval; // NOTE: Must in setExtent -> setInterval -> setNiceExtent order.
+
+  intervalScaleProto.setExtent.call(scale, min + interval * t0, max + interval * t1);
+  intervalScaleProto.setInterval.call(scale, interval);
+
+  if (t0 || t1) {
+    intervalScaleProto.setNiceExtent.call(scale, min + interval, max - interval);
+  }
+}
+
+var Grid =
+/** @class */
+function () {
+  function Grid(gridModel, ecModel, api) {
+    // FIXME:TS where used (different from registered type 'cartesian2d')?
+    this.type = 'grid';
+    this._coordsMap = {};
+    this._coordsList = [];
+    this._axesMap = {};
+    this._axesList = [];
+    this.axisPointerEnabled = true;
+    this.dimensions = cartesian2DDimensions;
+
+    this._initCartesian(gridModel, ecModel, api);
+
+    this.model = gridModel;
+  }
+
+  Grid.prototype.getRect = function () {
+    return this._rect;
+  };
+
+  Grid.prototype.update = function (ecModel, api) {
+    var axesMap = this._axesMap;
+
+    this._updateScale(ecModel, this.model);
+
+    function updateAxisTicks(axes) {
+      var alignTo; // Axis is added in order of axisIndex.
+
+      var axesIndices = keys(axes);
+      var len = axesIndices.length;
+
+      if (!len) {
+        return;
+      }
+
+      var axisNeedsAlign = []; // Process once and calculate the ticks for those don't use alignTicks.
+
+      for (var i = len - 1; i >= 0; i--) {
+        var idx = +axesIndices[i]; // Convert to number.
+
+        var axis = axes[idx];
+        var model = axis.model;
+        var scale = axis.scale;
+
+        if ( // Only value and log axis without interval support alignTicks.
+        isIntervalOrLogScale(scale) && model.get('alignTicks') && model.get('interval') == null) {
+          axisNeedsAlign.push(axis);
+        } else {
+          niceScaleExtent(scale, model);
+
+          if (isIntervalOrLogScale(scale)) {
+            // Can only align to interval or log axis.
+            alignTo = axis;
+          }
+        }
+      }
+      // PENDING. Should we find the axis that both set interval, min, max and align to this one?
+
+      if (axisNeedsAlign.length) {
+        if (!alignTo) {
+          alignTo = axisNeedsAlign.pop();
+          niceScaleExtent(alignTo.scale, alignTo.model);
+        }
+
+        each(axisNeedsAlign, function (axis) {
+          alignScaleTicks(axis.scale, axis.model, alignTo.scale);
+        });
+      }
+    }
+
+    updateAxisTicks(axesMap.x);
+    updateAxisTicks(axesMap.y); // Key: axisDim_axisIndex, value: boolean, whether onZero target.
+
+    var onZeroRecords = {};
+    each(axesMap.x, function (xAxis) {
+      fixAxisOnZero(axesMap, 'y', xAxis, onZeroRecords);
+    });
+    each(axesMap.y, function (yAxis) {
+      fixAxisOnZero(axesMap, 'x', yAxis, onZeroRecords);
+    }); // Resize again if containLabel is enabled
+    // FIXME It may cause getting wrong grid size in data processing stage
+
+    this.resize(this.model, api);
+  };
+  /**
+   * Resize the grid
+   */
+
+
+  Grid.prototype.resize = function (gridModel, api, ignoreContainLabel) {
+    var boxLayoutParams = gridModel.getBoxLayoutParams();
+    var isContainLabel = !ignoreContainLabel && gridModel.get('containLabel');
+    var gridRect = getLayoutRect(boxLayoutParams, {
+      width: api.getWidth(),
+      height: api.getHeight()
+    });
+    this._rect = gridRect;
+    var axesList = this._axesList;
+    adjustAxes(); // Minus label size
+
+    if (isContainLabel) {
+      each(axesList, function (axis) {
+        if (!axis.model.get(['axisLabel', 'inside'])) {
+          var labelUnionRect = estimateLabelUnionRect(axis);
+
+          if (labelUnionRect) {
+            var dim = axis.isHorizontal() ? 'height' : 'width';
+            var margin = axis.model.get(['axisLabel', 'margin']);
+            gridRect[dim] -= labelUnionRect[dim] + margin;
+
+            if (axis.position === 'top') {
+              gridRect.y += labelUnionRect.height + margin;
+            } else if (axis.position === 'left') {
+              gridRect.x += labelUnionRect.width + margin;
+            }
+          }
+        }
+      });
+      adjustAxes();
+    }
+
+    each(this._coordsList, function (coord) {
+      // Calculate affine matrix to accelerate the data to point transform.
+      // If all the axes scales are time or value.
+      coord.calcAffineTransform();
+    });
+
+    function adjustAxes() {
+      each(axesList, function (axis) {
+        var isHorizontal = axis.isHorizontal();
+        var extent = isHorizontal ? [0, gridRect.width] : [0, gridRect.height];
+        var idx = axis.inverse ? 1 : 0;
+        axis.setExtent(extent[idx], extent[1 - idx]);
+        updateAxisTransform(axis, isHorizontal ? gridRect.x : gridRect.y);
+      });
+    }
+  };
+
+  Grid.prototype.getAxis = function (dim, axisIndex) {
+    var axesMapOnDim = this._axesMap[dim];
+
+    if (axesMapOnDim != null) {
+      return axesMapOnDim[axisIndex || 0];
+    }
+  };
+
+  Grid.prototype.getAxes = function () {
+    return this._axesList.slice();
+  };
+
+  Grid.prototype.getCartesian = function (xAxisIndex, yAxisIndex) {
+    if (xAxisIndex != null && yAxisIndex != null) {
+      var key = 'x' + xAxisIndex + 'y' + yAxisIndex;
+      return this._coordsMap[key];
+    }
+
+    if (isObject(xAxisIndex)) {
+      yAxisIndex = xAxisIndex.yAxisIndex;
+      xAxisIndex = xAxisIndex.xAxisIndex;
+    }
+
+    for (var i = 0, coordList = this._coordsList; i < coordList.length; i++) {
+      if (coordList[i].getAxis('x').index === xAxisIndex || coordList[i].getAxis('y').index === yAxisIndex) {
+        return coordList[i];
+      }
+    }
+  };
+
+  Grid.prototype.getCartesians = function () {
+    return this._coordsList.slice();
+  };
+  /**
+   * @implements
+   */
+
+
+  Grid.prototype.convertToPixel = function (ecModel, finder, value) {
+    var target = this._findConvertTarget(finder);
+
+    return target.cartesian ? target.cartesian.dataToPoint(value) : target.axis ? target.axis.toGlobalCoord(target.axis.dataToCoord(value)) : null;
+  };
+  /**
+   * @implements
+   */
+
+
+  Grid.prototype.convertFromPixel = function (ecModel, finder, value) {
+    var target = this._findConvertTarget(finder);
+
+    return target.cartesian ? target.cartesian.pointToData(value) : target.axis ? target.axis.coordToData(target.axis.toLocalCoord(value)) : null;
+  };
+
+  Grid.prototype._findConvertTarget = function (finder) {
+    var seriesModel = finder.seriesModel;
+    var xAxisModel = finder.xAxisModel || seriesModel && seriesModel.getReferringComponents('xAxis', SINGLE_REFERRING).models[0];
+    var yAxisModel = finder.yAxisModel || seriesModel && seriesModel.getReferringComponents('yAxis', SINGLE_REFERRING).models[0];
+    var gridModel = finder.gridModel;
+    var coordsList = this._coordsList;
+    var cartesian;
+    var axis;
+
+    if (seriesModel) {
+      cartesian = seriesModel.coordinateSystem;
+      indexOf(coordsList, cartesian) < 0 && (cartesian = null);
+    } else if (xAxisModel && yAxisModel) {
+      cartesian = this.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
+    } else if (xAxisModel) {
+      axis = this.getAxis('x', xAxisModel.componentIndex);
+    } else if (yAxisModel) {
+      axis = this.getAxis('y', yAxisModel.componentIndex);
+    } // Lowest priority.
+    else if (gridModel) {
+        var grid = gridModel.coordinateSystem;
+
+        if (grid === this) {
+          cartesian = this._coordsList[0];
+        }
+      }
+
+    return {
+      cartesian: cartesian,
+      axis: axis
+    };
+  };
+  /**
+   * @implements
+   */
+
+
+  Grid.prototype.containPoint = function (point) {
+    var coord = this._coordsList[0];
+
+    if (coord) {
+      return coord.containPoint(point);
+    }
+  };
+  /**
+   * Initialize cartesian coordinate systems
+   */
+
+
+  Grid.prototype._initCartesian = function (gridModel, ecModel, api) {
+    var _this = this;
+
+    var grid = this;
+    var axisPositionUsed = {
+      left: false,
+      right: false,
+      top: false,
+      bottom: false
+    };
+    var axesMap = {
+      x: {},
+      y: {}
+    };
+    var axesCount = {
+      x: 0,
+      y: 0
+    }; // Create axis
+
+    ecModel.eachComponent('xAxis', createAxisCreator('x'), this);
+    ecModel.eachComponent('yAxis', createAxisCreator('y'), this);
+
+    if (!axesCount.x || !axesCount.y) {
+      // Roll back when there no either x or y axis
+      this._axesMap = {};
+      this._axesList = [];
+      return;
+    }
+
+    this._axesMap = axesMap; // Create cartesian2d
+
+    each(axesMap.x, function (xAxis, xAxisIndex) {
+      each(axesMap.y, function (yAxis, yAxisIndex) {
+        var key = 'x' + xAxisIndex + 'y' + yAxisIndex;
+        var cartesian = new Cartesian2D(key);
+        cartesian.master = _this;
+        cartesian.model = gridModel;
+        _this._coordsMap[key] = cartesian;
+
+        _this._coordsList.push(cartesian);
+
+        cartesian.addAxis(xAxis);
+        cartesian.addAxis(yAxis);
+      });
+    });
+
+    function createAxisCreator(dimName) {
+      return function (axisModel, idx) {
+        if (!isAxisUsedInTheGrid(axisModel, gridModel)) {
+          return;
+        }
+
+        var axisPosition = axisModel.get('position');
+
+        if (dimName === 'x') {
+          // Fix position
+          if (axisPosition !== 'top' && axisPosition !== 'bottom') {
+            // Default bottom of X
+            axisPosition = axisPositionUsed.bottom ? 'top' : 'bottom';
+          }
+        } else {
+          // Fix position
+          if (axisPosition !== 'left' && axisPosition !== 'right') {
+            // Default left of Y
+            axisPosition = axisPositionUsed.left ? 'right' : 'left';
+          }
+        }
+
+        axisPositionUsed[axisPosition] = true;
+        var axis = new Axis2D(dimName, createScaleByModel(axisModel), [0, 0], axisModel.get('type'), axisPosition);
+        var isCategory = axis.type === 'category';
+        axis.onBand = isCategory && axisModel.get('boundaryGap');
+        axis.inverse = axisModel.get('inverse'); // Inject axis into axisModel
+
+        axisModel.axis = axis; // Inject axisModel into axis
+
+        axis.model = axisModel; // Inject grid info axis
+
+        axis.grid = grid; // Index of axis, can be used as key
+
+        axis.index = idx;
+
+        grid._axesList.push(axis);
+
+        axesMap[dimName][idx] = axis;
+        axesCount[dimName]++;
+      };
+    }
+  };
+  /**
+   * Update cartesian properties from series.
+   */
+
+
+  Grid.prototype._updateScale = function (ecModel, gridModel) {
+    // Reset scale
+    each(this._axesList, function (axis) {
+      axis.scale.setExtent(Infinity, -Infinity);
+
+      if (axis.type === 'category') {
+        var categorySortInfo = axis.model.get('categorySortInfo');
+        axis.scale.setSortInfo(categorySortInfo);
+      }
+    });
+    ecModel.eachSeries(function (seriesModel) {
+      if (isCartesian2DSeries(seriesModel)) {
+        var axesModelMap = findAxisModels(seriesModel);
+        var xAxisModel = axesModelMap.xAxisModel;
+        var yAxisModel = axesModelMap.yAxisModel;
+
+        if (!isAxisUsedInTheGrid(xAxisModel, gridModel) || !isAxisUsedInTheGrid(yAxisModel, gridModel)) {
+          return;
+        }
+
+        var cartesian = this.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
+        var data = seriesModel.getData();
+        var xAxis = cartesian.getAxis('x');
+        var yAxis = cartesian.getAxis('y');
+        unionExtent(data, xAxis);
+        unionExtent(data, yAxis);
+      }
+    }, this);
+
+    function unionExtent(data, axis) {
+      each(getDataDimensionsOnAxis(data, axis.dim), function (dim) {
+        axis.scale.unionExtentFromData(data, dim);
+      });
+    }
+  };
+  /**
+   * @param dim 'x' or 'y' or 'auto' or null/undefined
+   */
+
+
+  Grid.prototype.getTooltipAxes = function (dim) {
+    var baseAxes = [];
+    var otherAxes = [];
+    each(this.getCartesians(), function (cartesian) {
+      var baseAxis = dim != null && dim !== 'auto' ? cartesian.getAxis(dim) : cartesian.getBaseAxis();
+      var otherAxis = cartesian.getOtherAxis(baseAxis);
+      indexOf(baseAxes, baseAxis) < 0 && baseAxes.push(baseAxis);
+      indexOf(otherAxes, otherAxis) < 0 && otherAxes.push(otherAxis);
+    });
+    return {
+      baseAxes: baseAxes,
+      otherAxes: otherAxes
+    };
+  };
+
+  Grid.create = function (ecModel, api) {
+    var grids = [];
+    ecModel.eachComponent('grid', function (gridModel, idx) {
+      var grid = new Grid(gridModel, ecModel, api);
+      grid.name = 'grid_' + idx; // dataSampling requires axis extent, so resize
+      // should be performed in create stage.
+
+      grid.resize(gridModel, api, true);
+      gridModel.coordinateSystem = grid;
+      grids.push(grid);
+    }); // Inject the coordinateSystems into seriesModel
+
+    ecModel.eachSeries(function (seriesModel) {
+      if (!isCartesian2DSeries(seriesModel)) {
+        return;
+      }
+
+      var axesModelMap = findAxisModels(seriesModel);
+      var xAxisModel = axesModelMap.xAxisModel;
+      var yAxisModel = axesModelMap.yAxisModel;
+      var gridModel = xAxisModel.getCoordSysModel();
+
+      var grid = gridModel.coordinateSystem;
+      seriesModel.coordinateSystem = grid.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
+    });
+    return grids;
+  }; // For deciding which dimensions to use when creating list data
+
+
+  Grid.dimensions = cartesian2DDimensions;
+  return Grid;
+}();
+/**
+ * Check if the axis is used in the specified grid.
+ */
+
+
+function isAxisUsedInTheGrid(axisModel, gridModel) {
+  return axisModel.getCoordSysModel() === gridModel;
+}
+
+function fixAxisOnZero(axesMap, otherAxisDim, axis, // Key: see `getOnZeroRecordKey`
+onZeroRecords) {
+  axis.getAxesOnZeroOf = function () {
+    // TODO: onZero of multiple axes.
+    return otherAxisOnZeroOf ? [otherAxisOnZeroOf] : [];
+  }; // onZero can not be enabled in these two situations:
+  // 1. When any other axis is a category axis.
+  // 2. When no axis is cross 0 point.
+
+
+  var otherAxes = axesMap[otherAxisDim];
+  var otherAxisOnZeroOf;
+  var axisModel = axis.model;
+  var onZero = axisModel.get(['axisLine', 'onZero']);
+  var onZeroAxisIndex = axisModel.get(['axisLine', 'onZeroAxisIndex']);
+
+  if (!onZero) {
+    return;
+  } // If target axis is specified.
+
+
+  if (onZeroAxisIndex != null) {
+    if (canOnZeroToAxis(otherAxes[onZeroAxisIndex])) {
+      otherAxisOnZeroOf = otherAxes[onZeroAxisIndex];
+    }
+  } else {
+    // Find the first available other axis.
+    for (var idx in otherAxes) {
+      if (otherAxes.hasOwnProperty(idx) && canOnZeroToAxis(otherAxes[idx]) // Consider that two Y axes on one value axis,
+      // if both onZero, the two Y axes overlap.
+      && !onZeroRecords[getOnZeroRecordKey(otherAxes[idx])]) {
+        otherAxisOnZeroOf = otherAxes[idx];
+        break;
+      }
+    }
+  }
+
+  if (otherAxisOnZeroOf) {
+    onZeroRecords[getOnZeroRecordKey(otherAxisOnZeroOf)] = true;
+  }
+
+  function getOnZeroRecordKey(axis) {
+    return axis.dim + '_' + axis.index;
+  }
+}
+
+function canOnZeroToAxis(axis) {
+  return axis && axis.type !== 'category' && axis.type !== 'time' && ifAxisCrossZero(axis);
+}
+
+function updateAxisTransform(axis, coordBase) {
+  var axisExtent = axis.getExtent();
+  var axisExtentSum = axisExtent[0] + axisExtent[1]; // Fast transform
+
+  axis.toGlobalCoord = axis.dim === 'x' ? function (coord) {
+    return coord + coordBase;
+  } : function (coord) {
+    return axisExtentSum - coord + coordBase;
+  };
+  axis.toLocalCoord = axis.dim === 'x' ? function (coord) {
+    return coord - coordBase;
+  } : function (coord) {
+    return axisExtentSum - coord + coordBase;
+  };
+}
+
+var inner = makeInner();
+function rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, gridModel) {
+  var axis = axisModel.axis;
+
+  if (axis.scale.isBlank()) {
+    return;
+  } // TODO: TYPE
+
+
+  var splitAreaModel = axisModel.getModel('splitArea');
+  var areaStyleModel = splitAreaModel.getModel('areaStyle');
+  var areaColors = areaStyleModel.get('color');
+  var gridRect = gridModel.coordinateSystem.getRect();
+  var ticksCoords = axis.getTicksCoords({
+    tickModel: splitAreaModel,
+    clamp: true
+  });
+
+  if (!ticksCoords.length) {
+    return;
+  } // For Making appropriate splitArea animation, the color and anid
+  // should be corresponding to previous one if possible.
+
+
+  var areaColorsLen = areaColors.length;
+  var lastSplitAreaColors = inner(axisView).splitAreaColors;
+  var newSplitAreaColors = createHashMap();
+  var colorIndex = 0;
+
+  if (lastSplitAreaColors) {
+    for (var i = 0; i < ticksCoords.length; i++) {
+      var cIndex = lastSplitAreaColors.get(ticksCoords[i].tickValue);
+
+      if (cIndex != null) {
+        colorIndex = (cIndex + (areaColorsLen - 1) * i) % areaColorsLen;
+        break;
+      }
+    }
+  }
+
+  var prev = axis.toGlobalCoord(ticksCoords[0].coord);
+  var areaStyle = areaStyleModel.getAreaStyle();
+  areaColors = isArray(areaColors) ? areaColors : [areaColors];
+
+  for (var i = 1; i < ticksCoords.length; i++) {
+    var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+    var x = void 0;
+    var y = void 0;
+    var width = void 0;
+    var height = void 0;
+
+    if (axis.isHorizontal()) {
+      x = prev;
+      y = gridRect.y;
+      width = tickCoord - x;
+      height = gridRect.height;
+      prev = x + width;
+    } else {
+      x = gridRect.x;
+      y = prev;
+      width = gridRect.width;
+      height = tickCoord - y;
+      prev = y + height;
+    }
+
+    var tickValue = ticksCoords[i - 1].tickValue;
+    tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
+    axisGroup.add(new Rect({
+      anid: tickValue != null ? 'area_' + tickValue : null,
+      shape: {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      },
+      style: defaults({
+        fill: areaColors[colorIndex]
+      }, areaStyle),
+      autoBatch: true,
+      silent: true
+    }));
+    colorIndex = (colorIndex + 1) % areaColorsLen;
+  }
+
+  inner(axisView).splitAreaColors = newSplitAreaColors;
+}
+function rectCoordAxisHandleRemove(axisView) {
+  inner(axisView).splitAreaColors = null;
+}
+
+var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
+var selfBuilderAttrs = ['splitArea', 'splitLine', 'minorSplitLine'];
+
+var CartesianAxisView =
+/** @class */
+function (_super) {
+  __extends(CartesianAxisView, _super);
+
+  function CartesianAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = CartesianAxisView.type;
+    _this.axisPointerClass = 'CartesianAxisPointer';
+    return _this;
+  }
+  /**
+   * @override
+   */
+
+
+  CartesianAxisView.prototype.render = function (axisModel, ecModel, api, payload) {
+    this.group.removeAll();
+    var oldAxisGroup = this._axisGroup;
+    this._axisGroup = new Group();
+    this.group.add(this._axisGroup);
+
+    if (!axisModel.get('show')) {
+      return;
+    }
+
+    var gridModel = axisModel.getCoordSysModel();
+    var layout$1 = layout(gridModel, axisModel);
+    var axisBuilder = new AxisBuilder(axisModel, extend({
+      handleAutoShown: function (elementType) {
+        var cartesians = gridModel.coordinateSystem.getCartesians();
+
+        for (var i = 0; i < cartesians.length; i++) {
+          if (isIntervalOrLogScale(cartesians[i].getOtherAxis(axisModel.axis).scale)) {
+            // Still show axis tick or axisLine if other axis is value / log
+            return true;
+          }
+        } // Not show axisTick or axisLine if other axis is category / time
+
+
+        return false;
+      }
+    }, layout$1));
+    each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
+
+    this._axisGroup.add(axisBuilder.getGroup());
+
+    each(selfBuilderAttrs, function (name) {
+      if (axisModel.get([name, 'show'])) {
+        axisElementBuilders[name](this, this._axisGroup, axisModel, gridModel);
+      }
+    }, this); // THIS is a special case for bar racing chart.
+    // Update the axis label from the natural initial layout to
+    // sorted layout should has no animation.
+
+    var isInitialSortFromBarRacing = payload && payload.type === 'changeAxisOrder' && payload.isInitSort;
+
+    if (!isInitialSortFromBarRacing) {
+      groupTransition(oldAxisGroup, this._axisGroup, axisModel);
+    }
+
+    _super.prototype.render.call(this, axisModel, ecModel, api, payload);
+  };
+
+  CartesianAxisView.prototype.remove = function () {
+    rectCoordAxisHandleRemove(this);
+  };
+
+  CartesianAxisView.type = 'cartesianAxis';
+  return CartesianAxisView;
+}(AxisView);
+
+var axisElementBuilders = {
+  splitLine: function (axisView, axisGroup, axisModel, gridModel) {
+    var axis = axisModel.axis;
+
+    if (axis.scale.isBlank()) {
+      return;
+    }
+
+    var splitLineModel = axisModel.getModel('splitLine');
+    var lineStyleModel = splitLineModel.getModel('lineStyle');
+    var lineColors = lineStyleModel.get('color');
+    lineColors = isArray(lineColors) ? lineColors : [lineColors];
+    var gridRect = gridModel.coordinateSystem.getRect();
+    var isHorizontal = axis.isHorizontal();
+    var lineCount = 0;
+    var ticksCoords = axis.getTicksCoords({
+      tickModel: splitLineModel
+    });
+    var p1 = [];
+    var p2 = [];
+    var lineStyle = lineStyleModel.getLineStyle();
+
+    for (var i = 0; i < ticksCoords.length; i++) {
+      var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+
+      if (isHorizontal) {
+        p1[0] = tickCoord;
+        p1[1] = gridRect.y;
+        p2[0] = tickCoord;
+        p2[1] = gridRect.y + gridRect.height;
+      } else {
+        p1[0] = gridRect.x;
+        p1[1] = tickCoord;
+        p2[0] = gridRect.x + gridRect.width;
+        p2[1] = tickCoord;
+      }
+
+      var colorIndex = lineCount++ % lineColors.length;
+      var tickValue = ticksCoords[i].tickValue;
+      var line = new Line({
+        anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
+        autoBatch: true,
+        shape: {
+          x1: p1[0],
+          y1: p1[1],
+          x2: p2[0],
+          y2: p2[1]
+        },
+        style: defaults({
+          stroke: lineColors[colorIndex]
+        }, lineStyle),
+        silent: true
+      });
+      subPixelOptimizeLine(line.shape, lineStyle.lineWidth);
+      axisGroup.add(line);
+    }
+  },
+  minorSplitLine: function (axisView, axisGroup, axisModel, gridModel) {
+    var axis = axisModel.axis;
+    var minorSplitLineModel = axisModel.getModel('minorSplitLine');
+    var lineStyleModel = minorSplitLineModel.getModel('lineStyle');
+    var gridRect = gridModel.coordinateSystem.getRect();
+    var isHorizontal = axis.isHorizontal();
+    var minorTicksCoords = axis.getMinorTicksCoords();
+
+    if (!minorTicksCoords.length) {
+      return;
+    }
+
+    var p1 = [];
+    var p2 = [];
+    var lineStyle = lineStyleModel.getLineStyle();
+
+    for (var i = 0; i < minorTicksCoords.length; i++) {
+      for (var k = 0; k < minorTicksCoords[i].length; k++) {
+        var tickCoord = axis.toGlobalCoord(minorTicksCoords[i][k].coord);
+
+        if (isHorizontal) {
+          p1[0] = tickCoord;
+          p1[1] = gridRect.y;
+          p2[0] = tickCoord;
+          p2[1] = gridRect.y + gridRect.height;
+        } else {
+          p1[0] = gridRect.x;
+          p1[1] = tickCoord;
+          p2[0] = gridRect.x + gridRect.width;
+          p2[1] = tickCoord;
+        }
+
+        var line = new Line({
+          anid: 'minor_line_' + minorTicksCoords[i][k].tickValue,
+          autoBatch: true,
+          shape: {
+            x1: p1[0],
+            y1: p1[1],
+            x2: p2[0],
+            y2: p2[1]
+          },
+          style: lineStyle,
+          silent: true
+        });
+        subPixelOptimizeLine(line.shape, lineStyle.lineWidth);
+        axisGroup.add(line);
+      }
+    }
+  },
+  splitArea: function (axisView, axisGroup, axisModel, gridModel) {
+    rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, gridModel);
+  }
+};
+
+var CartesianXAxisView =
+/** @class */
+function (_super) {
+  __extends(CartesianXAxisView, _super);
+
+  function CartesianXAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = CartesianXAxisView.type;
+    return _this;
+  }
+
+  CartesianXAxisView.type = 'xAxis';
+  return CartesianXAxisView;
+}(CartesianAxisView);
+
+var CartesianYAxisView =
+/** @class */
+function (_super) {
+  __extends(CartesianYAxisView, _super);
+
+  function CartesianYAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = CartesianXAxisView.type;
+    return _this;
+  }
+
+  CartesianYAxisView.type = 'yAxis';
+  return CartesianYAxisView;
+}(CartesianAxisView);
+
+var GridView =
+/** @class */
+function (_super) {
+  __extends(GridView, _super);
+
+  function GridView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = 'grid';
+    return _this;
+  }
+
+  GridView.prototype.render = function (gridModel, ecModel) {
+    this.group.removeAll();
+
+    if (gridModel.get('show')) {
+      this.group.add(new Rect({
+        shape: gridModel.coordinateSystem.getRect(),
+        style: defaults({
+          fill: gridModel.get('backgroundColor')
+        }, gridModel.getItemStyle()),
+        silent: true,
+        z2: -1
+      }));
+    }
+  };
+
+  GridView.type = 'grid';
+  return GridView;
+}(ComponentView);
+
+var extraOption = {
+  // gridIndex: 0,
+  // gridId: '',
+  offset: 0
+};
+function install$2(registers) {
+  registers.registerComponentView(GridView);
+  registers.registerComponentModel(GridModel);
+  registers.registerCoordinateSystem('cartesian2d', Grid);
+  axisModelCreator(registers, 'x', CartesianAxisModel, extraOption);
+  axisModelCreator(registers, 'y', CartesianAxisModel, extraOption);
+  registers.registerComponentView(CartesianXAxisView);
+  registers.registerComponentView(CartesianYAxisView);
+  registers.registerPreprocessor(function (option) {
+    // Only create grid when need
+    if (option.xAxis && option.yAxis && !option.grid) {
+      option.grid = {};
+    }
+  });
+}
+
+function install$1(registers) {
+  use(install$2);
+  use(install$3);
+}
+
+var TitleModel =
+/** @class */
+function (_super) {
+  __extends(TitleModel, _super);
+
+  function TitleModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = TitleModel.type;
+    _this.layoutMode = {
+      type: 'box',
+      ignoreSize: true
+    };
+    return _this;
+  }
+
+  TitleModel.type = 'title';
+  TitleModel.defaultOption = {
+    // zlevel: 0,
+    z: 6,
+    show: true,
+    text: '',
+    target: 'blank',
+    subtext: '',
+    subtarget: 'blank',
+    left: 0,
+    top: 0,
+    backgroundColor: 'rgba(0,0,0,0)',
+    borderColor: '#ccc',
+    borderWidth: 0,
+    padding: 5,
+    itemGap: 10,
+    textStyle: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      color: '#464646'
+    },
+    subtextStyle: {
+      fontSize: 12,
+      color: '#6E7079'
+    }
+  };
+  return TitleModel;
+}(ComponentModel); // View
+
+
+var TitleView =
+/** @class */
+function (_super) {
+  __extends(TitleView, _super);
+
+  function TitleView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = TitleView.type;
+    return _this;
+  }
+
+  TitleView.prototype.render = function (titleModel, ecModel, api) {
+    this.group.removeAll();
+
+    if (!titleModel.get('show')) {
+      return;
+    }
+
+    var group = this.group;
+    var textStyleModel = titleModel.getModel('textStyle');
+    var subtextStyleModel = titleModel.getModel('subtextStyle');
+    var textAlign = titleModel.get('textAlign');
+    var textVerticalAlign = retrieve2(titleModel.get('textBaseline'), titleModel.get('textVerticalAlign'));
+    var textEl = new ZRText({
+      style: createTextStyle(textStyleModel, {
+        text: titleModel.get('text'),
+        fill: textStyleModel.getTextColor()
+      }, {
+        disableBox: true
+      }),
+      z2: 10
+    });
+    var textRect = textEl.getBoundingRect();
+    var subText = titleModel.get('subtext');
+    var subTextEl = new ZRText({
+      style: createTextStyle(subtextStyleModel, {
+        text: subText,
+        fill: subtextStyleModel.getTextColor(),
+        y: textRect.height + titleModel.get('itemGap'),
+        verticalAlign: 'top'
+      }, {
+        disableBox: true
+      }),
+      z2: 10
+    });
+    var link = titleModel.get('link');
+    var sublink = titleModel.get('sublink');
+    var triggerEvent = titleModel.get('triggerEvent', true);
+    textEl.silent = !link && !triggerEvent;
+    subTextEl.silent = !sublink && !triggerEvent;
+
+    if (link) {
+      textEl.on('click', function () {
+        windowOpen(link, '_' + titleModel.get('target'));
+      });
+    }
+
+    if (sublink) {
+      subTextEl.on('click', function () {
+        windowOpen(sublink, '_' + titleModel.get('subtarget'));
+      });
+    }
+
+    getECData(textEl).eventData = getECData(subTextEl).eventData = triggerEvent ? {
+      componentType: 'title',
+      componentIndex: titleModel.componentIndex
+    } : null;
+    group.add(textEl);
+    subText && group.add(subTextEl); // If no subText, but add subTextEl, there will be an empty line.
+
+    var groupRect = group.getBoundingRect();
+    var layoutOption = titleModel.getBoxLayoutParams();
+    layoutOption.width = groupRect.width;
+    layoutOption.height = groupRect.height;
+    var layoutRect = getLayoutRect(layoutOption, {
+      width: api.getWidth(),
+      height: api.getHeight()
+    }, titleModel.get('padding')); // Adjust text align based on position
+
+    if (!textAlign) {
+      // Align left if title is on the left. center and right is same
+      textAlign = titleModel.get('left') || titleModel.get('right'); // @ts-ignore
+
+      if (textAlign === 'middle') {
+        textAlign = 'center';
+      } // Adjust layout by text align
+
+
+      if (textAlign === 'right') {
+        layoutRect.x += layoutRect.width;
+      } else if (textAlign === 'center') {
+        layoutRect.x += layoutRect.width / 2;
+      }
+    }
+
+    if (!textVerticalAlign) {
+      textVerticalAlign = titleModel.get('top') || titleModel.get('bottom'); // @ts-ignore
+
+      if (textVerticalAlign === 'center') {
+        textVerticalAlign = 'middle';
+      }
+
+      if (textVerticalAlign === 'bottom') {
+        layoutRect.y += layoutRect.height;
+      } else if (textVerticalAlign === 'middle') {
+        layoutRect.y += layoutRect.height / 2;
+      }
+
+      textVerticalAlign = textVerticalAlign || 'top';
+    }
+
+    group.x = layoutRect.x;
+    group.y = layoutRect.y;
+    group.markRedraw();
+    var alignStyle = {
+      align: textAlign,
+      verticalAlign: textVerticalAlign
+    };
+    textEl.setStyle(alignStyle);
+    subTextEl.setStyle(alignStyle); // Render background
+    // Get groupRect again because textAlign has been changed
+
+    groupRect = group.getBoundingRect();
+    var padding = layoutRect.margin;
+    var style = titleModel.getItemStyle(['color', 'opacity']);
+    style.fill = titleModel.get('backgroundColor');
+    var rect = new Rect({
+      shape: {
+        x: groupRect.x - padding[3],
+        y: groupRect.y - padding[0],
+        width: groupRect.width + padding[1] + padding[3],
+        height: groupRect.height + padding[0] + padding[2],
+        r: titleModel.get('borderRadius')
+      },
+      style: style,
+      subPixelOptimize: true,
+      silent: true
+    });
+    group.add(rect);
+  };
+
+  TitleView.type = 'title';
+  return TitleView;
+}(ComponentView);
+
+function install(registers) {
+  registers.registerComponentModel(TitleModel);
+  registers.registerComponentView(TitleView);
+}
+
+/**
+ * @return label string. Not null/undefined
+ */
+
+function getDefaultLabel(data, dataIndex) {
+  var labelDims = data.mapDimensionsAll('defaultedLabel');
+  var len = labelDims.length; // Simple optimization (in lots of cases, label dims length is 1)
+
+  if (len === 1) {
+    var rawVal = retrieveRawValue(data, dataIndex, labelDims[0]);
+    return rawVal != null ? rawVal + '' : null;
+  } else if (len) {
+    var vals = [];
+
+    for (var i = 0; i < labelDims.length; i++) {
+      vals.push(retrieveRawValue(data, dataIndex, labelDims[i]));
+    }
+
+    return vals.join(' ');
+  }
+}
+function getDefaultInterpolatedLabel(data, interpolatedValue) {
+  var labelDims = data.mapDimensionsAll('defaultedLabel');
+
+  if (!isArray(interpolatedValue)) {
+    return interpolatedValue + '';
+  }
+
+  var vals = [];
+
+  for (var i = 0; i < labelDims.length; i++) {
+    var dimIndex = data.getDimensionIndex(labelDims[i]);
+
+    if (dimIndex >= 0) {
+      vals.push(interpolatedValue[dimIndex]);
+    }
+  }
+
+  return vals.join(' ');
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+function isCoordinateSystemType(coordSys, type) {
+  return coordSys.type === type;
+}
+
+function createGridClipPath(cartesian, hasAnimation, seriesModel, done, during) {
+  var rect = cartesian.getArea();
+  var x = rect.x;
+  var y = rect.y;
+  var width = rect.width;
+  var height = rect.height;
+  var lineWidth = seriesModel.get(['lineStyle', 'width']) || 2; // Expand the clip path a bit to avoid the border is clipped and looks thinner
+
+  x -= lineWidth / 2;
+  y -= lineWidth / 2;
+  width += lineWidth;
+  height += lineWidth; // fix: https://github.com/apache/incubator-echarts/issues/11369
+
+  x = Math.floor(x);
+  width = Math.round(width);
+  var clipPath = new Rect({
+    shape: {
+      x: x,
+      y: y,
+      width: width,
+      height: height
+    }
+  });
+
+  if (hasAnimation) {
+    var baseAxis = cartesian.getBaseAxis();
+    var isHorizontal = baseAxis.isHorizontal();
+    var isAxisInversed = baseAxis.inverse;
+
+    if (isHorizontal) {
+      if (isAxisInversed) {
+        clipPath.shape.x += width;
+      }
+
+      clipPath.shape.width = 0;
+    } else {
+      if (!isAxisInversed) {
+        clipPath.shape.y += height;
+      }
+
+      clipPath.shape.height = 0;
+    }
+
+    var duringCb = isFunction(during) ? function (percent) {
+      during(percent, clipPath);
+    } : null;
+    initProps(clipPath, {
+      shape: {
+        width: width,
+        height: height,
+        x: x,
+        y: y
+      }
+    }, seriesModel, null, done, duringCb);
+  }
+
+  return clipPath;
+}
+
+function createPolarClipPath(polar, hasAnimation, seriesModel) {
+  var sectorArea = polar.getArea(); // Avoid float number rounding error for symbol on the edge of axis extent.
+
+  var r0 = round(sectorArea.r0, 1);
+  var r = round(sectorArea.r, 1);
+  var clipPath = new Sector({
+    shape: {
+      cx: round(polar.cx, 1),
+      cy: round(polar.cy, 1),
+      r0: r0,
+      r: r,
+      startAngle: sectorArea.startAngle,
+      endAngle: sectorArea.endAngle,
+      clockwise: sectorArea.clockwise
+    }
+  });
+
+  if (hasAnimation) {
+    var isRadial = polar.getBaseAxis().dim === 'angle';
+
+    if (isRadial) {
+      clipPath.shape.endAngle = sectorArea.startAngle;
+    } else {
+      clipPath.shape.r = r0;
+    }
+
+    initProps(clipPath, {
+      shape: {
+        endAngle: sectorArea.endAngle,
+        r: r
+      }
+    }, seriesModel);
+  }
+
+  return clipPath;
+}
+
+function createClipPath(coordSys, hasAnimation, seriesModel, done, during) {
+  if (!coordSys) {
+    return null;
+  } else if (coordSys.type === 'polar') {
+    return createPolarClipPath(coordSys, hasAnimation, seriesModel);
+  } else if (coordSys.type === 'cartesian2d') {
+    return createGridClipPath(coordSys, hasAnimation, seriesModel, done, during);
+  }
+
+  return null;
+}
+
+var samplers = {
+  average: function (frame) {
+    var sum = 0;
+    var count = 0;
+
+    for (var i = 0; i < frame.length; i++) {
+      if (!isNaN(frame[i])) {
+        sum += frame[i];
+        count++;
+      }
+    } // Return NaN if count is 0
+
+
+    return count === 0 ? NaN : sum / count;
+  },
+  sum: function (frame) {
+    var sum = 0;
+
+    for (var i = 0; i < frame.length; i++) {
+      // Ignore NaN
+      sum += frame[i] || 0;
+    }
+
+    return sum;
+  },
+  max: function (frame) {
+    var max = -Infinity;
+
+    for (var i = 0; i < frame.length; i++) {
+      frame[i] > max && (max = frame[i]);
+    } // NaN will cause illegal axis extent.
+
+
+    return isFinite(max) ? max : NaN;
+  },
+  min: function (frame) {
+    var min = Infinity;
+
+    for (var i = 0; i < frame.length; i++) {
+      frame[i] < min && (min = frame[i]);
+    } // NaN will cause illegal axis extent.
+
+
+    return isFinite(min) ? min : NaN;
+  },
+  // TODO
+  // Median
+  nearest: function (frame) {
+    return frame[0];
+  }
+};
+
+var indexSampler = function (frame) {
+  return Math.round(frame.length / 2);
+};
+
+function dataSample(seriesType) {
+  return {
+    seriesType: seriesType,
+    // FIXME:TS never used, so comment it
+    // modifyOutputEnd: true,
+    reset: function (seriesModel, ecModel, api) {
+      var data = seriesModel.getData();
+      var sampling = seriesModel.get('sampling');
+      var coordSys = seriesModel.coordinateSystem;
+      var count = data.count(); // Only cartesian2d support down sampling. Disable it when there is few data.
+
+      if (count > 10 && coordSys.type === 'cartesian2d' && sampling) {
+        var baseAxis = coordSys.getBaseAxis();
+        var valueAxis = coordSys.getOtherAxis(baseAxis);
+        var extent = baseAxis.getExtent();
+        var dpr = api.getDevicePixelRatio(); // Coordinste system has been resized
+
+        var size = Math.abs(extent[1] - extent[0]) * (dpr || 1);
+        var rate = Math.round(count / size);
+
+        if (isFinite(rate) && rate > 1) {
+          if (sampling === 'lttb') {
+            seriesModel.setData(data.lttbDownSample(data.mapDimension(valueAxis.dim), 1 / rate));
+          }
+
+          var sampler = void 0;
+
+          if (isString(sampling)) {
+            sampler = samplers[sampling];
+          } else if (isFunction(sampling)) {
+            sampler = sampling;
+          }
+
+          if (sampler) {
+            // Only support sample the first dim mapped from value axis.
+            seriesModel.setData(data.downSample(data.mapDimension(valueAxis.dim), 1 / rate, sampler, indexSampler));
+          }
+        }
+      }
+    }
+  };
+}
+
+var ValidColorNames;
+(function (ValidColorNames) {
+  ValidColorNames[ValidColorNames["aliceblue"] = 0] = "aliceblue";
+  ValidColorNames[ValidColorNames["antiquewhite"] = 1] = "antiquewhite";
+  ValidColorNames[ValidColorNames["aqua"] = 2] = "aqua";
+  ValidColorNames[ValidColorNames["aquamarine"] = 3] = "aquamarine";
+  ValidColorNames[ValidColorNames["azure"] = 4] = "azure";
+  ValidColorNames[ValidColorNames["beige"] = 5] = "beige";
+  ValidColorNames[ValidColorNames["bisque"] = 6] = "bisque";
+  ValidColorNames[ValidColorNames["black"] = 7] = "black";
+  ValidColorNames[ValidColorNames["blanchedalmond"] = 8] = "blanchedalmond";
+  ValidColorNames[ValidColorNames["blue"] = 9] = "blue";
+  ValidColorNames[ValidColorNames["blueviolet"] = 10] = "blueviolet";
+  ValidColorNames[ValidColorNames["brown"] = 11] = "brown";
+  ValidColorNames[ValidColorNames["burlywood"] = 12] = "burlywood";
+  ValidColorNames[ValidColorNames["cadetblue"] = 13] = "cadetblue";
+  ValidColorNames[ValidColorNames["chartreuse"] = 14] = "chartreuse";
+  ValidColorNames[ValidColorNames["chocolate"] = 15] = "chocolate";
+  ValidColorNames[ValidColorNames["coral"] = 16] = "coral";
+  ValidColorNames[ValidColorNames["cornflowerblue"] = 17] = "cornflowerblue";
+  ValidColorNames[ValidColorNames["cornsilk"] = 18] = "cornsilk";
+  ValidColorNames[ValidColorNames["crimson"] = 19] = "crimson";
+  ValidColorNames[ValidColorNames["cyan"] = 20] = "cyan";
+  ValidColorNames[ValidColorNames["darkblue"] = 21] = "darkblue";
+  ValidColorNames[ValidColorNames["darkcyan"] = 22] = "darkcyan";
+  ValidColorNames[ValidColorNames["darkgoldenrod"] = 23] = "darkgoldenrod";
+  ValidColorNames[ValidColorNames["darkgray"] = 24] = "darkgray";
+  ValidColorNames[ValidColorNames["darkgreen"] = 25] = "darkgreen";
+  ValidColorNames[ValidColorNames["darkkhaki"] = 26] = "darkkhaki";
+  ValidColorNames[ValidColorNames["darkmagenta"] = 27] = "darkmagenta";
+  ValidColorNames[ValidColorNames["darkolivegreen"] = 28] = "darkolivegreen";
+  ValidColorNames[ValidColorNames["darkorange"] = 29] = "darkorange";
+  ValidColorNames[ValidColorNames["darkorchid"] = 30] = "darkorchid";
+  ValidColorNames[ValidColorNames["darkred"] = 31] = "darkred";
+  ValidColorNames[ValidColorNames["darksalmon"] = 32] = "darksalmon";
+  ValidColorNames[ValidColorNames["darkseagreen"] = 33] = "darkseagreen";
+  ValidColorNames[ValidColorNames["darkslateblue"] = 34] = "darkslateblue";
+  ValidColorNames[ValidColorNames["darkslategray"] = 35] = "darkslategray";
+  ValidColorNames[ValidColorNames["darkturquoise"] = 36] = "darkturquoise";
+  ValidColorNames[ValidColorNames["darkviolet"] = 37] = "darkviolet";
+  ValidColorNames[ValidColorNames["deeppink"] = 38] = "deeppink";
+  ValidColorNames[ValidColorNames["deepskyblue"] = 39] = "deepskyblue";
+  ValidColorNames[ValidColorNames["dimgray"] = 40] = "dimgray";
+  ValidColorNames[ValidColorNames["dodgerblue"] = 41] = "dodgerblue";
+  ValidColorNames[ValidColorNames["firebrick"] = 42] = "firebrick";
+  ValidColorNames[ValidColorNames["floralwhite"] = 43] = "floralwhite";
+  ValidColorNames[ValidColorNames["forestgreen"] = 44] = "forestgreen";
+  ValidColorNames[ValidColorNames["fuchsia"] = 45] = "fuchsia";
+  ValidColorNames[ValidColorNames["gainsboro"] = 46] = "gainsboro";
+  ValidColorNames[ValidColorNames["ghostwhite"] = 47] = "ghostwhite";
+  ValidColorNames[ValidColorNames["gold"] = 48] = "gold";
+  ValidColorNames[ValidColorNames["goldenrod"] = 49] = "goldenrod";
+  ValidColorNames[ValidColorNames["gray"] = 50] = "gray";
+  ValidColorNames[ValidColorNames["green"] = 51] = "green";
+  ValidColorNames[ValidColorNames["greenyellow"] = 52] = "greenyellow";
+  ValidColorNames[ValidColorNames["honeydew"] = 53] = "honeydew";
+  ValidColorNames[ValidColorNames["hotpink"] = 54] = "hotpink";
+  ValidColorNames[ValidColorNames["indianred"] = 55] = "indianred";
+  ValidColorNames[ValidColorNames["indigo"] = 56] = "indigo";
+  ValidColorNames[ValidColorNames["ivory"] = 57] = "ivory";
+  ValidColorNames[ValidColorNames["khaki"] = 58] = "khaki";
+  ValidColorNames[ValidColorNames["lavender"] = 59] = "lavender";
+  ValidColorNames[ValidColorNames["lavenderblush"] = 60] = "lavenderblush";
+  ValidColorNames[ValidColorNames["lawngreen"] = 61] = "lawngreen";
+  ValidColorNames[ValidColorNames["lemonchiffon"] = 62] = "lemonchiffon";
+  ValidColorNames[ValidColorNames["lightblue"] = 63] = "lightblue";
+  ValidColorNames[ValidColorNames["lightcoral"] = 64] = "lightcoral";
+  ValidColorNames[ValidColorNames["lightcyan"] = 65] = "lightcyan";
+  ValidColorNames[ValidColorNames["lightgoldenrodyellow"] = 66] = "lightgoldenrodyellow";
+  ValidColorNames[ValidColorNames["lightgrey"] = 67] = "lightgrey";
+  ValidColorNames[ValidColorNames["lightgreen"] = 68] = "lightgreen";
+  ValidColorNames[ValidColorNames["lightpink"] = 69] = "lightpink";
+  ValidColorNames[ValidColorNames["lightsalmon"] = 70] = "lightsalmon";
+  ValidColorNames[ValidColorNames["lightseagreen"] = 71] = "lightseagreen";
+  ValidColorNames[ValidColorNames["lightskyblue"] = 72] = "lightskyblue";
+  ValidColorNames[ValidColorNames["lightslategray"] = 73] = "lightslategray";
+  ValidColorNames[ValidColorNames["lightsteelblue"] = 74] = "lightsteelblue";
+  ValidColorNames[ValidColorNames["lightyellow"] = 75] = "lightyellow";
+  ValidColorNames[ValidColorNames["lime"] = 76] = "lime";
+  ValidColorNames[ValidColorNames["limegreen"] = 77] = "limegreen";
+  ValidColorNames[ValidColorNames["linen"] = 78] = "linen";
+  ValidColorNames[ValidColorNames["magenta"] = 79] = "magenta";
+  ValidColorNames[ValidColorNames["maroon"] = 80] = "maroon";
+  ValidColorNames[ValidColorNames["mediumaquamarine"] = 81] = "mediumaquamarine";
+  ValidColorNames[ValidColorNames["mediumblue"] = 82] = "mediumblue";
+  ValidColorNames[ValidColorNames["mediumorchid"] = 83] = "mediumorchid";
+  ValidColorNames[ValidColorNames["mediumpurple"] = 84] = "mediumpurple";
+  ValidColorNames[ValidColorNames["mediumseagreen"] = 85] = "mediumseagreen";
+  ValidColorNames[ValidColorNames["mediumslateblue"] = 86] = "mediumslateblue";
+  ValidColorNames[ValidColorNames["mediumspringgreen"] = 87] = "mediumspringgreen";
+  ValidColorNames[ValidColorNames["mediumturquoise"] = 88] = "mediumturquoise";
+  ValidColorNames[ValidColorNames["mediumvioletred"] = 89] = "mediumvioletred";
+  ValidColorNames[ValidColorNames["midnightblue"] = 90] = "midnightblue";
+  ValidColorNames[ValidColorNames["mintcream"] = 91] = "mintcream";
+  ValidColorNames[ValidColorNames["mistyrose"] = 92] = "mistyrose";
+  ValidColorNames[ValidColorNames["moccasin"] = 93] = "moccasin";
+  ValidColorNames[ValidColorNames["navajowhite"] = 94] = "navajowhite";
+  ValidColorNames[ValidColorNames["navy"] = 95] = "navy";
+  ValidColorNames[ValidColorNames["oldlace"] = 96] = "oldlace";
+  ValidColorNames[ValidColorNames["olive"] = 97] = "olive";
+  ValidColorNames[ValidColorNames["olivedrab"] = 98] = "olivedrab";
+  ValidColorNames[ValidColorNames["orange"] = 99] = "orange";
+  ValidColorNames[ValidColorNames["orangered"] = 100] = "orangered";
+  ValidColorNames[ValidColorNames["orchid"] = 101] = "orchid";
+  ValidColorNames[ValidColorNames["palegoldenrod"] = 102] = "palegoldenrod";
+  ValidColorNames[ValidColorNames["palegreen"] = 103] = "palegreen";
+  ValidColorNames[ValidColorNames["paleturquoise"] = 104] = "paleturquoise";
+  ValidColorNames[ValidColorNames["palevioletred"] = 105] = "palevioletred";
+  ValidColorNames[ValidColorNames["papayawhip"] = 106] = "papayawhip";
+  ValidColorNames[ValidColorNames["peachpuff"] = 107] = "peachpuff";
+  ValidColorNames[ValidColorNames["peru"] = 108] = "peru";
+  ValidColorNames[ValidColorNames["pink"] = 109] = "pink";
+  ValidColorNames[ValidColorNames["plum"] = 110] = "plum";
+  ValidColorNames[ValidColorNames["powderblue"] = 111] = "powderblue";
+  ValidColorNames[ValidColorNames["purple"] = 112] = "purple";
+  ValidColorNames[ValidColorNames["red"] = 113] = "red";
+  ValidColorNames[ValidColorNames["rosybrown"] = 114] = "rosybrown";
+  ValidColorNames[ValidColorNames["royalblue"] = 115] = "royalblue";
+  ValidColorNames[ValidColorNames["saddlebrown"] = 116] = "saddlebrown";
+  ValidColorNames[ValidColorNames["salmon"] = 117] = "salmon";
+  ValidColorNames[ValidColorNames["sandybrown"] = 118] = "sandybrown";
+  ValidColorNames[ValidColorNames["seagreen"] = 119] = "seagreen";
+  ValidColorNames[ValidColorNames["seashell"] = 120] = "seashell";
+  ValidColorNames[ValidColorNames["sienna"] = 121] = "sienna";
+  ValidColorNames[ValidColorNames["silver"] = 122] = "silver";
+  ValidColorNames[ValidColorNames["skyblue"] = 123] = "skyblue";
+  ValidColorNames[ValidColorNames["slateblue"] = 124] = "slateblue";
+  ValidColorNames[ValidColorNames["slategray"] = 125] = "slategray";
+  ValidColorNames[ValidColorNames["snow"] = 126] = "snow";
+  ValidColorNames[ValidColorNames["springgreen"] = 127] = "springgreen";
+  ValidColorNames[ValidColorNames["steelblue"] = 128] = "steelblue";
+  ValidColorNames[ValidColorNames["tan"] = 129] = "tan";
+  ValidColorNames[ValidColorNames["teal"] = 130] = "teal";
+  ValidColorNames[ValidColorNames["thistle"] = 131] = "thistle";
+  ValidColorNames[ValidColorNames["tomato"] = 132] = "tomato";
+  ValidColorNames[ValidColorNames["turquoise"] = 133] = "turquoise";
+  ValidColorNames[ValidColorNames["violet"] = 134] = "violet";
+  ValidColorNames[ValidColorNames["wheat"] = 135] = "wheat";
+  ValidColorNames[ValidColorNames["white"] = 136] = "white";
+  ValidColorNames[ValidColorNames["whitesmoke"] = 137] = "whitesmoke";
+  ValidColorNames[ValidColorNames["yellow"] = 138] = "yellow";
+  ValidColorNames[ValidColorNames["yellowgreen"] = 139] = "yellowgreen";
+})(ValidColorNames || (ValidColorNames = {}));
+function isValidColor(color) {
+  const hexRegex = new RegExp('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$');
+  const isValidHex = hexRegex.test(color);
+  const isValidCSSColorName = !!ValidColorNames[color];
+  return isValidHex || isValidCSSColorName;
+}
+function getCSSProperty(name, containerStyles, hostElementStyles) {
+  if (!name)
+    return;
+  let fallback;
+  if (name.startsWith('var(') && name.endsWith(')')) {
+    const regExp = /var\((.*)\)/g;
+    const result = regExp.exec(name);
+    const split = result.length >= 2 ? result[1].split(',') : [];
+    name = split[0];
+    fallback = split[1];
+  }
+  let result = containerStyles.getPropertyValue(name).trim();
+  if (!result)
+    result = hostElementStyles.getPropertyValue(name).trim();
+  return result || fallback;
+}
+function formatValue(value, format) {
+  const valueAsFloat = parseFloat(value.toString());
+  if (isNaN(valueAsFloat))
+    return;
+  const decimals = isNaN(+format.decimals) ? 0 : +format.decimals;
+  if (format.type === 'currency') {
+    return Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      maximumFractionDigits: decimals,
+      minimumFractionDigits: decimals,
+    }).format(valueAsFloat);
+  }
+  else {
+    return Intl.NumberFormat('en-US').format(valueAsFloat);
+  }
+}
+
+export { getDefaultInterpolatedLabel as a, createGridClipPath as b, createSeriesData as c, createPolarClipPath as d, dataSample as e, getCSSProperty as f, getDefaultLabel as g, isValidColor as h, isCoordinateSystemType as i, formatValue as j, install$1 as k, install as l, createClipPath as m };