sea-chart 0.0.1 → 0.0.2

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

@@ -1,266 +0,0 @@
-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

@@ -1,407 +0,0 @@
-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;