sea-chart 2.0.1-alpha.2 → 2.0.2-alpha.3

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

@@ -0,0 +1,265 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dtableUtils = require("dtable-utils");
+var _lodashEs = require("lodash-es");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _intl = _interopRequireDefault(require("../../intl"));
+var _columnUtils = require("../../utils/column-utils");
+var _constants = require("../../constants");
+var _utils = require("../../utils");
+var _colorRules = require("../../constants/color-rules");
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class BarGroup extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.chart && this.chart.destroy();
+      this.createChart();
+      // this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        y_axis_show_value
+      } = chart.config;
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
+      this.initChart(this.container, {
+        appendPadding
+      });
+      this.chart.on('interval:click', e => {
+        this.props.toggleRecords(e.data.data);
+      });
+    };
+    this.clearChart = () => {
+      this.chart.annotation().clear(true);
+      this.chart.clear(true);
+    };
+    this.drawChart = () => {
+      let {
+        result: data
+      } = this.props;
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      this.chart.scale(this.groupName, {
+        type: 'cat'
+      });
+      const {
+        chart
+      } = this.props;
+      const {
+        sort_type,
+        type
+      } = chart.config;
+      if (type === _constants.CHART_TYPE.BAR_STACK && sort_type) {
+        data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type);
+      }
+      this.loadData(data);
+      this.draw(data);
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        summaryColumn,
+        globalTheme,
+        chartColorTheme,
+        customRender,
+        tables
+      } = this.props;
+      const {
+        type,
+        y_axis_summary_method,
+        y_axis_show_value,
+        label_font_size,
+        display_each_block_data,
+        y_axis_summary_type,
+        table_id,
+        column_groupby_column_key,
+        color_theme
+      } = chart.config;
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config || {};
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const isGroup = type === _constants.CHART_TYPE.BAR_GROUP;
+      const newData = this.getChartGroupData(data);
+      const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
+      const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
+      let singleBarWidth, singleBarRadius;
+      // y-axis label width：6 + 10
+      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line
+      if (!isGroup) {
+        singleBarWidth = Math.round(chartWidth / (2 * newData.length));
+        this.markFirstOrLast(data, 'first');
+      } else {
+        const maxCountGroup = (0, _lodashEs.maxBy)(newData, 'currentGroupCount');
+        // y-axis label width：6 + 10
+        singleBarWidth = maxCountGroup && Math.round(chartWidth / (2 * newData.length * maxCountGroup.currentGroupCount));
+      }
+      singleBarRadius = Math.min(singleBarWidth / 5, 10);
+      this.drawLabels(newData);
+      // set Coord type
+      this.chart.coordinate('rect');
+      this.autoAdjustDataOptions(chart, data, summaryColumn);
+      let yAxisShowValue = y_axis_show_value;
+      if (type === _constants.CHART_TYPE.BAR_STACK) {
+        yAxisShowValue = display_each_block_data;
+        let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+        if (y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
+          summaryColumnData = (summaryColumn === null || summaryColumn === void 0 ? void 0 : summaryColumn.data) || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+        }
+        // get the total value of each stack
+        const dv = new DataSet.DataView().source(data);
+        dv.transform({
+          type: 'aggregate',
+          fields: ['value'],
+          operations: ['sum'],
+          as: ['value_sum'],
+          groupBy: ['name']
+        });
+        if (yAxisShowValue) {
+          dv.rows.forEach(item => {
+            this.chart.annotation().text({
+              content: () => {
+                if (y_axis_summary_method === _constants.CHART_SUMMARY_TYPE.DISTINCT_VALUES) {
+                  return item.value_sum;
+                }
+                return (0, _dtableUtils.getNumberDisplayString)(item.value_sum, summaryColumnData);
+              },
+              position: {
+                name: item.name,
+                value: item.value_sum
+              },
+              offsetY: -10,
+              offsetX: -5
+            });
+          });
+        }
+      }
+
+      // dodgePadding set to 0, cause width bewteen bars is designed to 0
+      const adjust = !isGroup ? {
+        type: 'stack'
+      } : {
+        type: 'dodge',
+        marginRatio: 0
+      };
+
+      // use single select column color
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
+      this.chart.interval().animate({
+        // custom update animation
+        update: {
+          animation: 'fadeIn',
+          duration: 1000,
+          easing: 'easeLinear'
+        }
+      }).label(y_axis_show_value ? 'value' : false, {
+        style: {
+          fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
+          fill: theme.labelColor,
+          ...this.labelStroke
+        },
+        position: type === _constants.CHART_TYPE.BAR_STACK ? 'middle' : ''
+      }).position('name*value').size(singleBarWidth).color('group_name', group_name => {
+        return this.colorMap[group_name] || _constants.CHART_STYLE_COLORS[0];
+      }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
+        return {
+          title: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name,
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
+          name: !group_name && typeof group_name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : group_name
+        };
+      }).adjust([adjust]).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      }).style('isFirst', isFirst => {
+        if (adjust.type === 'stack') {
+          if (isFirst) {
+            return {
+              radius: [singleBarRadius, singleBarRadius, 0, 0]
+            };
+          } else {
+            return {
+              radius: [0, 0, 0, 0]
+            };
+          }
+        } else {
+          return {
+            radius: [singleBarRadius, singleBarRadius, 0, 0]
+          };
+        }
+      });
+      if (isGroup) {
+        this.formatDataByName(data);
+      }
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
+      }
+      this.setToolTip(isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+      this.setNameLabelAndTooltip(theme, this.labelCount);
+      this.setValueLabel(theme);
+      this.setLegend('group_name', theme, 'top-right');
+      this.chart.interaction('element-highlight-by-x');
+    };
+    this.chart = 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)) {
+      this.createChart();
+      // this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    var _this$chart;
+    ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      }),
+      ref: ref => this.container = ref
+    });
+  }
+}
+BarGroup.propTypes = {
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _propTypes.default.object,
+  columnGroupbyColumn: _propTypes.default.object,
+  summaryColumn: _propTypes.default.object,
+  result: _propTypes.default.array,
+  tables: _propTypes.default.array,
+  globalTheme: _propTypes.default.string,
+  chartColorTheme: _propTypes.default.string,
+  toggleRecords: _propTypes.default.func,
+  customRender: _propTypes.default.func
+};
+var _default = exports.default = BarGroup;

package/dist/view/wrapper/bar.js

@@ -225,8 +225,6 @@ class Bar extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      var _this$chart;
-      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }

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

@@ -198,7 +198,7 @@ class ChartComponent extends _react.Component {
         });
       }
     };
-    this.renderAxisLabel = (chart, tables, container) => {
+    this.renderAxisLabel = (chart, tables, chartContainer) => {
       var _this$chart2;
       if (!this.chart || !chart) return;
       let {
@@ -226,7 +226,6 @@ class ChartComponent extends _react.Component {
       let textColor;
       this.globalTheme === _constants.THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
       const xAxisID = "chart-x-axis-label_".concat(chart.id);
-      const chartContainer = container || this.chart.getCanvas().get('container');
       const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector("#".concat(xAxisID));
       if (!xLabel && x_axis_show_label) {
         const div = document.createElement('div');

package/dist/view/wrapper/index.js

@@ -11,6 +11,7 @@ var _constants = require("../../constants");
 var _statisticRecordDialog = _interopRequireDefault(require("../../components/statistic-record-dialog"));
 var _table = _interopRequireDefault(require("./table"));
 var _bar = _interopRequireDefault(require("./bar"));
+var _barGroup = _interopRequireDefault(require("./bar-group"));
 var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
@@ -94,6 +95,12 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case _constants.CHART_TYPE.BAR_GROUP:
+        {
+          return /*#__PURE__*/_react.default.createElement(_barGroup.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
       case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
         {
           return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, Object.assign({}, baseProps, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.1-alpha.2",
+  "version": "2.0.2-alpha.3",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
@@ -21,7 +21,7 @@
     "slugid": "~5.0.1"
   },
   "peerDependencies": {
-    "dtable-ui-component": "6.0.3",
+    "dtable-ui-component": "6.0.4",
     "dtable-utils": "~5.0.*",
     "prop-types": "15.8.1",
     "react": "18.3.1",