dtable-statistic 4.3.1 → 4.3.3

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

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

package/es/stat-view/index.js

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