dtable-statistic 4.1.1 → 4.1.3

package/es/stat-editor/stat-settings/map/map-province-city.js

@@ -0,0 +1,144 @@
+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, { Component, Fragment } from 'react';
+import { DTableSelect } from '../../../components';
+import { MAP_LEVEL } from '../../../constants/map';
+import { regions } from '../../../constants/regions';
+import { fixGeoGranularity } from '../../../utils/map';
+var MapProvinceCitySettings = /*#__PURE__*/function (_Component) {
+  _inherits(MapProvinceCitySettings, _Component);
+  var _super = _createSuper(MapProvinceCitySettings);
+  function MapProvinceCitySettings(props) {
+    var _this;
+    _classCallCheck(this, MapProvinceCitySettings);
+    _this = _super.call(this, props);
+    _this.isProvinceWithCities = function (province) {
+      var provinceWithCities = regions.find(function (provinceWithCities) {
+        return provinceWithCities.name === province;
+      });
+      return provinceWithCities && provinceWithCities.cities.length > 0;
+    };
+    _this.createProvinceOptions = function () {
+      return regions.map(function (provinceWithCities) {
+        var name = provinceWithCities.name;
+        return {
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, name),
+          value: name
+        };
+      });
+    };
+    _this.createProvinceCitiesOptions = function (province) {
+      var provinceWithCities = regions.find(function (provinceWithCities) {
+        return provinceWithCities.name === province;
+      });
+      if (!provinceWithCities || provinceWithCities.cities.length === 0) return [];
+      return provinceWithCities.cities.map(function (city) {
+        var name = city.name;
+        return {
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, name),
+          value: name
+        };
+      });
+    };
+    _this.getProvinceCitiesOptions = function (province) {
+      if (_this.provinceCitiesOptionsMap[province]) {
+        return _this.provinceCitiesOptionsMap[province];
+      }
+      var citiesOptions = _this.createProvinceCitiesOptions(province);
+      _this.provinceCitiesOptionsMap[province] = citiesOptions;
+      return citiesOptions;
+    };
+    _this.getSelectedProvinceOption = function () {
+      var map_location = _this.props.statItem.map_location;
+      var province = map_location && map_location.province;
+      if (!province) return null;
+      return _this.provinceOptions.find(function (option) {
+        return option.value === province;
+      });
+    };
+    _this.getSelectedCity = function (citiesOptions) {
+      var map_location = _this.props.statItem.map_location;
+      var city = map_location && map_location.city;
+      if (!city) return null;
+      return citiesOptions.find(function (option) {
+        return option.value === city;
+      });
+    };
+    _this.onSelectProvince = function (option) {
+      var statItem = _this.props.statItem;
+      var map_level = statItem.map_level,
+        map_location = statItem.map_location;
+      var newMapLocation = {
+        province: option.value
+      };
+      if (map_location && newMapLocation.province === map_location.province) return;
+      var updated = {
+        map_location: newMapLocation,
+        geolocation_granularity: fixGeoGranularity({
+          mapLevel: map_level,
+          mapLocation: newMapLocation
+        })
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.onSelectCity = function (option) {
+      var statItem = _this.props.statItem;
+      var map_level = statItem.map_level,
+        map_location = statItem.map_location;
+      var newMapLocation = Object.assign({}, map_location, {
+        city: option.value
+      });
+      if (map_location && newMapLocation.city === map_location.city) return;
+      var updated = {
+        map_location: newMapLocation,
+        geolocation_granularity: fixGeoGranularity({
+          mapLevel: map_level,
+          mapLocation: newMapLocation
+        })
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.renderCitySelector = function () {
+      var map_location = _this.props.statItem.map_location;
+      var province = map_location && map_location.province;
+      var citiesOptions = _this.getProvinceCitiesOptions(province);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: _this.getSelectedCity(citiesOptions),
+        options: citiesOptions,
+        onChange: _this.onSelectCity,
+        placeholder: "\u8BF7\u9009\u62E9\u57CE\u5E02"
+      }));
+    };
+    _this.provinceOptions = _this.createProvinceOptions();
+    _this.provinceCitiesOptionsMap = {};
+    return _this;
+  }
+  _createClass(MapProvinceCitySettings, [{
+    key: "render",
+    value: function render() {
+      var map_level = this.props.statItem.map_level;
+      if (map_level !== MAP_LEVEL.PROVINCE && map_level !== MAP_LEVEL.CITY) {
+        return null;
+      }
+      var isCity = map_level === MAP_LEVEL.CITY;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, isCity ? '城市' : '省份'), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: this.getSelectedProvinceOption(),
+        options: this.provinceOptions,
+        onChange: this.onSelectProvince,
+        placeholder: "\u8BF7\u9009\u62E9\u7701\u4EFD"
+      })), isCity && this.renderCitySelector());
+    }
+  }]);
+  return MapProvinceCitySettings;
+}(Component);
+export default MapProvinceCitySettings;

package/es/stat-list/chart-preview.js

@@ -87,9 +87,14 @@ var ChartPreview = /*#__PURE__*/function (_Component) {
         chartCalculator: chartCalculator,
         eventBus: eventBus,
         getTableById: _this.props.getTableById,
+        queryMapJson: _this.props.queryMapJson,
         toggleStatisticRecordsDialog: _this.props.toggleStatisticRecordsDialog
       });
     };
+    _this.moveChartToView = function (viewId) {
+      var statItem = _this.props.statItem;
+      _this.props.moveChartToView(statItem._id, viewId);
+    };
     return _this;
   }
   _createClass(ChartPreview, [{
@@ -117,12 +122,14 @@ var ChartPreview = /*#__PURE__*/function (_Component) {
       })), /*#__PURE__*/React.createElement(StatisticDropdownMenu, {
         isTableReadOnly: isTableReadOnly,
         chartType: type,
+        getOtherStatistics: this.props.getOtherStatistics,
         onExportChart: function onExportChart() {
           return _this2.onExportChart(statItem);
         },
-        deleteStatItem: this.props.deleteChart.bind(this, statId),
         editStatItem: this.props.onToggleEditChart.bind(this, statId),
         copyStatItem: this.props.copyChart.bind(this, statId),
+        moveChartToView: this.moveChartToView,
+        deleteStatItem: this.props.deleteChart.bind(this, statId),
         onNewTableDialogToggle: this.onNewTableDialogToggle,
         onUpdateTableDialogToggle: this.onUpdateTableDialogToggle
       }))), /*#__PURE__*/React.createElement("div", {

package/es/stat-list/index.js

@@ -234,9 +234,12 @@ var StatList = /*#__PURE__*/function (_Component) {
           statItem: statItem,
           chartCalculator: chartCalculator,
           eventBus: eventBus,
+          getOtherStatistics: _this2.props.getOtherStatistics,
           getTableById: _this2.props.getTableById,
           getTables: _this2.props.getTables,
+          queryMapJson: _this2.props.queryMapJson,
           copyChart: _this2.props.copyChart,
+          moveChartToView: _this2.props.moveChartToView,
           deleteChart: _this2.props.deleteChart,
           enlargeChart: function enlargeChart() {
             return _this2.enlargeChart(index);
@@ -260,6 +263,7 @@ var StatList = /*#__PURE__*/function (_Component) {
         eventBus: eventBus,
         chartCalculator: chartCalculator,
         getTableById: this.props.getTableById,
+        queryMapJson: this.props.queryMapJson,
         onEnlargeToggle: this.closeEnlargedChart,
         onToggleShowEnlarged: this.closeEnlargedChart,
         toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog

package/es/stat-view/index.js

@@ -67,6 +67,7 @@ var StatView = /*#__PURE__*/function (_React$Component) {
         chartCalculator: chartCalculator,
         eventBus: eventBus,
         getTableById: getTableById,
+        queryMapJson: this.props.queryMapJson,
         toggleStatisticRecordsDialog: toggleStatisticRecordsDialog,
         ref: function ref(_ref) {
           _this2.chartView = _ref;

package/es/stat-view/map.js

@@ -9,6 +9,8 @@ import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
 import { COLOR_OPTIONS, DEFAULT_NUMBER_FORMAT_OBJECT, SUMMARY_TYPE } from '../constants';
+import { MAP_LEVEL } from '../constants/map';
+import { shallowEqual } from '../utils/common-utils';
 var WIDTH = 798;
 var HEIGHT = 520;
 var Map = /*#__PURE__*/function (_BaseChart) {
@@ -18,6 +20,34 @@ var Map = /*#__PURE__*/function (_BaseChart) {
     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;
+      return map_level !== preMapLevel || !shallowEqual(map_location, prevMapLocation);
+    };
+    _this.reCalculateChart = function (statItem) {
+      if (_this.chart) {
+        _this.chart.destroy();
+        _this.initStatisticContext(_this.geoData);
+      }
+      _this.props.chartCalculator.calculate(statItem).then(function (statData) {
+        _this.calculateData = statData;
+        _this.setState({
+          isCalculatingData: false
+        });
+        _this.updateStatisticData(_this.fixData(statData));
+        if (_this.props.isPreview) {
+          var canvasSize = _this.getCanvasSize();
+          _this.chart.changeSize(canvasSize.w, canvasSize.h);
+        }
+      });
+    };
+    _this.getMapLevel = function (statItem) {
+      var map_level = statItem.map_level;
+      return map_level || MAP_LEVEL.COUNTRY;
+    };
     _this.fixData = function (statisticData) {
       if (!statisticData) return [];
       var statisticNewData = [];
@@ -292,10 +322,6 @@ var Map = /*#__PURE__*/function (_BaseChart) {
       _this.dataSet.createView('statisticViewModel');
       mapView.render();
     };
-    _this.getGeoLocationData = function () {
-      var mediaUrl = window.dtable.mediaUrl;
-      return fetch("".concat(mediaUrl, "dtable-statistic/geolocation/china.json")).catch(function (err) {});
-    };
     _this.state = {
       isDataLoaded: false,
       isCalculatingData: true
@@ -310,15 +336,18 @@ var Map = /*#__PURE__*/function (_BaseChart) {
       var _this$props3 = this.props,
         statItem = _this$props3.statItem,
         chartCalculator = _this$props3.chartCalculator;
-      this.getGeoLocationData().then(function (res) {
-        return res && res.json();
-      }).then(function (data) {
+      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 (!data) return;
-          _this2.geoData = data;
-          _this2.initStatisticContext(data);
+          if (!mapJson) return;
+          _this2.geoData = mapJson;
+          _this2.initStatisticContext(mapJson);
           if (_this2.container) {
             chartCalculator.calculate(statItem).then(function (data) {
               _this2.calculateData = data;
@@ -347,31 +376,24 @@ var Map = /*#__PURE__*/function (_BaseChart) {
     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 statItem = this.props.statItem;
       var isCalculatingData = this.state.isCalculatingData;
       if (isCalculatingData !== preState.isCalculatingData) return;
       if (this.shouldCalculateStatItem(preProps, this.props)) {
         this.setState({
           isCalculatingData: true
         });
-        if (this.container) {
-          if (this.chart) {
-            this.chart.destroy();
-            this.initStatisticContext(this.geoData);
-          }
-          chartCalculator.calculate(statItem).then(function (statData) {
-            _this3.calculateData = statData;
-            _this3.setState({
-              isCalculatingData: false
-            });
-            _this3.updateStatisticData(_this3.fixData(statData));
-            if (_this3.props.isPreview) {
-              var canvasSize = _this3.getCanvasSize();
-              _this3.chart.changeSize(canvasSize.w, canvasSize.h);
-            }
+        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));
@@ -409,6 +431,7 @@ Map.propTypes = {
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
   getTableById: PropTypes.func,
+  queryMapJson: PropTypes.func.isRequired,
   toggleStatisticRecordsDialog: PropTypes.func
 };
 export default Map;

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

@@ -10,6 +10,7 @@ import { TableUtils } from 'dtable-store';
 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) {
@@ -329,15 +330,15 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
       var _this$props3 = this.props,
         statItem = _this$props3.statItem,
         chartCalculator = _this$props3.chartCalculator;
-      this.getGeoLocationData().then(function (res) {
-        return res && res.json();
-      }).then(function (data) {
+      this.props.queryMapJson({
+        map_level: MAP_LEVEL.WORLD
+      }, function (mapJson) {
         _this2.setState({
           isDataLoaded: true
         });
-        if (!data) return;
-        _this2.geoData = data;
-        _this2.initStatisticContext(data);
+        if (!mapJson) return;
+        _this2.geoData = mapJson;
+        _this2.initStatisticContext(mapJson);
         if (_this2.container) {
           chartCalculator.calculate(statItem).then(function (calculation) {
             _this2.setState({
@@ -427,6 +428,7 @@ WorldMap.propTypes = {
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
   getTableById: PropTypes.func,
+  queryMapJson: PropTypes.func.isRequired,
   toggleStatisticRecordsDialog: PropTypes.func
 };
 export default WorldMap;

package/es/utils/map.js

@@ -0,0 +1,64 @@
+import { GEOLOCATION_GRANULARITY, STAT_TYPE } from '../constants';
+import { MAP_LEVEL, MUNICIPALITIES } from '../constants/map';
+import { regions } from '../constants/regions';
+export var getGeoGranularityByLevel = function getGeoGranularityByLevel(mapLevel) {
+  switch (mapLevel) {
+    case MAP_LEVEL.PROVINCE:
+      {
+        return GEOLOCATION_GRANULARITY.CITY;
+      }
+    case MAP_LEVEL.CITY:
+      {
+        return GEOLOCATION_GRANULARITY.DISTRICT;
+      }
+    default:
+      {
+        // default as 'country'
+        return GEOLOCATION_GRANULARITY.PROVINCE;
+      }
+  }
+};
+export var fixGeoGranularity = function fixGeoGranularity(_ref) {
+  var mapLevel = _ref.mapLevel,
+    mapLocation = _ref.mapLocation;
+  if (!mapLevel || mapLevel === MAP_LEVEL.COUNTRY || !mapLocation) {
+    return GEOLOCATION_GRANULARITY.PROVINCE;
+  }
+
+  // e.g. Beijing
+  var provinceName = mapLocation.province,
+    cityName = mapLocation.city;
+  if (provinceName && MUNICIPALITIES.includes(provinceName)) {
+    return GEOLOCATION_GRANULARITY.DISTRICT;
+  }
+
+  // e.g. HongKong
+  var selectedProvince = provinceName && regions.find(function (province) {
+    return province.name === provinceName;
+  });
+  if (selectedProvince && selectedProvince.disable_drill_down) {
+    return GEOLOCATION_GRANULARITY.PROVINCE;
+  }
+  var cities = selectedProvince && selectedProvince.cities;
+  var selectedCity = cities && cityName && cities.find(function (city) {
+    return city.name === cityName;
+  });
+  if (mapLevel === MAP_LEVEL.CITY && selectedCity && selectedCity.disable_drill_down) {
+    return GEOLOCATION_GRANULARITY.CITY;
+  }
+
+  // others
+  return getGeoGranularityByLevel(mapLevel);
+};
+export var fixMapGeoGranularity = function fixMapGeoGranularity(chart) {
+  var type = chart.type,
+    map_level = chart.map_level,
+    map_location = chart.map_location;
+  if (type !== STAT_TYPE.MAP && type !== STAT_TYPE.MAP_BUBBLE) {
+    return chart.geolocation_granularity;
+  }
+  return fixGeoGranularity({
+    mapLevel: map_level,
+    mapLocation: map_location
+  });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-statistic",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "statistics",
   "main": "dist/dtable-statistic.js",
   "author": "seafile",
@@ -12,8 +12,8 @@
     "@seafile/seafile-calendar": "0.0.24",
     "comlink": "^4.3.1",
     "dayjs": "1.10.7",
-    "dtable-store": "4.1.0",
-    "dtable-web-api": "4.0.5",
+    "dtable-store": "4.1.1",
+    "dtable-web-api": "4.0.11",
     "glamor": "^2.20.40",
     "html2canvas": "^1.4.1",
     "rc-slider": "^9.7.4",
@@ -25,6 +25,9 @@
     "react-select": "^3.1.0",
     "reactstrap": "8.9.0"
   },
+  "peerDependencies": {
+    "@antv/scale": "0.3.14"
+  },
   "scripts": {
     "clean:esm": "rm -rf es && mkdir es",
     "clean:lib": "rm -rf lib && mkdir lib",