sea-chart 2.0.35 → 2.0.36

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

@@ -39,10 +39,11 @@ class Completeness extends _chartComponent.default {
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
     this.drawChart = () => {
+      var _this$props$chart, _this$props$chart$con;
       let {
         result: data
       } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      data = _utils.BaseUtils.formatEmptyName(data, (_this$props$chart = this.props.chart) === null || _this$props$chart === void 0 ? void 0 : (_this$props$chart$con = _this$props$chart.config) === null || _this$props$chart$con === void 0 ? void 0 : _this$props$chart$con.column_groupby_column_key, _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
       this.draw(data);
     };
@@ -70,12 +71,20 @@ class Completeness extends _chartComponent.default {
       } = this.chartBoundingClientRect;
       this.markLastForCompleteness(data);
       const colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
+      // Normalize groupby to string before setColorMap to ensure consistent keys
+      data.forEach(item => {
+        if (Array.isArray(item.groupby)) {
+          item.groupby = item.groupby.join(', ');
+        }
+      });
       this.setColorMap(data, chartColorTheme, 'groupby', columnGroupbyColumn, chart);
       const newSeries = this.getGroupSeries(data, columnGroupbyColumn, chart);
 
       // Y axis
       const fy = d3.scaleBand().domain(newSeries.map(item => item[0])).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.groupby))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
+
+      // y scale will be created per main group (local) to avoid overlap
+
       const yAxis = this.chart.append('g').attr('class', 'y-axis-wrapper').call(d3.axisLeft(fy).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -103,38 +112,64 @@ class Completeness extends _chartComponent.default {
 
       // Rect group
       const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
-      contentWrapper.selectAll().data(newSeries).join('g').attr('transform', _ref => {
-        let [name, dum] = _ref;
-        const offset = (fy.bandwidth() - dum.length * y.bandwidth()) / 2;
-        return "translate(0, ".concat(fy(name) + offset, ")");
+      const mainGroups = contentWrapper.selectAll().data(newSeries).join('g').attr('transform', _ref => {
+        let [name] = _ref;
+        return "translate(0, ".concat(fy(name), ")");
       }).attr('data-transform', _ref2 => {
-        let [name, dum] = _ref2;
-        const offset = (fy.bandwidth() - dum.length * y.bandwidth()) / 2;
-        return "".concat(fy(name) + offset);
-      }).selectAll().data(_ref3 => {
-        let [groupKey] = _ref3;
-        const curSeriesData = newSeries.find(item => item[0] === groupKey);
-        return curSeriesData[1];
-      }).join('g').attr('data-completedRate', _ref4 => {
-        let [_, d] = _ref4;
-        const restData = d.find(item => item.rawData.group_name === 'rest');
-        const completedRate = restData.rawData.completedRate;
-        if (completedRate === 'empty') return '';
-        return completedRate + '%';
-      }).selectAll().data(_ref5 => {
-        let [_, d] = _ref5;
-        return d;
-      }).join('rect').attr('class', 'rect').attr('opacity', 1).attr('x', d => x(d[0]) - Number(yAxis.node().getAttribute('data-axisWidth'))).attr('y', d => y.bandwidth() * d.serieIndex).attr('data-y', d => y.bandwidth() * d.serieIndex).attr('width', d => x(d[1]) - x(d[0])).attr('height', y.bandwidth()).attr('fill', d => {
-        const key = d.key;
-        const groupby = d.rawData.groupby;
-        if (key === 'rest') {
-          return '#bdbdbd';
-        }
-        if (column_groupby_column_key) {
-          return this.colorMap[groupby];
-        }
-        return colors[0];
-      }).attr('data-value', d => d.rawData.value).attr('data-groupName', d => d.rawData.slugId).attr('data-tooltipTitle', d => d.rawData.name).attr('data-tooltipName', d => d.key).attr('data-groupBy', d => d.rawData.groupby).call(g => {
+        let [name] = _ref2;
+        return "".concat(fy(name));
+      });
+      const colorMap = this.colorMap;
+      const self = this;
+
+      // Calculate max sub group count across all main groups for uniform bar height
+      const maxSubGroupCount = Math.max(...newSeries.map(_ref3 => {
+        let [_, subGroups] = _ref3;
+        return subGroups.length;
+      }));
+      const uniformBandwidth = fy.bandwidth() / maxSubGroupCount;
+      mainGroups.each(function (_ref4) {
+        let [mainGroupName, subGroups] = _ref4;
+        const mainGroupNode = d3.select(this);
+
+        // Create local y scale for this main group, using uniform bandwidth
+        const localY = d3.scaleBand().domain(subGroups.map(sg => sg[0])).range([0, uniformBandwidth * subGroups.length]).paddingInner(0).paddingOuter(0);
+        mainGroupNode.selectAll().data(subGroups).join('g').attr('data-completedRate', _ref5 => {
+          var _restItem$rawData, _completedItem$rawDat;
+          let [_, d] = _ref5;
+          const restItem = d.find(item => item.key === 'rest');
+          const completedItem = d.find(item => item.key === 'completed');
+          const restValue = restItem ? Number(((_restItem$rawData = restItem.rawData) === null || _restItem$rawData === void 0 ? void 0 : _restItem$rawData.value) || 0) : 0;
+          const completedValue = completedItem ? Number(((_completedItem$rawDat = completedItem.rawData) === null || _completedItem$rawDat === void 0 ? void 0 : _completedItem$rawDat.value) || 0) : 0;
+          const targetValue = restValue + completedValue;
+          if (!targetValue) return '';
+          return "".concat(Math.round(completedValue / targetValue * 100), "%");
+        }).selectAll().data(_ref6 => {
+          let [_, d] = _ref6;
+          return d;
+        }).join('rect').attr('class', 'rect').attr('opacity', 1).attr('x', d => x(d[0]) - Number(yAxis.node().getAttribute('data-axisWidth'))).attr('y', d => localY(d.groupby)).attr('data-y', d => localY(d.groupby)).attr('width', d => x(d[1]) - x(d[0])).attr('height', localY.bandwidth()).attr('fill', d => {
+          const key = d.key;
+          const groupby = d.groupby;
+          if (key === 'rest') {
+            return '#bdbdbd';
+          }
+          if (column_groupby_column_key) {
+            return colorMap[groupby];
+          }
+          return colors[0];
+        }).attr('data-value', d => d.rawData.value).attr('data-groupName', d => d.rawData.slugId).attr('data-tooltipTitle', d => d.rawData.name).attr('data-tooltipName', d => d.key).attr('data-groupBy', d => d.groupby).on('click', (event, data) => {
+          self.props.toggleRecords(data);
+        }).on('mouseover', event => {
+          self.showTooltip(event);
+          self.handleAcitveAndInActiveState('inActive', event);
+        }).on('mousemove', event => {
+          self.moveTooltip(event);
+        }).on('mouseleave', event => {
+          self.hiddenTooltip();
+          self.handleAcitveAndInActiveState('active', event);
+        });
+      });
+      mainGroups.call(g => {
         // add rect borderRadius
         const allGroup = this.getAllGroup(contentWrapper);
         allGroup.forEach(group => {
@@ -163,16 +198,6 @@ class Completeness extends _chartComponent.default {
             });
           });
         }
-      }).on('click', (event, data) => {
-        this.props.toggleRecords(data);
-      }).on('mouseover', event => {
-        this.showTooltip(event);
-        this.handleAcitveAndInActiveState('inActive', event);
-      }).on('mousemove', event => {
-        this.moveTooltip(event);
-      }).on('mouseleave', (event, data) => {
-        this.hiddenTooltip();
-        this.handleAcitveAndInActiveState('active', event);
       });
       this.setLegend({
         legendName: 'groupby',
@@ -255,34 +280,64 @@ class Completeness extends _chartComponent.default {
     };
     this.getGroupSeries = (data, columnGroupbyColumn, chart) => {
       const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'groupby', columnGroupbyColumn, chart);
+      sortedData.forEach(item => {
+        if (Array.isArray(item.groupby)) {
+          item.groupby = item.groupby.join(', ');
+        }
+      });
       const groups = d3.groups(sortedData, d => d.name);
+      // Sort main groups by name for stable order
+      groups.sort((a, b) => String(a[0]).localeCompare(String(b[0])));
       groups.forEach((item, index) => {
         const itemData = (0, _lodashEs.cloneDeep)(item[1]);
+        const valueMap = d3.rollup(itemData, v => d3.sum(v, d => d.value), d => d.groupby, d => d.group_name);
+        const rawDataMap = d3.rollup(itemData, v => v[0], d => d.groupby, d => d.group_name);
 
         // get series
-        const series = d3.stack().keys(d3.union(itemData.map(d => d.group_name))).value((_ref6, key) => {
-          var _group$get;
-          let [_, group] = _ref6;
-          return ((_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
-        })(d3.index(itemData, d => d.groupby, d => d.group_name));
+        const series = d3.stack().keys(d3.union(itemData.map(d => d.group_name))).value((_ref7, key) => {
+          let [_, group] = _ref7;
+          return group.get(key) || 0;
+        })(valueMap);
         item[1] = d3.groups(itemData, d => d.groupby);
+        // Sort sub groups by groupby for stable order
+        item[1].sort((a, b) => String(a[0]).localeCompare(String(b[0])));
         item[1].forEach((group, index) => {
+          var _completedItem$rawDat2, _restItem$rawData2;
           const groupKey = group[0];
           group[1] = [];
           series.forEach(serie => {
             const serieKey = serie.key;
             serie.forEach(item => {
               if (item.data[0] === groupKey) {
+                var _valueMap$get, _rawDataMap$get;
+                const aggregatedValue = ((_valueMap$get = valueMap.get(groupKey)) === null || _valueMap$get === void 0 ? void 0 : _valueMap$get.get(serieKey)) || 0;
+                const rawData = (_rawDataMap$get = rawDataMap.get(groupKey)) === null || _rawDataMap$get === void 0 ? void 0 : _rawDataMap$get.get(serieKey);
                 const newItem = {
                   ...item,
                   key: serieKey,
                   serieIndex: index,
-                  rawData: item.data[1].get(serieKey)
+                  groupby: groupKey,
+                  rawData: {
+                    ...(rawData || {}),
+                    value: aggregatedValue,
+                    groupby: groupKey,
+                    group_name: serieKey
+                  }
                 };
                 group[1].push(newItem);
               }
             });
           });
+          const completedItem = group[1].find(d => d.key === 'completed');
+          const restItem = group[1].find(d => d.key === 'rest');
+          const completedValue = completedItem ? Number(((_completedItem$rawDat2 = completedItem.rawData) === null || _completedItem$rawDat2 === void 0 ? void 0 : _completedItem$rawDat2.value) || 0) : 0;
+          const restValue = restItem ? Number(((_restItem$rawData2 = restItem.rawData) === null || _restItem$rawData2 === void 0 ? void 0 : _restItem$rawData2.value) || 0) : 0;
+          const targetValue = completedValue + restValue;
+          if (!targetValue) {
+            restItem && (restItem.rawData.completedRate = 'empty');
+          } else {
+            restItem && (restItem.rawData.completedRate = Math.round(completedValue / targetValue * 100));
+          }
           let sumValue = 0;
           group[1].forEach(g => {
             sumValue = sumValue + g[1];

package/dist/view/wrapper/dashboard.js

@@ -17,6 +17,28 @@ var _chartComponent = _interopRequireDefault(require("./chart-component"));
 class Dashboard extends _chartComponent.default {
   constructor(props) {
     super(props);
+    this.handleClickNumber = () => {
+      const {
+        toggleRecords,
+        result
+      } = this.props;
+      if (!toggleRecords) return;
+      if (typeof result === 'object' && result !== null && result.rows) {
+        toggleRecords({
+          rows: result.rows
+        });
+      } else {
+        toggleRecords({
+          isQueryBySql: true
+        });
+      }
+    };
+    this.componentDidMount = () => {
+      this.createChart();
+      this.drawChart();
+      this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+      window.addEventListener('resize', this.debouncedHandleResize);
+    };
     this.handleResize = () => {
       this.destroyChart();
       this.createChart();
@@ -152,21 +174,55 @@ class Dashboard extends _chartComponent.default {
       const {
         height: chartHeight
       } = this.chartBoundingClientRect;
+      const {
+        toggleRecords
+      } = this.props;
+      const {
+        font_size,
+        font_color,
+        font_weight,
+        text_align,
+        card_label_font_size,
+        label_font_color,
+        label_text_align,
+        label_font_weight
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: fullChartHeight
+      } = this.chartBoundingClientRect;
+      const radius = Math.min(chartWidth, fullChartHeight) / 2 * 0.75;
+      const alignOffset = radius * 0.25;
+      const getTextAnchorAndX = align => {
+        const v = (align || '').toLowerCase();
+        if (v === 'left') {
+          return {
+            textAnchor: 'end',
+            x: -alignOffset
+          };
+        }
+        if (v === 'right') {
+          return {
+            textAnchor: 'start',
+            x: alignOffset
+          };
+        }
+        return {
+          textAnchor: 'middle',
+          x: 0
+        };
+      };
+      const titleAlign = getTextAnchorAndX(label_text_align);
+      const numberAlign = getTextAnchorAndX(text_align);
       const totalWrapper = d3.select(wrapper).append('g').attr('class', 'total-wrapper');
       // title
-      totalWrapper.append('text').attr('fill', '#545454').attr('font-size', chartHeight > 240 ? 20 : 12).text(name).attr('dy', 50).call(g => {
-        const {
-          width
-        } = g.node().getBoundingClientRect();
-        g.attr('dx', "".concat(-(width / 2)));
-      });
+      totalWrapper.append('text').attr('fill', label_font_color || theme.textColor).attr('font-size', card_label_font_size || (chartHeight > 240 ? 20 : 12)).attr('font-weight', label_font_weight).attr('text-anchor', titleAlign.textAnchor).attr('x', titleAlign.x).text(name).attr('dy', 50);
 
       // total
-      totalWrapper.append('text').attr('fill', theme.textColor).attr('font-size', chartHeight > 240 ? 36 : 16).text("".concat(formatValue, "%")).attr('dx', -10).attr('dy', 90).call(g => {
-        const {
-          width
-        } = g.node().getBoundingClientRect();
-        g.attr('dx', "".concat(-(width / 2)));
+      totalWrapper.append('text').attr('fill', font_color || theme.textColor).attr('font-size', font_size || (chartHeight > 240 ? 36 : 16)).attr('font-weight', font_weight).attr('text-anchor', numberAlign.textAnchor).attr('x', numberAlign.x).text("".concat(formatValue, "%")).attr('dy', 90).style('cursor', toggleRecords ? 'pointer' : 'default').on('click', () => {
+        if (toggleRecords) {
+          this.handleClickNumber();
+        }
       });
     };
     this.chart = null;
@@ -175,12 +231,6 @@ class Dashboard extends _chartComponent.default {
       toolTipPosition: null
     };
   }
-  componentDidMount() {
-    this.createChart();
-    this.drawChart();
-    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
-  }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
@@ -213,7 +263,7 @@ Dashboard.propTypes = {
   chart: _propTypes.default.object,
   groupbyColumn: _propTypes.default.object,
   summaryColumn: _propTypes.default.object,
-  result: _propTypes.default.number,
+  result: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
   tables: _propTypes.default.array,
   globalTheme: _propTypes.default.string,
   chartColorTheme: _propTypes.default.string,

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

@@ -12,6 +12,7 @@ var _lodashEs = require("lodash-es");
 var _classnames = _interopRequireDefault(require("classnames"));
 var d3 = _interopRequireWildcard(require("d3"));
 var _dtableUtils = require("dtable-utils");
+var _dayjs = _interopRequireDefault(require("dayjs"));
 var _constants = require("../../constants");
 var _utils = require("../../utils");
 var _intl = _interopRequireDefault(require("../../intl"));
@@ -51,7 +52,10 @@ class HorizontalBarGroup extends _chartComponent.default {
         customRender,
         chart
       } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      const {
+        column_groupby_column_key
+      } = chart.config || {};
+      data = _utils.BaseUtils.formatEmptyName(data, column_groupby_column_key, _intl.default.get(_constants.EMPTY_NAME));
       if (!Array.isArray(data)) return;
       const {
         sort_type,
@@ -92,9 +96,24 @@ class HorizontalBarGroup extends _chartComponent.default {
         marginRight
       } = this.chartBoundingClientRect;
       const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
+      const isGroupByDate = [_dtableUtils.CellType.DATE, _dtableUtils.CellType.CTIME, _dtableUtils.CellType.MTIME].includes(groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type);
+      if (isGroupByDate) {
+        const emptyName = _intl.default.get(_constants.EMPTY_NAME);
+        data = data.map(item => {
+          const rawGroupName = item.group_name;
+          if (rawGroupName === null || rawGroupName === undefined || rawGroupName === '') return item;
+          if (rawGroupName === emptyName) return item;
+          const dateValue = (0, _dayjs.default)(rawGroupName);
+          if (!dateValue.isValid()) return item;
+          return {
+            ...item,
+            group_name: dateValue.format('YYYY-MM-DD')
+          };
+        });
+      }
       const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
-      const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.3).paddingOuter(0.1);
       const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
       const y = d3.scaleBand().domain(new Set(sortedData.map(d => d.group_name))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
 
@@ -176,7 +195,7 @@ class HorizontalBarGroup extends _chartComponent.default {
       this.setLegend({
         legendName: 'group_name',
         theme,
-        legendPosition: 'top-left',
+        legendPosition: 'top-right',
         data,
         groupColumn: this.props.columnGroupbyColumn,
         chart
@@ -205,10 +224,11 @@ class HorizontalBarGroup extends _chartComponent.default {
         title: !title && typeof title !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : title,
         items: children.map(child => {
           const data = child.__data__;
+          const groupName = data.group_name === null || data.group_name === undefined || data.group_name === '' ? _intl.default.get(_constants.EMPTY_NAME) : data.group_name;
           return {
-            color: this.colorMap[data.group_name] || _constants.CHART_STYLE_COLORS[0],
-            name: data.group_name,
-            value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), horizontal_axis_summary_method)
+            color: this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0],
+            name: groupName,
+            value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(child.getAttribute('value')), horizontal_axis_summary_method)
           };
         })
       };

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

@@ -49,7 +49,7 @@ class HorizontalBarStack extends _chartComponent.default {
         customRender,
         chart
       } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      data = _utils.BaseUtils.formatEmptyName(data, chart.config.column_groupby_column_key, _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
       const {
         sort_type,
@@ -95,7 +95,7 @@ class HorizontalBarStack extends _chartComponent.default {
       const series = d3.stack().keys(d3.union(sortedData.map(d => d.group_name))).value((_ref, key) => {
         var _group$get;
         let [_, group] = _ref;
-        return ((_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
+        return ((_group$get = group.get(key)) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
       })(d3.index(sortedData, d => d.name, d => d.group_name));
       const newSeries = this.handleSeries(series, sortedData);
       const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);

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

@@ -50,7 +50,7 @@ class LineGroup extends _chartComponent.default {
       let {
         result: data
       } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      data = _utils.BaseUtils.formatEmptyName(data, 'group_name', _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
       this.draw(data);
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
@@ -119,12 +119,17 @@ class LineGroup extends _chartComponent.default {
       const title = !data.name && typeof data.name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : data.name;
       const circleList = (_contentWrapper$selec = contentWrapper.selectAll('circle')) === null || _contentWrapper$selec === void 0 ? void 0 : _contentWrapper$selec.nodes();
       const items = circleList.filter(circle => circle.getAttribute('data-name') === title).map(circle => {
+        const groupName = circle.getAttribute('data-groupName') || _intl.default.get(_constants.EMPTY_NAME);
         return {
-          color: this.colorMap[circle.getAttribute('data-groupName')],
-          name: circle.getAttribute('data-groupName'),
+          color: this.colorMap[groupName],
+          name: groupName,
           value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(circle.getAttribute('data-text')), y_axis_summary_method)
         };
       });
+      items.sort((a, b) => String(a.name).localeCompare(String(b.name), undefined, {
+        numeric: true,
+        sensitivity: 'base'
+      }));
       return {
         title,
         items

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

@@ -53,6 +53,7 @@ class MapBubble extends _chartComponent.default {
     };
     this.showTooltip = (event, data) => {
       const curData = data.find(item => item.name.includes(event.currentTarget.getAttribute('data-name')));
+      if (!curData) return;
       const title = curData.nameType === 'en' ? curData.name : curData.name_cn;
       const value = Number(event.currentTarget.getAttribute('data-value'));
       const {

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

@@ -54,6 +54,7 @@ class Map extends _chartComponent.default {
     };
     this.showTooltip = (event, data) => {
       const curData = data.find(item => item.name.includes(event.target.parentNode.getAttribute('data-name')));
+      if (!curData) return;
       const title = curData.nameType === 'en' ? curData.name : curData.name_cn;
       const value = Number(event.target.parentNode.getAttribute('data-value'));
       const {

package/dist/view/wrapper/pie.js

@@ -33,7 +33,7 @@ class Pie extends _chartComponent.default {
       } = chart.config;
       const initConfig = {
         insertPadding: 30,
-        rightLegendSpace: show_legend ? 150 : 0
+        rightLegendSpace: show_legend ? 50 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };

package/dist/view/wrapper/ring.js

@@ -33,7 +33,7 @@ class Ring extends _chartComponent.default {
       } = chart.config;
       const initConfig = {
         insertPadding: 30,
-        rightLegendSpace: show_legend ? 150 : 0
+        rightLegendSpace: show_legend ? 50 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };

package/dist/view/wrapper/scatter.js

@@ -27,8 +27,7 @@ class Scatter extends _chartComponent.default {
     };
     this.createChart = () => {
       const {
-        chart,
-        columnGroupbyColumn
+        chart
       } = this.props;
       const {
         y_axis_show_label,
@@ -40,7 +39,7 @@ class Scatter extends _chartComponent.default {
         marginLeft: y_axis_show_label ? 20 : 0,
         marginBottom: x_axis_show_label ? 20 : 0,
         marginTop: y_axis_show_value ? 15 : 0,
-        bottomLegendSpace: columnGroupbyColumn ? 20 : 0
+        bottomLegendSpace: 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
@@ -61,8 +60,11 @@ class Scatter extends _chartComponent.default {
     this.transformStringToNumber = data => {
       const newData = (0, _lodashEs.cloneDeep)(data);
       newData.forEach(item => {
-        item.name = item.original_value.name;
-        item.value = item.original_value.value;
+        if (item.original_value) {
+          var _item$original_value, _item$original_value2;
+          item.name = ((_item$original_value = item.original_value) === null || _item$original_value === void 0 ? void 0 : _item$original_value.name) || '';
+          item.value = ((_item$original_value2 = item.original_value) === null || _item$original_value2 === void 0 ? void 0 : _item$original_value2.value) || 0;
+        }
       });
       return newData;
     };
@@ -268,7 +270,7 @@ class Scatter extends _chartComponent.default {
       this.setLegend({
         legendName: 'groupby',
         theme,
-        legendPosition: 'top-left',
+        legendPosition: 'top-right',
         data,
         groupColumn: this.props.columnGroupbyColumn,
         chart,

package/dist/view/wrapper/table/two-dimension-table.js

@@ -98,13 +98,14 @@ class TwoDimensionTable extends _react.PureComponent {
         className: "pivot-table-header"
       }), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
         return /*#__PURE__*/_react.default.createElement("th", {
+          key: "pivot-column-".concat(index),
           className: "pivot-table-header summary-columns-header"
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: "pivot-table-header-summary-columns-container"
         }, summary_columns.map((column, idx) => {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: (0, _classnames.default)('pivot-table-header'),
-            key: "pivot-column-".concat(idx)
+            key: "pivot-summary-column-".concat(idx)
           }, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
             value: column.name,
             column: column || {},
@@ -306,7 +307,7 @@ class TwoDimensionTable extends _react.PureComponent {
             cellIdx: cells.length
           }),
           title: rowTotal
-        }, _utils.BaseUtils.isValidValue(rowTotal, display_empty) ? (0, _utils.formatRowTotal)(rowTotal) : /*#__PURE__*/_react.default.createElement("i", null), /*#__PURE__*/_react.default.createElement("span", {
+        }, _utils.BaseUtils.isValidValue(rowTotal, display_empty) ? _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, rowTotal, summaryMethod) : /*#__PURE__*/_react.default.createElement("i", null), /*#__PURE__*/_react.default.createElement("span", {
           className: (0, _classnames.default)({
             'selected-pivot-cell-border': isSelectedTotalCell
           })

package/dist/view/wrapper/table-element/components/records-header/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _contexts = require("../../../../../utils/contexts");
 var _recordsHeaderCell = _interopRequireDefault(require("./records-header-cell"));
 class RecordsHeader extends _react.Component {
   constructor() {

package/dist/view/wrapper/table-element/components/resize-column-handle/resize-column-handle.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _lodashEs = require("lodash-es");
 require("./index.css");
 class ResizeColumnHandle extends _react.Component {
   constructor() {
@@ -18,6 +17,7 @@ class ResizeColumnHandle extends _react.Component {
       window.removeEventListener('touchmove', this.onMouseMove);
     };
     this.onMouseDown = e => {
+      e.stopPropagation();
       if (e.preventDefault) {
         e.preventDefault();
       }
@@ -27,12 +27,14 @@ class ResizeColumnHandle extends _react.Component {
       window.addEventListener('touchmove', this.onMouseMove);
     };
     this.onMouseUp = e => {
+      e.stopPropagation();
       if (this.props.onDragEnd) {
         this.props.onDragEnd(e);
       }
       this.cleanUp();
     };
     this.onMouseMove = e => {
+      e.stopPropagation();
       if (e.preventDefault) {
         e.preventDefault();
       }