sea-chart 1.1.24 → 1.1.26

package/dist/components/statistic-record-dialog/index.css

@@ -74,13 +74,14 @@
 }
 
 .sea-chart-statistic-records-dialog .search-input-container .clear-search-text {
-  display: inline-block;
+  display: flex;
   position: absolute;
+  justify-content: center;
+  align-items: center;
   right: 30px;
-  top: 10px;
-  height: 12px;
-  width: 12px;
-  line-height: 12px;
+  top: 0px;
+  /* 2px border */
+  height: calc(100% - 2px);
   color: #ccc;
 }
 

package/dist/components/statistic-record-dialog/index.js

@@ -1,3 +1,4 @@
+import _DTableEmptyTip from "dtable-ui-component/lib/DTableEmptyTip";
 import _toaster from "dtable-ui-component/lib/toaster";
 import React, { Fragment } from 'react';
 import { Modal, ModalBody } from 'reactstrap';
@@ -280,7 +281,12 @@ class StatisticRecordDialog extends React.Component {
         searchedRowsIds
       } = this.state;
       const searchedRows = this.getRowsByIds(searchedRowsIds);
-      if (searchedRows.length === 0) return null;
+      if (searchedRows.length === 0) return /*#__PURE__*/React.createElement("div", {
+        className: "w-100 h-100"
+      }, /*#__PURE__*/React.createElement(_DTableEmptyTip, {
+        src: "".concat(context.getSetting('mediaUrl'), "img/no-items-tip.png"),
+        text: intl.get('No_record')
+      }));
       const props = {
         table: this.table,
         renderedColumns: this.renderedColumns,

package/dist/constants/index.js

@@ -29,6 +29,7 @@ export const NUMBERIC_COLUMN_TYPE = [CellType.RATE, CellType.NUMBER];
 
 // chart supports groupby
 export const SUPPORT_GROUP_BY_CHART_TYPES = [CHART_TYPE.BAR_GROUP, CHART_TYPE.BAR_STACK, CHART_TYPE.AREA_GROUP, CHART_TYPE.LINE_GROUP, CHART_TYPE.COMPLETENESS_GROUP, CHART_TYPE.HORIZONTAL_GROUP_BAR, CHART_TYPE.STACKED_HORIZONTAL_BAR, CHART_TYPE.SCATTER];
+export const MAP_CHART_TYPES = [CHART_TYPE.MAP, CHART_TYPE.MAP_BUBBLE, CHART_TYPE.WORLD_MAP, CHART_TYPE.WORLD_MAP_BUBBLE];
 export const ZH_CN_SUPPORT_CHARTS = [CHART_TYPE.MAP, CHART_TYPE.MAP_BUBBLE];
 export const SUPPORT_DATA_SORT_CHART_TYPES = [CHART_TYPE.BAR, CHART_TYPE.BAR_STACK, CHART_TYPE.LINE, CHART_TYPE.PIE, CHART_TYPE.RING, CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.STACKED_HORIZONTAL_BAR, CHART_TYPE.AREA, CHART_TYPE.TREE_MAP];
 export const SUPPORT_STACK_VALUE_CHART_TYPES = [CHART_TYPE.BAR_STACK, CHART_TYPE.BAR_CUSTOM];

package/dist/locale/lang/de.js

@@ -252,7 +252,7 @@ const de = {
   "Use_default_color": "Standardfarbe verwenden",
   "Use_colors_in_single_select_solumn": "Verwenden Sie Farben in einer einzelnen Auswahlspalte",
   "Search_records": "Einträge suchen",
-  "Please_select_a_grouping_column": "Please select grouping column",
+  "Please_select_a_grouping_column": "Bitte Gruppierungsspalte auswählen",
   "View": "Sicht",
   "Funnel": "Trichterdiagramm",
   "All_charts": "Alle Diagramme",
@@ -264,6 +264,7 @@ const de = {
   "Outside": "Draußen",
   "Show_overall_rate": "Gesamtpreisbeschriftung anzeigen",
   "Percentage": "Prozentsatz",
-  "Number_and_percentage": "Anzahl und Prozentsatz"
+  "Number_and_percentage": "Anzahl und Prozentsatz",
+  "No_record": "Keine Aufzeichnung"
 };
 export default de;

package/dist/locale/lang/en.js

@@ -264,6 +264,7 @@ const en = {
   "Outside": "Outside",
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
-  "Number_and_percentage": "Number and percentage"
+  "Number_and_percentage": "Number and percentage",
+  "No_record": "No record"
 };
 export default en;

package/dist/locale/lang/es.js

@@ -264,6 +264,7 @@ const es = {
   "Outside": "Outside",
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
-  "Number_and_percentage": "Number and percentage"
+  "Number_and_percentage": "Number and percentage",
+  "No_record": "No record"
 };
 export default es;

package/dist/locale/lang/fr.js

@@ -252,7 +252,7 @@ const fr = {
   "Use_default_color": "Utiliser la couleur par défaut",
   "Use_colors_in_single_select_solumn": "Utiliser les couleurs dans une colonne de sélection unique",
   "Search_records": "Rechercher des enregistrements",
-  "Please_select_a_grouping_column": "Please select grouping column",
+  "Please_select_a_grouping_column": "Veuillez sélectionner la colonne de regroupement",
   "View": "Voir",
   "Funnel": "Entonnoir",
   "All_charts": "Tous les graphiques",
@@ -264,6 +264,7 @@ const fr = {
   "Outside": "Dehors",
   "Show_overall_rate": "Afficher le libellé du tarif global",
   "Percentage": "Couche d'entonnoir",
-  "Number_and_percentage": "Nombre et pourcentage"
+  "Number_and_percentage": "Nombre et pourcentage",
+  "No_record": "Aucun enregistrement"
 };
 export default fr;

package/dist/locale/lang/pt.js

@@ -264,6 +264,7 @@ const pt = {
   "Outside": "Outside",
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
-  "Number_and_percentage": "Number and percentage"
+  "Number_and_percentage": "Number and percentage",
+  "No_record": "No record"
 };
 export default pt;

package/dist/locale/lang/ru.js

@@ -264,6 +264,7 @@ const ru = {
   "Outside": "Outside",
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
-  "Number_and_percentage": "Number and percentage"
+  "Number_and_percentage": "Number and percentage",
+  "No_record": "No record"
 };
 export default ru;

package/dist/locale/lang/zh_CN.js

@@ -264,6 +264,7 @@ const zh_CN = {
   "Outside": "在图表外",
   "Show_overall_rate": "显示总转化率标签",
   "Percentage": "百分比",
-  "Number_and_percentage": "数值和百分比"
+  "Number_and_percentage": "数值和百分比",
+  "No_record": "没有记录"
 };
 export default zh_CN;

package/dist/utils/chart-utils/base-utils.js

@@ -490,16 +490,17 @@ BaseUtils.getColumn = (tables, tableId, columnKey) => {
 BaseUtils.formatEmptyName = (dataList, column_groupby_column_key, emptyName) => {
   if (!Array.isArray(dataList)) return [];
   let updatedStatistics = [];
-  dataList.forEach(item => {
-    let updated = {};
+  for (let i = 0; i < dataList.length; i++) {
+    let item = dataList[i];
+    // let updated = {};
     if (!item.name) {
-      updated.name = emptyName;
+      item.name = emptyName;
     }
     if (column_groupby_column_key && !item.group_name) {
-      updated.group_name = emptyName;
+      item.group_name = emptyName;
     }
-    updatedStatistics.push(Object.assign({}, item, updated));
-  });
+    updatedStatistics.push(item);
+  }
   return updatedStatistics;
 };
 // init

package/dist/utils/chart-utils/sql-statistics-utils.js

@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 import { CellType, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP, getFormulaDisplayString, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber, DateUtils } from 'dtable-utils';
 import { isObject } from 'lodash';
 import { cloneDeep } from 'lodash-es';
-import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX, STYLE_COLORS, TREND_TYPES, CHART_STYLE_COLORS } from '../../constants';
+import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX, STYLE_COLORS, TREND_TYPES, CHART_STYLE_COLORS, MAP_CHART_TYPES } from '../../constants';
 import { chartColumn2SqlColumn, summaryMethodColumn2SqlColumn } from '../sql';
 import { getClientLinkDisplayString } from '../cell-format-utils';
 import { column2SqlColumn } from '../sql/column-2-sql-column';
@@ -1415,6 +1415,7 @@ SQLStatisticsUtils.mirrorMapChartSQLResult2JavaScript = async (chart, sqlRows, c
       const equal2GroupData0 = groupData0.id === groupValue;
       const equal2GroupData1 = groupData1.id === groupValue;
       if (equal2GroupData0 || equal2GroupData1) {
+        var _groupData$, _groupData$2, _groupData$3, _groupData$4;
         let value = item[sqlSummaryColumnKey];
         let formattedValue = value;
         if (isAdvanced) {
@@ -1426,24 +1427,27 @@ SQLStatisticsUtils.mirrorMapChartSQLResult2JavaScript = async (chart, sqlRows, c
           original_name: item[column_key],
           value: equal2GroupData0 ? value : 0,
           formatted_value: equal2GroupData0 ? formattedValue : 0,
-          group_name: groupData[0].name,
-          color: groupData[0].color,
+          group_name: ((_groupData$ = groupData[0]) === null || _groupData$ === void 0 ? void 0 : _groupData$.name) || '',
+          color: ((_groupData$2 = groupData[0]) === null || _groupData$2 === void 0 ? void 0 : _groupData$2.color) || STYLE_COLORS[0].colors[0],
           rows: [item]
-        }, {
+        });
+        groupData[1] && newResult.push({
           name: label,
           original_name: item[column_key],
           value: equal2GroupData1 ? value : 0,
           formatted_value: equal2GroupData1 ? formattedValue : 0,
-          group_name: groupData[1].name,
-          color: groupData[1].color,
+          group_name: ((_groupData$3 = groupData[1]) === null || _groupData$3 === void 0 ? void 0 : _groupData$3.name) || '',
+          color: ((_groupData$4 = groupData[1]) === null || _groupData$4 === void 0 ? void 0 : _groupData$4.color) || STYLE_COLORS[0].colors[0],
           rows: [item]
         });
       }
     }
   }
+  const colorSet = [groupData[0] && groupData[0].color];
+  groupData[1] && groupData[1].color && colorSet.push(groupData[1].color);
   return {
     data: newResult,
-    colorSet: [groupData[0] && groupData[0].color, groupData[1] && groupData[1].color]
+    colorSet
   };
 };
 SQLStatisticsUtils.trendMapChartSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
@@ -2011,7 +2015,7 @@ SQLStatisticsUtils.calculateChart = async (chart, value, callback, sqlRows) => {
   }
 
   // map is special, still need to show map even data is empty
-  if (!Array.isArray(sqlRows) || sqlRows.length === 0 && !chartType.includes('map')) {
+  if (!Array.isArray(sqlRows) || sqlRows.length === 0 && !MAP_CHART_TYPES.includes(chartType)) {
     callback && callback('', tipMessage, null);
     return;
   }

package/dist/view/wrapper/area.js

@@ -55,7 +55,9 @@ class Area extends ChartComponent {
       this.loadData(data);
       this.draw(data);
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -221,15 +223,17 @@ class Area extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      var _this$chart;
       this.initChartType();
-      this.chart && this.chart.destroy();
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderAxisLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     super.componentWillUnmount();
   }
   render() {

package/dist/view/wrapper/bar-custom.js

@@ -42,8 +42,10 @@ class BarCustom extends ChartComponent {
       if (!Array.isArray(data)) return;
       this.loadData(data);
       this.draw(data);
-      this.chart.render();
-      this.renderAxisLabel(this.props.chart, this.props.tables);
+      requestAnimationFrame(() => {
+        this.chart.render();
+        this.renderAxisLabel(this.props.chart, this.props.tables);
+      });
     };
     this.organizeData = data => {
       const dataMap = {};
@@ -183,13 +185,15 @@ class BarCustom extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     window.removeEventListener('resize', this.handleResize);
   }
   render() {

package/dist/view/wrapper/bar-group.js

@@ -60,7 +60,9 @@ class BarGroup extends ChartComponent {
       }
       this.loadData(data);
       this.draw(data);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -216,14 +218,16 @@ class BarGroup extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderAxisLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {

package/dist/view/wrapper/bar.js

@@ -42,8 +42,10 @@ class Bar extends ChartComponent {
       if (!Array.isArray(data)) return;
       this.loadData(data);
       this.draw(data);
-      this.chart.render();
-      this.renderAxisLabel(this.props.chart, this.props.tables);
+      requestAnimationFrame(() => {
+        this.chart.render();
+        this.renderAxisLabel(this.props.chart, this.props.tables);
+      });
     };
     this.draw = data => {
       const {
@@ -129,13 +131,16 @@ class Bar extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    // chart doesn't have autoPadding before they were rendered
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {

package/dist/view/wrapper/chart-component.js

@@ -18,8 +18,9 @@ export default class ChartComponent extends Component {
       };
     };
     this.handleResize = debounce(() => {
+      var _this$chart;
       if (!this.createChart || !this.drawChart) return;
-      this.chart && this.chart.destroy();
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       if (this.needRenderAxisLabel) {
@@ -206,6 +207,7 @@ export default class ChartComponent extends Component {
       }
     };
     this.renderAxisLabel = (chart, tables) => {
+      var _this$chart2;
       if (!this.chart || !chart) return;
       let {
         table_id,
@@ -226,7 +228,9 @@ export default class ChartComponent extends Component {
         y_axis_column_key = y_axis_summary_column_key;
       }
       const table = getTableById(tables, table_id);
-      const autoPadding = this.chart.autoPadding;
+      const autoPadding = ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) || {
+        bottom: 0
+      };
       let textColor;
       this.globalTheme === THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
       const xAxisID = "chart-x-axis-label_".concat(chart.id);

package/dist/view/wrapper/combination.js

@@ -397,10 +397,13 @@ class Combination extends ChartComponent {
       }, 100));
       isFunction(customRender) && customRender(this.chart);
       this.chart.removeInteraction('legend-filter');
-      this.chart.render();
-      this.renderAxisLabel();
+      requestAnimationFrame(() => {
+        this.chart.render();
+        this.renderAxisLabel();
+      });
     };
     this.renderAxisLabel = () => {
+      var _this$chart;
       if (!this.chart) return;
       let {
         chart,
@@ -424,7 +427,7 @@ class Combination extends ChartComponent {
         y_axis_right_summary_type
       } = config;
       const table = getTableById(tables, table_id);
-      const autoPadding = this.chart.autoPadding;
+      const autoPadding = ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) || 0;
       const textColor = '#999';
       const xAxisID = "chart-x-axis-label_".concat(chart.id);
       const chartContainer = this.chart.getCanvas().get('container');
@@ -648,13 +651,15 @@ class Combination extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart2;
+      ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
       this.drawChart();
       this.renderAxisLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart3;
+    ((_this$chart3 = this.chart) === null || _this$chart3 === void 0 ? void 0 : _this$chart3.autoPadding) && this.chart.destroy();
   }
   render() {
     const {

package/dist/view/wrapper/compare.js

@@ -38,7 +38,9 @@ class Compare extends ChartComponent {
       if (!Array.isArray(data)) return;
       this.loadData(data);
       this.draw(data);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -335,14 +337,16 @@ class Compare extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderAxisLabel(this.props.chart, this.props.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
   }
   render() {
     const {

package/dist/view/wrapper/completeness.js

@@ -48,8 +48,10 @@ export default function Completeness(_ref) {
       if (!Array.isArray(currentData)) return;
       currentChart.loadData(currentData);
       draw(currentData);
-      currentChart.chart.render();
-      currentChart.renderAxisLabel(chart, tables);
+      requestAnimationFrame(() => {
+        currentChart.chart.render();
+        currentChart.renderAxisLabel(chart, tables);
+      });
     }
     function draw(data) {
       const theme = CHART_THEME_COLOR[globalTheme];

package/dist/view/wrapper/dashboard.js

@@ -157,7 +157,8 @@ class Dashboard extends Component {
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.drawChart();
     }
   }

package/dist/view/wrapper/funnel.js

@@ -178,13 +178,15 @@ class Funnel extends ChartComponent {
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {

package/dist/view/wrapper/heat-map.js

@@ -56,32 +56,44 @@ class HeatMap extends ChartComponent {
       return [];
     };
     this.generateBackgroundGridData = statData => {
-      let momentDate = dayjs(this.firstDate);
-      const year = momentDate.year();
+      let currentDate = new Date(this.firstDate);
+      const year = currentDate.getFullYear();
       const gridData = [];
-      const isLeapYear = year % 4 > 0 ? false : true;
-      let yearDayCount = 365;
-      if (isLeapYear) {
-        yearDayCount = 366;
-      }
+      const isLeapYear = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+      const yearDayCount = isLeapYear ? 366 : 365;
+      const getISOWeek = date => {
+        const target = new Date(date.valueOf());
+        // set 0 to monday, 6 to sunday
+        const dayNumber = (date.getUTCDay() + 6) % 7;
+        // set target to Thursday of this week, daynumber is days passed this week, 3 is Thursday
+        target.setUTCDate(target.getUTCDate() - dayNumber + 3);
+        const firstThursday = target.valueOf();
+        target.setUTCMonth(0, 1);
+        // find first thursday of the year
+        // https://blog.csdn.net/theadore2017/article/details/88578753
+        if (target.getUTCDay() !== 4) {
+          target.setUTCMonth(0, 1 + (4 - target.getUTCDay() + 7) % 7);
+        }
+        return 1 + Math.ceil((firstThursday - target) / 604800000); // 604800000ms in one week
+      };
       for (let i = 0; i < yearDayCount; i++) {
-        const day = momentDate.day();
-        let week = momentDate.week() - 1;
-        const month = momentDate.month();
+        const day = currentDate.getDay();
+        let week = getISOWeek(currentDate) - 1;
+        const month = currentDate.getMonth();
         if (week === 0 && month === 11) {
           week = 52;
         }
-        const yearDate = momentDate.format('YYYY-MM-DD');
+        const yearDate = currentDate.toISOString().split('T')[0];
         const value = statData[yearDate] || 0;
         this.maxValue = Math.max(this.maxValue, value);
         gridData.push({
           date: yearDate,
-          value: statData[yearDate],
+          value,
           day,
           week,
           month
         });
-        momentDate = momentDate.add(1, 'days');
+        currentDate.setDate(currentDate.getDate() + 1);
       }
       return gridData;
     };
@@ -261,7 +273,9 @@ class HeatMap extends ChartComponent {
         items: this.getLegendItems(exampleColors)
       });
       this.chart.removeInteraction('legend-filter');
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     dayjs.locale('en');
     this.chart = null;
@@ -314,13 +328,15 @@ class HeatMap extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
   }
   getLegendItemPath(x, y, r, index, textWidth) {
     // x, y represents the coordinates of the center point of the legend item marker

package/dist/view/wrapper/horizontal-bar-group.js

@@ -13,7 +13,8 @@ class HorizontalBarGroup extends HorizontalComponent {
   constructor(props) {
     super(props);
     this.handleResize = debounce(() => {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderHorizontalLabel(this.props.chart, this.props.tables);
@@ -59,7 +60,9 @@ class HorizontalBarGroup extends HorizontalComponent {
       this.loadData(data);
       this.draw(data);
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -175,14 +178,16 @@ class HorizontalBarGroup extends HorizontalComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart2;
+      ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderHorizontalLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart3;
+    ((_this$chart3 = this.chart) === null || _this$chart3 === void 0 ? void 0 : _this$chart3.autoPadding) && this.chart.destroy();
     window.removeEventListener('resize', this.handleResize);
   }
   render() {

package/dist/view/wrapper/horizontal-bar.js

@@ -38,8 +38,10 @@ class HorizontalBar extends HorizontalComponent {
       this.loadData(data);
       this.draw(data);
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
-      this.renderHorizontalLabel(this.props.chart, this.props.tables);
+      requestAnimationFrame(() => {
+        this.chart.render();
+        this.renderHorizontalLabel(this.props.chart, this.props.tables);
+      });
     };
     this.draw = data => {
       const {
@@ -127,13 +129,15 @@ class HorizontalBar extends HorizontalComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     super.componentWillUnmount();
   }
   render() {

package/dist/view/wrapper/horizontal-component.js

@@ -6,6 +6,7 @@ export default class HorizontalComponent extends ChartComponent {
   constructor() {
     super(...arguments);
     this.renderHorizontalLabel = (chart, tables) => {
+      var _this$chart;
       if (!this.chart || !chart) return;
       let {
         table_id,
@@ -18,7 +19,9 @@ export default class HorizontalComponent extends ChartComponent {
         show_horizontal_axis_label
       } = chart.config;
       const table = getTableById(tables, table_id);
-      const autoPadding = this.chart.autoPadding;
+      const autoPadding = ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) || {
+        bottom: 0
+      };
       const textColor = '#999999';
       const xAxisID = "chart-x-axis-label_".concat(chart.id);
       const chartContainer = this.chart.getCanvas().get('container');

package/dist/view/wrapper/line-group.js

@@ -42,7 +42,9 @@ class LineGroup extends ChartComponent {
       this.loadData(data);
       this.draw(data);
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -159,14 +161,16 @@ class LineGroup extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderAxisLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     super.componentWillUnmount();
   }
   render() {

package/dist/view/wrapper/line.js

@@ -40,7 +40,9 @@ class Line extends ChartComponent {
       this.draw(data);
       this.autoAdjustDataOptions(chart, data, summaryColumn);
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.draw = data => {
       const {
@@ -162,14 +164,16 @@ class Line extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
       this.renderAxisLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
     super.componentWillUnmount();
   }
   render() {

package/dist/view/wrapper/mirror.js

@@ -179,13 +179,15 @@ class Mirror extends ChartComponent {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    this.chart && this.chart.destroy();
+    var _this$chart2;
+    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {

package/dist/view/wrapper/pie.js

@@ -128,7 +128,9 @@ class Pie extends ChartComponent {
         summaryMethod: summary_method
       }));
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.onEnterElement = (evt, _ref) => {
       let {

package/dist/view/wrapper/ring.js

@@ -153,7 +153,9 @@ class Ring extends ChartComponent {
       }));
       this.chart.interaction('element-highlight');
       isFunction(customRender) && customRender(this.chart);
-      this.chart.render();
+      requestAnimationFrame(() => {
+        this.chart.render();
+      });
     };
     this.getLabel = (value, percent) => {
       const {

package/dist/view/wrapper/world-map.js

@@ -29,13 +29,19 @@ const fixData = (statisticData, countryMap, chartType) => {
       }
       const value = item.value;
       if (name_cn && name) {
-        statisticNewData.push({
-          name_cn,
-          name,
-          nameType,
-          value: value || 0,
-          formatted_value: item.formatted_value
-        });
+        const existedData = statisticNewData.find(i => i.name === name);
+        if (existedData) {
+          existedData.value += value;
+          existedData.formatted_value = parseInt(existedData.formatted_value) + parseInt(item.formatted_value) + '';
+        } else {
+          statisticNewData.push({
+            name_cn,
+            name,
+            nameType,
+            value: value || 0,
+            formatted_value: item.formatted_value + ''
+          });
+        }
         if (chartType === CHART_TYPE.WORLD_MAP_BUBBLE) {
           sum += item.value;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
@@ -26,7 +26,7 @@
   },
   "peerDependencies": {
     "@antv/scale": "0.3.14",
-    "dtable-ui-component": "^5.1.2",
+    "dtable-ui-component": "^5.1.10",
     "dtable-utils": "~5.0.*",
     "prop-types": "15.8.1",
     "react": "^17.0.0",