sea-chart 2.0.37 → 2.0.39

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

@@ -12,6 +12,7 @@ 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");
@@ -46,12 +47,16 @@ class BarGroup extends _chartComponent.default {
     };
     this.drawChart = () => {
       const {
-        customRender
+        customRender,
+        chart
       } = this.props;
       let {
         result: data
       } = 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;
       this.draw(data);
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
@@ -97,9 +102,8 @@ 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.5).paddingOuter(0.1);
+      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 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 => {
@@ -111,31 +115,51 @@ class BarGroup extends _chartComponent.default {
       });
 
       // Rect group
-      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 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 => {
           const parentNode = rect.parentNode;
-          // add rect borderRadius
           this.addClipPath({
             rect,
             parentNode,
-            rectId: rect.getAttribute('data-slugid')
+            rectId: rect.getAttribute('data-slugid'),
+            borderRadiusVal: Number.isFinite(groupBorderRadius) ? groupBorderRadius : undefined
           });
-
-          // Add label
           if (y_axis_show_value) {
             this.addLabelToRectTop({
               container: parentNode,
-              xWidth: Number(x.bandwidth()),
+              xWidth: Number(localX.bandwidth()),
               x: Number(rect.getAttribute('x')),
               y: Number(rect.getAttribute('y')),
               theme,
@@ -144,14 +168,15 @@ class BarGroup extends _chartComponent.default {
             });
           }
         });
-      }).on('click', (event, data) => {
+      });
+      contentWrapper.selectAll('rect').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) => {
+      }).on('mouseleave', event => {
         this.hiddenTooltip();
         this.handleAcitveAndInActiveState('active', event);
       });
@@ -168,6 +193,7 @@ class BarGroup extends _chartComponent.default {
       });
     };
     this.showTooltip = event => {
+      var _this$props$columnGro;
       const {
         summaryColumn,
         chart
@@ -175,18 +201,21 @@ 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;
-      const [curGroupName, data] = curGroup.__data__;
+      let [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[item.group_name],
-            name: item.group_name,
+            color: this.colorMap[groupName],
+            name: groupName,
             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, '', _intl.default.get('Empty'));
+      data = _utils.BaseUtils.formatEmptyName(data, chart.config.column_groupby_column_key, _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(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value;
+        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 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,6 +32,24 @@ 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 {
@@ -106,11 +124,12 @@ 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)(result) ? result : 0;
+      content = (0, _dtableUtils.isNumber)(numericValue) ? numericValue : 0;
     } else {
-      content = this.formatData(result);
+      content = this.formatData(numericValue);
     }
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "sea-chart-container plugin-number-card"
@@ -133,7 +152,12 @@ class BasicNumericCard extends _react.Component {
         fontWeight: "".concat(font_weight),
         color: "".concat(font_color)
       }
-    }, content), /*#__PURE__*/_react.default.createElement("p", {
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      onClick: this.handleClickNumber,
+      style: {
+        cursor: 'pointer'
+      }
+    }, content)), /*#__PURE__*/_react.default.createElement("p", {
       ref: ref => this.labelRef = ref,
       style: {
         position: 'absolute',