sea-chart 2.0.21 → 2.0.23

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

@@ -69,7 +69,8 @@ class BarStack extends _chartComponent.default {
         globalTheme,
         chartColorTheme,
         tables,
-        columnGroupbyColumn
+        columnGroupbyColumn,
+        summaryColumn
       } = this.props;
       const {
         display_goal_line,
@@ -78,6 +79,7 @@ class BarStack extends _chartComponent.default {
       } = chart.style_config || {};
       const {
         y_axis_show_value,
+        y_axis_summary_method,
         display_each_block_data,
         table_id,
         column_groupby_column_key,
@@ -107,11 +109,11 @@ class BarStack extends _chartComponent.default {
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [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 x = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
 
       // X axis
-      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 => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
@@ -120,14 +122,14 @@ class BarStack extends _chartComponent.default {
       });
 
       // Rect group
-      this.rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
-      this.rectsWrapper.selectAll().data(series).join('g').attr('data-key', d => d.key).selectAll('rect').data(D => {
+      this.contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
+      this.contentWrapper.selectAll().data(series).join('g').attr('data-key', d => d.key).selectAll('rect').data(D => {
         const data = D.map(d => {
           d.key = D.key;
           return d;
         });
         return data;
-      }).join('rect').attr('x', d => x(d.data[0])).attr('y', d => y(d[1])).attr('height', d => {
+      }).join('rect').attr('opacity', 1).attr('x', d => x(d.data[0])).attr('y', d => y(d[1])).attr('height', d => {
         const height = y(d[0]) - y(d[1]);
         return (0, _lodashEs.isNaN)(height) ? 0 : height;
       }).attr('width', x.bandwidth()).attr('fill', d => this.colorMap[d.key] || _constants.CHART_STYLE_COLORS[0]).attr('data-value', d => {
@@ -202,6 +204,13 @@ class BarStack extends _chartComponent.default {
       return groupRects;
     };
     this.showTooltip = event => {
+      const {
+        summaryColumn,
+        chart
+      } = this.props;
+      const {
+        y_axis_summary_method
+      } = chart;
       const offsetX = d3.pointer(event)[0];
       const offsetY = d3.pointer(event)[1];
       const curRect = event.currentTarget;
@@ -212,7 +221,7 @@ class BarStack extends _chartComponent.default {
         items: [{
           color: this.colorMap[curGroup.getAttribute('data-key')],
           name: curGroup.getAttribute('data-key'),
-          value: curRect.getAttribute('data-value')
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curRect.getAttribute('data-value')), y_axis_summary_method)
         }]
       };
       this.setState({
@@ -241,7 +250,7 @@ class BarStack extends _chartComponent.default {
       });
     };
     this.handleAcitveAndInActiveState = (state, event) => {
-      const allGroup = Array.from(this.rectsWrapper.node().children);
+      const allGroup = Array.from(this.contentWrapper.node().children);
       const curGroupName = event.currentTarget.getAttribute('data-groupName');
       this.setActiveAndInActiveState(state, allGroup, curGroupName);
     };
@@ -250,7 +259,7 @@ class BarStack extends _chartComponent.default {
         borderRadius
       } = this.chartBoundingClientRect;
       // Add mask rect
-      d3.select(topG).append('foreignObject').attr('x', rect.getAttribute('x')).attr('y', rect.getAttribute('y')).attr('width', xWidth).attr('height', rect.getAttribute('height')).attr('data-groupName', rect.getAttribute('data-groupName')).attr('data-value', rect.getAttribute('data-value')).on('click', (event, data) => {
+      d3.select(topG).append('foreignObject').attr('x', rect.getAttribute('x')).attr('y', rect.getAttribute('y')).attr('opacity', rect.getAttribute('opacity')).attr('width', xWidth).attr('height', rect.getAttribute('height')).attr('data-groupName', rect.getAttribute('data-groupName')).attr('data-value', rect.getAttribute('data-value')).on('click', (event, data) => {
         this.props.toggleRecords(data);
       }).on('mouseover', event => {
         this.showTooltip(event);
@@ -268,10 +277,12 @@ class BarStack extends _chartComponent.default {
     this.addLabelByEachStack = (data, topG, rect, x) => {
       const {
         globalTheme,
-        chart
+        chart,
+        summaryColumn
       } = this.props;
       const {
-        label_font_size
+        label_font_size,
+        y_axis_summary_method
       } = chart.config;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const groupData = d3.group(data, d => d.name);
@@ -285,16 +296,18 @@ class BarStack extends _chartComponent.default {
         y: Number(rect.getAttribute('y')),
         theme,
         label_font_size,
-        text: stackSum
+        text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(stackSum), y_axis_summary_method)
       });
     };
     this.handleLabelToRectCenter = (g, xWidth) => {
       const {
         globalTheme,
-        chart
+        chart,
+        summaryColumn
       } = this.props;
       const {
-        label_font_size
+        label_font_size,
+        y_axis_summary_method
       } = chart.config;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       g._parents.forEach(group => {
@@ -309,7 +322,7 @@ class BarStack extends _chartComponent.default {
             yheight: Number(rect.getAttribute('height')),
             theme,
             label_font_size,
-            text: rect.getAttribute('data-value')
+            text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(rect.getAttribute('data-value')), y_axis_summary_method)
           });
         });
       });

package/dist/view/wrapper/bar.js

@@ -79,6 +79,13 @@ class Bar extends _chartComponent.default {
       return color || chartBarColor;
     };
     this.showTooltip = (event, data, title) => {
+      const {
+        summaryColumn,
+        chart
+      } = this.props;
+      const {
+        y_axis_summary_method
+      } = chart.config;
       const {
         offsetX,
         offsetY
@@ -88,7 +95,7 @@ class Bar extends _chartComponent.default {
         items: [{
           color: this.getFillColor(data),
           name: data.name,
-          value: data.value
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
         }]
       };
       this.setState({
@@ -127,7 +134,8 @@ class Bar extends _chartComponent.default {
       const {
         chart,
         globalTheme,
-        tables
+        tables,
+        summaryColumn
       } = this.props;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
@@ -137,6 +145,7 @@ class Bar extends _chartComponent.default {
       } = chart.style_config || {};
       const {
         y_axis_summary_type,
+        y_axis_summary_method,
         y_axis_summary_column_key,
         y_axis_column_key,
         y_axis_show_value,
@@ -154,28 +163,32 @@ class Bar extends _chartComponent.default {
         marginTop
       } = this.chartBoundingClientRect;
       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]);
-      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));
+
+      // Y axis
+      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 x = d3.scaleBand().domain(data.map(item => item.name)).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 => {
+
+      // X axis
+      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 => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
         this.checkTickOverlap(g);
       });
-      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
-      rectsWrapper.selectAll().data(data).join('rect').attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).attr('x', d => x(d.name)).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value)).call(g => {
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
+      contentWrapper.selectAll().data(data).join('rect').attr('opacity', 1).attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).attr('x', d => x(d.name)).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value)).call(g => {
         g.nodes().forEach(path => {
           // Add label
           if (y_axis_show_value) {
             this.addLabelToRectTop({
-              container: rectsWrapper.node(),
+              container: contentWrapper.node(),
               xWidth: Number(path.dataset.width),
               x: Number(path.dataset.x),
               y: Number(path.dataset.y),
               theme,
               label_font_size,
-              text: path.dataset.value
+              text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(path.dataset.value), y_axis_summary_method)
             });
           }
           // add rect borderRadius
@@ -192,8 +205,8 @@ class Bar extends _chartComponent.default {
         this.handleAcitveAndInActiveState('inActive', event);
       }).on('mousemove', event => {
         this.moveTooltip(event);
-      }).on('mouseleave', (event, data) => {
-        this.hiddenTooltip();
+      }).on('mouseleave', event => {
+        this.hiddenTooltip(event);
         this.handleAcitveAndInActiveState('active', event);
       });
       if (display_goal_line && goal_label && goal_value) {

package/dist/view/wrapper/chart-component.js

@@ -13,7 +13,6 @@ var _dtableUtils = require("dtable-utils");
 var _utils = require("../../utils");
 var _constants = require("../../constants");
 var _intl = _interopRequireDefault(require("../../intl"));
-var _columnUtils = require("../../utils/column-utils");
 require("../../assets/css/sea-chart-d3-tooltip.css");
 class ChartComponent extends _react.Component {
   constructor(props) {
@@ -57,9 +56,10 @@ class ChartComponent extends _react.Component {
       } = container.getBoundingClientRect();
       const {
         marginLeft = 0,
+        marginRight = 0,
         marginBottom = 0
       } = initConfig;
-      const width = containerWidth - marginLeft;
+      const width = containerWidth - marginLeft - marginRight;
       const height = containerHeight - marginBottom;
       _this.chart = d3.create('svg').attr('id', id).attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
       _this.container.appendChild(_this.chart.node());
@@ -239,7 +239,17 @@ class ChartComponent extends _react.Component {
         x_axis_label_position,
         y_axis_summary_type,
         type,
-        title_name
+        title_name,
+        // left axis - combination chart
+        show_y_axis_left_label,
+        y_axis_left_label_position,
+        y_axis_left_summary_type,
+        y_axis_left_summary_column,
+        // right axis - combination chart
+        show_y_axis_right_label,
+        y_axis_right_label_position,
+        y_axis_right_summary_type,
+        y_axis_right_summary_column
       } = chart.config;
       if (y_axis_summary_column_key) {
         y_axis_column_key = y_axis_summary_column_key;
@@ -247,6 +257,8 @@ class ChartComponent extends _react.Component {
       const table = (0, _dtableUtils.getTableById)(tables, table_id);
       let textColor;
       this.globalTheme === _constants.THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
+
+      // xAxis
       const xAxisID = "chart-x-axis-label_".concat(chart.id);
       const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector("#".concat(xAxisID));
       const {
@@ -267,6 +279,8 @@ class ChartComponent extends _react.Component {
       if (xLabel && !x_axis_show_label) {
         xLabel.parentNode.removeChild(xLabel);
       }
+
+      // yAxis
       const yAxisID = "chart-y-axis-label_".concat(chart.id);
       const yLabel = chartContainer.querySelector("#".concat(yAxisID));
       const divHeight = 20;
@@ -304,6 +318,68 @@ class ChartComponent extends _react.Component {
       if (yLabel && !y_axis_show_label) {
         yLabel.parentNode.removeChild(yLabel);
       }
+
+      // yAxis(left) - combination chart
+      const yAxisLeftID = "chart-y-axis-left-label_".concat(chart.id);
+      const yAxisLeftLabel = chartContainer.querySelector("#".concat(yAxisLeftID));
+      if (!yAxisLeftLabel && show_y_axis_left_label) {
+        const div = document.createElement('div');
+        div.id = yAxisLeftID;
+        div.className = 'chart-axis-label text-truncate';
+        if (y_axis_left_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = _intl.default.get('Amount');
+        } else {
+          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column) || {};
+          div.innerHTML = column.name || '';
+        }
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_left_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (y_axis_left_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
+        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        chartContainer.appendChild(div);
+      }
+      if (yAxisLeftLabel && show_y_axis_left_label) {
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_left_label_position === 'bottom') textAlign = 'left';
+        if (y_axis_left_label_position === 'top') textAlign = 'right';
+        yAxisLeftLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+      }
+      if (yAxisLeftLabel && !show_y_axis_left_label) {
+        yAxisLeftLabel.parentNode.removeChild(yAxisLeftLabel);
+      }
+
+      // yAxis(right) - combination chart
+      const yAxisRightID = "chart-y-axis-right-label_".concat(chart.id);
+      const yAxisRightLabel = chartContainer.querySelector("#".concat(yAxisRightID));
+      if (!yAxisRightLabel && show_y_axis_right_label) {
+        const div = document.createElement('div');
+        div.id = yAxisRightID;
+        div.className = 'chart-axis-label text-truncate';
+        if (y_axis_right_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = _intl.default.get('Amount');
+        } else {
+          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_right_summary_column) || {};
+          div.innerHTML = column.name || '';
+        }
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_right_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (y_axis_right_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
+        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; right: 0; transform: translate(").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        chartContainer.appendChild(div);
+      }
+      if (yAxisRightLabel && show_y_axis_right_label) {
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_right_label_position === 'bottom') textAlign = 'left';
+        if (y_axis_right_label_position === 'top') textAlign = 'right';
+        yAxisRightLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; right: 0; transform: translate(").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+      }
+      if (yAxisRightLabel && !show_y_axis_right_label) {
+        yAxisRightLabel.parentNode.removeChild(yAxisRightLabel);
+      }
     };
     this.renderHorizontalLabel = (chart, tables, chartContainer) => {
       if (!this.chart || !chart) return;
@@ -599,7 +675,8 @@ class ChartComponent extends _react.Component {
         legendRectWidth: 20,
         legendRectHeight: 6,
         r: 3,
-        legendItemPaddingTop: 3,
+        legendItemPaddingTop: 5,
+        legendItemTextPaddingTop: 13,
         legendItemMargin: 20,
         legendRecTextGap: 8,
         legendPageNavWrapperWidth: 100,
@@ -622,6 +699,21 @@ class ChartComponent extends _react.Component {
       const groupsData = this.getLegendDataGroups(legendData);
       const legendWrapper = this.chart.append('g').attr('class', 'legend-wrapper');
 
+      // legend offset bottom and When there is only one line of legend, it is displayed in the center (for scatter chart)
+      if (bottomLegendSpace) {
+        queueMicrotask(() => {
+          let curTranslateX = 0;
+          const curTranslateY = bottomLegendSpace ? chartHeight - bottomLegendSpace : 0;
+          if (groupsData.length === 1) {
+            const {
+              width
+            } = legendWrapper.node().getBoundingClientRect();
+            curTranslateX = (chartWidth - width - insertPadding * 2) / 2;
+          }
+          legendWrapper.attr('transform', "translate(".concat(curTranslateX, ",").concat(curTranslateY, ")"));
+        });
+      }
+
       // Render first group legend
       this.renderLegend({
         legendWrapper,
@@ -633,6 +725,7 @@ class ChartComponent extends _react.Component {
       // Render Page navigator
       if (groupsData.length > 1) {
         const {
+          legendItemTextPaddingTop,
           legendPageNavWrapperWidth,
           legendItemMargin
         } = this.legendConfig;
@@ -640,10 +733,10 @@ class ChartComponent extends _react.Component {
         const pageNavigator = legendWrapper.append('g').attr('class', 'legend-flip-page');
 
         // count
-        pageNavigator.append('text').attr('class', 'legend-count').attr('dominant-baseline', 'hanging').attr('x', 15).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text("".concat(curCount + 1, "/").concat(groupsData.length));
+        pageNavigator.append('text').attr('class', 'legend-count').attr('x', 15).attr('y', legendItemTextPaddingTop).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text("".concat(curCount + 1, "/").concat(groupsData.length));
 
         // prev page
-        pageNavigator.append('polygon').attr('class', 'legend-prev-page').attr('points', this.calcEquilateralTriangle(5, 5, 12)).attr('fill', theme.legendPageNavigatorMarkerColor).attr('opacity', curCount === 0 ? 0.45 : 1).attr('style', 'cursor: pointer;').on('click', event => {
+        pageNavigator.append('polygon').attr('class', 'legend-prev-page').attr('points', this.calcEquilateralTriangle(5, 8, 12)).attr('fill', theme.legendPageNavigatorMarkerColor).attr('opacity', curCount === 0 ? 0.45 : 1).attr('style', 'cursor: pointer;').on('click', event => {
           if (curCount > 0) {
             curCount--;
             this.renderLegend({
@@ -657,7 +750,7 @@ class ChartComponent extends _react.Component {
         });
 
         // next page
-        pageNavigator.append('polygon').attr('class', 'legend-next-page').attr('points', this.calcEquilateralTriangle(45, 5, 12, 'bottom')).attr('fill', theme.legendPageNavigatorMarkerColor).attr('opacity', curCount === groupsData.length - 1 ? 0.45 : 1).attr('style', 'cursor: pointer;').on('click', event => {
+        pageNavigator.append('polygon').attr('class', 'legend-next-page').attr('points', this.calcEquilateralTriangle(45, 8, 12, 'bottom')).attr('fill', theme.legendPageNavigatorMarkerColor).attr('opacity', curCount === groupsData.length - 1 ? 0.45 : 1).attr('style', 'cursor: pointer;').on('click', event => {
           if (curCount < groupsData.length - 1) {
             curCount++;
             this.renderLegend({
@@ -690,8 +783,7 @@ class ChartComponent extends _react.Component {
             } = g.node().parentNode.getBoundingClientRect();
             groupTranslateY = groupTranslateY + height + legendItemMargin;
           }
-          const curTranslateY = bottomLegendSpace ? chartHeight - bottomLegendSpace : groupTranslateY; // pageNavigator offset bottom
-          g.attr('transform', "translate(".concat(groupTranslateX, ", ").concat(curTranslateY, ")"));
+          g.attr('transform', "translate(".concat(groupTranslateX, ", ").concat(groupTranslateY, ")"));
         });
       }
     };
@@ -705,6 +797,7 @@ class ChartComponent extends _react.Component {
       } = _ref2;
       const {
         legendItemPaddingTop,
+        legendItemTextPaddingTop,
         legendRectWidth,
         legendRectHeight,
         r,
@@ -741,7 +834,7 @@ class ChartComponent extends _react.Component {
         // Add text
         g.nodes().forEach(rect => {
           const parentNode = rect.parentNode;
-          d3.select(parentNode).append('text').attr('x', legendRectWidth + legendRecTextGap).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text(this.formatterLegendName(rect.dataset.text)).attr('data-text', rect.dataset.text).attr('dominant-baseline', 'hanging');
+          d3.select(parentNode).append('text').attr('x', legendRectWidth + legendRecTextGap).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text(this.formatterLegendName(rect.dataset.text)).attr('data-text', rect.dataset.text).attr('y', legendItemTextPaddingTop);
         });
         const legendItems = Array.from(legendWrapper.node().children).filter(item => item.getAttribute('class') !== 'legend-flip-page');
         const {
@@ -915,20 +1008,15 @@ class ChartComponent extends _react.Component {
       }
     };
     this.setLegendItemOffset = (legendItems, end) => {
-      const {
-        height: chartHeight,
-        bottomLegendSpace
-      } = this.chartBoundingClientRect;
       const endItem = legendItems[legendItems.length - 1];
       const endTranslateX = Number(endItem.getAttribute('data-translateX'));
       const {
         width: endWidth
       } = endItem.getBoundingClientRect();
       const offset = end - (endTranslateX + endWidth);
-      const curTranslateY = bottomLegendSpace ? chartHeight - bottomLegendSpace : 0; // legend offset bottom
       legendItems.forEach(legendItem => {
         const curTranslateX = Number(legendItem.getAttribute('data-translateX')) + offset;
-        d3.select(legendItem).attr('transform', "translate(".concat(curTranslateX, ", ").concat(curTranslateY, ")")).attr('data-translateX', curTranslateX);
+        d3.select(legendItem).attr('transform', "translate(".concat(curTranslateX, ", 0)")).attr('data-translateX', curTranslateX);
         d3.select(legendItem).attr('opacity', 1);
       });
     };
@@ -1122,6 +1210,12 @@ class ChartComponent extends _react.Component {
     this.isShowYAxisLabel = chart => {
       return !!(chart && chart.config && chart.config.y_axis_show_label);
     };
+    this.isShowYAxisLeftLabel = chart => {
+      return !!(chart && chart.config && chart.config.show_y_axis_left_label);
+    };
+    this.isShowYAxisRightLabel = chart => {
+      return !!(chart && chart.config && chart.config.show_y_axis_right_label);
+    };
     this.getThemeColors = function () {
       let themeColors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       let theme = arguments.length > 1 ? arguments[1] : undefined;
@@ -1132,11 +1226,10 @@ class ChartComponent extends _react.Component {
       return themeColors || _constants.CHART_THEME_COLOR[_constants.THEME_NAME_MAP.LIGHT];
     };
     this.setDispalyGoalLine = (goal_label, goal_value, insertPadding, yScale) => {
-      var _this$chart$node;
       const {
         width: chartWidth
       } = this.chartBoundingClientRect;
-      const annotationWrapper = this.chart.append('g').attr('class', "annotation-wrapper-".concat((_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id));
+      const annotationWrapper = this.chart.append('g').attr('class', "annotation-wrapper");
       annotationWrapper.append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', yScale(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', yScale(goal_value)).attr('stroke-dasharray', '8,3').call(g => {
         annotationWrapper.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
       });
@@ -1207,9 +1300,9 @@ class ChartComponent extends _react.Component {
     this.setActiveAndInActiveState = (state, allGroup, curGroupName, chartType) => {
       if (state === 'active') {
         allGroup.forEach(g => {
-          const rects = Array.from(g.children);
+          const rects = Array.from(g.children).filter(item => item.tagName !== 'text');
           rects.forEach(item => {
-            d3.select(item).transition().duration(500).attr('opacity', 1);
+            d3.select(item).transition().duration(this.transitionDuration).attr('opacity', 1);
             if ([_constants.CHART_TYPE.PIE, _constants.CHART_TYPE.RING].includes(chartType)) {
               d3.select(item).attr('stroke-width', 2);
             }
@@ -1218,10 +1311,10 @@ class ChartComponent extends _react.Component {
       }
       if (state === 'inActive') {
         allGroup.forEach(g => {
-          const rects = Array.from(g.children);
+          const rects = Array.from(g.children).filter(item => item.tagName !== 'text');
           rects.forEach(item => {
             if (item.getAttribute('data-groupName') !== curGroupName) {
-              d3.selectAll([item]).transition().duration(500).attr('opacity', 0.3);
+              d3.selectAll([item]).transition().duration(this.transitionDuration).attr('opacity', 0.3);
             } else {
               if ([_constants.CHART_TYPE.PIE, _constants.CHART_TYPE.RING].includes(chartType)) {
                 d3.select(item).attr('stroke-width', 0.5);
@@ -1252,29 +1345,30 @@ class ChartComponent extends _react.Component {
         clipRect.attr('rx', borderRadiusVal);
         clipRect.attr('height', Number(rect.getAttribute('height')) + borderRadiusVal);
       }
-      const clipPath = d3.select(parentNode).append('clipPath').attr('id', rectId);
+      const clipPath = d3.select(parentNode).append('clipPath').attr('opacity', 1).attr('id', rectId);
       clipPath.node().appendChild(clipRect.node());
       d3.select(rect).attr('clip-path', "url(#".concat(rectId, ")"));
     };
-    this.drawYaxis = (g, theme) => {
+    this.drawYaxis = function (g, theme) {
+      let rightAxisOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
       const {
         width: chartWidth,
         insertPadding
-      } = this.chartBoundingClientRect;
+      } = _this.chartBoundingClientRect;
       // remove domain
       g.select('.domain').remove();
 
       // add text
       g.selectAll('text').attr('font-size', theme.fontSize);
       g.selectAll('text').attr('fill', theme.textColor);
-      this.checkTextOverflow(g.selectAll('text').nodes());
+      _this.checkTextOverflow(g.selectAll('text').nodes());
 
       // line
       g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
-      g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2 - this.horizontalOverflowOffset).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
+      g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2 - _this.horizontalOverflowOffset - rightAxisOffset).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
 
       // update g translateX
-      g.attr('transform', "translate(".concat(insertPadding + this.horizontalOverflowOffset, ", 0)"));
+      g.attr('transform', "translate(".concat(insertPadding + _this.horizontalOverflowOffset, ", 0)"));
     };
     this.checkTextOverflow = allTextEl => {
       const {
@@ -1288,7 +1382,7 @@ class ChartComponent extends _react.Component {
       });
       const maxTextWidth = Math.max(...allTextWidth);
       this.horizontalOverflowOffset = 0;
-      if (maxTextWidth > insertPadding) {
+      if (maxTextWidth + 3 > insertPadding) {
         // horizontal overflow
         const offset = maxTextWidth + 3 - insertPadding; // 3 is text and line default spacing
         this.horizontalOverflowOffset = offset;
@@ -1443,6 +1537,8 @@ class ChartComponent extends _react.Component {
     };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
     this.chartBoundingClientRect = {};
+    this.transitionDuration = 500;
+    this.areaTransitionDuration = 200;
   }
   componentDidUpdate(prevProps) {
     if (prevProps.globalTheme !== this.props.globalTheme) {