sea-chart 2.0.9 → 2.0.11

package/dist/api/index.js

@@ -59,7 +59,7 @@ class SeaChartAPI {
         dtableUuid,
         accessToken
       } = _this;
-      const url = dtableDB + 'api/v1/query/' + dtableUuid;
+      const url = dtableDB + '/api/v2/dtables/' + dtableUuid + '/sql/';
       const data = {
         sql,
         convert_keys,

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/utils/sql/chart-data-sql.js

@@ -324,6 +324,7 @@ class ChartDataSQL {
       const {
         x_axis_column_key,
         x_axis_geolocation_granularity,
+        x_axis_date_granularity,
         y_axis_summary_type,
         y_axis_summary_column_key,
         y_axis_summary_method,
@@ -339,7 +340,7 @@ class ChartDataSQL {
       }
       this._update_filter_sql(true, groupby_column);
       const groupby_column_name = this._chart_column_name_to_sql(groupby_column, {
-        'date_granularity': 'day',
+        'date_granularity': x_axis_date_granularity,
         'geolocation_granularity': x_axis_geolocation_granularity
       });
       let summary_column_name = this._summary_column_2_sql('COUNT', groupby_column);

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,31 +48,28 @@ 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,
+        y_axis_auto_range = true,
         y_axis_min,
         y_axis_max
       } = chart.config;
       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);
+      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]);
+
+      // 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 => this.drawYaxis(g, theme));
+      const fx = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
       const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(_chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
       const x = d3.scaleBand().domain(d3.group(data, d => d.group_name).keys()).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 => {
@@ -77,17 +79,8 @@ class BarCompare extends _chartComponent.default {
         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)).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 +90,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 +116,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 +224,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 +304,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,17 +137,19 @@ 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');
-      const fx = d3.scaleBand().domain(new Set(organizedData.map(d => d.name))).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
-      const x = d3.scaleBand().domain(new Set(data.map(d => d.y_axis_type))).range([0, fx.bandwidth()]);
       const allSeries = this.getAllSeries(organizedData);
       const niceEnd = d3.nice(0, d3.max(allSeries, d => d[1]), 5)[1];
       const y = d3.scaleLinear().domain([0, niceEnd]).range([chartHeight - insertPadding, insertPadding]);
 
+      // 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 => this.drawYaxis(g, theme));
+      const fx = d3.scaleBand().domain(new Set(organizedData.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(new Set(data.map(d => d.y_axis_type))).range([0, fx.bandwidth()]);
+
       // 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);
@@ -149,35 +158,28 @@ class BarCustom extends _chartComponent.default {
         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(organizedData).join('g').attr('transform', d => {
         const {
           name
         } = d;
         return "translate(".concat(fx(name), ",0)");
-      }).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 => {
+      }).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('x', d => x(d.stackKey)).attr('y', d => y(d[0][1])).attr('width', x.bandwidth()).attr('height', d => {
         const height = y(d[0][0]) - y(d[0][1]);
         return isNaN(height) ? 0 : height;
       }).attr('fill', d => color(d.key)).attr('data-value', d => d.stackData.value).attr('data-rectId', d => d.stackData.slugId).attr('data-groupName', d => d.stackData.group_name).attr('data-title', d => d.stackData.name).call(g => {
         // 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'), ")"));
+          const topRect = Array.from(group.children).reverse().find(rect => Number(rect.getAttribute('height')) !== 0);
+          // Add mask rect
+          if (topRect) {
+            this.addMaskRect(group, topRect, x.bandwidth(), color);
+          }
         });
         if (display_each_block_data) {
           this.handleLabelToRectCenter(g, x.bandwidth());
@@ -196,7 +198,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 +215,43 @@ 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 => {
+          // The height is 0, and the label is not displayed.
+          if (Number(rect.getAttribute('height')) === 0) return;
+          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 +259,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 +273,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 +315,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 +362,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,
@@ -101,9 +105,12 @@ class BarGroup extends _chartComponent.default {
       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 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]);
+
+      // 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 => this.drawYaxis(g, theme));
+      const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, 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 => {
@@ -113,17 +120,8 @@ class BarGroup extends _chartComponent.default {
         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 => {
+      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 +131,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 +153,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 +195,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 +277,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,