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

package/lib/esm/Area.mjs

@@ -1,8 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, Component } from "@semcore/core";
 import findComponent from "@semcore/core/lib/utils/findComponent";
@@ -17,176 +12,210 @@ import Dots from "./Dots.mjs";
 import { PatternFill } from "./Pattern.mjs";
 import { interpolateValue, getNullData, eventToPoint, invert, definedNullData, definedData, scaleOfBandwidth } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/area.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (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}",
+    ".___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__*/
-    "dh1yc_gg_"
+    "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 AreaRoot2() {
-    _classCallCheck(this, AreaRoot2);
-    return _callSuper(this, AreaRoot2, arguments);
+class AreaRoot extends Component {
+  getDotsProps() {
+    const {
+      x,
+      y,
+      color,
+      d3Line,
+      transparent,
+      resolveColor,
+      patterns,
+      onClick
+    } = this.asProps;
+    const data = this.asProps.data.filter((item) => item[y] !== interpolateValue);
+    return {
+      x,
+      y,
+      data,
+      d3: d3Line,
+      color,
+      resolveColor,
+      transparent,
+      patterns,
+      onClick
+    };
   }
-  _inherits(AreaRoot2, _Component);
-  return _createClass(AreaRoot2, [{
-    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] !== interpolateValue;
-      });
-      return {
-        x,
-        y,
-        data,
-        d3: d3Line,
-        color,
-        resolveColor,
-        transparent,
-        patterns,
-        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] !== interpolateValue;
-      });
-      return {
-        data: getNullData(data, definedNullData(x, y), y),
-        d3: d3Line,
-        color,
-        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,
-        data,
-        d3: d3Line,
-        color,
-        resolveColor,
-        duration
-      };
-    }
-  }, {
-    key: "handlerOnClick",
-    value: function handlerOnClick(e) {
-      e.stopPropagation();
-      var _this$asProps4 = this.asProps, rootRef = _this$asProps4.rootRef, _this$asProps4$scale = _slicedToArray(_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 = eventToPoint(e, rootRef.current), _eventToPoint2 = _slicedToArray(_eventToPoint, 1), pX = _eventToPoint2[0];
-      var vX = invert(xScale, pX);
-      var index = 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;
-      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 || !!findComponent(Children, [Area.Line.displayName]);
-      var data = this.asProps.data.filter(function(item) {
-        return item[y] !== interpolateValue;
-      });
-      this.asProps.dataHintsHandler.specifyDataRowFields(x, y);
-      this.asProps.dataHintsHandler.establishDataType("time-series");
-      return _ref = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, !advancedMode && /* @__PURE__ */ React.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.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)") : void 0,
-        "color": resolveColor(color),
-        "use:duration": "".concat(duration, "ms"),
-        "transparent": transparent,
-        "onClickCapture": this.handlerOnClick.bind(this)
-      })), duration && /* @__PURE__ */ React.createElement(AnimatedClipPath, _ref.cn("AnimatedClipPath", {
-        "duration": duration,
-        "id": uid,
-        "width": 0,
-        "height": size[1]
-      })), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref.cn("PatternFill", {
-        "id": "".concat(uid, "-pattern"),
-        "patternKey": color,
-        "color": resolveColor(color),
-        "patterns": patterns
-      })));
-    }
-  }]);
-})(Component);
+  getNullProps() {
+    const {
+      x,
+      y,
+      color,
+      resolveColor,
+      d3Line
+    } = this.asProps;
+    const data = this.asProps.data.filter((item) => item[y] !== interpolateValue);
+    return {
+      data: getNullData(data, 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] = eventToPoint(e, rootRef.current);
+    const vX = invert(xScale, pX);
+    const index = bisector((d) => d[x]).center(data, vX);
+    onClick(index, e);
+  }
+  render() {
+    var _ref;
+    const SArea = this.Element;
+    const SAreaLine = SvgElement;
+    const {
+      styles,
+      hide,
+      d3,
+      d3Line,
+      color,
+      uid,
+      size,
+      duration,
+      x,
+      y,
+      Children,
+      transparent,
+      forcedAdvancedMode,
+      resolveColor,
+      patterns
+    } = this.asProps;
+    const advancedMode = forcedAdvancedMode || !!findComponent(Children, [Area.Line.displayName]);
+    const data = this.asProps.data.filter((item) => item[y] !== interpolateValue);
+    this.asProps.dataHintsHandler.specifyDataRowFields(x, y);
+    this.asProps.dataHintsHandler.establishDataType("time-series");
+    return _ref = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, !advancedMode && /* @__PURE__ */ React.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.createElement(SArea, _ref.cn("SArea", {
+      "aria-hidden": true,
+      "clipPath": `url(#${uid})`,
+      "render": "path",
+      "d": d3(data),
+      "hide": hide,
+      "pattern": patterns ? `url(#${uid}-pattern)` : void 0,
+      "color": resolveColor(color),
+      "use:duration": `${duration}ms`,
+      "transparent": transparent,
+      "onClickCapture": this.handlerOnClick.bind(this)
+    })), duration && /* @__PURE__ */ React.createElement(AnimatedClipPath, _ref.cn("AnimatedClipPath", {
+      "duration": duration,
+      "id": uid,
+      "width": 0,
+      "height": size[1]
+    })), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref.cn("PatternFill", {
+      "id": `${uid}-pattern`,
+      "patternKey": color,
+      "color": resolveColor(color),
+      "patterns": patterns
+    })));
+  }
+}
 _defineProperty(AreaRoot, "displayName", "Area");
 _defineProperty(AreaRoot, "style", style);
 _defineProperty(AreaRoot, "enhance", [uniqueIDEnhancement()]);
-_defineProperty(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 ? curveLinear : _ref4$curve, scale = _ref4.scale;
-  var _ref5 = scale || $rootProps.scale, _ref6 = _slicedToArray(_ref5, 2), xScale = _ref6[0], yScale = _ref6[1];
-  var yRange = yScale.range();
+_defineProperty(AreaRoot, "defaultProps", ({
+  x,
+  y,
+  y0,
+  $rootProps,
+  curve = curveLinear,
+  scale
+}) => {
+  const [xScale, yScale] = scale || $rootProps.scale;
+  const yRange = yScale.range();
   return {
-    d3: area().defined(definedData(x, y)).curve(curve).x(function(p) {
-      return scaleOfBandwidth(xScale, p[x]);
-    }).y0(function(p) {
-      return p[y0] ? scaleOfBandwidth(yScale, p[y0]) : yRange[0];
-    }).y1(function(p) {
-      return scaleOfBandwidth(yScale, p[y]);
-    }),
-    d3Line: line().defined(definedData(x, y)).curve(curve).x(function(p) {
-      return scaleOfBandwidth(xScale, p[x]);
-    }).y(function(p) {
-      return scaleOfBandwidth(yScale, p[y]);
-    }),
+    d3: area().defined(definedData(x, y)).curve(curve).x((p) => scaleOfBandwidth(xScale, p[x])).y0((p) => p[y0] ? scaleOfBandwidth(yScale, p[y0]) : yRange[0]).y1((p) => scaleOfBandwidth(yScale, p[y])),
+    d3Line: line().defined(definedData(x, y)).curve(curve).x((p) => scaleOfBandwidth(xScale, p[x])).y((p) => 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;
+  const {
+    Element: SAreaLine,
+    styles,
+    d3,
+    data,
+    color,
+    resolveColor,
+    duration,
+    uid,
+    transparent
+  } = props;
   return _ref2 = sstyled(styles), /* @__PURE__ */ React.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;
+  const {
+    Element: SNull,
+    styles,
+    d3,
+    data,
+    hide,
+    color,
+    resolveColor
+  } = props;
   return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SNull, _ref3.cn("SNull", {
     "render": "path",
     "d": d3(data),
@@ -194,7 +223,7 @@ function Null(props) {
     "color": resolveColor(color)
   }));
 }
-var Area = createElement(AreaRoot, {
+const Area = createElement(AreaRoot, {
   Dots,
   Null,
   Line