sea-chart 2.0.21 → 2.0.22

package/dist/assets/css/sea-chart-d3-tooltip.css

@@ -3,13 +3,14 @@
   transform: translate(-9999px, -9999px);
   transition: transform 0.2s;
   background-color: rgb(255, 255, 255);
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 1px;
+  box-shadow: rgba(196, 175, 175, 0.1) 0px 0px 1px 1px;
   border-radius: 3px;
   color: rgb(89, 89, 89);
   font-size: 12px;
   padding: 8px 16px;
   min-width: 178px;
   border: 1px solid rgb(226, 226, 226);
+  pointer-events: none;
 }
 
 .sea-chart-d3-tooltip-title {

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

@@ -69,7 +69,7 @@ const TypesDialog = _ref => {
   }, [onChange, selectedType, onToggle]);
   const handleFilterTypes = (0, _react.useCallback)(() => {
     if (hideTypeToggle) {
-      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart'].includes(item.name));
+      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart', 'Combination_chart'].includes(item.name));
       return newChartTypes;
     }
     return _constants.CHART_TYPES;

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

@@ -96,12 +96,12 @@ class AreaGroup extends _chartComponent.default {
       // Y axis
       const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([chartHeight - insertPadding, insertPadding + marginTop]);
-      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
 
       // X axis
       const xDomain = data.map(item => item.name);
       const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
-      this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         this.ticksAddName(g);
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -109,7 +109,7 @@ class AreaGroup extends _chartComponent.default {
         g.selectAll('text').attr('fill', theme.textColor);
         this.checkTickOverlap(g);
       });
-      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
       const circleDatas = [];
       const groupData = d3.groups(data, d => d === null || d === void 0 ? void 0 : d.group_name);
 
@@ -129,7 +129,7 @@ class AreaGroup extends _chartComponent.default {
           circleData[index]['value'] = d.value;
           return yVal;
         }).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
-        rectsWrapper.append('path').attr('fill', 'none').attr('class', 'line').attr('stroke', this.colorMap[group_name]).attr('stroke-width', 2).attr('d', () => line(data));
+        contentWrapper.append('path').attr('opacity', 1).attr('fill', 'none').attr('class', 'line').attr('stroke', this.colorMap[group_name]).attr('stroke-width', 2).attr('d', () => line(data));
         circleDatas.push({
           group_name,
           circleData
@@ -143,7 +143,7 @@ class AreaGroup extends _chartComponent.default {
           const xVal = x(d.name) + x.bandwidth() / 2;
           return xVal;
         }).y0(y(0)).y1(d => y(d.value)).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
-        rectsWrapper.append('path').attr('class', 'area').attr('fill', this.colorMap[group_name]).attr('d', () => area(data)).attr('opacity', '0.3');
+        contentWrapper.append('path').attr('class', 'area').attr('fill', this.colorMap[group_name]).attr('d', () => area(data)).attr('opacity', '0.3');
       });
 
       // circle
@@ -154,11 +154,11 @@ class AreaGroup extends _chartComponent.default {
         } = _ref3;
         circleData.forEach(item => {
           if (Object.keys(item).length !== 0) {
-            rectsWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', this.colorMap[group_name]).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-text', item.value).attr('data-name', item.name).call(g => {
+            contentWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', this.colorMap[group_name]).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-text', item.value).attr('data-name', item.name).call(g => {
               // circle label
               if (y_axis_show_value) {
                 const curCircleEl = g.node();
-                rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(_utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
+                contentWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(_utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
                   const {
                     width
                   } = g.node().getBoundingClientRect();
@@ -178,7 +178,7 @@ class AreaGroup extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleDatas,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'over',
           tooltipTitle
         });
@@ -187,7 +187,7 @@ class AreaGroup extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleDatas,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'move',
           tooltipTitle
         });
@@ -196,7 +196,7 @@ class AreaGroup extends _chartComponent.default {
           event,
           state: 'zoomOut',
           circleDatas,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'leave',
           tooltipTitle
         });
@@ -214,12 +214,12 @@ class AreaGroup extends _chartComponent.default {
       });
     };
     this.updateCircleAndTickStyle = _ref4 => {
-      var _rectsWrapper$selectA;
+      var _contentWrapper$selec;
       let {
         event,
         state,
         circleDatas,
-        rectsWrapper,
+        contentWrapper,
         eventState,
         tooltipTitle
       } = _ref4;
@@ -239,7 +239,7 @@ class AreaGroup extends _chartComponent.default {
       });
       const minDistanceItem = this.getMinDistanceItem(offsetX, circleData);
       const tooltipItems = circleData.filter(item => item.name && item.name === minDistanceItem.name);
-      const circleList = (_rectsWrapper$selectA = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA === void 0 ? void 0 : _rectsWrapper$selectA.nodes();
+      const circleList = (_contentWrapper$selec = contentWrapper.selectAll('circle')) === null || _contentWrapper$selec === void 0 ? void 0 : _contentWrapper$selec.nodes();
       if (state === 'zoomIn') {
         // circle
         circleList.forEach(circle => {
@@ -252,12 +252,12 @@ class AreaGroup extends _chartComponent.default {
             d3.select(circle).attr('r', 3);
           }
         });
-        rectsWrapper.selectAll('.area').transition().duration(200).attr('opacity', 0.1);
-        rectsWrapper.selectAll('.line').transition().duration(200).attr('opacity', 0.3);
+        contentWrapper.selectAll('.area').transition().duration(this.areaTransitionDuration).attr('opacity', 0.1);
+        contentWrapper.selectAll('.line').transition().duration(this.areaTransitionDuration).attr('opacity', 0.3);
         // line
         const theme = _constants.CHART_THEME_COLOR[globalTheme];
-        this.clearOldVerticalAnnotation(rectsWrapper);
-        this.addVerticalAnnotation(rectsWrapper, minDistanceItem, theme);
+        this.clearOldVerticalAnnotation(contentWrapper);
+        this.addVerticalAnnotation(contentWrapper, minDistanceItem, theme);
       } else {
         // circle
         circleList.forEach(circle => {
@@ -268,10 +268,10 @@ class AreaGroup extends _chartComponent.default {
           }
           d3.select(circle).attr('r', 3);
         });
-        rectsWrapper.selectAll('.area').transition().duration(200).attr('opacity', 0.3);
-        rectsWrapper.selectAll('.line').transition().duration(200).attr('opacity', 1);
+        contentWrapper.selectAll('.area').transition().duration(this.areaTransitionDuration).attr('opacity', 0.3);
+        contentWrapper.selectAll('.line').transition().duration(this.areaTransitionDuration).attr('opacity', 1);
         // line
-        this.clearOldVerticalAnnotation(rectsWrapper);
+        this.clearOldVerticalAnnotation(contentWrapper);
       }
 
       // tooltip

package/dist/view/wrapper/area.js

@@ -89,12 +89,12 @@ class Area extends _chartComponent.default {
       // Y axis
       const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([chartHeight - insertPadding, insertPadding + marginTop]);
-      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
 
       // X axis
       const xDomain = data.map(item => item.name);
       const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
-      this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         this.ticksAddName(g);
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -102,7 +102,7 @@ class Area extends _chartComponent.default {
         g.selectAll('text').attr('fill', theme.textColor);
         this.checkTickOverlap(g);
       });
-      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
 
       // Line
       const circleData = xDomain.map(() => ({}));
@@ -117,22 +117,22 @@ class Area extends _chartComponent.default {
         circleData[index]['value'] = d.value;
         return yVal;
       }).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
-      this.Line = rectsWrapper.append('path').attr('fill', 'none').attr('stroke', this.getAreaColor()).attr('stroke-width', 2).attr('d', () => line(data));
+      this.Line = contentWrapper.append('path').attr('opacity', 1).attr('fill', 'none').attr('stroke', this.getAreaColor()).attr('stroke-width', 2).attr('d', () => line(data));
 
       // Area
       const area = d3.area().x(d => {
         const xVal = x(d.name) + x.bandwidth() / 2;
         return xVal;
       }).y0(y(0)).y1(d => y(d.value)).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
-      this.Area = rectsWrapper.append('path').attr('fill', this.getAreaColor()).attr('d', () => area(data)).attr('opacity', '0.3');
+      this.Area = contentWrapper.append('path').attr('fill', this.getAreaColor()).attr('d', () => area(data)).attr('opacity', '0.3');
 
       // circle
       circleData.forEach(item => {
-        rectsWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', this.getAreaColor()).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-text', item.value).attr('data-name', item.name).call(g => {
+        contentWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', this.getAreaColor()).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-text', item.value).attr('data-name', item.name).call(g => {
           // circle label
           if (y_axis_show_value) {
             const curCircleEl = g.node();
-            rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(_utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
+            contentWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(_utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
               const {
                 width
               } = g.node().getBoundingClientRect();
@@ -150,7 +150,7 @@ class Area extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleData,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'over',
           tooltipTitle
         });
@@ -159,7 +159,7 @@ class Area extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleData,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'move',
           tooltipTitle
         });
@@ -168,7 +168,7 @@ class Area extends _chartComponent.default {
           event,
           state: 'zoomOut',
           circleData,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'leave',
           tooltipTitle
         });
@@ -178,12 +178,12 @@ class Area extends _chartComponent.default {
       }
     };
     this.updateCircleAndTickStyle = _ref => {
-      var _rectsWrapper$selectA;
+      var _contentWrapper$selec;
       let {
         event,
         state,
         circleData,
-        rectsWrapper,
+        contentWrapper,
         eventState,
         tooltipTitle
       } = _ref;
@@ -198,7 +198,7 @@ class Area extends _chartComponent.default {
         offsetX
       } = event;
       const minDistanceItem = this.getMinDistanceItem(offsetX, circleData);
-      const circleList = (_rectsWrapper$selectA = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA === void 0 ? void 0 : _rectsWrapper$selectA.nodes();
+      const circleList = (_contentWrapper$selec = contentWrapper.selectAll('circle')) === null || _contentWrapper$selec === void 0 ? void 0 : _contentWrapper$selec.nodes();
       if (state === 'zoomIn') {
         // circle
         circleList.forEach(circle => {
@@ -211,12 +211,12 @@ class Area extends _chartComponent.default {
             d3.select(circle).attr('r', 3);
           }
         });
-        this.Area.transition().duration(200).attr('opacity', 0.1);
-        this.Line.transition().duration(200).attr('opacity', 0.3);
+        this.Area.transition().duration(this.areaTransitionDuration).attr('opacity', 0.1);
+        this.Line.transition().duration(this.areaTransitionDuration).attr('opacity', 0.3);
         // line
         const theme = _constants.CHART_THEME_COLOR[globalTheme];
-        this.clearOldVerticalAnnotation(rectsWrapper);
-        this.addVerticalAnnotation(rectsWrapper, minDistanceItem, theme);
+        this.clearOldVerticalAnnotation(contentWrapper);
+        this.addVerticalAnnotation(contentWrapper, minDistanceItem, theme);
       } else {
         // circle
         circleList.forEach(circle => {
@@ -227,10 +227,10 @@ class Area extends _chartComponent.default {
           }
           d3.select(circle).attr('r', 3);
         });
-        this.Area.transition().duration(200).attr('opacity', 0.3);
-        this.Line.transition().duration(200).attr('opacity', 1);
+        this.Area.transition().duration(this.areaTransitionDuration).attr('opacity', 0.3);
+        this.Line.transition().duration(this.areaTransitionDuration).attr('opacity', 1);
         // line
-        this.clearOldVerticalAnnotation(rectsWrapper);
+        this.clearOldVerticalAnnotation(contentWrapper);
       }
 
       // tooltip

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

@@ -48,14 +48,16 @@ class BarCompare extends _chartComponent.default {
       const {
         chart,
         globalTheme,
-        chartColorTheme
+        chartColorTheme,
+        columnGroupbyColumn
       } = this.props;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
         display_increase,
         y_axis_auto_range = true,
         y_axis_min,
-        y_axis_max
+        y_axis_max,
+        y_axis_summary_method
       } = chart.config;
       const {
         width: chartWidth,
@@ -66,13 +68,13 @@ class BarCompare extends _chartComponent.default {
       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));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _chartUtils.BaseUtils.getSummaryValueDisplayString(columnGroupbyColumn, d, y_axis_summary_method))).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.5).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()]).paddingInner(0).paddingOuter(0);
 
       // X axis
-      this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').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);
@@ -81,7 +83,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)).selectAll().data(() => d3.group(data, d => d.name)).join('g').attr('transform', _ref => {
+      this.chart.append('g').attr('class', 'content-wrapper').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;
@@ -91,7 +93,7 @@ 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)).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 => {
+      }).join('rect').attr('opacity', 1).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
@@ -219,7 +221,7 @@ class BarCompare extends _chartComponent.default {
         circleData[index]['value'] = d.formatValue;
         return y;
       }).curve(d3.curveBumpX);
-      const wrapper = this.chart.append('g').attr('class', "increase-line-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+      const wrapper = this.chart.append('g').attr('class', 'increase-line-wrapper');
 
       // line
       wrapper.append('path').attr('fill', 'none').attr('stroke', increase_line_color || '#fbd44a').attr('stroke-width', 2).attr('d', () => line(increaseData));

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

@@ -154,12 +154,12 @@ class BarCustom extends _chartComponent.default {
       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));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').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.5).paddingOuter(0.1);
       const x = d3.scaleBand().domain(new Set(data.map(d => d.y_axis_type))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
-      this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').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);
@@ -168,7 +168,7 @@ class BarCustom extends _chartComponent.default {
       });
 
       // 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 => {
+      this.chart.append('g').attr('class', 'content-wrapper').selectAll().data(organizedData).join('g').attr('transform', d => {
         const {
           name
         } = d;
@@ -178,7 +178,7 @@ class BarCustom extends _chartComponent.default {
           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 => {
+      }).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('opacity', 1).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 => {
@@ -246,7 +246,7 @@ class BarCustom extends _chartComponent.default {
         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) => {
+      d3.select(topG).append('foreignObject').attr('class', 'stack-wrapper').attr('opacity', rect.getAttribute('opacity')).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);
@@ -271,7 +271,7 @@ class BarCustom extends _chartComponent.default {
               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);
+                isDiv ? d3.select(curRect.parentNode).transition().duration(this.transitionDuration).attr('opacity', 1) : d3.select(curRect).transition().duration(this.transitionDuration).attr('opacity', 1);
               }
             });
           });
@@ -285,7 +285,7 @@ class BarCustom extends _chartComponent.default {
               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);
+                isDiv ? d3.select(curRect.parentNode).transition().duration(this.transitionDuration).attr('opacity', 0.3) : d3.select(curRect).transition().duration(this.transitionDuration).attr('opacity', 0.3);
               }
             });
           });

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

@@ -63,7 +63,8 @@ class BarGroup extends _chartComponent.default {
         globalTheme,
         chartColorTheme,
         tables,
-        columnGroupbyColumn
+        columnGroupbyColumn,
+        summaryColumn
       } = this.props;
       const {
         display_goal_line,
@@ -78,6 +79,7 @@ class BarGroup extends _chartComponent.default {
       } = this.chartBoundingClientRect;
       const {
         y_axis_show_value,
+        y_axis_summary_method,
         label_font_size,
         table_id,
         column_groupby_column_key,
@@ -94,13 +96,13 @@ class BarGroup extends _chartComponent.default {
       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));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).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.5).paddingOuter(0.1);
       const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
       const x = d3.scaleBand().domain(new Set(sortedData.map(d => d.group_name))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
-      this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').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);
@@ -109,7 +111,7 @@ class BarGroup extends _chartComponent.default {
       });
 
       // Rect group
-      this.chart.append('g').selectAll().data(d3.group(sortedData, d => d.name)).join('g').attr('transform', _ref => {
+      this.chart.append('g').attr('class', 'content-wrapper').selectAll().data(d3.group(sortedData, 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;
@@ -119,7 +121,7 @@ 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)).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 => {
+      }).join('rect').attr('opacity', 1).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
@@ -138,7 +140,7 @@ class BarGroup extends _chartComponent.default {
               y: Number(rect.getAttribute('y')),
               theme,
               label_font_size,
-              text: rect.dataset.value
+              text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(rect.dataset.value), y_axis_summary_method)
             });
           }
         });
@@ -166,6 +168,13 @@ class BarGroup extends _chartComponent.default {
       });
     };
     this.showTooltip = event => {
+      const {
+        summaryColumn,
+        chart
+      } = this.props;
+      const {
+        y_axis_summary_method
+      } = chart.config;
       const {
         offsetX,
         offsetY
@@ -178,7 +187,7 @@ class BarGroup extends _chartComponent.default {
           return {
             color: this.colorMap[item.group_name],
             name: item.group_name,
-            value: item.value
+            value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(item.value), y_axis_summary_method)
           };
         })
       };