@semcore/d3-chart 2.1.0 → 2.2.2

package/lib/es6/Axis.js

@@ -27,23 +27,23 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SAxis_1gnbc_gg_{stroke:#c4c7cf}.___SAxis_1gnbc_gg_.__hide_1gnbc_gg_{display:none}.___STick_1gnbc_gg_{font-size:12px;fill:#6c6e79}.___STick_1gnbc_gg_.__hide_1gnbc_gg_{display:none}.___SGrid_1gnbc_gg_{fill:transparent;stroke:#e0e1e9}.___STitle_1gnbc_gg_{font-size:12px;fill:#6c6e79;transform-origin:var(--transform-origin_1kokr81)}.___STitle_1gnbc_gg_._position_top_1gnbc_gg_{text-anchor:middle}.___STitle_1gnbc_gg_._position_bottom_1gnbc_gg_{text-anchor:middle;alignment-baseline:hanging}.___STitle_1gnbc_gg_._position_right_1gnbc_gg_{transform:rotate(-90deg);alignment-baseline:middle;text-anchor:middle}.___STitle_1gnbc_gg_._position_left_1gnbc_gg_{transform:rotate(-90deg);text-anchor:middle;alignment-baseline:middle}.___STick_1gnbc_gg_._position_top_1gnbc_gg_{transform:translateY(-12px);text-anchor:middle}.___STick_1gnbc_gg_._position_bottom_1gnbc_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_1gnbc_gg_._position_right_1gnbc_gg_{transform:translateX(16px);text-anchor:start;alignment-baseline:middle}.___STick_1gnbc_gg_._position_left_1gnbc_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}.___STick_1gnbc_gg_._position_custom_0_1gnbc_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_1gnbc_gg_._position_custom_1_1gnbc_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}"
+".___SAxis_foe7j_gg_{stroke:#c4c7cf}.___SAxis_foe7j_gg_.__hide_foe7j_gg_{display:none}.___STick_foe7j_gg_{font-size:12px;fill:#6c6e79}.___STick_foe7j_gg_.__hide_foe7j_gg_{display:none}.___SGrid_foe7j_gg_{fill:transparent;stroke:#e0e1e9}.___STitle_foe7j_gg_{font-size:12px;fill:#6c6e79;transform-origin:var(--transform-origin_foe7j)}.___STitle_foe7j_gg_._position_top_foe7j_gg_{text-anchor:middle}.___STitle_foe7j_gg_._position_bottom_foe7j_gg_{text-anchor:middle;alignment-baseline:hanging}.___STitle_foe7j_gg_._position_right_foe7j_gg_{transform:rotate(-90deg);alignment-baseline:middle;text-anchor:middle}.___STitle_foe7j_gg_._position_left_foe7j_gg_{transform:rotate(-90deg);text-anchor:middle;alignment-baseline:middle}.___STick_foe7j_gg_._position_top_foe7j_gg_{transform:translateY(-12px);text-anchor:middle}.___STick_foe7j_gg_._position_bottom_foe7j_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_foe7j_gg_._position_right_foe7j_gg_{transform:translateX(16px);text-anchor:start;alignment-baseline:middle}.___STick_foe7j_gg_._position_left_foe7j_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}.___STick_foe7j_gg_._position_custom_0_foe7j_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_foe7j_gg_._position_custom_1_foe7j_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}"
 /*__inner_css_end__*/
-, "1kokr81_gg_")
+, "foe7j_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAxis": "___SAxis_1gnbc_gg_",
-  "_hide": "__hide_1gnbc_gg_",
-  "__STick": "___STick_1gnbc_gg_",
-  "__SGrid": "___SGrid_1gnbc_gg_",
-  "__STitle": "___STitle_1gnbc_gg_",
-  "--transform-origin": "--transform-origin_1kokr81",
-  "_position_top": "_position_top_1gnbc_gg_",
-  "_position_bottom": "_position_bottom_1gnbc_gg_",
-  "_position_right": "_position_right_1gnbc_gg_",
-  "_position_left": "_position_left_1gnbc_gg_",
-  "_position_custom_0": "_position_custom_0_1gnbc_gg_",
-  "_position_custom_1": "_position_custom_1_1gnbc_gg_"
+  "__SAxis": "___SAxis_foe7j_gg_",
+  "_hide": "__hide_foe7j_gg_",
+  "__STick": "___STick_foe7j_gg_",
+  "__SGrid": "___SGrid_foe7j_gg_",
+  "__STitle": "___STitle_foe7j_gg_",
+  "--transform-origin": "--transform-origin_foe7j",
+  "_position_top": "_position_top_foe7j_gg_",
+  "_position_bottom": "_position_bottom_foe7j_gg_",
+  "_position_right": "_position_right_foe7j_gg_",
+  "_position_left": "_position_left_foe7j_gg_",
+  "_position_custom_0": "_position_custom_0_foe7j_gg_",
+  "_position_custom_1": "_position_custom_1_foe7j_gg_"
 });
 var CUSTOM_0 = Symbol('custom_0');
 var CUSTOM_1 = Symbol('custom_1');

package/lib/es6/Bar.js

@@ -24,17 +24,17 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SBar_1fm2a_gg_{fill:#2bb3ff;transition-property:height,width,y;transition-duration:var(--duration_1iw4ich);transition-timing-function:ease-in-out}.___SBar_1fm2a_gg_.__color_1fm2a_gg_{fill:var(--color_1iw4ich)}.___SBar_1fm2a_gg_.__hide_1fm2a_gg_{display:none}.___SBackground_1fm2a_gg_{fill:#c4c7cf}"
+".___SBar_q3h40_gg_{fill:#2bb3ff;transition-property:height,width,y;transition-duration:var(--duration_q3h40);transition-timing-function:ease-in-out}.___SBar_q3h40_gg_.__color_q3h40_gg_{fill:var(--color_q3h40)}.___SBar_q3h40_gg_.__hide_q3h40_gg_{display:none}.___SBackground_q3h40_gg_{fill:#c4c7cf}"
 /*__inner_css_end__*/
-, "1iw4ich_gg_")
+, "q3h40_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SBar": "___SBar_1fm2a_gg_",
-  "--duration": "--duration_1iw4ich",
-  "_color": "__color_1fm2a_gg_",
-  "--color": "--color_1iw4ich",
-  "_hide": "__hide_1fm2a_gg_",
-  "__SBackground": "___SBackground_1fm2a_gg_"
+  "__SBar": "___SBar_q3h40_gg_",
+  "--duration": "--duration_q3h40",
+  "_color": "__color_q3h40_gg_",
+  "--color": "--color_q3h40",
+  "_hide": "__hide_q3h40_gg_",
+  "__SBackground": "___SBackground_q3h40_gg_"
 });
 
 var BarRoot = /*#__PURE__*/function (_Component) {
@@ -99,15 +99,16 @@ var BarRoot = /*#__PURE__*/function (_Component) {
           duration = _this$asProps3.duration,
           uid = _this$asProps3.uid,
           r = _this$asProps3.r,
+          hMin = _this$asProps3.hMin,
           widthProps = _this$asProps3.width;
 
       var _scale = _slicedToArray(scale, 2),
           xScale = _scale[0],
           yScale = _scale[1];
 
-      var barY = yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1];
+      var barY = yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1] - (Object.is(d[y], 0) ? hMin : 0);
       var barX = xScale(d[x]) + offset[0];
-      var height = Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0)));
+      var height = Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0))) || hMin;
       var width = widthProps || getBandwidth(xScale);
       var dSvg = getRect({
         x: barX,
@@ -115,7 +116,7 @@ var BarRoot = /*#__PURE__*/function (_Component) {
         width: width,
         height: height,
         radius: Array.isArray(r) ? r[i] : r,
-        position: d[y] > 0 ? 'top' : 'bottom'
+        position: d[y] > 0 || Object.is(d[y], 0) ? 'top' : 'bottom'
       });
       return _ref = sstyled(styles), /*#__PURE__*/React.createElement(SBar, _ref.cn("SBar", {
         "key": "bar-".concat(i),
@@ -166,7 +167,8 @@ _defineProperty(BarRoot, "enhance", [uniqueIDEnhancement()]);
 _defineProperty(BarRoot, "defaultProps", {
   offset: [0, 0],
   duration: 500,
-  r: 2
+  r: 2,
+  hMin: 4
 });
 
 function Background(props) {

package/lib/es6/Bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Bar.jsx"],"names":["React","transition","Component","sstyled","uniqueIDEnhancement","createElement","ClipPath","getBandwidth","roundedPath","BarRoot","props","index","asProps","x","data","value","duration","uid","selectRect","selection","selectAll","selectRectNode","node","getAttribute","attr","animationBar","d","i","SBar","Element","styles","color","y","y0","scale","hide","offset","r","widthProps","width","xScale","yScale","barY","Math","max","barX","height","abs","min","domain","dSvg","getRect","radius","Array","isArray","position","size","map","renderBar","bind","style","Background","SBackground","yRange","range","bandwidth"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { transition } from 'd3-transition';\nimport { Component, sstyled } from '@semcore/core';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport createElement from './createElement';\nimport ClipPath from './ClipPath';\nimport { getBandwidth, roundedPath } from './utils';\n\nimport style from './style/bar.shadow.css';\n\nclass BarRoot extends Component {\n  static displayName = 'Bar';\n  static style = style;\n  static enhance = [uniqueIDEnhancement()];\n\n  static defaultProps = {\n    offset: [0, 0],\n    duration: 500,\n    r: 2,\n  };\n\n  getBackgroundProps(props, index) {\n    const { x, data } = this.asProps;\n    return {\n      value: data[index][x],\n    };\n  }\n\n  animationBar() {\n    const { duration, uid } = this.asProps;\n    const selectRect = transition().selection().selectAll(`#${uid} rect`);\n    const selectRectNode = selectRect.node();\n\n    if (duration > 0 && selectRectNode && selectRectNode.getAttribute('y') !== '0') {\n      selectRect.transition().duration(duration).attr('y', 0);\n    }\n  }\n\n  componentDidUpdate() {\n    this.animationBar();\n  }\n\n  componentDidMount() {\n    this.animationBar();\n  }\n\n  renderBar(d, i) {\n    const SBar = this.Element;\n    const {\n      styles,\n      color,\n      x,\n      y,\n      y0,\n      scale,\n      hide,\n      offset,\n      duration,\n      uid,\n      r,\n      width: widthProps,\n    } = this.asProps;\n\n    const [xScale, yScale] = scale;\n    const barY = yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1];\n    const barX = xScale(d[x]) + offset[0];\n    const height = Math.abs(\n      yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0)),\n    );\n    const width = widthProps || getBandwidth(xScale);\n    const dSvg = getRect({\n      x: barX,\n      y: barY,\n      width,\n      height,\n      radius: Array.isArray(r) ? r[i] : r,\n      position: d[y] > 0 ? 'top' : 'bottom',\n    });\n\n    return sstyled(styles)(\n      <SBar\n        key={`bar-${i}`}\n        render=\"path\"\n        clipPath={`url(#${uid})`}\n        __excludeProps={['data', 'scale', 'value']}\n        childrenPosition=\"above\"\n        value={d}\n        index={i}\n        hide={hide}\n        color={color}\n        x={barX}\n        y={barY}\n        width={width}\n        height={height}\n        d={dSvg}\n        use:duration={`${duration}ms`}\n      />,\n    );\n  }\n  render() {\n    const { data, uid, size, duration } = this.asProps;\n    return (\n      <>\n        {data.map(this.renderBar.bind(this))}\n        {duration && (\n          <ClipPath\n            key={`${uid}-animation`}\n            id={uid}\n            x=\"0\"\n            y={size[1]}\n            width={size[0]}\n            height={`${size[1]}px`}\n          />\n        )}\n      </>\n    );\n  }\n}\n\nfunction Background(props) {\n  const { Element: SBackground, styles, scale, value } = props;\n\n  const [xScale, yScale] = scale;\n  const yRange = yScale.range();\n\n  return sstyled(styles)(\n    <SBackground\n      render=\"rect\"\n      childrenPosition=\"above\"\n      width={xScale.bandwidth()}\n      height={yRange[0] - yRange[1]}\n      x={xScale(value)}\n      y={yRange[1]}\n    />,\n  );\n}\n\nfunction getRect({ x, y, width, height, radius, position }) {\n  if (height <= radius) return '';\n  if (radius) {\n    if (position === 'top')\n      return roundedPath(x, y, width, height, radius, true, true, false, false);\n    return roundedPath(x, y, width, height, radius, false, false, true, true);\n  }\n  return roundedPath(x, y, width, height, radius);\n}\n\nexport default createElement(BarRoot, { Background });\n"],"file":"Bar.js"}
+{"version":3,"sources":["../../src/Bar.jsx"],"names":["React","transition","Component","sstyled","uniqueIDEnhancement","createElement","ClipPath","getBandwidth","roundedPath","BarRoot","props","index","asProps","x","data","value","duration","uid","selectRect","selection","selectAll","selectRectNode","node","getAttribute","attr","animationBar","d","i","SBar","Element","styles","color","y","y0","scale","hide","offset","r","hMin","widthProps","width","xScale","yScale","barY","Math","max","Object","is","barX","height","abs","min","domain","dSvg","getRect","radius","Array","isArray","position","size","map","renderBar","bind","style","Background","SBackground","yRange","range","bandwidth"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { transition } from 'd3-transition';\nimport { Component, sstyled } from '@semcore/core';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport createElement from './createElement';\nimport ClipPath from './ClipPath';\nimport { getBandwidth, roundedPath } from './utils';\n\nimport style from './style/bar.shadow.css';\n\nclass BarRoot extends Component {\n  static displayName = 'Bar';\n  static style = style;\n  static enhance = [uniqueIDEnhancement()];\n\n  static defaultProps = {\n    offset: [0, 0],\n    duration: 500,\n    r: 2,\n    hMin: 4,\n  };\n\n  getBackgroundProps(props, index) {\n    const { x, data } = this.asProps;\n    return {\n      value: data[index][x],\n    };\n  }\n\n  animationBar() {\n    const { duration, uid } = this.asProps;\n    const selectRect = transition().selection().selectAll(`#${uid} rect`);\n    const selectRectNode = selectRect.node();\n\n    if (duration > 0 && selectRectNode && selectRectNode.getAttribute('y') !== '0') {\n      selectRect.transition().duration(duration).attr('y', 0);\n    }\n  }\n\n  componentDidUpdate() {\n    this.animationBar();\n  }\n\n  componentDidMount() {\n    this.animationBar();\n  }\n\n  renderBar(d, i) {\n    const SBar = this.Element;\n    const {\n      styles,\n      color,\n      x,\n      y,\n      y0,\n      scale,\n      hide,\n      offset,\n      duration,\n      uid,\n      r,\n      hMin,\n      width: widthProps,\n    } = this.asProps;\n\n    const [xScale, yScale] = scale;\n    const barY = yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1] - (Object.is(d[y], 0) ? hMin : 0);\n    const barX = xScale(d[x]) + offset[0];\n    const height =\n      Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0))) || hMin;\n    const width = widthProps || getBandwidth(xScale);\n    const dSvg = getRect({\n      x: barX,\n      y: barY,\n      width,\n      height,\n      radius: Array.isArray(r) ? r[i] : r,\n      position: d[y] > 0 || Object.is(d[y], 0) ? 'top' : 'bottom',\n    });\n\n    return sstyled(styles)(\n      <SBar\n        key={`bar-${i}`}\n        render=\"path\"\n        clipPath={`url(#${uid})`}\n        __excludeProps={['data', 'scale', 'value']}\n        childrenPosition=\"above\"\n        value={d}\n        index={i}\n        hide={hide}\n        color={color}\n        x={barX}\n        y={barY}\n        width={width}\n        height={height}\n        d={dSvg}\n        use:duration={`${duration}ms`}\n      />,\n    );\n  }\n  render() {\n    const { data, uid, size, duration } = this.asProps;\n    return (\n      <>\n        {data.map(this.renderBar.bind(this))}\n        {duration && (\n          <ClipPath\n            key={`${uid}-animation`}\n            id={uid}\n            x=\"0\"\n            y={size[1]}\n            width={size[0]}\n            height={`${size[1]}px`}\n          />\n        )}\n      </>\n    );\n  }\n}\n\nfunction Background(props) {\n  const { Element: SBackground, styles, scale, value } = props;\n\n  const [xScale, yScale] = scale;\n  const yRange = yScale.range();\n\n  return sstyled(styles)(\n    <SBackground\n      render=\"rect\"\n      childrenPosition=\"above\"\n      width={xScale.bandwidth()}\n      height={yRange[0] - yRange[1]}\n      x={xScale(value)}\n      y={yRange[1]}\n    />,\n  );\n}\n\nfunction getRect({ x, y, width, height, radius, position }) {\n  if (height <= radius) return '';\n  if (radius) {\n    if (position === 'top')\n      return roundedPath(x, y, width, height, radius, true, true, false, false);\n    return roundedPath(x, y, width, height, radius, false, false, true, true);\n  }\n  return roundedPath(x, y, width, height, radius);\n}\n\nexport default createElement(BarRoot, { Background });\n"],"file":"Bar.js"}

package/lib/es6/Bubble.js

@@ -30,19 +30,19 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SBubble_1hkv5_gg_{fill:#2bb3ff;stroke:#fff;stroke-width:2px;transition-property:cx,cy;transition-duration:var(--duration_no5xh6);transition-timing-function:ease-in-out;opacity:.5}.___SBubble_1hkv5_gg_:hover{opacity:.8}.___SBubble_1hkv5_gg_.__color_1hkv5_gg_{fill:var(--color_no5xh6)}.___SCenter_1hkv5_gg_{text-anchor:middle;font-size:11px;stroke:#2bb3ff}.___SCenter_1hkv5_gg_.__color_1hkv5_gg_{stroke:var(--color_no5xh6)}.___SLabel_1hkv5_gg_{fill:#2bb3ff}.___SLabel_1hkv5_gg_._position_right_1hkv5_gg_{text-anchor:end}.___SLabel_1hkv5_gg_._position_left_1hkv5_gg_{text-anchor:start}.___SLabel_1hkv5_gg_.__color_1hkv5_gg_{fill:var(--color_no5xh6)}"
+".___SBubble_mlz14_gg_{fill:#2bb3ff;stroke:#fff;stroke-width:2px;transition-property:cx,cy;transition-duration:var(--duration_mlz14);transition-timing-function:ease-in-out;opacity:.5}.___SBubble_mlz14_gg_:hover{opacity:.8}.___SBubble_mlz14_gg_.__color_mlz14_gg_{fill:var(--color_mlz14)}.___SCenter_mlz14_gg_{text-anchor:middle;font-size:11px;stroke:#2bb3ff}.___SCenter_mlz14_gg_.__color_mlz14_gg_{stroke:var(--color_mlz14)}.___SLabel_mlz14_gg_{fill:#2bb3ff}.___SLabel_mlz14_gg_._position_right_mlz14_gg_{text-anchor:end}.___SLabel_mlz14_gg_._position_left_mlz14_gg_{text-anchor:start}.___SLabel_mlz14_gg_.__color_mlz14_gg_{fill:var(--color_mlz14)}"
 /*__inner_css_end__*/
-, "no5xh6_gg_")
+, "mlz14_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SBubble": "___SBubble_1hkv5_gg_",
-  "--duration": "--duration_no5xh6",
-  "_color": "__color_1hkv5_gg_",
-  "--color": "--color_no5xh6",
-  "__SCenter": "___SCenter_1hkv5_gg_",
-  "__SLabel": "___SLabel_1hkv5_gg_",
-  "_position_right": "_position_right_1hkv5_gg_",
-  "_position_left": "_position_left_1hkv5_gg_"
+  "__SBubble": "___SBubble_mlz14_gg_",
+  "--duration": "--duration_mlz14",
+  "_color": "__color_mlz14_gg_",
+  "--color": "--color_mlz14",
+  "__SCenter": "___SCenter_mlz14_gg_",
+  "__SLabel": "___SLabel_mlz14_gg_",
+  "_position_right": "_position_right_mlz14_gg_",
+  "_position_left": "_position_left_mlz14_gg_"
 });
 import ClipPath from './ClipPath';
 import { scaleSqrt } from 'd3-scale';
@@ -177,6 +177,7 @@ var BubbleRoot = /*#__PURE__*/function (_Component) {
         "color": d[color] ?? color
       }), "+"), /*#__PURE__*/React.createElement(SBubble, _ref.cn("SBubble", {
         "id": "".concat(uid).concat(uid),
+        "index": i,
         "render": "circle",
         "clipPath": "url(#".concat(uid, ")"),
         "cx": xScale(d[x]) + offset[0],

package/lib/es6/Bubble.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Bubble.jsx"],"names":["React","Component","sstyled","canUseDOM","CONSTANT","measureText","createElement","uniqueIDEnhancement","transition","ClipPath","scaleSqrt","BubbleRoot","document","visible","props","x","clientX","y","clientY","eventEmitter","asProps","virtualElement","getBoundingClientRect","generateGetBoundingClientRect","VIRTUAL_ELEMENT","emit","width","height","top","right","bottom","left","duration","uid","data","value","z","domain","Math","max","map","el","range","selectRect","selection","selectAll","attr","selectRectNode","node","_","ind","animationCircle","d","i","color","scale","offset","styles","label","markedCross","size","xScale","yScale","SBubble","Element","SCenter","SLabel","margin","min","labelPosition","labelDistance","bindHandlerTooltip","xIndex","xSize","abs","ySize","xMargin","yMargin","renderCircle","bind","style","Bubble"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled } from '@semcore/core';\nimport canUseDOM from '@semcore/utils/lib/canUseDOM';\nimport { CONSTANT, measureText } from './utils';\nimport createElement from './createElement';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport { transition } from 'd3-transition';\nimport style from './style/bubble.shadow.css';\nimport ClipPath from './ClipPath';\nimport { scaleSqrt } from 'd3-scale';\n\nclass BubbleRoot extends Component {\n  static displayName = 'Bubble';\n  static style = style;\n  static enhance = [uniqueIDEnhancement()];\n\n  static defaultProps = {\n    offset: [0, 0],\n    duration: 500,\n    markedCross: true,\n  };\n\n  virtualElement = canUseDOM() ? document.createElement('div') : {};\n\n  generateGetBoundingClientRect(x = 0, y = 0) {\n    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });\n  }\n\n  bindHandlerTooltip =\n    (visible, props) =>\n    ({ clientX: x, clientY: y }) => {\n      const { eventEmitter } = this.asProps;\n      this.virtualElement.getBoundingClientRect = this.generateGetBoundingClientRect(x, y);\n      this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;\n      eventEmitter.emit('onTooltipVisible', visible, props, this.virtualElement);\n    };\n\n  animationCircle() {\n    const { duration, uid, data, value } = this.asProps;\n    const z = scaleSqrt()\n      .domain([0, Math.max(...data.map((el) => el[value]))])\n      .range([5.5, 50.5]);\n\n    const selectRect = transition().selection().selectAll(`[id^=${uid}${uid}]`).attr('r', 0);\n\n    const selectRectNode = selectRect.node();\n    if (duration > 0 && selectRectNode) {\n      selectRect\n        .transition()\n        .duration(duration)\n        .attr('r', function (_, ind) {\n          return z(data[ind][value]);\n        });\n    }\n  }\n\n  componentDidUpdate() {\n    this.animationCircle();\n  }\n\n  componentDidMount() {\n    this.animationCircle();\n  }\n\n  renderCircle(d, i) {\n    const {\n      color,\n      scale,\n      x,\n      y,\n      offset,\n      styles,\n      uid,\n      duration,\n      value,\n      label,\n      markedCross,\n      size,\n      data,\n    } = this.asProps;\n    const [xScale, yScale] = scale;\n\n    const SBubble = this.Element;\n    const SCenter = 'text';\n    const SLabel = 'text';\n    const z = scaleSqrt()\n      .domain([0, Math.max(...data.map((el) => el[value]))])\n      .range([5.5, 50.5]);\n\n    const margin = Math.min(xScale.range()[0], xScale.range()[1]);\n\n    const labelPosition =\n      size[0] - 2 * margin - (xScale(d[x]) + offset[0] + z(d[value])) < measureText(d[label])\n        ? 'right'\n        : 'left';\n    const labelDistance = {\n      right: xScale(d[x]) + offset[0] - z(d[value]),\n      left: xScale(d[x]) + offset[0] + z(d[value]),\n    }[labelPosition];\n\n    return sstyled(styles)(\n      <g\n        key={`circle(#${i})`}\n        onMouseMove={this.bindHandlerTooltip(true, { ...this.props, xIndex: i })}\n        onMouseLeave={this.bindHandlerTooltip(false, { ...this.props, xIndex: i })}\n      >\n        {markedCross && (\n          <SCenter\n            x={xScale(d[x]) + offset[0]}\n            y={yScale(d[y]) + offset[1]}\n            dy=\".3em\"\n            clipPath={`url(#${uid})`}\n            color={d[color] ?? color}\n          >\n            &#43;\n          </SCenter>\n        )}\n        <SBubble\n          id={`${uid}${uid}`}\n          render=\"circle\"\n          clipPath={`url(#${uid})`}\n          cx={xScale(d[x]) + offset[0]}\n          cy={yScale(d[y]) + offset[1]}\n          color={d[color]}\n          r={z(d[value])}\n          use:duration={`${duration}ms`}\n        />\n        {d[label] && (\n          <SLabel\n            x={labelDistance}\n            y={yScale(d[y]) + offset[1]}\n            dy=\".3em\"\n            clipPath={`url(#${uid})`}\n            position={labelPosition}\n            color={d[color]}\n          >\n            {d[label]}\n          </SLabel>\n        )}\n      </g>,\n    );\n  }\n\n  render() {\n    const { data, uid, scale } = this.asProps;\n    const [xScale, yScale] = scale;\n    const xSize = Math.abs(xScale.range()[0] - xScale.range()[1]);\n    const ySize = Math.abs(yScale.range()[0] - yScale.range()[1]);\n    const xMargin = Math.min(xScale.range()[0], xScale.range()[1]);\n    const yMargin = Math.min(yScale.range()[0], yScale.range()[1]);\n\n    return (\n      <>\n        {data.map(this.renderCircle.bind(this))}\n        {data.map(this.animationCircle.bind(this))}\n        <ClipPath id={uid} x={xMargin} y={yMargin} width={`${xSize}px`} height={`${ySize}px`} />\n      </>\n    );\n  }\n}\n\nconst Bubble = createElement(BubbleRoot);\n\nexport default Bubble;\n"],"file":"Bubble.js"}
+{"version":3,"sources":["../../src/Bubble.jsx"],"names":["React","Component","sstyled","canUseDOM","CONSTANT","measureText","createElement","uniqueIDEnhancement","transition","ClipPath","scaleSqrt","BubbleRoot","document","visible","props","x","clientX","y","clientY","eventEmitter","asProps","virtualElement","getBoundingClientRect","generateGetBoundingClientRect","VIRTUAL_ELEMENT","emit","width","height","top","right","bottom","left","duration","uid","data","value","z","domain","Math","max","map","el","range","selectRect","selection","selectAll","attr","selectRectNode","node","_","ind","animationCircle","d","i","color","scale","offset","styles","label","markedCross","size","xScale","yScale","SBubble","Element","SCenter","SLabel","margin","min","labelPosition","labelDistance","bindHandlerTooltip","xIndex","xSize","abs","ySize","xMargin","yMargin","renderCircle","bind","style","Bubble"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled } from '@semcore/core';\nimport canUseDOM from '@semcore/utils/lib/canUseDOM';\nimport { CONSTANT, measureText } from './utils';\nimport createElement from './createElement';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport { transition } from 'd3-transition';\nimport style from './style/bubble.shadow.css';\nimport ClipPath from './ClipPath';\nimport { scaleSqrt } from 'd3-scale';\n\nclass BubbleRoot extends Component {\n  static displayName = 'Bubble';\n  static style = style;\n  static enhance = [uniqueIDEnhancement()];\n\n  static defaultProps = {\n    offset: [0, 0],\n    duration: 500,\n    markedCross: true,\n  };\n\n  virtualElement = canUseDOM() ? document.createElement('div') : {};\n\n  generateGetBoundingClientRect(x = 0, y = 0) {\n    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });\n  }\n\n  bindHandlerTooltip =\n    (visible, props) =>\n    ({ clientX: x, clientY: y }) => {\n      const { eventEmitter } = this.asProps;\n      this.virtualElement.getBoundingClientRect = this.generateGetBoundingClientRect(x, y);\n      this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;\n      eventEmitter.emit('onTooltipVisible', visible, props, this.virtualElement);\n    };\n\n  animationCircle() {\n    const { duration, uid, data, value } = this.asProps;\n    const z = scaleSqrt()\n      .domain([0, Math.max(...data.map((el) => el[value]))])\n      .range([5.5, 50.5]);\n\n    const selectRect = transition().selection().selectAll(`[id^=${uid}${uid}]`).attr('r', 0);\n\n    const selectRectNode = selectRect.node();\n    if (duration > 0 && selectRectNode) {\n      selectRect\n        .transition()\n        .duration(duration)\n        .attr('r', function (_, ind) {\n          return z(data[ind][value]);\n        });\n    }\n  }\n\n  componentDidUpdate() {\n    this.animationCircle();\n  }\n\n  componentDidMount() {\n    this.animationCircle();\n  }\n\n  renderCircle(d, i) {\n    const {\n      color,\n      scale,\n      x,\n      y,\n      offset,\n      styles,\n      uid,\n      duration,\n      value,\n      label,\n      markedCross,\n      size,\n      data,\n    } = this.asProps;\n    const [xScale, yScale] = scale;\n\n    const SBubble = this.Element;\n    const SCenter = 'text';\n    const SLabel = 'text';\n    const z = scaleSqrt()\n      .domain([0, Math.max(...data.map((el) => el[value]))])\n      .range([5.5, 50.5]);\n\n    const margin = Math.min(xScale.range()[0], xScale.range()[1]);\n\n    const labelPosition =\n      size[0] - 2 * margin - (xScale(d[x]) + offset[0] + z(d[value])) < measureText(d[label])\n        ? 'right'\n        : 'left';\n    const labelDistance = {\n      right: xScale(d[x]) + offset[0] - z(d[value]),\n      left: xScale(d[x]) + offset[0] + z(d[value]),\n    }[labelPosition];\n\n    return sstyled(styles)(\n      <g\n        key={`circle(#${i})`}\n        onMouseMove={this.bindHandlerTooltip(true, { ...this.props, xIndex: i })}\n        onMouseLeave={this.bindHandlerTooltip(false, { ...this.props, xIndex: i })}\n      >\n        {markedCross && (\n          <SCenter\n            x={xScale(d[x]) + offset[0]}\n            y={yScale(d[y]) + offset[1]}\n            dy=\".3em\"\n            clipPath={`url(#${uid})`}\n            color={d[color] ?? color}\n          >\n            &#43;\n          </SCenter>\n        )}\n        <SBubble\n          id={`${uid}${uid}`}\n          index={i}\n          render=\"circle\"\n          clipPath={`url(#${uid})`}\n          cx={xScale(d[x]) + offset[0]}\n          cy={yScale(d[y]) + offset[1]}\n          color={d[color]}\n          r={z(d[value])}\n          use:duration={`${duration}ms`}\n        />\n        {d[label] && (\n          <SLabel\n            x={labelDistance}\n            y={yScale(d[y]) + offset[1]}\n            dy=\".3em\"\n            clipPath={`url(#${uid})`}\n            position={labelPosition}\n            color={d[color]}\n          >\n            {d[label]}\n          </SLabel>\n        )}\n      </g>,\n    );\n  }\n\n  render() {\n    const { data, uid, scale } = this.asProps;\n    const [xScale, yScale] = scale;\n    const xSize = Math.abs(xScale.range()[0] - xScale.range()[1]);\n    const ySize = Math.abs(yScale.range()[0] - yScale.range()[1]);\n    const xMargin = Math.min(xScale.range()[0], xScale.range()[1]);\n    const yMargin = Math.min(yScale.range()[0], yScale.range()[1]);\n\n    return (\n      <>\n        {data.map(this.renderCircle.bind(this))}\n        {data.map(this.animationCircle.bind(this))}\n        <ClipPath id={uid} x={xMargin} y={yMargin} width={`${xSize}px`} height={`${ySize}px`} />\n      </>\n    );\n  }\n}\n\nconst Bubble = createElement(BubbleRoot);\n\nexport default Bubble;\n"],"file":"Bubble.js"}

package/lib/es6/Donut.js

@@ -1,3 +1,4 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -7,12 +8,17 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { sstyled as _sstyled } from "@semcore/core";
+var _excluded = ["Element", "styles", "d3Arc", "data", "color", "$animationActivePie", "active", "d3ArcOut"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { arc, pie } from 'd3-shape';
 import { Component, sstyled } from '@semcore/core';
 import canUseDOM from '@semcore/utils/lib/canUseDOM';
@@ -28,23 +34,25 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SPie_60wu6_gg_{stroke:#fff;fill:#2bb3ff}.___SPie_60wu6_gg_.__color_60wu6_gg_{fill:var(--color_q6oc02)}.___SEmptyData_60wu6_gg_{fill:#e0e1e9}.___SEmptyData_60wu6_gg_.__color_60wu6_gg_{fill:var(--color_q6oc02)}.___SLabel_60wu6_gg_{text-anchor:middle;vertical-anchor:middle}"
+".___SPie_c6o4e_gg_{stroke:#fff;fill:#2bb3ff}.___SPie_c6o4e_gg_.__color_c6o4e_gg_{fill:var(--color_c6o4e)}.___SEmptyData_c6o4e_gg_{fill:#e0e1e9}.___SEmptyData_c6o4e_gg_.__color_c6o4e_gg_{fill:var(--color_c6o4e)}.___SLabel_c6o4e_gg_{text-anchor:middle;vertical-anchor:middle}"
 /*__inner_css_end__*/
-, "q6oc02_gg_")
+, "c6o4e_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SPie": "___SPie_60wu6_gg_",
-  "_color": "__color_60wu6_gg_",
-  "--color": "--color_q6oc02",
-  "__SEmptyData": "___SEmptyData_60wu6_gg_",
-  "__SLabel": "___SLabel_60wu6_gg_"
+  "__SPie": "___SPie_c6o4e_gg_",
+  "_color": "__color_c6o4e_gg_",
+  "--color": "--color_c6o4e",
+  "__SEmptyData": "___SEmptyData_c6o4e_gg_",
+  "__SLabel": "___SLabel_c6o4e_gg_"
 });
 var DEFAULT_INSTANCE = Symbol('DEFAULT_INSTANCE');
 
 function animationInitialPie(_ref4) {
   var halfsize = _ref4.halfsize,
       d3Arc = _ref4.d3Arc,
-      arcs = _ref4.arcs;
+      d3ArcOut = _ref4.d3ArcOut,
+      arcs = _ref4.arcs,
+      activeIndexPie = _ref4.activeIndexPie;
   return function (_, ind) {
     var d = arcs[ind];
     if (!d) return function () {
@@ -55,7 +63,7 @@ function animationInitialPie(_ref4) {
     return function (t) {
       d.startAngle = iStart(t);
       d.endAngle = iEnd(t);
-      return d3Arc(d);
+      return ind === activeIndexPie ? d3ArcOut(d) : d3Arc(d);
     };
   };
 }
@@ -143,6 +151,8 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "virtualElement", canUseDOM() ? document.createElement('div') : {});
 
+    _defineProperty(_assertThisInitialized(_this), "activeIndexPie", undefined);
+
     _defineProperty(_assertThisInitialized(_this), "bindHandlerTooltip", function (visible, props) {
       return function (_ref8) {
         var x = _ref8.clientX,
@@ -154,15 +164,39 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
       };
     });
 
+    _defineProperty(_assertThisInitialized(_this), "animationActivePie", function (props) {
+      var _this$asProps = _this.asProps,
+          duration = _this$asProps.duration,
+          innerRadius = _this$asProps.innerRadius;
+      var active = props.active,
+          data = props.data,
+          selector = props.selector;
+      innerRadius = innerRadius > increaseFactor ? innerRadius - increaseFactor : innerRadius;
+      var outerRadius = getOuterRadius(_this.asProps);
+      active ? animationHoverPie({
+        d: data,
+        selector: "#".concat(_this.id, " ").concat(selector),
+        duration: duration === 0 ? 0 : 300,
+        innerRadius: innerRadius,
+        outerRadius: [outerRadius, outerRadius + increaseFactor]
+      }) : animationHoverPie({
+        d: data,
+        selector: "#".concat(_this.id, " ").concat(selector),
+        duration: duration === 0 ? 0 : 300,
+        innerRadius: innerRadius,
+        outerRadius: [outerRadius + increaseFactor, outerRadius]
+      });
+    });
+
     return _this;
   }
 
   _createClass(DonutRoot, [{
     key: "id",
     get: function get() {
-      var _this$asProps = this.asProps,
-          uid = _this$asProps.uid,
-          id = _this$asProps.id;
+      var _this$asProps2 = this.asProps,
+          uid = _this$asProps2.uid,
+          id = _this$asProps2.id;
       return id || uid;
     }
   }, {
@@ -184,10 +218,10 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getArcs",
     value: function getArcs() {
-      var _this$asProps2 = this.asProps,
-          Children = _this$asProps2.Children,
-          data = _this$asProps2.data,
-          d3Pie = _this$asProps2.d3Pie;
+      var _this$asProps3 = this.asProps,
+          Children = _this$asProps3.Children,
+          data = _this$asProps3.data,
+          d3Pie = _this$asProps3.d3Pie;
       var pieData = Object.entries(data);
 
       if (d3Pie[DEFAULT_INSTANCE]) {
@@ -226,39 +260,40 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "getPieProps",
-    value: function getPieProps(props) {
+    value: function getPieProps(props, ind) {
       var _this2 = this;
 
-      var _this$asProps3 = this.asProps,
-          d3Arc = _this$asProps3.d3Arc,
-          duration = _this$asProps3.duration,
-          innerRadius = _this$asProps3.innerRadius;
-      innerRadius = innerRadius > increaseFactor ? innerRadius - increaseFactor : innerRadius;
-      var outerRadius = getOuterRadius(this.asProps);
+      var _this$asProps4 = this.asProps,
+          d3Arc = _this$asProps4.d3Arc,
+          d3ArcOut = _this$asProps4.d3ArcOut;
+      var active = props.active;
       var data = this.arcs.find(function (arc) {
         return arc.data[0] === props.dataKey;
       });
+
+      if (active) {
+        this.activeIndexPie = ind;
+      }
+
       return {
         data: data,
         d3Arc: d3Arc,
+        d3ArcOut: d3ArcOut,
+        $animationActivePie: this.animationActivePie,
         onMouseMove: this.bindHandlerTooltip(true, props),
         onMouseLeave: this.bindHandlerTooltip(false, props),
         onMouseOver: function onMouseOver(e) {
-          animationHoverPie({
-            d: data,
-            selector: "#".concat(_this2.id, " [d=\"").concat(e.target.getAttribute('d'), "\"]"),
-            duration: duration === 0 ? 0 : 300,
-            innerRadius: innerRadius,
-            outerRadius: [outerRadius, outerRadius + increaseFactor]
+          !active && _this2.animationActivePie({
+            active: true,
+            data: data,
+            selector: "[d=\"".concat(e.target.getAttribute('d'), "\"]")
           });
         },
         onMouseOut: function onMouseOut(e) {
-          animationHoverPie({
-            d: data,
-            selector: "#".concat(_this2.id, " [d=\"").concat(e.target.getAttribute('d'), "\"]"),
-            duration: duration === 0 ? 0 : 300,
-            innerRadius: innerRadius,
-            outerRadius: [outerRadius + increaseFactor, outerRadius]
+          !active && _this2.animationActivePie({
+            active: false,
+            data: data,
+            selector: "[d=\"".concat(e.target.getAttribute('d'), "\"]")
           });
         }
       };
@@ -274,11 +309,11 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$asProps4 = this.asProps,
-          data = _this$asProps4.data,
-          duration = _this$asProps4.duration,
-          d3Arc = _this$asProps4.d3Arc,
-          halfsize = _this$asProps4.halfsize;
+      var _this$asProps5 = this.asProps,
+          data = _this$asProps5.data,
+          duration = _this$asProps5.duration,
+          d3Arc = _this$asProps5.d3Arc,
+          halfsize = _this$asProps5.halfsize;
       var arcs = this.arcs;
 
       if (prevProps.$rootProps.data !== data && duration > 0) {
@@ -292,10 +327,11 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$asProps5 = this.asProps,
-          duration = _this$asProps5.duration,
-          d3Arc = _this$asProps5.d3Arc,
-          halfsize = _this$asProps5.halfsize;
+      var _this$asProps6 = this.asProps,
+          duration = _this$asProps6.duration,
+          d3Arc = _this$asProps6.d3Arc,
+          halfsize = _this$asProps6.halfsize,
+          d3ArcOut = _this$asProps6.d3ArcOut;
       var arcs = this.arcs;
 
       if (duration > 0) {
@@ -304,16 +340,18 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
         }).transition().duration(duration).attrTween('d', animationInitialPie({
           halfsize: halfsize,
           d3Arc: d3Arc,
-          arcs: arcs
+          d3ArcOut: d3ArcOut,
+          arcs: arcs,
+          activeIndexPie: this.activeIndexPie
         }));
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$asProps6 = this.asProps,
-          halfsize = _this$asProps6.halfsize,
-          size = _this$asProps6.size;
+      var _this$asProps7 = this.asProps,
+          halfsize = _this$asProps7.halfsize,
+          size = _this$asProps7.size;
 
       var _size2 = _slicedToArray(size, 2),
           width = _size2[0],
@@ -352,6 +390,11 @@ _defineProperty(DonutRoot, "defaultProps", function (_ref18) {
     halfsize: halfsize,
     outerRadius: outerRadius
   })).innerRadius(innerRadius > increaseFactor ? innerRadius - increaseFactor : innerRadius);
+  var d3ArcOut = arc().outerRadius(getOuterRadius({
+    size: size,
+    halfsize: halfsize,
+    outerRadius: outerRadius
+  }) + increaseFactor).innerRadius(innerRadius > increaseFactor ? innerRadius - increaseFactor : innerRadius);
   var d3Pie = pie().sort(null).value(function (_ref19) {
     var _ref20 = _slicedToArray(_ref19, 2),
         value = _ref20[1];
@@ -367,6 +410,7 @@ _defineProperty(DonutRoot, "defaultProps", function (_ref18) {
   return {
     d3Pie: d3Pie,
     d3Arc: d3Arc,
+    d3ArcOut: d3ArcOut,
     duration: 500
   };
 });
@@ -378,11 +422,37 @@ function Pie(_ref15) {
       styles = _ref15.styles,
       d3Arc = _ref15.d3Arc,
       data = _ref15.data,
-      color = _ref15.color;
+      color = _ref15.color,
+      $animationActivePie = _ref15.$animationActivePie,
+      active = _ref15.active,
+      d3ArcOut = _ref15.d3ArcOut,
+      other = _objectWithoutProperties(_ref15, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMount = _useState2[0],
+      setIsMount = _useState2[1];
+
+  useEffect(function () {
+    //you should't run animation for first render
+    if (!isMount) {
+      setIsMount(true);
+      return;
+    }
+
+    if (active !== undefined && active !== null) {
+      //name must unique on page
+      $animationActivePie(_objectSpread(_objectSpread({}, other), {}, {
+        active: active,
+        data: data,
+        selector: "[name=\"".concat(other.name, "\"]")
+      }));
+    }
+  }, [active]);
   return _ref = sstyled(styles), /*#__PURE__*/React.createElement(SPie, _ref.cn("SPie", {
     "render": "path",
     "color": color,
-    "d": d3Arc(data)
+    "d": active ? d3ArcOut(data) : d3Arc(data)
   }));
 }