dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,416 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+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_ANNOTATION_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_FORMATS, LABEL_POSITIONS, NO_STATISTIC_RESULTS, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE, TITLE_TOTAL } 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,
+  toggleStatisticRecordsDialog: PropTypes.func
+};
+var RingChart = /*#__PURE__*/function (_BaseChart) {
+  _inherits(RingChart, _BaseChart);
+  var _super = _createSuper(RingChart);
+  function RingChart(props) {
+    var _this;
+    _classCallCheck(this, RingChart);
+    _this = _super.call(this, props);
+    _this.drawChart = function (data) {
+      var _this$props = _this.props,
+        isPreview = _this$props.isPreview,
+        statItem = _this$props.statItem;
+      if (isPreview) {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true,
+          padding: [20, 0]
+        });
+      } else {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true,
+          height: 400,
+          width: 700
+        });
+      }
+      _this.chart.on('element:click', function (e) {
+        var clickData = e.data.data;
+        if (clickData.name !== 'Others') {
+          _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+        }
+      });
+      _this.drawRingChart(data, !isPreview);
+      _this.chart.render();
+    };
+    _this.drawRingChart = function (data, isCreating) {
+      _this.sum = data.total;
+      if (data.length === 0) return;
+      var _this$props2 = _this.props,
+        getTableById = _this$props2.getTableById,
+        statItem = _this$props2.statItem,
+        theme = _this$props2.theme,
+        isEnlarge = _this$props2.isEnlarge,
+        isPreview = _this$props2.isPreview,
+        colorThemeName = _this$props2.colorThemeName;
+      var currentTheme = getCurrentTheme(colorThemeName);
+      var summaryColumn = null;
+      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      var summary_type = statItem.summary_type,
+        summary_column_key = statItem.summary_column_key,
+        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,
+        display_annotation = statItem.display_annotation;
+      var table = getTableById(table_id);
+      if (summary_type !== SUMMARY_TYPE.COUNT) {
+        summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key);
+        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      _this.chart.coordinate('theta', {
+        radius: isCreating ? 0.75 : 0.95,
+        innerRadius: isCreating ? 0.6 : 0.7
+      });
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      var newData = formatPieChartData(data, statItem, table, currentTheme);
+      _this.chart.data(newData, {
+        'name': {
+          type: 'cat',
+          nice: false
+        }
+      });
+      var colorSet = newData.colorSet;
+      _this.sum = newData.total;
+      if (show_legend) {
+        _this.chart.legend('name', {
+          position: 'right',
+          custom: true,
+          pageNavigator: {
+            text: {
+              style: {
+                fill: themeColors.textColor
+              }
+            },
+            marker: {
+              style: {
+                fill: themeColors.legendPageNavigatorMarkerColor,
+                inactiveFill: themeColors.legendPageNavigatorMarkerColor,
+                inactiveOpacity: 0.45
+              }
+            }
+          },
+          itemName: {
+            style: {
+              fill: themeColors.textColor
+            }
+          },
+          items: newData.map(function (obj, index) {
+            var sIndex = String(index);
+            var colorIndex = sIndex.charAt(sIndex.length - 1);
+            var name = obj.name;
+            if (!obj.name && typeof obj.name !== 'number') {
+              name = intl.get(EMPTY_NAME);
+            } else if (obj.name === 'Others') {
+              name = intl.get('Others');
+            }
+            return {
+              name: name,
+              value: obj.value,
+              marker: {
+                symbol: 'circle',
+                style: {
+                  r: 5,
+                  fill: colorSet[colorIndex]
+                }
+              }
+            };
+          })
+        });
+      } else {
+        _this.chart.legend(false);
+      }
+
+      // Do not automatically adjust the maximum and minimum values in ring chart
+      _this.chart.scale({
+        value: {
+          nice: false
+        }
+      });
+      _this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', function (value, percent) {
+        var displayedValue = getNumberDisplayString(value, columnData);
+        return {
+          content: _this.getLabel(displayedValue, percent)
+        };
+      }, {
+        offset: !label_position || label_position == LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
+        style: {
+          fill: themeColors.labelColor,
+          fontSize: _this.getLabelFontSize(),
+          shadowBlur: 2,
+          shadowColor: 'rgba(0, 0, 0, .45)'
+        }
+      }).tooltip('name*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)
+        } : {
+          name: title,
+          value: displayedValue
+        };
+      }).state({
+        active: {
+          style: {
+            fillOpacity: 0.7,
+            border: 'none',
+            stroke: 0
+          }
+        }
+      });
+      _this.chart.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        itemTpl: '<div class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</div>'
+      });
+      _this.chart.interaction('element-active');
+      if (display_annotation == undefined || display_annotation) {
+        _this.setAnnotation({
+          name: intl.get(TITLE_TOTAL),
+          value: summaryColumn ? getNumberDisplayString(_this.sum, summaryColumn.data) : _this.sum
+        }, themeColors.labelColor);
+        _this.chart.on('interval:mouseenter', function (evt) {
+          return _this.onEnterRingChart(evt, themeColors.labelColor, summaryColumn);
+        });
+        _this.chart.on('interval:mouseleave', function (evt) {
+          return _this.onLeaveRingChart(evt, themeColors.labelColor, summaryColumn);
+        });
+      }
+    };
+    _this.getLabel = function (value, percent) {
+      var _this$props$statItem = _this.props.statItem,
+        show_percent = _this$props$statItem.show_percent,
+        display_label = _this$props$statItem.display_label,
+        label_format = _this$props$statItem.label_format;
+      var content;
+      if (show_percent) {
+        content = percent;
+        return content;
+      } else {
+        if (!display_label) {
+          content = '';
+          return content;
+        }
+      }
+      switch (label_format) {
+        case LABEL_FORMATS[0]:
+          content = percent;
+          break;
+        case LABEL_FORMATS[1]:
+          content = value;
+          break;
+        case LABEL_FORMATS[2]:
+          content = "".concat(value, " (").concat(percent, ")");
+          break;
+        default:
+          content = percent;
+      }
+      return content;
+    };
+    _this.getLabelFontSize = function () {
+      var statItem = _this.props.statItem;
+      var label_font_size = statItem.label_font_size;
+      return getLabelFontSize(label_font_size);
+    };
+    _this.getAnnotationFontSize = function () {
+      var statItem = _this.props.statItem;
+      var annotation_font_size = statItem.annotation_font_size;
+      var mainFontSize = annotation_font_size || DEFAULT_ANNOTATION_SIZE;
+      var subFontSize = Math.max(mainFontSize - 12, 12);
+      return {
+        mainFontSize: mainFontSize,
+        subFontSize: subFontSize
+      };
+    };
+    _this.setAnnotation = function (content, fontColor, summaryColumn) {
+      var name = content.name;
+      if (!name || name === 'undefined') {
+        name = intl.get(EMPTY_NAME);
+      } else if (name === 'Others') {
+        name = intl.get('Others');
+      }
+      var _this$getAnnotationFo = _this.getAnnotationFontSize(),
+        mainFontSize = _this$getAnnotationFo.mainFontSize,
+        subFontSize = _this$getAnnotationFo.subFontSize;
+      _this.chart.annotation().text({
+        content: name,
+        position: ['50%', '50%'],
+        style: {
+          fontSize: subFontSize,
+          fill: fontColor,
+          fontWeight: '300',
+          textAlign: 'center'
+        },
+        offsetY: -20
+      }).text({
+        position: ['50%', '50%'],
+        content: summaryColumn ? getNumberDisplayString(content.value, summaryColumn.data) : content.value,
+        style: {
+          fontSize: mainFontSize,
+          fill: fontColor,
+          textAlign: 'center'
+        },
+        offsetY: 20
+      });
+    };
+    _this.onEnterRingChart = function (ev, color, summaryColumn) {
+      var item = ev.data.data;
+      _this.chart.annotation().clear(true);
+      _this.setAnnotation(item, color, summaryColumn);
+      _this.chart.render(true);
+    };
+    _this.onLeaveRingChart = function (ev, color, summaryColumn) {
+      _this.chart.annotation().clear(true);
+      _this.setAnnotation({
+        name: intl.get(TITLE_TOTAL),
+        value: _this.sum
+      }, color, summaryColumn);
+      _this.chart.render(true);
+    };
+    _this.destroyChart = function () {
+      _this.chart.destroy();
+      _this.chart = null;
+    };
+    _this.state = {
+      isCalculatingData: true,
+      showResultDescription: true
+    };
+    _this.calculateData = null;
+    return _this;
+  }
+  _createClass(RingChart, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      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.length > 0 ? false : true;
+          _this2.setState({
+            isCalculatingData: false,
+            showResultDescription: showResultDescription
+          }, function () {
+            if (!showResultDescription) {
+              _this2.drawChart(data);
+              _this2.calculateData = data;
+            }
+          });
+        });
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var colorThemeName = this.props.colorThemeName;
+      if (this.canUpdate(this.props, nextProps)) {
+        return true;
+      }
+      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+        return true;
+      }
+      if (nextProps.colorThemeName !== colorThemeName) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(preProps, preState) {
+      var _this3 = this;
+      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)) {
+        this.setState({
+          isCalculatingData: true
+        });
+        if (this.container) {
+          chartCalculator.calculate(statItem).then(function (data) {
+            var showResultDescription = data.length > 0 ? false : true;
+            _this3.chart && _this3.destroyChart();
+            _this3.calculateData = data;
+            _this3.setState({
+              isCalculatingData: false,
+              showResultDescription: showResultDescription
+            }, function () {
+              if (!showResultDescription) {
+                _this3.drawChart(data);
+                if (_this3.props.isPreview) _this3.chart.forceFit();
+              }
+            });
+          });
+        }
+      } else {
+        if (!this.state.showResultDescription) {
+          this.chart && this.destroyChart();
+          this.drawChart(this.calculateData);
+          if (this.props.isPreview) {
+            this.chart.forceFit();
+          }
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.container = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      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", {
+        ref: function ref(_ref) {
+          return _this4.container = _ref;
+        },
+        className: "".concat(chartStyles['statistic-pie-chart-container'], " statistic-chart-container")
+      }));
+    }
+  }]);
+  return RingChart;
+}(BaseChart);
+RingChart.propTypes = propTypes;
+export default RingChart;