@semcore/d3-chart 1.0.0-8 → 1.2.0

package/lib/es6/HorizontalBar.js

@@ -5,33 +5,34 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
+import { sstyled as _sstyled } from "@semcore/core";
 
 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 { Component, styled, css, __css__, set, create, map } from '@semcore/core';
+import { Component, sstyled } from '@semcore/core';
 import createElement from './createElement';
+import ClipPath from './ClipPath';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 
 /*__reshadow-styles__:"./style/bar.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-__css__(
+_sstyled.insert(
 /*__inner_css_start__*/
-".___SBar_g0awa_gg_.__hide_g0awa_gg_{display:none}.___SBackground_g0awa_gg_{fill:#e4ecf1}"
+".___SBar_1u1r9_gg_{fill:var(--color_10kcl1b);transition-property:height,width,y;transition-duration:var(--duration_10kcl1b);transition-timing-function:ease-in-out}.___SBar_1u1r9_gg_.__hide_1u1r9_gg_{display:none}.___SBackground_1u1r9_gg_{fill:#e4ecf1}"
 /*__inner_css_end__*/
-, "rkv0hj_gg_")
+, "10kcl1b_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SBar": "___SBar_g0awa_gg_",
-  "_hide": "__hide_g0awa_gg_",
-  "__SBackground": "___SBackground_g0awa_gg_"
-}),
-    style = _extends({}, _ref);
-
-var styled_c8 = create([]);
+  "__SBar": "___SBar_1u1r9_gg_",
+  "--color": "--color_10kcl1b",
+  "--duration": "--duration_10kcl1b",
+  "_hide": "__hide_1u1r9_gg_",
+  "__SBackground": "___SBackground_1u1r9_gg_"
+});
 
 var HorizontalBarRoot = /*#__PURE__*/function (_Component) {
   _inherits(HorizontalBarRoot, _Component);
@@ -55,8 +56,10 @@ var HorizontalBarRoot = /*#__PURE__*/function (_Component) {
       };
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "renderBar",
+    value: function renderBar(d, i) {
+      var _ref, _d$x, _d$x2;
+
       var SBar = this.Element;
       var _this$asProps2 = this.asProps,
           styles = _this$asProps2.styles,
@@ -64,31 +67,52 @@ var HorizontalBarRoot = /*#__PURE__*/function (_Component) {
           x = _this$asProps2.x,
           x0 = _this$asProps2.x0,
           y = _this$asProps2.y,
-          data = _this$asProps2.data,
           scale = _this$asProps2.scale,
-          offset = _this$asProps2.offset;
+          hide = _this$asProps2.hide,
+          offset = _this$asProps2.offset,
+          uid = _this$asProps2.uid,
+          duration = _this$asProps2.duration;
 
       var _scale = _slicedToArray(scale, 2),
           xScale = _scale[0],
           yScale = _scale[1];
 
-      return data.map(function (d, i) {
-        var _d$x, _d$x2;
-
-        return styled((set([styled_c8, styles]), /*#__PURE__*/React.createElement(SBar, map("SBar", {
-          key: i,
-          __excludeProps: ['data', 'scale', 'value'],
-          value: d,
-          index: i,
-          render: "rect",
-          childrenPosition: "above",
-          fill: color,
-          width: Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale((_d$x = d[x0]) !== null && _d$x !== void 0 ? _d$x : 0))),
-          height: yScale.bandwidth(),
-          x: xScale(Math.min((_d$x2 = d[x0]) !== null && _d$x2 !== void 0 ? _d$x2 : 0, d[x])) + offset[0],
-          y: yScale(d[y]) + offset[1]
-        }))));
-      });
+      return _ref = sstyled(styles), /*#__PURE__*/React.createElement(SBar, _ref.cn("SBar", {
+        "key": "horizontal-bar-".concat(i),
+        "render": "rect",
+        "clipPath": "url(#".concat(uid, ")"),
+        "__excludeProps": ['data', 'scale', 'value'],
+        "childrenPosition": "above",
+        "value": d,
+        "index": i,
+        "hide": hide,
+        "color": color,
+        "width": Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale((_d$x = d[x0]) !== null && _d$x !== void 0 ? _d$x : 0))),
+        "height": yScale.bandwidth(),
+        "x": xScale(Math.min((_d$x2 = d[x0]) !== null && _d$x2 !== void 0 ? _d$x2 : 0, d[x])) + offset[0],
+        "y": yScale(d[y]) + offset[1],
+        "use:duration": "".concat(duration, "ms")
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$asProps3 = this.asProps,
+          data = _this$asProps3.data,
+          uid = _this$asProps3.uid,
+          size = _this$asProps3.size,
+          duration = _this$asProps3.duration;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(this.renderBar.bind(this)), duration && /*#__PURE__*/React.createElement(ClipPath, {
+        setAttributeTag: function setAttributeTag(rect) {
+          rect.setAttribute('width', size[0]);
+        },
+        id: uid,
+        x: "0",
+        y: "0",
+        width: 0,
+        height: size[1],
+        transition: "width ".concat(duration, "ms ease-in-out")
+      }));
     }
   }]);
 
@@ -97,16 +121,19 @@ var HorizontalBarRoot = /*#__PURE__*/function (_Component) {
 
 _defineProperty(HorizontalBarRoot, "displayName", 'HorizontalBar');
 
+_defineProperty(HorizontalBarRoot, "enhance", [uniqueIDEnhancement()]);
+
 _defineProperty(HorizontalBarRoot, "style", style);
 
 _defineProperty(HorizontalBarRoot, "defaultProps", {
   color: '#50aef4',
-  offset: [0, 0]
+  offset: [0, 0],
+  duration: 500
 });
 
-var styled_12c = create([]);
-
 function Background(props) {
+  var _ref2;
+
   var SBackground = props.Element,
       styles = props.styles,
       scale = props.scale,
@@ -117,14 +144,14 @@ function Background(props) {
       yScale = _scale2[1];
 
   var xRange = xScale.range();
-  return styled((set([styled_12c, styles]), /*#__PURE__*/React.createElement(SBackground, map("SBackground", {
-    render: "rect",
-    childrenPosition: "above",
-    width: xRange[1] - xRange[0],
-    height: yScale.bandwidth(),
-    x: xRange[0],
-    y: yScale(value)
-  }))));
+  return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SBackground, _ref2.cn("SBackground", {
+    "render": "rect",
+    "childrenPosition": "above",
+    "width": xRange[1] - xRange[0],
+    "height": yScale.bandwidth(),
+    "x": xRange[0],
+    "y": yScale(value)
+  }));
 }
 
 export default createElement(HorizontalBarRoot, {

package/lib/es6/HorizontalBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/HorizontalBar.js"],"names":["React","Component","styled","createElement","HorizontalBarRoot","props","index","asProps","data","y","value","SBar","Element","styles","color","x","x0","scale","offset","xScale","yScale","map","d","i","Math","abs","max","domain","bandwidth","min","style","Background","SBackground","xRange","range"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, styled } from '@semcore/core';\nimport createElement from './createElement';\n\nimport style from './style/bar.shadow.css';\n\nclass HorizontalBarRoot extends Component {\n  static displayName = 'HorizontalBar';\n\n  static style = style;\n\n  static defaultProps = {\n    color: '#50aef4',\n    offset: [0, 0],\n  };\n\n  getBackgroundProps(props, index) {\n    const { data, y } = this.asProps;\n    return {\n      value: data[index][y],\n    };\n  }\n\n  render() {\n    const SBar = this.Element;\n    const { styles, color, x, x0, y, data, scale, offset } = this.asProps;\n    const [xScale, yScale] = scale;\n\n    return data.map((d, i) => {\n      return styled(styles)(\n        <SBar\n          key={i}\n          __excludeProps={['data', 'scale', 'value']}\n          value={d}\n          index={i}\n          render=\"rect\"\n          childrenPosition=\"above\"\n          fill={color}\n          width={Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale(d[x0] ?? 0)))}\n          height={yScale.bandwidth()}\n          x={xScale(Math.min(d[x0] ?? 0, d[x])) + offset[0]}\n          y={yScale(d[y]) + offset[1]}\n        />,\n      );\n    });\n  }\n}\n\nfunction Background(props) {\n  const { Element: SBackground, styles, scale, value } = props;\n  const [xScale, yScale] = scale;\n  const xRange = xScale.range();\n\n  return styled(styles)(\n    <SBackground\n      render=\"rect\"\n      childrenPosition=\"above\"\n      width={xRange[1] - xRange[0]}\n      height={yScale.bandwidth()}\n      x={xRange[0]}\n      y={yScale(value)}\n    />,\n  );\n}\n\nexport default createElement(HorizontalBarRoot, { Background });\n"],"file":"HorizontalBar.js"}
+{"version":3,"sources":["../../src/HorizontalBar.js"],"names":["React","Component","sstyled","createElement","ClipPath","uniqueIDEnhancement","HorizontalBarRoot","props","index","asProps","data","y","value","d","i","SBar","Element","styles","color","x","x0","scale","hide","offset","uid","duration","xScale","yScale","Math","abs","max","domain","bandwidth","min","size","map","renderBar","bind","rect","setAttribute","style","Background","SBackground","xRange","range"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled } from '@semcore/core';\nimport createElement from './createElement';\nimport ClipPath from './ClipPath';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/bar.shadow.css';\n\nclass HorizontalBarRoot extends Component {\n  static displayName = 'HorizontalBar';\n  static enhance = [uniqueIDEnhancement()];\n  static style = style;\n\n  static defaultProps = {\n    color: '#50aef4',\n    offset: [0, 0],\n    duration: 500,\n  };\n\n  getBackgroundProps(props, index) {\n    const { data, y } = this.asProps;\n    return {\n      value: data[index][y],\n    };\n  }\n\n  renderBar(d, i) {\n    const SBar = this.Element;\n    const { styles, color, x, x0, y, scale, hide, offset, uid, duration } = this.asProps;\n    const [xScale, yScale] = scale;\n\n    return sstyled(styles)(\n      <SBar\n        key={`horizontal-bar-${i}`}\n        render=\"rect\"\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        width={Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale(d[x0] ?? 0)))}\n        height={yScale.bandwidth()}\n        x={xScale(Math.min(d[x0] ?? 0, d[x])) + offset[0]}\n        y={yScale(d[y]) + offset[1]}\n        use:duration={`${duration}ms`}\n      />,\n    );\n  }\n\n  render() {\n    const { data, uid, size, duration } = this.asProps;\n\n    return (\n      <>\n        {data.map(this.renderBar.bind(this))}\n        {duration && (\n          <ClipPath\n            setAttributeTag={(rect) => {\n              rect.setAttribute('width', size[0]);\n            }}\n            id={uid}\n            x=\"0\"\n            y=\"0\"\n            width={0}\n            height={size[1]}\n            transition={`width ${duration}ms ease-in-out`}\n          />\n        )}\n      </>\n    );\n  }\n}\n\nfunction Background(props) {\n  const { Element: SBackground, styles, scale, value } = props;\n  const [xScale, yScale] = scale;\n  const xRange = xScale.range();\n\n  return sstyled(styles)(\n    <SBackground\n      render=\"rect\"\n      childrenPosition=\"above\"\n      width={xRange[1] - xRange[0]}\n      height={yScale.bandwidth()}\n      x={xRange[0]}\n      y={yScale(value)}\n    />,\n  );\n}\n\nexport default createElement(HorizontalBarRoot, { Background });\n"],"file":"HorizontalBar.js"}

package/lib/es6/Hover.js

@@ -6,32 +6,31 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
+import { sstyled as _sstyled } from "@semcore/core";
 
 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 { Component, styled, css, __css__, set, create, map } from '@semcore/core';
+import { Component, sstyled } from '@semcore/core';
 import createElement from './createElement';
 import trottle from '@semcore/utils/lib/rafTrottle';
 import { scaleOfBandwidth, getIndexFromData, eventToPoint, invert } from './utils';
 
 /*__reshadow-styles__:"./style/hover.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-__css__(
+_sstyled.insert(
 /*__inner_css_start__*/
-".___SHoverLine_1j0lo_gg_{stroke:#a6b0b3}.___SHoverRect_1j0lo_gg_{fill:rgba(152,170,175,.3)}"
+".___SHoverLine_wqcps_gg_{stroke:#a6b0b3}.___SHoverRect_wqcps_gg_{fill:rgba(152,170,175,.3)}"
 /*__inner_css_end__*/
-, "10eypqq_gg_")
+, "1tjsi7e_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SHoverLine": "___SHoverLine_1j0lo_gg_",
-  "__SHoverRect": "___SHoverRect_1j0lo_gg_"
-}),
-    style = _extends({}, _ref);
+  "__SHoverLine": "___SHoverLine_wqcps_gg_",
+  "__SHoverRect": "___SHoverRect_wqcps_gg_"
+});
 
 var Hover = /*#__PURE__*/function (_Component) {
   _inherits(Hover, _Component);
@@ -133,8 +132,6 @@ var Hover = /*#__PURE__*/function (_Component) {
 
 _defineProperty(Hover, "style", style);
 
-var styled_c8 = create([]);
-
 var HoverLineRoot = /*#__PURE__*/function (_Hover) {
   _inherits(HoverLineRoot, _Hover);
 
@@ -149,6 +146,8 @@ var HoverLineRoot = /*#__PURE__*/function (_Hover) {
   _createClass(HoverLineRoot, [{
     key: "render",
     value: function render() {
+      var _ref;
+
       var SHoverLine = this.Element;
       var _this$asProps2 = this.asProps,
           styles = _this$asProps2.styles,
@@ -168,23 +167,23 @@ var HoverLineRoot = /*#__PURE__*/function (_Hover) {
       var yRange = yScale.range();
       var x1 = xIndex !== null ? scaleOfBandwidth(xScale, data[xIndex][x]) : undefined;
       var y1 = yIndex !== null ? scaleOfBandwidth(yScale, data[yIndex][y]) : undefined;
-      return styled((set([styled_c8, styles]), /*#__PURE__*/React.createElement(React.Fragment, null, xIndex !== null ? /*#__PURE__*/React.createElement(SHoverLine, map("SHoverLine", {
-        render: "line",
-        ref: this.hoverRef,
-        index: xIndex,
-        x1: x1,
-        y1: yRange[0],
-        x2: x1,
-        y2: yRange[1]
-      })) : null, yIndex !== null ? /*#__PURE__*/React.createElement(SHoverLine, map("SHoverLine", {
-        render: "line",
-        ref: this.hoverRef,
-        index: yIndex,
-        x1: xRange[0],
-        y1: y1,
-        x2: xRange[1],
-        y2: y1
-      })) : null)));
+      return _ref = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, xIndex !== null ? /*#__PURE__*/React.createElement(SHoverLine, _ref.cn("SHoverLine", {
+        "render": "line",
+        "ref": this.hoverRef,
+        "index": xIndex,
+        "x1": x1,
+        "y1": yRange[0],
+        "x2": x1,
+        "y2": yRange[1]
+      })) : null, yIndex !== null ? /*#__PURE__*/React.createElement(SHoverLine, _ref.cn("SHoverLine", {
+        "render": "line",
+        "ref": this.hoverRef,
+        "index": yIndex,
+        "x1": xRange[0],
+        "y1": y1,
+        "x2": xRange[1],
+        "y2": y1
+      })) : null);
     }
   }]);
 
@@ -193,8 +192,6 @@ var HoverLineRoot = /*#__PURE__*/function (_Hover) {
 
 _defineProperty(HoverLineRoot, "displayName", 'HoverLine');
 
-var styled_12c = create([]);
-
 var HoverRectRoot = /*#__PURE__*/function (_Hover2) {
   _inherits(HoverRectRoot, _Hover2);
 
@@ -209,6 +206,8 @@ var HoverRectRoot = /*#__PURE__*/function (_Hover2) {
   _createClass(HoverRectRoot, [{
     key: "render",
     value: function render() {
+      var _ref2;
+
       var SHoverRect = this.Element;
       var _this$asProps3 = this.asProps,
           styles = _this$asProps3.styles,
@@ -226,23 +225,23 @@ var HoverRectRoot = /*#__PURE__*/function (_Hover2) {
 
       var xRange = xScale.range();
       var yRange = yScale.range();
-      return styled((set([styled_12c, styles]), /*#__PURE__*/React.createElement(React.Fragment, null, xIndex !== null ? /*#__PURE__*/React.createElement(SHoverRect, map("SHoverRect", {
-        render: "rect",
-        ref: this.hoverRef,
-        index: xIndex,
-        width: xScale.step() - xScale.paddingInner() / 2,
-        height: yRange[0] - yRange[1],
-        x: xScale(data[xIndex][x]) - xScale.step() * xScale.paddingInner() / 2,
-        y: yRange[1]
-      })) : null, yIndex !== null ? /*#__PURE__*/React.createElement(SHoverRect, map("SHoverRect", {
-        render: "rect",
-        ref: this.hoverRef,
-        index: yIndex,
-        width: xRange[1] - xRange[0],
-        height: yScale.step() - yScale.paddingInner() / 2,
-        x: xRange[0],
-        y: yScale(data[yIndex][y]) - yScale.step() * yScale.paddingInner() / 2
-      })) : null)));
+      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, xIndex !== null ? /*#__PURE__*/React.createElement(SHoverRect, _ref2.cn("SHoverRect", {
+        "render": "rect",
+        "ref": this.hoverRef,
+        "index": xIndex,
+        "width": xScale.step() - xScale.paddingInner() / 2,
+        "height": yRange[0] - yRange[1],
+        "x": xScale(data[xIndex][x]) - xScale.step() * xScale.paddingInner() / 2,
+        "y": yRange[1]
+      })) : null, yIndex !== null ? /*#__PURE__*/React.createElement(SHoverRect, _ref2.cn("SHoverRect", {
+        "render": "rect",
+        "ref": this.hoverRef,
+        "index": yIndex,
+        "width": xRange[1] - xRange[0],
+        "height": yScale.step() - yScale.paddingInner() / 2,
+        "x": xRange[0],
+        "y": yScale(data[yIndex][y]) - yScale.step() * yScale.paddingInner() / 2
+      })) : null);
     }
   }]);
 

package/lib/es6/Hover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Hover.js"],"names":["React","Component","styled","createElement","trottle","scaleOfBandwidth","getIndexFromData","eventToPoint","invert","Hover","xIndex","yIndex","createRef","e","asProps","eventEmitter","data","scale","x","y","rootRef","xScale","yScale","current","pX","pY","vX","vY","undefined","state","setState","emit","hoverRef","unsubscribeMouseMoveRoot","subscribe","persist","handlerMouseMoveRoot","unsubscribeMouseLeaveRoot","handlerMouseLeaveRoot","style","HoverLineRoot","SHoverLine","Element","styles","xRange","range","yRange","x1","y1","HoverRectRoot","SHoverRect","step","paddingInner","HoverLine","HoverRect"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, styled } from '@semcore/core';\nimport createElement from './createElement';\nimport trottle from '@semcore/utils/lib/rafTrottle';\nimport { scaleOfBandwidth, getIndexFromData, eventToPoint, invert } from './utils';\n\nimport style from './style/hover.shadow.css';\n\nclass Hover extends Component {\n  static style = style;\n\n  state = {\n    xIndex: null,\n    yIndex: null,\n  };\n\n  hoverRef = React.createRef();\n\n  handlerMouseMoveRoot = trottle((e) => {\n    const { eventEmitter, data, scale, x, y, rootRef } = this.asProps;\n    const [xScale, yScale] = scale;\n    const [pX, pY] = eventToPoint(e, rootRef.current);\n    const vX = invert(xScale, pX);\n    const vY = invert(yScale, pY);\n    const xIndex =\n      x === undefined || vX === undefined ? null : getIndexFromData(data, xScale, x, vX);\n    const yIndex =\n      y === undefined || vY === undefined ? null : getIndexFromData(data, yScale, y, vY);\n    const state = { xIndex, yIndex };\n    this.setState(state, () => {\n      eventEmitter.emit(\n        'onTooltipVisible',\n        xIndex !== null || yIndex !== null,\n        state,\n        this.hoverRef.current,\n      );\n    });\n  });\n\n  handlerMouseLeaveRoot = trottle(() => {\n    const state = {\n      xIndex: null,\n      yIndex: null,\n    };\n    this.setState(state, () => {\n      this.asProps.eventEmitter.emit('onTooltipVisible', false, state);\n    });\n  });\n\n  componentDidMount() {\n    const { eventEmitter } = this.asProps;\n    this.unsubscribeMouseMoveRoot = eventEmitter.subscribe('onMouseMoveRoot', (e) => {\n      e.persist();\n      this.handlerMouseMoveRoot(e);\n    });\n    this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe(\n      'onMouseLeaveRoot',\n      this.handlerMouseLeaveRoot,\n    );\n  }\n\n  componentWillUnmount() {\n    if (this.unsubscribeMouseMoveRoot) {\n      this.unsubscribeMouseMoveRoot();\n    }\n    if (this.unsubscribeMouseLeaveRoot) {\n      this.unsubscribeMouseLeaveRoot();\n    }\n  }\n}\n\nclass HoverLineRoot extends Hover {\n  static displayName = 'HoverLine';\n\n  render() {\n    const SHoverLine = this.Element;\n    const { styles, x, y, data, scale } = this.asProps;\n    const { xIndex, yIndex } = this.state;\n    const [xScale, yScale] = scale;\n\n    const xRange = xScale.range();\n    const yRange = yScale.range();\n    const x1 = xIndex !== null ? scaleOfBandwidth(xScale, data[xIndex][x]) : undefined;\n    const y1 = yIndex !== null ? scaleOfBandwidth(yScale, data[yIndex][y]) : undefined;\n\n    return styled(styles)(\n      <>\n        {xIndex !== null ? (\n          <SHoverLine\n            render=\"line\"\n            ref={this.hoverRef}\n            index={xIndex}\n            x1={x1}\n            y1={yRange[0]}\n            x2={x1}\n            y2={yRange[1]}\n          />\n        ) : null}\n        {yIndex !== null ? (\n          <SHoverLine\n            render=\"line\"\n            ref={this.hoverRef}\n            index={yIndex}\n            x1={xRange[0]}\n            y1={y1}\n            x2={xRange[1]}\n            y2={y1}\n          />\n        ) : null}\n      </>,\n    );\n  }\n}\n\nclass HoverRectRoot extends Hover {\n  static displayName = 'HoverRect';\n\n  render() {\n    const SHoverRect = this.Element;\n    const { styles, x, y, data, scale } = this.asProps;\n    const { xIndex, yIndex } = this.state;\n    const [xScale, yScale] = scale;\n\n    const xRange = xScale.range();\n    const yRange = yScale.range();\n\n    return styled(styles)(\n      <>\n        {xIndex !== null ? (\n          <SHoverRect\n            render=\"rect\"\n            ref={this.hoverRef}\n            index={xIndex}\n            width={xScale.step() - xScale.paddingInner() / 2}\n            height={yRange[0] - yRange[1]}\n            x={xScale(data[xIndex][x]) - (xScale.step() * xScale.paddingInner()) / 2}\n            y={yRange[1]}\n          />\n        ) : null}\n        {yIndex !== null ? (\n          <SHoverRect\n            render=\"rect\"\n            ref={this.hoverRef}\n            index={yIndex}\n            width={xRange[1] - xRange[0]}\n            height={yScale.step() - yScale.paddingInner() / 2}\n            x={xRange[0]}\n            y={yScale(data[yIndex][y]) - (yScale.step() * yScale.paddingInner()) / 2}\n          />\n        ) : null}\n      </>,\n    );\n  }\n}\n\nconst HoverLine = createElement(HoverLineRoot);\nconst HoverRect = createElement(HoverRectRoot);\n\nexport { HoverLine, HoverRect };\n"],"file":"Hover.js"}
+{"version":3,"sources":["../../src/Hover.js"],"names":["React","Component","sstyled","createElement","trottle","scaleOfBandwidth","getIndexFromData","eventToPoint","invert","Hover","xIndex","yIndex","createRef","e","asProps","eventEmitter","data","scale","x","y","rootRef","xScale","yScale","current","pX","pY","vX","vY","undefined","state","setState","emit","hoverRef","unsubscribeMouseMoveRoot","subscribe","persist","handlerMouseMoveRoot","unsubscribeMouseLeaveRoot","handlerMouseLeaveRoot","style","HoverLineRoot","SHoverLine","Element","styles","xRange","range","yRange","x1","y1","HoverRectRoot","SHoverRect","step","paddingInner","HoverLine","HoverRect"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled } from '@semcore/core';\nimport createElement from './createElement';\nimport trottle from '@semcore/utils/lib/rafTrottle';\nimport { scaleOfBandwidth, getIndexFromData, eventToPoint, invert } from './utils';\n\nimport style from './style/hover.shadow.css';\n\nclass Hover extends Component {\n  static style = style;\n\n  state = {\n    xIndex: null,\n    yIndex: null,\n  };\n\n  hoverRef = React.createRef();\n\n  handlerMouseMoveRoot = trottle((e) => {\n    const { eventEmitter, data, scale, x, y, rootRef } = this.asProps;\n    const [xScale, yScale] = scale;\n    const [pX, pY] = eventToPoint(e, rootRef.current);\n    const vX = invert(xScale, pX);\n    const vY = invert(yScale, pY);\n    const xIndex =\n      x === undefined || vX === undefined ? null : getIndexFromData(data, xScale, x, vX);\n    const yIndex =\n      y === undefined || vY === undefined ? null : getIndexFromData(data, yScale, y, vY);\n    const state = { xIndex, yIndex };\n    this.setState(state, () => {\n      eventEmitter.emit(\n        'onTooltipVisible',\n        xIndex !== null || yIndex !== null,\n        state,\n        this.hoverRef.current,\n      );\n    });\n  });\n\n  handlerMouseLeaveRoot = trottle(() => {\n    const state = {\n      xIndex: null,\n      yIndex: null,\n    };\n    this.setState(state, () => {\n      this.asProps.eventEmitter.emit('onTooltipVisible', false, state);\n    });\n  });\n\n  componentDidMount() {\n    const { eventEmitter } = this.asProps;\n    this.unsubscribeMouseMoveRoot = eventEmitter.subscribe('onMouseMoveRoot', (e) => {\n      e.persist();\n      this.handlerMouseMoveRoot(e);\n    });\n    this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe(\n      'onMouseLeaveRoot',\n      this.handlerMouseLeaveRoot,\n    );\n  }\n\n  componentWillUnmount() {\n    if (this.unsubscribeMouseMoveRoot) {\n      this.unsubscribeMouseMoveRoot();\n    }\n    if (this.unsubscribeMouseLeaveRoot) {\n      this.unsubscribeMouseLeaveRoot();\n    }\n  }\n}\n\nclass HoverLineRoot extends Hover {\n  static displayName = 'HoverLine';\n\n  render() {\n    const SHoverLine = this.Element;\n    const { styles, x, y, data, scale } = this.asProps;\n    const { xIndex, yIndex } = this.state;\n    const [xScale, yScale] = scale;\n\n    const xRange = xScale.range();\n    const yRange = yScale.range();\n    const x1 = xIndex !== null ? scaleOfBandwidth(xScale, data[xIndex][x]) : undefined;\n    const y1 = yIndex !== null ? scaleOfBandwidth(yScale, data[yIndex][y]) : undefined;\n\n    return sstyled(styles)(\n      <>\n        {xIndex !== null ? (\n          <SHoverLine\n            render=\"line\"\n            ref={this.hoverRef}\n            index={xIndex}\n            x1={x1}\n            y1={yRange[0]}\n            x2={x1}\n            y2={yRange[1]}\n          />\n        ) : null}\n        {yIndex !== null ? (\n          <SHoverLine\n            render=\"line\"\n            ref={this.hoverRef}\n            index={yIndex}\n            x1={xRange[0]}\n            y1={y1}\n            x2={xRange[1]}\n            y2={y1}\n          />\n        ) : null}\n      </>,\n    );\n  }\n}\n\nclass HoverRectRoot extends Hover {\n  static displayName = 'HoverRect';\n\n  render() {\n    const SHoverRect = this.Element;\n    const { styles, x, y, data, scale } = this.asProps;\n    const { xIndex, yIndex } = this.state;\n    const [xScale, yScale] = scale;\n\n    const xRange = xScale.range();\n    const yRange = yScale.range();\n\n    return sstyled(styles)(\n      <>\n        {xIndex !== null ? (\n          <SHoverRect\n            render=\"rect\"\n            ref={this.hoverRef}\n            index={xIndex}\n            width={xScale.step() - xScale.paddingInner() / 2}\n            height={yRange[0] - yRange[1]}\n            x={xScale(data[xIndex][x]) - (xScale.step() * xScale.paddingInner()) / 2}\n            y={yRange[1]}\n          />\n        ) : null}\n        {yIndex !== null ? (\n          <SHoverRect\n            render=\"rect\"\n            ref={this.hoverRef}\n            index={yIndex}\n            width={xRange[1] - xRange[0]}\n            height={yScale.step() - yScale.paddingInner() / 2}\n            x={xRange[0]}\n            y={yScale(data[yIndex][y]) - (yScale.step() * yScale.paddingInner()) / 2}\n          />\n        ) : null}\n      </>,\n    );\n  }\n}\n\nconst HoverLine = createElement(HoverLineRoot);\nconst HoverRect = createElement(HoverRectRoot);\n\nexport { HoverLine, HoverRect };\n"],"file":"Hover.js"}

package/lib/es6/Line.js

@@ -5,7 +5,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
+import { sstyled as _sstyled } from "@semcore/core";
 
 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); }; }
 
@@ -13,30 +13,29 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { curveLinear, line as d3Line } from 'd3-shape';
-import { Component, styled, css, __css__, set, create, map } from '@semcore/core';
+import { Component, sstyled } from '@semcore/core';
 import createElement from './createElement';
-import { definedData, scaleOfBandwidth, getNullData } from './utils';
+import { definedData, definedNullData, scaleOfBandwidth, getNullData } from './utils';
 import Dots from './Dots';
+import ClipPath from './ClipPath';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 
 /*__reshadow-styles__:"./style/line.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-__css__(
+_sstyled.insert(
 /*__inner_css_start__*/
-".___SLine_1yslz_gg_{fill:transparent;stroke-width:3}.___SLine_1yslz_gg_.__hide_1yslz_gg_{display:none}.___SDot_1yslz_gg_{stroke-width:2px;stroke:#fff;r:6px}.___SDot_1yslz_gg_.__hide_1yslz_gg_{display:none}.___SDot_1yslz_gg_.__active_1yslz_gg_{r:8px}.___SNull_1yslz_gg_{fill:transparent;stroke:#98aaaf;stroke-dasharray:4}.___SNull_1yslz_gg_.__hide_1yslz_gg_{display:none}"
+".___SLine_d1qcq_gg_{fill:transparent;stroke-width:3;stroke:var(--color_153xqfw);transition-property:d;transition-duration:var(--duration_153xqfw);transition-timing-function:ease-in-out}.___SLine_d1qcq_gg_.__hide_d1qcq_gg_{display:none}.___SNull_d1qcq_gg_{fill:transparent;stroke:#98aaaf;stroke-dasharray:4}.___SNull_d1qcq_gg_.__hide_d1qcq_gg_{display:none}"
 /*__inner_css_end__*/
-, "qqomti_gg_")
+, "153xqfw_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SLine": "___SLine_1yslz_gg_",
-  "_hide": "__hide_1yslz_gg_",
-  "__SDot": "___SDot_1yslz_gg_",
-  "_active": "__active_1yslz_gg_",
-  "__SNull": "___SNull_1yslz_gg_"
-}),
-    style = _extends({}, _ref);
-
-var styled_c8 = create([]);
+  "__SLine": "___SLine_d1qcq_gg_",
+  "--color": "--color_153xqfw",
+  "--duration": "--duration_153xqfw",
+  "_hide": "__hide_d1qcq_gg_",
+  "__SNull": "___SNull_d1qcq_gg_"
+});
 
 var LineRoot = /*#__PURE__*/function (_Component) {
   _inherits(LineRoot, _Component);
@@ -56,18 +55,21 @@ var LineRoot = /*#__PURE__*/function (_Component) {
           x = _this$asProps.x,
           y = _this$asProps.y,
           d3 = _this$asProps.d3,
-          color = _this$asProps.color;
+          color = _this$asProps.color,
+          duration = _this$asProps.duration;
       return {
         x: x,
         y: y,
         d3: d3,
-        fill: color
+        color: color,
+        delay: duration
       };
     }
   }, {
     key: "getNullProps",
     value: function getNullProps() {
       var _this$asProps2 = this.asProps,
+          x = _this$asProps2.x,
           y = _this$asProps2.y,
           d3 = _this$asProps2.d3,
           color = _this$asProps2.color,
@@ -75,26 +77,43 @@ var LineRoot = /*#__PURE__*/function (_Component) {
       return {
         d3: d3,
         // TODO: vertical
-        data: getNullData(data, d3.defined(), y),
-        fill: color
+        data: getNullData(data, definedNullData(x, y), y),
+        color: color
       };
     }
   }, {
     key: "render",
     value: function render() {
+      var _ref;
+
       var SLine = this.Element;
       var _this$asProps3 = this.asProps,
           styles = _this$asProps3.styles,
           hide = _this$asProps3.hide,
           color = _this$asProps3.color,
+          uid = _this$asProps3.uid,
+          size = _this$asProps3.size,
           d3 = _this$asProps3.d3,
-          data = _this$asProps3.data;
-      return styled((set([styled_c8, styles]), /*#__PURE__*/React.createElement(SLine, map("SLine", {
-        render: "path",
-        hide: hide,
-        stroke: color,
-        d: d3(data)
-      }))));
+          data = _this$asProps3.data,
+          duration = _this$asProps3.duration;
+      return _ref = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SLine, _ref.cn("SLine", {
+        "clipPath": "url(#".concat(uid, ")"),
+        "render": "path",
+        "hide": hide,
+        "color": color,
+        "d": d3(data),
+        "use:duration": "".concat(duration, "ms")
+      })), duration && /*#__PURE__*/React.createElement(ClipPath, _ref.cn("ClipPath", {
+        "setAttributeTag": function setAttributeTag(rect) {
+          rect.setAttribute('width', size[0]);
+        },
+        "id": uid,
+        "x": "0",
+        "y": "0",
+        "width": 0,
+        "height": size[1],
+        "transition": "width ".concat(duration, "ms ease-in-out")
+      })));
     }
   }]);
 
@@ -103,12 +122,16 @@ var LineRoot = /*#__PURE__*/function (_Component) {
 
 _defineProperty(LineRoot, "displayName", 'Line');
 
-_defineProperty(LineRoot, "defaultProps", function (_ref2) {
-  var x = _ref2.x,
-      y = _ref2.y,
-      $rootProps = _ref2.$rootProps,
-      _ref2$curve = _ref2.curve,
-      curve = _ref2$curve === void 0 ? curveLinear : _ref2$curve;
+_defineProperty(LineRoot, "style", style);
+
+_defineProperty(LineRoot, "enhance", [uniqueIDEnhancement()]);
+
+_defineProperty(LineRoot, "defaultProps", function (_ref3) {
+  var x = _ref3.x,
+      y = _ref3.y,
+      $rootProps = _ref3.$rootProps,
+      _ref3$curve = _ref3.curve,
+      curve = _ref3$curve === void 0 ? curveLinear : _ref3$curve;
 
   var _$rootProps$scale = _slicedToArray($rootProps.scale, 2),
       xScale = _$rootProps$scale[0],
@@ -120,25 +143,24 @@ _defineProperty(LineRoot, "defaultProps", function (_ref2) {
     }).y(function (p) {
       return scaleOfBandwidth(yScale, p[y]);
     }),
-    color: '#50aef4'
+    color: '#50aef4',
+    duration: 500
   };
 });
 
-_defineProperty(LineRoot, "style", style);
-
-var styled_12c = create([]);
-
 function Null(props) {
+  var _ref2;
+
   var SNull = props.Element,
       styles = props.styles,
       d3 = props.d3,
       data = props.data,
       hide = props.hide;
-  return styled((set([styled_12c, styles]), /*#__PURE__*/React.createElement(SNull, map("SNull", {
-    render: "path",
-    d: d3(data),
-    hide: hide
-  }))));
+  return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SNull, _ref2.cn("SNull", {
+    "render": "path",
+    "d": d3(data),
+    "hide": hide
+  }));
 }
 
 export default createElement(LineRoot, {