sea-chart 2.0.1 → 2.0.2

package/dist/view/wrapper/world-map.js

@@ -1,413 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Loading2 = _interopRequireDefault(require("dtable-ui-component/lib/Loading"));
-var _react = _interopRequireWildcard(require("react"));
-var _index = _interopRequireDefault(require("@antv/data-set/lib/index"));
-var _dtableUtils = require("dtable-utils");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _customG = require("../../utils/custom-g2");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _mapJson = _interopRequireDefault(require("../../services/map-json"));
-var _utils = require("../../utils");
-var _colorRules = require("../../constants/color-rules");
-var _constants = require("../../constants");
-var _context = _interopRequireDefault(require("../../context"));
-const reg = /^([A-Za-z])/;
-const fixData = (statisticData, countryMap, chartType) => {
-  if (!statisticData) return [];
-  let statisticNewData = [];
-  let sum = 0;
-  statisticData.forEach(item => {
-    if (item && item.name) {
-      let nameType, name, name_cn;
-      if (reg.test(item.name)) {
-        nameType = 'en';
-        name = item.name;
-        name_cn = countryMap.get(name);
-      } else {
-        nameType = 'zh-cn';
-        name = countryMap.get(item.name);
-        name_cn = item.name;
-      }
-      const value = item.value;
-      if (name_cn && name) {
-        const existedData = statisticNewData.find(i => i.name === name);
-        if (existedData) {
-          existedData.value += value;
-          existedData.formatted_value = parseInt(existedData.formatted_value) + parseInt(item.formatted_value) + '';
-        } else {
-          statisticNewData.push({
-            name_cn,
-            name,
-            nameType,
-            value: value || 0,
-            formatted_value: item.formatted_value + ''
-          });
-        }
-        if (chartType === _constants.CHART_TYPE.WORLD_MAP_BUBBLE) {
-          sum += item.value;
-        }
-      }
-    }
-  });
-  if (chartType === _constants.CHART_TYPE.WORLD_MAP_BUBBLE) {
-    statisticNewData.sum = sum;
-  }
-  return statisticNewData;
-};
-const CHART_STYLE_CONFIG = {
-  'g2-tooltip': {
-    borderRadius: '2px',
-    backgroundColor: '#fff',
-    padding: '10px'
-  },
-  'tooltip-item': {
-    marginTop: '5px'
-  }
-};
-const getDefaultChartStyleByKey = key => {
-  return CHART_STYLE_CONFIG[key] || {};
-};
-function createChart(container) {
-  // width / height = 1.5 for chinese map
-  const {
-    width,
-    height
-  } = (0, _utils.getMapCanvasStyle)(container, 2.1);
-  let config = {
-    container: container,
-    width,
-    height
-  };
-  return new _customG.Chart(config);
-}
-function initChart(currentChart, props) {
-  const {
-    result,
-    toggleRecords,
-    isCalculateByView
-  } = props;
-  if (isCalculateByView) {
-    currentChart.on('element:click', e => {
-      const lang = _intl.default.lang;
-      const data = e.data.data;
-      const countryName = lang === 'zh-cn' ? data.name_cn : data.name;
-      const clickData = result.find(i => i.name === countryName);
-      if (clickData) {
-        toggleRecords(clickData);
-      }
-    });
-  }
-  currentChart.tooltip({
-    showTitle: false,
-    showMarkers: false,
-    shared: true,
-    containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
-    itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">数量: {value}<div></div>',
-    domStyles: {
-      'g2-tooltip': getDefaultChartStyleByKey('g2-tooltip'),
-      'tooltip-item': getDefaultChartStyleByKey('tooltip-item')
-    }
-  });
-  currentChart.scale({
-    longitude: {
-      sync: true
-    },
-    latitude: {
-      sync: true
-    }
-  });
-  currentChart.axis(false);
-}
-function mapGetNumberDisplayString(value, columnData, summaryMethod) {
-  if (summaryMethod === _constants.CHART_SUMMARY_TYPE.Distinct_values) {
-    return value;
-  }
-  return (0, _dtableUtils.getNumberDisplayString)(value, columnData);
-}
-function getThemeColors() {
-  let themeColors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let theme = arguments.length > 1 ? arguments[1] : undefined;
-  // dark->custom->light
-  if (theme === _constants.THEME_NAME_MAP.DARK) {
-    themeColors = _constants.CHART_THEME_COLOR.dark;
-  }
-  return themeColors || _constants.CHART_THEME_COLOR[_constants.THEME_NAME_MAP.LIGHT];
-}
-function WorldMap(props) {
-  let {
-    result: statisticData,
-    chart,
-    isCalculateByView
-  } = props;
-  if (isCalculateByView) {
-    statisticData = statisticData.map(v => {
-      var _v$name;
-      v.name = ((_v$name = v.name) === null || _v$name === void 0 ? void 0 : _v$name.country_region) || v.name || '';
-      return v;
-    });
-  }
-
-  // mapLocation is initially set to null, in this case mapLevel is country, so doesn't here
-  const {
-    // map_location: mapLocation,
-    // map_level: mapLevel = MAP_LEVEL.COUNTRY,
-    type,
-    data_color,
-    bubble_color,
-    legend_size,
-    legend_direction,
-    summary_type,
-    summary_column_key,
-    summary_method,
-    table_id
-  } = chart.config;
-  const chartRef = (0, _react.useRef)(null);
-  const chartContainerRef = (0, _react.useRef)(null);
-  const dataSetRef = (0, _react.useRef)(null);
-  const [isLoading, setIsLoading] = (0, _react.useState)(true);
-  const [mapData, setMapData] = (0, _react.useState)(null);
-  const renderCommonChart = (0, _react.useCallback)(function (statisticNewData) {
-    const currentDataSet = dataSetRef.current;
-    const currentChart = chartRef.current;
-    const userDataView = currentDataSet.getView('statisticViewModel').source(statisticNewData).transform({
-      geoDataView: currentDataSet.getView('mapDataModel'),
-      field: 'name',
-      type: 'geo.region',
-      as: ['longitude', 'latitude']
-    });
-    const currentColorOption = _colorRules.COLOR_OPTIONS.filter(item => item.name === data_color)[0] || _colorRules.COLOR_OPTIONS[0];
-    const {
-      exampleColors,
-      highlightedBorderColor
-    } = currentColorOption;
-    let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-    if (summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
-      const table = (0, _dtableUtils.getTableById)(table_id);
-      const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key) || {};
-      columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-    }
-    const statisticView = currentChart.createView();
-    statisticView.data(userDataView.rows);
-    statisticView.polygon().position('longitude*latitude').color('value', `${exampleColors[0]}-${exampleColors[4]}-${exampleColors[8]}`).style({
-      lineWidth: 1,
-      stroke: '#bdbdbd',
-      strokeOpacity: 0.5
-    }).state({
-      active: {
-        style: {
-          lineWidth: 1,
-          stroke: highlightedBorderColor
-        }
-      }
-    }).tooltip('name*formatted_value*color*nameType*name_cn', (name, value, color, nameType, name_cn) => {
-      return {
-        name: nameType === 'en' ? name : name_cn,
-        color,
-        value
-      };
-    });
-    const themeColors = getThemeColors();
-    const legendDirection = legend_direction || 'vertical';
-    const size = legend_size || 1;
-    chartRef.current.legend({
-      layout: legendDirection,
-      position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
-      rail: {
-        type: 'color',
-        defaultLength: 100 * size
-      },
-      label: {
-        spacing: 2,
-        style: {
-          fill: themeColors.textColor,
-          stroke: '#fff'
-        },
-        align: legendDirection === 'vertical' ? 'right' : 'bottom',
-        formatter: value => {
-          return mapGetNumberDisplayString(value, columnData, summary_method);
-        }
-      },
-      slidable: false
-    });
-    statisticView.interaction('element-active');
-    statisticView.render();
-    return statisticView;
-  }, [data_color, legend_direction, legend_size, summary_column_key, summary_method, summary_type, table_id]);
-  const renderBubbleChart = (0, _react.useCallback)(function (statisticNewData) {
-    const currentDataSet = dataSetRef.current;
-    const currentChart = chartRef.current;
-    const userDv = currentDataSet.createView().source(statisticNewData).transform({
-      geoDataView: currentDataSet.getView('mapDataModel'),
-      field: 'name',
-      type: 'geo.centroid',
-      as: ['longitude', 'latitude']
-    });
-    let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-    if (summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
-      const table = (0, _dtableUtils.getTableById)(table_id);
-      const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key) || {};
-      columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-    }
-    const statisticView = currentChart.createView();
-    statisticView.data(userDv.rows);
-    currentChart.theme({
-      defaultColor: bubble_color || '#2a67d1'
-    });
-    statisticView.point().position('longitude*latitude').size('value', value => {
-      const percent = value / statisticNewData.sum;
-      let size = percent * 100;
-      return size;
-    }).shape('circle').color(bubble_color || '#2a67d1').tooltip('name*formatted_value*color*nameType*name_cn', (name, value, color, nameType, name_cn) => {
-      return {
-        name: nameType === 'en' ? name : name_cn,
-        color,
-        value
-      };
-    }).style({
-      fillOpacity: 0.6,
-      stroke: bubble_color || '#2a67d1'
-    }).state({
-      active: {
-        style: {
-          lineWidth: 1,
-          stroke: bubble_color || '#2a67d1',
-          fillOpacity: 0.9
-        }
-      }
-    });
-    const themeColors = getThemeColors();
-    const legendDirection = legend_direction || 'vertical';
-    const size = legend_size || 1;
-    currentChart.legend({
-      layout: legendDirection,
-      position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
-      rail: {
-        type: 'size',
-        defaultLength: 100 * size
-      },
-      label: {
-        style: {
-          fill: themeColors.textColor
-          // fill: data_color
-        },
-        align: legendDirection === 'vertical' ? 'right' : 'bottom',
-        formatter: value => {
-          return mapGetNumberDisplayString(value, columnData, summary_method);
-        }
-      },
-      slidable: false
-    });
-    statisticView.interaction('element-active');
-    statisticView.render();
-    return statisticView;
-  }, [bubble_color, legend_direction, legend_size, summary_column_key, summary_method, summary_type, table_id]);
-  (0, _react.useEffect)(() => {
-    const handleResize = () => {
-      const container = chartContainerRef.current;
-      const {
-        width,
-        height
-      } = (0, _utils.getMapCanvasStyle)(container, 2.1);
-      chartRef.current.changeSize(width, height);
-    };
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  // used to fetch mapJson data
-  // only triggered once
-  (0, _react.useEffect)(() => {
-    (async () => {
-      try {
-        const mediaUrl = _context.default.getSetting('mediaUrl');
-        const mapJson = await (0, _mapJson.default)(_constants.MAP_LEVEL.WORLD, '', mediaUrl);
-        setMapData(mapJson);
-        setIsLoading(false);
-      } catch (error) {
-        console.error(error);
-        setIsLoading(false);
-      }
-    })();
-  }, []);
-
-  // used to init map background
-  // if no statistics data, then render empty map
-  (0, _react.useEffect)(() => {
-    if (!chartRef.current) {
-      chartRef.current = createChart(chartContainerRef.current);
-    }
-    // triggered after mapData is set
-    if (!mapData) return;
-    const currentChart = chartRef.current;
-    initChart(currentChart, props);
-    const dataSet = new _index.default();
-    dataSetRef.current = dataSet;
-    // transform map data
-    const data = dataSet.createView('mapDataModel').source(mapData, {
-      type: 'GeoJSON'
-    });
-    const mapView = currentChart.createView();
-    // // draw background map
-    mapView.data(data.rows);
-    mapView.tooltip(false);
-    mapView.polygon().position('longitude*latitude').style({
-      fill: '#e2e2e2',
-      stroke: '#bdbdbd',
-      lineWidth: 1
-    });
-    dataSet.createView('statisticViewModel');
-    mapView.render();
-    return () => {
-      currentChart.destroy();
-    };
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [mapData]);
-  (0, _react.useEffect)(() => {
-    const currentChart = chartRef.current;
-    // need mapData and statisticData to render
-    if (!Array.isArray(statisticData) || !mapData) return;
-    const countryMap = new Map();
-    mapData.features.forEach(item => {
-      countryMap.set(item.properties.name, item.properties.name_cn);
-      countryMap.set(item.properties.name_cn, item.properties.name);
-    });
-    const mapFormattedData = fixData(statisticData, countryMap, type);
-    if (mapFormattedData.length === 0) {
-      currentChart.legend(false);
-      currentChart.render();
-      return;
-    }
-    let currentView;
-    if (type.includes('bubble')) {
-      currentView = renderBubbleChart(mapFormattedData);
-    } else {
-      currentView = renderCommonChart(mapFormattedData);
-    }
-    currentChart.render();
-    return () => {
-      currentView && currentView.destroy();
-    };
-  }, [statisticData, mapData, type, renderCommonChart, renderBubbleChart]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoading && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'statistic-chart-loading-container'
-  }, /*#__PURE__*/_react.default.createElement(_Loading2.default, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('sea-chart-container '),
-    style: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
-    },
-    ref: chartContainerRef
-  }));
-}
-var _default = exports.default = WorldMap;

package/dist/view/wrapper/wrappers-d3/bar.js

@@ -1,262 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-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 _lodashEs = require("lodash-es");
-var d3 = _interopRequireWildcard(require("d3"));
-var _constants = require("../../../constants");
-var _utils = require("../../../utils");
-var _colorUtils = require("../../../utils/color-utils");
-var _intl = _interopRequireDefault(require("../../../intl"));
-var _chartComponent = _interopRequireDefault(require("../chart-component"));
-class Bar extends _chartComponent.default {
-  constructor(props) {
-    super(props);
-    this.handleResize = () => {
-      this.chart.node() && this.chart.node().remove();
-      this.createChart();
-      this.drawChart();
-    };
-    this.createChart = () => {
-      this.initD3Chart(this.container);
-    };
-    this.drawChart = () => {
-      const {
-        customRender
-      } = this.props;
-      let {
-        result: data
-      } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
-      if (!Array.isArray(data)) return;
-      this.draw(data);
-      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
-      (0, _utils.isFunction)(customRender) && customRender(this.chart);
-    };
-    this.getFillColor = data => {
-      const {
-        chart,
-        chartColorTheme
-      } = this.props;
-      const {
-        y_axis_label_color,
-        color_option,
-        y_axis_label_color_rules
-      } = chart.config;
-      let chartBarColor = y_axis_label_color || _constants.CHART_STYLE_COLORS[0];
-      if (chartColorTheme) {
-        chartBarColor = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
-      }
-      const colorRules = color_option === _constants.TYPE_COLOR_USING.USE_RULES && y_axis_label_color_rules && (0, _colorUtils.getConvertedColorRules)(y_axis_label_color_rules);
-      const color = (0, _colorUtils.getLabelColor)({
-        chart: chart.config,
-        colorRules,
-        value: data.value
-      });
-      return color || chartBarColor;
-    };
-    this.showTooltip = (event, data, title) => {
-      const {
-        offsetX,
-        offsetY
-      } = event;
-      const newTooltipData = {
-        title: title,
-        items: [{
-          color: this.getFillColor(data),
-          name: data.name,
-          value: data.value
-        }]
-      };
-      this.setState({
-        tooltipData: newTooltipData
-      });
-      this.setState({
-        toolTipPosition: {
-          offsetX,
-          offsetY
-        }
-      });
-    };
-    this.moveTooltip = event => {
-      const {
-        offsetX,
-        offsetY
-      } = event;
-      this.setState({
-        toolTipPosition: {
-          offsetX,
-          offsetY
-        }
-      });
-    };
-    this.hiddenTooltip = event => {
-      this.setState({
-        toolTipPosition: null
-      });
-    };
-    this.setActiveAndInActiveState = (state, data) => {
-      const {
-        chart
-      } = this.props;
-      const paths = d3.selectAll(`.rects-wrapper-${chart === null || chart === void 0 ? void 0 : chart.id} path`);
-      if (state === 'active') {
-        paths.nodes().forEach(path => {
-          d3.select(path).attr('opacity', 1);
-        });
-        return;
-      }
-      paths.nodes().forEach(path => {
-        if (path.id !== data.slugId) {
-          d3.select(path).attr('opacity', 0.3);
-        }
-      });
-    };
-    this.draw = data => {
-      const {
-        chart,
-        globalTheme,
-        tables
-      } = this.props;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
-      const {
-        display_goal_line,
-        goal_value,
-        goal_label
-      } = chart.style_config || {};
-      const {
-        y_axis_summary_type,
-        y_axis_summary_column_key,
-        y_axis_column_key,
-        y_axis_show_value,
-        label_font_size,
-        table_id,
-        y_axis_max,
-        y_axis_min,
-        y_axis_auto_range
-      } = chart.config;
-      const tooltipTitle = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
-      const {
-        width: chartWidth,
-        height: chartHeight
-      } = this.chartBoundingClientRect;
-      const insertPadding = 30;
-      const borderRadius = 10;
-      const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
-      const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
-      this.chart.append('g').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
-        g.selectAll('.domain').attr('stroke', theme.XAxisColor);
-        g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
-        g.selectAll('text').attr('font-size', theme.fontSize);
-        g.selectAll('text').attr('fill', theme.textColor);
-      });
-      this.chart.append('g').attr('transform', `translate(${insertPadding}, 0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
-        g.select('.domain').remove();
-        g.selectAll('line').node().remove(); // delete the first line
-        g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
-        g.selectAll('text').attr('font-size', theme.fontSize);
-        g.selectAll('text').attr('fill', theme.textColor);
-      });
-      this.chart.append('g').attr('class', `rects-wrapper-${chart === null || chart === void 0 ? void 0 : chart.id}`).selectAll().data(data).join('path').attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('id', (d, index) => d.slugId).attr('d', d => {
-        // Do not draw if the range is smaller than the minimum
-        if (!y_axis_auto_range && d.value <= y_axis_min) {
-          return '';
-        }
-        const path = d3.path();
-        const startX = x(d.name);
-        const startY = y(d.value);
-        path.moveTo(startX, startY + borderRadius);
-        path.quadraticCurveTo(startX, startY, startX + borderRadius, startY);
-        path.lineTo(startX + x.bandwidth() - borderRadius, startY);
-        path.quadraticCurveTo(startX + x.bandwidth(), startY, startX + x.bandwidth(), startY + borderRadius);
-        path.lineTo(startX + x.bandwidth(), y_axis_auto_range ? y(0) : y(y_axis_min));
-        path.lineTo(startX, y_axis_auto_range ? y(0) : y(y_axis_min));
-        path.closePath();
-        return path.toString();
-      }).call(g => {
-        const parentNode = d3.select('.rects-wrapper');
-        g.nodes().forEach(path => {
-          // Add label
-          if (y_axis_show_value) {
-            parentNode.append('text').attr('y', Number(path.dataset.y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(path.dataset.value).call(g => {
-              const {
-                width
-              } = g.node().getBoundingClientRect();
-              g.attr('x', Number(path.dataset.x) + Number(path.dataset.width) / 2 - width);
-            });
-          }
-        });
-      }).on('click', (event, data) => {
-        this.props.toggleRecords(data);
-      }).on('mouseover', (event, data) => {
-        this.showTooltip(event, data, tooltipTitle);
-        this.setActiveAndInActiveState('inActive', data);
-      }).on('mousemove', event => {
-        this.moveTooltip(event);
-      }).on('mouseleave', (event, data) => {
-        this.hiddenTooltip();
-        this.setActiveAndInActiveState('active', data);
-      });
-      if (display_goal_line) {
-        this.chart.append('g').attr('class', 'annotation-wrapper').append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', y(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', y(goal_value)).call(g => {
-          const parentNode = d3.select('.annotation-wrapper');
-          parentNode.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', y(goal_value) - 10).attr('fill', '#666').text(goal_label);
-        });
-      }
-    };
-    this.chart = null;
-    this.state = {
-      tooltipData: null,
-      toolTipPosition: null
-    };
-  }
-  componentDidMount() {
-    this.createChart();
-    this.drawChart();
-    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
-  }
-  componentDidUpdate(prevProps) {
-    super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      var _this$chart;
-      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
-      this.createChart();
-      this.drawChart();
-    }
-  }
-  componentWillUnmount() {
-    this.chart.node() && this.chart.node().remove();
-    window.removeEventListener('resize', this.debouncedHandleResize);
-  }
-  render() {
-    const {
-      tooltipData,
-      toolTipPosition
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "sea-chart-container",
-      ref: ref => this.container = ref
-    }, this.getToolTipContainer(tooltipData, toolTipPosition));
-  }
-}
-Bar.propTypes = {
-  canvasStyle: _propTypes.default.object,
-  chart: _propTypes.default.object,
-  groupbyColumn: _propTypes.default.object,
-  columnGroupbyColumn: _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 = Bar;