@semcore/d3-chart 16.5.0 → 17.0.0-prerelease.8

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.0] - 2026-02-16
+
+### BREAK
+
+- Removed 2px border-radius for Bars.
+
+### Changed
+
+- Refined a11y module invocation logic
+
 ## [16.5.0] - 2026-02-10
 
 ### Added

package/lib/cjs/AnimatedClipPath.js

@@ -1,58 +1,45 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
 var _propsForElement = _interopRequireDefault(require("@semcore/core/lib/utils/propsForElement"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["id", "transition", "tag", "style", "className"];
-var AnimatedClipPath = /*#__PURE__*/function (_Component) {
-  function AnimatedClipPath() {
-    (0, _classCallCheck2["default"])(this, AnimatedClipPath);
-    return (0, _callSuper2["default"])(this, AnimatedClipPath, arguments);
+class AnimatedClipPath extends _core.Component {
+  render() {
+    const {
+      id,
+      transition: _transition,
+      tag: Tag,
+      style: _style,
+      className: _className,
+      ...other
+    } = this.asProps;
+    const duration = typeof this.asProps.duration === 'number' ? `${this.asProps.duration}ms` : this.asProps.duration;
+    return /*#__PURE__*/_react.default.createElement("clipPath", {
+      "aria-hidden": true,
+      ref: this.refClipPath,
+      id: id
+    }, /*#__PURE__*/_react.default.createElement("rect", {
+      x: 0,
+      y: 0,
+      width: "100%",
+      height: "100%"
+    }, /*#__PURE__*/_react.default.createElement("animate", (0, _extends2.default)({
+      dur: duration
+    }, (0, _propsForElement.default)(other, Tag)))));
   }
-  (0, _inherits2["default"])(AnimatedClipPath, _Component);
-  return (0, _createClass2["default"])(AnimatedClipPath, [{
-    key: "render",
-    value: function render() {
-      var _this$asProps = this.asProps,
-        id = _this$asProps.id,
-        _transition = _this$asProps.transition,
-        Tag = _this$asProps.tag,
-        _style = _this$asProps.style,
-        _className = _this$asProps.className,
-        other = (0, _objectWithoutProperties2["default"])(_this$asProps, _excluded);
-      var duration = typeof this.asProps.duration === 'number' ? "".concat(this.asProps.duration, "ms") : this.asProps.duration;
-      return /*#__PURE__*/_react["default"].createElement("clipPath", {
-        "aria-hidden": true,
-        ref: this.refClipPath,
-        id: id
-      }, /*#__PURE__*/_react["default"].createElement("rect", {
-        x: 0,
-        y: 0,
-        width: "100%",
-        height: "100%"
-      }, /*#__PURE__*/_react["default"].createElement("animate", (0, _extends2["default"])({
-        dur: duration
-      }, (0, _propsForElement["default"])(other, Tag)))));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(AnimatedClipPath, "defaultProps", {
+}
+(0, _defineProperty2.default)(AnimatedClipPath, "defaultProps", {
   tag: 'rect',
   duration: 500,
   attributeName: 'width',
   values: '0;100%'
 });
-var _default = exports["default"] = (0, _core.createComponent)(AnimatedClipPath);
+var _default = exports.default = (0, _core.createComponent)(AnimatedClipPath);
 //# sourceMappingURL=AnimatedClipPath.js.map

package/lib/cjs/AnimatedClipPath.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedClipPath.js","names":["_core","require","_propsForElement","_interopRequireDefault","_react","_excluded","AnimatedClipPath","_Component","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","key","value","render","_this$asProps","asProps","id","_transition","transition","Tag","tag","_style","style","_className","className","other","_objectWithoutProperties2","duration","concat","createElement","ref","refClipPath","x","y","width","height","_extends2","dur","propsForElement","Component","_defineProperty2","attributeName","values","_default","exports","createComponent"],"sources":["../../src/AnimatedClipPath.jsx"],"sourcesContent":["import { createComponent, Component } from '@semcore/core';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport React from 'react';\n\nclass AnimatedClipPath extends Component {\n  static defaultProps = {\n    tag: 'rect',\n    duration: 500,\n    attributeName: 'width',\n    values: '0;100%',\n  };\n\n  render() {\n    const { id, transition: _transition, tag: Tag, style: _style, className: _className, ...other } = this.asProps;\n    const duration =\n      typeof this.asProps.duration === 'number'\n        ? `${this.asProps.duration}ms`\n        : this.asProps.duration;\n    return (\n      <clipPath aria-hidden ref={this.refClipPath} id={id}>\n        <rect x={0} y={0} width='100%' height='100%'>\n          <animate dur={duration} {...propsForElement(other, Tag)} />\n        </rect>\n      </clipPath>\n    );\n  }\n}\n\nexport default createComponent(AnimatedClipPath);\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAA0B,IAAAI,SAAA;AAAA,IAEpBC,gBAAgB,0BAAAC,UAAA;EAAA,SAAAD,iBAAA;IAAA,IAAAE,gBAAA,mBAAAF,gBAAA;IAAA,WAAAG,WAAA,mBAAAH,gBAAA,EAAAI,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAL,gBAAA,EAAAC,UAAA;EAAA,WAAAK,aAAA,aAAAN,gBAAA;IAAAO,GAAA;IAAAC,KAAA,EAQpB,SAAAC,MAAMA,CAAA,EAAG;MACP,IAAAC,aAAA,GAAkG,IAAI,CAACC,OAAO;QAAtGC,EAAE,GAAAF,aAAA,CAAFE,EAAE;QAAcC,WAAW,GAAAH,aAAA,CAAvBI,UAAU;QAAoBC,GAAG,GAAAL,aAAA,CAARM,GAAG;QAAcC,MAAM,GAAAP,aAAA,CAAbQ,KAAK;QAAqBC,UAAU,GAAAT,aAAA,CAArBU,SAAS;QAAiBC,KAAK,OAAAC,yBAAA,aAAAZ,aAAA,EAAAX,SAAA;MAC7F,IAAMwB,QAAQ,GACZ,OAAO,IAAI,CAACZ,OAAO,CAACY,QAAQ,KAAK,QAAQ,MAAAC,MAAA,CAClC,IAAI,CAACb,OAAO,CAACY,QAAQ,UACxB,IAAI,CAACZ,OAAO,CAACY,QAAQ;MAC3B,oBACEzB,MAAA,YAAA2B,aAAA;QAAU,mBAAW;QAACC,GAAG,EAAE,IAAI,CAACC,WAAY;QAACf,EAAE,EAAEA;MAAG,gBAClDd,MAAA,YAAA2B,aAAA;QAAMG,CAAC,EAAE,CAAE;QAACC,CAAC,EAAE,CAAE;QAACC,KAAK,EAAC,MAAM;QAACC,MAAM,EAAC;MAAM,gBAC1CjC,MAAA,YAAA2B,aAAA,gBAAAO,SAAA;QAASC,GAAG,EAAEV;MAAS,GAAK,IAAAW,2BAAe,EAACb,KAAK,EAAEN,GAAG,CAAC,CAAG,CACtD,CACE,CAAC;IAEf;EAAC;AAAA,EArB4BoB,eAAS;AAAA,IAAAC,gBAAA,aAAlCpC,gBAAgB,kBACE;EACpBgB,GAAG,EAAE,MAAM;EACXO,QAAQ,EAAE,GAAG;EACbc,aAAa,EAAE,OAAO;EACtBC,MAAM,EAAE;AACV,CAAC;AAAA,IAAAC,QAAA,GAAAC,OAAA,cAkBY,IAAAC,qBAAe,EAACzC,gBAAgB,CAAC","ignoreList":[]}
+{"version":3,"file":"AnimatedClipPath.js","names":["_core","require","_propsForElement","_interopRequireDefault","_react","AnimatedClipPath","Component","render","id","transition","_transition","tag","Tag","style","_style","className","_className","other","asProps","duration","default","createElement","ref","refClipPath","x","y","width","height","_extends2","dur","propsForElement","_defineProperty2","attributeName","values","_default","exports","createComponent"],"sources":["../../src/AnimatedClipPath.jsx"],"sourcesContent":["import { createComponent, Component } from '@semcore/core';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport React from 'react';\n\nclass AnimatedClipPath extends Component {\n  static defaultProps = {\n    tag: 'rect',\n    duration: 500,\n    attributeName: 'width',\n    values: '0;100%',\n  };\n\n  render() {\n    const { id, transition: _transition, tag: Tag, style: _style, className: _className, ...other } = this.asProps;\n    const duration =\n      typeof this.asProps.duration === 'number'\n        ? `${this.asProps.duration}ms`\n        : this.asProps.duration;\n    return (\n      <clipPath aria-hidden ref={this.refClipPath} id={id}>\n        <rect x={0} y={0} width='100%' height='100%'>\n          <animate dur={duration} {...propsForElement(other, Tag)} />\n        </rect>\n      </clipPath>\n    );\n  }\n}\n\nexport default createComponent(AnimatedClipPath);\n"],"mappings":";;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,MAAMI,gBAAgB,SAASC,eAAS,CAAC;EAQvCC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,EAAE;MAAEC,UAAU,EAAEC,WAAW;MAAEC,GAAG,EAAEC,GAAG;MAAEC,KAAK,EAAEC,MAAM;MAAEC,SAAS,EAAEC,UAAU;MAAE,GAAGC;IAAM,CAAC,GAAG,IAAI,CAACC,OAAO;IAC9G,MAAMC,QAAQ,GACZ,OAAO,IAAI,CAACD,OAAO,CAACC,QAAQ,KAAK,QAAQ,GACrC,GAAG,IAAI,CAACD,OAAO,CAACC,QAAQ,IAAI,GAC5B,IAAI,CAACD,OAAO,CAACC,QAAQ;IAC3B,oBACEf,MAAA,CAAAgB,OAAA,CAAAC,aAAA;MAAU,mBAAW;MAACC,GAAG,EAAE,IAAI,CAACC,WAAY;MAACf,EAAE,EAAEA;IAAG,gBAClDJ,MAAA,CAAAgB,OAAA,CAAAC,aAAA;MAAMG,CAAC,EAAE,CAAE;MAACC,CAAC,EAAE,CAAE;MAACC,KAAK,EAAC,MAAM;MAACC,MAAM,EAAC;IAAM,gBAC1CvB,MAAA,CAAAgB,OAAA,CAAAC,aAAA,gBAAAO,SAAA,CAAAR,OAAA;MAASS,GAAG,EAAEV;IAAS,GAAK,IAAAW,wBAAe,EAACb,KAAK,EAAEL,GAAG,CAAC,CAAG,CACtD,CACE,CAAC;EAEf;AACF;AAAC,IAAAmB,gBAAA,CAAAX,OAAA,EAtBKf,gBAAgB,kBACE;EACpBM,GAAG,EAAE,MAAM;EACXQ,QAAQ,EAAE,GAAG;EACba,aAAa,EAAE,OAAO;EACtBC,MAAM,EAAE;AACV,CAAC;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAf,OAAA,GAkBY,IAAAgB,qBAAe,EAAC/B,gBAAgB,CAAC","ignoreList":[]}

package/lib/cjs/Area.js

@@ -1,15 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
 var _findComponent = _interopRequireDefault(require("@semcore/core/lib/utils/findComponent"));
@@ -24,245 +19,214 @@ var _Dots = _interopRequireDefault(require("./Dots"));
 var _Pattern = require("./Pattern");
 var _utils = require("./utils");
 /*!__reshadow-styles__:"./style/area.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SArea_dh1yc_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);fill-opacity:.2}.___SArea_dh1yc_gg_.__color_dh1yc_gg_{fill:var(--color_dh1yc)}.___SArea_dh1yc_gg_.__pattern_dh1yc_gg_{fill:var(--pattern_dh1yc);fill-opacity:.7}.___SArea_dh1yc_gg_.__transparent_dh1yc_gg_{opacity:.3}.___SAreaLine_dh1yc_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SAreaLine_dh1yc_gg_.__color_dh1yc_gg_{stroke:var(--color_dh1yc)}.___SAreaLine_dh1yc_gg_.__transparent_dh1yc_gg_{opacity:.3}.___SAreaLine_dh1yc_gg_,.___SArea_dh1yc_gg_{transition-property:d;transition-duration:var(--duration_dh1yc);transition-timing-function:ease-in-out}.___SNull_dh1yc_gg_{fill:transparent;stroke:var(--intergalactic-chart-grid-x-axis, #c4c7cf);stroke-dasharray:4}.___SNull_dh1yc_gg_.__hide_dh1yc_gg_{display:none}", /*__inner_css_end__*/"dh1yc_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SArea_1f97e_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);fill-opacity:.2}.___SArea_1f97e_gg_.__color_1f97e_gg_{fill:var(--color_1f97e)}.___SArea_1f97e_gg_.__pattern_1f97e_gg_{fill:var(--pattern_1f97e);fill-opacity:.7}.___SArea_1f97e_gg_.__transparent_1f97e_gg_{opacity:.3}.___SAreaLine_1f97e_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SAreaLine_1f97e_gg_.__color_1f97e_gg_{stroke:var(--color_1f97e)}.___SAreaLine_1f97e_gg_.__transparent_1f97e_gg_{opacity:.3}.___SAreaLine_1f97e_gg_,.___SArea_1f97e_gg_{transition-property:d;transition-duration:var(--duration_1f97e);transition-timing-function:ease-in-out}.___SNull_1f97e_gg_{fill:transparent;stroke:var(--intergalactic-chart-grid-x-axis, #c4c7cf);stroke-dasharray:4}.___SNull_1f97e_gg_.__hide_1f97e_gg_{display:none}", /*__inner_css_end__*/"1f97e_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SArea": "___SArea_dh1yc_gg_",
-  "_color": "__color_dh1yc_gg_",
-  "--color": "--color_dh1yc",
-  "_pattern": "__pattern_dh1yc_gg_",
-  "--pattern": "--pattern_dh1yc",
-  "_transparent": "__transparent_dh1yc_gg_",
-  "__SAreaLine": "___SAreaLine_dh1yc_gg_",
-  "--duration": "--duration_dh1yc",
-  "__SNull": "___SNull_dh1yc_gg_",
-  "_hide": "__hide_dh1yc_gg_"
+  "__SArea": "___SArea_1f97e_gg_",
+  "_color": "__color_1f97e_gg_",
+  "--color": "--color_1f97e",
+  "_pattern": "__pattern_1f97e_gg_",
+  "--pattern": "--pattern_1f97e",
+  "_transparent": "__transparent_1f97e_gg_",
+  "__SAreaLine": "___SAreaLine_1f97e_gg_",
+  "--duration": "--duration_1f97e",
+  "__SNull": "___SNull_1f97e_gg_",
+  "_hide": "__hide_1f97e_gg_"
 });
-var AreaRoot = /*#__PURE__*/function (_Component) {
-  function AreaRoot() {
-    (0, _classCallCheck2["default"])(this, AreaRoot);
-    return (0, _callSuper2["default"])(this, AreaRoot, arguments);
+class AreaRoot extends _core.Component {
+  getDotsProps() {
+    const {
+      x,
+      y,
+      color,
+      d3Line,
+      transparent,
+      resolveColor,
+      patterns,
+      onClick
+    } = this.asProps;
+    const data = this.asProps.data.filter(item => item[y] !== _utils.interpolateValue);
+    return {
+      x,
+      y,
+      data,
+      d3: d3Line,
+      color,
+      resolveColor,
+      transparent,
+      patterns,
+      onClick
+    };
   }
-  (0, _inherits2["default"])(AreaRoot, _Component);
-  return (0, _createClass2["default"])(AreaRoot, [{
-    key: "getDotsProps",
-    value: function getDotsProps() {
-      var _this$asProps = this.asProps,
-        x = _this$asProps.x,
-        y = _this$asProps.y,
-        color = _this$asProps.color,
-        d3Line = _this$asProps.d3Line,
-        transparent = _this$asProps.transparent,
-        resolveColor = _this$asProps.resolveColor,
-        patterns = _this$asProps.patterns,
-        onClick = _this$asProps.onClick;
-      var data = this.asProps.data.filter(function (item) {
-        return item[y] !== _utils.interpolateValue;
-      });
-      return {
-        x: x,
-        y: y,
-        data: data,
-        d3: d3Line,
-        color: color,
-        resolveColor: resolveColor,
-        transparent: transparent,
-        patterns: patterns,
-        onClick: onClick
-      };
-    }
-  }, {
-    key: "getNullProps",
-    value: function getNullProps() {
-      var _this$asProps2 = this.asProps,
-        x = _this$asProps2.x,
-        y = _this$asProps2.y,
-        color = _this$asProps2.color,
-        resolveColor = _this$asProps2.resolveColor,
-        d3Line = _this$asProps2.d3Line;
-      var data = this.asProps.data.filter(function (item) {
-        return item[y] !== _utils.interpolateValue;
-      });
-      return {
-        data: (0, _utils.getNullData)(data, (0, _utils.definedNullData)(x, y), y),
-        d3: d3Line,
-        color: color,
-        resolveColor: resolveColor
-      };
-    }
-  }, {
-    key: "getLineProps",
-    value: function getLineProps() {
-      var _this$asProps3 = this.asProps,
-        duration = _this$asProps3.duration,
-        color = _this$asProps3.color,
-        resolveColor = _this$asProps3.resolveColor,
-        data = _this$asProps3.data,
-        d3Line = _this$asProps3.d3Line,
-        uid = _this$asProps3.uid;
-      return {
-        uid: uid,
-        data: data,
-        d3: d3Line,
-        color: color,
-        resolveColor: resolveColor,
-        duration: duration
-      };
-    }
-  }, {
-    key: "handlerOnClick",
-    value: function handlerOnClick(e) {
-      e.stopPropagation();
-      var _this$asProps4 = this.asProps,
-        rootRef = _this$asProps4.rootRef,
-        _this$asProps4$scale = (0, _slicedToArray2["default"])(_this$asProps4.scale, 1),
-        xScale = _this$asProps4$scale[0],
-        data = _this$asProps4.data,
-        x = _this$asProps4.x,
-        onClick = _this$asProps4.onClick;
-      if (!onClick) return;
-      var _eventToPoint = (0, _utils.eventToPoint)(e, rootRef.current),
-        _eventToPoint2 = (0, _slicedToArray2["default"])(_eventToPoint, 1),
-        pX = _eventToPoint2[0];
-      var vX = (0, _utils.invert)(xScale, pX);
-      var index = (0, _d3Array.bisector)(function (d) {
-        return d[x];
-      }).center(data, vX);
-      onClick(index, e);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref;
-      var SArea = this.Element;
-      var SAreaLine = _SvgElement.SvgElement;
-      var _this$asProps5 = this.asProps,
-        styles = _this$asProps5.styles,
-        hide = _this$asProps5.hide,
-        d3 = _this$asProps5.d3,
-        d3Line = _this$asProps5.d3Line,
-        color = _this$asProps5.color,
-        uid = _this$asProps5.uid,
-        size = _this$asProps5.size,
-        duration = _this$asProps5.duration,
-        x = _this$asProps5.x,
-        y = _this$asProps5.y,
-        Children = _this$asProps5.Children,
-        transparent = _this$asProps5.transparent,
-        forcedAdvancedMode = _this$asProps5.forcedAdvancedMode,
-        resolveColor = _this$asProps5.resolveColor,
-        patterns = _this$asProps5.patterns;
-      var advancedMode = forcedAdvancedMode || !!(0, _findComponent["default"])(Children, [Area.Line.displayName]);
-      var data = this.asProps.data.filter(function (item) {
-        return item[y] !== _utils.interpolateValue;
-      });
-      this.asProps.dataHintsHandler.specifyDataRowFields(x, y);
-      this.asProps.dataHintsHandler.establishDataType('time-series');
-      return _ref = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !advancedMode && /*#__PURE__*/_react["default"].createElement(SAreaLine, _ref.cn("SAreaLine", {
-        "tag": 'path',
-        "aria-hidden": true,
-        "clipPath": "url(#".concat(uid, "-animation)"),
-        "d": d3Line(data),
-        "color": resolveColor(color),
-        "use:duration": "".concat(duration, "ms"),
-        "transparent": transparent
-      })), /*#__PURE__*/_react["default"].createElement(SArea, _ref.cn("SArea", {
-        "aria-hidden": true,
-        "clipPath": "url(#".concat(uid, ")"),
-        "render": 'path',
-        "d": d3(data),
-        "hide": hide,
-        "pattern": patterns ? "url(#".concat(uid, "-pattern)") : undefined,
-        "color": resolveColor(color),
-        "use:duration": "".concat(duration, "ms"),
-        "transparent": transparent,
-        "onClickCapture": this.handlerOnClick.bind(this)
-      })), duration && /*#__PURE__*/_react["default"].createElement(_AnimatedClipPath["default"], _ref.cn("AnimatedClipPath", {
-        "duration": duration,
-        "id": uid,
-        "width": 0,
-        "height": size[1]
-      })), patterns && /*#__PURE__*/_react["default"].createElement(_Pattern.PatternFill, _ref.cn("PatternFill", {
-        "id": "".concat(uid, "-pattern"),
-        "patternKey": color,
-        "color": resolveColor(color),
-        "patterns": patterns
-      })));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(AreaRoot, "displayName", 'Area');
-(0, _defineProperty2["default"])(AreaRoot, "style", style);
-(0, _defineProperty2["default"])(AreaRoot, "enhance", [(0, _uniqueID["default"])()]);
-(0, _defineProperty2["default"])(AreaRoot, "defaultProps", function (_ref4) {
-  var x = _ref4.x,
-    y = _ref4.y,
-    y0 = _ref4.y0,
-    $rootProps = _ref4.$rootProps,
-    _ref4$curve = _ref4.curve,
-    curve = _ref4$curve === void 0 ? _d3Shape.curveLinear : _ref4$curve,
-    scale = _ref4.scale;
-  var _ref5 = scale || $rootProps.scale,
-    _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
-    xScale = _ref6[0],
-    yScale = _ref6[1];
-  var yRange = yScale.range();
+  getNullProps() {
+    const {
+      x,
+      y,
+      color,
+      resolveColor,
+      d3Line
+    } = this.asProps;
+    const data = this.asProps.data.filter(item => item[y] !== _utils.interpolateValue);
+    return {
+      data: (0, _utils.getNullData)(data, (0, _utils.definedNullData)(x, y), y),
+      d3: d3Line,
+      color,
+      resolveColor
+    };
+  }
+  getLineProps() {
+    const {
+      duration,
+      color,
+      resolveColor,
+      data,
+      d3Line,
+      uid
+    } = this.asProps;
+    return {
+      uid,
+      data,
+      d3: d3Line,
+      color,
+      resolveColor,
+      duration
+    };
+  }
+  handlerOnClick(e) {
+    e.stopPropagation();
+    const {
+      rootRef,
+      scale: [xScale],
+      data,
+      x,
+      onClick
+    } = this.asProps;
+    if (!onClick) return;
+    const [pX] = (0, _utils.eventToPoint)(e, rootRef.current);
+    const vX = (0, _utils.invert)(xScale, pX);
+    const index = (0, _d3Array.bisector)(d => d[x]).center(data, vX);
+    onClick(index, e);
+  }
+  render() {
+    var _ref;
+    const SArea = this.Element;
+    const SAreaLine = _SvgElement.SvgElement;
+    const {
+      styles,
+      hide,
+      d3,
+      d3Line,
+      color,
+      uid,
+      size,
+      duration,
+      x,
+      y,
+      Children,
+      transparent,
+      forcedAdvancedMode,
+      resolveColor,
+      patterns
+    } = this.asProps;
+    const advancedMode = forcedAdvancedMode || !!(0, _findComponent.default)(Children, [Area.Line.displayName]);
+    const data = this.asProps.data.filter(item => item[y] !== _utils.interpolateValue);
+    this.asProps.dataHintsHandler.specifyDataRowFields(x, y);
+    this.asProps.dataHintsHandler.establishDataType('time-series');
+    return _ref = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !advancedMode && /*#__PURE__*/_react.default.createElement(SAreaLine, _ref.cn("SAreaLine", {
+      "tag": 'path',
+      "aria-hidden": true,
+      "clipPath": `url(#${uid}-animation)`,
+      "d": d3Line(data),
+      "color": resolveColor(color),
+      "use:duration": `${duration}ms`,
+      "transparent": transparent
+    })), /*#__PURE__*/_react.default.createElement(SArea, _ref.cn("SArea", {
+      "aria-hidden": true,
+      "clipPath": `url(#${uid})`,
+      "render": 'path',
+      "d": d3(data),
+      "hide": hide,
+      "pattern": patterns ? `url(#${uid}-pattern)` : undefined,
+      "color": resolveColor(color),
+      "use:duration": `${duration}ms`,
+      "transparent": transparent,
+      "onClickCapture": this.handlerOnClick.bind(this)
+    })), duration && /*#__PURE__*/_react.default.createElement(_AnimatedClipPath.default, _ref.cn("AnimatedClipPath", {
+      "duration": duration,
+      "id": uid,
+      "width": 0,
+      "height": size[1]
+    })), patterns && /*#__PURE__*/_react.default.createElement(_Pattern.PatternFill, _ref.cn("PatternFill", {
+      "id": `${uid}-pattern`,
+      "patternKey": color,
+      "color": resolveColor(color),
+      "patterns": patterns
+    })));
+  }
+}
+(0, _defineProperty2.default)(AreaRoot, "displayName", 'Area');
+(0, _defineProperty2.default)(AreaRoot, "style", style);
+(0, _defineProperty2.default)(AreaRoot, "enhance", [(0, _uniqueID.default)()]);
+(0, _defineProperty2.default)(AreaRoot, "defaultProps", ({
+  x,
+  y,
+  y0,
+  $rootProps,
+  curve = _d3Shape.curveLinear,
+  scale
+}) => {
+  const [xScale, yScale] = scale || $rootProps.scale;
+  const yRange = yScale.range();
   return {
-    d3: (0, _d3Shape.area)().defined((0, _utils.definedData)(x, y)).curve(curve).x(function (p) {
-      return (0, _utils.scaleOfBandwidth)(xScale, p[x]);
-    }).y0(function (p) {
-      return p[y0] ? (0, _utils.scaleOfBandwidth)(yScale, p[y0]) : yRange[0];
-    }).y1(function (p) {
-      return (0, _utils.scaleOfBandwidth)(yScale, p[y]);
-    }),
-    d3Line: (0, _d3Shape.line)().defined((0, _utils.definedData)(x, y)).curve(curve).x(function (p) {
-      return (0, _utils.scaleOfBandwidth)(xScale, p[x]);
-    }).y(function (p) {
-      return (0, _utils.scaleOfBandwidth)(yScale, p[y]);
-    }),
+    d3: (0, _d3Shape.area)().defined((0, _utils.definedData)(x, y)).curve(curve).x(p => (0, _utils.scaleOfBandwidth)(xScale, p[x])).y0(p => p[y0] ? (0, _utils.scaleOfBandwidth)(yScale, p[y0]) : yRange[0]).y1(p => (0, _utils.scaleOfBandwidth)(yScale, p[y])),
+    d3Line: (0, _d3Shape.line)().defined((0, _utils.definedData)(x, y)).curve(curve).x(p => (0, _utils.scaleOfBandwidth)(xScale, p[x])).y(p => (0, _utils.scaleOfBandwidth)(yScale, p[y])),
     duration: 500
   };
 });
 function Line(props) {
   var _ref2;
-  var SAreaLine = props.Element,
-    styles = props.styles,
-    d3 = props.d3,
-    data = props.data,
-    color = props.color,
-    resolveColor = props.resolveColor,
-    duration = props.duration,
-    uid = props.uid,
-    transparent = props.transparent;
-  return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAreaLine, _ref2.cn("SAreaLine", {
+  const {
+    Element: SAreaLine,
+    styles,
+    d3,
+    data,
+    color,
+    resolveColor,
+    duration,
+    uid,
+    transparent
+  } = props;
+  return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SAreaLine, _ref2.cn("SAreaLine", {
     "render": 'path',
-    "clipPath": "url(#".concat(uid, ")"),
+    "clipPath": `url(#${uid})`,
     "d": d3(data),
     "color": resolveColor(color),
-    "use:duration": "".concat(duration, "ms"),
+    "use:duration": `${duration}ms`,
     "transparent": transparent
   }));
 }
 function Null(props) {
   var _ref3;
-  var SNull = props.Element,
-    styles = props.styles,
-    d3 = props.d3,
-    data = props.data,
-    hide = props.hide,
-    color = props.color,
-    resolveColor = props.resolveColor;
-  return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SNull, _ref3.cn("SNull", {
+  const {
+    Element: SNull,
+    styles,
+    d3,
+    data,
+    hide,
+    color,
+    resolveColor
+  } = props;
+  return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SNull, _ref3.cn("SNull", {
     "render": 'path',
     "d": d3(data),
     "hide": hide,
     "color": resolveColor(color)
   }));
 }
-var Area = (0, _createElement["default"])(AreaRoot, {
-  Dots: _Dots["default"],
-  Null: Null,
-  Line: Line
+const Area = (0, _createElement.default)(AreaRoot, {
+  Dots: _Dots.default,
+  Null,
+  Line
 });
-var _default = exports["default"] = Area;
+var _default = exports.default = Area;
 //# sourceMappingURL=Area.js.map