sea-chart 2.0.42 → 2.0.44

package/dist/view/wrapper/chart-component.js

@@ -4,7 +4,7 @@ import * as d3 from 'd3';
 import { cloneDeep, debounce } from 'lodash-es';
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
 import { BaseUtils, formatXAxisLabel } from '../../utils';
-import { CHART_TYPE, CHART_SUMMARY_TYPE, LABEL_POSITION_TYPE, CHART_THEME_COLOR, EMPTY_NAME, THEME_NAME_MAP, CHART_STYLE_COLORS } from '../../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE, LABEL_POSITION_TYPE, CHART_THEME_COLOR, EMPTY_NAME, THEME_NAME_MAP, CHART_STYLE_COLORS, DEFAULT_AXIS_LABEL_FONT_COLOR, DEFAULT_AXIS_LABEL_FONT_COLOR_DARK, DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
 import { FILL_BORDER_COLOR_MAP } from '../../constants/style';
 import intl from '../../intl';
 import '../../assets/css/sea-chart-d3-tooltip.css';
@@ -25,12 +25,23 @@ export default class ChartComponent extends Component {
       this.destroyChart();
       this.createChart();
       this.drawChart();
-      if (this.needRenderAxisLabel) {
-        this.renderAxisLabel(this.props.chart, this.props.tables);
-      }
     }, 300);
     this.destroyChart = () => {
       this.chart && this.chart.node() && this.chart.node().remove();
+      this.container && this.setAxisTitlePadding(this.container, {
+        left: null,
+        bottom: null,
+        right: null
+      });
+      this._clipMaskByRect.clear();
+      this._defs = null;
+    };
+    this.toggleRecords = function (statisticRecord) {
+      if (!statisticRecord) return;
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+      _this.props.toggleRecords && _this.props.toggleRecords(statisticRecord, ...args);
     };
     this.getTitle = (tables, table_id, yAxisType, yAxisKey) => {
       return yAxisType === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : this.getAxisLabel(tables, table_id, yAxisKey);
@@ -44,6 +55,30 @@ export default class ChartComponent extends Component {
       const column = this.getColumn(tables, tableId, columnKey);
       return column.name || '';
     };
+    this.getAxisTitleHeight = fontSize => {
+      const safeFontSize = Number(fontSize) || DEFAULT_AXIS_LABEL_FONT_SIZE;
+      return Math.max(this.axisTitleMinHeight, safeFontSize + 4);
+    };
+    this.setAxisTitlePadding = function (chartContainer) {
+      let {
+        left = null,
+        bottom = null,
+        right = null
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (!chartContainer) return;
+      chartContainer.style.paddingLeft = left != null ? `${left}px` : '';
+      chartContainer.style.paddingBottom = bottom != null ? `${bottom}px` : '';
+      chartContainer.style.paddingRight = right != null ? `${right}px` : '';
+    };
+    this.getRotatedAxisTitleTransform = function (containerHeight, titleHeight) {
+      let placement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'left';
+      const translateX = containerHeight / 2 - titleHeight / 2;
+      const translateY = containerHeight / 2 - titleHeight / 2;
+      if (placement === 'right') {
+        return `translate(${translateX}px, ${translateY}px) rotate(-90deg)`;
+      }
+      return `translate(-${translateX}px, ${translateY}px) rotate(-90deg)`;
+    };
     this.initChart = function (container, id) {
       let initConfig = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       const {
@@ -61,6 +96,8 @@ export default class ChartComponent extends Component {
       const height = customHeight ? customHeight : containerHeight - marginBottom;
       _this.chart = d3.create('svg').attr('id', id).attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
       _this.container.appendChild(_this.chart.node());
+      _this._defs = null;
+      _this._clipMaskByRect = new Map();
       _this.chartBoundingClientRect = {
         ...JSON.parse(JSON.stringify(_this.chart.node().getBoundingClientRect())),
         ...initConfig,
@@ -68,6 +105,12 @@ export default class ChartComponent extends Component {
         height
       };
     };
+    this.getDefs = () => {
+      if (!this._defs || !this._defs.node() || !this._defs.node().isConnected) {
+        this._defs = this.chart.append('defs').attr('class', 'sea-chart-defs');
+      }
+      return this._defs;
+    };
     this.initDefs = () => {
       if (this.container) {
         // add Mask
@@ -222,23 +265,38 @@ export default class ChartComponent extends Component {
         y_axis_summary_type,
         type,
         title_name,
+        x_axis_label_font_size,
+        x_axis_label_font_color,
+        y_axis_label_font_size,
+        y_axis_label_font_color,
         // left axis - combination chart
         show_y_axis_left_label,
         y_axis_left_label_position,
         y_axis_left_summary_type,
         y_axis_left_summary_column,
+        y_axis_left_label_font_size,
+        y_axis_left_label_font_color,
         // right axis - combination chart
         show_y_axis_right_label,
         y_axis_right_label_position,
         y_axis_right_summary_type,
-        y_axis_right_summary_column
+        y_axis_right_summary_column,
+        y_axis_right_label_font_size,
+        y_axis_right_label_font_color
       } = chart.config;
       if (y_axis_summary_column_key) {
         y_axis_column_key = y_axis_summary_column_key;
       }
       const table = getTableById(tables, table_id);
-      let textColor;
-      this.globalTheme === THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
+      const defaultTextColor = this.globalTheme === THEME_NAME_MAP.DARK ? DEFAULT_AXIS_LABEL_FONT_COLOR_DARK : DEFAULT_AXIS_LABEL_FONT_COLOR;
+      const xColor = x_axis_label_font_color || defaultTextColor;
+      const xFontSize = x_axis_label_font_size || DEFAULT_AXIS_LABEL_FONT_SIZE;
+      const yColor = y_axis_label_font_color || defaultTextColor;
+      const yFontSize = y_axis_label_font_size || DEFAULT_AXIS_LABEL_FONT_SIZE;
+      const yLeftColor = y_axis_left_label_font_color || defaultTextColor;
+      const yLeftFontSize = y_axis_left_label_font_size || DEFAULT_AXIS_LABEL_FONT_SIZE;
+      const yRightColor = y_axis_right_label_font_color || defaultTextColor;
+      const yRightFontSize = y_axis_right_label_font_size || DEFAULT_AXIS_LABEL_FONT_SIZE;
 
       // xAxis
       const xAxisID = `chart-x-axis-label_${chart.id}`;
@@ -246,17 +304,18 @@ export default class ChartComponent extends Component {
       const {
         width: containerWidth
       } = this.chartBoundingClientRect;
+      const xTitleHeight = this.getAxisTitleHeight(xFontSize);
       if (!xLabel && x_axis_show_label) {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'chart-axis-label';
         const column = getTableColumnByKey(table, x_axis_column_key);
         div.innerHTML = `${column ? column.name : ''}`;
-        div.setAttribute('style', `color:${textColor}; width: ${containerWidth}px; text-align: ${x_axis_label_position}; position: absolute; bottom: 0;`);
+        div.setAttribute('style', `color:${xColor}; font-size:${xFontSize}px; width: ${containerWidth}px; height: ${xTitleHeight}px; line-height: ${xTitleHeight}px; text-align: ${x_axis_label_position}; position: absolute; bottom: 0;`);
         chartContainer.appendChild(div);
       }
       if (xLabel && x_axis_show_label) {
-        xLabel.setAttribute('style', `color:${textColor}; width: ${containerWidth}px; text-align: ${x_axis_label_position}; position: absolute; bottom: 0;`);
+        xLabel.setAttribute('style', `color:${xColor}; font-size:${xFontSize}px; width: ${containerWidth}px; height: ${xTitleHeight}px; line-height: ${xTitleHeight}px; text-align: ${x_axis_label_position}; position: absolute; bottom: 0;`);
       }
       if (xLabel && !x_axis_show_label) {
         xLabel.parentNode.removeChild(xLabel);
@@ -265,7 +324,7 @@ export default class ChartComponent extends Component {
       // yAxis
       const yAxisID = `chart-y-axis-label_${chart.id}`;
       const yLabel = chartContainer.querySelector(`#${yAxisID}`);
-      const divHeight = 20;
+      const yTitleHeight = this.getAxisTitleHeight(yFontSize);
       if (!yLabel && y_axis_show_label) {
         const div = document.createElement('div');
         div.id = yAxisID;
@@ -286,7 +345,7 @@ export default class ChartComponent extends Component {
         let textAlign = 'center';
         if (y_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
+        div.setAttribute('style', `color:${yColor}; font-size:${yFontSize}px; position: absolute; width: ${containerHeight}px; height: ${yTitleHeight}px; line-height: ${yTitleHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: ${this.getRotatedAxisTitleTransform(containerHeight, yTitleHeight)}`);
         chartContainer.appendChild(div);
       }
       if (yLabel && y_axis_show_label) {
@@ -296,7 +355,7 @@ export default class ChartComponent extends Component {
         let textAlign = 'center';
         if (y_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        yLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
+        yLabel.setAttribute('style', `color:${yColor}; font-size:${yFontSize}px; position: absolute; width: ${containerHeight}px; height: ${yTitleHeight}px; line-height: ${yTitleHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: ${this.getRotatedAxisTitleTransform(containerHeight, yTitleHeight)}`);
       }
       if (yLabel && !y_axis_show_label) {
         yLabel.parentNode.removeChild(yLabel);
@@ -305,6 +364,7 @@ export default class ChartComponent extends Component {
       // yAxis(left) - combination chart
       const yAxisLeftID = `chart-y-axis-left-label_${chart.id}`;
       const yAxisLeftLabel = chartContainer.querySelector(`#${yAxisLeftID}`);
+      const yLeftTitleHeight = this.getAxisTitleHeight(yLeftFontSize);
       if (!yAxisLeftLabel && show_y_axis_left_label) {
         const div = document.createElement('div');
         div.id = yAxisLeftID;
@@ -319,7 +379,7 @@ export default class ChartComponent extends Component {
         let textAlign = 'center';
         if (y_axis_left_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_left_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
+        div.setAttribute('style', `color:${yLeftColor}; font-size:${yLeftFontSize}px; position: absolute; width: ${containerHeight}px; height: ${yLeftTitleHeight}px; line-height: ${yLeftTitleHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: ${this.getRotatedAxisTitleTransform(containerHeight, yLeftTitleHeight)}`);
         chartContainer.appendChild(div);
       }
       if (yAxisLeftLabel && show_y_axis_left_label) {
@@ -327,7 +387,7 @@ export default class ChartComponent extends Component {
         let textAlign = 'center';
         if (y_axis_left_label_position === 'bottom') textAlign = 'left';
         if (y_axis_left_label_position === 'top') textAlign = 'right';
-        yAxisLeftLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
+        yAxisLeftLabel.setAttribute('style', `color:${yLeftColor}; font-size:${yLeftFontSize}px; position: absolute; width: ${containerHeight}px; height: ${yLeftTitleHeight}px; line-height: ${yLeftTitleHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: ${this.getRotatedAxisTitleTransform(containerHeight, yLeftTitleHeight)}`);
       }
       if (yAxisLeftLabel && !show_y_axis_left_label) {
         yAxisLeftLabel.parentNode.removeChild(yAxisLeftLabel);
@@ -336,6 +396,7 @@ export default class ChartComponent extends Component {
       // yAxis(right) - combination chart
       const yAxisRightID = `chart-y-axis-right-label_${chart.id}`;
       const yAxisRightLabel = chartContainer.querySelector(`#${yAxisRightID}`);
+      const yRightTitleHeight = this.getAxisTitleHeight(yRightFontSize);
       if (!yAxisRightLabel && show_y_axis_right_label) {
         const div = document.createElement('div');
         div.id = yAxisRightID;
@@ -350,7 +411,7 @@ export default class ChartComponent extends Component {
         let textAlign = 'center';
         if (y_axis_right_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_right_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; right: 0; transform: translate(${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
+        div.setAttribute('style', `color:${yRightColor}; font-size:${yRightFontSize}px; position: absolute; width: ${containerHeight}px; height: ${yRightTitleHeight}px; line-height: ${yRightTitleHeight}px; text-align: ${textAlign}; top: 0; right: 0; transform: ${this.getRotatedAxisTitleTransform(containerHeight, yRightTitleHeight, 'right')}`);
         chartContainer.appendChild(div);
       }
       if (yAxisRightLabel && show_y_axis_right_label) {
@@ -358,11 +419,16 @@ export default class ChartComponent extends Component {
         let textAlign = 'center';
         if (y_axis_right_label_position === 'bottom') textAlign = 'left';
         if (y_axis_right_label_position === 'top') textAlign = 'right';
-        yAxisRightLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; right: 0; transform: translate(${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
+        yAxisRightLabel.setAttribute('style', `color:${yRightColor}; font-size:${yRightFontSize}px; position: absolute; width: ${containerHeight}px; height: ${yRightTitleHeight}px; line-height: ${yRightTitleHeight}px; text-align: ${textAlign}; top: 0; right: 0; transform: ${this.getRotatedAxisTitleTransform(containerHeight, yRightTitleHeight, 'right')}`);
       }
       if (yAxisRightLabel && !show_y_axis_right_label) {
         yAxisRightLabel.parentNode.removeChild(yAxisRightLabel);
       }
+      this.setAxisTitlePadding(chartContainer, {
+        left: y_axis_show_label ? yTitleHeight : show_y_axis_left_label ? yLeftTitleHeight : null,
+        right: show_y_axis_right_label ? yRightTitleHeight : null,
+        bottom: x_axis_show_label ? xTitleHeight : null
+      });
     };
     this.renderHorizontalLabel = (chart, tables, chartContainer) => {
       if (!this.chart || !chart) return;
@@ -374,15 +440,24 @@ export default class ChartComponent extends Component {
         horizontal_axis_label_position,
         vertical_axis_label_position,
         show_vertical_axis_label,
-        show_horizontal_axis_label
+        show_horizontal_axis_label,
+        horizontal_axis_label_font_size,
+        horizontal_axis_label_font_color,
+        vertical_axis_label_font_size,
+        vertical_axis_label_font_color
       } = chart.config;
       const table = getTableById(tables, table_id);
-      const textColor = '#999999';
+      const defaultTextColor = this.globalTheme === THEME_NAME_MAP.DARK ? DEFAULT_AXIS_LABEL_FONT_COLOR_DARK : DEFAULT_AXIS_LABEL_FONT_COLOR;
+      const xColor = horizontal_axis_label_font_color || defaultTextColor;
+      const xFontSize = horizontal_axis_label_font_size || DEFAULT_AXIS_LABEL_FONT_SIZE;
+      const yColor = vertical_axis_label_font_color || defaultTextColor;
+      const yFontSize = vertical_axis_label_font_size || DEFAULT_AXIS_LABEL_FONT_SIZE;
       const xAxisID = `chart-x-axis-label_${chart.id}`;
       const xLabel = chartContainer.querySelector(`#${xAxisID}`);
       const {
         width: containerWidth
       } = this.chartBoundingClientRect;
+      const xTitleHeight = this.getAxisTitleHeight(xFontSize);
       if (!xLabel && show_horizontal_axis_label) {
         const div = document.createElement('div');
         div.id = xAxisID;
@@ -393,18 +468,18 @@ export default class ChartComponent extends Component {
           const column = getTableColumnByKey(table, horizontal_axis_column_key);
           div.innerHTML = `${column ? column.name : ''}`;
         }
-        div.setAttribute('style', `color:${textColor}; width: ${containerWidth}px; text-align: ${horizontal_axis_label_position}; position: absolute`);
+        div.setAttribute('style', `color:${xColor}; font-size:${xFontSize}px; width: ${containerWidth}px; height: ${xTitleHeight}px; line-height: ${xTitleHeight}px; text-align: ${horizontal_axis_label_position}; position: absolute`);
         chartContainer.appendChild(div);
       }
       if (xLabel && show_horizontal_axis_label) {
-        xLabel.setAttribute('style', `color:${textColor}; width: ${containerWidth}px; text-align: ${horizontal_axis_label_position}; position: absolute`);
+        xLabel.setAttribute('style', `color:${xColor}; font-size:${xFontSize}px; width: ${containerWidth}px; height: ${xTitleHeight}px; line-height: ${xTitleHeight}px; text-align: ${horizontal_axis_label_position}; position: absolute`);
       }
       if (xLabel && !show_horizontal_axis_label) {
         xLabel.parentNode.removeChild(xLabel);
       }
       const yAxisID = `chart-y-axis-label_${chart.id}`;
       const yLabel = chartContainer.querySelector(`#${yAxisID}`);
-      const divHeight = 20;
+      const yTitleHeight = this.getAxisTitleHeight(yFontSize);
       if (!yLabel && show_vertical_axis_label) {
         const div = document.createElement('div');
         div.id = yAxisID;
@@ -417,30 +492,33 @@ export default class ChartComponent extends Component {
         let textAlign = 'center';
         if (vertical_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (vertical_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
+        div.setAttribute('style', `color:${yColor}; font-size:${yFontSize}px; position: absolute; width: ${containerHeight}px; height: ${yTitleHeight}px; line-height: ${yTitleHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: ${this.getRotatedAxisTitleTransform(containerHeight, yTitleHeight)}`);
         chartContainer.appendChild(div);
       }
-      if (yLabel && show_horizontal_axis_label) {
+      if (yLabel && show_vertical_axis_label) {
         const {
           height: containerHeight
         } = this.chartBoundingClientRect;
         let textAlign = 'center';
         if (vertical_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (vertical_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        yLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
+        yLabel.setAttribute('style', `color:${yColor}; font-size:${yFontSize}px; position: absolute; width: ${containerHeight}px; height: ${yTitleHeight}px; line-height: ${yTitleHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: ${this.getRotatedAxisTitleTransform(containerHeight, yTitleHeight)}`);
       }
-      if (yLabel && !show_horizontal_axis_label) {
+      if (yLabel && !show_vertical_axis_label) {
         yLabel.parentNode.removeChild(yLabel);
       }
-    };
-    this.isShowVerticalAxisLabel = chart => {
-      return !!(chart && chart.config && chart.config.show_vertical_axis_label);
-    };
-    this.isShowHorizontalAxisLabel = chart => {
-      return !!(chart && chart.config && chart.config.show_horizontal_axis_label);
+      this.setAxisTitlePadding(chartContainer, {
+        left: show_vertical_axis_label ? yTitleHeight : null,
+        bottom: show_horizontal_axis_label ? xTitleHeight : null,
+        right: null
+      });
     };
     this.formatterLegendName = name => {
-      if (!name && typeof name !== 'number' || name.trim() === 'undefined' || name.trim() === 'null') {
+      if (typeof name !== 'string') {
+        if (!name && typeof name !== 'number') return intl.get(EMPTY_NAME);
+        return intl.get(String(name)) || String(name);
+      }
+      if (name.trim() === 'undefined' || name.trim() === 'null' || name.trim() === '') {
         return intl.get(EMPTY_NAME);
       } else if (name === '_Others') {
         return intl.get('Others');
@@ -476,8 +554,9 @@ export default class ChartComponent extends Component {
       };
 
       // sort legend data and format data
-      data.forEach(item => item[legendName] = String(item[legendName]));
-      const legendData = BaseUtils.sortDataByGroupName(cloneDeep(data), legendName, groupColumn, chart);
+      const clonedData = cloneDeep(data);
+      clonedData.forEach(item => item[legendName] = String(item[legendName]));
+      const legendData = BaseUtils.sortDataByGroupName(clonedData, legendName, groupColumn, chart);
       const {
         width: chartWidth,
         height: chartHeight,
@@ -965,18 +1044,6 @@ export default class ChartComponent extends Component {
       }
       return statisticNewData;
     };
-    this.isShowXAxisLabel = chart => {
-      return !!(chart && chart.config && chart.config.x_axis_show_label);
-    };
-    this.isShowYAxisLabel = chart => {
-      return !!(chart && chart.config && chart.config.y_axis_show_label);
-    };
-    this.isShowYAxisLeftLabel = chart => {
-      return !!(chart && chart.config && chart.config.show_y_axis_left_label);
-    };
-    this.isShowYAxisRightLabel = chart => {
-      return !!(chart && chart.config && chart.config.show_y_axis_right_label);
-    };
     this.getThemeColors = function () {
       let themeColors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       let theme = arguments.length > 1 ? arguments[1] : undefined;
@@ -1065,7 +1132,7 @@ export default class ChartComponent extends Component {
         allGroup.forEach(g => {
           const rects = Array.from(g.children).filter(item => item.tagName !== 'text');
           rects.forEach(item => {
-            d3.select(item).transition().duration(this.transitionDuration).attr('opacity', 1);
+            d3.select(item).transition().duration(this.interactionDuration).attr('opacity', 1);
             if ([CHART_TYPE.PIE, CHART_TYPE.RING].includes(chartType)) {
               d3.select(item).attr('stroke-width', 2);
             }
@@ -1077,7 +1144,7 @@ export default class ChartComponent extends Component {
           const rects = Array.from(g.children).filter(item => item.tagName !== 'text');
           rects.forEach(item => {
             if (item.getAttribute('data-groupName') !== curGroupName) {
-              d3.selectAll([item]).transition().duration(this.transitionDuration).attr('opacity', 0.3);
+              d3.selectAll([item]).transition().duration(this.interactionDuration).attr('opacity', 0.3);
             } else {
               if ([CHART_TYPE.PIE, CHART_TYPE.RING].includes(chartType)) {
                 d3.select(item).attr('stroke-width', 0.5);
@@ -1087,37 +1154,222 @@ export default class ChartComponent extends Component {
         });
       }
     };
-    // Use clipPath to make rectangle rounded corners
     this.addClipPath = _ref9 => {
       let {
         rect,
-        parentNode,
         attr,
-        rectId,
         borderRadiusVal
       } = _ref9;
+      return this.addRoundedClip(rect, attr === 'x' ? 'x' : 'y', null, borderRadiusVal);
+    };
+    this.addRoundedClip = function (rect, orient) {
+      let width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      let radiusOverride = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
       const {
         borderRadius
-      } = this.chartBoundingClientRect;
-      const clipRect = d3.select(rect.cloneNode());
-      if (attr === 'x') {
-        const rectHeight = Number(rect.getAttribute('height'));
-        const rectWidth = Number(rect.getAttribute('width'));
-        const computedBorderRadius = Math.min(rectHeight * borderRadius, rectWidth / 2);
-        const safeBorderRadius = Math.min(borderRadiusVal !== null && borderRadiusVal !== void 0 ? borderRadiusVal : computedBorderRadius, rectWidth / 2, rectHeight / 2);
-        clipRect.attr('rx', safeBorderRadius);
-        clipRect.attr('x', Number(rect.getAttribute('x')) - safeBorderRadius).attr('width', rectWidth + safeBorderRadius);
+      } = _this.chartBoundingClientRect;
+      const x = Number(rect.getAttribute('x'));
+      const y = Number(rect.getAttribute('y'));
+      const w = width != null ? width : Number(rect.getAttribute('width'));
+      const h = Number(rect.getAttribute('height'));
+      const computedRadius = orient === 'x' ? Math.min(h * borderRadius, h / 2, w / 2) : Math.min(w * borderRadius, w / 2, h / 2);
+      const radius = radiusOverride != null ? Math.min(radiusOverride, w / 2, h / 2) : computedRadius;
+      const d = orient === 'x' ? _this.getRightRoundedRectPath(x, y, w, h, radius) : _this.getTopRoundedRectPath(x, y, w, h, radius);
+      const clipId = `rounded-clip-${Math.random().toString(36).slice(2)}`;
+      const path = _this.getDefs().append('clipPath').attr('id', clipId).append('path').attr('class', 'rounded-clip-path').attr('data-x', x).attr('data-y', y).attr('data-width', w).attr('data-height', h).attr('data-radius', radius).attr('data-orient', orient).attr('d', d);
+      d3.select(rect).attr('clip-path', `url(#${clipId})`);
+      _this._clipMaskByRect.set(rect, path.node());
+      return path.node();
+    };
+    this.animateMaskForRect = (rect, orient, baseline, t) => {
+      const path = this._clipMaskByRect && this._clipMaskByRect.get(rect);
+      if (!path) return;
+      const x = Number(path.getAttribute('data-x'));
+      const y = Number(path.getAttribute('data-y'));
+      const width = Number(path.getAttribute('data-width'));
+      const height = Number(path.getAttribute('data-height'));
+      const radius = Number(path.getAttribute('data-radius'));
+      const el = d3.select(path);
+      if (orient === 'x') {
+        const interpX = d3.interpolateNumber(baseline, x);
+        const interpW = d3.interpolateNumber(0, width);
+        el.attr('d', this.getRightRoundedRectPath(baseline, y, 0, height, radius)).transition(t).attrTween('d', () => tt => this.getRightRoundedRectPath(interpX(tt), y, interpW(tt), height, radius));
       } else {
-        const rectWidth = Number(rect.getAttribute('width'));
-        const rectHeight = Number(rect.getAttribute('height'));
-        const computedBorderRadius = Math.min(rectWidth * borderRadius, rectHeight / 2);
-        const safeBorderRadius = Math.min(borderRadiusVal !== null && borderRadiusVal !== void 0 ? borderRadiusVal : computedBorderRadius, rectWidth / 2, rectHeight / 2);
-        clipRect.attr('rx', safeBorderRadius);
-        clipRect.attr('height', rectHeight + safeBorderRadius);
+        const interpY = d3.interpolateNumber(baseline, y);
+        const interpH = d3.interpolateNumber(0, height);
+        el.attr('d', this.getTopRoundedRectPath(x, baseline, width, 0, radius)).transition(t).attrTween('d', () => tt => this.getTopRoundedRectPath(x, interpY(tt), width, interpH(tt), radius));
       }
-      const clipPath = d3.select(parentNode).append('clipPath').attr('opacity', 1).attr('id', rectId);
-      clipPath.node().appendChild(clipRect.node());
-      d3.select(rect).attr('clip-path', `url(#${rectId})`);
+    };
+    this.getTopRoundedRectPath = (x, y, width, height, radius) => {
+      const r = Math.min(radius, width / 2, height / 2);
+      if (height <= 0) return `M${x},${y} L${x + width},${y} L${x + width},${y} L${x},${y} Z`;
+      return `M${x},${y + r} Q${x},${y} ${x + r},${y} L${x + width - r},${y} Q${x + width},${y} ${x + width},${y + r} L${x + width},${y + height} L${x},${y + height} Z`;
+    };
+    this.getRightRoundedRectPath = (x, y, width, height, radius) => {
+      const r = Math.min(radius, width / 2, height / 2);
+      if (width <= 0) return `M${x},${y} L${x},${y + height} L${x},${y + height} L${x},${y} Z`;
+      return `M${x},${y} L${x + width - r},${y} Q${x + width},${y} ${x + width},${y + r} L${x + width},${y + height - r} Q${x + width},${y + height} ${x + width - r},${y + height} L${x},${y + height} Z`;
+    };
+    this.animateRectGrowInY = function (selection) {
+      let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.transitionDuration;
+      if (!selection || selection.empty()) return;
+      const self = _this;
+      selection.each(function () {
+        const finalY = Number(this.getAttribute('y'));
+        const finalHeight = Number(this.getAttribute('height'));
+        if (!(finalHeight > 0)) return;
+        const baseline = finalY + finalHeight;
+        const t = d3.transition(self.enterTransitionName).duration(duration).ease(d3.easeCubicOut);
+        d3.select(this).attr('y', baseline).attr('height', 0).transition(t).attr('y', finalY).attr('height', finalHeight);
+        self.animateMaskForRect(this, 'y', baseline, t);
+      });
+    };
+    this.animateStackGrowInY = function (selection) {
+      let groupKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : node => node.getAttribute('x');
+      let duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this.transitionDuration;
+      if (!selection || selection.empty()) return null;
+      const columns = new Map();
+      selection.each(function () {
+        if (!(Number(this.getAttribute('height')) > 0)) return;
+        const key = groupKey(this);
+        if (!columns.has(key)) columns.set(key, []);
+        columns.get(key).push(this);
+      });
+      if (columns.size === 0) return null;
+      const t = d3.transition(_this.enterTransitionName).duration(duration).ease(d3.easeCubicOut);
+      columns.forEach(rects => {
+        let baselineY = -Infinity;
+        rects.forEach(rect => {
+          baselineY = Math.max(baselineY, Number(rect.getAttribute('y')) + Number(rect.getAttribute('height')));
+        });
+        rects.forEach(rect => {
+          const finalY = Number(rect.getAttribute('y'));
+          const finalHeight = Number(rect.getAttribute('height'));
+          d3.select(rect).attr('y', baselineY).attr('height', 0).transition(t).attr('y', finalY).attr('height', finalHeight);
+          _this.animateMaskForRect(rect, 'y', baselineY, t);
+        });
+      });
+      return t;
+    };
+    this.animateRectGrowInX = function (selection) {
+      let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.transitionDuration;
+      if (!selection || selection.empty()) return;
+      const self = _this;
+      selection.each(function () {
+        const finalX = Number(this.getAttribute('x'));
+        const finalWidth = Number(this.getAttribute('width'));
+        if (!(finalWidth > 0)) return;
+        const t = d3.transition(self.enterTransitionName).duration(duration).ease(d3.easeCubicOut);
+        d3.select(this).attr('width', 0).transition(t).attr('width', finalWidth);
+        self.animateMaskForRect(this, 'x', finalX, t);
+      });
+    };
+    this.animateStackGrowInX = function (selection) {
+      let groupKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : node => node.getAttribute('y');
+      let duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this.transitionDuration;
+      if (!selection || selection.empty()) return null;
+      const rows = new Map();
+      selection.each(function () {
+        if (!(Number(this.getAttribute('width')) > 0)) return;
+        const key = groupKey(this);
+        if (!rows.has(key)) rows.set(key, []);
+        rows.get(key).push(this);
+      });
+      if (rows.size === 0) return null;
+      const t = d3.transition(_this.enterTransitionName).duration(duration).ease(d3.easeCubicOut);
+      rows.forEach(rects => {
+        let baselineX = Infinity;
+        rects.forEach(rect => {
+          baselineX = Math.min(baselineX, Number(rect.getAttribute('x')));
+        });
+        rects.forEach(rect => {
+          const finalX = Number(rect.getAttribute('x'));
+          const finalWidth = Number(rect.getAttribute('width'));
+          d3.select(rect).attr('x', baselineX).attr('width', 0).transition(t).attr('x', finalX).attr('width', finalWidth);
+          _this.animateMaskForRect(rect, 'x', baselineX, t);
+        });
+      });
+      return t;
+    };
+    this.animateArcGrowIn = function (selection, arc) {
+      let duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this.transitionDuration;
+      if (!selection || selection.empty()) return;
+      const transitionName = _this.enterTransitionName;
+      selection.each(function (d) {
+        const path = d3.select(this);
+        const interpolate = d3.interpolate({
+          startAngle: d.startAngle,
+          endAngle: d.startAngle,
+          padAngle: d.padAngle
+        }, {
+          startAngle: d.startAngle,
+          endAngle: d.endAngle,
+          padAngle: d.padAngle
+        });
+        path.attr('d', arc(interpolate(0))).transition(transitionName).duration(duration).ease(d3.easeCubicOut).attrTween('d', () => t => arc(interpolate(t)));
+      });
+    };
+    this.animatePathDrawIn = function (selection) {
+      let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.transitionDuration;
+      if (!selection || selection.empty()) return;
+      const transitionName = _this.enterTransitionName;
+      selection.each(function () {
+        const path = d3.select(this);
+        let totalLength = 0;
+        try {
+          totalLength = this.getTotalLength();
+        } catch (e) {
+          totalLength = 0;
+        }
+        if (!(totalLength > 0)) return;
+        path.attr('stroke-dasharray', `${totalLength} ${totalLength}`).attr('stroke-dashoffset', totalLength).transition(transitionName).duration(duration).ease(d3.easeLinear).attr('stroke-dashoffset', 0).on('end', function () {
+          d3.select(this).attr('stroke-dasharray', null).attr('stroke-dashoffset', null);
+        });
+      });
+    };
+    this.animateRevealInX = function (selection, width) {
+      let duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this.transitionDuration;
+      if (!selection || selection.empty()) return;
+      const {
+        height: chartHeight
+      } = _this.chartBoundingClientRect;
+      const clipId = `reveal-clip-${Math.random().toString(36).slice(2)}`;
+      const clipPath = _this.getDefs().append('clipPath').attr('id', clipId);
+      const clipRect = clipPath.append('rect').attr('x', 0).attr('y', 0).attr('width', 0).attr('height', chartHeight);
+      selection.attr('clip-path', `url(#${clipId})`);
+      clipRect.transition(_this.enterTransitionName).duration(duration).ease(d3.easeLinear).attr('width', width).on('end', () => {
+        selection.attr('clip-path', null);
+        clipPath.remove();
+      });
+    };
+    this.animateFadeIn = function (selection) {
+      let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.transitionDuration;
+      let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      let finalOpacity = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+      if (!selection || selection.empty()) return;
+      const transitionName = _this.enterTransitionName;
+      selection.each(function () {
+        const el = d3.select(this);
+        let target = finalOpacity;
+        if (target == null) {
+          const orig = this.getAttribute('opacity');
+          const parsed = orig === null || orig === '' ? 1 : Number(orig);
+          target = Number.isNaN(parsed) ? 1 : parsed;
+        }
+        if (!(target > 0)) return;
+        el.attr('opacity', 0).transition(transitionName).duration(duration).delay(delay).ease(d3.easeLinear).attr('opacity', target);
+      });
+    };
+    this.animateCircleZoomIn = function (selection) {
+      let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.transitionDuration;
+      if (!selection || selection.empty()) return;
+      const transitionName = _this.enterTransitionName;
+      selection.each(function () {
+        const circle = d3.select(this);
+        const finalR = Number(this.getAttribute('r')) || 0;
+        if (!(finalR > 0)) return;
+        circle.attr('r', 0).transition(transitionName).duration(duration).ease(d3.easeCubicOut).attr('r', finalR);
+      });
     };
     this.drawYaxis = function (g, theme) {
       let rightAxisOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -1131,33 +1383,92 @@ export default class ChartComponent extends Component {
       // add text
       g.selectAll('text').attr('font-size', theme.fontSize);
       g.selectAll('text').attr('fill', theme.textColor);
+      _this.thinYAxisTicks(g);
       _this.checkTextOverflow(g.selectAll('text').nodes());
 
       // line
       g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
-      g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2 - _this.horizontalOverflowOffset - rightAxisOffset).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
+      g.selectAll('.tick line').clone().attr('x2', chartWidth - _this.getYAxisTranslateX() - insertPadding - rightAxisOffset).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
 
       // update g translateX
-      g.attr('transform', `translate(${insertPadding + _this.horizontalOverflowOffset}, 0)`);
+      g.attr('transform', `translate(${_this.getYAxisTranslateX()}, 0)`);
+    };
+    this.thinYAxisTicks = g => {
+      const ticks = g.selectAll('.tick').nodes();
+      if (ticks.length <= 2) return;
+      const visibleTicks = ticks.map((tick, index) => {
+        const text = d3.select(tick).select('text').node();
+        if (!text) return null;
+        const {
+          top,
+          bottom
+        } = text.getBoundingClientRect();
+        return {
+          tick,
+          index,
+          top,
+          bottom
+        };
+      }).filter(Boolean).sort((a, b) => a.top - b.top);
+      const keptTicks = [];
+      let prevBottom = -Infinity;
+      visibleTicks.forEach(_ref10 => {
+        let {
+          tick,
+          index,
+          top,
+          bottom
+        } = _ref10;
+        const shouldKeepFirstTick = index === 0;
+        const shouldKeepLastTick = index === ticks.length - 1;
+        const hasEnoughSpace = top > prevBottom + this.yAxisTickLabelGap;
+        if (shouldKeepLastTick) {
+          keptTicks.forEach(keptTick => {
+            if (keptTick.bottom + this.yAxisTickLabelGap >= top) {
+              d3.select(keptTick.tick).attr('opacity', 0);
+            }
+          });
+          d3.select(tick).attr('opacity', 1);
+          return;
+        }
+        if (shouldKeepFirstTick || hasEnoughSpace) {
+          d3.select(tick).attr('opacity', 1);
+          keptTicks.push({
+            tick,
+            bottom
+          });
+          prevBottom = bottom;
+          return;
+        }
+        d3.select(tick).attr('opacity', 0);
+      });
     };
     this.checkTextOverflow = allTextEl => {
       const {
         insertPadding
       } = this.chartBoundingClientRect;
       const allTextWidth = allTextEl.map(item => {
+        const tick = item.parentNode;
+        if (tick && Number(tick.getAttribute('opacity')) === 0) return 0;
         const {
           width
         } = item.getBoundingClientRect();
         return width;
       });
-      const maxTextWidth = Math.max(...allTextWidth);
+      const maxTextWidth = Math.max(...allTextWidth, 0);
       this.horizontalOverflowOffset = 0;
-      if (maxTextWidth + 3 > insertPadding) {
-        // horizontal overflow
-        const offset = maxTextWidth + 3 - insertPadding; // 3 is text and line default spacing
+      const requiredLeftSpace = maxTextWidth + 3;
+      if (requiredLeftSpace > insertPadding) {
+        const offset = requiredLeftSpace - insertPadding;
         this.horizontalOverflowOffset = offset;
       }
     };
+    this.getYAxisTranslateX = () => {
+      const {
+        insertPadding
+      } = this.chartBoundingClientRect;
+      return insertPadding + this.horizontalOverflowOffset;
+    };
     this.checkTickOverlap = (g, axis) => {
       const allTicks = g.selectAll('.tick').nodes();
       if (axis === 'yAxis') {
@@ -1309,10 +1620,84 @@ export default class ChartComponent extends Component {
       const annotationWrapper = contentWrapper.insert('g', ':first-child').attr('class', 'vertical-annotation-wrapper');
       annotationWrapper.append('line').attr('x1', x).attr('y1', insertPadding + marginTop).attr('x2', x).attr('y2', chartHeight - insertPadding).attr('stroke', theme.XAxisColor);
     };
+    this.setLegendForHeatMap = _ref11 => {
+      let {
+        exampleColors,
+        themeColors
+      } = _ref11;
+      const legendOffsetY = 3;
+      const legendItemTextWidth = 32;
+      const legendItemWidth = 12;
+      const legendItemHeight = 12;
+      const legendItemGap = 3;
+      const legendItemRadius = 2;
+      const legendWrapper = this.chart.append('g').attr('class', 'legend-heat-map-wrapper').attr('transform', `translate(0, ${legendOffsetY})`);
+      legendWrapper.append('text').attr('y', 10).attr('fill', themeColors.textColor).attr('font-size', 12).attr('font-weight', 'bold').text(intl.get('Less'));
+      exampleColors.forEach((color, index) => {
+        legendWrapper.append('rect').attr('x', legendItemTextWidth + index * legendItemWidth + index * legendItemGap).attr('width', legendItemWidth).attr('height', legendItemHeight).attr('rx', legendItemRadius).attr('fill', color).attr('stroke', FILL_BORDER_COLOR_MAP[color]).attr('stroke-width', 1);
+      });
+      legendWrapper.append('text').attr('x', 182).attr('y', 10).attr('fill', themeColors.textColor).attr('font-size', 12).attr('font-weight', 'bold').text(intl.get('More'));
+    };
+    this.setContinuousLegend = _ref12 => {
+      var _this$chart$node2;
+      let {
+        previewType,
+        theme,
+        colorRange = [],
+        legendDirection,
+        legendSize,
+        legendTextRange,
+        bubbleColor,
+        type
+      } = _ref12;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const legendRectWidth = legendDirection === 'vertical' ? 12 : Math.min(legendSize * 100, chartWidth - insertPadding * 2);
+      const legendRectHeight = legendDirection === 'vertical' ? Math.min(legendSize * 100, chartHeight - insertPadding * 2) : 12;
+      const legendTextOffset = 2;
+      const legendTextHeightSpace = legendDirection === 'vertical' ? 0 : 14 + legendTextOffset;
+      if (![CHART_TYPE.MAP_BUBBLE, CHART_TYPE.WORLD_MAP_BUBBLE].includes(type)) {
+        var _this$chart$node;
+        const gradient = this.chart.append('defs').attr('class', 'linear-gradient-wrapper').append('linearGradient').attr("id", `gradient-${(_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id}-${previewType}`).attr("x1", '0%').attr("y1", '0%').attr("x2", legendDirection === 'vertical' ? '0%' : '100%').attr("y2", legendDirection === 'vertical' ? '100%' : '0%');
+        gradient.append('stop').attr('offset', '0%').attr('stop-color', `${colorRange[0]}`);
+        gradient.append('stop').attr('offset', '50%').attr('stop-color', `${colorRange[4]}`);
+        gradient.append('stop').attr('offset', '100%').attr('stop-color', `${colorRange[8]}`);
+      }
+      const continuousLegendWrapper = this.chart.append('g').attr('class', 'legend-continuous-wrapper').attr('transform', `translate(0, ${chartHeight - legendRectHeight - legendTextHeightSpace})`);
+      continuousLegendWrapper.append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('fill', [CHART_TYPE.MAP_BUBBLE, CHART_TYPE.WORLD_MAP_BUBBLE].includes(type) ? bubbleColor : `url(#gradient-${(_this$chart$node2 = this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id}-${previewType})`).call(g => {
+        if ([CHART_TYPE.MAP_BUBBLE, CHART_TYPE.WORLD_MAP_BUBBLE].includes(type)) {
+          continuousLegendWrapper.append('polygon').attr('points', `0,0  ${legendRectWidth - 0.5},0  0,${legendRectHeight - 0.5}`).attr('fill', '#fff').attr('stroke', '#fff');
+        }
+      });
+      continuousLegendWrapper.append('text').attr('class', 'range-start').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).text(legendTextRange[0]).call(g => {
+        const {
+          height
+        } = g.node().getBoundingClientRect();
+        g.attr('x', legendDirection === 'vertical' ? legendRectWidth + legendTextOffset : legendTextOffset);
+        g.attr('y', legendDirection === 'vertical' ? height : height + legendRectHeight);
+      });
+      continuousLegendWrapper.append('text').attr('class', 'range-end').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).text(legendTextRange[1]).call(g => {
+        const {
+          width,
+          height
+        } = g.node().getBoundingClientRect();
+        g.attr('x', legendDirection === 'vertical' ? legendRectWidth + legendTextOffset : legendRectWidth - width);
+        g.attr('y', legendDirection === 'vertical' ? legendRectHeight - legendTextOffset : height + legendRectHeight);
+      });
+    };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
     this.chartBoundingClientRect = {};
-    this.transitionDuration = 500;
+    this.transitionDuration = 450;
+    this.interactionDuration = 150;
     this.areaTransitionDuration = 200;
+    this.yAxisTickLabelGap = 4;
+    this.axisTitleMinHeight = 20;
+    this.enterTransitionName = 'enter';
+    this._defs = null;
+    this._clipMaskByRect = new Map();
   }
   componentDidMount() {
     window.addEventListener('resize', this.handleResize);