q2-tecton-elements 1.22.2 → 1.23.0

package/dist/cjs/charting-d02cba1f.js

@@ -0,0 +1,3127 @@
+'use strict';
+
+const installCanvasRenderer = require('./installCanvasRenderer-6c4fbcc9.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 = installCanvasRenderer.createHashMap();
+    this.categoryAxisMap = installCanvasRenderer.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', installCanvasRenderer.SINGLE_REFERRING).models[0];
+    var yAxisModel = seriesModel.getReferringComponents('yAxis', installCanvasRenderer.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', installCanvasRenderer.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', installCanvasRenderer.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();
+    installCanvasRenderer.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 = installCanvasRenderer.CoordinateSystemManager.get(coordSysName);
+  var coordSysDimDefs;
+
+  if (coordSysInfo && coordSysInfo.coordSysDims) {
+    coordSysDimDefs = installCanvasRenderer.map(coordSysInfo.coordSysDims, function (dim) {
+      var dimInfo = {
+        name: dim
+      };
+      var axisModel = coordSysInfo.axisMap.get(dim);
+
+      if (axisModel) {
+        var axisType = axisModel.get('type');
+        dimInfo.type = installCanvasRenderer.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 && installCanvasRenderer.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 = installCanvasRenderer.createSourceFromSeriesDataOption(sourceRaw);
+  } else {
+    source = sourceManager.getSource(); // Is series.data. not dataset.
+
+    isOriginalSource = source.sourceFormat === installCanvasRenderer.SOURCE_FORMAT_ORIGINAL;
+  }
+
+  var coordSysInfo = getCoordSysInfoBySeries(seriesModel);
+  var coordSysDimDefs = getCoordSysDimDefs(seriesModel, coordSysInfo);
+  var useEncodeDefaulter = opt.useEncodeDefaulter;
+  var encodeDefaulter = installCanvasRenderer.isFunction(useEncodeDefaulter) ? useEncodeDefaulter : useEncodeDefaulter ? installCanvasRenderer.curry(installCanvasRenderer.makeSeriesEncodeForAxisCoordSys, coordSysDimDefs, seriesModel) : null;
+  var createDimensionOptions = {
+    coordDimensions: coordSysDimDefs,
+    generateCoord: opt.generateCoord,
+    encodeDefine: seriesModel.getEncode(),
+    encodeDefaulter: encodeDefaulter,
+    canOmitUnusedDimensions: !isOriginalSource
+  };
+  var schema = installCanvasRenderer.prepareSeriesDataSchema(source, createDimensionOptions);
+  var firstCategoryDimIndex = injectOrdinalMeta(schema.dimensions, opt.createInvertedIndices, coordSysInfo);
+  var store = !isOriginalSource ? sourceManager.getSharedDataStore(schema) : null;
+  var stackCalculationInfo = installCanvasRenderer.enableDataStack(seriesModel, {
+    schema: schema,
+    store: store
+  });
+  var data = new installCanvasRenderer.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 === installCanvasRenderer.SOURCE_FORMAT_ORIGINAL) {
+    var sampleItem = firstDataNotNull(source.data || []);
+    return !installCanvasRenderer.isArray(installCanvasRenderer.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 = installCanvasRenderer.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: installCanvasRenderer.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 = installCanvasRenderer.getOptionCategoryInterval(labelModel);
+  var result = listCacheGet(labelsCache, optionLabelInterval);
+
+  if (result) {
+    return result;
+  }
+
+  var labels;
+  var numericLabelInterval;
+
+  if (installCanvasRenderer.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 = installCanvasRenderer.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 (installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.makeLabelFormatter(axis);
+  return {
+    labels: installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.makeLabelFormatter(axis);
+  var result = [];
+  installCanvasRenderer.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 installCanvasRenderer.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 installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.map(minorTicks, function (minorTicksGroup) {
+      return installCanvasRenderer.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;
+    installCanvasRenderer.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 = installCanvasRenderer.round(a);
+    b = installCanvasRenderer.round(b);
+    return inverse ? a > b : a < b;
+  }
+}
+
+var GridModel =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__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;
+}(installCanvasRenderer.ComponentModel);
+
+var CartesianAxisModel =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(CartesianAxisModel, _super);
+
+  function CartesianAxisModel() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  CartesianAxisModel.prototype.getCoordSysModel = function () {
+    return this.getReferringComponents('grid', installCanvasRenderer.SINGLE_REFERRING).models[0];
+  };
+
+  CartesianAxisModel.type = 'cartesian2dAxis';
+  return CartesianAxisModel;
+}(installCanvasRenderer.ComponentModel);
+installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.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) {
+  installCanvasRenderer.each(AXIS_TYPES, function (v, axisType) {
+    var defaultOption = installCanvasRenderer.merge(installCanvasRenderer.merge({}, axisDefault[axisType], true), extraDefaultOption, true);
+
+    var AxisModel =
+    /** @class */
+    function (_super) {
+      installCanvasRenderer.__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 = installCanvasRenderer.fetchLayoutMode(this);
+        var inputPositionParams = layoutMode ? installCanvasRenderer.getLayoutParams(option) : {};
+        var themeModel = ecModel.getTheme();
+        installCanvasRenderer.merge(option, themeModel.get(axisType + 'Axis'));
+        installCanvasRenderer.merge(option, this.getDefaultOption());
+        option.type = getAxisType(option);
+
+        if (layoutMode) {
+          installCanvasRenderer.mergeLayoutParam(option, inputPositionParams, layoutMode);
+        }
+      };
+
+      AxisModel.prototype.optionUpdated = function () {
+        var thisOption = this.option;
+
+        if (thisOption.type === 'category') {
+          this.__ordinalMeta = installCanvasRenderer.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 installCanvasRenderer.map(this._dimList, function (dim) {
+      return this._axes[dim];
+    }, this);
+  };
+
+  Cartesian.prototype.getAxesByScale = function (scaleType) {
+    scaleType = scaleType.toLowerCase();
+    return installCanvasRenderer.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) {
+  installCanvasRenderer.__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 = installCanvasRenderer.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 installCanvasRenderer.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 installCanvasRenderer.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 installCanvasRenderer.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 installCanvasRenderer.BoundingRect(x, y, width, height);
+  };
+
+  return Cartesian2D;
+}(Cartesian);
+
+var Axis2D =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__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 = installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.increaseInterval(interval);
+      min = rawExtent[1] - interval * alignToSplitNumber;
+    }
+  } else {
+    var nicedSplitNumber = scale.getTicks().length - 1;
+
+    if (nicedSplitNumber > alignToSplitNumber) {
+      interval = installCanvasRenderer.increaseInterval(interval);
+    }
+
+    var range = interval * alignToSplitNumber;
+    max = Math.ceil(rawExtent[1] / interval) * interval;
+    min = installCanvasRenderer.round(max - range); // Not change the result that crossing zero.
+
+    if (min < 0 && rawExtent[0] >= 0) {
+      min = 0;
+      max = installCanvasRenderer.round(range);
+    } else if (max > 0 && rawExtent[1] <= 0) {
+      max = 0;
+      min = -installCanvasRenderer.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 = installCanvasRenderer.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.
+        installCanvasRenderer.isIntervalOrLogScale(scale) && model.get('alignTicks') && model.get('interval') == null) {
+          axisNeedsAlign.push(axis);
+        } else {
+          installCanvasRenderer.niceScaleExtent(scale, model);
+
+          if (installCanvasRenderer.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();
+          installCanvasRenderer.niceScaleExtent(alignTo.scale, alignTo.model);
+        }
+
+        installCanvasRenderer.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 = {};
+    installCanvasRenderer.each(axesMap.x, function (xAxis) {
+      fixAxisOnZero(axesMap, 'y', xAxis, onZeroRecords);
+    });
+    installCanvasRenderer.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 = installCanvasRenderer.getLayoutRect(boxLayoutParams, {
+      width: api.getWidth(),
+      height: api.getHeight()
+    });
+    this._rect = gridRect;
+    var axesList = this._axesList;
+    adjustAxes(); // Minus label size
+
+    if (isContainLabel) {
+      installCanvasRenderer.each(axesList, function (axis) {
+        if (!axis.model.get(['axisLabel', 'inside'])) {
+          var labelUnionRect = installCanvasRenderer.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();
+    }
+
+    installCanvasRenderer.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() {
+      installCanvasRenderer.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 (installCanvasRenderer.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', installCanvasRenderer.SINGLE_REFERRING).models[0];
+    var yAxisModel = finder.yAxisModel || seriesModel && seriesModel.getReferringComponents('yAxis', installCanvasRenderer.SINGLE_REFERRING).models[0];
+    var gridModel = finder.gridModel;
+    var coordsList = this._coordsList;
+    var cartesian;
+    var axis;
+
+    if (seriesModel) {
+      cartesian = seriesModel.coordinateSystem;
+      installCanvasRenderer.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
+
+    installCanvasRenderer.each(axesMap.x, function (xAxis, xAxisIndex) {
+      installCanvasRenderer.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, installCanvasRenderer.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
+    installCanvasRenderer.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 (installCanvasRenderer.isCartesian2DSeries(seriesModel)) {
+        var axesModelMap = installCanvasRenderer.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) {
+      installCanvasRenderer.each(installCanvasRenderer.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 = [];
+    installCanvasRenderer.each(this.getCartesians(), function (cartesian) {
+      var baseAxis = dim != null && dim !== 'auto' ? cartesian.getAxis(dim) : cartesian.getBaseAxis();
+      var otherAxis = cartesian.getOtherAxis(baseAxis);
+      installCanvasRenderer.indexOf(baseAxes, baseAxis) < 0 && baseAxes.push(baseAxis);
+      installCanvasRenderer.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 (!installCanvasRenderer.isCartesian2DSeries(seriesModel)) {
+        return;
+      }
+
+      var axesModelMap = installCanvasRenderer.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' && installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.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 = installCanvasRenderer.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 installCanvasRenderer.Rect({
+      anid: tickValue != null ? 'area_' + tickValue : null,
+      shape: {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      },
+      style: installCanvasRenderer.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) {
+  installCanvasRenderer.__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 installCanvasRenderer.Group();
+    this.group.add(this._axisGroup);
+
+    if (!axisModel.get('show')) {
+      return;
+    }
+
+    var gridModel = axisModel.getCoordSysModel();
+    var layout = installCanvasRenderer.layout(gridModel, axisModel);
+    var axisBuilder = new installCanvasRenderer.AxisBuilder(axisModel, installCanvasRenderer.extend({
+      handleAutoShown: function (elementType) {
+        var cartesians = gridModel.coordinateSystem.getCartesians();
+
+        for (var i = 0; i < cartesians.length; i++) {
+          if (installCanvasRenderer.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));
+    installCanvasRenderer.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
+
+    this._axisGroup.add(axisBuilder.getGroup());
+
+    installCanvasRenderer.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) {
+      installCanvasRenderer.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;
+}(installCanvasRenderer.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 = installCanvasRenderer.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 installCanvasRenderer.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: installCanvasRenderer.defaults({
+          stroke: lineColors[colorIndex]
+        }, lineStyle),
+        silent: true
+      });
+      installCanvasRenderer.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 installCanvasRenderer.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
+        });
+        installCanvasRenderer.subPixelOptimizeLine(line.shape, lineStyle.lineWidth);
+        axisGroup.add(line);
+      }
+    }
+  },
+  splitArea: function (axisView, axisGroup, axisModel, gridModel) {
+    rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, gridModel);
+  }
+};
+
+var CartesianXAxisView =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__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) {
+  installCanvasRenderer.__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) {
+  installCanvasRenderer.__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 installCanvasRenderer.Rect({
+        shape: gridModel.coordinateSystem.getRect(),
+        style: installCanvasRenderer.defaults({
+          fill: gridModel.get('backgroundColor')
+        }, gridModel.getItemStyle()),
+        silent: true,
+        z2: -1
+      }));
+    }
+  };
+
+  GridView.type = 'grid';
+  return GridView;
+}(installCanvasRenderer.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) {
+  installCanvasRenderer.use(install$2);
+  installCanvasRenderer.use(installCanvasRenderer.install$2);
+}
+
+var TitleModel =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__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;
+}(installCanvasRenderer.ComponentModel); // View
+
+
+var TitleView =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__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 = installCanvasRenderer.retrieve2(titleModel.get('textBaseline'), titleModel.get('textVerticalAlign'));
+    var textEl = new installCanvasRenderer.ZRText({
+      style: installCanvasRenderer.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 installCanvasRenderer.ZRText({
+      style: installCanvasRenderer.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 () {
+        installCanvasRenderer.windowOpen(link, '_' + titleModel.get('target'));
+      });
+    }
+
+    if (sublink) {
+      subTextEl.on('click', function () {
+        installCanvasRenderer.windowOpen(sublink, '_' + titleModel.get('subtarget'));
+      });
+    }
+
+    installCanvasRenderer.getECData(textEl).eventData = installCanvasRenderer.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 = installCanvasRenderer.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 installCanvasRenderer.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;
+}(installCanvasRenderer.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 = installCanvasRenderer.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(installCanvasRenderer.retrieveRawValue(data, dataIndex, labelDims[i]));
+    }
+
+    return vals.join(' ');
+  }
+}
+function getDefaultInterpolatedLabel(data, interpolatedValue) {
+  var labelDims = data.mapDimensionsAll('defaultedLabel');
+
+  if (!installCanvasRenderer.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 installCanvasRenderer.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 = installCanvasRenderer.isFunction(during) ? function (percent) {
+      during(percent, clipPath);
+    } : null;
+    installCanvasRenderer.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 = installCanvasRenderer.round(sectorArea.r0, 1);
+  var r = installCanvasRenderer.round(sectorArea.r, 1);
+  var clipPath = new installCanvasRenderer.Sector({
+    shape: {
+      cx: installCanvasRenderer.round(polar.cx, 1),
+      cy: installCanvasRenderer.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;
+    }
+
+    installCanvasRenderer.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 (installCanvasRenderer.isString(sampling)) {
+            sampler = samplers[sampling];
+          } else if (installCanvasRenderer.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);
+  }
+}
+
+exports.createClipPath = createClipPath;
+exports.createGridClipPath = createGridClipPath;
+exports.createPolarClipPath = createPolarClipPath;
+exports.createSeriesData = createSeriesData;
+exports.dataSample = dataSample;
+exports.formatValue = formatValue;
+exports.getCSSProperty = getCSSProperty;
+exports.getDefaultInterpolatedLabel = getDefaultInterpolatedLabel;
+exports.getDefaultLabel = getDefaultLabel;
+exports.install = install$1;
+exports.install$1 = install;
+exports.isCoordinateSystemType = isCoordinateSystemType;
+exports.isValidColor = isValidColor;