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

package/lib/esm/CompactHorizontalBar.mjs

@@ -1,264 +1,261 @@
-import "@babel/runtime/helpers/esm/readOnlyError";
-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 { sstyled, assignProps, Component } from "@semcore/core";
+import { Box } from "@semcore/base-components";
 import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
 import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
 import trottle from "@semcore/core/lib/utils/rafTrottle";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
-import { Box } from "@semcore/flex-box";
 import React from "react";
 import AnimatedClipPath from "./AnimatedClipPath.mjs";
 import createElement from "./createElement.mjs";
 import { PatternFill } from "./Pattern.mjs";
 import Tooltip from "./Tooltip.mjs";
-import { scaleToBand, roundedPath, eventToPoint } from "./utils.mjs";
+import { eventToPoint, roundedPath, scaleToBand } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/bar.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBar_194w8_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_194w8);transition-timing-function:ease-in-out}.___SBar_194w8_gg_.__color_194w8_gg_{fill:var(--color_194w8)}.___SBar_194w8_gg_.__pattern_194w8_gg_.__color_194w8_gg_{fill:var(--pattern_194w8);stroke:var(--color_194w8);stroke-width:1px}.___SBar_194w8_gg_.__hide_194w8_gg_{display:none}.___SBar_194w8_gg_.__transparent_194w8_gg_{opacity:.3}.___SBackground_194w8_gg_.__onClick_194w8_gg_,.___SBar_194w8_gg_.__onClick_194w8_gg_{cursor:pointer}.___SBackground_194w8_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_194w8_gg_{display:flex;justify-content:space-between}.___SBarLabel_194w8_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_194w8_gg_,.___SBarPercent_194w8_gg_,.___SBarValue_194w8_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_194w8_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_194w8_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_194w8_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SBar_1j50a_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1j50a);transition-timing-function:ease-in-out}.___SBar_1j50a_gg_.__color_1j50a_gg_{fill:var(--color_1j50a)}.___SBar_1j50a_gg_.__pattern_1j50a_gg_.__color_1j50a_gg_{fill:var(--pattern_1j50a);stroke:var(--color_1j50a);stroke-width:1px}.___SBar_1j50a_gg_.__hide_1j50a_gg_{display:none}.___SBar_1j50a_gg_.__transparent_1j50a_gg_{opacity:.3}.___SBackground_1j50a_gg_.__onClick_1j50a_gg_,.___SBar_1j50a_gg_.__onClick_1j50a_gg_{cursor:pointer}.___SBackground_1j50a_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1j50a_gg_{display:flex;justify-content:space-between}.___SBarLabel_1j50a_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1j50a_gg_,.___SBarPercent_1j50a_gg_,.___SBarValue_1j50a_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1j50a_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1j50a_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1j50a_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
     /*__inner_css_end__*/
-    "194w8_gg_"
+    "1j50a_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBar": "___SBar_194w8_gg_",
-    "--duration": "--duration_194w8",
-    "_color": "__color_194w8_gg_",
-    "--color": "--color_194w8",
-    "_pattern": "__pattern_194w8_gg_",
-    "--pattern": "--pattern_194w8",
-    "_hide": "__hide_194w8_gg_",
-    "_transparent": "__transparent_194w8_gg_",
-    "_onClick": "__onClick_194w8_gg_",
-    "__SBackground": "___SBackground_194w8_gg_",
-    "__SBarAnnotation": "___SBarAnnotation_194w8_gg_",
-    "__SBarLabel": "___SBarLabel_194w8_gg_",
-    "__SBarPercent": "___SBarPercent_194w8_gg_",
-    "__SBarValue": "___SBarValue_194w8_gg_",
-    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_194w8_gg_"
+    "__SBar": "___SBar_1j50a_gg_",
+    "--duration": "--duration_1j50a",
+    "_color": "__color_1j50a_gg_",
+    "--color": "--color_1j50a",
+    "_pattern": "__pattern_1j50a_gg_",
+    "--pattern": "--pattern_1j50a",
+    "_hide": "__hide_1j50a_gg_",
+    "_transparent": "__transparent_1j50a_gg_",
+    "_onClick": "__onClick_1j50a_gg_",
+    "__SBackground": "___SBackground_1j50a_gg_",
+    "__SBarAnnotation": "___SBarAnnotation_1j50a_gg_",
+    "__SBarLabel": "___SBarLabel_1j50a_gg_",
+    "__SBarPercent": "___SBarPercent_1j50a_gg_",
+    "__SBarValue": "___SBarValue_1j50a_gg_",
+    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1j50a_gg_"
   })
 );
-var MIN_WIDTH = 4;
-var barHeight = 20;
-var hoverOffset = 6;
-var CompactHorizontalBarRoot = /* @__PURE__ */ (function(_Component) {
-  function CompactHorizontalBarRoot2() {
-    var _this;
-    _classCallCheck(this, CompactHorizontalBarRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, CompactHorizontalBarRoot2, [].concat(args));
-    _defineProperty(_this, "state", {
+const MIN_WIDTH = 4;
+const barHeight = 20;
+const hoverOffset = 6;
+class CompactHorizontalBarRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
       indexToHover: null
     });
-    _defineProperty(_this, "percentFormatter", null);
-    _defineProperty(_this, "percentFormatterLocale", null);
-    _defineProperty(_this, "valueFormatter", null);
-    _defineProperty(_this, "valueFormatterLocale", null);
-    return _this;
+    _defineProperty(this, "percentFormatter", null);
+    _defineProperty(this, "percentFormatterLocale", null);
+    _defineProperty(this, "valueFormatter", null);
+    _defineProperty(this, "valueFormatterLocale", null);
   }
-  _inherits(CompactHorizontalBarRoot2, _Component);
-  return _createClass(CompactHorizontalBarRoot2, [{
-    key: "getBarProps",
-    value: function getBarProps(_props, index) {
-      return {
-        index
-      };
-    }
-  }, {
-    key: "getBarBackgroundProps",
-    value: function getBarBackgroundProps(_props, index) {
-      var _this$asProps = this.asProps, data = _this$asProps.data, scale = _this$asProps.scale;
-      var bar = this.computeBarData(data[index], index);
-      return {
-        scale,
-        index,
-        x: bar.x,
-        y: bar.y + bar.height - barHeight - hoverOffset,
-        height: barHeight,
-        width: bar.fullWidth
-      };
-    }
-  }, {
-    key: "getBarFillProps",
-    value: function getBarFillProps(_props, index) {
-      var _this$asProps2 = this.asProps, data = _this$asProps2.data, uid = _this$asProps2.uid, patterns = _this$asProps2.patterns, color = _this$asProps2.color, transparent = _this$asProps2.transparent, hide = _this$asProps2.hide, scale = _this$asProps2.scale;
-      var bar = this.computeBarData(data[index], index);
-      return {
-        x: bar.x,
-        y: bar.y + bar.height - barHeight - hoverOffset,
-        height: barHeight,
-        width: bar.width,
-        i: index,
-        uid,
-        resolveColor: this.asProps.resolveColor,
-        patterns,
-        color,
-        transparent,
-        hide,
-        scale,
-        index
-      };
-    }
-  }, {
-    key: "getAnnotationProps",
-    value: function getAnnotationProps(_props, index) {
-      var _this$asProps3 = this.asProps, data = _this$asProps3.data, size = _this$asProps3.size;
-      var bar = this.computeBarData(data[index], index);
-      return {
-        y: bar.y,
-        height: barHeight * 2,
-        width: size[0],
-        index
-      };
-    }
-  }, {
-    key: "getLabelProps",
-    value: function getLabelProps(_props, index) {
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, y = _this$asProps4.y;
-      var label = data[index][y];
-      return {
-        children: label,
-        index
-      };
-    }
-  }, {
-    key: "getPercentFormatter",
-    value: function getPercentFormatter() {
-      if (!this.percentFormatter || this.percentFormatterLocale !== this.asProps.locale) {
-        this.percentFormatter = new Intl.NumberFormat(this.asProps.locale, {
-          style: "percent"
-        });
-        this.percentFormatterLocale = this.asProps.locale;
-      }
-      return this.percentFormatter;
-    }
-  }, {
-    key: "getValueFormatter",
-    value: function getValueFormatter() {
-      if (!this.valueFormatter || this.valueFormatterLocale !== this.asProps.locale) {
-        this.valueFormatter = new Intl.NumberFormat(this.asProps.locale);
-        this.valueFormatterLocale = this.asProps.locale;
-      }
-      return this.valueFormatter;
-    }
-  }, {
-    key: "getPercentProps",
-    value: function getPercentProps(_props, index) {
-      var _this$asProps5 = this.asProps, data = _this$asProps5.data, x = _this$asProps5.x, scale = _this$asProps5.scale;
-      var value = data[index][x];
-      var domain = scale[0].domain();
-      var percent = value / domain[1];
-      var formatter = this.getPercentFormatter();
-      var formatted = formatter.format(percent);
-      return {
-        children: formatted,
-        formatted,
-        percent
-      };
-    }
-  }, {
-    key: "getValueProps",
-    value: function getValueProps(_props, index) {
-      var _this$asProps6 = this.asProps, data = _this$asProps6.data, x = _this$asProps6.x;
-      var value = data[index][x];
-      var formatter = this.getValueFormatter();
-      var formatted = formatter.format(value);
-      return {
-        children: formatted,
-        formatted,
-        value
-      };
-    }
-  }, {
-    key: "getHoverProps",
-    value: function getHoverProps(_props, index) {
-      var _this2 = this;
-      var data = this.asProps.data;
-      return {
-        data,
-        getBarData: function getBarData(index2) {
-          return _this2.computeBarData(data[index2], index2);
-        },
-        render: index === 0,
-        updateIndexToHover: function updateIndexToHover(index2) {
-          return _this2.setState({
-            indexToHover: index2
-          });
-        }
-      };
-    }
-  }, {
-    key: "getTooltipProps",
-    value: function getTooltipProps(_props, index) {
-      return {
-        render: index === 0,
-        index: this.state.indexToHover
-      };
-    }
-  }, {
-    key: "computeBarData",
-    value: function computeBarData(d) {
-      var _this$asProps7 = this.asProps, x = _this$asProps7.x, y = _this$asProps7.y, scale = _this$asProps7.scale, offsetProps = _this$asProps7.offset, wMin = _this$asProps7.wMin, heightProps = _this$asProps7.height, _this$asProps7$maxBar = _this$asProps7.maxBarSize, maxBarSize = _this$asProps7$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps7$maxBar, size = _this$asProps7.size;
-      var offset = typeof offsetProps === "function" ? offsetProps(i) : offsetProps;
-      var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
-      var absWidth = xScale(d[x]);
-      var bandHeight = heightProps || scaleToBand(yScale).bandwidth();
-      var height = Math.min(bandHeight, maxBarSize);
-      var width = absWidth === 0 ? 0 : Math.max(absWidth, wMin);
-      var barY = yScale(d[y]) + bandHeight / 2 - height / 2 + offset[1];
-      return {
-        x: 0,
-        y: barY,
-        width,
-        fullWidth: size[0],
-        height
-      };
-    }
-  }, {
-    key: "renderBar",
-    value: function renderBar(d, i2) {
-      var _ref5;
-      var SCompactHorizontalBarGroup = this.Element;
-      var _this$asProps8 = this.asProps, styles = _this$asProps8.styles, groupKey = _this$asProps8.groupKey;
-      var _this$computeBarData = this.computeBarData(d, i2), x = _this$computeBarData.x, y = _this$computeBarData.y;
-      this.asProps.dataHintsHandler.describeValueEntity("".concat(i2, ".").concat(x), groupKey !== null && groupKey !== void 0 ? groupKey : d[y]);
-      return /* @__PURE__ */ React.createElement(React.Fragment, {
-        key: "horizontal-bar-".concat(i2)
-      }, (_ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarGroup, _ref5.cn("SCompactHorizontalBarGroup", {
-        "render": "g"
-      }))));
-    }
-  }, {
-    key: "renderBars",
-    value: function renderBars() {
-      var data = this.asProps.data;
-      return data.map(this.renderBar.bind(this));
+  getBarProps(_props, index) {
+    return {
+      index
+    };
+  }
+  getBarBackgroundProps(_props, index) {
+    const {
+      data,
+      scale
+    } = this.asProps;
+    const bar = this.computeBarData(data[index], index);
+    return {
+      scale,
+      index,
+      x: bar.x,
+      y: bar.y + bar.height - barHeight - hoverOffset,
+      height: barHeight,
+      width: bar.fullWidth
+    };
+  }
+  getBarFillProps(_props, index) {
+    const {
+      data,
+      uid,
+      patterns,
+      color,
+      transparent,
+      hide,
+      scale
+    } = this.asProps;
+    const bar = this.computeBarData(data[index], index);
+    return {
+      x: bar.x,
+      y: bar.y + bar.height - barHeight - hoverOffset,
+      height: barHeight,
+      width: bar.width,
+      i: index,
+      uid,
+      resolveColor: this.asProps.resolveColor,
+      patterns,
+      color,
+      transparent,
+      hide,
+      scale,
+      index
+    };
+  }
+  getAnnotationProps(_props, index) {
+    const {
+      data,
+      size
+    } = this.asProps;
+    const bar = this.computeBarData(data[index], index);
+    return {
+      y: bar.y,
+      height: barHeight * 2,
+      width: size[0],
+      index
+    };
+  }
+  getLabelProps(_props, index) {
+    const {
+      data,
+      y
+    } = this.asProps;
+    const label = data[index][y];
+    return {
+      children: label,
+      index
+    };
+  }
+  getPercentFormatter() {
+    if (!this.percentFormatter || this.percentFormatterLocale !== this.asProps.locale) {
+      this.percentFormatter = new Intl.NumberFormat(this.asProps.locale, {
+        style: "percent"
+      });
+      this.percentFormatterLocale = this.asProps.locale;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$asProps9 = this.asProps, uid = _this$asProps9.uid, size = _this$asProps9.size, duration = _this$asProps9.duration;
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, this.renderBars(), duration && /* @__PURE__ */ React.createElement(AnimatedClipPath, {
-        "aria-hidden": true,
-        duration,
-        id: uid,
-        x: "0",
-        y: "0",
-        width: 0,
-        height: size[1]
-      }));
+    return this.percentFormatter;
+  }
+  getValueFormatter() {
+    if (!this.valueFormatter || this.valueFormatterLocale !== this.asProps.locale) {
+      this.valueFormatter = new Intl.NumberFormat(this.asProps.locale);
+      this.valueFormatterLocale = this.asProps.locale;
     }
-  }]);
-})(Component);
+    return this.valueFormatter;
+  }
+  getPercentProps(_props, index) {
+    const {
+      data,
+      x,
+      scale
+    } = this.asProps;
+    const value = data[index][x];
+    const domain = scale[0].domain();
+    const percent = value / domain[1];
+    const formatter = this.getPercentFormatter();
+    const formatted = formatter.format(percent);
+    return {
+      children: formatted,
+      formatted,
+      percent
+    };
+  }
+  getValueProps(_props, index) {
+    const {
+      data,
+      x
+    } = this.asProps;
+    const value = data[index][x];
+    const formatter = this.getValueFormatter();
+    const formatted = formatter.format(value);
+    return {
+      children: formatted,
+      formatted,
+      value
+    };
+  }
+  getHoverProps(_props, index) {
+    const {
+      data
+    } = this.asProps;
+    return {
+      data,
+      getBarData: (index2) => this.computeBarData(data[index2], index2),
+      render: index === 0,
+      updateIndexToHover: (index2) => this.setState({
+        indexToHover: index2
+      })
+    };
+  }
+  getTooltipProps(_props, index) {
+    return {
+      render: index === 0,
+      index: this.state.indexToHover
+    };
+  }
+  computeBarData(d) {
+    const {
+      x,
+      y,
+      scale,
+      offset: offsetProps,
+      wMin,
+      height: heightProps,
+      maxBarSize = Number.POSITIVE_INFINITY,
+      size
+    } = this.asProps;
+    const offset = typeof offsetProps === "function" ? offsetProps(i) : offsetProps;
+    const [xScale, yScale] = scale;
+    const absWidth = xScale(d[x]);
+    const bandHeight = heightProps || scaleToBand(yScale).bandwidth();
+    const height = Math.min(bandHeight, maxBarSize);
+    const width = absWidth === 0 ? 0 : Math.max(absWidth, wMin);
+    const barY = yScale(d[y]) + bandHeight / 2 - height / 2 + offset[1];
+    return {
+      x: 0,
+      y: barY,
+      width,
+      fullWidth: size[0],
+      height
+    };
+  }
+  renderBar(d, i2) {
+    var _ref5;
+    const SCompactHorizontalBarGroup = this.Element;
+    const {
+      styles,
+      groupKey
+    } = this.asProps;
+    const {
+      x,
+      y
+    } = this.computeBarData(d, i2);
+    this.asProps.dataHintsHandler.describeValueEntity(`${i2}.${x}`, groupKey ?? d[y]);
+    return /* @__PURE__ */ React.createElement(React.Fragment, {
+      key: `horizontal-bar-${i2}`
+    }, (_ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarGroup, _ref5.cn("SCompactHorizontalBarGroup", {
+      "render": "g"
+    }))));
+  }
+  renderBars() {
+    const {
+      data
+    } = this.asProps;
+    return data.map(this.renderBar.bind(this));
+  }
+  render() {
+    const {
+      uid,
+      size,
+      duration
+    } = this.asProps;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, this.renderBars(), duration && /* @__PURE__ */ React.createElement(AnimatedClipPath, {
+      "aria-hidden": true,
+      duration,
+      id: uid,
+      x: "0",
+      y: "0",
+      width: 0,
+      height: size[1]
+    }));
+  }
+}
 _defineProperty(CompactHorizontalBarRoot, "displayName", "CompactHorizontalBar");
 _defineProperty(CompactHorizontalBarRoot, "enhance", [uniqueIDEnhancement()]);
 _defineProperty(CompactHorizontalBarRoot, "style", style);
@@ -271,8 +268,14 @@ _defineProperty(CompactHorizontalBarRoot, "defaultProps", {
 });
 function Annotation(props) {
   var _ref6;
-  var Children = props.Children, y = props.y, height = props.height, width = props.width, styles = props.styles;
-  var SBarAnnotation = "div";
+  const {
+    Children,
+    y,
+    height,
+    width,
+    styles
+  } = props;
+  const SBarAnnotation = "div";
   return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement("foreignObject", _ref6.cn("foreignObject", {
     "x": "0",
     "y": y - barHeight,
@@ -281,82 +284,115 @@ function Annotation(props) {
     "overflow": "visible"
   }), /* @__PURE__ */ React.createElement(SBarAnnotation, _ref6.cn("SBarAnnotation", {}), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {}))));
 }
-var excludeProps = ["data", "scale", "value", "offset"];
+const excludeProps = ["data", "scale", "value", "offset"];
 function Label(props) {
   var _ref = arguments[0], _ref7;
-  var SBarLabel = Box;
-  var styles = props.styles, Children = props.Children;
-  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SBarLabel, _ref7.cn("SBarLabel", _objectSpread({}, assignProps({
-    "__excludeProps": excludeProps
-  }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})));
+  const SBarLabel = Box;
+  const {
+    styles,
+    Children
+  } = props;
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SBarLabel, _ref7.cn("SBarLabel", {
+    ...assignProps({
+      "__excludeProps": excludeProps
+    }, _ref)
+  }), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})));
 }
 function Percent(props) {
   var _ref2 = arguments[0], _ref8;
-  var SBarPercent = Box;
-  var styles = props.styles, Children = props.Children;
-  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SBarPercent, _ref8.cn("SBarPercent", _objectSpread({}, assignProps({
-    "__excludeProps": excludeProps
-  }, _ref2))), /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {})));
+  const SBarPercent = Box;
+  const {
+    styles,
+    Children
+  } = props;
+  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SBarPercent, _ref8.cn("SBarPercent", {
+    ...assignProps({
+      "__excludeProps": excludeProps
+    }, _ref2)
+  }), /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {})));
 }
 function Value(props) {
   var _ref3 = arguments[0], _ref9;
-  var SBarValue = Box;
-  var styles = props.styles, Children = props.Children;
-  return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SBarValue, _ref9.cn("SBarValue", _objectSpread({}, assignProps({
-    "__excludeProps": excludeProps
-  }, _ref3))), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
+  const SBarValue = Box;
+  const {
+    styles,
+    Children
+  } = props;
+  return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SBarValue, _ref9.cn("SBarValue", {
+    ...assignProps({
+      "__excludeProps": excludeProps
+    }, _ref3)
+  }), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
 }
-var BarContext = /* @__PURE__ */ React.createContext({});
+const BarContext = /* @__PURE__ */ React.createContext({});
 function Bar(props) {
-  var Children = props.Children, index = props.index, onClick = props.onClick, transparent = props.transparent, hide = props.hide;
-  var onClickHandler = React.useCallback(function(event) {
-    onClick === null || onClick === void 0 || onClick(index, event);
+  const {
+    Children,
+    index,
+    onClick,
+    transparent,
+    hide
+  } = props;
+  const onClickHandler = React.useCallback((event) => {
+    onClick == null ? void 0 : onClick(index, event);
   }, [onClick, index]);
-  var contextValue = React.useMemo(function() {
-    return {
-      onClick: onClickHandler,
-      transparent,
-      hide
-    };
-  }, [onClickHandler, transparent, hide]);
+  const contextValue = React.useMemo(() => ({
+    onClick: onClickHandler,
+    transparent,
+    hide
+  }), [onClickHandler, transparent, hide]);
   return /* @__PURE__ */ React.createElement(BarContext.Provider, {
     value: contextValue
   }, /* @__PURE__ */ React.createElement(Children, null));
 }
 function BarFill(props) {
   var _ref0;
-  var SBar = props.Element, styles = props.styles, color = props.color, x = props.x, y = props.y, width = props.width, height = props.height, uid = props.uid, duration = props.duration, resolveColor = props.resolveColor, patterns = props.patterns, i2 = props.i, scale = props.scale;
-  var _scale2 = _slicedToArray(scale, 1), xScale = _scale2[0];
-  var xRange = xScale.range();
-  var backgroundWidth = xRange[1] - xRange[0];
-  var radius = 0;
-  var pathD = React.useMemo(function() {
+  const {
+    Element: SBar,
+    styles,
+    color,
+    x,
+    y,
+    width,
+    height,
+    uid,
+    duration,
+    resolveColor,
+    patterns,
+    i: i2,
+    scale
+  } = props;
+  const [xScale] = scale;
+  const xRange = xScale.range();
+  const backgroundWidth = xRange[1] - xRange[0];
+  const radius = 0;
+  const pathD = React.useMemo(() => {
     if (backgroundWidth - radius > width) {
       return roundedPath(x, y, width, height, radius);
     }
     return roundedPath(x, y, width, height, radius, false, true, false, true);
   }, [x, y, height, width, radius]);
-  var barProps = React.useContext(BarContext);
+  const barProps = React.useContext(BarContext);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(SBar, _ref0.cn("SBar", {
     "aria-hidden": true,
     "render": "path",
     "d": pathD,
-    "clipPath": "url(#".concat(uid, ")"),
+    "clipPath": `url(#${uid})`,
     "__excludeProps": ["data", "scale", "value", "offset"],
     "childrenPosition": "above",
     "index": i2,
     "color": resolveColor(color),
-    "pattern": patterns ? "url(#".concat(uid, "-").concat(i2, "-pattern)") : void 0,
+    "pattern": patterns ? `url(#${uid}-${i2}-pattern)` : void 0,
     "x": x,
     "y": y,
     "width": width,
     "height": height,
-    "use:duration": "".concat(duration, "ms"),
+    "use:duration": `${duration}ms`,
     "onClick": callAllEventHandlers(props.onClick, barProps.onClick),
     "transparent": barProps.transparent || props.transparent,
     "hide": barProps.hide || props.hide
   }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref0.cn("PatternFill", {
-    "id": "".concat(uid, "-").concat(i2, "-pattern"),
+    "id": `${uid}-${i2}-pattern`,
     "patternKey": color,
     "color": resolveColor(color),
     "patterns": patterns
@@ -364,15 +400,22 @@ function BarFill(props) {
 }
 function BarBackground(props) {
   var _ref1;
-  var SBackground = props.Element, styles = props.styles, scale = props.scale, y = props.y, x = props.x, height = props.height;
-  var _scale3 = _slicedToArray(scale, 1), xScale = _scale3[0];
-  var xRange = xScale.range();
-  var width = xRange[1] - xRange[0];
-  var radius = 0;
-  var pathD = React.useMemo(function() {
+  const {
+    Element: SBackground,
+    styles,
+    scale,
+    y,
+    x,
+    height
+  } = props;
+  const [xScale] = scale;
+  const xRange = xScale.range();
+  const width = xRange[1] - xRange[0];
+  const radius = 0;
+  const pathD = React.useMemo(() => {
     return roundedPath(x, y, width, height, radius, false, true, false, true);
   }, [x, y, height, width, radius]);
-  var barProps = React.useContext(BarContext);
+  const barProps = React.useContext(BarContext);
   return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SBackground, _ref1.cn("SBackground", {
     "aria-hidden": true,
     "render": "path",
@@ -386,128 +429,130 @@ function BarBackground(props) {
     "onClick": callAllEventHandlers(props.onClick, barProps.onClick)
   }));
 }
-var Hover = /* @__PURE__ */ (function(_Component2) {
-  function Hover2() {
-    var _this3;
-    _classCallCheck(this, Hover2);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this3 = _callSuper(this, Hover2, [].concat(args));
-    _defineProperty(_this3, "state", {
+class Hover extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
       index: null
     });
-    _defineProperty(_this3, "virtualElement", canUseDOM() ? document.createElement("div") : {});
-    _defineProperty(_this3, "unsubscribeMouseMoveRoot", null);
-    _defineProperty(_this3, "unsubscribeMouseLeaveRoot", null);
-    _defineProperty(_this3, "handlerMouseMoveRoot", trottle(function(e) {
-      var _this3$asProps = _this3.asProps, eventEmitter = _this3$asProps.eventEmitter, rootRef = _this3$asProps.rootRef, patterns = _this3$asProps.patterns, updateIndexToHover = _this3$asProps.updateIndexToHover, plotId = _this3$asProps.plotId;
-      var point = eventToPoint(e, rootRef.current);
-      var clientX = e.clientX, clientY = e.clientY;
-      var index = _this3.getIndex(point);
-      _this3.setState({
+    _defineProperty(this, "virtualElement", canUseDOM() ? document.createElement("div") : {});
+    _defineProperty(this, "unsubscribeMouseMoveRoot", null);
+    _defineProperty(this, "unsubscribeMouseLeaveRoot", null);
+    _defineProperty(this, "handlerMouseMoveRoot", trottle((e) => {
+      const {
+        eventEmitter,
+        rootRef,
+        patterns,
+        updateIndexToHover,
+        plotId
+      } = this.asProps;
+      const point = eventToPoint(e, rootRef.current);
+      const {
+        clientX,
+        clientY
+      } = e;
+      const index = this.getIndex(point);
+      this.setState({
         index
-      }, function() {
-        eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), {}, {
+      }, () => {
+        eventEmitter.emit(`setTooltipPosition_${plotId}`, clientX, clientY);
+        eventEmitter.emit(`setTooltipRenderingProps_${plotId}`, {}, {
           index,
           patterns
         });
-        eventEmitter.emit("setTooltipVisible_".concat(plotId), index !== null);
+        eventEmitter.emit(`setTooltipVisible_${plotId}`, index !== null);
         updateIndexToHover(index);
       });
     }));
-    _defineProperty(_this3, "handlerMouseLeaveRoot", trottle(function() {
-      var _this3$asProps2 = _this3.asProps, updateIndexToHover = _this3$asProps2.updateIndexToHover, plotId = _this3$asProps2.plotId;
-      _this3.setState({
+    _defineProperty(this, "handlerMouseLeaveRoot", trottle(() => {
+      const {
+        updateIndexToHover,
+        plotId
+      } = this.asProps;
+      this.setState({
         index: null
-      }, function() {
-        _this3.asProps.eventEmitter.emit("setTooltipVisible_".concat(plotId), false);
+      }, () => {
+        this.asProps.eventEmitter.emit(`setTooltipVisible_${plotId}`, false);
         updateIndexToHover(null);
       });
     }));
-    return _this3;
   }
-  _inherits(Hover2, _Component2);
-  return _createClass(Hover2, [{
-    key: "generateGetBoundingClientRect",
-    value: function generateGetBoundingClientRect() {
-      var x = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
-      var y = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
-      return function() {
-        return {
-          width: 0,
-          height: 0,
-          top: y,
-          right: x,
-          bottom: y,
-          left: x
-        };
-      };
-    }
-  }, {
-    key: "getIndex",
-    value: function getIndex(point) {
-      var _this$asProps0 = this.asProps, data = _this$asProps0.data, getBarData = _this$asProps0.getBarData;
-      for (var _i = 0; _i < data.length; _i++) {
-        var bar = getBarData(_i);
-        if (point[0] >= bar.x && point[0] <= bar.x + bar.fullWidth && point[1] >= bar.y && point[1] <= bar.y + bar.height) {
-          return _i;
-        }
+  generateGetBoundingClientRect(x = 0, y = 0) {
+    return () => ({
+      width: 0,
+      height: 0,
+      top: y,
+      right: x,
+      bottom: y,
+      left: x
+    });
+  }
+  getIndex(point) {
+    const {
+      data,
+      getBarData
+    } = this.asProps;
+    for (let i2 = 0; i2 < data.length; i2++) {
+      const bar = getBarData(i2);
+      if (point[0] >= bar.x && point[0] <= bar.x + bar.fullWidth && point[1] >= bar.y && point[1] <= bar.y + bar.height) {
+        return i2;
       }
-      return null;
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this4 = this;
-      var eventEmitter = this.asProps.eventEmitter;
-      this.unsubscribeMouseMoveRoot = eventEmitter.subscribe("onMouseMoveRoot", function(e) {
-        e.persist();
-        _this4.handlerMouseMoveRoot(e);
-      });
-      this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe("onMouseLeaveRoot", this.handlerMouseLeaveRoot);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.unsubscribeMouseMoveRoot) {
-        this.unsubscribeMouseMoveRoot();
-      }
-      if (this.unsubscribeMouseLeaveRoot) {
-        this.unsubscribeMouseLeaveRoot();
-      }
+    return null;
+  }
+  componentDidMount() {
+    const {
+      eventEmitter
+    } = this.asProps;
+    this.unsubscribeMouseMoveRoot = eventEmitter.subscribe("onMouseMoveRoot", (e) => {
+      e.persist();
+      this.handlerMouseMoveRoot(e);
+    });
+    this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe("onMouseLeaveRoot", this.handlerMouseLeaveRoot);
+  }
+  componentWillUnmount() {
+    if (this.unsubscribeMouseMoveRoot) {
+      this.unsubscribeMouseMoveRoot();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref10;
-      var _this$asProps1 = this.asProps, styles = _this$asProps1.styles, getBarData = _this$asProps1.getBarData, render2 = _this$asProps1.render;
-      if (!render2) return null;
-      var index = this.state.index;
-      var SCompactHorizontalBarHoverRect = this.Element;
-      if (index === null) return null;
-      var bar = getBarData(index);
-      return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarHoverRect, _ref10.cn("SCompactHorizontalBarHoverRect", {
-        "render": "rect",
-        "x": bar.x,
-        "y": bar.y + bar.height - barHeight - hoverOffset * 2,
-        "width": bar.fullWidth,
-        "height": barHeight + hoverOffset * 2
-      }));
+    if (this.unsubscribeMouseLeaveRoot) {
+      this.unsubscribeMouseLeaveRoot();
     }
-  }]);
-})(Component);
+  }
+  render() {
+    var _ref10;
+    const {
+      styles,
+      getBarData,
+      render
+    } = this.asProps;
+    if (!render) return null;
+    const {
+      index
+    } = this.state;
+    const SCompactHorizontalBarHoverRect = this.Element;
+    if (index === null) return null;
+    const bar = getBarData(index);
+    return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarHoverRect, _ref10.cn("SCompactHorizontalBarHoverRect", {
+      "render": "rect",
+      "x": bar.x,
+      "y": bar.y + bar.height - barHeight - hoverOffset * 2,
+      "width": bar.fullWidth,
+      "height": barHeight + hoverOffset * 2
+    }));
+  }
+}
 function CompactHorizontalBarTooltip(props) {
   var _ref4 = arguments[0], _ref11;
   if (!props.render) return null;
-  var SCompactHorizontalBarRadarTooltip = Tooltip;
-  return _ref11 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarRadarTooltip, _ref11.cn("SCompactHorizontalBarRadarTooltip", _objectSpread({}, assignProps({
-    "tag": CompactHorizontalBar.Hover,
-    "excludeAnchorProps": true
-  }, _ref4))));
+  const SCompactHorizontalBarRadarTooltip = Tooltip;
+  return _ref11 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SCompactHorizontalBarRadarTooltip, _ref11.cn("SCompactHorizontalBarRadarTooltip", {
+    ...assignProps({
+      "tag": CompactHorizontalBar.Hover,
+      "excludeAnchorProps": true
+    }, _ref4)
+  }));
 }
-var CompactHorizontalBar = createElement(CompactHorizontalBarRoot, {
+const CompactHorizontalBar = createElement(CompactHorizontalBarRoot, {
   Annotation,
   Label,
   Percent,