sea-chart 2.0.1 → 2.0.2

package/dist/view/wrapper/combination.js

@@ -1,728 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _dtableUtils = require("dtable-utils");
-var _lodashEs = require("lodash-es");
-var _customG = require("../../utils/custom-g2");
-var _utils = require("../../utils");
-var _constants = require("../../constants");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-const valueFieldMap = {
-  value_left: ['Y_axis_(lift_side)', 'All'],
-  value_right: ['Y_axis_(right_side)', 'All']
-};
-class Combination extends _chartComponent.default {
-  constructor(props) {
-    super(props);
-    this.clearChart = () => {
-      this.chart.annotation().clear(true);
-      this.chart.clear(true);
-    };
-    this.drawChart = () => {
-      let {
-        result: data
-      } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
-      this.draw(data);
-    };
-    this.draw = data => {
-      if (!Array.isArray(data)) return;
-      const {
-        chart,
-        globalTheme,
-        tables,
-        chartColorTheme,
-        customRender
-      } = this.props;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
-      const {
-        table_id,
-        y_axis_left_summary_column,
-        y_axis_right_summary_column,
-        y_axis_left_summary_method,
-        y_axis_right_summary_method,
-        y_axis_left_summary_type,
-        y_axis_right_summary_type,
-        y_axis_left_group_by_multiple_numeric_column,
-        y_axis_auto_range_left,
-        y_axis_min_left,
-        y_axis_max_left,
-        y_axis_auto_range_right,
-        y_axis_min_right,
-        y_axis_max_right,
-        display_data,
-        display_data_field,
-        label_font_size,
-        line_type
-      } = chart.config;
-      const {
-        display_goal_line,
-        goal_value,
-        goal_label
-      } = chart.style_config || {};
-      this.chart = new _customG.Chart({
-        container: this.container,
-        autoFit: true,
-        width: '100%',
-        height: '100%',
-        appendPadding: [display_data ? 17 : 0, 0, 0, 0]
-      });
-      const isSmooth = line_type === _constants.CHART_LINE_TYPES[1] || !line_type;
-      const showLeftValue = display_data && valueFieldMap['value_left'].includes(display_data_field);
-      let showRightValue = display_data && valueFieldMap['value_right'].includes(display_data_field);
-      // if display_data is open, default show right value
-      if (display_data && !display_data_field) {
-        showRightValue = true;
-      }
-
-      // y-axis label width：6 + 10
-      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line
-      const nameCountMap = data.reduce((acc, cur) => {
-        if (!acc[cur.name]) {
-          acc[cur.name] = 1;
-        } else {
-          acc[cur.name] += 1;
-        }
-        return acc;
-      }, {});
-      const nameNums = Object.keys(nameCountMap).length;
-      const countValues = Object.values(nameCountMap).reduce((acc, value) => {
-        acc[value] = (acc[value] || 0) + 1;
-        return acc;
-      }, {});
-      const mostCommonCount = Object.entries(countValues).reduce((max, entry) => {
-        return entry[1] > max[1] ? entry : max;
-      }, ['', -Infinity])[0];
-      const singleBarWidth = Math.round(chartWidth / (2 * nameNums * mostCommonCount));
-      const singleBarRadius = Math.min(singleBarWidth / 5, 10);
-      const currentTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
-      this.colorMap = data.reduce((acc, cur, index) => {
-        if (!acc[cur.group_name]) {
-          acc[cur.group_name] = cur.color;
-        }
-        return acc;
-      }, {});
-      this.chart.data(data);
-      this.chart.coordinate('rect');
-      const table = (0, _dtableUtils.getTableById)(tables, table_id);
-      const leftSummaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column) || {};
-      const rightSummaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_right_summary_column) || {};
-      // const xAxisColumn = getTableColumnByKey(table, x_axis_column_key);
-
-      const leftTitle = this.getTitle(tables, table_id, y_axis_left_summary_type, y_axis_left_summary_column);
-      const rightTitle = this.getTitle(tables, table_id, y_axis_right_summary_type, y_axis_right_summary_column);
-      let leftValueScaleOptions = {
-        formatter: value => {
-          return _utils.BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method);
-        }
-      };
-      let rightValueScaleOptions = {
-        formatter: value => {
-          return _utils.BaseUtils.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', {
-        line: {
-          style: {
-            stroke: theme.XAxisColor,
-            lineWidth: 1
-          }
-        },
-        tickLine: {
-          length: 5,
-          // color of the tick line
-          stroke: theme.XAxisColor
-        },
-        label: {
-          style: {
-            fill: theme.textColor,
-            fontSize: theme.fontSize
-          },
-          offset: 10,
-          autoRotate: true,
-          // rotate: data.length > 11 ? 0.3 : 0,
-          formatter: name => {
-            const isString = typeof name === 'string';
-            if (!isString) name = String(name);
-            if (name === 'undefined') {
-              return _intl.default.get(_constants.EMPTY_NAME);
-            }
-            if (name.length > 10) {
-              return `${name.slice(0, 10)}...`;
-            }
-            return name;
-          }
-        }
-      });
-      this.chart.axis('value_left', {
-        label: {
-          offset: 6,
-          style: {
-            fontSize: theme.fontSize,
-            // fontSize: 66,
-            fill: theme.textColor
-          }
-        },
-        grid: {
-          line: {
-            style: {
-              stroke: theme.gridColor,
-              lineDash: [8, 3]
-            }
-          }
-        }
-      });
-      this.chart.axis('value_right', {
-        grid: null,
-        label: {
-          offset: 6,
-          style: {
-            fontSize: theme.fontSize,
-            fill: theme.textColor
-          }
-        }
-      });
-      let legendPosition = 'top-right';
-      // const leftLegendConfig = this.getLegendConfig(undefined, legendPosition);
-      // this.chart.legend(leftLegendConfig);
-      this.chart.legend({
-        // custom: true,
-        position: legendPosition,
-        itemName: {
-          style: {
-            fill: theme.legendTextColor,
-            fontSize: theme.legendFontSize
-          },
-          formatter: name => {
-            if (!name && typeof name !== 'number') {
-              return _intl.default.get(_constants.EMPTY_NAME);
-            } else if (name === '_Others') {
-              return _intl.default.get('Others');
-            } else {
-              return _intl.default.get(name) || name;
-            }
-          }
-        },
-        itemSpacing: 28,
-        items: this.getLegend(leftSummaryColumn, rightSummaryColumn, table, currentTheme)
-      });
-      const adjust = y_axis_left_group_by_multiple_numeric_column ? {
-        type: 'dodge',
-        dodgeBy: 'group_name',
-        dodgePadding: singleBarWidth / 3
-      } : {
-        type: 'dodge'
-      };
-      const interval = this.chart.interval().position('name*value_left').color('color', color => {
-        if (!y_axis_left_group_by_multiple_numeric_column) {
-          return currentTheme.colors[0];
-        }
-        return color;
-      }).adjust(adjust).size(singleBarWidth).tooltip('name*value_left', (name, value) => {
-        const {
-          y_axis_left_group_by_multiple_numeric_column
-        } = this.props.chart.config;
-        const isMultiple = y_axis_left_group_by_multiple_numeric_column;
-        let title = '';
-        if (isMultiple) {
-          title = name;
-        } else {
-          title = leftTitle;
-        }
-        return {
-          title,
-          value: _utils.BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method),
-          name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
-        };
-      }).state({
-        active: {
-          style: {
-            stroke: null
-          }
-        }
-      }).style({
-        fillOpacity: 1,
-        radius: [singleBarRadius, singleBarRadius, 0, 0]
-      }).label(showLeftValue ? 'value_left' : false, {
-        style: {
-          fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor,
-          stroke: '#fff',
-          lineWidth: 1
-        }
-      });
-      this.formatDataByName(data);
-      if (!y_axis_left_group_by_multiple_numeric_column) {
-        this.setToolTipForInterval();
-      } else {
-        this.setToolTipForInterval(true, leftSummaryColumn, y_axis_left_summary_method);
-      }
-      this.chart.line().position('name*value_right').color(currentTheme.colors[1]).shape(isSmooth ? 'smooth' : 'line').style({
-        lineWidth: 2,
-        opacity: 1
-      }).tooltip(false);
-      const point = this.chart.point().position('name*value_right').color(currentTheme.colors[1]).animate({
-        appear: {
-          animation: 'fadeIn',
-          duration: 1000,
-          easing: 'easeLinear'
-        }
-      }).shape('circle').size(3).style({
-        stroke: 0,
-        fillOpacity: 1
-      }).label(showRightValue ? 'value_right' : false, {
-        style: {
-          fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor,
-          stroke: '#fff',
-          lineWidth: 1
-        }
-      }).tooltip('name*value_right', (name, value) => {
-        return {
-          title: rightTitle,
-          value: _utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
-          name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
-        };
-      }).state({
-        active: {
-          style: {
-            stroke: null
-          }
-        }
-      });
-      if (display_data) {
-        this.chart.on('point:mouseenter', (0, _lodashEs.throttle)(e => {
-          const currentName = e.data.data.name;
-          if (this.currentName && this.currentName === currentName) return;
-          this.currentName = currentName;
-          this.chart.render(true);
-        }, 100));
-        this.chart.on('point:mouseleave', (0, _lodashEs.throttle)(e => {
-          if (!this.currentName) return;
-          this.currentName = null;
-          this.chart.render(true);
-        }, 100));
-      }
-      this.chart.on('element:click', e => {
-        this.props.toggleRecords({
-          ...e.data.data,
-          isQueryBySql: true
-        });
-      });
-      this.chart.on('interval:mouseenter', e => {
-        if (this.isInsideInterval) return;
-        this.isInsideInterval = true;
-        interval.style('name*value_left', (name, value) => {
-          const isHovered = value === e.data.data.value_left && name === e.data.data.name;
-          return {
-            fillOpacity: isHovered ? 1 : 0.3,
-            radius: [singleBarRadius, singleBarRadius, 0, 0]
-          };
-        });
-        interval.tooltip('name*value_left', (name, value) => {
-          const {
-            y_axis_left_group_by_multiple_numeric_column
-          } = this.props.chart.config;
-          const isMultiple = y_axis_left_group_by_multiple_numeric_column;
-          let title = '';
-          if (isMultiple) {
-            title = name;
-          } else {
-            title = leftTitle;
-          }
-          return {
-            title,
-            value: _utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
-            name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
-          };
-        });
-        point.tooltip(false);
-        this.setToolTipForInterval(true, leftSummaryColumn, y_axis_left_summary_method);
-        this.chart.render(true);
-      });
-      this.chart.on('interval:mouseleave', e => {
-        if (!this.isInsideInterval) return;
-        this.isInsideInterval = false;
-        interval.style('name*value_left', (name, value) => {
-          return {
-            fillOpacity: 1,
-            radius: [singleBarRadius, singleBarRadius, 0, 0]
-          };
-        });
-        interval.tooltip(false);
-        point.tooltip('name*value_right', (name, value) => {
-          return {
-            title: rightTitle,
-            value: _utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
-            name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
-          };
-        });
-        this.setToolTipForPointView();
-        this.chart.render(true);
-      });
-      this.chart.on('point:mouseenter', (0, _lodashEs.throttle)(e => {
-        if (this.isInsidePoint) return;
-        this.isInsidePoint = true;
-        // interval.style({
-        //   radius: [singleBarRadius, singleBarRadius, 0, 0],
-        //   fillOpacity: 0.3,
-        // });
-        point.style('name', name => {
-          let r = 3;
-          if (name === e.data.data.name) {
-            r = 5;
-          }
-          return {
-            r,
-            stroke: 0,
-            fillOpacity: 1
-          };
-        });
-        this.chart.render(true);
-      }, 100));
-      this.chart.on('point:mouseleave', (0, _lodashEs.throttle)(e => {
-        if (!this.isInsidePoint) return;
-        this.isInsidePoint = false;
-        // interval.style({
-        //   radius: [singleBarRadius, singleBarRadius, 0, 0],
-        //   fillOpacity: 1,
-        // });
-        point.style('name', name => {
-          let r = 3;
-          return {
-            r,
-            stroke: 0,
-            fillOpacity: 1
-          };
-        });
-        this.chart.render(true);
-      }, 100));
-      if (display_goal_line && goal_label && goal_value) {
-        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
-      }
-      (0, _utils.isFunction)(customRender) && customRender(this.chart);
-      this.chart.removeInteraction('legend-filter');
-      requestAnimationFrame(() => {
-        this.chart.render();
-        this.renderAxisLabel();
-      });
-    };
-    this.renderAxisLabel = () => {
-      var _this$chart;
-      if (!this.chart) return;
-      let {
-        chart,
-        tables
-      } = this.props;
-      const {
-        config
-      } = chart;
-      const {
-        table_id,
-        x_axis_column_key,
-        show_y_axis_left_label,
-        show_y_axis_right_label,
-        x_axis_show_label,
-        y_axis_left_label_position,
-        y_axis_right_label_position,
-        y_axis_left_summary_column,
-        y_axis_right_summary_column,
-        x_axis_label_position,
-        y_axis_left_summary_type,
-        y_axis_right_summary_type
-      } = config;
-      const table = (0, _dtableUtils.getTableById)(tables, table_id);
-      const autoPadding = ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) || 0;
-      const textColor = '#999';
-      const xAxisID = `chart-x-axis-label_${chart.id}`;
-      const chartContainer = this.chart.getCanvas().get('container');
-      const xLabel = chartContainer.querySelector(`#${xAxisID}`);
-      if (!xLabel && x_axis_show_label) {
-        const div = document.createElement('div');
-        div.id = xAxisID;
-        div.className = 'chart-axis-label text-truncate';
-        const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
-        div.innerHTML = `${column ? column.name : ''}`;
-        div.setAttribute('style', `color:${textColor}; width: 100%; text-align: ${x_axis_label_position}; bottom: -20px; position: absolute`);
-        chartContainer.appendChild(div);
-      }
-      if (xLabel && x_axis_show_label) {
-        xLabel.setAttribute('style', `color:${textColor}; width: 100%; text-align: ${x_axis_label_position}; bottom: -20px; position: absolute`);
-      }
-      if (xLabel && !x_axis_show_label) {
-        xLabel.parentNode.removeChild(xLabel);
-      }
-      const yAxisLeftID = `chart-y-axis-left-label_${chart.id}`;
-      const yAxisLeftLabel = chartContainer.querySelector(`#${yAxisLeftID}`);
-      if (!yAxisLeftLabel && show_y_axis_left_label) {
-        const div = document.createElement('div');
-        div.id = yAxisLeftID;
-        div.className = 'chart-axis-label text-truncate';
-        if (y_axis_left_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = _intl.default.get('Amount');
-        } else {
-          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column) || {};
-          div.innerHTML = column.name || '';
-        }
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (y_axis_left_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (y_axis_left_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 + 12}px, ${(containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4}px) rotate(-90deg)`);
-        chartContainer.appendChild(div);
-      }
-      if (yAxisLeftLabel && show_y_axis_left_label) {
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (y_axis_left_label_position === 'bottom') textAlign = 'left';
-        if (y_axis_left_label_position === 'top') textAlign = 'right';
-        yAxisLeftLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 + 12}px, ${(containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4}px) rotate(-90deg)`);
-      }
-      if (yAxisLeftLabel && !show_y_axis_left_label) {
-        yAxisLeftLabel.parentNode.removeChild(yAxisLeftLabel);
-      }
-      const yAxisRightID = `chart-y-axis-right-label_${chart.id}`;
-      const yAxisRightLabel = chartContainer.querySelector(`#${yAxisRightID}`);
-      if (!yAxisRightLabel && show_y_axis_right_label) {
-        const div = document.createElement('div');
-        div.id = yAxisRightID;
-        div.className = 'chart-axis-label text-truncate';
-        if (y_axis_right_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = _intl.default.get('Amount');
-        } else {
-          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_right_summary_column) || {};
-          div.innerHTML = column.name || '';
-        }
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (y_axis_right_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (y_axis_right_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; text-align: ${textAlign}; top: 0; right: 0; transform: translate(${containerHeight / 2 + 12}px, ${(containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4}px) rotate(-90deg)`);
-        chartContainer.appendChild(div);
-      }
-      if (yAxisRightLabel && show_y_axis_right_label) {
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (y_axis_right_label_position === 'bottom') textAlign = 'left';
-        if (y_axis_right_label_position === 'top') textAlign = 'right';
-        yAxisRightLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; text-align: ${textAlign}; top: 0; right: 0; transform: translate(${containerHeight / 2 + 12}px, ${(containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4}px) rotate(-90deg)`);
-      }
-      if (yAxisRightLabel && !show_y_axis_right_label) {
-        yAxisRightLabel.parentNode.removeChild(yAxisRightLabel);
-      }
-    };
-    this.drawLeftLegendSymbol = (x, y) => {
-      // The total width of the capsule is 20px, and its height is 6px. Thus, the radius of the semi-circle is half the height, which is 3px.
-      const r = 3;
-      // The width of the rectangular part in the middle of the capsule is the total width minus the diameters of the two semi-circles, which is 14px.
-      const rectWidth = 14;
-      y -= 1;
-      x -= 5;
-      return [['M', x - rectWidth / 2, y - r],
-      // Start from the left edge of the left semi-circle
-      ['L', x + rectWidth / 2, y - r],
-      // Draw the top line to the left edge of the right semi-circle
-      ['A', r, r, 0, 0, 1, x + rectWidth / 2, y + r],
-      // Draw the right semi-circle
-      ['L', x - rectWidth / 2, y + r],
-      // Draw the bottom line back to the right edge of the left semi-circle
-      ['A', r, r, 0, 0, 1, x - rectWidth / 2, y - r] // Draw the left semi-circle
-      ];
-    };
-    this.drawRightLegendSymbol = (x, y) => {
-      const r = 2;
-      const size = 12;
-      y -= 7;
-      x -= 8;
-      return [['M', x + r, y], ['L', x + size - r, y], ['A', r, r, 0, 0, 1, x + size, y + r], ['L', x + size, y + size - r], ['A', r, r, 0, 0, 1, x + size - r, y + size], ['L', x + r, y + size], ['A', r, r, 0, 0, 1, x, y + size - r], ['L', x, y + r], ['A', r, r, 0, 0, 1, x + r, y], ['Z']];
-    };
-    this.getLegend = (leftSummaryColumn, rightSummaryColumn, table, currentTheme) => {
-      const {
-        chart
-      } = this.props;
-      const {
-        y_axis_left_group_by_multiple_numeric_column,
-        y_axis_left_group_by_numeric_columns
-      } = chart.config;
-      const legendItems = [];
-      if (!y_axis_left_group_by_multiple_numeric_column) {
-        legendItems.push({
-          value: 'value_left',
-          name: leftSummaryColumn.name || _intl.default.get('Left'),
-          marker: {
-            symbol: this.drawLeftLegendSymbol,
-            style: {
-              fill: this.colorMap[leftSummaryColumn.name] || currentTheme.colors[0]
-            }
-          }
-        }, {
-          value: 'value_right',
-          name: rightSummaryColumn.name || _intl.default.get('Right'),
-          marker: {
-            symbol: this.drawRightLegendSymbol,
-            style: {
-              fill: currentTheme.colors[1]
-            }
-          }
-        });
-      } else {
-        legendItems.push({
-          value: 'value_left',
-          name: leftSummaryColumn.name || _intl.default.get('Left'),
-          marker: {
-            style: {
-              fill: this.colorMap[leftSummaryColumn.name] || currentTheme.colors[0]
-            },
-            symbol: this.drawLeftLegendSymbol
-          }
-        });
-        y_axis_left_group_by_numeric_columns.forEach((item, index) => {
-          const column = (0, _dtableUtils.getTableColumnByKey)(table, item.column_key);
-          if (column) {
-            legendItems.push({
-              value: 'group_name',
-              name: column.name || _intl.default.get('Left'),
-              marker: {
-                symbol: this.drawLeftLegendSymbol,
-                style: {
-                  fill: this.colorMap[column.name]
-                }
-              }
-            });
-          }
-        });
-        legendItems.push({
-          value: 'value_right',
-          name: rightSummaryColumn.name || _intl.default.get('Right'),
-          marker: {
-            symbol: this.drawRightLegendSymbol,
-            style: {
-              fill: currentTheme.colors[1]
-            }
-          }
-        });
-      }
-      return legendItems;
-    };
-    this.setToolTipForInterval = (isGroup, summaryColumn, y_axis_summary_method) => {
-      const {
-        y_axis_left_group_by_multiple_numeric_column,
-        y_axis_right_summary_method
-      } = this.props.chart.config;
-      const settings = this.getToolTipSettings(isGroup, summaryColumn, y_axis_summary_method);
-      settings.showMarkers = false;
-      settings.showTitle = true;
-      if (isGroup) {
-        settings.customItems = items => {
-          const activeItem = items[0];
-          const name = activeItem.data.name;
-          const isMultiple = y_axis_left_group_by_multiple_numeric_column;
-          return this.formatedDataByName[name].map(item => {
-            const res = {
-              color: item.color || _constants.CHART_STYLE_COLORS[0],
-              data: item,
-              name: !item.group_name && typeof item.group_name !== 'number' && isMultiple ? _intl.default.get(_constants.EMPTY_NAME) : item.group_name || item.name,
-              title: isMultiple ? item.name : _intl.default.get(_constants.CHART_SUMMARY_SHOW[y_axis_right_summary_method]),
-              value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, item.value_left, y_axis_summary_method)
-            };
-            return res;
-          });
-        };
-      }
-      this.chart.tooltip(settings);
-    };
-    this.setToolTipForPointView = () => {
-      const settings = this.getToolTipSettings();
-      settings.showTitle = true;
-      settings.containerTpl = `<div class="g2-tooltip">
-        <ul class="g2-tooltip-list"></ul>
-      </div>`;
-      settings.itemTpl = `<li class="g2-tooltip-list-item">
-         <span class="g2-tooltip-marker" style="background-color:{color};display:inline-block;"></span>
-         <span class="g2-tooltip-name">{name}</span>
-         <span class="g2-tooltip-value">{value}</span>
-      </li>`;
-      this.chart.tooltip(settings);
-    };
-    this.isShowXAxisLabel = chart => {
-      return !!(chart && chart.config && chart.config.x_axis_show_label);
-    };
-    this.isShowYAxisLeftLabel = chart => {
-      return !!(chart && chart.config && chart.config.show_y_axis_left_label);
-    };
-    this.isShowYAxisRightLabel = chart => {
-      return !!(chart && chart.config && chart.config.show_y_axis_right_label);
-    };
-    this.chart = null;
-  }
-  componentDidMount() {
-    this.drawChart();
-    this.renderAxisLabel(this.props.chart, this.props.tables);
-  }
-  componentDidUpdate(prevProps) {
-    super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      var _this$chart2;
-      ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
-      this.drawChart();
-      this.renderAxisLabel(prevProps.chart, prevProps.tables);
-    }
-  }
-  componentWillUnmount() {
-    var _this$chart3;
-    ((_this$chart3 = this.chart) === null || _this$chart3 === void 0 ? void 0 : _this$chart3.autoPadding) && this.chart.destroy();
-  }
-  render() {
-    const {
-      chart
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('sea-chart-container ', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-left-label': this.isShowYAxisLeftLabel(chart),
-        'show-y-axis-right-label': this.isShowYAxisRightLabel(chart)
-      }),
-      ref: ref => this.container = ref
-    });
-  }
-}
-Combination.propTypes = {
-  canvasStyle: _propTypes.default.object,
-  chart: _propTypes.default.object,
-  summaryColumn: _propTypes.default.object,
-  result: _propTypes.default.array,
-  tables: _propTypes.default.array,
-  globalTheme: _propTypes.default.string,
-  chartColorTheme: _propTypes.default.string,
-  toggleRecords: _propTypes.default.func,
-  customRender: _propTypes.default.func
-};
-var _default = exports.default = Combination;