sea-chart 1.1.64 → 2.0.0

package/dist/view/wrapper/bar.js

@@ -1,13 +1,20 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { debounce } from 'lodash-es';
-import classNames from 'classnames';
-import { TYPE_COLOR_USING, CHART_STYLE_COLORS, CHART_THEME_COLOR } from '../../constants';
-import { BaseUtils, isFunction } from '../../utils';
-import { getLabelColor, getConvertedColorRules } from '../../utils/color-utils';
-import intl from '../../intl';
-import ChartComponent from './chart-component';
-class Bar extends ChartComponent {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodashEs = require("lodash-es");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../constants");
+var _utils = require("../../utils");
+var _colorUtils = require("../../utils/color-utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class Bar extends _chartComponent.default {
   constructor(props) {
     super(props);
     this.handleResize = () => {
@@ -38,7 +45,7 @@ class Bar extends ChartComponent {
       let {
         result: data
       } = this.props;
-      data = BaseUtils.formatEmptyName(data, '', intl.get('Empty'));
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
       this.loadData(data);
       this.draw(data);
@@ -56,7 +63,7 @@ class Bar extends ChartComponent {
         chartColorTheme,
         tables
       } = this.props;
-      const theme = CHART_THEME_COLOR[globalTheme];
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
         y_axis_summary_type,
         y_axis_summary_column_key,
@@ -78,11 +85,11 @@ class Bar extends ChartComponent {
       const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line
       const singleBarWidth = Math.round(chartWidth / (2 * data.length));
       const singleBarRadius = Math.min(singleBarWidth / 5, 10);
-      let chartBarColor = y_axis_label_color || CHART_STYLE_COLORS[0];
+      let chartBarColor = y_axis_label_color || _constants.CHART_STYLE_COLORS[0];
       if (chartColorTheme) {
-        chartBarColor = BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
+        chartBarColor = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
       }
-      const colorRules = color_option === TYPE_COLOR_USING.USE_RULES && y_axis_label_color_rules && getConvertedColorRules(y_axis_label_color_rules);
+      const colorRules = color_option === _constants.TYPE_COLOR_USING.USE_RULES && y_axis_label_color_rules && (0, _colorUtils.getConvertedColorRules)(y_axis_label_color_rules);
       const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
       this.drawLabels(data);
       // set Coord type
@@ -90,12 +97,12 @@ class Bar extends ChartComponent {
       this.autoAdjustDataOptions(chart, data, summaryColumn);
       this.chart.interval().label(y_axis_show_value ? 'value' : false, {
         style: {
-          fontSize: BaseUtils.getLabelFontSize(label_font_size),
+          fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
           fill: theme.labelColor,
           ...this.labelStroke
         }
       }).position('name*value').size(singleBarWidth).color('value', value => {
-        const color = getLabelColor({
+        const color = (0, _colorUtils.getLabelColor)({
           chart: chart.config,
           colorRules,
           value
@@ -104,7 +111,7 @@ class Bar extends ChartComponent {
       }).tooltip('name*value', (name, value) => {
         return {
           title,
-          value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
           name
         };
       }).state({
@@ -123,7 +130,7 @@ class Bar extends ChartComponent {
       }
       this.chart.legend(false);
       this.setToolTip();
-      isFunction(customRender) && customRender(this.chart);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);
       this.chart.interaction('element-highlight');
@@ -133,12 +140,12 @@ class Bar extends ChartComponent {
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = debounce(this.handleResize, 300);
+    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
     window.addEventListener('resize', this.debouncedHandleResize);
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
-    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
       var _this$chart;
       ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
@@ -155,8 +162,8 @@ class Bar extends ChartComponent {
     const {
       chart
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames('sea-chart-container', {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('sea-chart-container', {
         'show-x-axis-label': this.isShowXAxisLabel(chart),
         'show-y-axis-label': this.isShowYAxisLabel(chart)
       }),
@@ -165,16 +172,16 @@ class Bar extends ChartComponent {
   }
 }
 Bar.propTypes = {
-  canvasStyle: PropTypes.object,
-  chart: PropTypes.object,
-  groupbyColumn: PropTypes.object,
-  columnGroupbyColumn: PropTypes.object,
-  summaryColumn: PropTypes.object,
-  result: PropTypes.array,
-  tables: PropTypes.array,
-  globalTheme: PropTypes.string,
-  chartColorTheme: PropTypes.string,
-  toggleRecords: PropTypes.func,
-  customRender: PropTypes.func
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _propTypes.default.object,
+  columnGroupbyColumn: _propTypes.default.object,
+  summaryColumn: _propTypes.default.object,
+  result: _propTypes.default.array,
+  tables: _propTypes.default.array,
+  globalTheme: _propTypes.default.string,
+  chartColorTheme: _propTypes.default.string,
+  toggleRecords: _propTypes.default.func,
+  customRender: _propTypes.default.func
 };
-export default Bar;
+var _default = exports.default = Bar;

package/dist/view/wrapper/basic-number-card.js

@@ -1,9 +1,17 @@
-import React, { Component } from 'react';
-import { isNumber } from 'dtable-utils';
-import { BaseUtils } from '../../utils';
-import intl from '../../intl';
-import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_THEME_COLOR } from '../../constants';
-class BasicNumericCard 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 _dtableUtils = require("dtable-utils");
+var _utils = require("../../utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _constants = require("../../constants");
+class BasicNumericCard extends _react.Component {
   constructor(props) {
     super(props);
     this.setCurrentLineHeight = () => {
@@ -17,7 +25,7 @@ class BasicNumericCard extends Component {
       const currentLineHeight = parseFloat(computedStyle.lineHeight);
       const currentLabelHeight = parseFloat(computedStyle.height);
       if (prevLineHeight === currentLineHeight && prevLabelHeight === currentLabelHeight) return;
-      if (isNumber(currentLineHeight) && isNumber(currentLabelHeight)) {
+      if ((0, _dtableUtils.isNumber)(currentLineHeight) && (0, _dtableUtils.isNumber)(currentLabelHeight)) {
         this.setState({
           currentLineHeight,
           currentLabelHeight
@@ -25,7 +33,7 @@ class BasicNumericCard extends Component {
       }
     };
     this.formatData = data => {
-      if (!data && data !== 0) return intl.get(EMPTY_NAME);
+      if (!data && data !== 0) return _intl.default.get(_constants.EMPTY_NAME);
       const {
         chart,
         summaryColumn
@@ -35,8 +43,8 @@ class BasicNumericCard extends Component {
         summary_method
       } = chart.config;
       // COUNT / SUMMARIZE_A_FIELD
-      if (summary_type !== BASIC_NUMBER_CARD_CALCULATION_METHOD) {
-        const formattedContent = BaseUtils.getSummaryValueDisplayString(summaryColumn, data, summary_method);
+      if (summary_type !== _constants.BASIC_NUMBER_CARD_CALCULATION_METHOD) {
+        const formattedContent = _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, data, summary_method);
         return formattedContent;
       }
       let string = data + '';
@@ -82,7 +90,7 @@ class BasicNumericCard extends Component {
       chart,
       result
     } = this.props;
-    const theme = CHART_THEME_COLOR[globalTheme];
+    const theme = _constants.CHART_THEME_COLOR[globalTheme];
     const {
       config
     } = chart;
@@ -100,20 +108,20 @@ class BasicNumericCard extends Component {
     } = config;
     let content = null;
     if (summary_method === 'Distinct_values') {
-      content = isNumber(result) ? result : 0;
+      content = (0, _dtableUtils.isNumber)(result) ? result : 0;
     } else {
       content = this.formatData(result);
     }
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: "sea-chart-container plugin-number-card"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
         color: theme.cardColor,
         width: '100%',
         height: '100%',
         position: 'relative'
       }
-    }, /*#__PURE__*/React.createElement("p", {
+    }, /*#__PURE__*/_react.default.createElement("p", {
       style: {
         position: 'absolute',
         width: '100%',
@@ -125,7 +133,7 @@ class BasicNumericCard extends Component {
         fontWeight: "".concat(font_weight),
         color: "".concat(font_color)
       }
-    }, content), /*#__PURE__*/React.createElement("p", {
+    }, content), /*#__PURE__*/_react.default.createElement("p", {
       ref: ref => this.labelRef = ref,
       style: {
         position: 'absolute',
@@ -146,4 +154,4 @@ class BasicNumericCard extends Component {
     }, name)));
   }
 }
-export default BasicNumericCard;
+var _default = exports.default = BasicNumericCard;

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

@@ -1,23 +1,33 @@
-import { Component } from 'react';
-import { getTableById, getTableColumnByKey } from 'dtable-utils';
-import { cloneDeep, debounce } from 'lodash-es';
-import { Chart } from '../../utils/custom-g2';
-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 intl from '../../intl';
-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 _dtableUtils = require("dtable-utils");
+var d3 = _interopRequireWildcard(require("d3"));
+var _lodashEs = require("lodash-es");
+var _customG = require("../../utils/custom-g2");
+var _utils = require("../../utils");
+var _constants = require("../../constants");
+var _intl = _interopRequireDefault(require("../../intl"));
+require("../../assets/css/sea-chart-d3-tooltip.css");
+class ChartComponent extends _react.Component {
   constructor(props) {
     var _this;
     super(props);
     _this = this;
     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)(() => {
       var _this$chart;
       if (!this.createChart || !this.drawChart) return;
       ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
@@ -28,11 +38,11 @@ export default class ChartComponent extends Component {
       }
     }, 300);
     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) => {
@@ -55,7 +65,16 @@ export default class ChartComponent extends Component {
       if (appendPadding) {
         config.appendPadding = appendPadding;
       }
-      this.chart = new Chart(config);
+      this.chart = new _customG.Chart(config);
+    };
+    this.initD3Chart = container => {
+      const {
+        width,
+        height
+      } = container.getBoundingClientRect();
+      this.chart = d3.create('svg').attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
+      this.container.appendChild(this.chart.node());
+      this.chartBoundingClientRect = this.chart.node().getBoundingClientRect();
     };
     this.loadData = data => {
       this.chart.data(data, {
@@ -84,7 +103,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 {
@@ -138,13 +157,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;
@@ -152,13 +171,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');
@@ -206,7 +225,7 @@ export default class ChartComponent extends Component {
         });
       }
     };
-    this.renderAxisLabel = (chart, tables) => {
+    this.renderAxisLabel = (chart, tables, container) => {
       var _this$chart2;
       if (!this.chart || !chart) return;
       let {
@@ -227,20 +246,20 @@ 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 table = (0, _dtableUtils.getTableById)(tables, table_id);
       const autoPadding = ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) || {
         bottom: 0
       };
       let textColor;
-      this.globalTheme === THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
+      this.globalTheme === _constants.THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
       const xAxisID = "chart-x-axis-label_".concat(chart.id);
-      const chartContainer = this.chart.getCanvas().get('container');
+      const chartContainer = container || this.chart.getCanvas().get('container');
       const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector("#".concat(xAxisID));
       if (!xLabel && x_axis_show_label) {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'chart-axis-label';
-        const column = getTableColumnByKey(table, x_axis_column_key);
+        const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
         div.innerHTML = "".concat(column ? column.name : '');
         div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
         chartContainer.appendChild(div);
@@ -257,27 +276,27 @@ export default class ChartComponent extends Component {
         const div = document.createElement('div');
         div.id = yAxisID;
         div.className = 'chart-axis-label';
-        if (y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = intl.get('Amount');
+        if (y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
+          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 || '';
           }
         }
         const containerHeight = chartContainer.offsetHeight;
         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:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
         chartContainer.appendChild(div);
       }
       if (yLabel && y_axis_show_label) {
         const containerHeight = chartContainer.offsetHeight;
         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:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
       }
       if (yLabel && !y_axis_show_label) {
@@ -301,7 +320,7 @@ export default class ChartComponent extends Component {
       } = config;
       if (summaryColumn) {
         valueScaleOptions['formatter'] = value => {
-          return BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method);
+          return _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method);
         };
       }
       if (y_axis_auto_range === undefined || y_axis_auto_range) {
@@ -325,7 +344,7 @@ export default class ChartComponent extends Component {
     };
     // set axis label and tooltip
     this.setNameLabelAndTooltip = function () {
-      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : CHART_THEME_COLOR['light'];
+      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', {
@@ -352,10 +371,10 @@ export default class ChartComponent extends Component {
             const isString = typeof name === 'string';
             if (!isString) name = String(name);
             if (name === 'undefined') {
-              return intl.get(EMPTY_NAME);
+              return _intl.default.get(_constants.EMPTY_NAME);
             }
             if (name.length > 10) {
-              return formatXAxisLabel(name);
+              return (0, _utils.formatXAxisLabel)(name);
             }
             return name;
           }
@@ -364,7 +383,7 @@ export default class ChartComponent extends Component {
     };
     // set value label
     this.setValueLabel = function () {
-      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : CHART_THEME_COLOR['light'];
+      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.CHART_THEME_COLOR['light'];
       if (!_this.chart) return;
       _this.chart.axis('value', {
         label: {
@@ -390,12 +409,12 @@ export default class ChartComponent extends Component {
         label = "".concat(name.slice(0, 10), "...");
       }
       if (name === '' || name === 'undefined') {
-        label = intl.get(EMPTY_NAME);
+        label = _intl.default.get(_constants.EMPTY_NAME);
       }
       return label;
     };
     this.getLegendConfig = function () {
-      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : CHART_THEME_COLOR['light'];
+      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,
@@ -408,11 +427,11 @@ export default class ChartComponent extends Component {
           },
           formatter: name => {
             if (!name && typeof name !== 'number' || name.trim() === 'undefined' || name.trim() === 'null') {
-              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;
             }
           }
         },
@@ -466,7 +485,7 @@ export default class ChartComponent extends Component {
     };
     // set legend
     this.setLegend = function (legendName) {
-      let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : CHART_THEME_COLOR['light'];
+      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';
       if (!_this.chart) return;
       const basicLegendConfig = _this.getLegendConfig(theme, legendPosition);
@@ -474,7 +493,7 @@ export default class ChartComponent extends Component {
     };
     // theta is pie or ring chart
     this.setLegendForTheta = function (legendName) {
-      let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : CHART_THEME_COLOR['light'];
+      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;
@@ -487,10 +506,10 @@ export default class ChartComponent extends Component {
     };
     this.setColorMap = (data, chartColorTheme) => {
       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 = data.reduce((acc, cur) => {
         if (cur.group_name && !acc[cur.group_name]) {
@@ -579,11 +598,11 @@ export default class ChartComponent extends Component {
           const name = activeItem.data.name;
           return this.formatedDataByName[name].map(item => {
             return {
-              color: useSingleSelectColumnColor ? item.group_color : this.colorMap[item.group_name] || CHART_STYLE_COLORS[0],
+              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.get(EMPTY_NAME) : item.group_name,
+              name: !item.group_name && typeof item.group_name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : item.group_name,
               title: item.name,
-              value: BaseUtils.getSummaryValueDisplayString(summaryColumn, item.value, y_axis_summary_method)
+              value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, item.value, y_axis_summary_method)
             };
           });
         };
@@ -594,6 +613,47 @@ export default class ChartComponent extends Component {
       const settings = this.getToolTipSettings(isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor);
       this.chart.tooltip(settings);
     };
+    this.getToolTipContainer = (tooltipData, position) => {
+      const {
+        offsetX,
+        offsetY
+      } = position || {
+        offsetX: -9999,
+        offsetY: -9999
+      };
+      const {
+        title,
+        items
+      } = tooltipData || {
+        title: '',
+        items: []
+      };
+      const dom = /*#__PURE__*/_react.default.createElement("div", {
+        className: "sea-chart-d3-tooltip-container",
+        style: {
+          transform: "translate(".concat(offsetX + 50, "px, ").concat(offsetY, "px)")
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "sea-chart-d3-tooltip-title"
+      }, title), /*#__PURE__*/_react.default.createElement("ul", {
+        className: "sea-chart-d3-tooltip-list"
+      }, items.map((item, index) => {
+        return /*#__PURE__*/_react.default.createElement("li", {
+          className: "sea-chart-d3-tooltip-list-item",
+          key: index
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "sea-chart-d3-tooltip-marker",
+          style: {
+            backgroundColor: item.color
+          }
+        }), /*#__PURE__*/_react.default.createElement("span", {
+          className: "sea-chart-d3-tooltip-name"
+        }, item.name), /*#__PURE__*/_react.default.createElement("span", {
+          className: "sea-chart-d3-tooltip-value"
+        }, item.value));
+      })));
+      return dom;
+    };
     this.setToolTipForLine = () => {
       const settings = this.getToolTipSettings();
       const lineToolTipSettings = {
@@ -655,10 +715,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 = (goalLabel, goalValue, chartWidth) => {
       this.chart.annotation().line({
@@ -683,6 +743,7 @@ export default class ChartComponent extends Component {
       });
     };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
+    this.chartBoundingClientRect = null;
   }
   componentDidUpdate(prevProps) {
     if (prevProps.globalTheme !== this.props.globalTheme) {
@@ -695,4 +756,5 @@ export default class ChartComponent extends Component {
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize);
   }
-}
+}
+exports.default = ChartComponent;