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

package/lib/esm/Reference.mjs

@@ -1,49 +1,42 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { sstyled, Component } from "@semcore/core";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import React from "react";
 import createElement from "./createElement.mjs";
 import { scaleOfBandwidth } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/reference.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SReferenceLine_1fsdg_gg_{fill:none;stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___STitle_1fsdg_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-chart-grid-text-label, #6c6e79);transform-origin:var(--transform-origin_1fsdg)}.___STitle_1fsdg_gg_._position_top_1fsdg_gg_{text-anchor:middle}.___STitle_1fsdg_gg_._position_bottom_1fsdg_gg_{text-anchor:middle;dominant-baseline:hanging}.___STitle_1fsdg_gg_._position_left_1fsdg_gg_,.___STitle_1fsdg_gg_._position_right_1fsdg_gg_{transform:rotate(-90deg);text-anchor:middle;dominant-baseline:middle}.___SBackground_1fsdg_gg_{fill:var(--intergalactic-chart-grid-period-bg, rgba(196, 199, 207, 0.2))}.___SStripes_1fsdg_gg_{fill:var(--fill_1fsdg)}.___SStripesPatternPath_1fsdg_gg_{stroke:var(--intergalactic-chart-grid-period-pattern, rgba(25, 27, 35, 0.15));stroke-width:1px}",
+    ".___SReferenceLine_1w6r5_gg_{fill:none;stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___STitle_1w6r5_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-chart-grid-text-label, #6c6e79);transform-origin:var(--transform-origin_1w6r5)}.___STitle_1w6r5_gg_._position_top_1w6r5_gg_{text-anchor:middle}.___STitle_1w6r5_gg_._position_bottom_1w6r5_gg_{text-anchor:middle;dominant-baseline:hanging}.___STitle_1w6r5_gg_._position_left_1w6r5_gg_,.___STitle_1w6r5_gg_._position_right_1w6r5_gg_{transform:rotate(-90deg);text-anchor:middle;dominant-baseline:middle}.___SBackground_1w6r5_gg_{fill:var(--intergalactic-chart-grid-period-bg, rgba(196, 199, 207, 0.2))}.___SStripes_1w6r5_gg_{fill:var(--fill_1w6r5)}.___SStripesPatternPath_1w6r5_gg_{stroke:var(--intergalactic-chart-grid-period-pattern, rgba(25, 27, 35, 0.15));stroke-width:1px}",
     /*__inner_css_end__*/
-    "1fsdg_gg_"
+    "1w6r5_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SReferenceLine": "___SReferenceLine_1fsdg_gg_",
-    "__STitle": "___STitle_1fsdg_gg_",
-    "--transform-origin": "--transform-origin_1fsdg",
-    "_position_top": "_position_top_1fsdg_gg_",
-    "_position_bottom": "_position_bottom_1fsdg_gg_",
-    "_position_right": "_position_right_1fsdg_gg_",
-    "_position_left": "_position_left_1fsdg_gg_",
-    "__SBackground": "___SBackground_1fsdg_gg_",
-    "__SStripes": "___SStripes_1fsdg_gg_",
-    "--fill": "--fill_1fsdg",
-    "__SStripesPatternPath": "___SStripesPatternPath_1fsdg_gg_"
+    "__SReferenceLine": "___SReferenceLine_1w6r5_gg_",
+    "__STitle": "___STitle_1w6r5_gg_",
+    "--transform-origin": "--transform-origin_1w6r5",
+    "_position_top": "_position_top_1w6r5_gg_",
+    "_position_bottom": "_position_bottom_1w6r5_gg_",
+    "_position_right": "_position_right_1w6r5_gg_",
+    "_position_left": "_position_left_1w6r5_gg_",
+    "__SBackground": "___SBackground_1w6r5_gg_",
+    "__SStripes": "___SStripes_1w6r5_gg_",
+    "--fill": "--fill_1w6r5",
+    "__SStripesPatternPath": "___SStripesPatternPath_1w6r5_gg_"
   })
 );
-var side2direction = {
+const side2direction = {
   left: "vertical",
   right: "vertical",
   top: "horizontal",
   bottom: "horizontal"
 };
-var lineDirection2props = {
-  vertical: function vertical(_ref5, value) {
-    var _ref6 = _slicedToArray(_ref5, 2), xScale = _ref6[0], yScale = _ref6[1];
-    var yRange = yScale.range();
-    var x = scaleOfBandwidth(xScale, value);
+const lineDirection2props = {
+  vertical: ([xScale, yScale], value) => {
+    const yRange = yScale.range();
+    const x = scaleOfBandwidth(xScale, value);
     return {
       x1: x,
       x2: x,
@@ -51,10 +44,9 @@ var lineDirection2props = {
       y2: yRange[1]
     };
   },
-  horizontal: function horizontal(_ref7, value) {
-    var _ref8 = _slicedToArray(_ref7, 2), xScale = _ref8[0], yScale = _ref8[1];
-    var xRange = xScale.range();
-    var y = scaleOfBandwidth(yScale, value);
+  horizontal: ([xScale, yScale], value) => {
+    const xRange = xScale.range();
+    const y = scaleOfBandwidth(yScale, value);
     return {
       x1: xRange[0],
       x2: xRange[1],
@@ -63,12 +55,11 @@ var lineDirection2props = {
     };
   }
 };
-var rectDirection2props = {
-  vertical: function vertical2(_ref9, value, endValue) {
-    var _ref0 = _slicedToArray(_ref9, 2), xScale = _ref0[0], yScale = _ref0[1];
-    var yRange = yScale.range();
-    var x = scaleOfBandwidth(xScale, value);
-    var width = endValue !== void 0 ? scaleOfBandwidth(xScale, endValue) - x : 100;
+const rectDirection2props = {
+  vertical: ([xScale, yScale], value, endValue) => {
+    const yRange = yScale.range();
+    const x = scaleOfBandwidth(xScale, value);
+    const width = endValue !== void 0 ? scaleOfBandwidth(xScale, endValue) - x : 100;
     return {
       x,
       y: yRange[1],
@@ -76,11 +67,10 @@ var rectDirection2props = {
       height: yRange[0] - yRange[1]
     };
   },
-  horizontal: function horizontal2(_ref1, value, endValue) {
-    var _ref10 = _slicedToArray(_ref1, 2), xScale = _ref10[0], yScale = _ref10[1];
-    var xRange = xScale.range();
-    var y = scaleOfBandwidth(yScale, value);
-    var height = endValue !== void 0 ? scaleOfBandwidth(yScale, endValue) - y : 100;
+  horizontal: ([xScale, yScale], value, endValue) => {
+    const xRange = xScale.range();
+    const y = scaleOfBandwidth(yScale, value);
+    const height = endValue !== void 0 ? scaleOfBandwidth(yScale, endValue) - y : 100;
     return {
       x: xRange[0],
       y,
@@ -89,84 +79,83 @@ var rectDirection2props = {
     };
   }
 };
-var titleOffset = 10;
-var titleSideToProps = {
-  left: function left(_ref11, value) {
-    var _ref12 = _slicedToArray(_ref11, 2), xScale = _ref12[0], yScale = _ref12[1];
-    var yRange = yScale.range();
-    var x = scaleOfBandwidth(xScale, value);
+const titleOffset = 10;
+const titleSideToProps = {
+  left: ([xScale, yScale], value) => {
+    const yRange = yScale.range();
+    const x = scaleOfBandwidth(xScale, value);
     return {
       x: x - titleOffset,
       y: (yRange[0] + yRange[1]) / 2
     };
   },
-  right: function right(_ref13, value) {
-    var _ref14 = _slicedToArray(_ref13, 2), xScale = _ref14[0], yScale = _ref14[1];
-    var yRange = yScale.range();
-    var x = scaleOfBandwidth(xScale, value);
+  right: ([xScale, yScale], value) => {
+    const yRange = yScale.range();
+    const x = scaleOfBandwidth(xScale, value);
     return {
       x: x + titleOffset,
       y: (yRange[0] + yRange[1]) / 2
     };
   },
-  top: function top(_ref15, value) {
-    var _ref16 = _slicedToArray(_ref15, 2), xScale = _ref16[0], yScale = _ref16[1];
-    var xRange = xScale.range();
-    var y = scaleOfBandwidth(yScale, value);
+  top: ([xScale, yScale], value) => {
+    const xRange = xScale.range();
+    const y = scaleOfBandwidth(yScale, value);
     return {
       x: (xRange[1] + xRange[0]) / 2,
       y: y - titleOffset
     };
   },
-  bottom: function bottom(_ref17, value) {
-    var _ref18 = _slicedToArray(_ref17, 2), xScale = _ref18[0], yScale = _ref18[1];
-    var xRange = xScale.range();
-    var y = scaleOfBandwidth(yScale, value);
+  bottom: ([xScale, yScale], value) => {
+    const xRange = xScale.range();
+    const y = scaleOfBandwidth(yScale, value);
     return {
       x: (xRange[1] + xRange[0]) / 2,
       y: y + titleOffset
     };
   }
 };
-var ReferenceLineRoot = /* @__PURE__ */ (function(_Component) {
-  function ReferenceLineRoot2() {
-    _classCallCheck(this, ReferenceLineRoot2);
-    return _callSuper(this, ReferenceLineRoot2, arguments);
+class ReferenceLineRoot extends Component {
+  getTitleProps() {
+    const {
+      position,
+      value
+    } = this.asProps;
+    return {
+      position,
+      value
+    };
+  }
+  getBackgroundProps() {
+    const {
+      position,
+      value
+    } = this.asProps;
+    return {
+      position,
+      value
+    };
   }
-  _inherits(ReferenceLineRoot2, _Component);
-  return _createClass(ReferenceLineRoot2, [{
-    key: "getTitleProps",
-    value: function getTitleProps() {
-      var _this$asProps = this.asProps, position = _this$asProps.position, value = _this$asProps.value;
-      return {
-        position,
-        value
-      };
-    }
-  }, {
-    key: "getBackgroundProps",
-    value: function getBackgroundProps() {
-      var _this$asProps2 = this.asProps, position = _this$asProps2.position, value = _this$asProps2.value;
-      return {
-        position,
-        value
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref;
-      var SReferenceLine = this.Element;
-      var _this$asProps3 = this.asProps, title = _this$asProps3.title, scale = _this$asProps3.scale, position = _this$asProps3.position, value = _this$asProps3.value, color = _this$asProps3.color, resolveColor = _this$asProps3.resolveColor, styles = _this$asProps3.styles;
-      var positionProps = lineDirection2props[side2direction[position]];
-      return _ref = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SReferenceLine, _ref.cn("SReferenceLine", _objectSpread({
-        "render": "line",
-        "__excludeProps": ["data", "scale", "format", "value", "color"],
-        "stroke": resolveColor(color)
-      }, positionProps(scale, value)))), title && /* @__PURE__ */ React.createElement(ReferenceLine.Title, null, title));
-    }
-  }]);
-})(Component);
+  render() {
+    var _ref;
+    const SReferenceLine = this.Element;
+    const {
+      title,
+      scale,
+      position,
+      value,
+      color,
+      resolveColor,
+      styles
+    } = this.asProps;
+    const positionProps = lineDirection2props[side2direction[position]];
+    return _ref = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SReferenceLine, _ref.cn("SReferenceLine", {
+      "render": "line",
+      "__excludeProps": ["data", "scale", "format", "value", "color"],
+      "stroke": resolveColor(color),
+      ...positionProps(scale, value)
+    })), title && /* @__PURE__ */ React.createElement(ReferenceLine.Title, null, title));
+  }
+}
 _defineProperty(ReferenceLineRoot, "displayName", "ReferenceLine");
 _defineProperty(ReferenceLineRoot, "style", style);
 _defineProperty(ReferenceLineRoot, "defaultProps", {
@@ -174,11 +163,20 @@ _defineProperty(ReferenceLineRoot, "defaultProps", {
 });
 function Title(props) {
   var _ref2;
-  var STitle = props.Element, styles = props.styles, scale = props.scale, position = props.position, value = props.value;
-  var _titleSideToProps$pos = titleSideToProps[position](scale, value), x = _titleSideToProps$pos.x, y = _titleSideToProps$pos.y;
-  var sstyles = sstyled(styles);
-  var sTitleStyles = sstyles.cn("STitle", {
-    "transform-origin": "".concat(x.toFixed(2), "px ").concat(y.toFixed(2), "px")
+  const {
+    Element: STitle,
+    styles,
+    scale,
+    position,
+    value
+  } = props;
+  const {
+    x,
+    y
+  } = titleSideToProps[position](scale, value);
+  const sstyles = sstyled(styles);
+  const sTitleStyles = sstyles.cn("STitle", {
+    "transform-origin": `${x.toFixed(2)}px ${y.toFixed(2)}px`
   });
   return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STitle, _ref2.cn("STitle", {
     "render": "text",
@@ -192,30 +190,47 @@ function Title(props) {
 }
 function Background(props) {
   var _ref3;
-  var SBackground = props.Element, styles = props.styles, scale = props.scale, _props$position = props.position, position = _props$position === void 0 ? "left" : _props$position, value = props.value, endValue = props.endValue;
-  var positionProps = rectDirection2props[side2direction[position]];
-  return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SBackground, _ref3.cn("SBackground", _objectSpread({
+  const {
+    Element: SBackground,
+    styles,
+    scale,
+    position = "left",
+    value,
+    endValue
+  } = props;
+  const positionProps = rectDirection2props[side2direction[position]];
+  return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SBackground, _ref3.cn("SBackground", {
     "render": "rect",
-    "childrenPosition": "inside"
-  }, positionProps(scale, value, endValue))));
+    "childrenPosition": "inside",
+    ...positionProps(scale, value, endValue)
+  }));
 }
 Background.style = style;
-var diagonalGap = 8;
-var gap = Math.sqrt(Math.pow(diagonalGap, 2) + Math.pow(diagonalGap, 2));
-var gap12 = gap * (1 / 2);
-var gap32 = gap * (3 / 2);
-var path = "M-".concat(gap, ",-").concat(gap12, " L").concat(gap, ",").concat(gap32, " M-").concat(gap12, ",-").concat(gap, " L").concat(gap32, ",").concat(gap);
+const diagonalGap = 8;
+const gap = Math.sqrt(diagonalGap ** 2 + diagonalGap ** 2);
+const gap12 = gap * (1 / 2);
+const gap32 = gap * (3 / 2);
+const path = `M-${gap},-${gap12} L${gap},${gap32} M-${gap12},-${gap} L${gap32},${gap}`;
 function Stripes(props) {
   var _ref4;
-  var SStripes = props.Element, styles = props.styles, scale = props.scale, _props$position2 = props.position, position = _props$position2 === void 0 ? "left" : _props$position2, value = props.value, endValue = props.endValue, uid = props.uid;
-  var SStripesPatternPath = "path";
-  var positionProps = rectDirection2props[side2direction[position]];
-  var patternId = "".concat(uid, "-pattern");
-  return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement("g", _ref4.cn("g", {}), /* @__PURE__ */ React.createElement(SStripes, _ref4.cn("SStripes", _objectSpread({
+  const {
+    Element: SStripes,
+    styles,
+    scale,
+    position = "left",
+    value,
+    endValue,
+    uid
+  } = props;
+  const SStripesPatternPath = "path";
+  const positionProps = rectDirection2props[side2direction[position]];
+  const patternId = `${uid}-pattern`;
+  return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement("g", _ref4.cn("g", {}), /* @__PURE__ */ React.createElement(SStripes, _ref4.cn("SStripes", {
     "render": "rect",
     "childrenPosition": "inside",
-    "fill": "url(#".concat(patternId, ")")
-  }, positionProps(scale, value, endValue)))), /* @__PURE__ */ React.createElement("pattern", _ref4.cn("pattern", {
+    "fill": `url(#${patternId})`,
+    ...positionProps(scale, value, endValue)
+  })), /* @__PURE__ */ React.createElement("pattern", _ref4.cn("pattern", {
     "id": patternId,
     "patternUnits": "userSpaceOnUse",
     "width": gap,
@@ -226,13 +241,13 @@ function Stripes(props) {
 }
 Stripes.style = style;
 Stripes.enhance = [uniqueIDEnhancement()];
-var ReferenceLine = createElement(ReferenceLineRoot, {
+const ReferenceLine = createElement(ReferenceLineRoot, {
   Title,
   Background,
   Stripes
 });
-var ReferenceBackground = createElement(Background);
-var ReferenceStripes = createElement(Stripes);
+const ReferenceBackground = createElement(Background);
+const ReferenceStripes = createElement(Stripes);
 export {
   ReferenceBackground,
   ReferenceLine,

package/lib/esm/ResponsiveContainer.mjs

@@ -1,32 +1,30 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
+import { Box } from "@semcore/base-components";
 import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
 import fire from "@semcore/core/lib/utils/fire";
 import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
 import trottle from "@semcore/core/lib/utils/rafTrottle";
-import { Box } from "@semcore/flex-box";
 import React from "react";
-var ResponsiveContainerRoot = /* @__PURE__ */ (function(_Component) {
-  function ResponsiveContainerRoot2(props) {
-    var _this;
-    _classCallCheck(this, ResponsiveContainerRoot2);
-    _this = _callSuper(this, ResponsiveContainerRoot2, [props]);
-    _defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "size", [0, 0]);
-    _defineProperty(_this, "handleResize", trottle(function(entries) {
-      var _this$asProps = _this.asProps, Children = _this$asProps.Children, aspect = _this$asProps.aspect;
-      if (!_this.$container) return;
-      var _this$$container = _this.$container, width = _this$$container.clientWidth, height = _this$$container.clientHeight;
+class ResponsiveContainerRoot extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "size", [0, 0]);
+    _defineProperty(this, "handleResize", trottle((entries) => {
+      const {
+        Children,
+        aspect
+      } = this.asProps;
+      if (!this.$container) return;
+      let {
+        clientWidth: width,
+        clientHeight: height
+      } = this.$container;
       if (aspect) {
-        var style = window.getComputedStyle(_this.$container);
-        var minHeight = Number.parseInt(style.getPropertyValue("min-height"));
-        var maxHeight = Number.parseInt(style.getPropertyValue("max-height"));
+        const style = window.getComputedStyle(this.$container);
+        const minHeight = Number.parseInt(style.getPropertyValue("min-height"));
+        const maxHeight = Number.parseInt(style.getPropertyValue("max-height"));
         height = width * aspect;
         if (height < minHeight) {
           height = minHeight;
@@ -35,62 +33,53 @@ var ResponsiveContainerRoot = /* @__PURE__ */ (function(_Component) {
           height = maxHeight;
         }
       }
-      if (_this.size[0] === width && _this.size[1] === height) return;
-      _this.size = [width, height];
-      fire(_this, "onResize", _this.size, entries);
+      if (this.size[0] === width && this.size[1] === height) return;
+      this.size = [width, height];
+      fire(this, "onResize", this.size, entries);
       if (typeof getOriginChildren(Children) === "function") {
-        _this.forceUpdate();
+        this.forceUpdate();
       }
     }));
     if (canUseDOM()) {
-      _this.observer = new ResizeObserver(_this.handleResize);
+      this.observer = new ResizeObserver(this.handleResize);
     }
-    return _this;
   }
-  _inherits(ResponsiveContainerRoot2, _Component);
-  return _createClass(ResponsiveContainerRoot2, [{
-    key: "$container",
-    get: function get() {
-      return this.containerRef.current;
-    }
-  }, {
-    key: "setContext",
-    value: function setContext() {
-      var _this$size = _slicedToArray(this.size, 2), width = _this$size[0], height = _this$size[1];
-      return {
-        width,
-        height
-      };
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.$container) {
-        var _this$observer;
-        (_this$observer = this.observer) === null || _this$observer === void 0 || _this$observer.observe(this.$container);
-      }
-    }
-    // TODO component did update ref?
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$observer2;
-      (_this$observer2 = this.observer) === null || _this$observer2 === void 0 || _this$observer2.disconnect();
+  get $container() {
+    return this.containerRef.current;
+  }
+  setContext() {
+    const [width, height] = this.size;
+    return {
+      width,
+      height
+    };
+  }
+  componentDidMount() {
+    var _a;
+    if (this.$container) {
+      (_a = this.observer) == null ? void 0 : _a.observe(this.$container);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref2;
-      var SResponsiveContainer = Box;
-      var styles = this.asProps.styles;
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SResponsiveContainer, _ref2.cn("SResponsiveContainer", _objectSpread({}, assignProps({
+  }
+  // TODO component did update ref?
+  componentWillUnmount() {
+    var _a;
+    (_a = this.observer) == null ? void 0 : _a.disconnect();
+  }
+  render() {
+    var _ref = this.asProps, _ref2;
+    const SResponsiveContainer = Box;
+    const {
+      styles
+    } = this.asProps;
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SResponsiveContainer, _ref2.cn("SResponsiveContainer", {
+      ...assignProps({
         "ref": this.containerRef
-      }, _ref))));
-    }
-  }]);
-})(Component);
+      }, _ref)
+    }));
+  }
+}
 _defineProperty(ResponsiveContainerRoot, "displayName", "ResponsiveContainer");
-var ResponsiveContainer = createComponent(ResponsiveContainerRoot);
+const ResponsiveContainer = createComponent(ResponsiveContainerRoot);
 export {
   ResponsiveContainer as default
 };