dtable-statistic 4.1.2 → 4.1.4

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,8 +9,9 @@ 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';
-var WIDTH = 798;
-var HEIGHT = 520;
+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);
@@ -18,6 +19,36 @@ 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) {
+      _this.rerenderChart();
+      _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.rerenderChart = function () {
+      if (!_this.chart) return;
+      _this.chart.destroy();
+      _this.initStatisticContext(_this.geoData);
+    };
+    _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 = [];
@@ -113,16 +144,14 @@ var Map = /*#__PURE__*/function (_BaseChart) {
             return _this.getNumberDisplayString(value, columnData, summary_method);
           }
         },
-        handler: {
-          style: {
-            'opacity': 0
-          }
-        }
+        slidable: false
       });
       _this.statisticView.interaction('element-active');
       _this.statisticView.render();
     };
     _this.updateStatisticData = function (data) {
+      _this.rerenderChart();
+
       // re-render statistic data view;
       if (_this.statisticView) {
         _this.statisticView.destroy();
@@ -165,6 +194,9 @@ var Map = /*#__PURE__*/function (_BaseChart) {
       }
       _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;
@@ -209,23 +241,25 @@ var Map = /*#__PURE__*/function (_BaseChart) {
             return _this.getNumberDisplayString(value, columnData, summary_method);
           }
         },
-        handler: {
-          style: {
-            'opacity': 0
-          }
-        }
+        slidable: false
       });
       _this.statisticView.interaction('element-active');
       _this.statisticView.render();
     };
     _this.getCanvasSize = function () {
+      var statItem = _this.props.statItem;
+      var map_level = statItem.map_level,
+        map_location = statItem.map_location;
       var maxWidth = _this.container.clientWidth;
       var maxHeight = _this.container.clientHeight;
+      var _getRegionScaleOffset = getRegionScaleOffsets(map_level, map_location),
+        scale_w = _getRegionScaleOffset.scale_w,
+        scale_h = _getRegionScaleOffset.scale_h;
       var h = maxHeight;
-      var w = h * (WIDTH / HEIGHT);
+      var w = h * (scale_w / scale_h);
       if (w > maxWidth) {
         w = maxWidth;
-        h = w * (HEIGHT / WIDTH);
+        h = w * (scale_h / scale_w);
       }
       return {
         w: w,
@@ -292,10 +326,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 +340,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 +380,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 +435,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) {
@@ -124,11 +125,7 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
             return _this.getNumberDisplayString(value, summaryColumnData, summary_method);
           }
         },
-        handler: {
-          style: {
-            'opacity': 0
-          }
-        }
+        slidable: false
       });
       _this.statisticView.interaction('element-active');
       _this.statisticView.render();
@@ -157,6 +154,9 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
       }
       _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;
@@ -201,11 +201,7 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
             return _this.getNumberDisplayString(value, summaryColumnData, summary_method);
           }
         },
-        handler: {
-          style: {
-            'opacity': 0
-          }
-        }
+        slidable: false
       });
       _this.statisticView.interaction('element-active');
       _this.statisticView.render();
@@ -329,15 +325,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 +423,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,108 @@
+import { GEOLOCATION_GRANULARITY, STAT_TYPE } from '../constants';
+import { MAP_LEVEL, MUNICIPALITIES } from '../constants/map';
+import { regions } from '../constants/regions';
+var COUNTY_SCALE_WIDTH = 5.95;
+var COUNTY_SCALE_HEIGHT = 4.37;
+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
+  });
+};
+export var getRegionScaleOffsets = function getRegionScaleOffsets(mapLevel, mapLocation) {
+  var countryScaleOffsets = {
+    scale_w: COUNTY_SCALE_WIDTH,
+    scale_h: COUNTY_SCALE_HEIGHT
+  };
+  switch (mapLevel) {
+    case MAP_LEVEL.PROVINCE:
+      {
+        var provinceName = mapLocation && mapLocation.province;
+        var province = provinceName && regions.find(function (province) {
+          return province.name === provinceName;
+        });
+        if (!province) return countryScaleOffsets;
+        return {
+          scale_w: province.scale_w,
+          scale_h: province.scale_h
+        };
+      }
+    case MAP_LEVEL.CITY:
+      {
+        var _provinceName = mapLocation && mapLocation.province;
+        var _province = _provinceName && regions.find(function (province) {
+          return province.name === _provinceName;
+        });
+        var cities = _province && _province.cities;
+        var cityName = mapLocation.city;
+        var city = cityName && Array.isArray(cities) && cities.find(function (city) {
+          return city.name === cityName;
+        });
+        if (!city) return countryScaleOffsets;
+        return {
+          scale_w: city.scale_w,
+          scale_h: city.scale_h
+        };
+      }
+    default:
+      {
+        // default as 'country'
+        return countryScaleOffsets;
+      }
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-statistic",
-  "version": "4.1.2",
+  "version": "4.1.4",
   "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.2",
+    "dtable-web-api": "4.0.11",
     "glamor": "^2.20.40",
     "html2canvas": "^1.4.1",
     "rc-slider": "^9.7.4",