sea-chart 2.0.7 → 2.0.8

package/dist/components/types-dialog/index.js

@@ -23,7 +23,8 @@ const TypesDialog = _ref => {
     lang,
     onToggle: propsOnToggle,
     onChange,
-    dataSources
+    dataSources,
+    hideTypeToggle
   } = _ref;
   const [currentCatIndex, setCurrentCatIndex] = (0, _react.useState)(0);
   const [selectedType, setType] = (0, _react.useState)(type);
@@ -66,11 +67,20 @@ const TypesDialog = _ref => {
     onChange(selectedType);
     onToggle();
   }, [onChange, selectedType, onToggle]);
+  const handleFilterTypes = (0, _react.useCallback)(() => {
+    if (hideTypeToggle) {
+      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram'].includes(item.name));
+      newChartTypes.forEach(item => {
+        item.children = item.children.slice(0, 3);
+      });
+      return newChartTypes;
+    }
+    return _constants.CHART_TYPES;
+  }, [hideTypeToggle]);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
     isOpen: true,
     toggle: onToggle,
-    className: "sea-chart-types-dialog",
-    zIndex: 1048
+    className: "sea-chart-types-dialog"
   }, /*#__PURE__*/_react.default.createElement(_DTableModalHeader2.default, {
     toggle: onToggle
   }, type ? _intl.default.get('Edit_type') : _intl.default.get('All_charts')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
@@ -79,7 +89,7 @@ const TypesDialog = _ref => {
     className: "sea-chart-types-container d-flex flex-column h-100"
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: "sea-chart-chart-categories-nav flex-shrink-0 d-flex flex-wrap align-items-center list-unstyled"
-  }, _constants.CHART_TYPES.map((item, index) => {
+  }, handleFilterTypes().map((item, index) => {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: index,
       className: "px-4 py-2 sea-chart-chart-cat-nav-item"
@@ -101,7 +111,7 @@ const TypesDialog = _ref => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "flex-fill o-auto sea-chart-type-container",
     ref: seaChartTypeContainerRef
-  }, _constants.CHART_TYPES.map((item, index) => {
+  }, handleFilterTypes().map((item, index) => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "sea-chart-type-".concat(index),
       className: "mb-7"

package/dist/settings/advance-bar-settings/style-settings.js

@@ -11,11 +11,11 @@ var _DTableRadioGroup2 = _interopRequireDefault(require("dtable-ui-component/lib
 var _DTableSwitch2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSwitch"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _constants = require("dtable-ui-component/lib/constants");
+var _dtableUtils = require("dtable-utils");
 var _divider = _interopRequireDefault(require("../widgets/divider"));
 var _minMaxSetting = _interopRequireDefault(require("../widgets/min-max-setting"));
 var _displayValuesSettings = _interopRequireDefault(require("../widgets/display-values-settings"));
-var _constants2 = require("../../constants");
+var _constants = require("../../constants");
 var _intl = _interopRequireDefault(require("../../intl"));
 var _selectLineType = _interopRequireDefault(require("../widgets/select-line-type"));
 var _colorSelector = _interopRequireDefault(require("../../components/chart-color-selector/color-selector"));
@@ -60,20 +60,20 @@ const StyleSettings = _ref => {
   } = style_config || {};
   const table = tables.find(table => table._id === table_id);
   const column = (0, _utils.getColumnByKey)(column_groupby_column_key, table.columns);
-  const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === _constants.CellType.SINGLE_SELECT;
+  const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === _dtableUtils.CellType.SINGLE_SELECT;
   const defaultColorTheme = _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.DEFAULT;
   const [currYaxisTitle, setCurrYaxisTitle] = (0, _react.useState)(title_name || '');
   const xAxisLabelOptions = (0, _react.useMemo)(() => {
     if (xLabel === 'Vertical_axis') {
-      return _constants2.Y_LABEL_POSITIONS;
+      return _constants.Y_LABEL_POSITIONS;
     }
-    return _constants2.X_LABEL_POSITIONS;
+    return _constants.X_LABEL_POSITIONS;
   }, [xLabel]);
   const yAxisLabelOptions = (0, _react.useMemo)(() => {
     if (yLabel === 'Horizontal_axis') {
-      return _constants2.X_LABEL_POSITIONS;
+      return _constants.X_LABEL_POSITIONS;
     }
-    return _constants2.Y_LABEL_POSITIONS;
+    return _constants.Y_LABEL_POSITIONS;
   }, [yLabel]);
   const onAxisLabelShowChange = (0, _react.useCallback)(labelKey => {
     const {
@@ -162,12 +162,12 @@ const StyleSettings = _ref => {
   }, []);
   const xAxisLabelPosition = x_axis_label_position || xAxisLabelOptions[0];
   const yAxisLabelPosition = y_axis_label_position || yAxisLabelOptions[0];
-  const isLineChart = [_constants2.CHART_TYPE.LINE, _constants2.CHART_TYPE.LINE_GROUP, _constants2.CHART_TYPE.AREA, _constants2.CHART_TYPE.AREA_GROUP].includes(type);
+  const isLineChart = [_constants.CHART_TYPE.LINE, _constants.CHART_TYPE.LINE_GROUP, _constants.CHART_TYPE.AREA, _constants.CHART_TYPE.AREA_GROUP].includes(type);
   const getLabelOptionsDisplay = options => {
     return options.reduce((optionDisplayMap, position) => {
       return {
         ...optionDisplayMap,
-        [position]: _intl.default.get(_constants2.LABEL_POSITION_TYPE_SHOW[position])
+        [position]: _intl.default.get(_constants.LABEL_POSITION_TYPE_SHOW[position])
       };
     }, {});
   };
@@ -196,7 +196,7 @@ const StyleSettings = _ref => {
       checked: y_axis_show_label || false,
       placeholder: _intl.default.get('Display_title'),
       onChange: () => onAxisLabelShowChange('y_axis_show_label')
-    }), y_axis_show_label && [_constants2.CHART_TYPE.BAR_STACK].includes(type) && /*#__PURE__*/_react.default.createElement("div", {
+    }), y_axis_show_label && [_constants.CHART_TYPE.BAR_STACK].includes(type) && /*#__PURE__*/_react.default.createElement("div", {
       className: "mt-3"
     }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
       for: "y-axis-custom-title-input"
@@ -218,7 +218,7 @@ const StyleSettings = _ref => {
       options: yAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(yAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'y_axis_label_position')
-    })), ![_constants2.CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+    })), ![_constants.CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
       key: "y_axis_auto_range",
       switchClassName: "mt-3",
       checked: y_axis_auto_range,
@@ -235,18 +235,18 @@ const StyleSettings = _ref => {
   }), isGroupBySingleSelectColumn && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_divider.default, null), /*#__PURE__*/_react.default.createElement(_colorSelector.default, {
     colorTheme: color_theme || defaultColorTheme,
     onChange: onChartColorChange
-  })), /*#__PURE__*/_react.default.createElement(_divider.default, null), _constants2.SUPPORT_GOAL_LINE_CHART_TYPES.includes(type) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_goalLineSetting.default, {
+  })), /*#__PURE__*/_react.default.createElement(_divider.default, null), _constants.SUPPORT_GOAL_LINE_CHART_TYPES.includes(type) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_goalLineSetting.default, {
     displayGoalLine: display_goal_line,
     goalLabel: goal_label,
     goalValue: goal_value,
     onChange: onStyleChange
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, null)), ![_constants2.CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/_react.default.createElement(_displayValuesSettings.default, {
+  }), /*#__PURE__*/_react.default.createElement(_divider.default, null)), ![_constants.CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/_react.default.createElement(_displayValuesSettings.default, {
     isShowValueKey: "y_axis_show_value",
     isShowValue: y_axis_show_value,
     fontSizeKey: "label_font_size",
     fontSize: label_font_size,
     onChange: onDisplayValueChange
-  }), _constants2.SUPPORT_STACK_VALUE_CHART_TYPES.includes(type) && /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  }), _constants.SUPPORT_STACK_VALUE_CHART_TYPES.includes(type) && /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
     switchClassName: "display-value-settings",
     checked: display_each_block_data,
     disabled: false,

package/dist/settings/pie-settings/style-settings.js

@@ -11,12 +11,12 @@ var _DTableSelect2 = _interopRequireDefault(require("dtable-ui-component/lib/DTa
 var _DTableSwitch2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSwitch"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _constants = require("dtable-ui-component/lib/constants");
+var _dtableUtils = require("dtable-utils");
 var _divider = _interopRequireDefault(require("../widgets/divider"));
 var _mininumSlicePercent = _interopRequireDefault(require("../widgets/mininum-slice-percent"));
 var _fontSettings = require("../widgets/font-settings");
 var _utils = require("../../utils");
-var _constants2 = require("../../constants");
+var _constants = require("../../constants");
 var _intl = _interopRequireDefault(require("../../intl"));
 var _colorRules = require("../../constants/color-rules");
 var _colorSelector = _interopRequireDefault(require("../../components/chart-color-selector/color-selector"));
@@ -27,18 +27,18 @@ const StyleSettings = _ref => {
     tables
   } = _ref;
   const labelPositionOptions = (0, _react.useMemo)(() => {
-    return _constants2.CHART_LABEL_POSITIONS.map(item => {
+    return _constants.CHART_LABEL_POSITIONS.map(item => {
       return {
         value: item,
-        label: _intl.default.get(_constants2.CHART_LABEL_POSITION_SHOW[item])
+        label: _intl.default.get(_constants.CHART_LABEL_POSITION_SHOW[item])
       };
     });
   }, []);
   const labelFormatOptions = (0, _react.useMemo)(() => {
-    return _constants2.CHART_LABEL_FORMATS.map(item => {
+    return _constants.CHART_LABEL_FORMATS.map(item => {
       return {
         value: item,
-        label: _intl.default.get(_constants2.CHART_LABEL_FORMAT_SHOW[item])
+        label: _intl.default.get(_constants.CHART_LABEL_FORMAT_SHOW[item])
       };
     });
   }, []);
@@ -122,7 +122,7 @@ const StyleSettings = _ref => {
   } = config;
   const table = tables.find(table => table._id === table_id);
   const column = (0, _utils.getColumnByKey)(groupby_column_key, table.columns);
-  const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === _constants.CellType.SINGLE_SELECT;
+  const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === _dtableUtils.CellType.SINGLE_SELECT;
   const defaultColorTheme = _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.DEFAULT;
   const selectedLabelOption = labelPositionOptions.find(item => item.value === label_position);
   const selectedLabelFormat = labelFormatOptions.find(item => item.value === label_format) || labelFormatOptions[0];

package/dist/settings/widgets/chart-type/index.js

@@ -42,10 +42,13 @@ const ChartType = _ref => {
     if (type === oldType) return;
 
     // reset these two configs to preventing new type getting into the wrong calculator
-    config.column_groupby_column_key = null;
-    config.column_groupby_multiple_numeric_column = null;
-    const convertedChart = generateChartConfig({
+    const newConfig = {
       ...config,
+      column_groupby_column_key: null,
+      column_groupby_multiple_numeric_column: null
+    };
+    const convertedChart = generateChartConfig({
+      ...newConfig,
       type
     });
     onChange && onChange(convertedChart);
@@ -60,11 +63,8 @@ const ChartType = _ref => {
     className: "sea-chart-parameter-item",
     id: "sea-chart-type-container"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Chart_type')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sea-chart-selected-type-container d-flex align-items-center",
-    style: {
-      backgroundColor: hideTypeToggle ? '#f5f5f5' : '#fff'
-    }
-  }, /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get(_constants.CHART_TYPE_SHOW[type])), !hideTypeToggle && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-chart-selected-type-container d-flex align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get(_constants.CHART_TYPE_SHOW[type])), /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-chart-type-icon-container",
     onClick: openTypesDialog
   }, /*#__PURE__*/_react.default.createElement(_components.Icon, {
@@ -74,7 +74,8 @@ const ChartType = _ref => {
     dataSources: dataSources,
     type: type,
     onToggle: closeTypesDialog,
-    onChange: onTypeChange
+    onChange: onTypeChange,
+    hideTypeToggle: hideTypeToggle
   }));
 };
 var _default = exports.default = ChartType;

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

@@ -0,0 +1,292 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+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 d3 = _interopRequireWildcard(require("d3"));
+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.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30,
+        borderRadius: 10,
+        overflowHeight: 20 // Fillet the bottom corner beyond the axis and then cover it with a mask
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+      this.initDefs();
+    };
+    this.drawChart = () => {
+      const {
+        customRender
+      } = this.props;
+      let {
+        result: data
+      } = this.props;
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      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.draw(data);
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        chartColorTheme,
+        tables,
+        canvasStyle
+      } = this.props;
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config || {};
+      const {
+        previewType
+      } = canvasStyle || {};
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        borderRadius,
+        overflowHeight
+      } = this.chartBoundingClientRect;
+      const {
+        type,
+        y_axis_show_value,
+        label_font_size,
+        table_id,
+        column_groupby_column_key,
+        color_theme,
+        y_axis_max,
+        y_axis_min,
+        y_axis_auto_range,
+        display_each_block_data
+      } = chart.config;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      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;
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme); // use single select column color
+
+      const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1);
+      const x = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fx.bandwidth()]);
+      const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
+
+      // X axis
+      this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+        g.selectAll('.domain').attr('stroke', theme.XAxisColor);
+        g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+      });
+
+      // Y axis
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
+        g.select('.domain').remove();
+        g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
+        g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+      });
+
+      // Rect group
+      this.chart.append('g').attr('mask', "url(#mask-wrapper-".concat(previewType, "-").concat(chart === null || chart === void 0 ? void 0 : chart.id, ")")).selectAll().data(d3.group(data, 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('x', (d, index) => index * x.bandwidth()).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value) + overflowHeight).attr('rx', borderRadius).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).call(g => {
+        g.nodes().forEach(rect => {
+          const parentNode = rect.parentNode;
+          // Add label
+          if (type === _constants.CHART_TYPE.BAR_STACK) {
+            if (y_axis_show_value) {
+              this.addLabelToRectCenter({
+                chartType: _constants.CHART_TYPE.BAR_STACK,
+                container: parentNode,
+                x: Number(rect.getAttribute('x')),
+                y: Number(rect.getAttribute('y')),
+                xWidth: x.bandwidth(),
+                yheight: Number(rect.getAttribute('height')),
+                theme,
+                label_font_size,
+                text: rect.getAttribute('data-value'),
+                overflowHeight
+              });
+            }
+            if (display_each_block_data) {
+              this.addLabelToRectTop({
+                container: parentNode,
+                xWidth: Number(x.bandwidth()),
+                x: Number(rect.getAttribute('x')),
+                y: Number(rect.getAttribute('y')),
+                theme,
+                label_font_size,
+                text: rect.dataset.value
+              });
+            }
+            return;
+          }
+          if (y_axis_show_value) {
+            this.addLabelToRectTop({
+              container: parentNode,
+              xWidth: Number(x.bandwidth()),
+              x: Number(rect.getAttribute('x')),
+              y: Number(rect.getAttribute('y')),
+              theme,
+              label_font_size,
+              text: rect.dataset.value
+            });
+          }
+        });
+      }).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);
+      });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
+      }
+      this.setLegend('group_name', theme, 'top-right', data);
+    };
+    this.showTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const curGroup = event.target.parentNode;
+      const [curGroupName, data] = curGroup.__data__;
+      const newTooltipData = {
+        title: !curGroupName && typeof curGroupName !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : curGroupName,
+        items: data.map(item => {
+          return {
+            color: this.colorMap[item.group_name],
+            name: item.group_name,
+            value: item.value
+          };
+        })
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const curGroup = event.target.parentNode;
+      const allGroup = Array.from(curGroup.parentNode.children);
+      const [curGroupName] = curGroup.__data__;
+      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      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)) {
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart.node() && this.chart.node().remove();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sea-chart-container",
+      ref: ref => this.container = ref
+    }, this.getToolTipContainer(tooltipData, toolTipPosition));
+  }
+}
+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-stack.js

@@ -0,0 +1,332 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+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 d3 = _interopRequireWildcard(require("d3"));
+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 BarStack extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30,
+        borderRadius: 10
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      const {
+        customRender
+      } = this.props;
+      let {
+        result: data
+      } = this.props;
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      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.draw(data);
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        chartColorTheme,
+        tables
+      } = this.props;
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config || {};
+      const {
+        y_axis_show_value,
+        display_each_block_data,
+        table_id,
+        column_groupby_column_key,
+        color_theme,
+        y_axis_max,
+        y_axis_min,
+        y_axis_auto_range
+      } = chart.config;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      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;
+      // use single select column color
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const series = d3.stack().keys(d3.union(data.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;
+      })(d3.index(data, d => d.name, d => d.group_name));
+      const x = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      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]);
+
+      // X axis
+      this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+        g.selectAll('.domain').attr('stroke', theme.XAxisColor);
+        g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+      });
+
+      // Y axis
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
+        g.select('.domain').remove();
+        g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
+        g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+      });
+
+      // Rect group
+      this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).selectAll().data(series).join('g').attr('data-key', d => d.key).selectAll('rect').data(D => {
+        const data = D.map(d => {
+          d.key = D.key;
+          return d;
+        });
+        return data;
+      }).join('rect').attr('x', d => x(d.data[0])).attr('y', d => y(d[1])).attr('height', d => {
+        const height = y(d[0]) - y(d[1]);
+        return (0, _lodashEs.isNaN)(height) ? 0 : height;
+      }).attr('width', x.bandwidth()).attr('fill', d => this.colorMap[d.key] || _constants.CHART_STYLE_COLORS[0]).attr('data-value', d => {
+        const {
+          data,
+          key
+        } = d;
+        const rowData = data[1].get(key);
+        return rowData ? rowData.value : 0;
+      }).attr('data-groupName', d => {
+        const {
+          data
+        } = d;
+        return data[0];
+      }).call(g => {
+        const [topG] = g._parents.slice(-1);
+        Array.from(topG.children).forEach(rect => {
+          // Add label (get the total value of each stack)
+          if (display_each_block_data) {
+            this.addLabelByEachStack(data, topG, rect, x);
+          }
+          // Add mask rect
+          this.addMaskRect(topG, rect, x.bandwidth());
+        });
+        // Add label
+        if (y_axis_show_value) {
+          this.handleLabelToRectCenter(g, x.bandwidth());
+        }
+      }).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);
+      });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
+      }
+      this.setLegend('group_name', theme, 'top-right', data);
+    };
+    this.showTooltip = event => {
+      const offsetX = d3.pointer(event)[0];
+      const offsetY = d3.pointer(event)[1];
+      const curRect = event.currentTarget;
+      const curGroup = curRect.parentNode;
+      const curGroupName = event.currentTarget.getAttribute('data-groupName');
+      const newTooltipData = {
+        title: !curGroupName && typeof curGroupName !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : curGroupName,
+        items: [{
+          color: this.colorMap[curGroup.getAttribute('data-key')],
+          name: curGroup.getAttribute('data-key'),
+          value: curRect.getAttribute('data-value')
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const offsetX = d3.pointer(event)[0];
+      const offsetY = d3.pointer(event)[1];
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const {
+        chart
+      } = this.props;
+      const rectsWrapper = d3.selectAll(".rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+      const allGroup = Array.from(rectsWrapper.node().children);
+      const curGroupName = event.currentTarget.getAttribute('data-groupName');
+      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+    };
+    this.addMaskRect = (topG, rect, xWidth) => {
+      const {
+        borderRadius
+      } = this.chartBoundingClientRect;
+      // Add mask rect
+      d3.select(topG).append('foreignObject').attr('x', rect.getAttribute('x')).attr('y', rect.getAttribute('y')).attr('width', xWidth).attr('height', rect.getAttribute('height')).attr('data-groupName', rect.getAttribute('data-groupName')).attr('data-value', rect.getAttribute('data-value')).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);
+      }).append('xhtml:div').attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: ").concat(borderRadius, "px ").concat(borderRadius, "px 0px 0px"));
+
+      // Remove old rect
+      d3.select(rect).remove();
+    };
+    this.addLabelByEachStack = (data, topG, rect, x) => {
+      const {
+        globalTheme,
+        chart
+      } = this.props;
+      const {
+        label_font_size
+      } = chart.config;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const groupData = d3.group(data, d => d.name);
+      const group_name = rect.getAttribute('data-groupName');
+      const stackSum = groupData.get(group_name).reduce((p, n) => p.value + n.value);
+      this.addLabelToRectTop({
+        container: topG,
+        xWidth: Number(x.bandwidth()),
+        x: Number(rect.getAttribute('x')),
+        y: Number(rect.getAttribute('y')),
+        theme,
+        label_font_size,
+        text: stackSum
+      });
+    };
+    this.handleLabelToRectCenter = (g, xWidth) => {
+      const {
+        globalTheme,
+        chart
+      } = this.props;
+      const {
+        label_font_size
+      } = chart.config;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      g._parents.forEach(group => {
+        Array.from(group.children).forEach(rect => {
+          this.addLabelToRectCenter({
+            container: group,
+            x: Number(rect.getAttribute('x')),
+            y: Number(rect.getAttribute('y')),
+            xWidth,
+            yheight: Number(rect.getAttribute('height')),
+            theme,
+            label_font_size,
+            text: rect.getAttribute('data-value')
+          });
+        });
+      });
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      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)) {
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart.node() && this.chart.node().remove();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sea-chart-container",
+      ref: ref => this.container = ref
+    }, this.getToolTipContainer(tooltipData, toolTipPosition));
+  }
+}
+BarStack.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 = BarStack;

package/dist/view/wrapper/bar.js

@@ -24,7 +24,14 @@ class Bar extends _chartComponent.default {
       this.drawChart();
     };
     this.createChart = () => {
-      this.initChart(this.container);
+      const {
+        chart
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30,
+        borderRadius: 10
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
     this.drawChart = () => {
       const {
@@ -101,22 +108,10 @@ class Bar extends _chartComponent.default {
         toolTipPosition: null
       });
     };
-    this.setActiveAndInActiveState = (state, data) => {
-      const {
-        chart
-      } = this.props;
-      const paths = d3.selectAll(".rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id, " path"));
-      if (state === 'active') {
-        paths.nodes().forEach(path => {
-          d3.select(path).attr('opacity', 1);
-        });
-        return;
-      }
-      paths.nodes().forEach(path => {
-        if (path.id !== data.slugId) {
-          d3.select(path).attr('opacity', 0.3);
-        }
-      });
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const allGroup = [event.currentTarget.parentNode];
+      const curGroupName = event.currentTarget.getAttribute('data-groupName');
+      this.setActiveAndInActiveState(state, allGroup, curGroupName);
     };
     this.draw = data => {
       const {
@@ -144,10 +139,10 @@ class Bar extends _chartComponent.default {
       const tooltipTitle = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
       const {
         width: chartWidth,
-        height: chartHeight
+        height: chartHeight,
+        insertPadding,
+        borderRadius
       } = this.chartBoundingClientRect;
-      const insertPadding = 30;
-      const borderRadius = 10;
       const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
       this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -163,7 +158,7 @@ class Bar extends _chartComponent.default {
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
       });
-      this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).selectAll().data(data).join('path').attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('id', (d, index) => d.slugId).attr('d', d => {
+      this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).selectAll().data(data).join('path').attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('id', (d, index) => d.slugId).attr('d', d => {
         // Do not draw if the range is smaller than the minimum
         if (!y_axis_auto_range && d.value <= y_axis_min) {
           return '';
@@ -180,15 +175,18 @@ class Bar extends _chartComponent.default {
         path.closePath();
         return path.toString();
       }).call(g => {
-        const parentNode = d3.select('.rects-wrapper');
+        const parentNode = d3.select(".rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
         g.nodes().forEach(path => {
           // Add label
           if (y_axis_show_value) {
-            parentNode.append('text').attr('y', Number(path.dataset.y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(path.dataset.value).call(g => {
-              const {
-                width
-              } = g.node().getBoundingClientRect();
-              g.attr('x', Number(path.dataset.x) + Number(path.dataset.width) / 2 - width);
+            this.addLabelToRectTop({
+              container: parentNode.node(),
+              xWidth: Number(path.dataset.width),
+              x: Number(path.dataset.x),
+              y: Number(path.dataset.y),
+              theme,
+              label_font_size,
+              text: path.dataset.value
             });
           }
         });
@@ -196,18 +194,15 @@ class Bar extends _chartComponent.default {
         this.props.toggleRecords(data);
       }).on('mouseover', (event, data) => {
         this.showTooltip(event, data, tooltipTitle);
-        this.setActiveAndInActiveState('inActive', data);
+        this.handleAcitveAndInActiveState('inActive', event);
       }).on('mousemove', event => {
         this.moveTooltip(event);
       }).on('mouseleave', (event, data) => {
         this.hiddenTooltip();
-        this.setActiveAndInActiveState('active', data);
+        this.handleAcitveAndInActiveState('active', event);
       });
-      if (display_goal_line) {
-        this.chart.append('g').attr('class', 'annotation-wrapper').append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', y(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', y(goal_value)).call(g => {
-          const parentNode = d3.select('.annotation-wrapper');
-          parentNode.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', y(goal_value) - 10).attr('fill', '#666').text(goal_label);
-        });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
       }
     };
     this.chart = null;
@@ -225,8 +220,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

@@ -48,14 +48,31 @@ class ChartComponent extends _react.Component {
       const column = this.getColumn(tables, tableId, columnKey);
       return column.name || '';
     };
-    this.initChart = container => {
+    this.initChart = function (container, id) {
+      let initConfig = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       const {
         width,
         height
       } = container.getBoundingClientRect();
-      this.chart = d3.create('svg').attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
-      this.container.appendChild(this.chart.node());
-      this.chartBoundingClientRect = this.chart.node().getBoundingClientRect();
+      _this.chart = d3.create('svg').attr('id', id).attr('class', "svg-wrapper-".concat(id)).attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
+      _this.container.appendChild(_this.chart.node());
+      _this.chartBoundingClientRect = {
+        ...JSON.parse(JSON.stringify(_this.chart.node().getBoundingClientRect())),
+        ...initConfig
+      };
+    };
+    this.initDefs = () => {
+      if (this.container) {
+        // add Mask
+        const {
+          previewType
+        } = this.props.canvasStyle || {};
+        const {
+          width,
+          height
+        } = this.container.getBoundingClientRect();
+        this.chart.append('defs').append('mask').attr('id', "mask-wrapper-".concat(previewType, "-").concat(this.chart.node().id)).append('rect').attr('x', 0).attr('y', 0).attr('width', width).attr('height', height - 30).attr('fill', 'white');
+      }
     };
     this.getChartDisplayLabels = (containerWidth, minItemWidth, charts) => {
       let labels = [];
@@ -198,7 +215,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 +243,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');
@@ -456,13 +472,100 @@ class ChartComponent extends _react.Component {
         }
       };
     };
+    this.formatterLegendName = name => {
+      if (!name && typeof name !== 'number' || name.trim() === 'undefined' || name.trim() === 'null') {
+        return _intl.default.get(_constants.EMPTY_NAME);
+      } else if (name === '_Others') {
+        return _intl.default.get('Others');
+      } else {
+        return _intl.default.get(name) || name;
+      }
+    };
+    this.getOthersLegendItemWidth = (curIndex, allLegendItems, direction) => {
+      let width = 0;
+      let otherItems = [];
+      if (direction === 1) {
+        otherItems = allLegendItems.slice(0, curIndex);
+      }
+      if (direction === -1) {
+        otherItems = allLegendItems.slice(curIndex);
+      }
+      otherItems.forEach(item => {
+        const {
+          width: legendItemWidth
+        } = item.getBoundingClientRect();
+        width = width + legendItemWidth;
+      });
+      return width;
+    };
     // set legend
     this.setLegend = function (legendName) {
+      var _this$chart$node;
       let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.CHART_THEME_COLOR['light'];
-      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top-left';
+      let data = arguments.length > 3 ? arguments[3] : undefined;
       if (!_this.chart) return;
-      const basicLegendConfig = _this.getLegendConfig(theme, legendPosition);
-      _this.chart.legend(legendName, basicLegendConfig);
+      const {
+        width: chartWidth,
+        insertPadding
+      } = _this.chartBoundingClientRect;
+      const legendItemPaddingTop = 8;
+      const legendItemSpacing = 30;
+      const legendRectWidth = 18;
+      const legendRectHeight = 6;
+      const r = 3;
+      let translateX = 0;
+      let legendData = [];
+      let direction = 0; // 1 means left, -1 means right
+      if (legendPosition === 'top-left') {
+        translateX = insertPadding;
+        legendData = d3.group(data, d => d[legendName]);
+        direction = 1;
+      }
+      if (legendPosition === 'top-right') {
+        translateX = chartWidth;
+        legendData = d3.group(data, d => d[legendName]);
+        direction = -1;
+      }
+      _this.chart.append('g').attr('class', "legend-wrapper-".concat((_this$chart$node = _this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id)).attr('transform', "translate(".concat(translateX, ", 0)")).selectAll().data(legendData).join('g').append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('rx', r).attr('fill', _ref => {
+        let [groupName] = _ref;
+        return _this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
+      }).attr('data-text', _ref2 => {
+        let [groupName] = _ref2;
+        return groupName;
+      }).call(g => {
+        var _this$chart$node2;
+        const legendWrapper = d3.selectAll(".legend-wrapper-".concat((_this$chart$node2 = _this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id)).node();
+        const legendItems = Array.from(legendWrapper.children);
+        const legendItemCount = legendItems.length;
+
+        // Add text
+        g.nodes().forEach(rect => {
+          const parentNode = rect.parentNode;
+          let textHeight = 0;
+          let textWidth = 0;
+          d3.select(parentNode).append('text').attr('x', legendRectWidth).attr('width', 30).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text(_this.formatterLegendName(rect.dataset.text)).attr('data-text', rect.dataset.text).call(g => {
+            // set text y position
+            const {
+              height,
+              width
+            } = g.node().getBoundingClientRect();
+            textHeight = height;
+            textWidth = width;
+            g.attr('y', textHeight / 2);
+          });
+        });
+
+        // set g position
+        legendItems.forEach((item, index) => {
+          const otherslegendItemWidth = _this.getOthersLegendItemWidth(index, legendItems, direction);
+          d3.select(item).attr('transform', () => {
+            const gaps = direction === 1 ? index : legendItemCount - index;
+            const translateX = direction * (otherslegendItemWidth + gaps * legendItemSpacing);
+            return "translate(".concat(translateX, ", ").concat(legendItemPaddingTop, ")");
+          });
+        });
+      });
     };
     // theta is pie or ring chart
     this.setLegendForTheta = function (legendName) {
@@ -693,30 +796,82 @@ class ChartComponent extends _react.Component {
       }
       return themeColors || _constants.CHART_THEME_COLOR[_constants.THEME_NAME_MAP.LIGHT];
     };
-    this.setDispalyGoalLine = (goalLabel, goalValue, chartWidth) => {
-      this.chart.annotation().line({
-        // start of the annotation line start
-        // x start is -0.5
-        start: [-0.5, goalValue],
-        // x end is infinite
-        end: [99999, goalValue],
-        style: {
-          stroke: '#aaa',
-          // dash color
-          lineDash: [8, 3] //  dash style
-        },
-        text: {
-          content: goalLabel,
-          offsetX: chartWidth - 70,
-          offsetY: -5,
-          style: {
-            fill: '#666'
-          }
+    this.setDispalyGoalLine = (goal_label, goal_value, insertPadding, yScale) => {
+      var _this$chart$node3;
+      const {
+        width: chartWidth
+      } = this.chartBoundingClientRect;
+      this.chart.append('g').attr('class', "annotation-wrapper-".concat((_this$chart$node3 = this.chart.node()) === null || _this$chart$node3 === void 0 ? void 0 : _this$chart$node3.id)).append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', yScale(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', yScale(goal_value)).call(g => {
+        var _this$chart$node4;
+        const parentNode = d3.select(".annotation-wrapper-".concat((_this$chart$node4 = this.chart.node()) === null || _this$chart$node4 === void 0 ? void 0 : _this$chart$node4.id));
+        parentNode.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
+      });
+    };
+    this.addLabelToRectTop = _ref3 => {
+      let {
+        container,
+        x,
+        y,
+        xWidth,
+        theme,
+        label_font_size,
+        text
+      } = _ref3;
+      d3.select(container).append('text').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+        const {
+          width
+        } = g.node().getBoundingClientRect();
+        g.attr('x', Number(x) + Number(xWidth) / 2 - width / 2);
+      });
+    };
+    this.addLabelToRectCenter = _ref4 => {
+      let {
+        chartType,
+        container,
+        x,
+        y,
+        xWidth,
+        yheight,
+        overflowHeight,
+        theme,
+        label_font_size,
+        text
+      } = _ref4;
+      d3.select(container).append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+        const {
+          width,
+          height
+        } = g.node().getBoundingClientRect();
+        const translateX = Number(x) + xWidth / 2 - width / 2;
+        let translateY = Number(y) + Number(yheight / 2) + height / 2;
+        if (chartType === _constants.CHART_TYPE.BAR_STACK) {
+          translateY = translateY - overflowHeight / 2;
         }
+        g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
       });
     };
+    this.setActiveAndInActiveState = (state, allGroup, curGroupName) => {
+      if (state === 'active') {
+        allGroup.forEach(g => {
+          const rects = Array.from(g.children);
+          rects.forEach(item => {
+            d3.select(item).attr('opacity', 1);
+          });
+        });
+      }
+      if (state === 'inActive') {
+        allGroup.forEach(g => {
+          const rects = Array.from(g.children);
+          rects.forEach(item => {
+            if (item.getAttribute('data-groupName') !== curGroupName) {
+              d3.select(item).attr('opacity', 0.3);
+            }
+          });
+        });
+      }
+    };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
-    this.chartBoundingClientRect = null;
+    this.chartBoundingClientRect = {};
   }
   componentDidUpdate(prevProps) {
     if (prevProps.globalTheme !== this.props.globalTheme) {

package/dist/view/wrapper/index.js

@@ -11,6 +11,8 @@ 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 _barStack = _interopRequireDefault(require("./bar-stack"));
 var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
@@ -94,6 +96,25 @@ 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.BAR_STACK:
+        {
+          const {
+            config
+          } = chart;
+          const {
+            column_groupby_multiple_numeric_column
+          } = config;
+          const BarGroupComponent = column_groupby_multiple_numeric_column ? _barStack.default : _barGroup.default;
+          return /*#__PURE__*/_react.default.createElement(BarGroupComponent, 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.7",
+  "version": "2.0.8",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",