sea-chart 2.0.36 → 2.0.37

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

@@ -39,11 +39,10 @@ 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, (_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'));
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
       this.draw(data);
     };
@@ -71,20 +70,12 @@ 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);
-
-      // y scale will be created per main group (local) to avoid overlap
-
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.groupby))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
       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);
@@ -112,64 +103,38 @@ 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)"));
-      const mainGroups = contentWrapper.selectAll().data(newSeries).join('g').attr('transform', _ref => {
-        let [name] = _ref;
-        return "translate(0, ".concat(fy(name), ")");
+      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, ")");
       }).attr('data-transform', _ref2 => {
-        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 => {
+        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 => {
         // add rect borderRadius
         const allGroup = this.getAllGroup(contentWrapper);
         allGroup.forEach(group => {
@@ -198,6 +163,16 @@ 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',
@@ -280,64 +255,34 @@ 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((_ref7, key) => {
-          let [_, group] = _ref7;
-          return group.get(key) || 0;
-        })(valueMap);
+        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));
         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,
-                  groupby: groupKey,
-                  rawData: {
-                    ...(rawData || {}),
-                    value: aggregatedValue,
-                    groupby: groupKey,
-                    group_name: serieKey
-                  }
+                  rawData: item.data[1].get(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,28 +17,6 @@ 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();
@@ -174,55 +152,21 @@ 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', 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);
+      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)));
+      });
 
       // total
-      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();
-        }
+      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)));
       });
     };
     this.chart = null;
@@ -231,6 +175,12 @@ 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)) {
@@ -263,7 +213,7 @@ Dashboard.propTypes = {
   chart: _propTypes.default.object,
   groupbyColumn: _propTypes.default.object,
   summaryColumn: _propTypes.default.object,
-  result: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
+  result: _propTypes.default.number,
   tables: _propTypes.default.array,
   globalTheme: _propTypes.default.string,
   chartColorTheme: _propTypes.default.string,

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

@@ -12,7 +12,6 @@ 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"));
@@ -52,10 +51,7 @@ class HorizontalBarGroup extends _chartComponent.default {
         customRender,
         chart
       } = this.props;
-      const {
-        column_groupby_column_key
-      } = chart.config || {};
-      data = _utils.BaseUtils.formatEmptyName(data, column_groupby_column_key, _intl.default.get(_constants.EMPTY_NAME));
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
       const {
         sort_type,
@@ -96,24 +92,9 @@ 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.3).paddingOuter(0.1);
+      const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).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);
 
@@ -195,7 +176,7 @@ class HorizontalBarGroup extends _chartComponent.default {
       this.setLegend({
         legendName: 'group_name',
         theme,
-        legendPosition: 'top-right',
+        legendPosition: 'top-left',
         data,
         groupColumn: this.props.columnGroupbyColumn,
         chart
@@ -224,11 +205,10 @@ 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[groupName] || _constants.CHART_STYLE_COLORS[0],
-            name: groupName,
-            value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(child.getAttribute('value')), horizontal_axis_summary_method)
+            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)
           };
         })
       };

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, chart.config.column_groupby_column_key, _intl.default.get('Empty'));
+      data = _utils.BaseUtils.formatEmptyName(data, '', _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(key)) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
+        return ((_group$get = group.get(String(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, 'group_name', _intl.default.get('Empty'));
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
       this.draw(data);
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
@@ -119,17 +119,12 @@ 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[groupName],
-          name: groupName,
+          color: this.colorMap[circle.getAttribute('data-groupName')],
+          name: circle.getAttribute('data-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,7 +53,6 @@ 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,7 +54,6 @@ 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 ? 50 : 0
+        rightLegendSpace: show_legend ? 150 : 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 ? 50 : 0
+        rightLegendSpace: show_legend ? 150 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };

package/dist/view/wrapper/scatter.js

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

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

@@ -98,14 +98,13 @@ 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-summary-column-".concat(idx)
+            key: "pivot-column-".concat(idx)
           }, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
             value: column.name,
             column: column || {},
@@ -307,7 +306,7 @@ class TwoDimensionTable extends _react.PureComponent {
             cellIdx: cells.length
           }),
           title: rowTotal
-        }, _utils.BaseUtils.isValidValue(rowTotal, display_empty) ? _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, rowTotal, summaryMethod) : /*#__PURE__*/_react.default.createElement("i", null), /*#__PURE__*/_react.default.createElement("span", {
+        }, _utils.BaseUtils.isValidValue(rowTotal, display_empty) ? (0, _utils.formatRowTotal)(rowTotal) : /*#__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,6 +7,7 @@ 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,6 +6,7 @@ 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() {
@@ -17,7 +18,6 @@ class ResizeColumnHandle extends _react.Component {
       window.removeEventListener('touchmove', this.onMouseMove);
     };
     this.onMouseDown = e => {
-      e.stopPropagation();
       if (e.preventDefault) {
         e.preventDefault();
       }
@@ -27,14 +27,12 @@ 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();
       }