sea-chart 2.0.2-alpha.3 → 2.0.3

package/dist/view/wrapper/bar.js

@@ -225,6 +225,8 @@ 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, chartContainer) => {
+    this.renderAxisLabel = (chart, tables, container) => {
       var _this$chart2;
       if (!this.chart || !chart) return;
       let {
@@ -226,6 +226,7 @@ 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,7 +11,6 @@ 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"));
@@ -95,12 +94,6 @@ 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.2-alpha.3",
+  "version": "2.0.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.4",
+    "dtable-ui-component": "6.0.5",
     "dtable-utils": "~5.0.*",
     "prop-types": "15.8.1",
     "react": "18.3.1",

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

@@ -1,265 +0,0 @@
-"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;