dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,558 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+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 { 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';
+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 CombinationChart = /*#__PURE__*/function (_BaseChart) {
+  _inherits(CombinationChart, _BaseChart);
+  var _super = _createSuper(CombinationChart);
+  function CombinationChart(props) {
+    var _this;
+    _classCallCheck(this, CombinationChart);
+    _this = _super.call(this, props);
+    _this.componentDidMount = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _this$props, statItem, chartCalculator, eventBus, data, showResultDescription;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = _this.props, statItem = _this$props.statItem, chartCalculator = _this$props.chartCalculator, eventBus = _this$props.eventBus;
+              _this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, function (newStatItem) {
+                _this.renderAxisLabel(newStatItem);
+              });
+              if (_this.container) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return");
+            case 4:
+              _context.next = 6;
+              return chartCalculator.calculate(statItem);
+            case 6:
+              data = _context.sent;
+              showResultDescription = data.length > 0 ? false : true;
+              _this.setState({
+                isCalculatingData: false,
+                showResultDescription: showResultDescription
+              }, function () {
+                if (!showResultDescription) {
+                  _this.drawChart(data);
+                  _this.calculateData = data;
+                }
+              });
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    _this.componentDidUpdate = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(preProps, preState) {
+        var _this$props2, statItem, chartCalculator, isCalculatingData, data, showResultDescription;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _this$props2 = _this.props, statItem = _this$props2.statItem, chartCalculator = _this$props2.chartCalculator;
+                isCalculatingData = _this.state.isCalculatingData;
+                if (!(isCalculatingData !== preState.isCalculatingData)) {
+                  _context2.next = 4;
+                  break;
+                }
+                return _context2.abrupt("return");
+              case 4:
+                if (!_this.shouldCalculateStatItem(preProps, _this.props)) {
+                  _context2.next = 16;
+                  break;
+                }
+                _this.setState({
+                  isCalculatingData: true
+                });
+                if (!_this.container) {
+                  _context2.next = 14;
+                  break;
+                }
+                _context2.next = 9;
+                return chartCalculator.calculate(statItem);
+              case 9:
+                data = _context2.sent;
+                showResultDescription = data.length > 0 ? false : true;
+                _this.chart && _this.destroyChart();
+                _this.calculateData = data;
+                _this.setState({
+                  isCalculatingData: false,
+                  showResultDescription: showResultDescription
+                }, function () {
+                  if (!showResultDescription) {
+                    _this.drawChart(data);
+                    if (_this.props.isPreview) _this.chart.forceFit();
+                  }
+                });
+              case 14:
+                _context2.next = 17;
+                break;
+              case 16:
+                if (!_this.state.showResultDescription) {
+                  _this.chart && _this.destroyChart();
+                  _this.drawChart(_this.calculateData);
+                  if (_this.props.isPreview) {
+                    _this.chart.forceFit();
+                  }
+                }
+              case 17:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    _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;
+      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,
+        show_y_axis_left_label = _statItem.show_y_axis_left_label,
+        show_y_axis_right_label = _statItem.show_y_axis_right_label,
+        show_x_axis_label = _statItem.show_x_axis_label,
+        y_axis_left_label_position = _statItem.y_axis_left_label_position,
+        y_axis_right_label_position = _statItem.y_axis_right_label_position,
+        y_axis_left_summary_column = _statItem.y_axis_left_summary_column,
+        y_axis_right_summary_column = _statItem.y_axis_right_summary_column,
+        x_axis_label_position = _statItem.x_axis_label_position,
+        y_axis_left_summary_method = _statItem.y_axis_left_summary_method,
+        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 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(themeColors.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(themeColors.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 yAxisLeftID = "chart-y-axis-left-label_".concat(statItem._id);
+      var yAxisLeftLabel = chartContainer.querySelector("#".concat(yAxisLeftID));
+      if (!yAxisLeftLabel && show_y_axis_left_label) {
+        var _div = document.createElement('div');
+        _div.id = yAxisLeftID;
+        _div.className = 'statistic-chart-axis-label';
+        var yAxisColumn = TableUtils.getTableColumnByKey(table, y_axis_left_summary_column);
+        var labeContent = yAxisColumn ? intl.get(STATISTICS_COUNT_SHOW[y_axis_left_summary_method]) : intl.get(STATISTICS_COUNT_SHOW.count);
+        _div.innerHTML = labeContent;
+        var containerHeight = chartContainer.offsetHeight;
+        var textAlign = 'center';
+        if (y_axis_left_label_position === 'bottom') textAlign = 'left';
+        if (y_axis_left_label_position === 'top') textAlign = 'right';
+        _div.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(containerHeight, "px; padding-left: ").concat(autoPadding.bottom, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-90deg)"));
+        chartContainer.appendChild(_div);
+      }
+      if (yAxisLeftLabel && show_y_axis_left_label) {
+        var _containerHeight = chartContainer.offsetHeight;
+        var _textAlign = 'center';
+        if (y_axis_left_label_position === 'bottom') _textAlign = 'left';
+        if (y_axis_left_label_position === 'top') _textAlign = 'right';
+        yAxisLeftLabel.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(_containerHeight, "px; padding-left: ").concat(autoPadding.bottom, "px; text-align: ").concat(_textAlign, "; top: 0; left: 0px; transform: translate(-").concat(_containerHeight / 2 + 12, "px, ").concat((_containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-90deg)"));
+      }
+      if (yAxisLeftLabel && !show_y_axis_left_label) {
+        yAxisLeftLabel.parentNode.removeChild(yAxisLeftLabel);
+      }
+      var yAxisRightID = "chart-y-axis-right-label_".concat(statItem._id);
+      var yAxisRightLabel = chartContainer.querySelector("#".concat(yAxisRightID));
+      if (!yAxisRightLabel && show_y_axis_right_label) {
+        var _div2 = document.createElement('div');
+        _div2.id = yAxisRightID;
+        _div2.className = 'statistic-chart-axis-label';
+        var _yAxisColumn = TableUtils.getTableColumnByKey(table, y_axis_right_summary_column);
+        var _labeContent = _yAxisColumn ? intl.get(STATISTICS_COUNT_SHOW[y_axis_right_summary_method]) : intl.get(STATISTICS_COUNT_SHOW.count);
+        _div2.innerHTML = _labeContent;
+        var _containerHeight2 = chartContainer.offsetHeight;
+        var _textAlign2 = 'center';
+        if (y_axis_right_label_position === 'bottom') _textAlign2 = 'right';
+        if (y_axis_right_label_position === 'top') _textAlign2 = 'left';
+        _div2.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(_containerHeight2, "px; padding-right: ").concat(autoPadding.bottom, "px; text-align: ").concat(_textAlign2, "; top: 0; right: 0px; transform: translate(").concat(_containerHeight2 / 2 + 12, "px, ").concat((_containerHeight2 - autoPadding.bottom) / 2 - 6, "px) rotate(-270deg)"));
+        chartContainer.appendChild(_div2);
+      }
+      if (yAxisRightLabel && show_y_axis_right_label) {
+        var _containerHeight3 = chartContainer.offsetHeight;
+        var _textAlign3 = 'center';
+        if (y_axis_right_label_position === 'bottom') _textAlign3 = 'right';
+        if (y_axis_right_label_position === 'top') _textAlign3 = 'left';
+        yAxisRightLabel.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(_containerHeight3, "px; padding-right: ").concat(autoPadding.bottom, "px; text-align: ").concat(_textAlign3, "; top: 0; right: 0px; transform: translate(").concat(_containerHeight3 / 2 + 12, "px, ").concat((_containerHeight3 - autoPadding.bottom) / 2 - 6, "px) rotate(-270deg)"));
+      }
+      if (yAxisRightLabel && !show_y_axis_right_label) {
+        yAxisRightLabel.parentNode.removeChild(yAxisRightLabel);
+      }
+    };
+    _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_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,
+        y_axis_min_left = _statItem$y_axis_min_ === void 0 ? 0 : _statItem$y_axis_min_,
+        _statItem$y_axis_max_ = statItem.y_axis_max_left,
+        y_axis_max_left = _statItem$y_axis_max_ === void 0 ? 0 : _statItem$y_axis_max_,
+        _statItem$y_axis_auto2 = statItem.y_axis_auto_range_right,
+        y_axis_auto_range_right = _statItem$y_axis_auto2 === void 0 ? true : _statItem$y_axis_auto2,
+        _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;
+      var leftValueScaleOptions = {
+        formatter: function formatter(value) {
+          return getNumberDisplayString(value, column1Data);
+        }
+      };
+      var rightValueScaleOptions = {
+        formatter: function formatter(value) {
+          return getNumberDisplayString(value, column2Data);
+        }
+      };
+      if (!y_axis_auto_range_left) {
+        leftValueScaleOptions = Object.assign({}, leftValueScaleOptions, {
+          min: y_axis_min_left,
+          max: y_axis_max_left
+        });
+      }
+      if (!y_axis_auto_range_right) {
+        rightValueScaleOptions = Object.assign({}, rightValueScaleOptions, {
+          min: y_axis_min_right,
+          max: y_axis_max_right
+        });
+      }
+      _this.chart.scale({
+        name: {
+          type: 'cat'
+        },
+        // Automatic adjustment of maximum and minimum values
+        // Automatic adjustment of maximum and minimum values
+        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.chart.axis('name', {
+        label: {
+          style: {
+            fill: themeColors.textColor
+          },
+          formatter: function formatter(name) {
+            if (name === '' || name == null) {
+              return intl.get(EMPTY_NAME);
+            }
+            return name;
+          }
+        },
+        line: {
+          style: themeColors.gridColor
+        }
+      });
+      _this.chart.axis('value_left', {
+        grid: {
+          line: {
+            style: {
+              stroke: themeColors.gridColor
+            }
+          }
+        },
+        label: {
+          style: {
+            fill: themeColors.textColor
+          }
+        }
+      });
+      _this.chart.axis('value_right', {
+        grid: null,
+        label: {
+          style: {
+            fill: themeColors.textColor
+          }
+        }
+      });
+      var legendPosition = 'bottom';
+      _this.chart.legend({
+        custom: true,
+        position: legendPosition,
+        itemName: {
+          style: {
+            fill: themeColors.textColor
+          }
+        },
+        items: _this.getLegend(table, currentTheme)
+      });
+      _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) {
+        return {
+          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) {
+        return {
+          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, {
+        style: {
+          fontSize: getLabelFontSize(label_font_size),
+          fill: themeColors.textColor
+        }
+      }).tooltip('name*value_right', function (name, value) {
+        return {
+          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;
+      var y_axis_left_group_by_multiple_numeric_column = statItem.y_axis_left_group_by_multiple_numeric_column,
+        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_group_by_numeric_columns = statItem.y_axis_left_group_by_numeric_columns;
+      var legendItems = [];
+      var column1 = TableUtils.getTableColumnByKey(table, y_axis_left_summary_column) || {};
+      var column2 = TableUtils.getTableColumnByKey(table, y_axis_right_summary_column) || {};
+      if (!y_axis_left_group_by_multiple_numeric_column) {
+        legendItems.push({
+          value: 'value_left',
+          name: column1.name || intl.get(LEGEND_LEFT),
+          marker: {
+            symbol: 'square',
+            style: {
+              fill: colorTheme && colorTheme.colors[0],
+              r: 5
+            }
+          }
+        }, {
+          value: 'value_right',
+          name: column2.name || intl.get(LEGEND_RIGHT),
+          marker: {
+            symbol: 'hyphen',
+            style: {
+              stroke: colorTheme && colorTheme.colors[1],
+              r: 5,
+              lineWidth: 3
+            }
+          }
+        });
+      } else {
+        legendItems.push({
+          value: 'value_left',
+          name: column1.name || intl.get(LEGEND_LEFT),
+          marker: {
+            fill: LABEL_COLORS[0],
+            symbol: 'square',
+            style: {
+              r: 5
+            }
+          }
+        });
+        y_axis_left_group_by_numeric_columns.forEach(function (item, index) {
+          var column = TableUtils.getTableColumnByKey(table, item.column_key) || {};
+          legendItems.push({
+            value: 'group_name',
+            name: column.name || intl.get(LEGEND_LEFT),
+            marker: {
+              symbol: 'square',
+              style: {
+                fill: LABEL_COLORS[(index + 1) % 12],
+                r: 5
+              }
+            }
+          });
+        });
+        legendItems.push({
+          value: 'value_right',
+          name: column2.name || intl.get(LEGEND_RIGHT),
+          marker: {
+            symbol: 'hyphen',
+            style: {
+              stroke: colorTheme && colorTheme.colors[1],
+              r: 5,
+              lineWidth: 3
+            }
+          }
+        });
+      }
+      return legendItems;
+    };
+    _this.destroyChart = function () {
+      _this.chart.destroy();
+      _this.chart = null;
+    };
+    _this.state = {
+      isCalculatingData: true,
+      showResultDescription: true
+    };
+    _this.calculateData = null;
+    return _this;
+  }
+  _createClass(CombinationChart, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var _this$props5 = this.props,
+        theme = _this$props5.theme,
+        colorThemeName = _this$props5.colorThemeName;
+      if (this.canUpdate(this.props, nextProps)) {
+        return true;
+      }
+      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+        return true;
+      }
+      if (nextProps.theme !== theme) {
+        return true;
+      }
+      if (nextProps.colorThemeName !== colorThemeName) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.container = null;
+      this.unsubscribeStyleChange();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var statItem = this.props.statItem;
+      var _this$state = this.state,
+        isCalculatingData = _this$state.isCalculatingData,
+        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;
+        },
+        style: {
+          padding: show_y_axis_left_label || show_x_axis_label ? 30 : 20
+        },
+        className: "statistic-chart-container"
+      }));
+    }
+  }]);
+  return CombinationChart;
+}(BaseChart);
+CombinationChart.propTypes = propTypes;
+export default CombinationChart;