dtable-statistic 4.0.2-test-2

package/es/stat-view/index.js

@@ -0,0 +1,183 @@
+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 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';
+var StatView = /*#__PURE__*/function (_React$Component) {
+  _inherits(StatView, _React$Component);
+  var _super = _createSuper(StatView);
+  function StatView() {
+    var _this;
+    _classCallCheck(this, StatView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.getStatData = function () {
+      if (!_this.chartView || !_this.chartView.getStatData) return null;
+      return _this.chartView.getStatData();
+    };
+    return _this;
+  }
+  _createClass(StatView, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        isPreview = _this$props.isPreview,
+        isEnlarge = _this$props.isEnlarge,
+        isEdit = _this$props.isEdit,
+        refresh = _this$props.refresh,
+        theme = _this$props.theme,
+        colorThemeName = _this$props.colorThemeName,
+        statItem = _this$props.statItem,
+        chartCalculator = _this$props.chartCalculator,
+        eventBus = _this$props.eventBus,
+        getTableById = _this$props.getTableById,
+        toggleStatisticRecordsDialog = _this$props.toggleStatisticRecordsDialog;
+      var viewProps = {
+        isPreview: isPreview,
+        isEnlarge: isEnlarge,
+        isEdit: isEdit,
+        refresh: refresh,
+        theme: theme,
+        colorThemeName: colorThemeName,
+        statItem: statItem,
+        chartCalculator: chartCalculator,
+        eventBus: eventBus,
+        getTableById: getTableById,
+        toggleStatisticRecordsDialog: toggleStatisticRecordsDialog,
+        ref: function ref(_ref) {
+          _this2.chartView = _ref;
+        }
+      };
+      switch (statItem.type) {
+        case STAT_TYPE.BAR:
+        case STAT_TYPE.BAR_GROUP:
+        case STAT_TYPE.BAR_STACK:
+          {
+            return /*#__PURE__*/React.createElement(BarChart, viewProps);
+          }
+        case STAT_TYPE.COMPARE_BAR:
+          {
+            return /*#__PURE__*/React.createElement(CompareChart, viewProps);
+          }
+        case STAT_TYPE.HORIZONTAL_BAR:
+        case STAT_TYPE.HORIZONTAL_GROUP_BAR:
+        case STAT_TYPE.STACKED_HORIZONTAL_BAR:
+          {
+            return /*#__PURE__*/React.createElement(HorizontalBarChart, viewProps);
+          }
+        case STAT_TYPE.COMPLETENESS_CHART:
+        case STAT_TYPE.GROUP_COMPLETENESS_CHART:
+          {
+            return /*#__PURE__*/React.createElement(CompletenessChart, viewProps);
+          }
+        case STAT_TYPE.LINE:
+        case STAT_TYPE.GROUP_LINE:
+          {
+            return /*#__PURE__*/React.createElement(LineChart, viewProps);
+          }
+        case STAT_TYPE.AREA_CHART:
+        case STAT_TYPE.AREA_GROUP_CHART:
+          {
+            return /*#__PURE__*/React.createElement(AreaChart, viewProps);
+          }
+        case STAT_TYPE.PIE:
+          {
+            return /*#__PURE__*/React.createElement(PieChart, viewProps);
+          }
+        case STAT_TYPE.RING:
+          {
+            return /*#__PURE__*/React.createElement(RingChart, viewProps);
+          }
+        case STAT_TYPE.SCATTER:
+          {
+            return /*#__PURE__*/React.createElement(ScatterChart, viewProps);
+          }
+        case STAT_TYPE.COMBINATION_CHART:
+          {
+            return /*#__PURE__*/React.createElement(CombinationChart, viewProps);
+          }
+        case STAT_TYPE.MAP:
+        case STAT_TYPE.MAP_BUBBLE:
+          {
+            viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
+            return /*#__PURE__*/React.createElement(Map, viewProps);
+          }
+        case STAT_TYPE.WORLD_MAP:
+        case STAT_TYPE.WORLD_MAP_BUBBLE:
+          {
+            viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
+            return /*#__PURE__*/React.createElement(WorldMap, viewProps);
+          }
+        case STAT_TYPE.HEAT_MAP:
+          {
+            viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
+            return /*#__PURE__*/React.createElement(HeatMap, viewProps);
+          }
+        case STAT_TYPE.MIRROR:
+          {
+            viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
+            return /*#__PURE__*/React.createElement(Mirror, viewProps);
+          }
+        case STAT_TYPE.BASIC_NUMBER_CARD:
+          {
+            return /*#__PURE__*/React.createElement(BasicNumberCard, viewProps);
+          }
+        case STAT_TYPE.TREND_CHART:
+          {
+            return /*#__PURE__*/React.createElement(TrendChart, viewProps);
+          }
+        case STAT_TYPE.DASHBOARD:
+          {
+            return /*#__PURE__*/React.createElement(DashboardChart, viewProps);
+          }
+        case STAT_TYPE.TREEMAP:
+          {
+            return /*#__PURE__*/React.createElement(TreeMap, viewProps);
+          }
+        case STAT_TYPE.PIVOT_TABLE:
+          {
+            return /*#__PURE__*/React.createElement(PivotTable, viewProps);
+          }
+        case STAT_TYPE.CUSTOM_BAR:
+          {
+            return /*#__PURE__*/React.createElement(CustomBar, viewProps);
+          }
+        default:
+          {
+            return null;
+          }
+      }
+    }
+  }]);
+  return StatView;
+}(React.Component);
+StatView.defaultProps = {
+  isPreview: false,
+  isEnlarge: false,
+  isEdit: false
+};
+export default StatView;

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

@@ -0,0 +1,505 @@
+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 { getCurrentTheme, getLabelFontSize } from '../utils/common-utils';
+import { getChartDisplayLabels, getChartGroups } from '../utils/basic-chart-utils';
+import { DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_CONFIG_CHANGED, NO_STATISTIC_RESULTS, STATISTICS_COUNT_SHOW, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE, TITLE_AMOUNT, USEABLE_COLOR_TYPES } 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,
+  eventBus: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
+};
+var LineChart = /*#__PURE__*/function (_BaseChart) {
+  _inherits(LineChart, _BaseChart);
+  var _super = _createSuper(LineChart);
+  function LineChart(props) {
+    var _this;
+    _classCallCheck(this, LineChart);
+    _this = _super.call(this, props);
+    _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 currentTheme = getCurrentTheme(colorThemeName);
+      if (isPreview) {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true
+        });
+      } else {
+        _this.chart = new Chart({
+          container: _this.container,
+          height: 400,
+          width: 700
+        });
+      }
+      _this.chart.on('element:click', function (e) {
+        if (e.data && e.data.data) {
+          _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+        }
+      });
+      var table_id = statItem.table_id,
+        summary_type = statItem.summary_type,
+        y_axis_column_key = statItem.y_axis_column_key,
+        y_axis_summary_type = statItem.y_axis_summary_type,
+        summary_method = statItem.summary_method,
+        y_axis_summary_method = statItem.y_axis_summary_method,
+        column_groupby_column_key = statItem.column_groupby_column_key,
+        display_data = statItem.display_data,
+        y_axis_auto_range = statItem.y_axis_auto_range,
+        y_axis_min = statItem.y_axis_min,
+        y_axis_max = statItem.y_axis_max,
+        column_groupby_multiple_numeric_column = statItem.column_groupby_multiple_numeric_column,
+        color_option = statItem.color_option;
+      if (!summary_type && y_axis_summary_type) {
+        summary_type = y_axis_summary_type;
+      }
+      if (!summary_method && y_axis_summary_method) {
+        summary_method = y_axis_summary_method;
+      }
+      var chartBarColor = currentTheme && currentTheme.colors[0] || '#2a67d1';
+      if (column_groupby_column_key || column_groupby_multiple_numeric_column) {
+        _this.chart.scale('group_name', {
+          type: 'cat'
+        });
+      }
+      _this.chart.data(data, {
+        'name': {
+          type: 'cat',
+          nice: false
+        }
+      });
+      var width = _this.chart.coordinateBBox.width;
+      var chartData,
+        columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (column_groupby_column_key || column_groupby_multiple_numeric_column) {
+        chartData = getChartGroups(data);
+      } else {
+        chartData = data;
+      }
+      var labelCount = chartData.length;
+      if (Math.floor(width / labelCount) <= 20) {
+        var displayLabels = getChartDisplayLabels(width, 20, chartData);
+        labelCount = displayLabels.length;
+        _this.chart.scale('name', {
+          type: 'cat',
+          ticks: displayLabels
+        });
+      }
+      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;
+      }
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+
+      // set Coord type
+      _this.chart.coordinate('rect');
+      var valueScaleOptions = {
+        formatter: function formatter(value) {
+          return getNumberDisplayString(value, columnData);
+        }
+      };
+      if (y_axis_auto_range == undefined || y_axis_auto_range) {
+        valueScaleOptions = Object.assign({}, valueScaleOptions, {
+          nice: true
+        });
+      } else {
+        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);
+      }
+      _this.chart.scale({
+        value: valueScaleOptions
+      });
+      if (column_groupby_column_key || column_groupby_multiple_numeric_column) {
+        var 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]) {
+          var groupColorMapping = {};
+          data.forEach(function (item) {
+            if (!groupColorMapping[item.group_name]) {
+              groupColorMapping[item.group_name] = item.color;
+            }
+          });
+          groupColorCallback = function groupColorCallback(group_name) {
+            return groupColorMapping[group_name];
+          };
+        }
+        _this.chart.scale({
+          group_name: {
+            type: 'cat'
+          }
+        });
+        _this.chart.line().position('name*value').color('group_name', groupColorCallback);
+        _this.chart.point().label(display_data ? 'value' : false, {
+          style: {
+            fontSize: _this.getLabelFontSize(),
+            fill: themeColors.textColor
+          }
+        }).position('name*value').size(3).color('group_name', groupColorCallback).tooltip('name*value*group_name', function (name, value, group_name) {
+          return {
+            title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
+            value: getNumberDisplayString(value, columnData),
+            name: !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name
+          };
+        }).shape('circle').style({
+          lineWidth: 1,
+          stroke: '#fff'
+        });
+      } else {
+        _this.chart.line().position('name*value').color(chartBarColor).tooltip('name*value', function (name, value) {
+          return {
+            name: summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summary_method]),
+            value: getNumberDisplayString(value, columnData)
+          };
+        });
+        _this.chart.point().label(display_data ? 'value' : false, {
+          style: {
+            fontSize: _this.getLabelFontSize(),
+            fill: themeColors.textColor
+          }
+        }).position('name*value').color(chartBarColor).shape('circle').size(3).style({
+          lineWidth: 1,
+          stroke: '#fff'
+        }).tooltip('name*value', function (name, value) {
+          return {
+            name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
+            value: getNumberDisplayString(value, columnData),
+            title: summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summary_method])
+          };
+        });
+      }
+      _this.chart.tooltip({
+        showCrosshairs: true,
+        showTitle: true,
+        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.axis('name', {
+        line: {
+          style: themeColors.gridColor
+        },
+        label: {
+          style: {
+            fill: themeColors.textColor
+          },
+          offset: 20,
+          autoRotate: true,
+          rotate: labelCount > 11 ? 0.3 : 0,
+          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;
+          }
+        }
+      });
+      _this.chart.axis('value', {
+        label: {
+          style: {
+            fill: themeColors.textColor
+          }
+        },
+        grid: {
+          line: {
+            style: {
+              stroke: themeColors.gridColor
+            }
+          }
+        }
+      });
+      _this.chart.theme({
+        geometries: {
+          point: {
+            circle: {
+              active: {
+                style: {
+                  stroke: 'rgba(0, 0, 0, 0)',
+                  r: 4
+                }
+              }
+            }
+          }
+        }
+      });
+      _this.chart.legend('group_name', {
+        position: 'bottom',
+        itemName: {
+          style: {
+            fill: themeColors.textColor
+          },
+          formatter: function formatter(name) {
+            return !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
+          }
+        },
+        pageNavigator: {
+          text: {
+            style: {
+              fill: themeColors.textColor
+            }
+          },
+          marker: {
+            style: {
+              fill: themeColors.legendPageNavigatorMarkerColor,
+              inactiveFill: themeColors.legendPageNavigatorMarkerColor,
+              inactiveOpacity: 0.45
+            }
+          }
+        }
+      });
+      _this.chart.render();
+      _this.renderAxisLabel();
+    };
+    _this.renderAxisLabel = function (newStatItem) {
+      var _this$props2 = _this.props,
+        getTableById = _this$props2.getTableById,
+        statItem = _this$props2.statItem,
+        isEnlarge = _this$props2.isEnlarge,
+        isPreview = _this$props2.isPreview,
+        theme = _this$props2.theme;
+      if (newStatItem && newStatItem._id !== statItem._id) {
+        return;
+      }
+      if (!_this.chart) return;
+      statItem = newStatItem || statItem;
+      var _statItem = statItem,
+        table_id = _statItem.table_id,
+        x_axis_column_key = _statItem.x_axis_column_key,
+        y_axis_column_key = _statItem.y_axis_column_key,
+        show_y_axis_label = _statItem.show_y_axis_label,
+        show_x_axis_label = _statItem.show_x_axis_label,
+        y_axis_label_position = _statItem.y_axis_label_position,
+        x_axis_label_position = _statItem.x_axis_label_position,
+        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 xAxisID = "chart-x-axis-label_".concat(statItem._id);
+      var chartContainer = _this.chart.getCanvas().get('container');
+      var xLabel = chartContainer.querySelector("#".concat(xAxisID));
+      if (!xLabel && show_x_axis_label) {
+        var div = document.createElement('div');
+        div.id = xAxisID;
+        div.className = 'statistic-chart-axis-label';
+        var column = TableUtils.getTableColumnByKey(table, x_axis_column_key);
+        div.innerHTML = "".concat(column ? column.name : '');
+        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
+        chartContainer.appendChild(div);
+      }
+      if (xLabel && show_x_axis_label) {
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
+      }
+      if (xLabel && !show_x_axis_label) {
+        xLabel.parentNode.removeChild(xLabel);
+      }
+      var yAxisID = "chart-y-axis-label_".concat(statItem._id);
+      var yLabel = chartContainer.querySelector("#".concat(yAxisID));
+      var paddingLeft = autoPadding.bottom + (show_x_axis_label ? 10 : 0);
+      if (!yLabel && show_y_axis_label) {
+        var _div = document.createElement('div');
+        _div.id = yAxisID;
+        _div.className = 'statistic-chart-axis-label';
+        if (y_axis_summary_type === SUMMARY_TYPE.COUNT) {
+          _div.innerHTML = intl.get(TITLE_AMOUNT);
+        } else {
+          var _column = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
+          _div.innerHTML = _column.name || '';
+        }
+        var containerHeight = chartContainer.offsetHeight;
+        var textAlign = 'center';
+        if (y_axis_label_position === 'bottom') textAlign = 'left';
+        if (y_axis_label_position === 'top') textAlign = 'right';
+        _div.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        chartContainer.appendChild(_div);
+      }
+      if (yLabel && show_y_axis_label) {
+        var _containerHeight = chartContainer.offsetHeight;
+        var _textAlign = 'center';
+        if (y_axis_label_position === 'bottom') _textAlign = 'left';
+        if (y_axis_label_position === 'top') _textAlign = 'right';
+        yLabel.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(_containerHeight, "px; text-align: ").concat(_textAlign, "; top: 0; left: 0px; transform: translate(-").concat(_containerHeight / 2 + 12, "px, ").concat((_containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+      }
+      if (yLabel && !show_y_axis_label) {
+        yLabel.parentNode.removeChild(yLabel);
+      }
+    };
+    _this.destroyChart = function () {
+      _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
+    };
+    _this.calculateData = null;
+    return _this;
+  }
+  _createClass(LineChart, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var _this$props3 = this.props,
+        statItem = _this$props3.statItem,
+        chartCalculator = _this$props3.chartCalculator,
+        eventBus = _this$props3.eventBus;
+      this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, function (newStatItem) {
+        _this2.renderAxisLabel(newStatItem);
+      });
+      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;
+      this.unsubscribeStyleChange();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      var statItem = this.props.statItem;
+      var _this$state = this.state,
+        isCalculatingData = _this$state.isCalculatingData,
+        showResultDescription = _this$state.showResultDescription;
+      var show_y_axis_label = statItem.show_y_axis_label,
+        show_x_axis_label = statItem.show_x_axis_label;
+      var style = {
+        padding: show_y_axis_label || show_x_axis_label ? 30 : 20
+      };
+      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;
+        },
+        style: style,
+        className: "statistic-chart-container"
+      }));
+    }
+  }]);
+  return LineChart;
+}(BaseChart);
+LineChart.propTypes = propTypes;
+export default LineChart;