dtable-statistic 4.0.7 → 4.0.9

package/es/stat-view/mirror.js

@@ -5,11 +5,10 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
-import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
-import { Loading } from '../components';
-import { DEFAULT_NUMBER_FORMAT_OBJECT, NO_STATISTIC_RESULTS, STATISTICS_COUNT_SHOW, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
+import { DEFAULT_NUMBER_FORMAT_OBJECT, STATISTICS_COUNT_SHOW, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
 var Mirror = /*#__PURE__*/function (_BaseChart) {
   _inherits(Mirror, _BaseChart);
   var _super = _createSuper(Mirror);
@@ -17,49 +16,94 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
     var _this;
     _classCallCheck(this, Mirror);
     _this = _super.call(this, props);
+    _this.destroyChart = function () {
+      _this.chart.destroy();
+      _this.chart = null;
+    };
     _this.drawChart = function (_ref) {
       var data = _ref.data,
         colorSet = _ref.colorSet;
       var _this$props = _this.props,
         getTableById = _this$props.getTableById,
-        isPreview = _this$props.isPreview,
-        statItem = _this$props.statItem,
-        isEnlarge = _this$props.isEnlarge,
-        theme = _this$props.theme;
+        statItem = _this$props.statItem;
       var table_id = statItem.table_id,
         summary_type = statItem.summary_type,
         summary_method = statItem.summary_method,
-        is_transpose = statItem.is_transpose,
         summary_column = statItem.summary_column;
-      if (isPreview) {
-        _this.chart = new Chart({
-          container: _this.container,
-          autoFit: true,
-          padding: is_transpose ? [35, 10, 30, 10] : [10, 100, 30, 10]
-        });
-      } else {
-        _this.chart = new Chart({
-          container: _this.container,
-          autoFit: true,
-          height: 520,
-          width: 800,
-          padding: is_transpose ? [35, 30, 30, 30] : [30, 100, 30, 30]
-        });
-      }
+      _this.initChartHandler();
       _this.chart.on('element:click', function (e) {
         _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
-      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      var themeColors = _this.getThemeColors();
+      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       if (summary_type === SUMMARY_TYPE.ADVANCED) {
         var table = getTableById(table_id);
         var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
-        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       _this.chart.data(data);
+      _this.setAxis(themeColors);
+      _this.setScale(summaryColumnData);
+      _this.setTooltip();
+      _this.chart.facet('mirror', {
+        fields: ['group_name'],
+        transpose: statItem.is_transpose,
+        padding: 'auto',
+        title: {
+          style: {
+            fill: themeColors.textColor
+          }
+        },
+        eachView: function eachView(view, facet) {
+          if (facet.rowValue && facet.rowValue.length > 5) {
+            facet.rowValue = facet.rowValue.slice(0, 5) + '...';
+          }
+          view.interval().position('name*value').color('group_name', colorSet).tooltip('name*formatted_value', function (name, value) {
+            return {
+              title: summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summary_method]),
+              name: name,
+              value: value
+            };
+          }).state({
+            active: {
+              style: function style(element) {
+                return {
+                  fillOpacity: 0.6
+                };
+              }
+            }
+          });
+          view.interaction('active-region');
+        }
+      });
+      _this.chart.legend({
+        itemName: {
+          style: {
+            fill: themeColors.textColor
+          }
+        }
+      });
+      _this.chart.render();
+    };
+    _this.initChartHandler = function () {
+      var _this$props2 = _this.props,
+        isPreview = _this$props2.isPreview,
+        statItem = _this$props2.statItem;
+      var is_transpose = statItem.is_transpose;
+      var config = {
+        container: _this.container,
+        autoFit: true
+      };
+      if (isPreview) {
+        config.padding = is_transpose ? [35, 10, 30, 10] : [10, 100, 30, 10];
+      } else {
+        config.height = 520;
+        config.width = 800;
+        config.padding = is_transpose ? [35, 30, 30, 30] : [30, 100, 30, 30];
+      }
+      _this.chart = new Chart(config);
+    };
+    _this.setAxis = function (themeColors) {
       _this.chart.axis('name', {
         line: {
           style: themeColors.gridColor
@@ -91,6 +135,9 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
+    };
+    _this.setScale = function (summaryColumnData) {
+      var summary_method = _this.props.statItem.summary_method;
       _this.chart.scale({
         name: {
           sync: true
@@ -98,7 +145,7 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
         value: {
           sync: true,
           formatter: function formatter(value) {
-            return getNumberDisplayString(value, columnData);
+            return _this.getNumberDisplayString(value, summaryColumnData, summary_method);
           }
         },
         group_name: {
@@ -108,65 +155,18 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
           sync: true
         }
       });
+    };
+    _this.setTooltip = function () {
       _this.chart.tooltip({
         showTitle: true,
         showMarkers: false,
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
         itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{title}<div><div class="tooltip-item">{name}: {value}<div></div>',
         domStyles: {
-          'g2-tooltip': {
-            borderRadius: '2px',
-            backgroundColor: '#fff',
-            padding: '10px'
-          },
-          'tooltip-item': {
-            marginTop: '5px'
-          }
-        }
-      });
-      _this.chart.facet('mirror', {
-        fields: ['group_name'],
-        transpose: statItem.is_transpose,
-        padding: 'auto',
-        title: {
-          style: {
-            fill: themeColors.textColor
-          }
-        },
-        eachView: function eachView(view, facet) {
-          if (facet.rowValue && facet.rowValue.length > 5) {
-            facet.rowValue = facet.rowValue.slice(0, 5) + '...';
-          }
-          view.interval().position('name*value').color('group_name', colorSet).tooltip('name*value', function (name, value) {
-            return {
-              title: summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summary_method]),
-              value: getNumberDisplayString(value, columnData),
-              name: name
-            };
-          }).state({
-            active: {
-              style: function style(element) {
-                return {
-                  fillOpacity: 0.6
-                };
-              }
-            }
-          });
-          view.interaction('active-region');
+          'g2-tooltip': _this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': _this.getDefaultChartStyleByKey('tooltip-item')
         }
       });
-      _this.chart.legend({
-        itemName: {
-          style: {
-            fill: themeColors.textColor
-          }
-        }
-      });
-      _this.chart.render();
-    };
-    _this.destroyChart = function () {
-      _this.chart.destroy();
-      _this.chart = null;
     };
     _this.state = {
       isCalculatingData: true,
@@ -179,9 +179,9 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-      var _this$props2 = this.props,
-        statItem = _this$props2.statItem,
-        chartCalculator = _this$props2.chartCalculator;
+      var _this$props3 = this.props,
+        statItem = _this$props3.statItem,
+        chartCalculator = _this$props3.chartCalculator;
       if (this.container) {
         chartCalculator.calculate(statItem).then(function (data) {
           var showResultDescription = data.colorSet && data.colorSet.length > 0 ? false : true;
@@ -212,9 +212,9 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(preProps, preState) {
       var _this3 = this;
-      var _this$props3 = this.props,
-        statItem = _this$props3.statItem,
-        chartCalculator = _this$props3.chartCalculator;
+      var _this$props4 = this.props,
+        statItem = _this$props4.statItem,
+        chartCalculator = _this$props4.chartCalculator;
       var isCalculatingData = this.state.isCalculatingData;
       if (isCalculatingData !== preState.isCalculatingData) return;
       if (this.shouldCalculateStatItem(preProps, this.props)) {
@@ -259,11 +259,7 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
       var _this$state = this.state,
         isCalculatingData = _this$state.isCalculatingData,
         showResultDescription = _this$state.showResultDescription;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), showResultDescription && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-text'
-      }, intl.get(NO_STATISTIC_RESULTS)), /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref2) {
           return _this4.container = _ref2;
         },
@@ -275,8 +271,6 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
 }(BaseChart);
 Mirror.propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
   getTableById: PropTypes.func,

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

@@ -5,17 +5,13 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
-import { TableUtils, getNumberDisplayString } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
-import { Loading } from '../components';
-import { formatPieChartData, getCurrentTheme, getLabelFontSize } from '../utils/common-utils';
-import { DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_FORMATS, LABEL_POSITIONS, NO_STATISTIC_RESULTS, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE } from '../constants';
+import { formatPieChartData, getCurrentTheme } from '../utils/common-utils';
+import { EMPTY_NAME, LABEL_FORMATS, LABEL_POSITIONS } from '../constants';
 import chartStyles from '../assets/css/statistic-chart.module.css';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
@@ -52,32 +48,19 @@ var PieChart = /*#__PURE__*/function (_BaseChart) {
       if (data.length === 0) return;
       var _this$props = _this.props,
         getTableById = _this$props.getTableById,
-        theme = _this$props.theme,
-        isEnlarge = _this$props.isEnlarge,
-        isPreview = _this$props.isPreview,
         statItem = _this$props.statItem,
         colorThemeName = _this$props.colorThemeName;
       _this.chart.coordinate('theta', {
         radius: isCreating ? 0.75 : 0.95
       });
-      var summary_type = statItem.summary_type,
-        summary_column_key = statItem.summary_column_key,
-        table_id = statItem.table_id,
+      var table_id = statItem.table_id,
         show_legend = statItem.show_legend,
         show_percent = statItem.show_percent,
         display_label = statItem.display_label,
         label_position = statItem.label_position;
-      var currentTheme = getCurrentTheme(colorThemeName);
-      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       var table = getTableById(table_id);
-      if (summary_type === SUMMARY_TYPE.ADVANCED) {
-        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
-        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
-      }
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var currentTheme = getCurrentTheme(colorThemeName);
+      var themeColors = _this.getThemeColors();
       var newData = formatPieChartData(data, statItem, table, currentTheme);
       _this.chart.data(newData, {
         'name': {
@@ -130,10 +113,9 @@ var PieChart = /*#__PURE__*/function (_BaseChart) {
           nice: false
         }
       });
-      _this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', function (value, percent) {
-        var displayedValue = getNumberDisplayString(value, columnData);
+      _this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('formatted_value*percent', function (value, percent) {
         return {
-          content: _this.getLabel(displayedValue, percent)
+          content: _this.getLabel(value, percent)
         };
       }, {
         offset: !label_position || label_position == LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
@@ -143,20 +125,19 @@ var PieChart = /*#__PURE__*/function (_BaseChart) {
           shadowBlur: 2,
           shadowColor: 'rgba(0, 0, 0, .45)'
         }
-      }).tooltip('name*value*percent', function (name, value, percent) {
+      }).tooltip('name*formatted_value*percent', function (name, value, percent) {
         var title = name;
         if (!name || name === 'undefined') {
           title = intl.get(EMPTY_NAME);
         } else if (name === 'Others') {
           title = intl.get('Others');
         }
-        var displayedValue = getNumberDisplayString(value, columnData);
         return show_percent || display_label ? {
           name: title,
-          value: _this.getLabel(displayedValue, percent)
+          value: _this.getLabel(value, percent)
         } : {
           name: title,
-          value: displayedValue
+          value: value
         };
       }).state({
         active: {
@@ -208,11 +189,6 @@ var PieChart = /*#__PURE__*/function (_BaseChart) {
       _this.chart.destroy();
       _this.chart = null;
     };
-    _this.getLabelFontSize = function () {
-      var statItem = _this.props.statItem;
-      var label_font_size = statItem.label_font_size;
-      return getLabelFontSize(label_font_size);
-    };
     _this.state = {
       isCalculatingData: true,
       showResultDescription: true
@@ -308,11 +284,7 @@ var PieChart = /*#__PURE__*/function (_BaseChart) {
       var _this$state = this.state,
         isCalculatingData = _this$state.isCalculatingData,
         showResultDescription = _this$state.showResultDescription;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), showResultDescription && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-text'
-      }, intl.get(NO_STATISTIC_RESULTS)), /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref) {
           return _this4.container = _ref;
         },

package/es/stat-view/pivot-table/index.js

@@ -10,8 +10,7 @@ import BaseChart from '../base-chart';
 import OneDimensionTableNoNumericColumns from './one-dimension-table-no-numeric-columns';
 import TwoDimensionTable from './two-dimension-table';
 import OneDimensionTableWithNumericColumns from './one-dimension-table-with-numeric-columns';
-import { Loading } from '../../components';
-import { TIME_COLUMN_LIST, STAT_ITEM_THEME_COLORS, DEFAULT_NUMBER_FORMAT_OBJECT, SUMMARY_TYPE, NO_STATISTIC_RESULTS, TOO_MANY_STATISTIC_ENTRIES } from '../../constants';
+import { TIME_COLUMN_LIST, DEFAULT_NUMBER_FORMAT_OBJECT, SUMMARY_TYPE, TOO_MANY_STATISTIC_ENTRIES } from '../../constants';
 import styles from './statistic-pivot-table.module.css';
 var PivotTable = /*#__PURE__*/function (_BaseChart) {
   _inherits(PivotTable, _BaseChart);
@@ -28,17 +27,12 @@ var PivotTable = /*#__PURE__*/function (_BaseChart) {
       var _this$props = _this.props,
         statItem = _this$props.statItem,
         isPreview = _this$props.isPreview,
-        theme = _this$props.theme,
-        isEnlarge = _this$props.isEnlarge,
         getTableById = _this$props.getTableById;
       var statData = _this.state.statData;
       if (!Object.keys(statData).length > 0) return '';
       var pivot_columns = statData.pivot_columns;
       var column_groupby_column_key = statItem.column_groupby_column_key;
-      var themeColors = '#212529';
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var themeColors = _this.getThemeColors('#212529');
       if (Array.isArray(pivot_columns) && pivot_columns.length > 100) {
         return /*#__PURE__*/React.createElement("div", {
           className: 'statistic-chart-text'
@@ -176,9 +170,7 @@ var PivotTable = /*#__PURE__*/function (_BaseChart) {
       var _this$state = this.state,
         isCalculatingData = _this$state.isCalculatingData,
         showResultDescription = _this$state.showResultDescription;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData ? /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)) : /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), !isCalculatingData && /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref2) {
           return _this4.container = _ref2;
         },
@@ -186,18 +178,14 @@ var PivotTable = /*#__PURE__*/function (_BaseChart) {
           padding: '15px 30px'
         } : null,
         className: "statistic-chart-container ".concat(styles['pivot-table-container'])
-      }, this.renderPivotTable()), showResultDescription && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-text'
-      }, intl.get(NO_STATISTIC_RESULTS)));
+      }, this.renderPivotTable()), showResultDescription && this.renderEmpty());
     }
   }]);
   return PivotTable;
 }(BaseChart);
 PivotTable.propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
   isEdit: PropTypes.bool,
-  theme: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
   getTableById: PropTypes.func,

package/es/stat-view/pivot-table/one-dimension-table-no-numeric-columns.js

@@ -20,46 +20,51 @@ var OneDimensionTableNoNumericColumns = /*#__PURE__*/function (_PureComponent) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _this.toggleRecords = function (cell) {
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        _ref$isColumn = _ref.isColumn,
+        isColumn = _ref$isColumn === void 0 ? false : _ref$isColumn,
+        _ref$isRow = _ref.isRow,
+        isRow = _ref$isRow === void 0 ? false : _ref$isRow;
       if (isMobile) return;
-      _this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem);
+      _this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem, {
+        isColumn: isColumn,
+        isRow: isRow
+      });
     };
     _this.onClickTotals = function (recordsList) {
-      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        isCurrentView = _ref.isCurrentView;
+      var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        isCurrentView = _ref2.isCurrentView;
       if (isMobile) return;
       var _this$props = _this.props,
         getTableById = _this$props.getTableById,
         statItem = _this$props.statItem;
-      var rows = [];
       var table_id = statItem.table_id,
         view_id = statItem.view_id;
       var table = getTableById(table_id);
       var view = Views.getViewById(table.views, view_id);
-      if (!Views.isArchiveView(view)) {
-        rows = recordsList.flat();
-      }
+      var rows = !Views.isArchiveView(view) ? recordsList.flat() : [];
       _this.props.toggleStatisticRecordsDialog({
         rows: rows
       }, _this.props.statItem, {
         isCurrentView: isCurrentView
       });
     };
-    _this.renderHeader = function (_ref2) {
-      var groupByColumn = _ref2.groupByColumn;
+    _this.renderHeader = function (_ref3) {
+      var groupByColumn = _ref3.groupByColumn;
       var statItem = _this.props.statItem;
       var _statItem$display_tot = statItem.display_total,
         display_total = _statItem$display_tot === void 0 ? true : _statItem$display_tot;
-      var _ref3 = groupByColumn || {},
-        groupName = _ref3.name;
+      var _ref4 = groupByColumn || {},
+        groupName = _ref4.name;
       return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
         className: "pivot-table-header"
       }, /*#__PURE__*/React.createElement("div", null, groupName)), display_total && /*#__PURE__*/React.createElement("th", {
         className: 'pivot-table-header'
       }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL)))));
     };
-    _this.renderRows = function (_ref4) {
-      var table = _ref4.table,
-        groupByColumn = _ref4.groupByColumn;
+    _this.renderRows = function (_ref5) {
+      var table = _ref5.table,
+        groupByColumn = _ref5.groupByColumn;
       var _this$props2 = _this.props,
         pivotResult = _this$props2.pivotResult,
         statItem = _this$props2.statItem,
@@ -92,7 +97,9 @@ var OneDimensionTableNoNumericColumns = /*#__PURE__*/function (_PureComponent) {
           className: "".concat(styles['pivot-cell'], " ").concat(isValidTotalDisplayValue ? '' : styles['pivot-empty-cell']),
           title: isValidTotalDisplayValue ? totalDisplayValue : '',
           onClick: function onClick() {
-            return _this.toggleRecords(rowItem);
+            return _this.toggleRecords(rowItem, {
+              isRow: true
+            });
           }
         }, isValidTotalDisplayValue ? /*#__PURE__*/React.createElement("div", null, totalDisplayValue) : /*#__PURE__*/React.createElement("i", null)));
       }), display_total && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {