dtable-statistic 4.1.5 → 4.1.6

package/es/assets/css/dashboard.css

@@ -161,6 +161,10 @@
   height: 100%;
 }
 
+.statistic-chart-container.map {
+  padding: 20px;
+}
+
 .statistic-chart-loading-container {
   position: absolute;
   width: 100%;

package/es/custom-g2.js

@@ -1,5 +1,6 @@
 // register theme
 import * as CanvasEngine from '@antv/g-canvas/esm/index';
+// import * as SvgEngine from '@antv/g-svg/esm/index';
 import Area from '@antv/g2/esm/geometry/area';
 import Edge from '@antv/g2/esm/geometry/edge';
 import HeatMap from '@antv/g2/esm/geometry/heatmap';
@@ -96,6 +97,7 @@ export { getRectWithCornerRadius } from '@antv/g2/esm/geometry/shape/interval/ut
 
 // register G renderer
 registerEngine('canvas', CanvasEngine);
+// registerEngine('svg', SvgEngine);
 
 // register internal G2 geometry
 registerGeometry('Polygon', Polygon);

package/es/stat-view/map.js

@@ -34,10 +34,6 @@ var Map = /*#__PURE__*/function (_BaseChart) {
           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 () {
@@ -246,22 +242,24 @@ var Map = /*#__PURE__*/function (_BaseChart) {
       _this.statisticView.interaction('element-active');
       _this.statisticView.render();
     };
-    _this.getCanvasSize = function () {
+    _this.getSize = 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 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 = maxHeight;
+      var h = containerHeight;
       var w = h * (scale_w / scale_h);
-      if (w > maxWidth) {
-        w = maxWidth;
+      if (w > containerWidth) {
+        w = containerWidth;
         h = w * (scale_h / scale_w);
       }
       return {
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
         w: w,
         h: h
       };
@@ -269,13 +267,19 @@ var Map = /*#__PURE__*/function (_BaseChart) {
     _this.initStatisticContext = function (geolocation) {
       _this.mapData = geolocation;
       if (!_this.container) return;
+
       // create chart
-      var canvasSize = _this.getCanvasSize();
+      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,
-        width: canvasSize.w,
-        height: canvasSize.h,
-        padding: [20, 20]
+        width: containerWidth,
+        height: containerHeight,
+        padding: [0, horizontalPadding, 0, leftPadding]
       });
       _this.chart.on('element:click', function (e) {
         var statItem = _this.props.statItem;
@@ -401,10 +405,6 @@ var Map = /*#__PURE__*/function (_BaseChart) {
         }
       } else {
         this.updateStatisticData(this.fixData(this.calculateData));
-        if (this.props.isPreview) {
-          var canvasSize = this.getCanvasSize();
-          this.chart.changeSize(canvasSize.w, canvasSize.h);
-        }
       }
     }
   }, {
@@ -424,7 +424,7 @@ var Map = /*#__PURE__*/function (_BaseChart) {
         ref: function ref(_ref) {
           return _this4.container = _ref;
         },
-        className: "statistic-chart-container d-flex justify-content-around align-items-center w-100 h-100"
+        className: "statistic-chart-container map d-flex justify-content-around align-items-center w-100 h-100"
       }));
     }
   }]);

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

@@ -20,6 +20,11 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
     var _this;
     _classCallCheck(this, WorldMap);
     _this = _super.call(this, props);
+    _this.rerenderChart = function () {
+      if (!_this.chart) return;
+      _this.chart.destroy();
+      _this.initStatisticContext(_this.geoData);
+    };
     _this.fixData = function (statisticData) {
       if (!statisticData) return [];
       var statisticNewData = [];
@@ -225,16 +230,18 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
       }
       _this.chart.render();
     };
-    _this.getCanvasSize = function () {
-      var maxWidth = _this.container.clientWidth;
-      var maxHeight = _this.container.clientHeight;
-      var h = maxHeight;
+    _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);
-      if (w > maxWidth) {
-        w = maxWidth;
+      if (w > containerWidth) {
+        w = containerWidth;
         h = w * (HEIGHT / WIDTH);
       }
       return {
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
         w: w,
         h: h
       };
@@ -246,13 +253,19 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
         _this.countryMap.set(item.properties.name_cn, item.properties.name);
       });
       if (!_this.container) return;
+
       // create chart
-      var canvasSize = _this.getCanvasSize();
+      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,
-        width: canvasSize.w,
-        height: canvasSize.h,
-        padding: [20, 20]
+        width: containerWidth,
+        height: containerHeight,
+        padding: [0, horizontalPadding, 0, leftPadding]
       });
       _this.chart.on('element:click', function (e) {
         var statItem = _this.props.statItem;
@@ -371,28 +384,20 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
           isCalculatingData: true
         });
         if (this.container) {
-          if (this.chart) {
-            this.chart.destroy();
-            this.initStatisticContext(this.geoData);
-          }
+          this.rerenderChart();
           chartCalculator.calculate(statItem).then(function (calculation) {
             _this3.setState({
               isCalculatingData: false
             });
             _this3.calculateData = calculation;
             _this3.updateStatisticData(_this3.fixData(calculation));
-            if (_this3.props.isPreview) {
-              var canvasSize = _this3.getCanvasSize();
-              _this3.chart.changeSize(canvasSize.w, canvasSize.h);
-            }
           });
         }
       } else {
-        this.updateStatisticData(this.fixData(this.calculateData));
         if (this.props.isPreview) {
-          var canvasSize = this.getCanvasSize();
-          this.chart.changeSize(canvasSize.w, canvasSize.h);
+          this.rerenderChart();
         }
+        this.updateStatisticData(this.fixData(this.calculateData));
       }
     }
   }, {
@@ -412,7 +417,7 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
         ref: function ref(_ref) {
           return _this4.container = _ref;
         },
-        className: "statistic-chart-container d-flex justify-content-around align-items-center w-100 h-100"
+        className: "statistic-chart-container map d-flex justify-content-around align-items-center w-100 h-100"
       }));
     }
   }]);

package/es/utils/common-utils.js

@@ -220,8 +220,9 @@ var getPieColor = function getPieColor(color_option, column, index, data, curren
       return selectedItem.color || '#dbdbdb';
     }
   } else {
-    var newIndex = String(index).at(-1);
-    return colors[newIndex];
+    var sIndex = String(index);
+    var colorIndex = sIndex.charAt(sIndex.length - 1);
+    return colors[colorIndex];
   }
 };
 export function formatPieChartData(data, statItem, table, currentTheme) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-statistic",
-  "version": "4.1.5",
+  "version": "4.1.6",
   "description": "statistics",
   "main": "dist/dtable-statistic.js",
   "author": "seafile",