sea-chart 0.0.1

package/lib/components/formatter/chart-component.js

@@ -0,0 +1,266 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import { Component } from 'react';
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import { Chart } from '../../utils/custom-g2';
+import { StatisticsUtils } from '../../utils';
+import { STATISTIC_SUMMARY_TYPE, LABEL_POSITION_TYPE, STATISTIC_THEME_COLOR, EMPTY_NAME } from '../../constants';
+import intl from '../../intl';
+var ChartComponent = /*#__PURE__*/function (_Component) {
+  _inherits(ChartComponent, _Component);
+  var _super = _createSuper(ChartComponent);
+  function ChartComponent() {
+    var _this;
+    _classCallCheck(this, ChartComponent);
+    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.initChart = function (container, _ref) {
+      var appendPadding = _ref.appendPadding;
+      var config = {
+        container: container,
+        autoFit: true,
+        width: '100%',
+        height: '100%'
+      };
+      if (appendPadding) {
+        config.appendPadding = appendPadding;
+      }
+      _this.chart = new Chart(config);
+    };
+    _this.loadData = function (data) {
+      _this.chart.data(data, {
+        'name': {
+          type: 'cat',
+          nice: false
+        }
+      });
+    };
+    _this.getChartDisplayLabels = function (containerWidth, minItemWidth, statistics) {
+      var labels = [];
+      var labelCount = Math.floor(containerWidth / minItemWidth);
+      labelCount = labelCount % 2 ? labelCount + 1 : labelCount;
+      var avg = Math.round(statistics.length / labelCount);
+      avg = avg > 2 ? avg : 2;
+      Array.isArray(statistics) && statistics.forEach(function (v, i) {
+        if (i % avg === 0) {
+          labels.push(v.name);
+        }
+      });
+      return labels;
+    };
+    _this.getChartGroupData = function (data) {
+      var chartGroupData = [];
+      Array.isArray(data) && data.forEach(function (item) {
+        if (!chartGroupData.find(function (g) {
+          return g.name === item.name;
+        })) {
+          chartGroupData.push(item);
+        }
+      });
+      return chartGroupData;
+    };
+    _this.drawLabels = function () {
+      var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      if (!_this.chart) return;
+      var width = _this.chart.coordinateBBox.width;
+      _this.labelCount = data.length;
+      if (Math.floor(width / _this.labelCount) <= 20) {
+        var displayLabels = _this.getChartDisplayLabels(width, 20, data);
+        _this.labelCount = displayLabels.length;
+        _this.chart.scale('name', {
+          type: 'cat',
+          ticks: displayLabels
+        });
+      }
+    };
+    _this.renderAxisLabel = function (statistic, tables) {
+      if (!_this.chart || !statistic) return;
+      var _statistic$config = statistic.config,
+        table_id = _statistic$config.table_id,
+        x_axis_column_key = _statistic$config.x_axis_column_key,
+        y_axis_summary_column_key = _statistic$config.y_axis_summary_column_key,
+        y_axis_show_label = _statistic$config.y_axis_show_label,
+        x_axis_show_label = _statistic$config.x_axis_show_label,
+        y_axis_label_position = _statistic$config.y_axis_label_position,
+        x_axis_label_position = _statistic$config.x_axis_label_position,
+        y_axis_summary_type = _statistic$config.y_axis_summary_type;
+      var table = getTableById(tables, table_id);
+      var autoPadding = _this.chart.autoPadding;
+      var textColor = '#999';
+      var xAxisID = "chart-x-axis-label_".concat(statistic.id);
+      var chartContainer = _this.chart.getCanvas().get('container');
+      var xLabel = chartContainer.querySelector("#".concat(xAxisID));
+      if (!xLabel && x_axis_show_label) {
+        var div = document.createElement('div');
+        div.id = xAxisID;
+        div.className = 'chart-axis-label';
+        var column = getTableColumnByKey(table, x_axis_column_key);
+        div.innerHTML = "".concat(column ? column.name : '');
+        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
+        chartContainer.appendChild(div);
+      }
+      if (xLabel && x_axis_show_label) {
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
+      }
+      if (xLabel && !x_axis_show_label) {
+        xLabel.parentNode.removeChild(xLabel);
+      }
+      var yAxisID = "chart-y-axis-label_".concat(statistic.id);
+      var yLabel = chartContainer.querySelector("#".concat(yAxisID));
+      if (!yLabel && y_axis_show_label) {
+        var _div = document.createElement('div');
+        _div.id = yAxisID;
+        _div.className = 'chart-axis-label';
+        if (y_axis_summary_type === STATISTIC_SUMMARY_TYPE.COUNT) {
+          _div.innerHTML = intl.get('Amount');
+        } else {
+          var _column = getTableColumnByKey(table, y_axis_summary_column_key) || {};
+          _div.innerHTML = _column.name || '';
+        }
+        var containerHeight = chartContainer.offsetHeight;
+        var textAlign = 'center';
+        if (y_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (y_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
+        _div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        chartContainer.appendChild(_div);
+      }
+      if (yLabel && y_axis_show_label) {
+        var _containerHeight = chartContainer.offsetHeight;
+        var _textAlign = 'center';
+        if (y_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) _textAlign = 'left';
+        if (y_axis_label_position === LABEL_POSITION_TYPE.TOP) _textAlign = 'right';
+        yLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(_containerHeight, "px; text-align: ").concat(_textAlign, "; top: 0; left: 0; transform: translate(-").concat(_containerHeight / 2 + 12, "px, ").concat((_containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+      }
+      if (yLabel && !y_axis_show_label) {
+        yLabel.parentNode.removeChild(yLabel);
+      }
+    };
+    // Automatic adjustment of maximum and minimum values
+    _this.autoAdjustDataOptions = function (statistic) {
+      var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var summaryColumn = arguments.length > 2 ? arguments[2] : undefined;
+      if (!_this.chart || !statistic) return;
+      var valueScaleOptions = {};
+      var config = statistic.config;
+      var y_axis_auto_range = config.y_axis_auto_range,
+        y_axis_min = config.y_axis_min,
+        y_axis_max = config.y_axis_max,
+        y_axis_summary_method = config.y_axis_summary_method;
+      if (summaryColumn) {
+        valueScaleOptions['formatter'] = function (value) {
+          return StatisticsUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method);
+        };
+      }
+      if (y_axis_auto_range === undefined || y_axis_auto_range) {
+        valueScaleOptions['nice'] = true;
+      } else {
+        valueScaleOptions['min'] = y_axis_min;
+        valueScaleOptions['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({
+        name: {
+          type: 'cat'
+        },
+        value: valueScaleOptions
+      });
+    };
+    // set axis label and tooltip
+    _this.setNameLabelAndTooltip = function () {
+      var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : STATISTIC_THEME_COLOR['light'];
+      var labelCount = arguments.length > 1 ? arguments[1] : undefined;
+      if (!_this.chart) return;
+      _this.chart.axis('name', {
+        line: {
+          style: theme.gridColor
+        },
+        label: {
+          style: {
+            fill: theme.textColor
+          },
+          offset: 20,
+          autoRotate: true,
+          rotate: labelCount > 11 ? 0.3 : 0,
+          formatter: function formatter(name) {
+            var isString = typeof name === 'string';
+            if (!isString) name = String(name);
+            if (name === 'undefined') {
+              return intl.get(EMPTY_NAME);
+            }
+            if (name.length > 10) {
+              return "".concat(name.slice(0, 10), "...");
+            }
+            return name;
+          }
+        }
+      });
+    };
+    // set value label
+    _this.setValueLabel = function () {
+      var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : STATISTIC_THEME_COLOR['light'];
+      if (!_this.chart) return;
+      _this.chart.axis('value', {
+        label: {
+          style: {
+            fill: theme.textColor
+          }
+        },
+        grid: {
+          line: {
+            style: {
+              stroke: theme.gridColor
+            }
+          }
+        }
+      });
+    };
+    // set legend
+    _this.setLegend = function (legendName, theme) {
+      var legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+      if (!_this.chart) return;
+      _this.chart.legend(legendName, {
+        position: legendPosition,
+        itemName: {
+          style: {
+            fill: theme.textColor
+          },
+          formatter: function formatter(name) {
+            return !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
+          }
+        },
+        pageNavigator: {
+          text: {
+            style: {
+              fill: theme.textColor
+            }
+          },
+          marker: {
+            style: {
+              fill: theme.legendPageNavigatorMarkerColor,
+              inactiveFill: theme.legendPageNavigatorMarkerColor,
+              inactiveOpacity: 0.45
+            }
+          }
+        }
+      });
+    };
+    _this.isShowXAxisLabel = function (statistic) {
+      return !!(statistic && statistic.config && statistic.config.x_axis_show_label);
+    };
+    _this.isShowYAxisLabel = function (statistic) {
+      return !!(statistic && statistic.config && statistic.config.y_axis_show_label);
+    };
+    return _this;
+  }
+  return _createClass(ChartComponent);
+}(Component);
+export { ChartComponent as default };

package/lib/components/formatter/combination.js

@@ -0,0 +1,407 @@
+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 classnames from 'classnames';
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import { Chart } from '../../utils/custom-g2';
+import { StatisticsUtils } from '../../utils';
+import { STATISTIC_SUMMARY_TYPE, LABEL_COLORS, STATISTIC_SUMMARY_SHOW, LABEL_POSITION_TYPE, EMPTY_NAME } from '../../constants';
+import intl from '../../intl';
+var Combination = /*#__PURE__*/function (_React$Component) {
+  _inherits(Combination, _React$Component);
+  var _super = _createSuper(Combination);
+  function Combination(props) {
+    var _this;
+    _classCallCheck(this, Combination);
+    _this = _super.call(this, props);
+    _this.clearChart = function () {
+      _this.chart.annotation().clear(true);
+      _this.chart.clear(true);
+    };
+    _this.drawChart = function () {
+      var data = _this.props.result;
+      _this.draw(data);
+    };
+    _this.draw = function (data) {
+      if (!Array.isArray(data)) return;
+      var _this$props = _this.props,
+        statistic = _this$props.statistic,
+        theme = _this$props.theme,
+        tables = _this$props.tables,
+        themeName = _this$props.themeName;
+      var _statistic$config = statistic.config,
+        table_id = _statistic$config.table_id,
+        y_axis_left_summary_column = _statistic$config.y_axis_left_summary_column,
+        y_axis_right_summary_column = _statistic$config.y_axis_right_summary_column,
+        y_axis_left_summary_method = _statistic$config.y_axis_left_summary_method,
+        y_axis_right_summary_method = _statistic$config.y_axis_right_summary_method,
+        y_axis_left_summary_type = _statistic$config.y_axis_left_summary_type,
+        y_axis_right_summary_type = _statistic$config.y_axis_right_summary_type,
+        y_axis_left_group_by_multiple_numeric_column = _statistic$config.y_axis_left_group_by_multiple_numeric_column,
+        y_axis_auto_range_left = _statistic$config.y_axis_auto_range_left,
+        y_axis_min_left = _statistic$config.y_axis_min_left,
+        y_axis_max_left = _statistic$config.y_axis_max_left,
+        y_axis_auto_range_right = _statistic$config.y_axis_auto_range_right,
+        y_axis_min_right = _statistic$config.y_axis_min_right,
+        y_axis_max_right = _statistic$config.y_axis_max_right,
+        display_data = _statistic$config.display_data,
+        label_font_size = _statistic$config.label_font_size;
+      _this.chart = new Chart({
+        container: _this.container,
+        autoFit: true,
+        width: '100%',
+        height: '100%',
+        appendPadding: [display_data ? 17 : 0, 0, 0, 0]
+      });
+      var currentTheme = StatisticsUtils.getCurrentTheme(themeName);
+      _this.chart.data(data);
+      _this.chart.coordinate('rect');
+      var table = getTableById(tables, table_id);
+      var leftSummaryColumn = getTableColumnByKey(table, y_axis_left_summary_column) || {};
+      var rightSummaryColumn = getTableColumnByKey(table, y_axis_right_summary_column) || {};
+      var leftValueScaleOptions = {
+        formatter: function formatter(value) {
+          return StatisticsUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method);
+        }
+      };
+      var rightValueScaleOptions = {
+        formatter: function formatter(value) {
+          return StatisticsUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method);
+        }
+      };
+      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
+        value_left: leftValueScaleOptions,
+        value_right: rightValueScaleOptions
+      });
+      _this.chart.axis('name', {
+        label: {
+          style: {
+            fill: theme.textColor
+          },
+          formatter: function formatter(name) {
+            var isString = typeof name === 'string';
+            if (!isString) name = String(name);
+            if (name === 'undefined') {
+              return intl.get(EMPTY_NAME);
+            }
+            if (name.length > 10) {
+              return "".concat(name.slice(0, 10), "...");
+            }
+            return name;
+          }
+        },
+        line: {
+          style: theme.gridColor
+        }
+      });
+      _this.chart.axis('value_left', {
+        grid: {
+          line: {
+            style: {
+              stroke: theme.gridColor
+            }
+          }
+        },
+        label: {
+          style: {
+            fill: theme.textColor
+          }
+        }
+      });
+      _this.chart.axis('value_right', {
+        grid: null,
+        label: {
+          style: {
+            fill: theme.textColor
+          }
+        }
+      });
+      var legendPosition = 'bottom';
+      _this.chart.legend({
+        custom: true,
+        position: legendPosition,
+        itemName: {
+          style: {
+            fill: theme.textColor
+          }
+        },
+        items: _this.getLegend(leftSummaryColumn, rightSummaryColumn, table, currentTheme)
+      });
+      _this.chart.interval().position('name*value_left').color('color', function (color) {
+        if (!y_axis_left_group_by_multiple_numeric_column) {
+          return currentTheme.colors[0];
+        }
+        return color;
+      }).adjust('dodge').tooltip('name*value_left', function (name, value) {
+        return {
+          title: y_axis_left_summary_type === STATISTIC_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(STATISTIC_SUMMARY_SHOW[y_axis_left_summary_method]),
+          value: StatisticsUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method),
+          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
+        };
+      });
+      _this.chart.tooltip({
+        showMarkers: false
+      });
+      _this.chart.line().position('name*value_right').color(currentTheme.colors[1]).size(3).tooltip('name*value_right', function (name, value) {
+        return {
+          title: y_axis_right_summary_type === STATISTIC_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(STATISTIC_SUMMARY_SHOW[y_axis_right_summary_method]),
+          value: StatisticsUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
+          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
+        };
+      });
+      _this.chart.point().position('name*value_right').color(currentTheme.colors[1]).size(3).shape('circle').label(display_data ? 'value_right' : false, {
+        style: {
+          fontSize: StatisticsUtils.getLabelFontSize(label_font_size),
+          fill: theme.textColor
+        }
+      }).tooltip('name*value_right', function (name, value) {
+        return {
+          title: y_axis_right_summary_type === STATISTIC_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(STATISTIC_SUMMARY_SHOW[y_axis_right_summary_method]),
+          value: StatisticsUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
+          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
+        };
+      });
+      _this.chart.removeInteraction('legend-filter');
+      _this.chart.render();
+      _this.renderAxisLabel();
+    };
+    _this.renderAxisLabel = function () {
+      if (!_this.chart) return;
+      var _this$props2 = _this.props,
+        statistic = _this$props2.statistic,
+        tables = _this$props2.tables;
+      var config = statistic.config;
+      var table_id = config.table_id,
+        x_axis_column_key = config.x_axis_column_key,
+        show_y_axis_left_label = config.show_y_axis_left_label,
+        show_y_axis_right_label = config.show_y_axis_right_label,
+        x_axis_show_label = config.x_axis_show_label,
+        y_axis_left_label_position = config.y_axis_left_label_position,
+        y_axis_right_label_position = config.y_axis_right_label_position,
+        y_axis_left_summary_column = config.y_axis_left_summary_column,
+        y_axis_right_summary_column = config.y_axis_right_summary_column,
+        x_axis_label_position = config.x_axis_label_position,
+        y_axis_left_summary_type = config.y_axis_left_summary_type,
+        y_axis_right_summary_type = config.y_axis_right_summary_type;
+      var table = getTableById(tables, table_id);
+      var autoPadding = _this.chart.autoPadding;
+      var textColor = '#999';
+      var xAxisID = "chart-x-axis-label_".concat(statistic.id);
+      var chartContainer = _this.chart.getCanvas().get('container');
+      var xLabel = chartContainer.querySelector("#".concat(xAxisID));
+      if (!xLabel && x_axis_show_label) {
+        var div = document.createElement('div');
+        div.id = xAxisID;
+        div.className = 'chart-axis-label text-truncate';
+        var column = getTableColumnByKey(table, x_axis_column_key);
+        div.innerHTML = "".concat(column ? column.name : '');
+        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
+        chartContainer.appendChild(div);
+      }
+      if (xLabel && x_axis_show_label) {
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
+      }
+      if (xLabel && !x_axis_show_label) {
+        xLabel.parentNode.removeChild(xLabel);
+      }
+      var yAxisLeftID = "chart-y-axis-left-label_".concat(statistic.id);
+      var yAxisLeftLabel = chartContainer.querySelector("#".concat(yAxisLeftID));
+      if (!yAxisLeftLabel && show_y_axis_left_label) {
+        var _div = document.createElement('div');
+        _div.id = yAxisLeftID;
+        _div.className = 'chart-axis-label text-truncate';
+        if (y_axis_left_summary_type === STATISTIC_SUMMARY_TYPE.COUNT) {
+          _div.innerHTML = intl.get('Amount');
+        } else {
+          var _column = getTableColumnByKey(table, y_axis_left_summary_column) || {};
+          _div.innerHTML = _column.name || '';
+        }
+        var containerHeight = chartContainer.offsetHeight;
+        var textAlign = 'center';
+        if (y_axis_left_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (y_axis_left_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
+        _div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "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(textColor, "; position: absolute; width: ").concat(_containerHeight, "px; text-align: ").concat(_textAlign, "; top: 0; left: 0; transform: translate(-").concat(_containerHeight / 2 + 12, "px, ").concat((_containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+      }
+      if (yAxisLeftLabel && !show_y_axis_left_label) {
+        yAxisLeftLabel.parentNode.removeChild(yAxisLeftLabel);
+      }
+      var yAxisRightID = "chart-y-axis-right-label_".concat(statistic.id);
+      var yAxisRightLabel = chartContainer.querySelector("#".concat(yAxisRightID));
+      if (!yAxisRightLabel && show_y_axis_right_label) {
+        var _div2 = document.createElement('div');
+        _div2.id = yAxisRightID;
+        _div2.className = 'chart-axis-label text-truncate';
+        if (y_axis_right_summary_type === STATISTIC_SUMMARY_TYPE.COUNT) {
+          _div2.innerHTML = intl.get('Amount');
+        } else {
+          var _column2 = getTableColumnByKey(table, y_axis_right_summary_column) || {};
+          _div2.innerHTML = _column2.name || '';
+        }
+        var _containerHeight2 = chartContainer.offsetHeight;
+        var _textAlign2 = 'center';
+        if (y_axis_right_label_position === LABEL_POSITION_TYPE.BOTTOM) _textAlign2 = 'left';
+        if (y_axis_right_label_position === LABEL_POSITION_TYPE.TOP) _textAlign2 = 'right';
+        _div2.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(_containerHeight2, "px; text-align: ").concat(_textAlign2, "; top: 0; right: 0; transform: translate(").concat(_containerHeight2 / 2 + 12, "px, ").concat((_containerHeight2 - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        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 = 'left';
+        if (y_axis_right_label_position === 'top') _textAlign3 = 'right';
+        yAxisRightLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(_containerHeight3, "px; text-align: ").concat(_textAlign3, "; top: 0; right: 0; transform: translate(").concat(_containerHeight3 / 2 + 12, "px, ").concat((_containerHeight3 - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+      }
+      if (yAxisRightLabel && !show_y_axis_right_label) {
+        yAxisRightLabel.parentNode.removeChild(yAxisRightLabel);
+      }
+    };
+    _this.getLegend = function (leftSummaryColumn, rightSummaryColumn, table, currentTheme) {
+      var statistic = _this.props.statistic;
+      var _statistic$config2 = statistic.config,
+        y_axis_left_group_by_multiple_numeric_column = _statistic$config2.y_axis_left_group_by_multiple_numeric_column,
+        y_axis_left_group_by_numeric_columns = _statistic$config2.y_axis_left_group_by_numeric_columns;
+      var legendItems = [];
+      if (!y_axis_left_group_by_multiple_numeric_column) {
+        legendItems.push({
+          value: 'value_left',
+          name: leftSummaryColumn.name || intl.get('Left'),
+          marker: {
+            symbol: 'square',
+            style: {
+              fill: currentTheme.colors[0],
+              r: 5
+            }
+          }
+        }, {
+          value: 'value_right',
+          name: rightSummaryColumn.name || intl.get('Right'),
+          marker: {
+            symbol: 'hyphen',
+            style: {
+              stroke: currentTheme.colors[1],
+              r: 5,
+              lineWidth: 3
+            }
+          }
+        });
+      } else {
+        legendItems.push({
+          value: 'value_left',
+          name: leftSummaryColumn.name || intl.get('Left'),
+          marker: {
+            fill: LABEL_COLORS[0],
+            symbol: 'square',
+            style: {
+              r: 5
+            }
+          }
+        });
+        y_axis_left_group_by_numeric_columns.forEach(function (item, index) {
+          var column = getTableColumnByKey(table, item.column_key);
+          if (column) {
+            legendItems.push({
+              value: 'group_name',
+              name: column.name || intl.get('Left'),
+              marker: {
+                symbol: 'square',
+                style: {
+                  fill: LABEL_COLORS[(index + 1) % 12],
+                  r: 5
+                }
+              }
+            });
+          }
+        });
+        legendItems.push({
+          value: 'value_right',
+          name: rightSummaryColumn.name || intl.get('Right'),
+          marker: {
+            symbol: 'hyphen',
+            style: {
+              stroke: currentTheme.colors[1],
+              r: 5,
+              lineWidth: 3
+            }
+          }
+        });
+      }
+      return legendItems;
+    };
+    _this.isShowXAxisLabel = function (statistic) {
+      return !!(statistic && statistic.config && statistic.config.x_axis_show_label);
+    };
+    _this.isShowYAxisLeftLabel = function (statistic) {
+      return !!(statistic && statistic.config && statistic.config.show_y_axis_left_label);
+    };
+    _this.isShowYAxisRightLabel = function (statistic) {
+      return !!(statistic && statistic.config && statistic.config.show_y_axis_right_label);
+    };
+    _this.chart = null;
+    return _this;
+  }
+  _createClass(Combination, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.drawChart();
+      this.renderAxisLabel(this.props.statistic, this.props.tables);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (StatisticsUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+        this.chart && this.chart.destroy();
+        this.drawChart();
+        this.renderAxisLabel(prevProps.statistic, prevProps.tables);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.chart && this.chart.destroy();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var statistic = this.props.statistic;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames('seastatistic-container w-100', {
+          'show-x-axis-label': this.isShowXAxisLabel(statistic),
+          'show-y-axis-left-label': this.isShowYAxisLeftLabel(statistic),
+          'show-y-axis-right-label': this.isShowYAxisRightLabel(statistic)
+        }),
+        ref: function ref(_ref) {
+          return _this2.container = _ref;
+        }
+      });
+    }
+  }]);
+  return Combination;
+}(React.Component);
+export default Combination;