@semcore/d3-chart 1.0.0-8 → 1.2.0

package/lib/cjs/HorizontalBar.js

@@ -21,35 +21,36 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _core = require("@semcore/core");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@semcore/core");
-
 var _createElement = _interopRequireDefault(require("./createElement"));
 
+var _ClipPath = _interopRequireDefault(require("./ClipPath"));
+
+var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
 
 /*__reshadow-styles__:"./style/bar.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-(0, _core.__css__)(
+_core.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 = (0, _extends2["default"])({}, _ref);
-
-var styled_c8 = (0, _core.create)([]);
+  "__SBar": "___SBar_1u1r9_gg_",
+  "--color": "--color_10kcl1b",
+  "--duration": "--duration_10kcl1b",
+  "_hide": "__hide_1u1r9_gg_",
+  "__SBackground": "___SBackground_1u1r9_gg_"
+});
 
 var HorizontalBarRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(HorizontalBarRoot, _Component);
@@ -72,8 +73,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,
@@ -81,45 +84,69 @@ 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 = (0, _slicedToArray2["default"])(scale, 2),
           xScale = _scale[0],
           yScale = _scale[1];
 
-      return data.map(function (d, i) {
-        var _d$x, _d$x2;
-
-        return (0, _core.styled)(((0, _core.set)([styled_c8, styles]), /*#__PURE__*/_react["default"].createElement(SBar, (0, _core.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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].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["default"].createElement(_react["default"].Fragment, null, data.map(this.renderBar.bind(this)), duration && /*#__PURE__*/_react["default"].createElement(_ClipPath["default"], {
+        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")
+      }));
     }
   }]);
   return HorizontalBarRoot;
 }(_core.Component);
 
 (0, _defineProperty2["default"])(HorizontalBarRoot, "displayName", 'HorizontalBar');
+(0, _defineProperty2["default"])(HorizontalBarRoot, "enhance", [(0, _uniqueID["default"])()]);
 (0, _defineProperty2["default"])(HorizontalBarRoot, "style", style);
 (0, _defineProperty2["default"])(HorizontalBarRoot, "defaultProps", {
   color: '#50aef4',
-  offset: [0, 0]
+  offset: [0, 0],
+  duration: 500
 });
-var styled_12c = (0, _core.create)([]);
 
 function Background(props) {
+  var _ref2;
+
   var SBackground = props.Element,
       styles = props.styles,
       scale = props.scale,
@@ -130,14 +157,14 @@ function Background(props) {
       yScale = _scale2[1];
 
   var xRange = xScale.range();
-  return (0, _core.styled)(((0, _core.set)([styled_12c, styles]), /*#__PURE__*/_react["default"].createElement(SBackground, (0, _core.map)("SBackground", {
-    render: "rect",
-    childrenPosition: "above",
-    width: xRange[1] - xRange[0],
-    height: yScale.bandwidth(),
-    x: xRange[0],
-    y: yScale(value)
-  }))));
+  return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBackground, _ref2.cn("SBackground", {
+    "render": "rect",
+    "childrenPosition": "above",
+    "width": xRange[1] - xRange[0],
+    "height": yScale.bandwidth(),
+    "x": xRange[0],
+    "y": yScale(value)
+  }));
 }
 
 var _default = (0, _createElement["default"])(HorizontalBarRoot, {

package/lib/cjs/HorizontalBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/HorizontalBar.js"],"names":["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","Component","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":["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","Component","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/cjs/Hover.js

@@ -23,12 +23,10 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _core = require("@semcore/core");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@semcore/core");
-
 var _createElement = _interopRequireDefault(require("./createElement"));
 
 var _rafTrottle = _interopRequireDefault(require("@semcore/utils/lib/rafTrottle"));
@@ -40,19 +38,18 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 /*__reshadow-styles__:"./style/hover.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-(0, _core.__css__)(
+_core.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 = (0, _extends2["default"])({}, _ref);
+  "__SHoverLine": "___SHoverLine_wqcps_gg_",
+  "__SHoverRect": "___SHoverRect_wqcps_gg_"
+});
 
 var Hover = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(Hover, _Component);
@@ -147,7 +144,6 @@ var Hover = /*#__PURE__*/function (_Component) {
 }(_core.Component);
 
 (0, _defineProperty2["default"])(Hover, "style", style);
-var styled_c8 = (0, _core.create)([]);
 
 var HoverLineRoot = /*#__PURE__*/function (_Hover) {
   (0, _inherits2["default"])(HoverLineRoot, _Hover);
@@ -162,6 +158,8 @@ var HoverLineRoot = /*#__PURE__*/function (_Hover) {
   (0, _createClass2["default"])(HoverLineRoot, [{
     key: "render",
     value: function render() {
+      var _ref;
+
       var SHoverLine = this.Element;
       var _this$asProps2 = this.asProps,
           styles = _this$asProps2.styles,
@@ -181,30 +179,29 @@ var HoverLineRoot = /*#__PURE__*/function (_Hover) {
       var yRange = yScale.range();
       var x1 = xIndex !== null ? (0, _utils.scaleOfBandwidth)(xScale, data[xIndex][x]) : undefined;
       var y1 = yIndex !== null ? (0, _utils.scaleOfBandwidth)(yScale, data[yIndex][y]) : undefined;
-      return (0, _core.styled)(((0, _core.set)([styled_c8, styles]), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, xIndex !== null ? /*#__PURE__*/_react["default"].createElement(SHoverLine, (0, _core.map)("SHoverLine", {
-        render: "line",
-        ref: this.hoverRef,
-        index: xIndex,
-        x1: x1,
-        y1: yRange[0],
-        x2: x1,
-        y2: yRange[1]
-      })) : null, yIndex !== null ? /*#__PURE__*/_react["default"].createElement(SHoverLine, (0, _core.map)("SHoverLine", {
-        render: "line",
-        ref: this.hoverRef,
-        index: yIndex,
-        x1: xRange[0],
-        y1: y1,
-        x2: xRange[1],
-        y2: y1
-      })) : null)));
+      return _ref = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, xIndex !== null ? /*#__PURE__*/_react["default"].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["default"].createElement(SHoverLine, _ref.cn("SHoverLine", {
+        "render": "line",
+        "ref": this.hoverRef,
+        "index": yIndex,
+        "x1": xRange[0],
+        "y1": y1,
+        "x2": xRange[1],
+        "y2": y1
+      })) : null);
     }
   }]);
   return HoverLineRoot;
 }(Hover);
 
 (0, _defineProperty2["default"])(HoverLineRoot, "displayName", 'HoverLine');
-var styled_12c = (0, _core.create)([]);
 
 var HoverRectRoot = /*#__PURE__*/function (_Hover2) {
   (0, _inherits2["default"])(HoverRectRoot, _Hover2);
@@ -219,6 +216,8 @@ var HoverRectRoot = /*#__PURE__*/function (_Hover2) {
   (0, _createClass2["default"])(HoverRectRoot, [{
     key: "render",
     value: function render() {
+      var _ref2;
+
       var SHoverRect = this.Element;
       var _this$asProps3 = this.asProps,
           styles = _this$asProps3.styles,
@@ -236,23 +235,23 @@ var HoverRectRoot = /*#__PURE__*/function (_Hover2) {
 
       var xRange = xScale.range();
       var yRange = yScale.range();
-      return (0, _core.styled)(((0, _core.set)([styled_12c, styles]), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, xIndex !== null ? /*#__PURE__*/_react["default"].createElement(SHoverRect, (0, _core.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["default"].createElement(SHoverRect, (0, _core.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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, xIndex !== null ? /*#__PURE__*/_react["default"].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["default"].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);
     }
   }]);
   return HoverRectRoot;

package/lib/cjs/Hover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Hover.js"],"names":["Hover","xIndex","yIndex","React","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","Component","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":["Hover","xIndex","yIndex","React","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","Component","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/cjs/Line.js

@@ -21,43 +21,42 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _core = require("@semcore/core");
 
 var _react = _interopRequireDefault(require("react"));
 
 var _d3Shape = require("d3-shape");
 
-var _core = require("@semcore/core");
-
 var _createElement = _interopRequireDefault(require("./createElement"));
 
 var _utils = require("./utils");
 
 var _Dots = _interopRequireDefault(require("./Dots"));
 
+var _ClipPath = _interopRequireDefault(require("./ClipPath"));
+
+var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
 
 /*__reshadow-styles__:"./style/line.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-(0, _core.__css__)(
+_core.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 = (0, _extends2["default"])({}, _ref);
-
-var styled_c8 = (0, _core.create)([]);
+  "__SLine": "___SLine_d1qcq_gg_",
+  "--color": "--color_153xqfw",
+  "--duration": "--duration_153xqfw",
+  "_hide": "__hide_d1qcq_gg_",
+  "__SNull": "___SNull_d1qcq_gg_"
+});
 
 var LineRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(LineRoot, _Component);
@@ -76,18 +75,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,
@@ -95,38 +97,57 @@ var LineRoot = /*#__PURE__*/function (_Component) {
       return {
         d3: d3,
         // TODO: vertical
-        data: (0, _utils.getNullData)(data, d3.defined(), y),
-        fill: color
+        data: (0, _utils.getNullData)(data, (0, _utils.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 (0, _core.styled)(((0, _core.set)([styled_c8, styles]), /*#__PURE__*/_react["default"].createElement(SLine, (0, _core.map)("SLine", {
-        render: "path",
-        hide: hide,
-        stroke: color,
-        d: d3(data)
-      }))));
+          data = _this$asProps3.data,
+          duration = _this$asProps3.duration;
+      return _ref = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].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["default"].createElement(_ClipPath["default"], _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")
+      })));
     }
   }]);
   return LineRoot;
 }(_core.Component);
 
 (0, _defineProperty2["default"])(LineRoot, "displayName", 'Line');
-(0, _defineProperty2["default"])(LineRoot, "defaultProps", function (_ref2) {
-  var x = _ref2.x,
-      y = _ref2.y,
-      $rootProps = _ref2.$rootProps,
-      _ref2$curve = _ref2.curve,
-      curve = _ref2$curve === void 0 ? _d3Shape.curveLinear : _ref2$curve;
+(0, _defineProperty2["default"])(LineRoot, "style", style);
+(0, _defineProperty2["default"])(LineRoot, "enhance", [(0, _uniqueID["default"])()]);
+(0, _defineProperty2["default"])(LineRoot, "defaultProps", function (_ref3) {
+  var x = _ref3.x,
+      y = _ref3.y,
+      $rootProps = _ref3.$rootProps,
+      _ref3$curve = _ref3.curve,
+      curve = _ref3$curve === void 0 ? _d3Shape.curveLinear : _ref3$curve;
 
   var _$rootProps$scale = (0, _slicedToArray2["default"])($rootProps.scale, 2),
       xScale = _$rootProps$scale[0],
@@ -138,23 +159,24 @@ var LineRoot = /*#__PURE__*/function (_Component) {
     }).y(function (p) {
       return (0, _utils.scaleOfBandwidth)(yScale, p[y]);
     }),
-    color: '#50aef4'
+    color: '#50aef4',
+    duration: 500
   };
 });
-(0, _defineProperty2["default"])(LineRoot, "style", style);
-var styled_12c = (0, _core.create)([]);
 
 function Null(props) {
+  var _ref2;
+
   var SNull = props.Element,
       styles = props.styles,
       d3 = props.d3,
       data = props.data,
       hide = props.hide;
-  return (0, _core.styled)(((0, _core.set)([styled_12c, styles]), /*#__PURE__*/_react["default"].createElement(SNull, (0, _core.map)("SNull", {
-    render: "path",
-    d: d3(data),
-    hide: hide
-  }))));
+  return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SNull, _ref2.cn("SNull", {
+    "render": "path",
+    "d": d3(data),
+    "hide": hide
+  }));
 }
 
 var _default = (0, _createElement["default"])(LineRoot, {