sea-chart 0.0.97 → 0.0.99

package/dist/components/color-popover/color-rules/rule-filters/index.css

@@ -155,7 +155,7 @@
 .statistic-color-rule-filters .delete-filter .dtable-icon-fork-number {
   display: inline-block;
   font-size: 12px;
-  color: #949494;
+  color: #999999;
 }
 
 .statistic-color-rule-filters .popover-add-tool {
@@ -173,7 +173,7 @@
 }
 
 .statistic-color-rule-filters .filter-item .dtable-icon-fork-number:hover {
-  color: #5a5a5a;
+  color: #555555;
 }
 
 .statistic-color-rule-filters .filter-container-readonly .selected-option-show,

package/dist/components/color-popover/color-rules-popover.css

@@ -137,7 +137,7 @@
 .statistic-delete-color-rule:hover .dtable-font,
 .statistic-btn-add-color-rule-filter:hover .popover-add-icon,
 .statistic-btn-add-color-rule-filter:hover .add-new-option {
-  color: #5a5a5a;
+  color: #555555;
 }
 
 .statistic-btn-add-color-rule-filter.disabled:hover .popover-add-icon,

package/dist/settings/stacks-settings/index.css

@@ -68,5 +68,5 @@
 }
 
 .sea-chart-settings .sea-chart-y-axis-title .dtable-icon-fork-number:hover {
-  color: #212529;
+  color: #555555;
 }

package/dist/settings/widgets/summary-method-setting.js

@@ -2,7 +2,7 @@ import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { Component } from 'react';
 import { FormGroup, Label } from 'reactstrap';
 import shallowEqual from 'shallowequal';
-import { CHART_TYPE, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUMMARY_SHOW, CHART_DATE_SUMMARY_CALCULATION_METHOD } from '../../constants';
+import { CHART_SUMMARY_CALCULATION_METHOD, CHART_SUMMARY_SHOW, CHART_DATE_SUMMARY_CALCULATION_METHOD } from '../../constants';
 import { BaseUtils } from '../../utils';
 import intl from '../../intl';
 class SummaryMethodSettings extends Component {

package/dist/view/wrapper/area.js

@@ -13,9 +13,11 @@ class Area extends ChartComponent {
         chart
       } = this.props;
       const {
-        column_groupby_column_key
+        column_groupby_column_key,
+        column_groupby_multiple_numeric_column
       } = chart.config;
-      this.isGroupChart = chart.config.type.includes('group') && column_groupby_column_key;
+      const isGroup = column_groupby_multiple_numeric_column || column_groupby_column_key;
+      this.isGroupChart = chart.config.type.includes('group') && isGroup;
     };
     this.createChart = () => {
       const {

package/dist/view/wrapper/index.js

@@ -77,7 +77,8 @@ const Wrapper = _ref => {
       summaryColumnsWithMethod,
       globalTheme,
       chartColorTheme,
-      toggleRecords: toggleStatisticRecordsDialog
+      toggleRecords: toggleStatisticRecordsDialog,
+      isCalculateByView
     };
     switch (type) {
       case CHART_TYPE.TABLE:

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

@@ -1,363 +1,400 @@
-import React from 'react';
+import _Loading from "dtable-ui-component/lib/Loading";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import DataSet from '@antv/data-set/lib/index';
-import { getNumberDisplayString } from 'dtable-utils';
-import PropTypes from 'prop-types';
-import { debounce } from 'lodash-es';
-import { Chart } from '@antv/g2';
+import { getNumberDisplayString, getTableById, getTableColumnByKey } from 'dtable-utils';
+import classNames from 'classnames';
+import { Chart } from '../../utils/custom-g2';
 import intl from '../../intl';
 import fetchMapJson from '../../services/map-json';
-import { BaseUtils, getMapCanvasStyle } from '../../utils';
+import { getMapCanvasStyle } from '../../utils';
 import { COLOR_OPTIONS } from '../../constants/color-rules';
-import { CHART_SUMMARY_TYPE, MAP_LEVEL, CHART_TYPE, TITLE_AMOUNT, DEFAULT_NUMBER_FORMAT_OBJECT } from '../../constants';
+import { CHART_SUMMARY_TYPE, MAP_LEVEL, CHART_TYPE, DEFAULT_NUMBER_FORMAT_OBJECT, THEME_NAME_MAP, CHART_THEME_COLOR } from '../../constants';
 import context from '../../context';
-import ChartComponent from './chart-component';
-const WIDTH = 798;
-const HEIGHT = 394;
-class WorldMap extends ChartComponent {
-  constructor(props) {
-    super(props);
-    this.handleResize = () => {
-      const container = this.container;
-      const {
-        width,
-        height
-      } = getMapCanvasStyle(container, 2.1);
-      this.chart && this.chart.changeSize(width, height);
-    };
-    this.queryMapJson = async () => {
-      const mediaUrl = context.getSetting('mediaUrl');
-      try {
-        const mapJson = await fetchMapJson(MAP_LEVEL.WORLD, '', mediaUrl);
-        this.geoData = mapJson;
-        this.geoData.features.forEach(item => {
-          this.countryMap.set(item.properties.name, item.properties.name_cn);
-          this.countryMap.set(item.properties.name_cn, item.properties.name);
+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) {
+        statisticNewData.push({
+          name_cn,
+          name,
+          nameType,
+          value: value || 0,
+          formatted_value: item.formatted_value
         });
-      } catch (error) {
-        console.error(error);
-      } finally {
-        this.mapFormattedData = this.fixData(this.props.result);
-        this.createChart();
-        this.drawChart();
+        if (chartType === CHART_TYPE.WORLD_MAP_BUBBLE) {
+          sum += item.value;
+        }
       }
-    };
-    this.fixData = statisticData => {
-      if (!statisticData) return [];
-      let statisticNewData = [];
-      let sum = 0;
-      const {
-        config
-      } = this.props.chart;
-      const type = config.type;
-      statisticData.forEach(item => {
-        if (item && item.name) {
-          let nameType, name, name_cn;
-          if (this.reg.test(item.name)) {
-            nameType = 'en';
-            name = item.name;
-            name_cn = this.countryMap.get(name);
-          } else {
-            nameType = 'zh-cn';
-            name = this.countryMap.get(item.name);
-            name_cn = item.name;
-          }
-          const value = item.value;
-          if (name_cn && name) {
-            statisticNewData.push({
-              name_cn,
-              name,
-              nameType,
-              value: value || 0,
-              formatted_value: item.formatted_value
-            });
-            if (type === CHART_TYPE.WORLD_MAP_BUBBLE) {
-              sum += item.value;
-            }
-          }
+    }
+  });
+  if (chartType === 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
+  } = getMapCanvasStyle(container, 2.1);
+  let config = {
+    container: container,
+    width,
+    height
+  };
+  return new Chart(config);
+}
+function initChart(currentChart, props) {
+  const {
+    result,
+    toggleRecords,
+    isCalculateByView
+  } = props;
+  if (isCalculateByView) {
+    currentChart.on('element:click', e => {
+      const lang = intl.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 === CHART_SUMMARY_TYPE.Distinct_values) {
+    return value;
+  }
+  return 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 === THEME_NAME_MAP.DARK) {
+    themeColors = CHART_THEME_COLOR.dark;
+  }
+  return themeColors || CHART_THEME_COLOR[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 = useRef(null);
+  const chartContainerRef = useRef(null);
+  const dataSetRef = useRef(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [mapData, setMapData] = useState(null);
+  const renderCommonChart = 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 = COLOR_OPTIONS.filter(item => item.name === data_color)[0] || COLOR_OPTIONS[0];
+    const {
+      exampleColors,
+      highlightedBorderColor
+    } = currentColorOption;
+    let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+    if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+      const table = getTableById(table_id);
+      const summaryColumn = getTableColumnByKey(table, summary_column_key) || {};
+      columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+    }
+    const statisticView = currentChart.createView();
+    statisticView.data(userDataView.rows);
+    statisticView.polygon().position('longitude*latitude').color('value', "".concat(exampleColors[0], "-").concat(exampleColors[4], "-").concat(exampleColors[8])).style({
+      lineWidth: 1,
+      stroke: '#bdbdbd',
+      strokeOpacity: 0.5
+    }).state({
+      active: {
+        style: {
+          lineWidth: 1,
+          stroke: highlightedBorderColor
         }
-      });
-      if (type === CHART_TYPE.WORLD_MAP_BUBBLE) {
-        statisticNewData.sum = sum;
       }
-      return statisticNewData;
-    };
-    this.initChart = container => {
-      const {
-        width,
-        height
-      } = getMapCanvasStyle(container, 2.1);
-      let config = {
-        container: container,
-        width,
-        height
+    }).tooltip('name*formatted_value*color*nameType*name_cn', (name, value, color, nameType, name_cn) => {
+      return {
+        name: nameType === 'en' ? name : name_cn,
+        color,
+        value
       };
-      this.chart = new Chart(config);
-    };
-    this.createChart = () => {
-      this.initChart(this.container);
-      this.chart.on('element:click', e => {
-        const {
-          result
-        } = this.props;
-        const lang = intl.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) {
-          this.props.toggleRecords(clickData);
+    });
+    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',
+          lineWidth: 1
+        },
+        align: legendDirection === 'vertical' ? 'right' : 'bottom',
+        formatter: value => {
+          return mapGetNumberDisplayString(value, columnData, summary_method);
         }
-      });
-      this.chart.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\">".concat(intl.get(TITLE_AMOUNT), " : {value}<div></div>"),
-        domStyles: {
-          'g2-tooltip': {
-            borderRadius: '2px',
-            backgroundColor: '#fff',
-            padding: '10px'
-          },
-          'tooltip-item': {
-            marginTop: '5px'
-          }
+      },
+      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 = 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 = DEFAULT_NUMBER_FORMAT_OBJECT;
+    if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+      const table = getTableById(table_id);
+      const summaryColumn = getTableColumnByKey(table, summary_column_key) || {};
+      columnData = summaryColumn.data || 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
         }
-      });
-      this.chart.scale({
-        longitude: {
-          sync: true
+      }
+    });
+    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
         },
-        latitude: {
-          sync: true
+        align: legendDirection === 'vertical' ? 'right' : 'bottom',
+        formatter: value => {
+          return mapGetNumberDisplayString(value, columnData, summary_method);
         }
-      });
-      this.chart.axis(false);
-      this.dataSet = new DataSet();
-      if (!this.geoData) return;
-
-      // transform map data
-      const mapData = this.dataSet.createView('mapDataModel').source(this.geoData, {
-        type: 'GeoJSON'
-      });
-      const mapView = this.chart.createView();
-
-      // draw background map
-      mapView.data(mapData.rows);
-      mapView.tooltip(false);
-      mapView.polygon().position('longitude*latitude').style({
-        fill: '#e2e2e2',
-        stroke: '#bdbdbd',
-        lineWidth: 1
-      });
-      this.dataSet.createView('statisticViewModel');
-      mapView.render();
-    };
-    this.drawChart = () => {
+      },
+      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]);
+  useEffect(() => {
+    const handleResize = () => {
+      const container = chartContainerRef.current;
       const {
-        chart
-      } = this.props;
-      this.loadData(this.mapFormattedData);
-      if (this.mapFormattedData.length === 0) {
-        this.chart.legend(false);
-        this.chart.render();
-        return;
-      }
-      const type = chart.config.type;
-      if (!type.includes('bubble')) {
-        this.renderCommonMap(this.mapFormattedData);
-      } else {
-        this.renderBubbleMap(this.mapFormattedData);
-      }
+        width,
+        height
+      } = getMapCanvasStyle(container, 2.1);
+      chartRef.current.changeSize(width, height);
     };
-    this.renderCommonMap = data => {
-      const {
-        chart,
-        summaryColumn
-      } = this.props;
-      const userDataView = this.dataSet.getView('statisticViewModel').source(data).transform({
-        geoDataView: this.dataSet.getView('mapDataModel'),
-        field: 'name',
-        type: 'geo.region',
-        as: ['longitude', 'latitude']
-      });
-      const {
-        data_color,
-        summary_type
-      } = chart.config;
-      const currentColorOption = COLOR_OPTIONS.filter(item => item.name === data_color)[0] || COLOR_OPTIONS[0];
-      const {
-        exampleColors,
-        highlightedBorderColor
-      } = currentColorOption;
-      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
-      if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
-        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
-      }
-      this.statisticView = this.chart.createView();
-      this.statisticView.data(userDataView.rows);
-      this.statisticView.polygon().position('longitude*latitude').color('value', "".concat(exampleColors[0], "-").concat(exampleColors[4], "-").concat(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 = this.getThemeColors();
-      const legendDirection = chart.config.legend_direction || 'vertical';
-      const size = chart.config.legend_size || 1;
-      this.chart.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',
-            lineWidth: 1
-          },
-          align: legendDirection === 'vertical' ? 'right' : 'bottom',
-          formatter: value => {
-            return getNumberDisplayString(value, summaryColumnData);
-          }
-        },
-        slidable: false
-      });
-      this.statisticView.interaction('element-active');
-      this.statisticView.render();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
     };
-    this.renderBubbleMap = data => {
-      const {
-        chart,
-        summaryColumn
-      } = this.props;
-      const userDv = this.dataSet.createView().source(data).transform({
-        geoDataView: this.dataSet.getView('mapDataModel'),
-        field: 'name',
-        type: 'geo.centroid',
-        as: ['longitude', 'latitude']
-      });
-      const {
-        bubble_color,
-        summary_type,
-        legend_direction,
-        legend_size
-      } = chart.config;
-      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
-      if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
-        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+  }, []);
+
+  // used to fetch mapJson data
+  // only triggered once
+  useEffect(() => {
+    (async () => {
+      try {
+        const mediaUrl = context.getSetting('mediaUrl');
+        const mapJson = await fetchMapJson(MAP_LEVEL.WORLD, '', mediaUrl);
+        setMapData(mapJson);
+        setIsLoading(false);
+      } catch (error) {
+        console.error(error);
+        setIsLoading(false);
       }
-      this.statisticView = this.chart.createView();
-      this.statisticView.data(userDv.rows);
-      this.chart.theme({
-        defaultColor: bubble_color || '#2a67d1'
-      });
-      this.statisticView.point().position('longitude*latitude').size('value', value => {
-        const percent = value / data.sum;
-        let size = percent * 100;
-        return size;
-      }).shape('circle').color(bubble_color || '#2a67d1').tooltip('name*formatted_value*color', (name, value, color) => {
-        return {
-          name,
-          color,
-          value
-        };
-      }).style({
-        fillOpacity: 0.6,
-        stroke: bubble_color || '#2a67d1'
-      }).state({
-        active: {
-          style: {
-            lineWidth: 1,
-            stroke: bubble_color || '#2a67d1',
-            fillOpacity: 0.9
-          }
-        }
-      });
-      const themeColors = this.getThemeColors();
-      const legendDirection = legend_direction || 'vertical';
-      const size = legend_size || 1;
-      this.chart.legend({
-        layout: legendDirection,
-        position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
-        rail: {
-          type: 'size',
-          defaultLength: 100 * size
-        },
-        label: {
-          style: {
-            fill: themeColors.textColor
-          },
-          align: legendDirection === 'vertical' ? 'right' : 'bottom',
-          formatter: value => {
-            return getNumberDisplayString(value, summaryColumnData);
-          }
-        },
-        slidable: false
-      });
-      this.statisticView.interaction('element-active');
-      this.statisticView.render();
-    };
-    this.statisticView = null;
-    this.chart = null;
-    this.geoData = null;
-    this.countryMap = new Map();
-    this.dataSet = null;
-    this.mapFormattedData = null;
-    this.reg = /^([A-Za-z])/;
-    this.state = {
-      isDataLoaded: false
-    };
-  }
-  componentDidMount() {
-    this.queryMapJson();
-    this.debouncedHandleResize = debounce(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
-  }
-  componentDidUpdate(prevProps) {
-    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
-      this.createChart();
-      this.drawChart();
+    })();
+  }, []);
+
+  // used to init map background
+  // if no statistics data, then render empty map
+  useEffect(() => {
+    if (!chartRef.current) {
+      chartRef.current = createChart(chartContainerRef.current);
     }
-  }
-  componentWillUnmount() {
-    this.chart && this.chart.destroy();
-    window.removeEventListener('resize', this.debouncedHandleResize);
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "sea-chart-container",
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
-      ref: ref => this.container = ref
+    // triggered after mapData is set
+    if (!mapData) return;
+    const currentChart = chartRef.current;
+    initChart(currentChart, props);
+    const dataSet = new DataSet();
+    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]);
+  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.createElement(React.Fragment, null, isLoading && /*#__PURE__*/React.createElement("div", {
+    className: 'statistic-chart-loading-container'
+  }, /*#__PURE__*/React.createElement(_Loading, null)), /*#__PURE__*/React.createElement("div", {
+    className: classNames('sea-chart-container '),
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    ref: chartContainerRef
+  }));
 }
-WorldMap.propTypes = {
-  chart: PropTypes.object,
-  summaryColumn: PropTypes.object,
-  result: PropTypes.array,
-  tables: PropTypes.array,
-  theme: PropTypes.object,
-  toggleRecords: PropTypes.func
-};
 export default WorldMap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "0.0.97",
+  "version": "0.0.99",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",