sea-chart 2.0.37 → 2.0.38

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

@@ -1,33 +1,26 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var d3 = _interopRequireWildcard(require("d3"));
-var _lodashEs = require("lodash-es");
-var _dtableUtils = require("dtable-utils");
-var _utils = require("../../utils");
-var _constants = require("../../constants");
-var _style = require("../../constants/style");
-var _intl = _interopRequireDefault(require("../../intl"));
-require("../../assets/css/sea-chart-d3-tooltip.css");
-class ChartComponent extends _react.Component {
+import React from 'react';
+import { Component } from 'react';
+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 { FILL_BORDER_COLOR_MAP } from '../../constants/style';
+import intl from '../../intl';
+import '../../assets/css/sea-chart-d3-tooltip.css';
+export default class ChartComponent extends Component {
   constructor(props) {
     var _this;
     super(props);
     _this = this;
     this.initLabelStroke = theme => {
-      this.globalTheme = theme || _constants.THEME_NAME_MAP.LIGHT;
-      this.labelStroke = theme === _constants.THEME_NAME_MAP.DARK ? {} : {
+      this.globalTheme = theme || THEME_NAME_MAP.LIGHT;
+      this.labelStroke = theme === THEME_NAME_MAP.DARK ? {} : {
         stroke: '#fff',
         lineWidth: 1
       };
     };
-    this.handleResize = (0, _lodashEs.debounce)(() => {
+    this.handleResize = debounce(() => {
       if (!this.createChart || !this.drawChart) return;
       this.destroyChart();
       this.createChart();
@@ -37,14 +30,14 @@ class ChartComponent extends _react.Component {
       }
     }, 300);
     this.destroyChart = () => {
-      this.chart.node() && this.chart.node().remove();
+      this.chart && this.chart.node() && this.chart.node().remove();
     };
     this.getTitle = (tables, table_id, yAxisType, yAxisKey) => {
-      return yAxisType === _constants.CHART_SUMMARY_TYPE.COUNT ? _intl.default.get('Amount') : this.getAxisLabel(tables, table_id, yAxisKey);
+      return yAxisType === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : this.getAxisLabel(tables, table_id, yAxisKey);
     };
     this.getColumn = (tables, table_id, columnKey) => {
-      const table = (0, _dtableUtils.getTableById)(tables, table_id);
-      const column = (0, _dtableUtils.getTableColumnByKey)(table, columnKey) || {};
+      const table = getTableById(tables, table_id);
+      const column = getTableColumnByKey(table, columnKey) || {};
       return column;
     };
     this.getAxisLabel = (tables, tableId, columnKey) => {
@@ -85,7 +78,7 @@ class ChartComponent extends _react.Component {
           width,
           height
         } = this.chartBoundingClientRect;
-        this.chart.append('defs').append('mask').attr('id', "mask-wrapper-".concat(previewType, "-").concat(this.chart.node().id)).append('rect').attr('x', 0).attr('y', 0).attr('width', width).attr('height', height - 30).attr('fill', 'white');
+        this.chart.append('defs').append('mask').attr('id', `mask-wrapper-${previewType}-${this.chart.node().id}`).append('rect').attr('x', 0).attr('y', 0).attr('width', width).attr('height', height - 30).attr('fill', 'white');
       }
     };
     this.getChartDisplayLabels = (containerWidth, minItemWidth, charts) => {
@@ -107,7 +100,7 @@ class ChartComponent extends _react.Component {
         if (item.group_name === 'rest' && isCompleteness) return;
         const groupData = chartGroupData.find(g => g.name === item.name);
         if (!groupData) {
-          const newItem = (0, _lodashEs.cloneDeep)(item);
+          const newItem = cloneDeep(item);
           newItem.currentGroupCount = 1;
           chartGroupData.push(newItem);
         } else {
@@ -161,13 +154,13 @@ class ChartComponent extends _react.Component {
           // mark the first item in each group,but if item value is 0, mark the next item
           let targetMarkItem = item[0],
             i = 1;
-          while (!((_targetMarkItem = targetMarkItem) !== null && _targetMarkItem !== void 0 && _targetMarkItem.value) && !Number.isNaN((_targetMarkItem2 = targetMarkItem) === null || _targetMarkItem2 === void 0 ? void 0 : _targetMarkItem2.value)) {
+          while (!((_targetMarkItem = targetMarkItem) === null || _targetMarkItem === void 0 ? void 0 : _targetMarkItem.value) && !Number.isNaN((_targetMarkItem2 = targetMarkItem) === null || _targetMarkItem2 === void 0 ? void 0 : _targetMarkItem2.value)) {
             var _targetMarkItem, _targetMarkItem2;
             targetMarkItem = item[i];
             i++;
             if (i >= item.length) break;
           }
-          if (!((_targetMarkItem3 = targetMarkItem) !== null && _targetMarkItem3 !== void 0 && _targetMarkItem3.value)) return;
+          if (!((_targetMarkItem3 = targetMarkItem) === null || _targetMarkItem3 === void 0 ? void 0 : _targetMarkItem3.value)) return;
           targetMarkItem.isFirst = 1;
         } else if (position === 'last') {
           var _targetMarkItem6;
@@ -175,13 +168,13 @@ class ChartComponent extends _react.Component {
           const l = item.length;
           let targetMarkItem = item[l - 1],
             i = l - 2;
-          while (!((_targetMarkItem4 = targetMarkItem) !== null && _targetMarkItem4 !== void 0 && _targetMarkItem4.value) && !Number.isNaN((_targetMarkItem5 = targetMarkItem) === null || _targetMarkItem5 === void 0 ? void 0 : _targetMarkItem5.value)) {
+          while (!((_targetMarkItem4 = targetMarkItem) === null || _targetMarkItem4 === void 0 ? void 0 : _targetMarkItem4.value) && !Number.isNaN((_targetMarkItem5 = targetMarkItem) === null || _targetMarkItem5 === void 0 ? void 0 : _targetMarkItem5.value)) {
             var _targetMarkItem4, _targetMarkItem5;
             targetMarkItem = item[i];
             i--;
             if (i < 0) break;
           }
-          if (!((_targetMarkItem6 = targetMarkItem) !== null && _targetMarkItem6 !== void 0 && _targetMarkItem6.value)) return;
+          if (!((_targetMarkItem6 = targetMarkItem) === null || _targetMarkItem6 === void 0 ? void 0 : _targetMarkItem6.value)) return;
           targetMarkItem.isLast = 1;
         } else {
           console.error('on markFirstOrLast: unknown position');
@@ -213,22 +206,6 @@ class ChartComponent extends _react.Component {
         });
       });
     };
-    this.drawLabels = function () {
-      let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      if (!_this.chart) return;
-      const {
-        width
-      } = _this.chart.coordinateBBox;
-      _this.labelCount = data.length;
-      if (Math.floor(width / _this.labelCount) <= 20) {
-        let displayLabels = _this.getChartDisplayLabels(width, 20, data);
-        _this.labelCount = displayLabels.length;
-        _this.chart.scale('name', {
-          type: 'cat',
-          ticks: displayLabels
-        });
-      }
-    };
     this.renderAxisLabel = (chart, tables, chartContainer) => {
       if (!this.chart || !chart) return;
       let {
@@ -259,13 +236,13 @@ class ChartComponent extends _react.Component {
       if (y_axis_summary_column_key) {
         y_axis_column_key = y_axis_summary_column_key;
       }
-      const table = (0, _dtableUtils.getTableById)(tables, table_id);
+      const table = getTableById(tables, table_id);
       let textColor;
-      this.globalTheme === _constants.THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
+      this.globalTheme === THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
 
       // xAxis
-      const xAxisID = "chart-x-axis-label_".concat(chart.id);
-      const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector("#".concat(xAxisID));
+      const xAxisID = `chart-x-axis-label_${chart.id}`;
+      const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector(`#${xAxisID}`);
       const {
         width: containerWidth
       } = this.chartBoundingClientRect;
@@ -273,32 +250,33 @@ class ChartComponent extends _react.Component {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'chart-axis-label';
-        const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
-        div.innerHTML = "".concat(column ? column.name : '');
-        div.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute; bottom: 0;"));
+        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;`);
         chartContainer.appendChild(div);
       }
       if (xLabel && x_axis_show_label) {
-        xLabel.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute; bottom: 0;"));
+        xLabel.setAttribute('style', `color:${textColor}; width: ${containerWidth}px; text-align: ${x_axis_label_position}; position: absolute; bottom: 0;`);
       }
       if (xLabel && !x_axis_show_label) {
         xLabel.parentNode.removeChild(xLabel);
       }
 
       // yAxis
-      const yAxisID = "chart-y-axis-label_".concat(chart.id);
-      const yLabel = chartContainer.querySelector("#".concat(yAxisID));
+      const yAxisID = `chart-y-axis-label_${chart.id}`;
+      const yLabel = chartContainer.querySelector(`#${yAxisID}`);
       const divHeight = 20;
       if (!yLabel && y_axis_show_label) {
         const div = document.createElement('div');
         div.id = yAxisID;
         div.className = 'chart-axis-label';
-        if (y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = _intl.default.get('Amount');
+        // SCATTER always has y_axis_column_key
+        if (y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT && type !== CHART_TYPE.SCATTER) {
+          div.innerHTML = intl.get('Amount');
         } else {
-          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_column_key) || {};
+          const column = getTableColumnByKey(table, y_axis_column_key) || {};
           div.innerHTML = column.name || '';
-          if (type === _constants.CHART_TYPE.BAR_STACK) {
+          if (type === CHART_TYPE.BAR_STACK) {
             div.innerHTML = title_name || '';
           }
         }
@@ -306,9 +284,9 @@ class ChartComponent extends _react.Component {
           height: containerHeight
         } = this.chartBoundingClientRect;
         let textAlign = 'center';
-        if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        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)`);
         chartContainer.appendChild(div);
       }
       if (yLabel && y_axis_show_label) {
@@ -316,32 +294,32 @@ class ChartComponent extends _react.Component {
           height: containerHeight
         } = this.chartBoundingClientRect;
         let textAlign = 'center';
-        if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        yLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        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)`);
       }
       if (yLabel && !y_axis_show_label) {
         yLabel.parentNode.removeChild(yLabel);
       }
 
       // yAxis(left) - combination chart
-      const yAxisLeftID = "chart-y-axis-left-label_".concat(chart.id);
-      const yAxisLeftLabel = chartContainer.querySelector("#".concat(yAxisLeftID));
+      const yAxisLeftID = `chart-y-axis-left-label_${chart.id}`;
+      const yAxisLeftLabel = chartContainer.querySelector(`#${yAxisLeftID}`);
       if (!yAxisLeftLabel && show_y_axis_left_label) {
         const div = document.createElement('div');
         div.id = yAxisLeftID;
         div.className = 'chart-axis-label text-truncate';
-        if (y_axis_left_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = _intl.default.get('Amount');
+        if (y_axis_left_summary_type === CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = intl.get('Amount');
         } else {
-          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column) || {};
+          const column = getTableColumnByKey(table, y_axis_left_summary_column) || {};
           div.innerHTML = column.name || '';
         }
         const containerHeight = chartContainer.offsetHeight;
         let textAlign = 'center';
-        if (y_axis_left_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (y_axis_left_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        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)`);
         chartContainer.appendChild(div);
       }
       if (yAxisLeftLabel && show_y_axis_left_label) {
@@ -349,30 +327,30 @@ class ChartComponent extends _react.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:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        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)`);
       }
       if (yAxisLeftLabel && !show_y_axis_left_label) {
         yAxisLeftLabel.parentNode.removeChild(yAxisLeftLabel);
       }
 
       // yAxis(right) - combination chart
-      const yAxisRightID = "chart-y-axis-right-label_".concat(chart.id);
-      const yAxisRightLabel = chartContainer.querySelector("#".concat(yAxisRightID));
+      const yAxisRightID = `chart-y-axis-right-label_${chart.id}`;
+      const yAxisRightLabel = chartContainer.querySelector(`#${yAxisRightID}`);
       if (!yAxisRightLabel && show_y_axis_right_label) {
         const div = document.createElement('div');
         div.id = yAxisRightID;
         div.className = 'chart-axis-label text-truncate';
-        if (y_axis_right_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = _intl.default.get('Amount');
+        if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = intl.get('Amount');
         } else {
-          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_right_summary_column) || {};
+          const column = getTableColumnByKey(table, y_axis_right_summary_column) || {};
           div.innerHTML = column.name || '';
         }
         const containerHeight = chartContainer.offsetHeight;
         let textAlign = 'center';
-        if (y_axis_right_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (y_axis_right_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; right: 0; transform: translate(").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        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)`);
         chartContainer.appendChild(div);
       }
       if (yAxisRightLabel && show_y_axis_right_label) {
@@ -380,7 +358,7 @@ class ChartComponent extends _react.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:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; right: 0; transform: translate(").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        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)`);
       }
       if (yAxisRightLabel && !show_y_axis_right_label) {
         yAxisRightLabel.parentNode.removeChild(yAxisRightLabel);
@@ -398,10 +376,10 @@ class ChartComponent extends _react.Component {
         show_vertical_axis_label,
         show_horizontal_axis_label
       } = chart.config;
-      const table = (0, _dtableUtils.getTableById)(tables, table_id);
+      const table = getTableById(tables, table_id);
       const textColor = '#999999';
-      const xAxisID = "chart-x-axis-label_".concat(chart.id);
-      const xLabel = chartContainer.querySelector("#".concat(xAxisID));
+      const xAxisID = `chart-x-axis-label_${chart.id}`;
+      const xLabel = chartContainer.querySelector(`#${xAxisID}`);
       const {
         width: containerWidth
       } = this.chartBoundingClientRect;
@@ -409,37 +387,37 @@ class ChartComponent extends _react.Component {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'chart-axis-label';
-        if (horizontal_axis_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = _intl.default.get('Amount');
+        if (horizontal_axis_summary_type === CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = intl.get('Amount');
         } else {
-          const column = (0, _dtableUtils.getTableColumnByKey)(table, horizontal_axis_column_key);
-          div.innerHTML = "".concat(column ? column.name : '');
+          const column = getTableColumnByKey(table, horizontal_axis_column_key);
+          div.innerHTML = `${column ? column.name : ''}`;
         }
-        div.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(horizontal_axis_label_position, "; position: absolute"));
+        div.setAttribute('style', `color:${textColor}; width: ${containerWidth}px; text-align: ${horizontal_axis_label_position}; position: absolute`);
         chartContainer.appendChild(div);
       }
       if (xLabel && show_horizontal_axis_label) {
-        xLabel.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(horizontal_axis_label_position, "; position: absolute"));
+        xLabel.setAttribute('style', `color:${textColor}; width: ${containerWidth}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_".concat(chart.id);
-      const yLabel = chartContainer.querySelector("#".concat(yAxisID));
+      const yAxisID = `chart-y-axis-label_${chart.id}`;
+      const yLabel = chartContainer.querySelector(`#${yAxisID}`);
       const divHeight = 20;
       if (!yLabel && show_vertical_axis_label) {
         const div = document.createElement('div');
         div.id = yAxisID;
         div.className = 'chart-axis-label';
-        const column = (0, _dtableUtils.getTableColumnByKey)(table, vertical_axis_column_key) || {};
+        const column = getTableColumnByKey(table, vertical_axis_column_key) || {};
         div.innerHTML = column.name || '';
         const {
           height: containerHeight
         } = this.chartBoundingClientRect;
         let textAlign = 'center';
-        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        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)`);
         chartContainer.appendChild(div);
       }
       if (yLabel && show_horizontal_axis_label) {
@@ -447,9 +425,9 @@ class ChartComponent extends _react.Component {
           height: containerHeight
         } = this.chartBoundingClientRect;
         let textAlign = 'center';
-        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        yLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        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)`);
       }
       if (yLabel && !show_horizontal_axis_label) {
         yLabel.parentNode.removeChild(yLabel);
@@ -461,288 +439,30 @@ class ChartComponent extends _react.Component {
     this.isShowHorizontalAxisLabel = chart => {
       return !!(chart && chart.config && chart.config.show_horizontal_axis_label);
     };
-    // Automatic adjustment of maximum and minimum values
-    this.autoAdjustDataOptions = function (chart) {
-      let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      let summaryColumn = arguments.length > 2 ? arguments[2] : undefined;
-      if (!_this.chart || !chart) return;
-      let valueScaleOptions = {};
-      const {
-        config
-      } = chart;
-      const {
-        y_axis_auto_range,
-        y_axis_min,
-        y_axis_max,
-        y_axis_summary_method
-      } = config;
-      if (summaryColumn) {
-        valueScaleOptions['formatter'] = value => {
-          return _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method);
-        };
-      }
-      if (y_axis_auto_range === undefined || y_axis_auto_range) {
-        valueScaleOptions['nice'] = true;
-      } else {
-        valueScaleOptions['min'] = y_axis_min;
-        valueScaleOptions['max'] = y_axis_max;
-        // set the filter rule
-        _this.chart.filter('value', value => {
-          return value >= y_axis_min;
-        });
-        // filter the data
-        _this.chart.filterData(data);
-      }
-      _this.chart.scale({
-        name: {
-          type: 'cat'
-        },
-        value: valueScaleOptions
-      });
-    };
-    // set axis label and tooltip
-    this.setNameLabelAndTooltip = function () {
-      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.CHART_THEME_COLOR['light'];
-      let labelCount = arguments.length > 1 ? arguments[1] : undefined;
-      if (!_this.chart) return;
-      _this.chart.axis('name', {
-        line: {
-          style: {
-            stroke: theme.XAxisColor,
-            lineWidth: 1
-          }
-        },
-        tickLine: {
-          length: 5,
-          // color of the tick line
-          stroke: theme.XAxisColor
-        },
-        label: {
-          style: {
-            fill: theme.textColor,
-            fontSize: theme.fontSize
-          },
-          offset: 10,
-          autoRotate: true,
-          rotate: labelCount > 11 ? 0.3 : 0,
-          formatter: name => {
-            const isString = typeof name === 'string';
-            if (!isString) name = String(name);
-            if (name === 'undefined') {
-              return _intl.default.get(_constants.EMPTY_NAME);
-            }
-            if (name.length > 10) {
-              return (0, _utils.formatXAxisLabel)(name);
-            }
-            return name;
-          }
-        }
-      });
-    };
-    // set value label
-    this.setValueLabel = function () {
-      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.CHART_THEME_COLOR['light'];
-      if (!_this.chart) return;
-      _this.chart.axis('value', {
-        label: {
-          offset: 6,
-          style: {
-            fontSize: theme.fontSize,
-            fill: theme.textColor
-          }
-        },
-        grid: {
-          line: {
-            style: {
-              stroke: theme.gridColor,
-              lineDash: [8, 3]
-            }
-          }
-        }
-      });
-    };
-    this.labelFormatter = name => {
-      let label = name;
-      if (name.length > 10) {
-        label = "".concat(name.slice(0, 10), "...");
-      }
-      if (name === '' || name === 'undefined') {
-        label = _intl.default.get(_constants.EMPTY_NAME);
-      }
-      return label;
-    };
-    this.getLegendConfig = function () {
-      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.CHART_THEME_COLOR['light'];
-      let legendPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top-right';
-      return {
-        // custom: true,
-        position: legendPosition,
-        itemName: {
-          style: {
-            // fill: theme.textColor,
-            fill: theme.legendTextColor,
-            fontSize: theme.legendFontSize
-          },
-          formatter: name => {
-            if (!name && typeof name !== 'number' || name.trim() === 'undefined' || name.trim() === 'null') {
-              return _intl.default.get(_constants.EMPTY_NAME);
-            } else if (name === '_Others') {
-              return _intl.default.get('Others');
-            } else {
-              return _intl.default.get(name) || name;
-            }
-          }
-        },
-        pageNavigator: {
-          text: {
-            style: {
-              fill: theme.legendTextColor
-            }
-          },
-          marker: {
-            style: {
-              fill: theme.legendPageNavigatorMarkerColor,
-              inactiveFill: theme.legendPageNavigatorMarkerColor,
-              inactiveOpacity: 0.45
-            }
-          }
-        },
-        itemHeight: 30,
-        marker: {
-          symbol:
-          // 'square',
-          // use cavans to custom legend，returns a path command array
-          (x, y) => {
-            x = x + 6;
-            y = y - 1;
-            // The total width of the capsule is 20px, and its height is 6px. Thus, the radius of the semi-circle is half the height, which is 3px.
-            const r = 3;
-            // The width of the rectangular part in the middle of the capsule is the total width minus the diameters of the two semi-circles, which is 14px.
-            const rectWidth = 14;
-            return [['M', x - rectWidth / 2, y - r],
-            // Start from the left edge of the left semi-circle
-            ['L', x + rectWidth / 2, y - r],
-            // Draw the top line to the left edge of the right semi-circle
-            ['A', r, r, 0, 0, 1, x + rectWidth / 2, y + r],
-            // Draw the right semi-circle
-            ['L', x - rectWidth / 2, y + r],
-            // Draw the bottom line back to the right edge of the left semi-circle
-            ['A', r, r, 0, 0, 1, x - rectWidth / 2, y - r] // Draw the left semi-circle
-            ];
-          },
-          style: style => {
-            // fill legend with stroke color
-            if (style.stroke) {
-              style.fill = style.stroke;
-            }
-            return style;
-          },
-          spacing: 15
-        }
-      };
-    };
     this.formatterLegendName = name => {
       if (!name && typeof name !== 'number' || name.trim() === 'undefined' || name.trim() === 'null') {
-        return _intl.default.get(_constants.EMPTY_NAME);
+        return intl.get(EMPTY_NAME);
       } else if (name === '_Others') {
-        return _intl.default.get('Others');
+        return intl.get('Others');
       } else {
-        return _intl.default.get(name) || name;
+        return intl.get(name) || name;
       }
     };
-    // set legend for heat map
-    this.setLegendForHeatMap = _ref => {
-      let {
-        exampleColors,
-        themeColors
-      } = _ref;
-      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, ".concat(legendOffsetY, ")"));
-
-      // less
-      legendWrapper.append('text').attr('y', 10).attr('fill', themeColors.textColor).attr('font-size', 12).attr('font-weight', 'bold').text(_intl.default.get('Less'));
-      // rect
-      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', _style.FILL_BORDER_COLOR_MAP[color]).attr('stroke-width', 1);
-      });
-      // more
-      legendWrapper.append('text').attr('x', 182).attr('y', 10).attr('fill', themeColors.textColor).attr('font-size', 12).attr('font-weight', 'bold').text(_intl.default.get('More'));
-    };
-    // set continuous legend
-    this.setContinuousLegend = _ref2 => {
-      var _this$chart$node2;
-      let {
-        previewType,
-        theme,
-        colorRange = [],
-        legendDirection,
-        legendSize,
-        legendTextRange,
-        bubbleColor,
-        type
-      } = _ref2;
-      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 (![_constants.CHART_TYPE.MAP_BUBBLE, _constants.CHART_TYPE.WORLD_MAP_BUBBLE].includes(type)) {
-        var _this$chart$node;
-        // add linearGradient
-        const gradient = this.chart.append('defs').attr('class', 'linear-gradient-wrapper').append('linearGradient').attr("id", "gradient-".concat((_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id, "-").concat(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', "".concat(colorRange[0]));
-        gradient.append('stop').attr('offset', '50%').attr('stop-color', "".concat(colorRange[4]));
-        gradient.append('stop').attr('offset', '100%').attr('stop-color', "".concat(colorRange[8]));
-      }
-
-      // add legend
-      const continuousLegendWrapper = this.chart.append('g').attr('class', 'legend-continuous-wrapper').attr('transform', "translate(0, ".concat(chartHeight - legendRectHeight - legendTextHeightSpace, ")"));
-      continuousLegendWrapper.append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('fill', [_constants.CHART_TYPE.MAP_BUBBLE, _constants.CHART_TYPE.WORLD_MAP_BUBBLE].includes(type) ? bubbleColor : "url(#gradient-".concat((_this$chart$node2 = this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id, "-").concat(previewType, ")")).call(g => {
-        if ([_constants.CHART_TYPE.MAP_BUBBLE, _constants.CHART_TYPE.WORLD_MAP_BUBBLE].includes(type)) {
-          continuousLegendWrapper.append('polygon').attr('points', "0,0  ".concat(legendRectWidth - 0.5, ",0  0,").concat(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);
-      });
-    };
-    // set legend
-    this.setLegend = _ref3 => {
+    this.setLegend = _ref => {
       var _chart$config, _chart$config2;
       let {
         legendName,
-        theme = _constants.CHART_THEME_COLOR['light'],
+        theme = CHART_THEME_COLOR['light'],
         legendPosition = 'top-left',
         data,
         colorScale,
         groupColumn,
         chart
-      } = _ref3;
+      } = _ref;
       if (!this.chart) return;
       this.legendConfig = {
-        legendRectWidth: [_constants.CHART_TYPE.SCATTER, _constants.CHART_TYPE.MIRROR].includes(chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type) ? 8 : 20,
-        legendRectHeight: [_constants.CHART_TYPE.SCATTER, _constants.CHART_TYPE.MIRROR].includes(chart === null || chart === void 0 ? void 0 : (_chart$config2 = chart.config) === null || _chart$config2 === void 0 ? void 0 : _chart$config2.type) ? 8 : 6,
+        legendRectWidth: [CHART_TYPE.SCATTER, CHART_TYPE.MIRROR].includes(chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type) ? 8 : 20,
+        legendRectHeight: [CHART_TYPE.SCATTER, CHART_TYPE.MIRROR].includes(chart === null || chart === void 0 ? void 0 : (_chart$config2 = chart.config) === null || _chart$config2 === void 0 ? void 0 : _chart$config2.type) ? 8 : 6,
         r: this.getLegendR(chart),
         legendItemPaddingTop: 5,
         legendItemTextPaddingTop: 13,
@@ -757,7 +477,7 @@ class ChartComponent extends _react.Component {
 
       // sort legend data and format data
       data.forEach(item => item[legendName] = String(item[legendName]));
-      const legendData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), legendName, groupColumn, chart);
+      const legendData = BaseUtils.sortDataByGroupName(cloneDeep(data), legendName, groupColumn, chart);
       const {
         width: chartWidth,
         height: chartHeight,
@@ -772,6 +492,7 @@ class ChartComponent extends _react.Component {
       // legend offset bottom and When there is only one line of legend, it is displayed in the center (for scatter chart)
       if (bottomLegendSpace) {
         queueMicrotask(() => {
+          if (!legendWrapper.node()) return;
           const {
             width,
             height
@@ -781,7 +502,7 @@ class ChartComponent extends _react.Component {
           if (groupsData.length === 1) {
             curTranslateX = (chartWidth - width - insertPadding * 2) / 2;
           }
-          legendWrapper.attr('transform', "translate(".concat(curTranslateX, ",").concat(curTranslateY, ")"));
+          legendWrapper.attr('transform', `translate(${curTranslateX},${curTranslateY})`);
         });
       }
 
@@ -804,7 +525,7 @@ class ChartComponent extends _react.Component {
         const pageNavigator = legendWrapper.append('g').attr('class', 'legend-flip-page');
 
         // count
-        pageNavigator.append('text').attr('class', 'legend-count').attr('x', 15).attr('y', legendItemTextPaddingTop).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text("".concat(curCount + 1, "/").concat(groupsData.length));
+        pageNavigator.append('text').attr('class', 'legend-count').attr('x', 15).attr('y', legendItemTextPaddingTop).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text(`${curCount + 1}/${groupsData.length}`);
 
         // prev page
         pageNavigator.append('polygon').attr('class', 'legend-prev-page').attr('points', this.calcEquilateralTriangle(5, 8, 12)).attr('fill', theme.legendPageNavigatorMarkerColor).attr('opacity', curCount === 0 ? 0.45 : 1).attr('style', 'cursor: pointer;').on('click', event => {
@@ -815,7 +536,7 @@ class ChartComponent extends _react.Component {
               groupData: groupsData[curCount],
               colorScale,
               theme,
-              text: "".concat(curCount + 1, "/").concat(groupsData.length)
+              text: `${curCount + 1}/${groupsData.length}`
             });
           }
         });
@@ -829,7 +550,7 @@ class ChartComponent extends _react.Component {
               groupData: groupsData[curCount],
               colorScale,
               theme,
-              text: "".concat(curCount + 1, "/").concat(groupsData.length)
+              text: `${curCount + 1}/${groupsData.length}`
             });
           }
         });
@@ -854,18 +575,18 @@ class ChartComponent extends _react.Component {
             } = g.node().parentNode.getBoundingClientRect();
             groupTranslateY = groupTranslateY + height + legendItemMargin;
           }
-          g.attr('transform', "translate(".concat(groupTranslateX, ", ").concat(groupTranslateY, ")"));
+          g.attr('transform', `translate(${groupTranslateX},${groupTranslateY})`);
         });
       }
     };
-    this.renderLegend = _ref4 => {
+    this.renderLegend = _ref2 => {
       let {
         legendWrapper,
         groupData,
         colorScale,
         theme,
         text
-      } = _ref4;
+      } = _ref2;
       const {
         legendItemPaddingTop,
         legendItemTextPaddingTop,
@@ -891,15 +612,15 @@ class ChartComponent extends _react.Component {
           d3.select(item).remove();
         });
       }
-      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref5 => {
-        let [groupName] = _ref5;
+      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref3 => {
+        let [groupName] = _ref3;
         return groupName;
-      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref6 => {
-        let [groupName] = _ref6;
+      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref4 => {
+        let [groupName] = _ref4;
         if (colorScale) return colorScale(groupName);
-        return this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
-      }).attr('data-text', _ref7 => {
-        let [groupName] = _ref7;
+        return this.colorMap[groupName] || CHART_STYLE_COLORS[0];
+      }).attr('data-text', _ref5 => {
+        let [groupName] = _ref5;
         return groupName;
       }).call(g => {
         // Add text
@@ -926,7 +647,7 @@ class ChartComponent extends _react.Component {
               const prevTranslateY = Number(prevItem.getAttribute('data-translateY'));
               translateY = prevTranslateY + height + legendItemMargin;
             }
-            d3.select(item).attr('transform', "translate(".concat(start, ",").concat(translateY, ")")).attr('data-translateY', translateY);
+            d3.select(item).attr('transform', `translate(${start},${translateY})`).attr('data-translateY', translateY);
           });
         } else {
           // update g translateX
@@ -940,7 +661,7 @@ class ChartComponent extends _react.Component {
               const prevTranslateX = Number(prevItem.getAttribute('data-translateX'));
               translateX = prevTranslateX + width + legendItemMargin;
             }
-            d3.select(item).attr('transform', "translate(".concat(translateX, ",0)")).attr('data-translateX', translateX);
+            d3.select(item).attr('transform', `translate(${translateX},0)`).attr('data-translateX', translateX);
 
             // legend items add offset 
             if (legendPosition === 'top-right') {
@@ -979,7 +700,7 @@ class ChartComponent extends _react.Component {
       if (top && bottom) {
         let allHeight = top;
         const groupsData = [];
-        const newLegendData = (0, _lodashEs.cloneDeep)(legendData);
+        const newLegendData = cloneDeep(legendData);
         let lastIndex = 0;
         legendData.forEach((item, index) => {
           const virtualLegend = this.chart.append('g').attr('opacity', 0);
@@ -1004,7 +725,7 @@ class ChartComponent extends _react.Component {
       } else {
         let allWidth = start;
         const groupsData = [];
-        const newLegendData = (0, _lodashEs.cloneDeep)(legendData);
+        const newLegendData = cloneDeep(legendData);
         let lastIndex = 0;
         legendData.forEach((item, index) => {
           const virtualLegend = this.chart.append('g').attr('opacity', 0);
@@ -1087,20 +808,20 @@ class ChartComponent extends _react.Component {
       const offset = end - (endTranslateX + endWidth);
       legendItems.forEach(legendItem => {
         const curTranslateX = Number(legendItem.getAttribute('data-translateX')) + offset;
-        d3.select(legendItem).attr('transform', "translate(".concat(curTranslateX, ", 0)")).attr('data-translateX', curTranslateX);
+        d3.select(legendItem).attr('transform', `translate(${curTranslateX}, 0)`).attr('data-translateX', curTranslateX);
         d3.select(legendItem).attr('opacity', 1);
       });
     };
     this.sortLegend = (result, groupColumn, legendName) => {
       result.forEach(item => {
         const option = groupColumn.data.options.find(option => option.name === item[legendName]);
-        if (option !== null && option !== void 0 && option.id) {
+        if (option === null || option === void 0 ? void 0 : option.id) {
           item['group_name_id'] = option.id;
           item['oldName'] = item.name;
           item.name = item['group_name_id'];
         }
       });
-      _utils.BaseUtils.sortCharts(result, groupColumn, 'name');
+      BaseUtils.sortCharts(result, groupColumn, 'name');
       result.forEach(item => {
         item.name = item['oldName'];
       });
@@ -1113,23 +834,10 @@ class ChartComponent extends _react.Component {
       const {
         type
       } = config;
-      if (type === _constants.CHART_TYPE.SCATTER) return 4;
-      if (type === _constants.CHART_TYPE.MIRROR) return 0;
+      if (type === CHART_TYPE.SCATTER) return 4;
+      if (type === CHART_TYPE.MIRROR) return 0;
       return 3;
     };
-    // theta is pie or ring chart
-    this.setLegendForTheta = function (legendName) {
-      let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.CHART_THEME_COLOR['light'];
-      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
-      let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-      if (!_this.chart) return;
-      const basicLegendConfig = _this.getLegendConfig(theme, legendPosition);
-      if (offsetX) {
-        basicLegendConfig.offsetX = offsetX;
-      }
-      basicLegendConfig.itemName.style.fontSize = theme.fontSize;
-      _this.chart.legend(legendName, basicLegendConfig);
-    };
     this.calcEquilateralTriangle = (cx, cy, size, direction) => {
       const height = size * Math.sqrt(3) / 2;
       if (direction === 'bottom') {
@@ -1141,12 +849,12 @@ class ChartComponent extends _react.Component {
       let groupName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'group_name';
       let groupColumn = arguments.length > 3 ? arguments[3] : undefined;
       let chart = arguments.length > 4 ? arguments[4] : undefined;
-      const newData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), groupName, groupColumn, chart);
+      const newData = BaseUtils.sortDataByGroupName(cloneDeep(data), groupName, groupColumn, chart);
       let currentIdx = 0;
-      const defaultColors = _constants.CHART_STYLE_COLORS;
+      const defaultColors = CHART_STYLE_COLORS;
       let colors = defaultColors;
       if (chartColorTheme) {
-        colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
+        colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
       }
       const colorMap = newData.reduce((acc, cur) => {
         if (cur[groupName] && !acc[cur[groupName]]) {
@@ -1245,142 +953,17 @@ class ChartComponent extends _react.Component {
                 formatted_value: item.formatted_value + ''
               });
             }
-            if (type === _constants.CHART_TYPE.WORLD_MAP_BUBBLE) {
+            if (type === CHART_TYPE.WORLD_MAP_BUBBLE) {
               sum += item.value;
             }
           }
         }
       });
-      if (type === _constants.CHART_TYPE.WORLD_MAP_BUBBLE) {
+      if (type === CHART_TYPE.WORLD_MAP_BUBBLE) {
         statisticNewData.sum = sum;
       }
       return statisticNewData;
     };
-    this.getToolTipSettings = (isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor) => {
-      const obj = {
-        showMarkers: false,
-        containerTpl: "<div class=\"g2-tooltip\">\n        <div class=\"g2-tooltip-title\">{title}</div>\n        <ul class=\"g2-tooltip-list\"></ul>\n      </div>",
-        itemTpl: "<li class=\"g2-tooltip-list-item\">\n         <span class=\"g2-tooltip-marker\" style=\"background-color:{color};display:inline-block;\"></span>\n         <span class=\"g2-tooltip-name\">{name}</span>\n         <span class=\"g2-tooltip-value\">{value}</span>\n      </li>",
-        domStyles: {
-          'g2-tooltip': {
-            boxSizing: 'border-box',
-            minWidth: '178px',
-            borderRadius: '3px',
-            border: '1px solid #e2e2e2',
-            backgroundColor: '#fff',
-            padding: '16px',
-            paddingTop: '8px',
-            paddingBottom: '8px',
-            marginLeft: '20px',
-            boxShadow: '0px 0px 1px 1px rgba(0,0,0,0.1)'
-          },
-          'g2-tooltip-title': {
-            color: '#333333',
-            fontSize: '14px',
-            paddingBottom: '10px',
-            maxWidth: '160px',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            lineHeight: '14px',
-            textOverflow: 'ellipsis'
-          },
-          'g2-tooltip-list-item': {
-            marginTop: '8px',
-            marginBottom: '8px',
-            display: 'flex'
-          },
-          'g2-tooltip-marker': {
-            width: '12px',
-            height: '12px',
-            borderRadius: '2px',
-            marginRight: '8px'
-          },
-          'g2-tooltip-name': {
-            display: 'inline-block',
-            fontSize: '12px',
-            minWidth: '80px',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            lineHeight: '12px',
-            textOverflow: 'ellipsis'
-          },
-          'g2-tooltip-value': {
-            fontSize: '12px'
-          }
-        }
-      };
-      if (isGroup) {
-        obj.customItems = items => {
-          const activeItem = items[0];
-          const name = activeItem.data.name;
-          return this.formatedDataByName[name].map(item => {
-            return {
-              color: useSingleSelectColumnColor ? item.group_color : this.colorMap[item.group_name] || _constants.CHART_STYLE_COLORS[0],
-              data: item,
-              name: !item.group_name && typeof item.group_name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : item.group_name,
-              title: item.name,
-              value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, item.value, y_axis_summary_method)
-            };
-          });
-        };
-      }
-      return obj;
-    };
-    this.setToolTip = (isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor) => {
-      const settings = this.getToolTipSettings(isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor);
-      this.chart.tooltip(settings);
-    };
-    this.setToolTipForLine = () => {
-      const settings = this.getToolTipSettings();
-      const lineToolTipSettings = {
-        showCrosshairs: true,
-        showTitle: true,
-        shared: true,
-        showMarkers: true,
-        marker: {
-          strokeOpacity: 0,
-          r: 5
-        },
-        crosshairs: {
-          line: {
-            fill: '#F3F3F3'
-          }
-        }
-      };
-      this.chart.tooltip({
-        ...settings,
-        ...lineToolTipSettings
-      });
-    };
-    this.setToolTipForArea = () => {
-      const settings = this.getToolTipSettings();
-      const lineToolTipSettings = {
-        showCrosshairs: true,
-        showTitle: true,
-        shared: true,
-        showMarkers: true,
-        marker: {
-          strokeOpacity: 0,
-          r: 6
-        },
-        crosshairs: {
-          line: {
-            fill: '#F3F3F3'
-          }
-        }
-      };
-      this.chart.tooltip({
-        ...settings,
-        ...lineToolTipSettings
-      });
-    };
-    // theta is pie or ring chart
-    this.setToolTipForTheta = () => {
-      const settings = this.getToolTipSettings();
-      settings.showTitle = false;
-      settings.containerTpl = "<div class=\"g2-tooltip\">\n      <ul class=\"g2-tooltip-list\"></ul>\n    </div>";
-      this.chart.tooltip(settings);
-    };
     this.isShowXAxisLabel = chart => {
       return !!(chart && chart.config && chart.config.x_axis_show_label);
     };
@@ -1397,21 +980,21 @@ class ChartComponent extends _react.Component {
       let themeColors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       let theme = arguments.length > 1 ? arguments[1] : undefined;
       // dark->custom->light
-      if (theme === _constants.THEME_NAME_MAP.DARK) {
-        themeColors = _constants.CHART_THEME_COLOR.dark;
+      if (theme === THEME_NAME_MAP.DARK) {
+        themeColors = CHART_THEME_COLOR.dark;
       }
-      return themeColors || _constants.CHART_THEME_COLOR[_constants.THEME_NAME_MAP.LIGHT];
+      return themeColors || CHART_THEME_COLOR[THEME_NAME_MAP.LIGHT];
     };
     this.setDispalyGoalLine = (goal_label, goal_value, insertPadding, yScale) => {
       const {
         width: chartWidth
       } = this.chartBoundingClientRect;
-      const annotationWrapper = this.chart.append('g').attr('class', "annotation-wrapper");
+      const annotationWrapper = this.chart.append('g').attr('class', `annotation-wrapper`);
       annotationWrapper.append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', yScale(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', yScale(goal_value)).attr('stroke-dasharray', '8,3').call(g => {
         annotationWrapper.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
       });
     };
-    this.addLabelToRectTop = _ref8 => {
+    this.addLabelToRectTop = _ref6 => {
       let {
         container,
         x,
@@ -1420,15 +1003,16 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref8;
-      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+      } = _ref6;
+      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+        if (!g.node()) return;
         const {
           width
         } = g.node().getBoundingClientRect();
         g.attr('x', Number(x) + Number(xWidth) / 2 - width / 2);
       });
     };
-    this.addLabelToRectRight = _ref9 => {
+    this.addLabelToRectRight = _ref7 => {
       let {
         container,
         x,
@@ -1438,8 +1022,8 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref9;
-      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('x', Number(x) + Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+      } = _ref7;
+      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('x', Number(x) + Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         if (g.node()) {
           var _g$node;
           const {
@@ -1449,7 +1033,7 @@ class ChartComponent extends _react.Component {
         }
       });
     };
-    this.addLabelToRectCenter = _ref10 => {
+    this.addLabelToRectCenter = _ref8 => {
       let {
         chartType,
         container,
@@ -1460,18 +1044,19 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref10;
-      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+      } = _ref8;
+      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+        if (!g.node()) return;
         const {
           width,
           height
         } = g.node().getBoundingClientRect();
         const translateX = Number(x) + xWidth / 2 - width / 2;
         let translateY = Number(y) + Number(yheight / 2) + height / 2;
-        if (chartType === _constants.CHART_TYPE.BAR_STACK) {
+        if (chartType === CHART_TYPE.BAR_STACK) {
           translateY = translateY;
         }
-        g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
+        g.attr('transform', `translate(${translateX}, ${translateY})`);
       });
     };
     this.setActiveAndInActiveState = (state, allGroup, curGroupName, chartType) => {
@@ -1480,7 +1065,7 @@ class ChartComponent extends _react.Component {
           const rects = Array.from(g.children).filter(item => item.tagName !== 'text');
           rects.forEach(item => {
             d3.select(item).transition().duration(this.transitionDuration).attr('opacity', 1);
-            if ([_constants.CHART_TYPE.PIE, _constants.CHART_TYPE.RING].includes(chartType)) {
+            if ([CHART_TYPE.PIE, CHART_TYPE.RING].includes(chartType)) {
               d3.select(item).attr('stroke-width', 2);
             }
           });
@@ -1493,7 +1078,7 @@ class ChartComponent extends _react.Component {
             if (item.getAttribute('data-groupName') !== curGroupName) {
               d3.selectAll([item]).transition().duration(this.transitionDuration).attr('opacity', 0.3);
             } else {
-              if ([_constants.CHART_TYPE.PIE, _constants.CHART_TYPE.RING].includes(chartType)) {
+              if ([CHART_TYPE.PIE, CHART_TYPE.RING].includes(chartType)) {
                 d3.select(item).attr('stroke-width', 0.5);
               }
             }
@@ -1502,29 +1087,36 @@ class ChartComponent extends _react.Component {
       }
     };
     // Use clipPath to make rectangle rounded corners
-    this.addClipPath = _ref11 => {
+    this.addClipPath = _ref9 => {
       let {
         rect,
         parentNode,
         attr,
-        rectId
-      } = _ref11;
+        rectId,
+        borderRadiusVal
+      } = _ref9;
       const {
         borderRadius
       } = this.chartBoundingClientRect;
       const clipRect = d3.select(rect.cloneNode());
       if (attr === 'x') {
-        const borderRadiusVal = Number(rect.getAttribute('height')) * borderRadius;
-        clipRect.attr('rx', borderRadiusVal);
-        clipRect.attr('x', Number(rect.getAttribute('x')) - borderRadiusVal).attr('width', Number(rect.getAttribute('width')) + borderRadiusVal);
+        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);
       } else {
-        const borderRadiusVal = Number(rect.getAttribute('width')) * borderRadius;
-        clipRect.attr('rx', borderRadiusVal);
-        clipRect.attr('height', Number(rect.getAttribute('height')) + borderRadiusVal);
+        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 clipPath = d3.select(parentNode).append('clipPath').attr('opacity', 1).attr('id', rectId);
       clipPath.node().appendChild(clipRect.node());
-      d3.select(rect).attr('clip-path', "url(#".concat(rectId, ")"));
+      d3.select(rect).attr('clip-path', `url(#${rectId})`);
     };
     this.drawYaxis = function (g, theme) {
       let rightAxisOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -1545,7 +1137,7 @@ class ChartComponent extends _react.Component {
       g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2 - _this.horizontalOverflowOffset - rightAxisOffset).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
 
       // update g translateX
-      g.attr('transform', "translate(".concat(insertPadding + _this.horizontalOverflowOffset, ", 0)"));
+      g.attr('transform', `translate(${insertPadding + _this.horizontalOverflowOffset}, 0)`);
     };
     this.checkTextOverflow = allTextEl => {
       const {
@@ -1574,6 +1166,7 @@ class ChartComponent extends _react.Component {
       // Hide overlapping ticks
       for (let i = 0; i < allTicks.length; i++) {
         const curText = d3.select(allTicks[i]).select('text').node();
+        if (!curText) continue;
         const {
           right: curRight,
           bottom: curBottom
@@ -1635,9 +1228,10 @@ class ChartComponent extends _react.Component {
         } = g.node().getBoundingClientRect();
         if (isRoateText && width > insertPadding) {
           const viewWidth = viewBox[viewBox.length - 2];
-          viewBox[0] = "-".concat(width - insertPadding);
-          viewBox[viewBox.length - 2] = "".concat(Number(viewWidth) + (width - insertPadding));
+          viewBox[0] = `-${width - insertPadding}`;
+          viewBox[viewBox.length - 2] = `${Number(viewWidth) + (width - insertPadding)}`;
           queueMicrotask(() => {
+            if (!this.chart) return;
             this.chart.attr('viewBox', viewBox.join(','));
           });
         }
@@ -1668,8 +1262,9 @@ class ChartComponent extends _react.Component {
         } = g.node().getBoundingClientRect();
         if (height > insertPadding) {
           const viewHeight = viewBox[viewBox.length - 1];
-          viewBox[viewBox.length - 1] = "".concat(Number(viewHeight) + (height - insertPadding));
+          viewBox[viewBox.length - 1] = `${Number(viewHeight) + (height - insertPadding)}`;
           queueMicrotask(() => {
+            if (!this.chart) return;
             this.chart.attr('viewBox', viewBox.join(','));
           });
         }
@@ -1681,6 +1276,7 @@ class ChartComponent extends _react.Component {
         ticks.forEach(tick => {
           var _d3$select$select;
           const text = (_d3$select$select = d3.select(tick).select('text')) === null || _d3$select$select === void 0 ? void 0 : _d3$select$select.node();
+          if (!text) return;
           d3.select(tick).select('line').attr('data-name', text.innerHTML);
         });
       }
@@ -1728,5 +1324,4 @@ class ChartComponent extends _react.Component {
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize);
   }
-}
-exports.default = ChartComponent;
+}