dtable-statistic 4.2.2 → 4.3.1

package/es/stat-view/world-map.js

@@ -1,7 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import PropTypes from 'prop-types';
 import DataSet from '@antv/data-set/lib/index';
@@ -11,44 +7,42 @@ import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
 import { COLOR_OPTIONS, DEFAULT_NUMBER_FORMAT_OBJECT, STAT_TYPE, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
 import { MAP_LEVEL } from '../constants/map';
-var WIDTH = 798;
-var HEIGHT = 394;
-var WorldMap = /*#__PURE__*/function (_BaseChart) {
-  _inherits(WorldMap, _BaseChart);
-  var _super = _createSuper(WorldMap);
-  function WorldMap(props) {
-    var _this;
-    _classCallCheck(this, WorldMap);
-    _this = _super.call(this, props);
-    _this.rerenderChart = function () {
-      if (!_this.chart) return;
-      _this.chart.destroy();
-      _this.initStatisticContext(_this.geoData);
+const WIDTH = 798;
+const HEIGHT = 394;
+class WorldMap extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.rerenderChart = () => {
+      if (!this.chart) return;
+      this.chart.destroy();
+      this.initStatisticContext(this.geoData);
     };
-    _this.fixData = function (statisticData) {
+    this.fixData = statisticData => {
       if (!statisticData) return [];
-      var statisticNewData = [];
-      var sum = 0;
-      var statItem = _this.props.statItem;
-      var type = statItem.type;
-      statisticData.forEach(function (item, index) {
+      let statisticNewData = [];
+      let sum = 0;
+      const {
+        statItem
+      } = this.props;
+      const type = statItem.type;
+      statisticData.forEach((item, index) => {
         if (item && item.name) {
-          var nameType, name, name_cn;
-          if (_this.reg.test(item.name)) {
+          let nameType, name, name_cn;
+          if (this.reg.test(item.name)) {
             nameType = 'en';
             name = item.name;
-            name_cn = _this.countryMap.get(name);
+            name_cn = this.countryMap.get(name);
           } else {
             nameType = 'zh-cn';
-            name = _this.countryMap.get(item.name);
+            name = this.countryMap.get(item.name);
             name_cn = item.name;
           }
-          var value = item.value;
+          const value = item.value;
           if (name_cn && name) {
             statisticNewData.push({
-              name_cn: name_cn,
-              name: name,
-              nameType: nameType,
+              name_cn,
+              name,
+              nameType,
               value: value || 0,
               formatted_value: item.formatted_value
             });
@@ -63,36 +57,38 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
       }
       return statisticNewData;
     };
-    _this.renderCommonMap = function (data) {
-      var _this$props = _this.props,
-        getTableById = _this$props.getTableById,
-        statItem = _this$props.statItem;
-      var userDataView = _this.dataSet.getView('statisticViewModel').source(data).transform({
-        geoDataView: _this.dataSet.getView('mapDataModel'),
+    this.renderCommonMap = data => {
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const userDataView = this.dataSet.getView('statisticViewModel').source(data).transform({
+        geoDataView: this.dataSet.getView('mapDataModel'),
         field: 'name',
         type: 'geo.region',
         as: ['longitude', 'latitude']
       });
-      var _this$props$statItem = _this.props.statItem,
-        table_id = _this$props$statItem.table_id,
-        data_color = _this$props$statItem.data_color,
-        summary_type = _this$props$statItem.summary_type,
-        summary_method = _this$props$statItem.summary_method,
-        summary_column = _this$props$statItem.summary_column;
-      var currentColorOption = COLOR_OPTIONS.filter(function (item) {
-        return item.name == data_color;
-      })[0] || COLOR_OPTIONS[0];
-      var exampleColors = currentColorOption.exampleColors,
-        highlightedBorderColor = currentColorOption.highlightedBorderColor;
-      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      const {
+        table_id,
+        data_color,
+        summary_type,
+        summary_method,
+        summary_column
+      } = this.props.statItem;
+      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 === SUMMARY_TYPE.ADVANCED) {
-        var table = getTableById(table_id);
-        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
+        const table = getTableById(table_id);
+        const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
         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({
+      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
@@ -103,17 +99,17 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
             stroke: highlightedBorderColor
           }
         }
-      }).tooltip('name*formatted_value*color*nameType*name_cn', function (name, value, color, nameType, name_cn) {
+      }).tooltip('name*formatted_value*color*nameType*name_cn', (name, value, color, nameType, name_cn) => {
         return {
           name: nameType === 'en' ? name : name_cn,
-          color: color,
-          value: value
+          color,
+          value
         };
       });
-      var themeColors = _this.getThemeColors();
-      var legendDirection = statItem.legend_direction || 'vertical';
-      var size = statItem.legend_size || 1;
-      _this.chart.legend({
+      const themeColors = this.getThemeColors();
+      const legendDirection = statItem.legend_direction || 'vertical';
+      const size = statItem.legend_size || 1;
+      this.chart.legend({
         layout: legendDirection,
         position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
         rail: {
@@ -126,54 +122,56 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
             fill: themeColors.textColor
           },
           align: legendDirection === 'vertical' ? 'right' : 'bottom',
-          formatter: function formatter(value) {
-            return _this.getNumberDisplayString(value, summaryColumnData, summary_method);
+          formatter: value => {
+            return this.getNumberDisplayString(value, summaryColumnData, summary_method);
           }
         },
         slidable: false
       });
-      _this.statisticView.interaction('element-active');
-      _this.statisticView.render();
+      this.statisticView.interaction('element-active');
+      this.statisticView.render();
     };
-    _this.renderBubbleMap = function (data) {
-      var _this$props2 = _this.props,
-        getTableById = _this$props2.getTableById,
-        statItem = _this$props2.statItem,
-        isPreview = _this$props2.isPreview;
-      var userDv = _this.dataSet.createView().source(data).transform({
-        geoDataView: _this.dataSet.getView('mapDataModel'),
+    this.renderBubbleMap = data => {
+      const {
+        getTableById,
+        statItem,
+        isPreview
+      } = this.props;
+      const userDv = this.dataSet.createView().source(data).transform({
+        geoDataView: this.dataSet.getView('mapDataModel'),
         field: 'name',
         type: 'geo.centroid',
         as: ['longitude', 'latitude']
       });
-      var _this$props$statItem2 = _this.props.statItem,
-        table_id = _this$props$statItem2.table_id,
-        summary_type = _this$props$statItem2.summary_type,
-        summary_method = _this$props$statItem2.summary_method,
-        summary_column = _this$props$statItem2.summary_column;
-      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      const {
+        table_id,
+        summary_type,
+        summary_method,
+        summary_column
+      } = this.props.statItem;
+      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       if (summary_type === SUMMARY_TYPE.ADVANCED) {
-        var table = getTableById(table_id);
-        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
+        const table = getTableById(table_id);
+        const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
         summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
-      _this.statisticView = _this.chart.createView();
-      _this.statisticView.data(userDv.rows);
-      _this.chart.theme({
+      this.statisticView = this.chart.createView();
+      this.statisticView.data(userDv.rows);
+      this.chart.theme({
         defaultColor: statItem.bubble_color || '#2a67d1'
       });
-      _this.statisticView.point().position('longitude*latitude').size('value', function (value) {
-        var percent = value / data.sum;
-        var size = percent * 100;
+      this.statisticView.point().position('longitude*latitude').size('value', value => {
+        const percent = value / data.sum;
+        let size = percent * 100;
         if (isPreview && size > 60) {
           size = 60;
         }
         return size;
-      }).shape('circle').color(statItem.bubble_color || '#2a67d1').tooltip('name*formatted_value*color', function (name, value, color) {
+      }).shape('circle').color(statItem.bubble_color || '#2a67d1').tooltip('name*formatted_value*color', (name, value, color) => {
         return {
-          name: name,
-          color: color,
-          value: value
+          name,
+          color,
+          value
         };
       }).style({
         fillOpacity: 0.6,
@@ -187,10 +185,10 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
-      var themeColors = _this.getThemeColors();
-      var legendDirection = statItem.legend_direction || 'vertical';
-      var size = statItem.legend_size || 1;
-      _this.chart.legend({
+      const themeColors = this.getThemeColors();
+      const legendDirection = statItem.legend_direction || 'vertical';
+      const size = statItem.legend_size || 1;
+      this.chart.legend({
         layout: legendDirection,
         position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
         rail: {
@@ -202,95 +200,98 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
             fill: themeColors.textColor
           },
           align: legendDirection === 'vertical' ? 'right' : 'bottom',
-          formatter: function formatter(value) {
-            return _this.getNumberDisplayString(value, summaryColumnData, summary_method);
+          formatter: value => {
+            return this.getNumberDisplayString(value, summaryColumnData, summary_method);
           }
         },
         slidable: false
       });
-      _this.statisticView.interaction('element-active');
-      _this.statisticView.render();
+      this.statisticView.interaction('element-active');
+      this.statisticView.render();
     };
-    _this.updateStatisticData = function (data) {
+    this.updateStatisticData = data => {
       // re-render statistic data view;
-      if (_this.statisticView) {
-        _this.statisticView.destroy();
+      if (this.statisticView) {
+        this.statisticView.destroy();
       }
       if (data.length === 0) {
-        _this.chart.legend(false);
-        _this.chart.render();
+        this.chart.legend(false);
+        this.chart.render();
         return;
       }
-      var statItem = _this.props.statItem;
-      var type = statItem.type;
+      const {
+        statItem
+      } = this.props;
+      const type = statItem.type;
       if (!type.includes('bubble')) {
-        _this.renderCommonMap(data);
+        this.renderCommonMap(data);
       } else {
-        _this.renderBubbleMap(data);
+        this.renderBubbleMap(data);
       }
-      _this.chart.render();
+      this.chart.render();
     };
-    _this.getSize = function () {
-      var containerWidth = _this.container.clientWidth - 40; // 40: padding
-      var containerHeight = _this.container.clientHeight - 40;
-      var h = containerHeight;
-      var w = h * (WIDTH / HEIGHT);
+    this.getSize = () => {
+      const containerWidth = this.container.clientWidth - 40; // 40: padding
+      const containerHeight = this.container.clientHeight - 40;
+      let h = containerHeight;
+      let w = h * (WIDTH / HEIGHT);
       if (w > containerWidth) {
         w = containerWidth;
         h = w * (HEIGHT / WIDTH);
       }
       return {
-        containerWidth: containerWidth,
-        containerHeight: containerHeight,
-        w: w,
-        h: h
+        containerWidth,
+        containerHeight,
+        w,
+        h
       };
     };
-    _this.initStatisticContext = function (geolocation) {
-      _this.countryMap = new Map();
-      geolocation.features.forEach(function (item) {
-        _this.countryMap.set(item.properties.name, item.properties.name_cn);
-        _this.countryMap.set(item.properties.name_cn, item.properties.name);
+    this.initStatisticContext = geolocation => {
+      this.countryMap = new Map();
+      geolocation.features.forEach(item => {
+        this.countryMap.set(item.properties.name, item.properties.name_cn);
+        this.countryMap.set(item.properties.name_cn, item.properties.name);
       });
-      if (!_this.container) return;
+      if (!this.container) return;
 
       // create chart
-      var _this$getSize = _this.getSize(),
-        containerWidth = _this$getSize.containerWidth,
-        containerHeight = _this$getSize.containerHeight,
-        mapWidth = _this$getSize.w;
-      var horizontalPadding = (containerWidth - mapWidth) / 4;
-      var leftPadding = horizontalPadding < 20 ? 20 : horizontalPadding;
-      _this.chart = new Chart({
-        container: _this.container,
+      const {
+        containerWidth,
+        containerHeight,
+        w: mapWidth
+      } = this.getSize();
+      const horizontalPadding = (containerWidth - mapWidth) / 4;
+      const leftPadding = horizontalPadding < 20 ? 20 : horizontalPadding;
+      this.chart = new Chart({
+        container: this.container,
         width: containerWidth,
         height: containerHeight,
         padding: [0, horizontalPadding, 0, leftPadding]
       });
-      _this.chart.on('element:click', function (e) {
-        var statItem = _this.props.statItem;
-        var data = e.data.data;
-        var lang = window.dtable ? window.dtable.lang : 'zh-cn';
-        var countryName = lang === 'zh-cn' ? data.name_cn : data.name;
-        var clickData = _this.calculateData.find(function (i) {
-          return i.name === countryName;
-        });
+      this.chart.on('element:click', e => {
+        const {
+          statItem
+        } = this.props;
+        const data = e.data.data;
+        const lang = window.dtable ? window.dtable.lang : 'zh-cn';
+        const countryName = lang === 'zh-cn' ? data.name_cn : data.name;
+        const clickData = this.calculateData.find(i => i.name === countryName);
         if (clickData) {
-          _this.props.toggleStatisticRecordsDialog(clickData, statItem);
+          this.props.toggleStatisticRecordsDialog(clickData, statItem);
         }
       });
-      _this.chart.tooltip({
+      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': _this.getDefaultChartStyleByKey('g2-tooltip'),
-          'tooltip-item': _this.getDefaultChartStyleByKey('tooltip-item')
+          'g2-tooltip': this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': this.getDefaultChartStyleByKey('tooltip-item')
         }
       });
-      _this.chart.scale({
+      this.chart.scale({
         longitude: {
           sync: true
         },
@@ -298,14 +299,14 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
           sync: true
         }
       });
-      _this.chart.axis(false);
-      _this.dataSet = new DataSet();
+      this.chart.axis(false);
+      this.dataSet = new DataSet();
 
       // transform map data
-      var mapData = _this.dataSet.createView('mapDataModel').source(geolocation, {
+      const mapData = this.dataSet.createView('mapDataModel').source(geolocation, {
         type: 'GeoJSON'
       });
-      var mapView = _this.chart.createView();
+      const mapView = this.chart.createView();
 
       // draw background map
       mapView.data(mapData.rows);
@@ -315,114 +316,103 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
         stroke: '#bdbdbd',
         lineWidth: 1
       });
-      _this.dataSet.createView('statisticViewModel');
+      this.dataSet.createView('statisticViewModel');
       mapView.render();
     };
-    _this.getGeoLocationData = function () {
-      var mediaUrl = window.dtable.mediaUrl;
-      return fetch("".concat(mediaUrl, "dtable-statistic/geolocation/world.json")).catch(function (err) {});
+    this.getGeoLocationData = () => {
+      const {
+        mediaUrl
+      } = window.dtable;
+      return fetch("".concat(mediaUrl, "dtable-statistic/geolocation/world.json")).catch(err => {});
     };
-    _this.state = {
+    this.state = {
       isDataLoaded: false,
       isCalculatingData: true
     };
-    _this.reg = /^([A-Za-z])/;
-    _this.calculateData = null;
-    _this.countryMap = null;
-    return _this;
+    this.reg = /^([A-Za-z])/;
+    this.calculateData = null;
+    this.countryMap = null;
   }
-  _createClass(WorldMap, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var _this$props3 = this.props,
-        statItem = _this$props3.statItem,
-        chartCalculator = _this$props3.chartCalculator;
-      this.props.queryMapJson({
-        map_level: MAP_LEVEL.WORLD
-      }, function (mapJson) {
-        _this2.setState({
-          isDataLoaded: true
-        });
-        if (!mapJson) return;
-        _this2.geoData = mapJson;
-        _this2.initStatisticContext(mapJson);
-        if (_this2.container) {
-          chartCalculator.calculate(statItem).then(function (calculation) {
-            _this2.setState({
-              isCalculatingData: false
-            });
-            _this2.calculateData = calculation;
-            _this2.updateStatisticData(_this2.fixData(calculation));
-          });
-        }
+  componentDidMount() {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    this.props.queryMapJson({
+      map_level: MAP_LEVEL.WORLD
+    }, mapJson => {
+      this.setState({
+        isDataLoaded: true
       });
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      if (this.canUpdate(this.props, nextProps) && nextState.isDataLoaded === this.state.isDataLoaded) {
-        return true;
-      }
-      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
-        return true;
-      }
-      return false;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(preProps, preState) {
-      var _this3 = this;
-      if (!this.chart || !this.dataSet) return;
-      var _this$props4 = this.props,
-        statItem = _this$props4.statItem,
-        chartCalculator = _this$props4.chartCalculator;
-      var isCalculatingData = this.state.isCalculatingData;
-      if (isCalculatingData !== preState.isCalculatingData) return;
-      if (this.shouldCalculateStatItem(preProps, this.props)) {
-        this.setState({
-          isCalculatingData: true
-        });
-        if (this.container) {
-          this.rerenderChart();
-          chartCalculator.calculate(statItem).then(function (calculation) {
-            _this3.setState({
-              isCalculatingData: false
-            });
-            _this3.calculateData = calculation;
-            _this3.updateStatisticData(_this3.fixData(calculation));
+      if (!mapJson) return;
+      this.geoData = mapJson;
+      this.initStatisticContext(mapJson);
+      if (this.container) {
+        chartCalculator.calculate(statItem).then(calculation => {
+          this.setState({
+            isCalculatingData: false
           });
-        }
-      } else {
-        if (this.props.isPreview) {
-          this.rerenderChart();
-        }
-        this.updateStatisticData(this.fixData(this.calculateData));
+          this.calculateData = calculation;
+          this.updateStatisticData(this.fixData(calculation));
+        });
       }
+    });
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.canUpdate(this.props, nextProps) && nextState.isDataLoaded === this.state.isDataLoaded) {
+      return true;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.container = null;
-      this.setState = function () {};
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var _this$state = this.state,
-        isDataLoaded = _this$state.isDataLoaded,
-        isCalculatingData = _this$state.isCalculatingData;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, (!isDataLoaded || isCalculatingData) && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref) {
-          return _this4.container = _ref;
-        },
-        className: "statistic-chart-container map d-flex justify-content-around align-items-center w-100 h-100"
-      }));
+    return false;
+  }
+  componentDidUpdate(preProps, preState) {
+    if (!this.chart || !this.dataSet) return;
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    const {
+      isCalculatingData
+    } = this.state;
+    if (isCalculatingData !== preState.isCalculatingData) return;
+    if (this.shouldCalculateStatItem(preProps, this.props)) {
+      this.setState({
+        isCalculatingData: true
+      });
+      if (this.container) {
+        this.rerenderChart();
+        chartCalculator.calculate(statItem).then(calculation => {
+          this.setState({
+            isCalculatingData: false
+          });
+          this.calculateData = calculation;
+          this.updateStatisticData(this.fixData(calculation));
+        });
+      }
+    } else {
+      if (this.props.isPreview) {
+        this.rerenderChart();
+      }
+      this.updateStatisticData(this.fixData(this.calculateData));
     }
-  }]);
-  return WorldMap;
-}(BaseChart);
+  }
+  componentWillUnmount() {
+    this.container = null;
+    this.setState = () => {};
+  }
+  render() {
+    const {
+      isDataLoaded,
+      isCalculatingData
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, (!isDataLoaded || isCalculatingData) && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.container = ref,
+      className: "statistic-chart-container map d-flex justify-content-around align-items-center w-100 h-100"
+    }));
+  }
+}
 WorldMap.propTypes = {
   isPreview: PropTypes.bool,
   statItem: PropTypes.object,