sea-chart 2.0.18 → 2.0.20

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

@@ -56,7 +56,7 @@ class LineGroup extends _chartComponent.default {
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
       (0, _utils.isFunction)(customRender) && customRender(this.chart);
     };
-    this.showTooltip = (event, data, rectsWrapper) => {
+    this.showTooltip = (event, data, contentWrapper) => {
       const {
         offsetX,
         offsetY
@@ -64,7 +64,7 @@ class LineGroup extends _chartComponent.default {
       const {
         title,
         items
-      } = this.getTooltipItems(data, rectsWrapper);
+      } = this.getTooltipItems(data, contentWrapper);
       const newTooltipData = {
         title,
         items
@@ -79,7 +79,7 @@ class LineGroup extends _chartComponent.default {
         }
       });
     };
-    this.moveTooltip = (event, data, rectsWrapper) => {
+    this.moveTooltip = (event, data, contentWrapper) => {
       const {
         offsetX,
         offsetY
@@ -87,7 +87,7 @@ class LineGroup extends _chartComponent.default {
       const {
         title,
         items
-      } = this.getTooltipItems(data, rectsWrapper);
+      } = this.getTooltipItems(data, contentWrapper);
       const newTooltipData = {
         title,
         items
@@ -107,15 +107,22 @@ class LineGroup extends _chartComponent.default {
         toolTipPosition: null
       });
     };
-    this.getTooltipItems = (data, rectsWrapper) => {
-      var _rectsWrapper$selectA;
+    this.getTooltipItems = (data, contentWrapper) => {
+      var _contentWrapper$selec;
+      const {
+        summaryColumn,
+        chart
+      } = this.props;
+      const {
+        y_axis_summary_method
+      } = chart.config;
       const title = !data.name && typeof data.name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : data.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();
       const items = circleList.filter(circle => circle.getAttribute('data-name') === title).map(circle => {
         return {
           color: this.colorMap[circle.getAttribute('data-groupName')],
           name: circle.getAttribute('data-groupName'),
-          value: circle.getAttribute('data-text')
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(circle.getAttribute('data-text')), y_axis_summary_method)
         };
       });
       return {
@@ -128,7 +135,8 @@ class LineGroup extends _chartComponent.default {
         chart,
         globalTheme,
         columnGroupbyColumn,
-        chartColorTheme
+        chartColorTheme,
+        summaryColumn
       } = this.props;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
@@ -137,6 +145,7 @@ class LineGroup extends _chartComponent.default {
         goal_label
       } = chart.style_config || {};
       const {
+        y_axis_summary_method,
         y_axis_show_value,
         label_font_size,
         line_type,
@@ -157,12 +166,12 @@ class LineGroup 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 => 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));
 
       // X axis
       const xDomain = data.map(item => item.name);
       const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
-      this.ticksWrapper = 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);
@@ -172,7 +181,7 @@ class LineGroup extends _chartComponent.default {
       });
 
       // Line
-      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.group_name);
       groupData.forEach(item => {
@@ -190,7 +199,7 @@ class LineGroup extends _chartComponent.default {
         }).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
         const group_name = item[0];
         const data = item[1];
-        rectsWrapper.append('path').attr('fill', 'none').attr('stroke', this.colorMap[group_name]).attr('stroke-width', 2).attr('d', () => line(data));
+        contentWrapper.append('path').attr('fill', 'none').attr('stroke', this.colorMap[group_name]).attr('stroke-width', 2).attr('d', () => line(data));
         circleDatas.push({
           group_name,
           circleData
@@ -205,11 +214,11 @@ class LineGroup extends _chartComponent.default {
         } = _ref;
         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-groupName', group_name).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-groupName', group_name).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(curCircleEl.getAttribute('data-text')).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();
@@ -229,7 +238,7 @@ class LineGroup extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleDatas,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'over'
         });
       }).on('mousemove', event => {
@@ -237,7 +246,7 @@ class LineGroup extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleDatas,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'move'
         });
       }).on('mouseleave', event => {
@@ -245,7 +254,7 @@ class LineGroup extends _chartComponent.default {
           event,
           state: 'zoomOut',
           circleDatas,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'leave'
         });
       });
@@ -262,22 +271,21 @@ class LineGroup extends _chartComponent.default {
       });
     };
     this.updateCircleAndTickStyle = _ref2 => {
-      var _rectsWrapper$selectA2, _this$ticksWrapper$se;
+      var _contentWrapper$selec2;
       let {
         event,
         state,
         circleDatas,
-        rectsWrapper,
+        contentWrapper,
         eventState
       } = _ref2;
       const {
-        y_axis_show_value
-      } = this.props.chart.config;
+        globalTheme,
+        chart
+      } = this.props;
       const {
-        height: chartHeight,
-        insertPadding,
-        marginTop
-      } = this.chartBoundingClientRect;
+        y_axis_show_value
+      } = chart.config;
       const {
         offsetX
       } = event;
@@ -292,54 +300,39 @@ class LineGroup extends _chartComponent.default {
       });
       const minIndex = d3.minIndex(minDistanceArr, d => d.distance);
       const minDistanceItem = minDistanceArr[minIndex];
-
-      // circle
-      const circleList = (_rectsWrapper$selectA2 = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA2 === void 0 ? void 0 : _rectsWrapper$selectA2.nodes();
-      if (circleList.length !== 0) {
-        if (state === 'zoomIn') {
-          circleList.forEach(circle => {
-            const name = circle.getAttribute('data-name');
-            if (name === minDistanceItem.name) {
-              d3.select(circle).attr('opacity', 1);
-              d3.select(circle).attr('r', 5);
-            } else {
-              d3.select(circle).attr('opacity', 0);
-              d3.select(circle).attr('r', 3);
-            }
-          });
-        } else {
-          circleList.forEach(circle => {
+      const circleList = (_contentWrapper$selec2 = contentWrapper.selectAll('circle')) === null || _contentWrapper$selec2 === void 0 ? void 0 : _contentWrapper$selec2.nodes();
+      if (state === 'zoomIn') {
+        // circle
+        circleList && circleList.forEach(circle => {
+          const name = circle.getAttribute('data-name');
+          if (name === minDistanceItem.name) {
+            d3.select(circle).attr('opacity', 1);
+            d3.select(circle).attr('r', 5);
+          } else {
             !y_axis_show_value && d3.select(circle).attr('opacity', 0);
             d3.select(circle).attr('r', 3);
-          });
-        }
-      }
-
-      // tick
-      const ticks = (_this$ticksWrapper$se = this.ticksWrapper.selectAll('.tick line')) === null || _this$ticksWrapper$se === void 0 ? void 0 : _this$ticksWrapper$se.nodes();
-      if (ticks.length !== 0) {
-        if (state === 'zoomIn') {
-          ticks.forEach(tick => {
-            const name = tick.getAttribute('data-name');
-            if (name === minDistanceItem.name) {
-              d3.select(tick).attr('y2', -(chartHeight - insertPadding * 2 - marginTop));
-            } else {
-              d3.select(tick).attr('y2', 0);
-            }
-          });
-        } else {
-          ticks.forEach(tick => {
-            d3.select(tick).attr('y2', 0);
-          });
-        }
+          }
+        });
+        // line
+        const theme = _constants.CHART_THEME_COLOR[globalTheme];
+        this.clearOldVerticalAnnotation(contentWrapper);
+        this.addVerticalAnnotation(contentWrapper, minDistanceItem, theme);
+      } else {
+        // circle
+        circleList && circleList.forEach(circle => {
+          !y_axis_show_value && d3.select(circle).attr('opacity', 0);
+          d3.select(circle).attr('r', 3);
+        });
+        // line
+        this.clearOldVerticalAnnotation(contentWrapper);
       }
 
       // tooltip
       if (eventState === 'over') {
-        this.showTooltip(event, minDistanceItem, rectsWrapper);
+        this.showTooltip(event, minDistanceItem, contentWrapper);
       }
       if (eventState === 'move') {
-        this.moveTooltip(event, minDistanceItem, rectsWrapper);
+        this.moveTooltip(event, minDistanceItem, contentWrapper);
       }
       if (eventState === 'leave') {
         this.hiddenTooltip();

package/dist/view/wrapper/line.js

@@ -55,6 +55,13 @@ class Line extends _chartComponent.default {
       (0, _utils.isFunction)(customRender) && customRender(this.chart);
     };
     this.showTooltip = (event, data, title) => {
+      const {
+        chart,
+        summaryColumn
+      } = this.props;
+      const {
+        y_axis_summary_method
+      } = chart.config;
       const {
         offsetX,
         offsetY
@@ -64,7 +71,7 @@ class Line extends _chartComponent.default {
         items: [{
           color: this.getLineColor(),
           name: data.name,
-          value: data.value
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
         }]
       };
       this.setState({
@@ -78,6 +85,13 @@ class Line extends _chartComponent.default {
       });
     };
     this.moveTooltip = (event, data, title) => {
+      const {
+        chart,
+        summaryColumn
+      } = this.props;
+      const {
+        y_axis_summary_method
+      } = chart.config;
       const {
         offsetX,
         offsetY
@@ -87,7 +101,7 @@ class Line extends _chartComponent.default {
         items: [{
           color: this.getLineColor(),
           name: data.name,
-          value: data.value
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
         }]
       };
       this.setState({
@@ -109,7 +123,8 @@ class Line extends _chartComponent.default {
       const {
         chart,
         globalTheme,
-        tables
+        tables,
+        summaryColumn
       } = this.props;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
@@ -120,6 +135,7 @@ class Line extends _chartComponent.default {
       const {
         table_id,
         y_axis_column_key,
+        y_axis_summary_method,
         y_axis_summary_column_key,
         y_axis_show_value,
         label_font_size,
@@ -141,12 +157,12 @@ class Line 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 => 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));
 
       // X axis
       const xDomain = data.map(item => item.name);
       const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
-      this.ticksWrapper = 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);
@@ -168,16 +184,16 @@ class Line extends _chartComponent.default {
         circleData[index]['value'] = d.value;
         return yVal;
       }).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
-      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
-      rectsWrapper.append('path').attr('fill', 'none').attr('stroke', chartBarColor).attr('stroke-width', 2).attr('d', () => line(data));
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
+      contentWrapper.append('path').attr('fill', 'none').attr('stroke', chartBarColor).attr('stroke-width', 2).attr('d', () => line(data));
 
       // circle
       circleData.forEach(item => {
-        rectsWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', chartBarColor).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', chartBarColor).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(curCircleEl.getAttribute('data-text')).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();
@@ -195,7 +211,7 @@ class Line extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleData,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'over',
           tooltipTitle
         });
@@ -204,7 +220,7 @@ class Line extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleData,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'move',
           tooltipTitle
         });
@@ -213,7 +229,7 @@ class Line extends _chartComponent.default {
           event,
           state: 'zoomOut',
           circleData,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'leave',
           tooltipTitle
         });
@@ -223,63 +239,51 @@ class Line extends _chartComponent.default {
       }
     };
     this.updateCircleAndTickStyle = _ref => {
-      var _rectsWrapper$selectA, _this$ticksWrapper$se;
+      var _contentWrapper$selec;
       let {
         event,
         state,
         circleData,
-        rectsWrapper,
+        contentWrapper,
         eventState,
         tooltipTitle
       } = _ref;
       const {
-        y_axis_show_value
-      } = this.props.chart.config;
+        globalTheme,
+        chart
+      } = this.props;
       const {
-        height: chartHeight,
-        insertPadding,
-        marginTop
-      } = this.chartBoundingClientRect;
+        y_axis_show_value
+      } = chart.config;
       const {
         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();
-      if (circleList.length !== 0) {
-        if (state === 'zoomIn') {
-          circleList.forEach(circle => {
-            const name = circle.getAttribute('data-name');
-            if (name === minDistanceItem.name) {
-              d3.select(circle).attr('opacity', 1);
-              d3.select(circle).attr('r', 5);
-            } else {
-              d3.select(circle).attr('opacity', 0);
-              d3.select(circle).attr('r', 3);
-            }
-          });
-        } else {
-          circleList.forEach(circle => {
+      const circleList = (_contentWrapper$selec = contentWrapper.selectAll('circle')) === null || _contentWrapper$selec === void 0 ? void 0 : _contentWrapper$selec.nodes();
+      if (state === 'zoomIn') {
+        // circle
+        circleList && circleList.forEach(circle => {
+          const name = circle.getAttribute('data-name');
+          if (name === minDistanceItem.name) {
+            d3.select(circle).attr('opacity', 1);
+            d3.select(circle).attr('r', 5);
+          } else {
             !y_axis_show_value && d3.select(circle).attr('opacity', 0);
             d3.select(circle).attr('r', 3);
-          });
-        }
-      }
-      const ticks = (_this$ticksWrapper$se = this.ticksWrapper.selectAll('.tick line')) === null || _this$ticksWrapper$se === void 0 ? void 0 : _this$ticksWrapper$se.nodes();
-      if (ticks.length !== 0) {
-        if (state === 'zoomIn') {
-          ticks.forEach(tick => {
-            const name = tick.getAttribute('data-name');
-            if (name === minDistanceItem.name) {
-              d3.select(tick).attr('y2', -(chartHeight - insertPadding * 2 - marginTop));
-            } else {
-              d3.select(tick).attr('y2', 0);
-            }
-          });
-        } else {
-          ticks.forEach(tick => {
-            d3.select(tick).attr('y2', 0);
-          });
-        }
+          }
+        });
+        // line
+        const theme = _constants.CHART_THEME_COLOR[globalTheme];
+        this.clearOldVerticalAnnotation(contentWrapper);
+        this.addVerticalAnnotation(contentWrapper, minDistanceItem, theme);
+      } else {
+        // circle
+        circleList && circleList.forEach(circle => {
+          !y_axis_show_value && d3.select(circle).attr('opacity', 0);
+          d3.select(circle).attr('r', 3);
+        });
+        // line
+        this.clearOldVerticalAnnotation(contentWrapper);
       }
 
       // tooltip

package/dist/view/wrapper/pie.js

@@ -83,10 +83,10 @@ class Pie extends _chartComponent.default {
       // Pie and Arc
       const pie = d3.pie().sort(null).value(d => d.value);
       const arcs = pie(data);
-      const arc = d3.arc().innerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7 * 0.03).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
+      const arc = d3.arc().innerRadius(0).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
 
       // Draw Pie
-      this.chart.append('g').attr('stroke', 'white').attr('stroke-width', 2).selectAll().data(arcs).join('path').attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
+      this.chart.append('g').attr('class', 'content-wrapper').attr('stroke', 'white').selectAll().data(arcs).join('path').attr('stroke-width', 2).attr('opacity', 1).attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
         var _g$node$parentNode;
         const {
           width,
@@ -185,7 +185,7 @@ class Pie extends _chartComponent.default {
     this.handleAcitveAndInActiveState = (state, event) => {
       const allGroup = [event.currentTarget.parentNode];
       const curGroupName = event.currentTarget.getAttribute('data-groupName');
-      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+      this.setActiveAndInActiveState(state, allGroup, curGroupName, _constants.CHART_TYPE.PIE);
     };
     this.getLabel = (val, percent) => {
       const {

package/dist/view/wrapper/ring.js

@@ -87,7 +87,7 @@ class Ring extends _chartComponent.default {
       const arc = d3.arc().innerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.5);
 
       // Draw Ring
-      this.chart.append('g').selectAll().data(arcs).join('path').attr('stroke', 'white').attr('stroke-width', 2).attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
+      this.chart.append('g').attr('class', 'content-wrapper').selectAll().data(arcs).join('path').attr('stroke', 'white').attr('stroke-width', 2).attr('opacity', 1).attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
         var _g$node$parentNode;
         const {
           width,
@@ -108,7 +108,7 @@ class Ring extends _chartComponent.default {
         if (display_label) {
           const labelRadius = this.isInnerLabel ? arc.outerRadius()() * 1.2 : arc.outerRadius()() * 1.65;
           const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
-          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('class', 'label').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
+          this.chart.append('g').attr('class', 'label-wrapper').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('class', 'label').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
             const {
               value,
               percent
@@ -130,7 +130,7 @@ class Ring extends _chartComponent.default {
         this.handleAcitveAndInActiveState('inActive', event);
         this.setAnnotationTotal(event.currentTarget.parentNode, {
           name: this.getTooltipName(rowData.data.name),
-          value: this.getLabel(rowData.data.value, rowData.data.percent)
+          value: rowData.data.value
         });
       }).on('mousemove', event => {
         this.moveTooltip(event);
@@ -199,7 +199,7 @@ class Ring extends _chartComponent.default {
     this.handleAcitveAndInActiveState = (state, event) => {
       const allGroup = [event.currentTarget.parentNode];
       const curGroupName = event.currentTarget.getAttribute('data-groupName');
-      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+      this.setActiveAndInActiveState(state, allGroup, curGroupName, _constants.CHART_TYPE.RING);
     };
     this.getLabel = (val, percent) => {
       const {