dtable-statistic 4.2.2 → 4.3.1

package/es/stat-view/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';
@@ -12,50 +8,52 @@ import { COLOR_OPTIONS, DEFAULT_NUMBER_FORMAT_OBJECT, SUMMARY_TYPE } from '../co
 import { MAP_LEVEL } from '../constants/map';
 import { shallowEqual } from '../utils/common-utils';
 import { getRegionScaleOffsets } from '../utils/map';
-var Map = /*#__PURE__*/function (_BaseChart) {
-  _inherits(Map, _BaseChart);
-  var _super = _createSuper(Map);
-  function Map(props) {
-    var _this;
-    _classCallCheck(this, Map);
-    _this = _super.call(this, props);
-    _this.hasMapChanged = function (preStatItem, statItem) {
-      var preMapLevel = preStatItem.map_level,
-        prevMapLocation = preStatItem.map_location;
-      var map_level = statItem.map_level,
-        map_location = statItem.map_location;
+class Map extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.hasMapChanged = (preStatItem, statItem) => {
+      const {
+        map_level: preMapLevel,
+        map_location: prevMapLocation
+      } = preStatItem;
+      const {
+        map_level,
+        map_location
+      } = statItem;
       return map_level !== preMapLevel || !shallowEqual(map_location, prevMapLocation);
     };
-    _this.reCalculateChart = function (statItem) {
-      _this.rerenderChart();
-      _this.props.chartCalculator.calculate(statItem).then(function (statData) {
-        _this.calculateData = statData;
-        _this.setState({
+    this.reCalculateChart = statItem => {
+      this.rerenderChart();
+      this.props.chartCalculator.calculate(statItem).then(statData => {
+        this.calculateData = statData;
+        this.setState({
           isCalculatingData: false
         });
-        _this.updateStatisticData(_this.fixData(statData));
+        this.updateStatisticData(this.fixData(statData));
       });
     };
-    _this.rerenderChart = function () {
-      if (!_this.chart) return;
-      _this.chart.destroy();
-      _this.initStatisticContext(_this.geoData);
+    this.rerenderChart = () => {
+      if (!this.chart) return;
+      this.chart.destroy();
+      this.initStatisticContext(this.geoData);
     };
-    _this.getMapLevel = function (statItem) {
-      var map_level = statItem.map_level;
+    this.getMapLevel = statItem => {
+      const {
+        map_level
+      } = statItem;
       return map_level || MAP_LEVEL.COUNTRY;
     };
-    _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 matchFeature = _this.mapData.features.find(function (feature) {
-            return feature.properties.name.indexOf(item.name) > -1;
-          });
+          let matchFeature = this.mapData.features.find(feature => feature.properties.name.indexOf(item.name) > -1);
           if (matchFeature) {
             statisticNewData.push({
               name: matchFeature.properties.name,
@@ -73,36 +71,38 @@ var Map = /*#__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 columnData = 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 columnData = 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) || {};
         columnData = 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
@@ -113,17 +113,17 @@ var Map = /*#__PURE__*/function (_BaseChart) {
             stroke: highlightedBorderColor
           }
         }
-      }).tooltip('name*formatted_value*color', function (name, value, color) {
+      }).tooltip('name*formatted_value*color', (name, value, color) => {
         return {
-          name: name,
-          color: color,
-          value: value
+          name,
+          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: {
@@ -136,75 +136,79 @@ var Map = /*#__PURE__*/function (_BaseChart) {
             fill: themeColors.textColor
           },
           align: legendDirection === 'vertical' ? 'right' : 'bottom',
-          formatter: function formatter(value) {
-            return _this.getNumberDisplayString(value, columnData, summary_method);
+          formatter: value => {
+            return this.getNumberDisplayString(value, columnData, 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.rerenderChart();
+    this.updateStatisticData = data => {
+      this.rerenderChart();
 
       // 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 mapType = statItem.type;
+      const {
+        statItem
+      } = this.props;
+      const mapType = statItem.type;
       if (!mapType.includes('bubble')) {
-        _this.renderCommonMap(data);
+        this.renderCommonMap(data);
       } else {
-        _this.renderBubbleMap(data);
+        this.renderBubbleMap(data);
       }
-      _this.chart.render();
+      this.chart.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 columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      const {
+        table_id,
+        summary_type,
+        summary_method,
+        summary_column
+      } = this.props.statItem;
+      let columnData = 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) || {};
         columnData = 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,
@@ -218,10 +222,10 @@ var Map = /*#__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: {
@@ -233,76 +237,82 @@ var Map = /*#__PURE__*/function (_BaseChart) {
             fill: themeColors.textColor
           },
           align: legendDirection === 'vertical' ? 'right' : 'bottom',
-          formatter: function formatter(value) {
-            return _this.getNumberDisplayString(value, columnData, summary_method);
+          formatter: value => {
+            return this.getNumberDisplayString(value, columnData, summary_method);
           }
         },
         slidable: false
       });
-      _this.statisticView.interaction('element-active');
-      _this.statisticView.render();
+      this.statisticView.interaction('element-active');
+      this.statisticView.render();
     };
-    _this.getSize = function () {
-      var statItem = _this.props.statItem;
-      var map_level = statItem.map_level,
-        map_location = statItem.map_location;
-      var containerWidth = _this.container.clientWidth - 40; // 40: padding
-      var containerHeight = _this.container.clientHeight - 40;
-      var _getRegionScaleOffset = getRegionScaleOffsets(map_level, map_location),
-        scale_w = _getRegionScaleOffset.scale_w,
-        scale_h = _getRegionScaleOffset.scale_h;
-      var h = containerHeight;
-      var w = h * (scale_w / scale_h);
+    this.getSize = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        map_level,
+        map_location
+      } = statItem;
+      const containerWidth = this.container.clientWidth - 40; // 40: padding
+      const containerHeight = this.container.clientHeight - 40;
+      const {
+        scale_w,
+        scale_h
+      } = getRegionScaleOffsets(map_level, map_location);
+      let h = containerHeight;
+      let w = h * (scale_w / scale_h);
       if (w > containerWidth) {
         w = containerWidth;
         h = w * (scale_h / scale_w);
       }
       return {
-        containerWidth: containerWidth,
-        containerHeight: containerHeight,
-        w: w,
-        h: h
+        containerWidth,
+        containerHeight,
+        w,
+        h
       };
     };
-    _this.initStatisticContext = function (geolocation) {
-      _this.mapData = geolocation;
-      if (!_this.container) return;
+    this.initStatisticContext = geolocation => {
+      this.mapData = geolocation;
+      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 clickData = _this.calculateData.find(function (i) {
-          return i.name === data.name;
-        });
+      this.chart.on('element:click', e => {
+        const {
+          statItem
+        } = this.props;
+        const data = e.data.data;
+        const clickData = this.calculateData.find(i => i.name === data.name);
         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">数量: {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
         },
@@ -310,14 +320,14 @@ var Map = /*#__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);
@@ -327,109 +337,99 @@ var Map = /*#__PURE__*/function (_BaseChart) {
         stroke: '#bdbdbd',
         lineWidth: 1
       });
-      _this.dataSet.createView('statisticViewModel');
+      this.dataSet.createView('statisticViewModel');
       mapView.render();
     };
-    _this.state = {
+    this.state = {
       isDataLoaded: false,
       isCalculatingData: true
     };
-    _this.calculateData = null;
-    return _this;
+    this.calculateData = null;
   }
-  _createClass(Map, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var _this$props3 = this.props,
-        statItem = _this$props3.statItem,
-        chartCalculator = _this$props3.chartCalculator;
-      var map_location = statItem.map_location;
-      var mapLevel = this.getMapLevel(statItem);
-      this.props.queryMapJson({
-        map_level: mapLevel,
-        map_location: map_location
-      }, function (mapJson) {
-        _this2.setState({
-          isDataLoaded: true
-        }, function () {
-          if (!mapJson) return;
-          _this2.geoData = mapJson;
-          _this2.initStatisticContext(mapJson);
-          if (_this2.container) {
-            chartCalculator.calculate(statItem).then(function (data) {
-              _this2.calculateData = data;
-              _this2.updateStatisticData(_this2.fixData(data));
-              _this2.setState({
-                isCalculatingData: false
-              });
+  componentDidMount() {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    const {
+      map_location
+    } = statItem;
+    const mapLevel = this.getMapLevel(statItem);
+    this.props.queryMapJson({
+      map_level: mapLevel,
+      map_location
+    }, mapJson => {
+      this.setState({
+        isDataLoaded: true
+      }, () => {
+        if (!mapJson) return;
+        this.geoData = mapJson;
+        this.initStatisticContext(mapJson);
+        if (this.container) {
+          chartCalculator.calculate(statItem).then(data => {
+            this.calculateData = data;
+            this.updateStatisticData(this.fixData(data));
+            this.setState({
+              isCalculatingData: false
             });
-          }
-        });
+          });
+        }
       });
+    });
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.canUpdate(this.props, nextProps) && nextState.isDataLoaded === this.state.isDataLoaded) {
+      return 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;
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(preProps, preState) {
-      var _this3 = this;
-      if (!this.chart || !this.dataSet) return;
-      var statItem = this.props.statItem;
-      var isCalculatingData = this.state.isCalculatingData;
-      if (isCalculatingData !== preState.isCalculatingData) return;
-      if (this.shouldCalculateStatItem(preProps, this.props)) {
-        this.setState({
-          isCalculatingData: true
+    return false;
+  }
+  componentDidUpdate(preProps, preState) {
+    if (!this.chart || !this.dataSet) return;
+    const {
+      statItem
+    } = this.props;
+    const {
+      isCalculatingData
+    } = this.state;
+    if (isCalculatingData !== preState.isCalculatingData) return;
+    if (this.shouldCalculateStatItem(preProps, this.props)) {
+      this.setState({
+        isCalculatingData: true
+      });
+      if (this.hasMapChanged(preProps.statItem, statItem)) {
+        this.props.queryMapJson({
+          map_level: this.getMapLevel(statItem),
+          map_location: statItem.map_location
+        }, mapJson => {
+          if (!mapJson) return;
+          this.geoData = mapJson;
+          this.reCalculateChart(statItem);
         });
-        if (this.hasMapChanged(preProps.statItem, statItem)) {
-          this.props.queryMapJson({
-            map_level: this.getMapLevel(statItem),
-            map_location: statItem.map_location
-          }, function (mapJson) {
-            if (!mapJson) return;
-            _this3.geoData = mapJson;
-            _this3.reCalculateChart(statItem);
-          });
-        } else {
-          this.container && this.reCalculateChart(statItem);
-        }
       } else {
-        this.updateStatisticData(this.fixData(this.calculateData));
+        this.container && this.reCalculateChart(statItem);
       }
+    } else {
+      this.updateStatisticData(this.fixData(this.calculateData));
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.container = null;
-      this.setState = function () {};
-    }
-  }, {
-    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 Map;
-}(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"
+    }));
+  }
+}
 Map.propTypes = {
   isPreview: PropTypes.bool,
   statItem: PropTypes.object,