sea-chart 2.0.36 → 2.0.37

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

@@ -12,7 +12,6 @@ var _dtableUtils = require("dtable-utils");
 var _lodashEs = require("lodash-es");
 var d3 = _interopRequireWildcard(require("d3"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
 var _intl = _interopRequireDefault(require("../../intl"));
 var _constants = require("../../constants");
 var _utils = require("../../utils");
@@ -47,16 +46,12 @@ class BarGroup extends _chartComponent.default {
     };
     this.drawChart = () => {
       const {
-        customRender,
-        chart
+        customRender
       } = this.props;
       let {
         result: data
       } = 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;
       this.draw(data);
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
@@ -102,8 +97,9 @@ class BarGroup extends _chartComponent.default {
 
       // Y axis
       this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
-      const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.25).paddingOuter(0.1);
+      const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
+      const x = d3.scaleBand().domain(new Set(sortedData.map(d => d.group_name))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
       this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -115,51 +111,31 @@ class BarGroup extends _chartComponent.default {
       });
 
       // Rect group
-      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
-      const groupedData = d3.group(sortedData, d => d.name);
-      const group = contentWrapper.selectAll().data(groupedData).join('g').attr('transform', _ref => {
-        let [name] = _ref;
-        return "translate(".concat(fx(name), ",0)");
-      });
-      group.each((_ref2, groupIndex, groupNodes) => {
-        let [, dum] = _ref2;
-        const groupNode = groupNodes[groupIndex];
-        const localX = d3.scaleBand().domain(dum.map(d => d.group_name)).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
-        const rectSelection = d3.select(groupNode).selectAll('rect').data(dum).join('rect').attr('opacity', 1).attr('x', d => localX(d.group_name)).attr('y', d => y(d.value)).attr('width', localX.bandwidth()).attr('height', d => y(0) - y(d.value)).attr('fill', d => this.colorMap[d.group_name] || _constants.CHART_STYLE_COLORS[0]).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId);
-        const {
-          borderRadius
-        } = this.chartBoundingClientRect;
-        const rectNodes = rectSelection.nodes();
-        const validRectNodes = rectNodes.filter(rect => {
-          const rectWidth = Number(rect.getAttribute('width'));
-          const rectHeight = Number(rect.getAttribute('height'));
-          return rectWidth > 0 && rectHeight > 0;
-        });
-        let groupBorderRadius;
-        if (validRectNodes.length > 0) {
-          groupBorderRadius = Infinity;
-          validRectNodes.forEach(rect => {
-            const rectWidth = Number(rect.getAttribute('width'));
-            const rectHeight = Number(rect.getAttribute('height'));
-            const computedBorderRadius = Math.min(rectWidth * borderRadius, rectHeight / 2, rectWidth / 2);
-            groupBorderRadius = Math.min(groupBorderRadius, computedBorderRadius);
-          });
-          if (!Number.isFinite(groupBorderRadius)) {
-            groupBorderRadius = 0;
-          }
-        }
-        rectNodes.forEach(rect => {
+      this.chart.append('g').attr('class', 'content-wrapper').selectAll().data(d3.group(sortedData, d => d.name)).join('g').attr('transform', _ref => {
+        let [name, dum] = _ref;
+        // Each group is horizontally centered
+        const offset = (fx.bandwidth() - dum.length * x.bandwidth()) / 2;
+        return "translate(".concat(fx(name) + offset, ",0)");
+      })
+      // rect item
+      .selectAll().data(_ref2 => {
+        let [_, d] = _ref2;
+        return d;
+      }).join('rect').attr('opacity', 1).attr('x', (d, index) => index * x.bandwidth()).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value)).attr('fill', d => this.colorMap[d.group_name] || _constants.CHART_STYLE_COLORS[0]).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).call(g => {
+        g.nodes().forEach(rect => {
           const parentNode = rect.parentNode;
+          // add rect borderRadius
           this.addClipPath({
             rect,
             parentNode,
-            rectId: rect.getAttribute('data-slugid'),
-            borderRadiusVal: Number.isFinite(groupBorderRadius) ? groupBorderRadius : undefined
+            rectId: rect.getAttribute('data-slugid')
           });
+
+          // Add label
           if (y_axis_show_value) {
             this.addLabelToRectTop({
               container: parentNode,
-              xWidth: Number(localX.bandwidth()),
+              xWidth: Number(x.bandwidth()),
               x: Number(rect.getAttribute('x')),
               y: Number(rect.getAttribute('y')),
               theme,
@@ -168,15 +144,14 @@ class BarGroup extends _chartComponent.default {
             });
           }
         });
-      });
-      contentWrapper.selectAll('rect').on('click', (event, data) => {
+      }).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 => {
+      }).on('mouseleave', (event, data) => {
         this.hiddenTooltip();
         this.handleAcitveAndInActiveState('active', event);
       });
@@ -193,7 +168,6 @@ class BarGroup extends _chartComponent.default {
       });
     };
     this.showTooltip = event => {
-      var _this$props$columnGro;
       const {
         summaryColumn,
         chart
@@ -201,21 +175,18 @@ class BarGroup extends _chartComponent.default {
       const {
         y_axis_summary_method
       } = chart.config;
-      const isGroupByDate = [_dtableUtils.CellType.DATE, _dtableUtils.CellType.CTIME, _dtableUtils.CellType.MTIME].includes((_this$props$columnGro = this.props.columnGroupbyColumn) === null || _this$props$columnGro === void 0 ? void 0 : _this$props$columnGro.type);
       const {
         offsetX,
         offsetY
       } = event;
       const curGroup = event.target.parentNode;
-      let [curGroupName, data] = curGroup.__data__;
+      const [curGroupName, data] = curGroup.__data__;
       const newTooltipData = {
         title: !curGroupName && typeof curGroupName !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : curGroupName,
         items: data.map(item => {
-          const rawGroupName = item.group_name;
-          const groupName = rawGroupName === null || rawGroupName === undefined || rawGroupName === '' ? _intl.default.get(_constants.EMPTY_NAME) : isGroupByDate ? (0, _dayjs.default)(rawGroupName).format('YYYY-MM-DD') : rawGroupName;
           return {
-            color: this.colorMap[groupName],
-            name: groupName,
+            color: this.colorMap[item.group_name],
+            name: item.group_name,
             value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(item.value), y_axis_summary_method)
           };
         })

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

@@ -56,7 +56,7 @@ class BarStack extends _chartComponent.default {
       let {
         result: data
       } = 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;
       sort_type && (data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type));
       this.draw(data);
@@ -103,7 +103,7 @@ class BarStack 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;
       })(d3.index(sortedData, d => d.name, d => d.group_name));
       const niceEnd = d3.nice(0, d3.max(series, d => d3.max(d, d => d[1])), 5)[1];
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);

package/dist/view/wrapper/basic-number-card.js

@@ -32,24 +32,6 @@ class BasicNumericCard extends _react.Component {
         });
       }
     };
-    this.handleClickNumber = () => {
-      const {
-        toggleRecords,
-        result
-      } = this.props;
-      if (!toggleRecords) return;
-      if (typeof result === 'object' && result !== null && result.rows) {
-        // isCalculateByView = true: use rows of base
-        toggleRecords({
-          rows: result.rows
-        });
-      } else {
-        // isCalculateByView = false: use rows of sql query
-        toggleRecords({
-          isQueryBySql: true
-        });
-      }
-    };
     this.formatData = data => {
       if (!data && data !== 0) return _intl.default.get(_constants.EMPTY_NAME);
       const {
@@ -124,12 +106,11 @@ class BasicNumericCard extends _react.Component {
       label_text_align,
       label_font_weight
     } = config;
-    const numericValue = typeof result === 'object' && result !== null ? result.value : result;
     let content = null;
     if (summary_method === 'Distinct_values') {
-      content = (0, _dtableUtils.isNumber)(numericValue) ? numericValue : 0;
+      content = (0, _dtableUtils.isNumber)(result) ? result : 0;
     } else {
-      content = this.formatData(numericValue);
+      content = this.formatData(result);
     }
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "sea-chart-container plugin-number-card"
@@ -152,12 +133,7 @@ class BasicNumericCard extends _react.Component {
         fontWeight: "".concat(font_weight),
         color: "".concat(font_color)
       }
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      onClick: this.handleClickNumber,
-      style: {
-        cursor: 'pointer'
-      }
-    }, content)), /*#__PURE__*/_react.default.createElement("p", {
+    }, content), /*#__PURE__*/_react.default.createElement("p", {
       ref: ref => this.labelRef = ref,
       style: {
         position: 'absolute',