sea-chart 2.0.9 → 2.0.10

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

@@ -69,7 +69,8 @@ const TypesDialog = _ref => {
   }, [onChange, selectedType, onToggle]);
   const handleFilterTypes = (0, _react.useCallback)(() => {
     if (hideTypeToggle) {
-      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram'].includes(item.name));
+      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart'].includes(item.name));
+      newChartTypes[1].children = newChartTypes[1].children.slice(0, 2);
       return newChartTypes;
     }
     return _constants.CHART_TYPES;

package/dist/constants/index.js

@@ -306,7 +306,7 @@ const BAR_MAP_TO_HORIZONTAL_MAP = exports.BAR_MAP_TO_HORIZONTAL_MAP = {
   y_axis_label_color: 'horizontal_axis_label_color',
   y_axis_auto_range: 'horizontal_axis_auto_range',
   y_axis_max: 'horizontal_axis_max',
-  y_axis_mix: 'horizontal_axis_min'
+  y_axis_min: 'horizontal_axis_min'
 };
 const DEFAULT_NUMBER_FORMAT_OBJECT = exports.DEFAULT_NUMBER_FORMAT_OBJECT = {
   format: _dtableUtils.DEFAULT_NUMBER_FORMAT

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

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var d3 = _interopRequireWildcard(require("d3"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 var _constants = require("../../constants");
 var _chartUtils = require("../../utils/chart-utils");
@@ -22,13 +23,17 @@ class BarCompare extends _chartComponent.default {
       const {
         chart
       } = this.props;
+      const {
+        y_axis_show_label,
+        x_axis_show_label
+      } = chart.config;
       const initConfig = {
         insertPadding: 30,
-        borderRadius: 10,
-        overflowHeight: 20 // Fillet the bottom corner beyond the axis and then cover it with a mask
+        borderRadius: 0.2,
+        marginLeft: y_axis_show_label ? 20 : 0,
+        marginBottom: x_axis_show_label ? 20 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
-      this.initDefs();
     };
     this.drawChart = () => {
       let {
@@ -43,13 +48,9 @@ class BarCompare extends _chartComponent.default {
       const {
         chart,
         globalTheme,
-        chartColorTheme,
-        canvasStyle
+        chartColorTheme
       } = this.props;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
-      const {
-        previewType
-      } = canvasStyle || {};
       const {
         display_increase,
         y_axis_auto_range,
@@ -59,9 +60,7 @@ class BarCompare extends _chartComponent.default {
       const {
         width: chartWidth,
         height: chartHeight,
-        insertPadding,
-        borderRadius,
-        overflowHeight
+        insertPadding
       } = this.chartBoundingClientRect;
       data = data.sort((a, b) => d3.ascending(a.name, b.name));
       const fx = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
@@ -87,7 +86,7 @@ class BarCompare extends _chartComponent.default {
       });
 
       // Rect group
-      this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).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 => {
+      this.chart.append('g').attr('class', "rects-wrapper-".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;
@@ -97,7 +96,17 @@ class BarCompare extends _chartComponent.default {
       .selectAll().data(_ref2 => {
         let [a, 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) === 0 ? 0 : y(0) - y(d.value) + overflowHeight).attr('rx', borderRadius).attr('fill', d => color(d.group_name)).attr('data-value', d => d.value).attr('data-groupName', d => d.name).on('click', (event, data) => {
+      }).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) === 0 ? 0 : y(0) - y(d.value)).attr('fill', d => color(d.group_name)).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).call(g => {
+        g.nodes().forEach(rect => {
+          const parentNode = rect.parentNode;
+          // add rect borderRadius
+          this.addClipPath({
+            rect,
+            parentNode,
+            rectId: rect.getAttribute('data-slugid')
+          });
+        });
+      }).on('click', (event, data) => {
         this.props.toggleRecords(data);
       }).on('mouseover', event => {
         this.showTooltip(event, color);
@@ -113,7 +122,12 @@ class BarCompare extends _chartComponent.default {
         this.drawIncreaseLine(increaseData);
       }
       this.setColorMap(data, chartColorTheme);
-      this.setLegend('group_name', theme, 'top-right', data);
+      this.setLegend({
+        legendName: 'group_name',
+        theme,
+        legendPosition: 'top-right',
+        data
+      });
     };
     this.showTooltip = (event, colorScale, isCircle) => {
       const {
@@ -216,7 +230,6 @@ class BarCompare extends _chartComponent.default {
       wrapper.append('path').attr('fill', 'none').attr('stroke', increase_line_color || '#fbd44a').attr('stroke-width', 2).attr('d', () => line(increaseData));
 
       // circle
-      console.log('wrapper', wrapper);
       circleData.forEach(item => {
         wrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', increase_line_color || '#fbd44a').attr('data-text', item.value).attr('data-name', item.name).call(g => {
           // circle label
@@ -297,13 +310,19 @@ class BarCompare extends _chartComponent.default {
     this.chart.node() && this.chart.node().remove();
   }
   render() {
+    const {
+      chart
+    } = this.props;
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "sea-chart-container",
-      ref: ref => this.container = ref
+      ref: ref => this.container = ref,
+      className: (0, _classnames.default)('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      })
     }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,

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

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _lodashEs = require("lodash-es");
 var d3 = _interopRequireWildcard(require("d3"));
 var _slugid = _interopRequireDefault(require("slugid"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _intl = _interopRequireDefault(require("../../intl"));
 var _chartUtils = require("../../utils/chart-utils");
 var _constants = require("../../constants");
@@ -28,9 +29,15 @@ class BarCustom extends _chartComponent.default {
       const {
         chart
       } = this.props;
+      const {
+        y_axis_show_label,
+        x_axis_show_label
+      } = chart.config;
       const initConfig = {
         insertPadding: 30,
-        borderRadius: 5
+        borderRadius: 0.2,
+        marginLeft: y_axis_show_label ? 20 : 0,
+        marginBottom: x_axis_show_label ? 20 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
@@ -130,8 +137,7 @@ class BarCustom extends _chartComponent.default {
       const {
         width: chartWidth,
         height: chartHeight,
-        insertPadding,
-        borderRadius
+        insertPadding
       } = this.chartBoundingClientRect;
       const organizedData = this.organizeData(data);
       const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(_chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
@@ -164,6 +170,11 @@ class BarCustom extends _chartComponent.default {
           name
         } = d;
         return "translate(".concat(fx(name), ",0)");
+      }).attr('data-transform', d => {
+        const {
+          name
+        } = d;
+        return fx(name);
       }).selectAll().data(d => d.stacks).join('g').attr('class', 'stackGroup').attr('data-slugid', d => d.slugid).selectAll().data(d => d.series).join('rect').attr('class', 'stack').attr('data-isTop', (_, index, arr) => {
         return index === arr.length - 1;
       }).attr('x', d => x(d.stackKey)).attr('y', d => y(d[0][1])).attr('width', x.bandwidth()).attr('height', d => {
@@ -173,11 +184,10 @@ class BarCustom extends _chartComponent.default {
         // add rect borderRadius
         Array.from(g._parents).forEach(group => {
           const topRect = Array.from(group.children).find(rect => rect.getAttribute('data-isTop') === 'true');
-          // use clipPath
-          const clipRect = d3.select(topRect.cloneNode()).attr('rx', borderRadius).attr('height', Number(topRect.getAttribute('height')) + borderRadius);
-          const clipPath = d3.select(group).append('clipPath').attr('id', group.getAttribute('data-slugid'));
-          clipPath.node().appendChild(clipRect.node());
-          d3.select(topRect).attr('clip-path', "url(#".concat(group.getAttribute('data-slugid'), ")"));
+          // Add mask rect
+          if (topRect) {
+            this.addMaskRect(group, topRect, x.bandwidth(), color);
+          }
         });
         if (display_each_block_data) {
           this.handleLabelToRectCenter(g, x.bandwidth());
@@ -196,7 +206,13 @@ class BarCustom extends _chartComponent.default {
       if (display_goal_line && goal_label && goal_value) {
         this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
       }
-      this.setLegend('group_name', theme, 'top-right', data, color);
+      this.setLegend({
+        legendName: 'group_name',
+        theme,
+        legendPosition: 'top-right',
+        data,
+        colorScale: color
+      });
     };
     this.handleLabelToRectCenter = (g, xWidth) => {
       const {
@@ -207,20 +223,41 @@ class BarCustom extends _chartComponent.default {
         label_font_size
       } = chart.config;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
-      const rects = g.nodes();
-      rects.forEach(rect => {
-        this.addLabelToRectCenter({
-          container: rect.parentNode,
-          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')
+      Array.from(g._parents).forEach(group => {
+        Array.from(group.children).forEach(rect => {
+          this.addLabelToRectCenter({
+            container: rect.parentNode,
+            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.addMaskRect = (topG, rect, xWidth, colorScale) => {
+      const {
+        borderRadius
+      } = this.chartBoundingClientRect;
+      // Add mask rect
+      d3.select(topG).append('foreignObject').attr('class', 'stack-wrapper').attr('x', rect.getAttribute('x')).attr('data-x', topG.parentNode.getAttribute('data-transform')).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')).attr('data-title', rect.getAttribute('data-title')).attr('data-rectId', rect.getAttribute('data-rectId')).on('click', (event, data) => {
+        this.props.toggleRecords(data);
+      }).on('mouseover', event => {
+        this.showTooltip(event, colorScale, true);
+        this.handleStacksAcitveAndInActiveState('inActive', event);
+      }).on('mousemove', event => {
+        this.moveTooltip(event, true);
+      }).on('mouseleave', (event, data) => {
+        this.hiddenTooltip();
+        this.handleStacksAcitveAndInActiveState('active', event);
+      }).append('xhtml:div').attr('class', 'stack').attr('data-rectId', rect.getAttribute('data-rectId')).attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: ").concat(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "px 0px 0px"));
+
+      // Remove old rect
+      d3.select(rect).remove();
+    };
     this.handleStacksAcitveAndInActiveState = (state, event) => {
       const rectsWrapper = event.currentTarget.parentNode.parentNode.parentNode;
       const allGroup = Array.from(rectsWrapper.children);
@@ -228,8 +265,10 @@ class BarCustom extends _chartComponent.default {
         allGroup.forEach(group => {
           Array.from(group.children).forEach(rectGroup => {
             Array.from(rectGroup.children).forEach(rect => {
-              if (rect.getAttribute('class') === 'stack') {
-                d3.select(rect).attr('opacity', 1);
+              const isDiv = rect.getAttribute('class') === 'stack-wrapper';
+              const curRect = isDiv ? rect.children[0] : rect;
+              if (curRect.getAttribute('class') === 'stack') {
+                isDiv ? curRect.style.opacity = 1 : d3.select(curRect).attr('opacity', 1);
               }
             });
           });
@@ -240,19 +279,27 @@ class BarCustom extends _chartComponent.default {
         allGroup.forEach(group => {
           Array.from(group.children).forEach(rectGroup => {
             Array.from(rectGroup.children).forEach(rect => {
-              if (rect.getAttribute('class') === 'stack' && rect.getAttribute('data-rectId') !== curRectId) {
-                d3.select(rect).attr('opacity', 0.3);
+              const isDiv = rect.getAttribute('class') === 'stack-wrapper';
+              const curRect = isDiv ? rect.children[0] : rect;
+              if (curRect.getAttribute('class') === 'stack' && curRect.getAttribute('data-rectId') !== curRectId) {
+                isDiv ? curRect.style.opacity = 0.3 : d3.select(curRect).attr('opacity', 0.3);
               }
             });
           });
         });
       }
     };
-    this.showTooltip = (event, colorScale) => {
-      const {
+    this.showTooltip = (event, colorScale, isDiv) => {
+      let {
         offsetX,
         offsetY
       } = event;
+      if (isDiv) {
+        const initX = Number(event.currentTarget.getAttribute('data-x'));
+        const initY = Number(event.currentTarget.getAttribute('y'));
+        offsetX = offsetX + initX;
+        offsetY = offsetY + initY;
+      }
       const title = event.currentTarget.getAttribute('data-title');
       const name = event.currentTarget.getAttribute('data-groupName');
       const value = event.currentTarget.getAttribute('data-value');
@@ -274,11 +321,17 @@ class BarCustom extends _chartComponent.default {
         }
       });
     };
-    this.moveTooltip = event => {
-      const {
+    this.moveTooltip = (event, isDiv) => {
+      let {
         offsetX,
         offsetY
       } = event;
+      if (isDiv) {
+        const initX = Number(event.currentTarget.getAttribute('data-x'));
+        const initY = Number(event.currentTarget.getAttribute('y'));
+        offsetX = offsetX + initX;
+        offsetY = offsetY + initY;
+      }
       this.setState({
         toolTipPosition: {
           offsetX,
@@ -315,13 +368,19 @@ class BarCustom extends _chartComponent.default {
     window.removeEventListener('resize', this.handleResize);
   }
   render() {
+    const {
+      chart
+    } = this.props;
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "sea-chart-container",
-      ref: ref => this.container = ref
+      ref: ref => this.container = ref,
+      className: (0, _classnames.default)('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      })
     }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,

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

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _dtableUtils = require("dtable-utils");
 var _lodashEs = require("lodash-es");
 var d3 = _interopRequireWildcard(require("d3"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _intl = _interopRequireDefault(require("../../intl"));
 var _columnUtils = require("../../utils/column-utils");
 var _constants = require("../../constants");
@@ -30,13 +31,21 @@ class BarGroup extends _chartComponent.default {
       const {
         chart
       } = this.props;
+      const {
+        y_axis_show_label,
+        x_axis_show_label,
+        y_axis_show_value,
+        display_each_block_data,
+        type
+      } = chart.config;
       const initConfig = {
         insertPadding: 30,
-        borderRadius: 10,
-        overflowHeight: 20 // Fillet the bottom corner beyond the axis and then cover it with a mask
+        borderRadius: 0.2,
+        marginLeft: y_axis_show_label ? 20 : 0,
+        marginBottom: x_axis_show_label ? 20 : 0,
+        marginTop: y_axis_show_value || type === _constants.CHART_TYPE.BAR_STACK && display_each_block_data ? 15 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
-      this.initDefs();
     };
     this.drawChart = () => {
       const {
@@ -66,23 +75,18 @@ class BarGroup extends _chartComponent.default {
         chart,
         globalTheme,
         chartColorTheme,
-        tables,
-        canvasStyle
+        tables
       } = this.props;
       const {
         display_goal_line,
         goal_value,
         goal_label
       } = chart.style_config || {};
-      const {
-        previewType
-      } = canvasStyle || {};
       const {
         width: chartWidth,
         height: chartHeight,
         insertPadding,
-        borderRadius,
-        overflowHeight
+        marginTop
       } = this.chartBoundingClientRect;
       const {
         type,
@@ -103,7 +107,7 @@ class BarGroup extends _chartComponent.default {
 
       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]);
+      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 + marginTop]);
 
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -123,7 +127,7 @@ class BarGroup extends _chartComponent.default {
       });
 
       // 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 => {
+      this.chart.append('g').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;
@@ -133,9 +137,16 @@ class BarGroup extends _chartComponent.default {
       .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 => {
+      }).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)).attr('fill', d => this.colorMap[d.group_name] || _constants.CHART_STYLE_COLORS[0]).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).call(g => {
         g.nodes().forEach(rect => {
           const parentNode = rect.parentNode;
+          // add rect borderRadius
+          this.addClipPath({
+            rect,
+            parentNode,
+            rectId: rect.getAttribute('data-slugid')
+          });
+
           // Add label
           if (type === _constants.CHART_TYPE.BAR_STACK) {
             if (y_axis_show_value) {
@@ -148,8 +159,7 @@ class BarGroup extends _chartComponent.default {
                 yheight: Number(rect.getAttribute('height')),
                 theme,
                 label_font_size,
-                text: rect.getAttribute('data-value'),
-                overflowHeight
+                text: rect.getAttribute('data-value')
               });
             }
             if (display_each_block_data) {
@@ -191,7 +201,13 @@ class BarGroup extends _chartComponent.default {
       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.setLegend({
+        legendName: 'group_name',
+        theme,
+        legendPosition: 'top-right',
+        data,
+        groupColumn: this.props.columnGroupbyColumn
+      });
     };
     this.showTooltip = event => {
       const {
@@ -267,13 +283,19 @@ class BarGroup extends _chartComponent.default {
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {
+    const {
+      chart
+    } = this.props;
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "sea-chart-container",
-      ref: ref => this.container = ref
+      ref: ref => this.container = ref,
+      className: (0, _classnames.default)('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      })
     }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,

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

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _dtableUtils = require("dtable-utils");
 var _lodashEs = require("lodash-es");
 var d3 = _interopRequireWildcard(require("d3"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _intl = _interopRequireDefault(require("../../intl"));
 var _columnUtils = require("../../utils/column-utils");
 var _constants = require("../../constants");
@@ -30,9 +31,17 @@ class BarStack extends _chartComponent.default {
       const {
         chart
       } = this.props;
+      const {
+        y_axis_show_label,
+        x_axis_show_label,
+        display_each_block_data
+      } = chart.config;
       const initConfig = {
         insertPadding: 30,
-        borderRadius: 10
+        borderRadius: 0.2,
+        marginLeft: y_axis_show_label ? 20 : 0,
+        marginBottom: x_axis_show_label ? 20 : 0,
+        marginTop: display_each_block_data ? 15 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
@@ -89,7 +98,8 @@ class BarStack extends _chartComponent.default {
       const {
         width: chartWidth,
         height: chartHeight,
-        insertPadding
+        insertPadding,
+        marginTop
       } = this.chartBoundingClientRect;
       const series = d3.stack().keys(d3.union(data.map(d => d.group_name))).value((_ref, key) => {
         var _group$get;
@@ -98,7 +108,7 @@ class BarStack extends _chartComponent.default {
       })(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]);
+      const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -168,7 +178,13 @@ class BarStack extends _chartComponent.default {
       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.setLegend({
+        legendName: 'group_name',
+        theme,
+        legendPosition: 'top-right',
+        data,
+        groupColumn: this.props.columnGroupbyColumn
+      });
     };
     this.showTooltip = event => {
       const offsetX = d3.pointer(event)[0];
@@ -229,7 +245,7 @@ class BarStack extends _chartComponent.default {
       }).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"));
+      }).append('xhtml:div').attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: ").concat(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "px 0px 0px"));
 
       // Remove old rect
       d3.select(rect).remove();
@@ -245,7 +261,8 @@ class BarStack extends _chartComponent.default {
       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);
+      let stackSum = 0;
+      groupData.get(group_name).forEach(n => stackSum += n.value);
       this.addLabelToRectTop({
         container: topG,
         xWidth: Number(x.bandwidth()),
@@ -304,13 +321,19 @@ class BarStack extends _chartComponent.default {
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {
+    const {
+      chart
+    } = this.props;
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "sea-chart-container",
-      ref: ref => this.container = ref
+      ref: ref => this.container = ref,
+      className: (0, _classnames.default)('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      })
     }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,