dtable-statistic 4.0.7 → 4.0.8

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

@@ -5,18 +5,15 @@ 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 { getChartDisplayLabels, getChartGroups } from '../utils/basic-chart-utils';
-import { DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE, LABEL_CONFIG_CHANGED, NO_STATISTIC_RESULTS, STATISTICS_COUNT_SHOW, TITLE_AMOUNT, TITLE_INCREASE } from '../constants';
+import { getCurrentTheme } from '../utils/common-utils';
+import { getChartGroups } from '../utils/basic-chart-utils';
+import { DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, SUMMARY_TYPE, LABEL_CONFIG_CHANGED, STATISTICS_COUNT_SHOW, TITLE_AMOUNT, TITLE_INCREASE } from '../constants';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
   isEdit: PropTypes.bool,
-  theme: PropTypes.string,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
@@ -34,46 +31,21 @@ var CompareChart = /*#__PURE__*/function (_BaseChart) {
     _this.drawChart = function (data) {
       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,
         colorThemeName = _this$props.colorThemeName;
-      var display_data = statItem.display_data,
-        display_increase_percentage = statItem.display_increase_percentage;
-      var currentTheme = getCurrentTheme(colorThemeName);
-      if (isPreview) {
-        _this.chart = new Chart({
-          container: _this.container,
-          autoFit: true,
-          appendPadding: [display_data || display_increase_percentage ? 17 : 0, 0, 0, 0]
-        });
-      } else {
-        _this.chart = new Chart({
-          container: _this.container,
-          autoFit: true,
-          height: 400,
-          width: 700,
-          appendPadding: [display_data || display_increase_percentage ? 17 : 0, 0, 0, 0]
-        });
-      }
-      _this.chart.on('interval:click', function (e) {
-        _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
-      });
       var table_id = statItem.table_id,
         y_axis_column_key = statItem.y_axis_column_key,
         y_axis_summary_type = statItem.y_axis_summary_type,
-        y_axis_summary_method = statItem.y_axis_summary_method,
-        y_axis_auto_range = statItem.y_axis_auto_range,
-        y_axis_min = statItem.y_axis_min,
-        y_axis_max = statItem.y_axis_max,
-        display_increase = statItem.display_increase,
-        increase_line_color = statItem.increase_line_color;
-      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+        display_increase = statItem.display_increase;
+      _this.initChartHandler();
+      _this.chart.on('interval:click', function (e) {
+        _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+      });
+      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
         var table = getTableById(table_id);
         var summaryColumn = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
-        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       _this.chart.data(data, {
         'name': {
@@ -83,35 +55,85 @@ var CompareChart = /*#__PURE__*/function (_BaseChart) {
       });
       var width = _this.chart.coordinateBBox.width;
       var chartData = getChartGroups(data);
-      var labelCount = chartData.length;
-      if (Math.floor(width / labelCount) <= 20) {
-        var displayLabels = getChartDisplayLabels(width, 20, chartData);
-        labelCount = displayLabels.length;
+      var ticks = _this.getTicks(chartData, width);
+      if (ticks.length > 0) {
         _this.chart.scale('name', {
-          ticks: displayLabels
+          ticks: ticks
         });
       }
 
       // set Coord type
       _this.chart.coordinate('rect');
+      _this.handleAutoRange(data, summaryColumnData);
+      _this.chart.scale({
+        group_name: {
+          type: 'cat'
+        }
+      });
+      var currentTheme = getCurrentTheme(colorThemeName);
+      var themeColors = _this.getThemeColors();
+      _this.drawBar({
+        currentTheme: currentTheme,
+        themeColors: themeColors
+      });
+      _this.setTooltip();
+      if (display_increase) {
+        _this.drawIncreaseLine({
+          themeColors: themeColors
+        });
+      }
+      _this.setAxis(themeColors);
+      _this.setLegend(themeColors);
+      _this.chart.interaction('active-region');
+      _this.chart.removeInteraction('legend-filter');
+      _this.chart.render();
+      _this.renderAxisLabel();
+    };
+    _this.initChartHandler = function () {
+      var _this$props2 = _this.props,
+        isPreview = _this$props2.isPreview,
+        statItem = _this$props2.statItem;
+      var display_data = statItem.display_data,
+        display_increase_percentage = statItem.display_increase_percentage;
+      var config = {
+        container: _this.container,
+        autoFit: true,
+        appendPadding: [display_data || display_increase_percentage ? 17 : 0, 0, 0, 0]
+      };
+      if (!isPreview) {
+        config.height = 400;
+        config.width = 700;
+      }
+      _this.chart = new Chart(config);
+    };
+    _this.handleAutoRange = function (data, summaryColumnData) {
+      var _this$props$statItem = _this.props.statItem,
+        y_axis_summary_method = _this$props$statItem.y_axis_summary_method,
+        y_axis_auto_range = _this$props$statItem.y_axis_auto_range,
+        y_axis_min = _this$props$statItem.y_axis_min,
+        y_axis_max = _this$props$statItem.y_axis_max;
       var valueScaleOptions = {
         formatter: function formatter(value) {
-          return getNumberDisplayString(value, columnData);
+          return _this.getNumberDisplayString(value, summaryColumnData, y_axis_summary_method);
         }
       };
+
+      // eslint-disable-next-line
       if (y_axis_auto_range == undefined || y_axis_auto_range) {
-        valueScaleOptions = Object.assign({}, valueScaleOptions, {
+        valueScaleOptions = Object.assign(valueScaleOptions, {
           nice: true
         });
       } else {
-        valueScaleOptions = Object.assign({}, valueScaleOptions, {
+        valueScaleOptions = Object.assign(valueScaleOptions, {
           min: y_axis_min,
           max: y_axis_max
         });
+
         // set the filter rule
         _this.chart.filter('value', function (value) {
           return value >= y_axis_min;
         });
+
         // filter the data
         _this.chart.filterData(data);
       }
@@ -122,31 +144,25 @@ var CompareChart = /*#__PURE__*/function (_BaseChart) {
         },
         value: valueScaleOptions
       });
-      _this.chart.scale({
-        group_name: {
-          type: 'cat'
-        }
-      });
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
-
-      // bar chart
-      _this.chart.interval().label(display_data ? 'value' : false, {
-        formatter: function formatter(value) {
-          return getNumberDisplayString(value, columnData);
-        },
+    };
+    _this.drawBar = function (_ref) {
+      var themeColors = _ref.themeColors,
+        currentTheme = _ref.currentTheme;
+      var _this$props$statItem2 = _this.props.statItem,
+        y_axis_summary_type = _this$props$statItem2.y_axis_summary_type,
+        y_axis_summary_method = _this$props$statItem2.y_axis_summary_method,
+        display_data = _this$props$statItem2.display_data;
+      _this.chart.interval().label(display_data ? 'formatted_value' : false, {
         style: {
           fontSize: _this.getLabelFontSize(),
           fill: themeColors.textColor
         }
-      }).position('name*value').color('group_name', currentTheme && currentTheme.colors).tooltip('name*value*raw_name', function (name, value, raw_name) {
+      }).position('name*value').color('group_name', currentTheme && currentTheme.colors).tooltip('name*formatted_value*raw_name', function (name, value, raw_name) {
         var nameContent = !raw_name && typeof raw_name !== 'number' ? intl.get(EMPTY_NAME) : raw_name;
         var titleContent = y_axis_summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_summary_method]);
         return {
+          value: value,
           title: titleContent,
-          value: getNumberDisplayString(value, columnData),
           name: nameContent
         };
       }).adjust('dodge').state({
@@ -156,57 +172,57 @@ var CompareChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
+    };
+    _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'
-          }
+          'g2-tooltip': _this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': _this.getDefaultChartStyleByKey('tooltip-item')
         }
       });
-      if (display_increase) {
-        // line chart
-        _this.chart.line().position('name*increase_value').size(3).color(increase_line_color || '#fbd44a').shape('smooth').tooltip('name*increase_value', function (name, value) {
-          return {
-            title: intl.get(TITLE_INCREASE),
-            value: getNumberDisplayString(value, {
-              format: 'percent'
-            }),
-            name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
-          };
-        });
-        _this.chart.point().label(display_increase_percentage ? 'increase_value' : false, function (value) {
-          return {
-            content: getNumberDisplayString(value, {
-              format: 'percent'
-            }),
-            style: {
-              fill: themeColors.textColor
-            }
-          };
-        }).color(increase_line_color || '#fbd44a').position('name*increase_value').size(3).tooltip('name*increase_value', function (name, value) {
-          return {
-            title: intl.get(TITLE_INCREASE),
-            value: getNumberDisplayString(value, {
-              format: 'percent'
-            }),
-            name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
-          };
-        });
-        _this.chart.axis('increase_value', {
-          label: null,
-          grid: null
-        });
-      }
-      // set axis label and tooltip
+    };
+    _this.drawIncreaseLine = function (_ref2) {
+      var themeColors = _ref2.themeColors;
+      var _this$props$statItem3 = _this.props.statItem,
+        increase_line_color = _this$props$statItem3.increase_line_color,
+        display_increase_percentage = _this$props$statItem3.display_increase_percentage;
+      _this.chart.line().position('name*increase_value').size(3).color(increase_line_color || '#fbd44a').shape('smooth').tooltip('name*increase_value', function (name, value) {
+        return {
+          title: intl.get(TITLE_INCREASE),
+          value: _this.getNumberDisplayString(value || 0, {
+            format: 'percent'
+          }),
+          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
+        };
+      });
+      _this.chart.point().label(display_increase_percentage ? 'increase_value' : false, function (value) {
+        return {
+          content: _this.getNumberDisplayString(value || 0, {
+            format: 'percent'
+          }),
+          style: {
+            fill: themeColors.textColor
+          }
+        };
+      }).color(increase_line_color || '#fbd44a').position('name*increase_value').size(3).tooltip('name*increase_value', function (name, value) {
+        return {
+          title: intl.get(TITLE_INCREASE),
+          value: _this.getNumberDisplayString(value || 0, {
+            format: 'percent'
+          }),
+          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
+        };
+      });
+      _this.chart.axis('increase_value', {
+        label: null,
+        grid: null
+      });
+    };
+    _this.setAxis = function (themeColors) {
       _this.chart.axis('name', {
         line: {
           style: themeColors.gridColor
@@ -216,16 +232,7 @@ var CompareChart = /*#__PURE__*/function (_BaseChart) {
           style: {
             fill: themeColors.textColor
           },
-          formatter: function formatter(name) {
-            var label = name;
-            if (name.length > 10) {
-              label = "".concat(name.slice(0, 10), "...");
-            }
-            if (name === '' || name === 'undefined') {
-              label = intl.get(EMPTY_NAME);
-            }
-            return label;
-          }
+          formatter: _this.labelFormatter
         }
       });
       _this.chart.axis('value', {
@@ -242,6 +249,8 @@ var CompareChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
+    };
+    _this.setLegend = function (themeColors) {
       var legendPosition = 'bottom';
       _this.chart.legend('group_name', {
         position: legendPosition,
@@ -268,29 +277,16 @@ var CompareChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
-      _this.chart.interaction('active-region');
-      _this.chart.removeInteraction('legend-filter');
-      _this.chart.render();
-      _this.renderAxisLabel();
-    };
-    _this.getLabelFontSize = function () {
-      var statItem = _this.props.statItem;
-      var label_font_size = statItem.label_font_size;
-      return getLabelFontSize(label_font_size);
     };
     _this.renderAxisLabel = function (newStatItem) {
-      var _this$props2 = _this.props,
-        getTableById = _this$props2.getTableById,
-        statItem = _this$props2.statItem;
+      var _this$props3 = _this.props,
+        getTableById = _this$props3.getTableById,
+        statItem = _this$props3.statItem;
       if (newStatItem && newStatItem._id !== statItem._id) {
         return;
       }
       if (!_this.chart) return;
       statItem = newStatItem || statItem;
-      var _this$props3 = _this.props,
-        isEnlarge = _this$props3.isEnlarge,
-        isPreview = _this$props3.isPreview,
-        theme = _this$props3.theme;
       var _statItem = statItem,
         table_id = _statItem.table_id,
         x_axis_column_key = _statItem.x_axis_column_key,
@@ -302,10 +298,7 @@ var CompareChart = /*#__PURE__*/function (_BaseChart) {
         y_axis_summary_type = _statItem.y_axis_summary_type;
       var table = getTableById(table_id);
       var autoPadding = _this.chart.autoPadding;
-      var textColor = '#999999';
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        textColor = '#ffffff';
-      }
+      var textColor = _this.getAxisLabelColor();
       var xAxisID = "chart-x-axis-label_".concat(statItem._id);
       var chartContainer = _this.chart.getCanvas().get('container');
       var xLabel = chartContainer.querySelector("#".concat(xAxisID));
@@ -464,13 +457,9 @@ var CompareChart = /*#__PURE__*/function (_BaseChart) {
         showResultDescription = _this$state.showResultDescription;
       var show_y_axis_label = statItem.show_y_axis_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(_ref) {
-          return _this4.container = _ref;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref3) {
+          return _this4.container = _ref3;
         },
         style: {
           padding: show_y_axis_label || show_x_axis_label ? 30 : 20