dtable-statistic 4.0.7 → 4.0.8

package/es/stat-view/basic-number-card.js

@@ -7,15 +7,12 @@ 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 { EMPTY_NAME, STAT_ITEM_THEME_COLORS } from '../constants';
+import { EMPTY_NAME, SUMMARY_METHOD_MAP } from '../constants';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
   getTableById: PropTypes.func
@@ -116,9 +113,7 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
     _this.drawChart = function (data) {
       var _this$props3 = _this.props,
         isPreview = _this$props3.isPreview,
-        statItem = _this$props3.statItem,
-        isEnlarge = _this$props3.isEnlarge,
-        theme = _this$props3.theme;
+        statItem = _this$props3.statItem;
       if (isPreview) {
         _this.chart = new Chart({
           container: _this.container,
@@ -132,8 +127,7 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
           width: 700
         });
       }
-      var summary_method = statItem.summary_method;
-      var content = summary_method === 'Distinct_values' ? data : _this.formatData(data);
+      var content = _this.formatData(data);
       var fontSize = _this.getFontSize(content);
       var labelFontSize = fontSize - 35;
       if (labelFontSize > 20) {
@@ -142,10 +136,7 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
       if (labelFontSize < 12) {
         labelFontSize = 12;
       }
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var themeColors = _this.getThemeColors();
       _this.chart.annotation().html({
         position: ['50%', '50%'],
         html: "\n        <div style=\"color: ".concat(themeColors.cardColor, "; text-align: center;\">\n          <p class=\"text-content\" style=\"font-size: ").concat(fontSize, "px; margin: -15px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"font-size: ").concat(labelFontSize, "px;margin: 0;\">").concat(statItem.name || '', "</p>\n        </div>\n      ")
@@ -153,17 +144,20 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
       _this.chart.render();
     };
     _this.formatData = function (data) {
-      if (!data) return intl.get(EMPTY_NAME);
       var _this$props4 = _this.props,
         getTableById = _this$props4.getTableById,
         statItem = _this$props4.statItem;
       var summary_method = statItem.summary_method,
         table_id = statItem.table_id,
         numeric_column = statItem.numeric_column;
+      if (summary_method === SUMMARY_METHOD_MAP.Distinct_values) {
+        return data;
+      }
+      if (!data) return intl.get(EMPTY_NAME);
       if (summary_method !== 'Row_count') {
         var table = getTableById(table_id);
         var selectedColumn = TableUtils.getTableColumnByKey(table, numeric_column);
-        var formattedContent = getNumberDisplayString(data, selectedColumn.data || {});
+        var formattedContent = _this.getNumberDisplayString(data, selectedColumn.data || {});
         return formattedContent;
       }
       var string = data + '';
@@ -239,9 +233,7 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
     value: function render() {
       var _this2 = this;
       var isCalculatingData = this.state.isCalculatingData;
-      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(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref3) {
           return _this2.container = _ref3;
         },

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

@@ -7,15 +7,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 { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
-import { Loading } from '../components';
-import { getCurrentTheme, getLabelFontSize } from '../utils/common-utils';
-import { DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_COLORS, STATISTICS_COUNT_SHOW, STAT_ITEM_THEME_COLORS, LABEL_CONFIG_CHANGED, SUMMARY_TYPE, NO_STATISTIC_RESULTS, TITLE_AMOUNT, LEGEND_LEFT, LEGEND_RIGHT } from '../constants';
+import { getCurrentTheme } from '../utils/common-utils';
+import { DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_COLORS, STATISTICS_COUNT_SHOW, LABEL_CONFIG_CHANGED, SUMMARY_TYPE, TITLE_AMOUNT, LEGEND_LEFT, LEGEND_RIGHT } from '../constants';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
   isEdit: PropTypes.bool,
   theme: PropTypes.string,
   colorThemeName: PropTypes.string,
@@ -136,10 +134,7 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
     _this.renderAxisLabel = function (newStatItem) {
       var _this$props3 = _this.props,
         getTableById = _this$props3.getTableById,
-        statItem = _this$props3.statItem,
-        theme = _this$props3.theme,
-        isEnlarge = _this$props3.isEnlarge,
-        isPreview = _this$props3.isPreview;
+        statItem = _this$props3.statItem;
       if (newStatItem && newStatItem._id !== statItem._id) {
         return;
       }
@@ -160,10 +155,7 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
         y_axis_right_summary_method = _statItem.y_axis_right_summary_method;
       var table = getTableById(table_id);
       var autoPadding = _this.chart.autoPadding;
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var themeColors = _this.getThemeColors();
       var xAxisID = "chart-x-axis-label_".concat(statItem._id);
       var chartContainer = _this.chart.getCanvas().get('container');
       var xLabel = chartContainer.querySelector("#".concat(xAxisID));
@@ -238,20 +230,59 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
     _this.drawChart = function (data) {
       var _this$props4 = _this.props,
         getTableById = _this$props4.getTableById,
-        isPreview = _this$props4.isPreview,
         statItem = _this$props4.statItem,
-        isEnlarge = _this$props4.isEnlarge,
-        theme = _this$props4.theme,
         colorThemeName = _this$props4.colorThemeName;
-      var currentTheme = getCurrentTheme(colorThemeName);
       var table_id = statItem.table_id,
         y_axis_left_summary_column = statItem.y_axis_left_summary_column,
-        y_axis_right_summary_column = statItem.y_axis_right_summary_column,
-        y_axis_left_summary_method = statItem.y_axis_left_summary_method,
+        y_axis_right_summary_column = statItem.y_axis_right_summary_column;
+      _this.initChartHandler();
+      _this.chart.data(data);
+      _this.chart.coordinate('rect');
+      _this.chart.on('element:click', function (e) {
+        if (e.data.data) {
+          _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+        }
+      });
+      var table = getTableById(table_id);
+      var leftColumn = TableUtils.getTableColumnByKey(table, y_axis_left_summary_column) || {};
+      var rightColumn = TableUtils.getTableColumnByKey(table, y_axis_right_summary_column) || {};
+      _this.handleAutoRange(leftColumn, rightColumn);
+      var themeColors = _this.getThemeColors();
+      var currentTheme = getCurrentTheme(colorThemeName);
+      _this.setNameAxis(themeColors);
+      _this.setValueAxis(themeColors);
+      _this.setLegend(themeColors, table, currentTheme);
+      _this.drawLeft({
+        currentTheme: currentTheme
+      });
+      _this.drawRight({
+        currentTheme: currentTheme,
+        themeColors: themeColors
+      });
+      _this.chart.removeInteraction('legend-filter');
+      _this.chart.render();
+      _this.renderAxisLabel();
+    };
+    _this.initChartHandler = function () {
+      var _this$props5 = _this.props,
+        isPreview = _this$props5.isPreview,
+        statItem = _this$props5.statItem;
+      var display_data = statItem.display_data;
+      var config = {
+        container: _this.container,
+        autoFit: true,
+        appendPadding: [display_data ? 20 : 3, 0, 0, 0]
+      };
+      if (!isPreview) {
+        config.height = 400;
+        config.width = 700;
+      }
+      _this.chart = new Chart(config);
+    };
+    _this.handleAutoRange = function (leftColumn, rightColumn) {
+      var statItem = _this.props.statItem;
+      var y_axis_left_summary_method = statItem.y_axis_left_summary_method,
         y_axis_right_summary_method = statItem.y_axis_right_summary_method,
-        y_axis_left_summary_type = statItem.y_axis_left_summary_type,
-        y_axis_right_summary_type = statItem.y_axis_right_summary_type,
-        y_axis_left_group_by_multiple_numeric_column = statItem.y_axis_left_group_by_multiple_numeric_column,
         _statItem$y_axis_auto = statItem.y_axis_auto_range_left,
         y_axis_auto_range_left = _statItem$y_axis_auto === void 0 ? true : _statItem$y_axis_auto,
         _statItem$y_axis_min_ = statItem.y_axis_min_left,
@@ -263,56 +294,27 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
         _statItem$y_axis_min_2 = statItem.y_axis_min_right,
         y_axis_min_right = _statItem$y_axis_min_2 === void 0 ? 0 : _statItem$y_axis_min_2,
         _statItem$y_axis_max_2 = statItem.y_axis_max_right,
-        y_axis_max_right = _statItem$y_axis_max_2 === void 0 ? 0 : _statItem$y_axis_max_2,
-        _statItem$display_dat = statItem.display_data,
-        display_data = _statItem$display_dat === void 0 ? false : _statItem$display_dat,
-        _statItem$label_font_ = statItem.label_font_size,
-        label_font_size = _statItem$label_font_ === void 0 ? 12 : _statItem$label_font_;
-      if (isPreview) {
-        _this.chart = new Chart({
-          container: _this.container,
-          autoFit: true,
-          appendPadding: [display_data ? 20 : 3, 0, 0, 0]
-        });
-      } else {
-        _this.chart = new Chart({
-          container: _this.container,
-          autoFit: true,
-          height: 400,
-          width: 700,
-          appendPadding: [display_data ? 20 : 3, 0, 0, 0]
-        });
-      }
-      _this.chart.data(data);
-      _this.chart.coordinate('rect');
-      _this.chart.on('element:click', function (e) {
-        if (e.data.data) {
-          _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
-        }
-      });
-      var table = getTableById(table_id);
-      var column1 = TableUtils.getTableColumnByKey(table, y_axis_left_summary_column) || {};
-      var column2 = TableUtils.getTableColumnByKey(table, y_axis_right_summary_column) || {};
-      var column1Data = column1.data || DEFAULT_NUMBER_FORMAT_OBJECT;
-      var column2Data = column2.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+        y_axis_max_right = _statItem$y_axis_max_2 === void 0 ? 0 : _statItem$y_axis_max_2;
+      var leftColumnData = leftColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+      var rightColumnData = rightColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       var leftValueScaleOptions = {
         formatter: function formatter(value) {
-          return getNumberDisplayString(value, column1Data);
+          return _this.getNumberDisplayString(value, leftColumnData, y_axis_left_summary_method);
         }
       };
       var rightValueScaleOptions = {
         formatter: function formatter(value) {
-          return getNumberDisplayString(value, column2Data);
+          return _this.getNumberDisplayString(value, rightColumnData, y_axis_right_summary_method);
         }
       };
       if (!y_axis_auto_range_left) {
-        leftValueScaleOptions = Object.assign({}, leftValueScaleOptions, {
+        leftValueScaleOptions = Object.assign(leftValueScaleOptions, {
           min: y_axis_min_left,
           max: y_axis_max_left
         });
       }
       if (!y_axis_auto_range_right) {
-        rightValueScaleOptions = Object.assign({}, rightValueScaleOptions, {
+        rightValueScaleOptions = Object.assign(rightValueScaleOptions, {
           min: y_axis_min_right,
           max: y_axis_max_right
         });
@@ -326,10 +328,8 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
         value_left: leftValueScaleOptions,
         value_right: rightValueScaleOptions
       });
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+    };
+    _this.setNameAxis = function (themeColors) {
       _this.chart.axis('name', {
         label: {
           style: {
@@ -346,6 +346,8 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
           style: themeColors.gridColor
         }
       });
+    };
+    _this.setValueAxis = function (themeColors) {
       _this.chart.axis('value_left', {
         grid: {
           line: {
@@ -368,6 +370,8 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
+    };
+    _this.setLegend = function (themeColors, table, currentTheme) {
       var legendPosition = 'bottom';
       _this.chart.legend({
         custom: true,
@@ -379,43 +383,60 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
         },
         items: _this.getLegend(table, currentTheme)
       });
+    };
+    _this.drawLeft = function (_ref3) {
+      var currentTheme = _ref3.currentTheme;
+      var statItem = _this.props.statItem;
+      var y_axis_left_summary_method = statItem.y_axis_left_summary_method,
+        y_axis_left_summary_type = statItem.y_axis_left_summary_type,
+        y_axis_left_group_by_multiple_numeric_column = statItem.y_axis_left_group_by_multiple_numeric_column;
       _this.chart.interval().position('name*value_left').color('color', function (color) {
         if (!y_axis_left_group_by_multiple_numeric_column) {
           return currentTheme && currentTheme.colors[0];
         }
         return color;
-      }).adjust('dodge').tooltip('name*value_left', function (name, value) {
+      }).adjust('dodge').tooltip('name*formatted_value_left', function (name, value) {
         return {
+          value: value,
           title: y_axis_left_summary_type == SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_left_summary_method]),
-          value: getNumberDisplayString(value, column1Data),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
       });
       _this.chart.tooltip({
         showMarkers: false
       });
-      _this.chart.line().position('name*value_right').color(currentTheme && currentTheme.colors[1]).size(3).tooltip('name*value_right', function (name, value) {
+    };
+    _this.drawRight = function (_ref4) {
+      var currentTheme = _ref4.currentTheme,
+        themeColors = _ref4.themeColors;
+      var statItem = _this.props.statItem;
+      var y_axis_right_summary_type = statItem.y_axis_right_summary_type,
+        y_axis_right_summary_method = statItem.y_axis_right_summary_method,
+        _statItem$display_dat = statItem.display_data,
+        display_data = _statItem$display_dat === void 0 ? false : _statItem$display_dat;
+
+      // line
+      _this.chart.line().position('name*value_right').color(currentTheme && currentTheme.colors[1]).size(3).tooltip('name*formatted_value_right', function (name, value) {
         return {
+          value: value,
           title: y_axis_right_summary_type == SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_right_summary_method]),
-          value: getNumberDisplayString(value, column2Data),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
       });
-      _this.chart.point().position('name*value_right').color(currentTheme && currentTheme.colors[1]).size(3).shape('circle').label(display_data ? 'value_right' : false, {
+
+      // point on the line
+      _this.chart.point().position('name*value_right').color(currentTheme && currentTheme.colors[1]).size(3).shape('circle').label(display_data ? 'formatted_value_right' : false, {
         style: {
-          fontSize: getLabelFontSize(label_font_size),
+          fontSize: _this.getLabelFontSize(),
           fill: themeColors.textColor
         }
-      }).tooltip('name*value_right', function (name, value) {
+      }).tooltip('name*formatted_value_right', function (name, value) {
         return {
+          value: value,
           title: y_axis_right_summary_type == SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_right_summary_method]),
-          value: getNumberDisplayString(value, column2Data),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
       });
-      _this.chart.removeInteraction('legend-filter');
-      _this.chart.render();
-      _this.renderAxisLabel();
     };
     _this.getLegend = function (table, colorTheme) {
       var statItem = _this.props.statItem;
@@ -504,9 +525,9 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
   _createClass(CombinationChart, [{
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
-      var _this$props5 = this.props,
-        theme = _this$props5.theme,
-        colorThemeName = _this$props5.colorThemeName;
+      var _this$props6 = this.props,
+        theme = _this$props6.theme,
+        colorThemeName = _this$props6.colorThemeName;
       if (this.canUpdate(this.props, nextProps)) {
         return true;
       }
@@ -537,13 +558,9 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
         showResultDescription = _this$state.showResultDescription;
       var show_y_axis_left_label = statItem.show_y_axis_left_label,
         show_x_axis_label = statItem.show_x_axis_label;
-      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", {
-        ref: function ref(_ref3) {
-          return _this2.container = _ref3;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref5) {
+          return _this2.container = _ref5;
         },
         style: {
           padding: show_y_axis_left_label || show_x_axis_label ? 30 : 20