sea-chart 0.0.97 → 0.0.98-2

package/dist/components/types-dialog/index.js

@@ -6,20 +6,30 @@ import { eventStopPropagation } from '../../utils';
 import context from '../../context';
 import intl from '../../intl';
 import Icon from '../icon';
+import useForceUpdate from './use-force-update';
 import './index.css';
 const TypesDialog = _ref => {
   let {
     type,
+    lang,
     onToggle: propsOnToggle,
     onChange
   } = _ref;
   const [currentCatIndex, setCurrentCatIndex] = useState(0);
   const [selectedType, setType] = useState(type);
   const seaChartTypeContainerRef = useRef(null);
+  const forceUpdate = useForceUpdate();
   const notSupportStatisticTypes = useMemo(() => {
     const lang = context.getSetting('lang');
     return lang !== 'zh-cn' ? ZH_CN_SUPPORT_CHARTS : [];
   }, []);
+  useEffect(() => {
+    if (lang) {
+      intl.setLang(lang);
+      forceUpdate();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   useEffect(() => {
     const selectStatisticIndex = CHART_TYPES.findIndex(item => item.children.includes(type));
     const currentCatIndex = selectStatisticIndex < 0 ? 0 : selectStatisticIndex;

package/dist/components/types-dialog/use-force-update.js

@@ -0,0 +1,9 @@
+import { useCallback, useState } from 'react';
+const useForceUpdate = () => {
+  const [, setState] = useState(0);
+  const forceUpdate = useCallback(() => {
+    setState(n => n + 1);
+  }, []);
+  return forceUpdate;
+};
+export default useForceUpdate;

package/dist/constants/index.js

@@ -6,6 +6,7 @@ import { CHART_TYPE, CHART_TYPE_SHOW, CHART_TYPES } from './type';
 import { CHART_TYPE_IMAGE } from './type-image';
 import { regions } from './regions';
 import { TABLE_DIMENSIONS } from './table';
+export const DEFAULT_LANG = 'en';
 export const TREND_TYPES = {
   UP: 'up',
   DOWN: 'down',

package/dist/intl.js

@@ -1,18 +1,19 @@
 import { setLocale } from 'dtable-ui-component/lib/lang';
 import LOCALES from './locale';
+import { DEFAULT_LANG } from './constants';
 class Intl {
   constructor(_ref) {
     var _this = this;
     let {
-      lang: _lang = 'zh-cn'
+      lang: _lang = DEFAULT_LANG
     } = _ref;
     this.setLang = function () {
-      let lang = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'zh-cn';
+      let lang = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_LANG;
       const validLang = lang.toLowerCase();
       setLocale(validLang);
       if (validLang === _this.lang) return;
       _this.lang = validLang;
-      _this.translation = LOCALES[_this.lang] || LOCALES['zh-cn'];
+      _this.translation = LOCALES[_this.lang];
     };
     this.get = function (key) {
       let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -30,10 +31,10 @@ class Intl {
       }) || key;
     };
     this.lang = _lang.toLowerCase();
-    this.translation = LOCALES[this.lang] || LOCALES['zh-cn'];
+    this.translation = LOCALES[this.lang];
   }
 }
 const intl = new Intl({
-  lang: 'zh-cn'
+  lang: DEFAULT_LANG
 });
 export default intl;

package/dist/locale/lang/de.js

@@ -250,6 +250,7 @@ const de = {
   "Display_empty_when_data_is_zero": "Wert 0 als leeren Wert anzeigen",
   "Use_default_color": "Standardfarbe verwenden",
   "Use_colors_in_single_select_solumn": "Verwenden Sie Farben in einer einzelnen Auswahlspalte",
-  "Search_records": "Einträge suchen"
+  "Search_records": "Einträge suchen",
+  "All_charts": "All charts"
 };
 export default de;

package/dist/locale/lang/en.js

@@ -250,6 +250,7 @@ const en = {
   "Display_empty_when_data_is_zero": "Display empty when data is zero",
   "Use_default_color": "Use default color",
   "Use_colors_in_single_select_solumn": "Use colors in single select column",
-  "Search_records": "Search records"
+  "Search_records": "Search records",
+  "All_charts": "All charts"
 };
 export default en;

package/dist/locale/lang/es.js

@@ -250,6 +250,7 @@ const es = {
   "Display_empty_when_data_is_zero": "Display empty when data is zero",
   "Use_default_color": "Use default color",
   "Use_colors_in_single_select_solumn": "Use colors in single select column",
-  "Search_records": "Search records"
+  "Search_records": "Search records",
+  "All_charts": "All charts"
 };
 export default es;

package/dist/locale/lang/fr.js

@@ -250,6 +250,7 @@ const fr = {
   "Display_empty_when_data_is_zero": "Afficher la valeur 0 comme valeur vide",
   "Use_default_color": "Utiliser la couleur par défaut",
   "Use_colors_in_single_select_solumn": "Utiliser les couleurs dans une colonne de sélection unique",
-  "Search_records": "Rechercher des enregistrements"
+  "Search_records": "Rechercher des enregistrements",
+  "All_charts": "All charts"
 };
 export default fr;

package/dist/locale/lang/pt.js

@@ -250,6 +250,7 @@ const pt = {
   "Display_empty_when_data_is_zero": "Display empty when data is zero",
   "Use_default_color": "Use default color",
   "Use_colors_in_single_select_solumn": "Use colors in single select column",
-  "Search_records": "Search records"
+  "Search_records": "Search records",
+  "All_charts": "All charts"
 };
 export default pt;

package/dist/locale/lang/ru.js

@@ -250,6 +250,7 @@ const ru = {
   "Display_empty_when_data_is_zero": "Display empty when data is zero",
   "Use_default_color": "Use default color",
   "Use_colors_in_single_select_solumn": "Use colors in single select column",
-  "Search_records": "Search records"
+  "Search_records": "Search records",
+  "All_charts": "All charts"
 };
 export default ru;

package/dist/locale/lang/zh_CN.js

@@ -250,6 +250,7 @@ const zh_CN = {
   "Display_empty_when_data_is_zero": "数据为零时留空",
   "Use_default_color": "使用默认颜色",
   "Use_colors_in_single_select_solumn": "使用列中的选项颜色",
-  "Search_records": "搜索记录"
+  "Search_records": "搜索记录",
+  "All_charts": "所有图表"
 };
 export default zh_CN;

package/dist/settings/widgets/group-by.js

@@ -102,7 +102,15 @@ class GroupBy extends Component {
       if ([CHART_TYPE.COMPLETENESS, CHART_TYPE.COMPLETENESS_GROUP].includes(type)) {
         newColumns = newColumns.filter(column => COMPLETENESS_GROUPBY_SUPPORTED_COLUMN_TYPE.includes(column.value.type));
       } else if (type === CHART_TYPE.SCATTER) {
-        newColumns = newColumns.filter(column => NUMBERIC_COLUMN_TYPE.includes(column.value.type));
+        newColumns = newColumns.filter(column => {
+          if (column.value.type === CellType.FORMULA) {
+            return column.value.data.result_type === CellType.NUMBER;
+          } else if (column.value.type === CellType.LINK_FORMULA) {
+            return [CellType.NUMBER, CellType.RATE].includes(column.value.data.array_type);
+          } else {
+            return NUMBERIC_COLUMN_TYPE.includes(column.value.type);
+          }
+        });
       }
       if (isRenderNoUsed) {
         newColumns.unshift({

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/utils/chart-utils/base-utils.js

@@ -42,6 +42,12 @@ BaseUtils.isValidExistChart = (tables, chart) => {
   } = config;
   const table = getTableById(tables, table_id);
   if (!table) return false;
+  if (type === CHART_TYPE.SCATTER) {
+    const {
+      column_groupby_column_key
+    } = config;
+    if (!column_groupby_column_key) return false;
+  }
   if (config.type === CHART_TYPE.BASIC_NUMBER_CARD) {
     const {
       summary_type
@@ -579,7 +585,7 @@ BaseUtils.formatPieChartData = (data, chart, tables, currentTheme, useColumnColo
 };
 // table
 // format SINGLE_SELECT, LAST_MODIFIER, CREATOR, COLLABORATOR, DATE, NUMBER
-BaseUtils.updateTableViewListItemNameAndColor = (result, column, nameKey, colorKey) => {
+BaseUtils.updateTableViewListItemNameAndColor = (result, column, nameKey, colorKey, isScatterChart) => {
   let {
     type: columnType,
     data: columnData
@@ -636,11 +642,18 @@ BaseUtils.updateTableViewListItemNameAndColor = (result, column, nameKey, colorK
       }
       result[nameKey] = dayjs(name).format(format);
     }
+  } else if (columnType === CellType.LINK_FORMULA) {
+    // scatter only use number
+    if (isScatterChart) {
+      name.length && (name = name[0]);
+      let valueNumber = parseFloat(name);
+      result[nameKey] = isNumber(valueNumber) ? getNumberDisplayString(valueNumber, columnData) : name;
+    }
   }
 };
-BaseUtils.updateTableViewList = (result, column, nameKey, colorKey) => {
+BaseUtils.updateTableViewList = (result, column, nameKey, colorKey, isScatterChart) => {
   result.forEach(result => {
-    _BaseUtils.updateTableViewListItemNameAndColor(result, column, nameKey, colorKey);
+    _BaseUtils.updateTableViewListItemNameAndColor(result, column, nameKey, colorKey, isScatterChart);
   });
 };
 // sort chart

package/dist/utils/chart-utils/original-data-utils/scatter-calculator.js

@@ -12,7 +12,6 @@ function updateBasicChartRows(results, index, name, dataItem, row) {
   } else {
     updatedResult = {
       ...dataItem,
-      name,
       rows: [row]
     };
     results.push(updatedResult);

package/dist/utils/chart-utils/sql-statistics-utils.js

@@ -1800,14 +1800,15 @@ SQLStatisticsUtils.scatterSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, c
   } = columnMap;
   // format sql rows
   const originalSqlRows = cloneDeep(sqlRows);
-  BaseUtils.updateTableViewList(sqlRows, groupbyColumn, groupbyColumn.key, 'color');
-  BaseUtils.updateTableViewList(sqlRows, summaryColumn, summaryColumn.key, 'color');
+  const isScatter = true;
+  BaseUtils.updateTableViewList(sqlRows, groupbyColumn, groupbyColumn.key, 'color', isScatter);
+  BaseUtils.updateTableViewList(sqlRows, summaryColumn, summaryColumn.key, 'color', isScatter);
   if (sqlColumnGroupbyColumnKey) BaseUtils.updateTableViewList(sqlRows, columnGroupbyColumn, sqlColumnGroupbyColumnKey, 'color');
   const res = [];
   sqlRows.forEach((row, index) => {
-    const xValue = '' + row[sqlXColumnKey] || intl.get('Empty');
-    const yValue = '' + row[sqlYColumnKey] || intl.get('Empty');
-    const groupby = '' + row[sqlColumnGroupbyColumnKey] || intl.get('Empty');
+    const xValue = row[sqlXColumnKey] ? '' + row[sqlXColumnKey] : intl.get('Empty');
+    const yValue = row[sqlYColumnKey] ? '' + row[sqlYColumnKey] : intl.get('Empty');
+    const groupby = row[sqlColumnGroupbyColumnKey] ? '' + row[sqlColumnGroupbyColumnKey] : null;
     const originalSqlRow = originalSqlRows[index];
     const originalXValue = originalSqlRow[sqlXColumnKey];
     const originalYValue = originalSqlRow[sqlYColumnKey];
@@ -1914,7 +1915,8 @@ SQLStatisticsUtils.calculateChart = (chart, value, callback, sqlRows) => {
   try {
     chartSQLMap = chartColumn2SqlColumn(newChart, table);
   } catch (error) {
-    const error_message = 'There_are_some_problems_with_the_filters';
+    let error_message = 'There_are_some_problems_with_the_filters';
+    if (error.message) error_message = error.message;
     return callback && callback(error_message, '', null);
   }
   const tipMessage = 'There_are_no_statistic_results_yet';

package/dist/view/index.js

@@ -7,7 +7,7 @@ import intl from '../intl';
 import eventBus from '../utils/event-bus';
 import { Loading } from '../components';
 import { ChartUtils, BaseUtils } from '../utils/chart-utils';
-import { THEME_NAME_MAP } from '../constants';
+import { DEFAULT_LANG, THEME_NAME_MAP } from '../constants';
 import { CommonEventTypes } from '../constants/common-constants';
 import Wrapper from './wrapper';
 import Title from './title';
@@ -107,7 +107,7 @@ class View extends React.PureComponent {
     };
     context.init(props);
     props.onViewRef && props.onViewRef(this);
-    const lang = context.getSetting('lang') || 'zh-cn';
+    const lang = context.getSetting('lang') || DEFAULT_LANG;
     intl.setLang(lang);
   }
   componentDidMount() {

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/scatter.js

@@ -96,8 +96,8 @@ export function Scatter(_ref) {
       }).shape('circle').tooltip('groupby*name*value', (groupby, name, value) => {
         return {
           name: groupby || groupby === 0 ? groupby : intl.get('Empty'),
-          valueX: "".concat(selectedXAxisColumn.name, ": ").concat(name),
-          valueY: "".concat(selectedYAxisColumn.name, ": ").concat(value)
+          valueX: "".concat(selectedXAxisColumn === null || selectedXAxisColumn === void 0 ? void 0 : selectedXAxisColumn.name, ": ").concat(name),
+          valueY: "".concat(selectedYAxisColumn === null || selectedYAxisColumn === void 0 ? void 0 : selectedYAxisColumn.name, ": ").concat(value)
         };
       }).style({
         fillOpacity: 0.85

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

@@ -1,363 +1,376 @@
-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) {
+  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) {
+  const {
+    result: statisticData,
+    chart
+  } = props;
+
+  // 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.98-2",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",