dtable-statistic 4.3.3 → 4.3.4

package/es/stat-view/horizontal-bar-chart.js

@@ -1,32 +1,25 @@
-"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 _dataSet = _interopRequireDefault(require("@antv/data-set"));
-var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _dtableStore = require("dtable-store");
-var _baseChart = _interopRequireDefault(require("./base-chart"));
-var _customG = require("../custom-g2");
-var _commonUtils = require("../utils/common-utils");
-var _basicChartUtils = require("../utils/basic-chart-utils");
-var _colorUtils = require("../utils/color-utils");
-var _constants = require("../constants");
+import React from 'react';
+import PropTypes from 'prop-types';
+import DataSet from '@antv/data-set';
+import intl from 'react-intl-universal';
+import { TableUtils } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart } from '../custom-g2';
+import { getCurrentTheme, sortDataByGroupSum } from '../utils/common-utils';
+import { getChartGroups } from '../utils/basic-chart-utils';
+import { getConvertedColorRules, getLabelColor } from '../utils/color-utils';
+import { DATA_SORT_TYPE, DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_CONFIG_CHANGED, STATISTICS_COUNT_SHOW, STAT_TYPE, SUMMARY_TYPE, TITLE_AMOUNT, TYPE_COLOR_USING, USEABLE_COLOR_TYPES } from '../constants';
 const propTypes = {
-  isPreview: _propTypes.default.bool,
-  isEdit: _propTypes.default.bool,
-  colorThemeName: _propTypes.default.string,
-  statItem: _propTypes.default.object,
-  chartCalculator: _propTypes.default.object,
-  eventBus: _propTypes.default.object,
-  getTableById: _propTypes.default.func,
-  toggleStatisticRecordsDialog: _propTypes.default.func
+  isPreview: PropTypes.bool,
+  isEdit: PropTypes.bool,
+  colorThemeName: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  eventBus: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
 };
-class HorizontalBarChart extends _baseChart.default {
+class HorizontalBarChart extends BaseChart {
   constructor(props) {
     super(props);
     this.drawChart = originalData => {
@@ -46,26 +39,26 @@ class HorizontalBarChart extends _baseChart.default {
       } = statItem;
       this.initChartHandler();
       let data = originalData;
-      if (type === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR && sort_type) {
+      if (type === STAT_TYPE.STACKED_HORIZONTAL_BAR && sort_type) {
         let convertedSortType = sort_type;
-        if (sort_type === _constants.DATA_SORT_TYPE.ASCENDING) {
-          convertedSortType = _constants.DATA_SORT_TYPE.DESCENDING;
-        } else if (sort_type === _constants.DATA_SORT_TYPE.DESCENDING) {
-          convertedSortType = _constants.DATA_SORT_TYPE.ASCENDING;
+        if (sort_type === DATA_SORT_TYPE.ASCENDING) {
+          convertedSortType = DATA_SORT_TYPE.DESCENDING;
+        } else if (sort_type === DATA_SORT_TYPE.DESCENDING) {
+          convertedSortType = DATA_SORT_TYPE.ASCENDING;
         }
-        data = (0, _commonUtils.sortDataByGroupSum)(originalData, convertedSortType);
+        data = sortDataByGroupSum(originalData, convertedSortType);
       }
       this.chart.on('interval:click', e => {
         this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
-      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
+      const currentTheme = getCurrentTheme(colorThemeName);
       const isGroup = column_groupby_column_key || column_groupby_multiple_numeric_column;
       let chartBarColor = '#2a67d1';
-      let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-      if (horizontal_axis_summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
+      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
         const table = getTableById(table_id);
-        const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, horizontal_axis_column_key) || {};
-        summaryColumnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+        const summaryColumn = TableUtils.getTableColumnByKey(table, horizontal_axis_column_key) || {};
+        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       if (isGroup) {
         chartBarColor = 'group_name';
@@ -85,7 +78,7 @@ class HorizontalBarChart extends _baseChart.default {
       const {
         width
       } = this.chart.coordinateBBox;
-      const chartData = isGroup ? (0, _basicChartUtils.getChartGroups)(data) : data;
+      const chartData = isGroup ? getChartGroups(data) : data;
       const ticks = this.getTicks(chartData, width);
       if (ticks.length > 0) {
         this.chart.scale('name', {
@@ -130,7 +123,7 @@ class HorizontalBarChart extends _baseChart.default {
         config.height = 400;
         config.width = 700;
       }
-      this.chart = new _customG.Chart(config);
+      this.chart = new Chart(config);
     };
     this.handleAutoRange = (data, summaryColumnData) => {
       // set scale options for 'value'
@@ -185,7 +178,7 @@ class HorizontalBarChart extends _baseChart.default {
         color_option,
         horizontal_axis_label_color_rules
       } = statItem;
-      const colorRules = color_option === _constants.TYPE_COLOR_USING.USE_RULES && horizontal_axis_label_color_rules && (0, _colorUtils.getConvertedColorRules)(horizontal_axis_label_color_rules);
+      const colorRules = color_option === TYPE_COLOR_USING.USE_RULES && horizontal_axis_label_color_rules && getConvertedColorRules(horizontal_axis_label_color_rules);
       this.chart.interval().label(display_data ? 'formatted_value' : false, {
         offset: 5,
         position: () => {
@@ -198,8 +191,8 @@ class HorizontalBarChart extends _baseChart.default {
       }).position('name*value').tooltip('name*formatted_value', (name, value) => {
         return {
           value,
-          title: horizontal_axis_summary_type === 'count' ? _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[horizontal_axis_summary_method]),
-          name: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name
+          title: horizontal_axis_summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[horizontal_axis_summary_method]),
+          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
       }).state({
         active: {
@@ -208,7 +201,7 @@ class HorizontalBarChart extends _baseChart.default {
           }
         }
       }).style('value', value => {
-        const color = (0, _colorUtils.getLabelColor)({
+        const color = getLabelColor({
           chart: statItem,
           colorRules,
           value
@@ -250,7 +243,7 @@ class HorizontalBarChart extends _baseChart.default {
         }
       };
       let displayData = display_data;
-      if (statItem.type === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR) {
+      if (statItem.type === STAT_TYPE.STACKED_HORIZONTAL_BAR) {
         const {
           display_each_block_data
         } = statItem;
@@ -260,7 +253,7 @@ class HorizontalBarChart extends _baseChart.default {
         }
 
         // get the total value of each stack
-        const dv = new _dataSet.default.DataView().source(data);
+        const dv = new DataSet.DataView().source(data);
         dv.transform({
           type: 'aggregate',
           fields: ['value'],
@@ -285,7 +278,7 @@ class HorizontalBarChart extends _baseChart.default {
       let groupColorCallback = currentTheme && currentTheme.colors;
       // when the 'Group by' column is a 'single-select' column,
       // and the user chooses to use the colors from the column.
-      if (color_option === _constants.USEABLE_COLOR_TYPES[1]) {
+      if (color_option === USEABLE_COLOR_TYPES[1]) {
         const groupColorMapping = {};
         data.forEach(item => {
           if (!groupColorMapping[item.group_name]) {
@@ -299,13 +292,13 @@ class HorizontalBarChart extends _baseChart.default {
       this.chart.interval().label(displayData ? 'formatted_value' : false, labelCfg).position('name*value').color('group_name', groupColorCallback).tooltip('name*formatted_value*group_name', (name, value, group_name) => {
         return {
           value,
-          title: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name,
-          name: !group_name && typeof group_name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : group_name
+          title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
+          name: !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name
         };
       }).adjust([{
         reverseOrder: true,
         // for 'stack'. It only work for 'stack'.
-        type: statItem.type === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR ? 'stack' : 'dodge'
+        type: statItem.type === STAT_TYPE.STACKED_HORIZONTAL_BAR ? 'stack' : 'dodge'
       }]).state({
         active: {
           style: {
@@ -363,7 +356,7 @@ class HorizontalBarChart extends _baseChart.default {
             fill: themeColors.textColor
           },
           formatter: name => {
-            return !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name;
+            return !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
           }
         }
       });
@@ -404,9 +397,9 @@ class HorizontalBarChart extends _baseChart.default {
         div.id = horizontalAxisID;
         div.className = 'statistic-chart-axis-label';
         if (horizontal_axis_summary_type === 'count') {
-          div.innerHTML = _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT);
+          div.innerHTML = intl.get(TITLE_AMOUNT);
         } else {
-          const column = _dtableStore.TableUtils.getTableColumnByKey(table, horizontal_axis_column_key) || {};
+          const column = TableUtils.getTableColumnByKey(table, horizontal_axis_column_key) || {};
           div.innerHTML = column.name || '';
         }
         div.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(horizontal_axis_label_position, "; bottom: -20px"));
@@ -424,9 +417,9 @@ class HorizontalBarChart extends _baseChart.default {
         const div = document.createElement('div');
         div.id = verticalAxisID;
         div.className = 'statistic-chart-axis-label';
-        const column = _dtableStore.TableUtils.getTableColumnByKey(table, vertical_axis_column_key);
+        const column = TableUtils.getTableColumnByKey(table, vertical_axis_column_key);
         div.innerHTML = "".concat(column ? column.name : '');
-        if (type === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR) {
+        if (type === STAT_TYPE.STACKED_HORIZONTAL_BAR) {
           div.innerHTML = title_name;
         }
         const containerHeight = chartContainer.offsetHeight;
@@ -463,7 +456,7 @@ class HorizontalBarChart extends _baseChart.default {
       chartCalculator,
       eventBus
     } = this.props;
-    this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
+    this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, newStatItem => {
       this.renderAxisLabel(newStatItem);
     });
     chartCalculator.calculate(statItem).then(data => {
@@ -549,7 +542,7 @@ class HorizontalBarChart extends _baseChart.default {
       show_horizontal_axis_label,
       show_vertical_axis_label
     } = statItem;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
       style: {
         padding: show_vertical_axis_label || show_horizontal_axis_label ? 30 : 20
@@ -559,4 +552,4 @@ class HorizontalBarChart extends _baseChart.default {
   }
 }
 HorizontalBarChart.propTypes = propTypes;
-var _default = exports.default = HorizontalBarChart;
+export default HorizontalBarChart;

package/es/stat-view/index.js

@@ -1,33 +1,26 @@
-"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 _pivotTable = _interopRequireDefault(require("./pivot-table"));
-var _barChart = _interopRequireDefault(require("./bar-chart"));
-var _compareChart = _interopRequireDefault(require("./compare-chart"));
-var _horizontalBarChart = _interopRequireDefault(require("./horizontal-bar-chart"));
-var _completenessChart = _interopRequireDefault(require("./completeness-chart"));
-var _lineChart = _interopRequireDefault(require("./line-chart"));
-var _areaChart = _interopRequireDefault(require("./area-chart"));
-var _pieChart = _interopRequireDefault(require("./pie-chart"));
-var _ringChart = _interopRequireDefault(require("./ring-chart"));
-var _scatterChart = _interopRequireDefault(require("./scatter-chart"));
-var _combinationChart = _interopRequireDefault(require("./combination-chart"));
-var _map = _interopRequireDefault(require("./map"));
-var _worldMap = _interopRequireDefault(require("./world-map"));
-var _heatMap = _interopRequireDefault(require("./heat-map"));
-var _mirror = _interopRequireDefault(require("./mirror"));
-var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
-var _trendChart = _interopRequireDefault(require("./trend-chart"));
-var _dashboardChart = _interopRequireDefault(require("./dashboard-chart"));
-var _treemapChart = _interopRequireDefault(require("./treemap-chart"));
-var _customBar = _interopRequireDefault(require("./custom-bar"));
-var _constants = require("../constants");
-class StatView extends _react.default.Component {
+import React from 'react';
+import PivotTable from './pivot-table';
+import BarChart from './bar-chart';
+import CompareChart from './compare-chart';
+import HorizontalBarChart from './horizontal-bar-chart';
+import CompletenessChart from './completeness-chart';
+import LineChart from './line-chart';
+import AreaChart from './area-chart';
+import PieChart from './pie-chart';
+import RingChart from './ring-chart';
+import ScatterChart from './scatter-chart';
+import CombinationChart from './combination-chart';
+import Map from './map';
+import WorldMap from './world-map';
+import HeatMap from './heat-map';
+import Mirror from './mirror';
+import BasicNumberCard from './basic-number-card';
+import TrendChart from './trend-chart';
+import DashboardChart from './dashboard-chart';
+import TreeMap from './treemap-chart';
+import CustomBar from './custom-bar';
+import { STAT_TYPE } from '../constants';
+class StatView extends React.Component {
   constructor() {
     super(...arguments);
     this.getStatData = () => {
@@ -67,98 +60,98 @@ class StatView extends _react.default.Component {
       }
     };
     switch (statItem.type) {
-      case _constants.STAT_TYPE.BAR:
-      case _constants.STAT_TYPE.BAR_GROUP:
-      case _constants.STAT_TYPE.BAR_STACK:
+      case STAT_TYPE.BAR:
+      case STAT_TYPE.BAR_GROUP:
+      case STAT_TYPE.BAR_STACK:
         {
-          return /*#__PURE__*/_react.default.createElement(_barChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(BarChart, viewProps);
         }
-      case _constants.STAT_TYPE.COMPARE_BAR:
+      case STAT_TYPE.COMPARE_BAR:
         {
-          return /*#__PURE__*/_react.default.createElement(_compareChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(CompareChart, viewProps);
         }
-      case _constants.STAT_TYPE.HORIZONTAL_BAR:
-      case _constants.STAT_TYPE.HORIZONTAL_GROUP_BAR:
-      case _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR:
+      case STAT_TYPE.HORIZONTAL_BAR:
+      case STAT_TYPE.HORIZONTAL_GROUP_BAR:
+      case STAT_TYPE.STACKED_HORIZONTAL_BAR:
         {
-          return /*#__PURE__*/_react.default.createElement(_horizontalBarChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(HorizontalBarChart, viewProps);
         }
-      case _constants.STAT_TYPE.COMPLETENESS_CHART:
-      case _constants.STAT_TYPE.GROUP_COMPLETENESS_CHART:
+      case STAT_TYPE.COMPLETENESS_CHART:
+      case STAT_TYPE.GROUP_COMPLETENESS_CHART:
         {
-          return /*#__PURE__*/_react.default.createElement(_completenessChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(CompletenessChart, viewProps);
         }
-      case _constants.STAT_TYPE.LINE:
-      case _constants.STAT_TYPE.GROUP_LINE:
+      case STAT_TYPE.LINE:
+      case STAT_TYPE.GROUP_LINE:
         {
-          return /*#__PURE__*/_react.default.createElement(_lineChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(LineChart, viewProps);
         }
-      case _constants.STAT_TYPE.AREA_CHART:
-      case _constants.STAT_TYPE.AREA_GROUP_CHART:
+      case STAT_TYPE.AREA_CHART:
+      case STAT_TYPE.AREA_GROUP_CHART:
         {
-          return /*#__PURE__*/_react.default.createElement(_areaChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(AreaChart, viewProps);
         }
-      case _constants.STAT_TYPE.PIE:
+      case STAT_TYPE.PIE:
         {
-          return /*#__PURE__*/_react.default.createElement(_pieChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(PieChart, viewProps);
         }
-      case _constants.STAT_TYPE.RING:
+      case STAT_TYPE.RING:
         {
-          return /*#__PURE__*/_react.default.createElement(_ringChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(RingChart, viewProps);
         }
-      case _constants.STAT_TYPE.SCATTER:
+      case STAT_TYPE.SCATTER:
         {
-          return /*#__PURE__*/_react.default.createElement(_scatterChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(ScatterChart, viewProps);
         }
-      case _constants.STAT_TYPE.COMBINATION_CHART:
+      case STAT_TYPE.COMBINATION_CHART:
         {
-          return /*#__PURE__*/_react.default.createElement(_combinationChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(CombinationChart, viewProps);
         }
-      case _constants.STAT_TYPE.MAP:
-      case _constants.STAT_TYPE.MAP_BUBBLE:
+      case STAT_TYPE.MAP:
+      case STAT_TYPE.MAP_BUBBLE:
         {
           viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
-          return /*#__PURE__*/_react.default.createElement(_map.default, viewProps);
+          return /*#__PURE__*/React.createElement(Map, viewProps);
         }
-      case _constants.STAT_TYPE.WORLD_MAP:
-      case _constants.STAT_TYPE.WORLD_MAP_BUBBLE:
+      case STAT_TYPE.WORLD_MAP:
+      case STAT_TYPE.WORLD_MAP_BUBBLE:
         {
           viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
-          return /*#__PURE__*/_react.default.createElement(_worldMap.default, viewProps);
+          return /*#__PURE__*/React.createElement(WorldMap, viewProps);
         }
-      case _constants.STAT_TYPE.HEAT_MAP:
+      case STAT_TYPE.HEAT_MAP:
         {
           viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
-          return /*#__PURE__*/_react.default.createElement(_heatMap.default, viewProps);
+          return /*#__PURE__*/React.createElement(HeatMap, viewProps);
         }
-      case _constants.STAT_TYPE.MIRROR:
+      case STAT_TYPE.MIRROR:
         {
           viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
-          return /*#__PURE__*/_react.default.createElement(_mirror.default, viewProps);
+          return /*#__PURE__*/React.createElement(Mirror, viewProps);
         }
-      case _constants.STAT_TYPE.BASIC_NUMBER_CARD:
+      case STAT_TYPE.BASIC_NUMBER_CARD:
         {
-          return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, viewProps);
+          return /*#__PURE__*/React.createElement(BasicNumberCard, viewProps);
         }
-      case _constants.STAT_TYPE.TREND_CHART:
+      case STAT_TYPE.TREND_CHART:
         {
-          return /*#__PURE__*/_react.default.createElement(_trendChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(TrendChart, viewProps);
         }
-      case _constants.STAT_TYPE.DASHBOARD:
+      case STAT_TYPE.DASHBOARD:
         {
-          return /*#__PURE__*/_react.default.createElement(_dashboardChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(DashboardChart, viewProps);
         }
-      case _constants.STAT_TYPE.TREEMAP:
+      case STAT_TYPE.TREEMAP:
         {
-          return /*#__PURE__*/_react.default.createElement(_treemapChart.default, viewProps);
+          return /*#__PURE__*/React.createElement(TreeMap, viewProps);
         }
-      case _constants.STAT_TYPE.PIVOT_TABLE:
+      case STAT_TYPE.PIVOT_TABLE:
         {
-          return /*#__PURE__*/_react.default.createElement(_pivotTable.default, viewProps);
+          return /*#__PURE__*/React.createElement(PivotTable, viewProps);
         }
-      case _constants.STAT_TYPE.CUSTOM_BAR:
+      case STAT_TYPE.CUSTOM_BAR:
         {
-          return /*#__PURE__*/_react.default.createElement(_customBar.default, viewProps);
+          return /*#__PURE__*/React.createElement(CustomBar, viewProps);
         }
       default:
         {
@@ -172,4 +165,4 @@ StatView.defaultProps = {
   isEnlarge: false,
   isEdit: false
 };
-var _default = exports.default = StatView;
+export default StatView;

package/es/stat-view/line-chart.js

@@ -1,30 +1,23 @@
-"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 _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _dtableStore = require("dtable-store");
-var _baseChart = _interopRequireDefault(require("./base-chart"));
-var _customG = require("../custom-g2");
-var _commonUtils = require("../utils/common-utils");
-var _basicChartUtils = require("../utils/basic-chart-utils");
-var _constants = require("../constants");
+import React from 'react';
+import PropTypes from 'prop-types';
+import intl from 'react-intl-universal';
+import { TableUtils } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart } from '../custom-g2';
+import { getCurrentTheme } from '../utils/common-utils';
+import { getChartGroups } from '../utils/basic-chart-utils';
+import { DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_CONFIG_CHANGED, STATISTICS_COUNT_SHOW, SUMMARY_TYPE, TITLE_AMOUNT, USEABLE_COLOR_TYPES } from '../constants';
 const propTypes = {
-  isPreview: _propTypes.default.bool,
-  isEdit: _propTypes.default.bool,
-  colorThemeName: _propTypes.default.string,
-  statItem: _propTypes.default.object,
-  chartCalculator: _propTypes.default.object,
-  eventBus: _propTypes.default.object,
-  getTableById: _propTypes.default.func,
-  toggleStatisticRecordsDialog: _propTypes.default.func
+  isPreview: PropTypes.bool,
+  isEdit: PropTypes.bool,
+  colorThemeName: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  eventBus: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
 };
-class LineChart extends _baseChart.default {
+class LineChart extends BaseChart {
   constructor(props) {
     super(props);
     this.drawChart = data => {
@@ -51,19 +44,19 @@ class LineChart extends _baseChart.default {
       });
       let summaryType = summary_type;
       let summaryMethod = summary_method;
-      let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       if (!summaryType && y_axis_summary_type) {
         summaryType = y_axis_summary_type;
       }
       if (!summaryMethod && y_axis_summary_method) {
         summaryMethod = y_axis_summary_method;
       }
-      if (y_axis_summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
+      if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
         const table = getTableById(table_id);
-        const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
-        summaryColumnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+        const summaryColumn = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
+        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
-      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
+      const currentTheme = getCurrentTheme(colorThemeName);
       const chartBarColor = currentTheme && currentTheme.colors[0] || '#2a67d1';
       const isGroup = column_groupby_column_key || column_groupby_multiple_numeric_column;
       if (isGroup) {
@@ -80,7 +73,7 @@ class LineChart extends _baseChart.default {
       const {
         width
       } = this.chart.coordinateBBox;
-      const chartData = isGroup ? (0, _basicChartUtils.getChartGroups)(data) : data;
+      const chartData = isGroup ? getChartGroups(data) : data;
       const ticks = this.getTicks(chartData, width);
       const labelCount = this.getLabelCount(ticks, chartData);
       if (ticks.length > 0) {
@@ -128,7 +121,7 @@ class LineChart extends _baseChart.default {
         config.height = 400;
         config.width = 700;
       }
-      this.chart = new _customG.Chart(config);
+      this.chart = new Chart(config);
     };
     this.handleAutoRange = (data, summaryColumnData, summaryMethod) => {
       const {
@@ -178,7 +171,7 @@ class LineChart extends _baseChart.default {
       this.chart.line().position('name*value').color(chartBarColor).tooltip('name*formatted_value', (name, value) => {
         return {
           value,
-          name: summaryType === 'count' ? _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[summaryMethod])
+          name: summaryType === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summaryMethod])
         };
       });
       this.chart.point().label(display_data ? 'value' : false, {
@@ -192,8 +185,8 @@ class LineChart extends _baseChart.default {
       }).tooltip('name*formatted_value', (name, value) => {
         return {
           value,
-          name: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name,
-          title: summaryType === 'count' ? _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[summaryMethod])
+          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
+          title: summaryType === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summaryMethod])
         };
       });
     };
@@ -210,7 +203,7 @@ class LineChart extends _baseChart.default {
       let groupColorCallback = currentTheme && currentTheme.colors;
       // when the 'Group by' column is a 'single-select' column,
       // and the user chooses to use the colors from the column.
-      if (color_option === _constants.USEABLE_COLOR_TYPES[1]) {
+      if (color_option === USEABLE_COLOR_TYPES[1]) {
         const groupColorMapping = {};
         data.forEach(item => {
           if (!groupColorMapping[item.group_name]) {
@@ -235,8 +228,8 @@ class LineChart extends _baseChart.default {
       }).position('name*value').size(3).color('group_name', groupColorCallback).tooltip('name*formatted_value*group_name', (name, value, group_name) => {
         return {
           value,
-          title: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name,
-          name: !group_name && typeof group_name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : group_name
+          title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
+          name: !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name
         };
       }).shape('circle').style({
         lineWidth: 1,
@@ -309,7 +302,7 @@ class LineChart extends _baseChart.default {
             fill: themeColors.textColor
           },
           formatter: name => {
-            return !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name;
+            return !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
           }
         },
         pageNavigator: {
@@ -358,7 +351,7 @@ class LineChart extends _baseChart.default {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'statistic-chart-axis-label';
-        const column = _dtableStore.TableUtils.getTableColumnByKey(table, x_axis_column_key);
+        const column = TableUtils.getTableColumnByKey(table, x_axis_column_key);
         div.innerHTML = "".concat(column ? column.name : '');
         div.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
         chartContainer.appendChild(div);
@@ -376,10 +369,10 @@ class LineChart extends _baseChart.default {
         const div = document.createElement('div');
         div.id = yAxisID;
         div.className = 'statistic-chart-axis-label';
-        if (y_axis_summary_type === _constants.SUMMARY_TYPE.COUNT) {
-          div.innerHTML = _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT);
+        if (y_axis_summary_type === SUMMARY_TYPE.COUNT) {
+          div.innerHTML = intl.get(TITLE_AMOUNT);
         } else {
-          const column = _dtableStore.TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
+          const column = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
           div.innerHTML = column.name || '';
         }
         const containerHeight = chartContainer.offsetHeight;
@@ -416,7 +409,7 @@ class LineChart extends _baseChart.default {
       chartCalculator,
       eventBus
     } = this.props;
-    this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
+    this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, newStatItem => {
       this.renderAxisLabel(newStatItem);
     });
     if (this.container) {
@@ -507,7 +500,7 @@ class LineChart extends _baseChart.default {
     const style = {
       padding: show_y_axis_label || show_x_axis_label ? 30 : 20
     };
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
       style: style,
       className: "statistic-chart-container"
@@ -515,4 +508,4 @@ class LineChart extends _baseChart.default {
   }
 }
 LineChart.propTypes = propTypes;
-var _default = exports.default = LineChart;
+export default LineChart;