sea-chart 2.0.47 → 2.0.49

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

@@ -1,14 +1,21 @@
-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, 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';
-export default class ChartComponent extends Component {
+"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 {
   constructor(props) {
     var _this;
     super(props);
@@ -46,13 +53,13 @@ export default class ChartComponent extends Component {
       this.drawChart();
     };
     this.initLabelStroke = theme => {
-      this.globalTheme = theme || THEME_NAME_MAP.LIGHT;
-      this.labelStroke = theme === THEME_NAME_MAP.DARK ? {} : {
+      this.globalTheme = theme || _constants.THEME_NAME_MAP.LIGHT;
+      this.labelStroke = theme === _constants.THEME_NAME_MAP.DARK ? {} : {
         stroke: '#fff',
         lineWidth: 1
       };
     };
-    this.handleResize = debounce(() => {
+    this.handleResize = (0, _lodashEs.debounce)(() => {
       if (!this.createChart || !this.drawChart) return;
       this.destroyChart();
       this.createChart();
@@ -76,11 +83,11 @@ export default class ChartComponent extends Component {
       _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);
+      return yAxisType === _constants.CHART_SUMMARY_TYPE.COUNT ? _intl.default.get('Amount') : this.getAxisLabel(tables, table_id, yAxisKey);
     };
     this.getColumn = (tables, table_id, columnKey) => {
-      const table = getTableById(tables, table_id);
-      const column = getTableColumnByKey(table, columnKey) || {};
+      const table = (0, _dtableUtils.getTableById)(tables, table_id);
+      const column = (0, _dtableUtils.getTableColumnByKey)(table, columnKey) || {};
       return column;
     };
     this.getAxisLabel = (tables, tableId, columnKey) => {
@@ -88,7 +95,7 @@ export default class ChartComponent extends Component {
       return column.name || '';
     };
     this.getAxisTitleHeight = fontSize => {
-      const safeFontSize = Number(fontSize) || DEFAULT_AXIS_LABEL_FONT_SIZE;
+      const safeFontSize = Number(fontSize) || _constants.DEFAULT_AXIS_LABEL_FONT_SIZE;
       return Math.max(this.axisTitleMinHeight, safeFontSize + 4);
     };
     this.setAxisTitlePadding = function (chartContainer) {
@@ -175,7 +182,7 @@ export default class ChartComponent extends Component {
         if (item.group_name === 'rest' && isCompleteness) return;
         const groupData = chartGroupData.find(g => g.name === item.name);
         if (!groupData) {
-          const newItem = cloneDeep(item);
+          const newItem = (0, _lodashEs.cloneDeep)(item);
           newItem.currentGroupCount = 1;
           chartGroupData.push(newItem);
         } else {
@@ -229,13 +236,13 @@ export default class ChartComponent extends 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 ? void 0 : _targetMarkItem.value) && !Number.isNaN((_targetMarkItem2 = targetMarkItem) === null || _targetMarkItem2 === void 0 ? void 0 : _targetMarkItem2.value)) {
+          while (!((_targetMarkItem = targetMarkItem) !== null && _targetMarkItem !== 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 ? void 0 : _targetMarkItem3.value)) return;
+          if (!((_targetMarkItem3 = targetMarkItem) !== null && _targetMarkItem3 !== void 0 && _targetMarkItem3.value)) return;
           targetMarkItem.isFirst = 1;
         } else if (position === 'last') {
           var _targetMarkItem6;
@@ -243,13 +250,13 @@ export default class ChartComponent extends Component {
           const l = item.length;
           let targetMarkItem = item[l - 1],
             i = l - 2;
-          while (!((_targetMarkItem4 = targetMarkItem) === null || _targetMarkItem4 === void 0 ? void 0 : _targetMarkItem4.value) && !Number.isNaN((_targetMarkItem5 = targetMarkItem) === null || _targetMarkItem5 === void 0 ? void 0 : _targetMarkItem5.value)) {
+          while (!((_targetMarkItem4 = targetMarkItem) !== null && _targetMarkItem4 !== 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 ? void 0 : _targetMarkItem6.value)) return;
+          if (!((_targetMarkItem6 = targetMarkItem) !== null && _targetMarkItem6 !== void 0 && _targetMarkItem6.value)) return;
           targetMarkItem.isLast = 1;
         } else {
           console.error('on markFirstOrLast: unknown position');
@@ -319,16 +326,16 @@ export default class ChartComponent extends Component {
       if (y_axis_summary_column_key) {
         y_axis_column_key = y_axis_summary_column_key;
       }
-      const table = getTableById(tables, table_id);
-      const defaultTextColor = this.globalTheme === THEME_NAME_MAP.DARK ? DEFAULT_AXIS_LABEL_FONT_COLOR_DARK : DEFAULT_AXIS_LABEL_FONT_COLOR;
+      const table = (0, _dtableUtils.getTableById)(tables, table_id);
+      const defaultTextColor = this.globalTheme === _constants.THEME_NAME_MAP.DARK ? _constants.DEFAULT_AXIS_LABEL_FONT_COLOR_DARK : _constants.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 xFontSize = x_axis_label_font_size || _constants.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 yFontSize = y_axis_label_font_size || _constants.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 yLeftFontSize = y_axis_left_label_font_size || _constants.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;
+      const yRightFontSize = y_axis_right_label_font_size || _constants.DEFAULT_AXIS_LABEL_FONT_SIZE;
 
       // xAxis
       const xAxisID = `chart-x-axis-label_${chart.id}`;
@@ -341,7 +348,7 @@ export default class ChartComponent extends Component {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'chart-axis-label';
-        const column = getTableColumnByKey(table, x_axis_column_key);
+        const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
         div.innerHTML = `${column ? column.name : ''}`;
         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);
@@ -362,12 +369,12 @@ export default class ChartComponent extends Component {
         div.id = yAxisID;
         div.className = 'chart-axis-label';
         // 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');
+        if (y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT && type !== _constants.CHART_TYPE.SCATTER) {
+          div.innerHTML = _intl.default.get('Amount');
         } else {
-          const column = getTableColumnByKey(table, y_axis_column_key) || {};
+          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_column_key) || {};
           div.innerHTML = column.name || '';
-          if (type === CHART_TYPE.BAR_STACK) {
+          if (type === _constants.CHART_TYPE.BAR_STACK) {
             div.innerHTML = title_name || '';
           }
         }
@@ -375,8 +382,8 @@ export default class ChartComponent extends Component {
           height: containerHeight
         } = this.chartBoundingClientRect;
         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';
+        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:${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);
       }
@@ -385,8 +392,8 @@ export default class ChartComponent extends Component {
           height: containerHeight
         } = this.chartBoundingClientRect;
         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';
+        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:${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) {
@@ -401,16 +408,16 @@ export default class ChartComponent extends Component {
         const div = document.createElement('div');
         div.id = yAxisLeftID;
         div.className = 'chart-axis-label text-truncate';
-        if (y_axis_left_summary_type === CHART_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = intl.get('Amount');
+        if (y_axis_left_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = _intl.default.get('Amount');
         } else {
-          const column = getTableColumnByKey(table, y_axis_left_summary_column) || {};
+          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column) || {};
           div.innerHTML = column.name || '';
         }
         const containerHeight = chartContainer.offsetHeight;
         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';
+        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:${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);
       }
@@ -433,16 +440,16 @@ export default class ChartComponent extends Component {
         const div = document.createElement('div');
         div.id = yAxisRightID;
         div.className = 'chart-axis-label text-truncate';
-        if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = intl.get('Amount');
+        if (y_axis_right_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = _intl.default.get('Amount');
         } else {
-          const column = getTableColumnByKey(table, y_axis_right_summary_column) || {};
+          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_right_summary_column) || {};
           div.innerHTML = column.name || '';
         }
         const containerHeight = chartContainer.offsetHeight;
         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';
+        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:${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);
       }
@@ -478,12 +485,12 @@ export default class ChartComponent extends Component {
         vertical_axis_label_font_size,
         vertical_axis_label_font_color
       } = chart.config;
-      const table = getTableById(tables, table_id);
-      const defaultTextColor = this.globalTheme === THEME_NAME_MAP.DARK ? DEFAULT_AXIS_LABEL_FONT_COLOR_DARK : DEFAULT_AXIS_LABEL_FONT_COLOR;
+      const table = (0, _dtableUtils.getTableById)(tables, table_id);
+      const defaultTextColor = this.globalTheme === _constants.THEME_NAME_MAP.DARK ? _constants.DEFAULT_AXIS_LABEL_FONT_COLOR_DARK : _constants.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 xFontSize = horizontal_axis_label_font_size || _constants.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 yFontSize = vertical_axis_label_font_size || _constants.DEFAULT_AXIS_LABEL_FONT_SIZE;
       const xAxisID = `chart-x-axis-label_${chart.id}`;
       const xLabel = chartContainer.querySelector(`#${xAxisID}`);
       const {
@@ -494,10 +501,10 @@ export default class ChartComponent extends Component {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'chart-axis-label';
-        if (horizontal_axis_summary_type === CHART_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = intl.get('Amount');
+        if (horizontal_axis_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = _intl.default.get('Amount');
         } else {
-          const column = getTableColumnByKey(table, horizontal_axis_column_key);
+          const column = (0, _dtableUtils.getTableColumnByKey)(table, horizontal_axis_column_key);
           div.innerHTML = `${column ? column.name : ''}`;
         }
         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`);
@@ -516,14 +523,14 @@ export default class ChartComponent extends Component {
         const div = document.createElement('div');
         div.id = yAxisID;
         div.className = 'chart-axis-label';
-        const column = getTableColumnByKey(table, vertical_axis_column_key) || {};
+        const column = (0, _dtableUtils.getTableColumnByKey)(table, vertical_axis_column_key) || {};
         div.innerHTML = column.name || '';
         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';
+        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:${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);
       }
@@ -532,8 +539,8 @@ export default class ChartComponent extends Component {
           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';
+        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:${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_vertical_axis_label) {
@@ -547,22 +554,22 @@ export default class ChartComponent extends Component {
     };
     this.formatterLegendName = name => {
       if (typeof name !== 'string') {
-        if (!name && typeof name !== 'number') return intl.get(EMPTY_NAME);
-        return intl.get(String(name)) || String(name);
+        if (!name && typeof name !== 'number') return _intl.default.get(_constants.EMPTY_NAME);
+        return _intl.default.get(String(name)) || String(name);
       }
       if (name.trim() === 'undefined' || name.trim() === 'null' || name.trim() === '') {
-        return intl.get(EMPTY_NAME);
+        return _intl.default.get(_constants.EMPTY_NAME);
       } else if (name === '_Others') {
-        return intl.get('Others');
+        return _intl.default.get('Others');
       } else {
-        return intl.get(name) || name;
+        return _intl.default.get(name) || name;
       }
     };
     this.setLegend = _ref => {
       var _chart$config, _chart$config2;
       let {
         legendName,
-        theme = CHART_THEME_COLOR['light'],
+        theme = _constants.CHART_THEME_COLOR['light'],
         legendPosition = 'top-left',
         data,
         colorScale,
@@ -571,8 +578,8 @@ export default class ChartComponent extends Component {
       } = _ref;
       if (!this.chart) return;
       this.legendConfig = {
-        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,
+        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,
         r: this.getLegendR(chart),
         legendItemPaddingTop: 5,
         legendItemTextPaddingTop: 13,
@@ -591,9 +598,9 @@ export default class ChartComponent extends Component {
       };
 
       // sort legend data and format data
-      const clonedData = cloneDeep(data);
+      const clonedData = (0, _lodashEs.cloneDeep)(data);
       clonedData.forEach(item => item[legendName] = String(item[legendName]));
-      const legendData = BaseUtils.sortDataByGroupName(clonedData, legendName, groupColumn, chart);
+      const legendData = _utils.BaseUtils.sortDataByGroupName(clonedData, legendName, groupColumn, chart);
 
       // Record every legend group name so legend click can keep at least one visible.
       this.legendGroupNames = new Set(legendData.map(item => String(item[legendName])));
@@ -744,7 +751,7 @@ export default class ChartComponent extends Component {
       }).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] || CHART_STYLE_COLORS[0];
+        return this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
       }).attr('data-text', _ref5 => {
         let [groupName] = _ref5;
         return groupName;
@@ -828,7 +835,7 @@ export default class ChartComponent extends Component {
       if (top && bottom) {
         let allHeight = top;
         const groupsData = [];
-        const newLegendData = cloneDeep(legendData);
+        const newLegendData = (0, _lodashEs.cloneDeep)(legendData);
         let lastIndex = 0;
         legendData.forEach((item, index) => {
           const virtualLegend = this.chart.append('g').attr('opacity', 0);
@@ -853,7 +860,7 @@ export default class ChartComponent extends Component {
       } else {
         let allWidth = start;
         const groupsData = [];
-        const newLegendData = cloneDeep(legendData);
+        const newLegendData = (0, _lodashEs.cloneDeep)(legendData);
         let lastIndex = 0;
         legendData.forEach((item, index) => {
           const virtualLegend = this.chart.append('g').attr('opacity', 0);
@@ -950,13 +957,13 @@ export default class ChartComponent extends Component {
     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 ? void 0 : option.id) {
+        if (option !== null && option !== void 0 && option.id) {
           item['group_name_id'] = option.id;
           item['oldName'] = item.name;
           item.name = item['group_name_id'];
         }
       });
-      BaseUtils.sortCharts(result, groupColumn, 'name');
+      _utils.BaseUtils.sortCharts(result, groupColumn, 'name');
       result.forEach(item => {
         item.name = item['oldName'];
       });
@@ -969,8 +976,8 @@ export default class ChartComponent extends Component {
       const {
         type
       } = config;
-      if (type === CHART_TYPE.SCATTER) return 4;
-      if (type === CHART_TYPE.MIRROR) return 0;
+      if (type === _constants.CHART_TYPE.SCATTER) return 4;
+      if (type === _constants.CHART_TYPE.MIRROR) return 0;
       return 3;
     };
     this.calcEquilateralTriangle = (cx, cy, size, direction) => {
@@ -984,12 +991,12 @@ export default class ChartComponent extends 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 = BaseUtils.sortDataByGroupName(cloneDeep(data), groupName, groupColumn, chart);
+      const newData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), groupName, groupColumn, chart);
       let currentIdx = 0;
-      const defaultColors = CHART_STYLE_COLORS;
+      const defaultColors = _constants.CHART_STYLE_COLORS;
       let colors = defaultColors;
       if (chartColorTheme) {
-        colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
+        colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
       }
       const colorMap = newData.reduce((acc, cur) => {
         const key = cur[groupName] || cur[groupName] === 0 ? cur[groupName] : '';
@@ -1089,13 +1096,13 @@ export default class ChartComponent extends Component {
                 formatted_value: item.formatted_value + ''
               });
             }
-            if (type === CHART_TYPE.WORLD_MAP_BUBBLE) {
+            if (type === _constants.CHART_TYPE.WORLD_MAP_BUBBLE) {
               sum += item.value;
             }
           }
         }
       });
-      if (type === CHART_TYPE.WORLD_MAP_BUBBLE) {
+      if (type === _constants.CHART_TYPE.WORLD_MAP_BUBBLE) {
         statisticNewData.sum = sum;
       }
       return statisticNewData;
@@ -1104,10 +1111,10 @@ export default class ChartComponent extends Component {
       let themeColors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       let theme = arguments.length > 1 ? arguments[1] : undefined;
       // dark->custom->light
-      if (theme === THEME_NAME_MAP.DARK) {
-        themeColors = CHART_THEME_COLOR.dark;
+      if (theme === _constants.THEME_NAME_MAP.DARK) {
+        themeColors = _constants.CHART_THEME_COLOR.dark;
       }
-      return themeColors || CHART_THEME_COLOR[THEME_NAME_MAP.LIGHT];
+      return themeColors || _constants.CHART_THEME_COLOR[_constants.THEME_NAME_MAP.LIGHT];
     };
     this.setDispalyGoalLine = (goal_label, goal_value, insertPadding, yScale) => {
       const {
@@ -1128,7 +1135,7 @@ export default class ChartComponent extends Component {
         label_font_size,
         text
       } = _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 => {
+      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 => {
         if (!g.node()) return;
         const {
           width
@@ -1147,7 +1154,7 @@ export default class ChartComponent extends Component {
         label_font_size,
         text
       } = _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 => {
+      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 => {
         if (g.node()) {
           var _g$node;
           const {
@@ -1169,7 +1176,7 @@ export default class ChartComponent extends Component {
         label_font_size,
         text
       } = _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 => {
+      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 => {
         if (!g.node()) return;
         const {
           width,
@@ -1177,7 +1184,7 @@ export default class ChartComponent extends Component {
         } = g.node().getBoundingClientRect();
         const translateX = Number(x) + xWidth / 2 - width / 2;
         let translateY = Number(y) + Number(yheight / 2) + height / 2;
-        if (chartType === CHART_TYPE.BAR_STACK) {
+        if (chartType === _constants.CHART_TYPE.BAR_STACK) {
           translateY = translateY;
         }
         g.attr('transform', `translate(${translateX}, ${translateY})`);
@@ -1189,7 +1196,7 @@ export default class ChartComponent extends Component {
           const rects = Array.from(g.children).filter(item => item.tagName !== 'text');
           rects.forEach(item => {
             d3.select(item).transition().duration(this.interactionDuration).attr('opacity', 1);
-            if ([CHART_TYPE.PIE, CHART_TYPE.RING].includes(chartType)) {
+            if ([_constants.CHART_TYPE.PIE, _constants.CHART_TYPE.RING].includes(chartType)) {
               d3.select(item).attr('stroke-width', 2);
             }
           });
@@ -1202,7 +1209,7 @@ export default class ChartComponent extends Component {
             if (item.getAttribute('data-groupName') !== curGroupName) {
               d3.selectAll([item]).transition().duration(this.interactionDuration).attr('opacity', 0.3);
             } else {
-              if ([CHART_TYPE.PIE, CHART_TYPE.RING].includes(chartType)) {
+              if ([_constants.CHART_TYPE.PIE, _constants.CHART_TYPE.RING].includes(chartType)) {
                 d3.select(item).attr('stroke-width', 0.5);
               }
             }
@@ -1468,13 +1475,13 @@ export default class ChartComponent extends Component {
       }).filter(Boolean).sort((a, b) => a.top - b.top);
       const keptTicks = [];
       let prevBottom = -Infinity;
-      visibleTicks.forEach(_ref10 => {
+      visibleTicks.forEach(_ref0 => {
         let {
           tick,
           index,
           top,
           bottom
-        } = _ref10;
+        } = _ref0;
         const shouldKeepFirstTick = index === 0;
         const shouldKeepLastTick = index === ticks.length - 1;
         const hasEnoughSpace = top > prevBottom + this.yAxisTickLabelGap;
@@ -1676,11 +1683,11 @@ 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 => {
+    this.setLegendForHeatMap = _ref1 => {
       let {
         exampleColors,
         themeColors
-      } = _ref11;
+      } = _ref1;
       const legendOffsetY = 3;
       const legendItemTextWidth = 32;
       const legendItemWidth = 12;
@@ -1688,13 +1695,13 @@ export default class ChartComponent extends Component {
       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'));
+      legendWrapper.append('text').attr('y', 10).attr('fill', themeColors.textColor).attr('font-size', 12).attr('font-weight', 'bold').text(_intl.default.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('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);
       });
-      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'));
+      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'));
     };
-    this.setContinuousLegend = _ref12 => {
+    this.setContinuousLegend = _ref10 => {
       var _this$chart$node2;
       let {
         previewType,
@@ -1705,7 +1712,7 @@ export default class ChartComponent extends Component {
         legendTextRange,
         bubbleColor,
         type
-      } = _ref12;
+      } = _ref10;
       const {
         width: chartWidth,
         height: chartHeight,
@@ -1715,7 +1722,7 @@ export default class ChartComponent extends Component {
       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)) {
+      if (![_constants.CHART_TYPE.MAP_BUBBLE, _constants.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]}`);
@@ -1723,8 +1730,8 @@ export default class ChartComponent extends Component {
         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('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-${(_this$chart$node2 = this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id}-${previewType})`).call(g => {
+        if ([_constants.CHART_TYPE.MAP_BUBBLE, _constants.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');
         }
       });
@@ -1767,4 +1774,5 @@ export default class ChartComponent extends Component {
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize);
   }
-}
+}
+exports.default = ChartComponent;