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

package/lib/cjs/CompactHorizontalBar.js

@@ -1,24 +1,17 @@
 "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"] = exports.MIN_WIDTH = void 0;
-var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-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 = exports.MIN_WIDTH = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 var _assignProps5 = require("@semcore/core/lib/utils/assignProps");
 var _canUseDOM = _interopRequireDefault(require("@semcore/core/lib/utils/canUseDOM"));
 var _rafTrottle = _interopRequireDefault(require("@semcore/core/lib/utils/rafTrottle"));
 var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
-var _flexBox = require("@semcore/flex-box");
 var _react = _interopRequireDefault(require("react"));
 var _AnimatedClipPath = _interopRequireDefault(require("./AnimatedClipPath"));
 var _createElement = _interopRequireDefault(require("./createElement"));
@@ -26,279 +19,247 @@ var _Pattern = require("./Pattern");
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _utils = require("./utils");
 /*!__reshadow-styles__:"./style/bar.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.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))}", /*__inner_css_end__*/"194w8_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___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__*/"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 = exports.MIN_WIDTH = 4;
-var barHeight = 20;
-var hoverOffset = 6;
-var CompactHorizontalBarRoot = /*#__PURE__*/function (_Component) {
-  function CompactHorizontalBarRoot() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, CompactHorizontalBarRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, CompactHorizontalBarRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "state", {
+const MIN_WIDTH = exports.MIN_WIDTH = 4;
+const barHeight = 20;
+const hoverOffset = 6;
+class CompactHorizontalBarRoot extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
       indexToHover: null
     });
-    (0, _defineProperty2["default"])(_this, "percentFormatter", null);
-    (0, _defineProperty2["default"])(_this, "percentFormatterLocale", null);
-    (0, _defineProperty2["default"])(_this, "valueFormatter", null);
-    (0, _defineProperty2["default"])(_this, "valueFormatterLocale", null);
-    return _this;
+    (0, _defineProperty2.default)(this, "percentFormatter", null);
+    (0, _defineProperty2.default)(this, "percentFormatterLocale", null);
+    (0, _defineProperty2.default)(this, "valueFormatter", null);
+    (0, _defineProperty2.default)(this, "valueFormatterLocale", null);
   }
-  (0, _inherits2["default"])(CompactHorizontalBarRoot, _Component);
-  return (0, _createClass2["default"])(CompactHorizontalBarRoot, [{
-    key: "getBarProps",
-    value: function getBarProps(_props, index) {
-      return {
-        index: 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: scale,
-        index: 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: uid,
-        resolveColor: this.asProps.resolveColor,
-        patterns: patterns,
-        color: color,
-        transparent: transparent,
-        hide: hide,
-        scale: scale,
-        index: 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: 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: 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: formatted,
-        percent: 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: formatted,
-        value: value
-      };
-    }
-  }, {
-    key: "getHoverProps",
-    value: function getHoverProps(_props, index) {
-      var _this2 = this;
-      var data = this.asProps.data;
-      return {
-        data: data,
-        getBarData: function getBarData(index) {
-          return _this2.computeBarData(data[index], index);
-        },
-        render: index === 0,
-        updateIndexToHover: function updateIndexToHover(index) {
-          return _this2.setState({
-            indexToHover: index
-          });
-        }
-      };
-    }
-  }, {
-    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 = (0, _slicedToArray2["default"])(scale, 2),
-        xScale = _scale[0],
-        yScale = _scale[1];
-      var absWidth = xScale(d[x]);
-      var bandHeight = heightProps || (0, _utils.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: width,
-        fullWidth: size[0],
-        height: height
-      };
-    }
-  }, {
-    key: "renderBar",
-    value: function renderBar(d, i) {
-      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, i),
-        x = _this$computeBarData.x,
-        y = _this$computeBarData.y;
-      this.asProps.dataHintsHandler.describeValueEntity("".concat(i, ".").concat(x), groupKey !== null && groupKey !== void 0 ? groupKey : d[y]);
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-        key: "horizontal-bar-".concat(i)
-      }, (_ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].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["default"].createElement(_react["default"].Fragment, null, this.renderBars(), duration && /*#__PURE__*/_react["default"].createElement(_AnimatedClipPath["default"], {
-        "aria-hidden": true,
-        duration: 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;
     }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(CompactHorizontalBarRoot, "displayName", 'CompactHorizontalBar');
-(0, _defineProperty2["default"])(CompactHorizontalBarRoot, "enhance", [(0, _uniqueID["default"])()]);
-(0, _defineProperty2["default"])(CompactHorizontalBarRoot, "style", style);
-(0, _defineProperty2["default"])(CompactHorizontalBarRoot, "defaultProps", {
+    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: index => this.computeBarData(data[index], index),
+      render: index === 0,
+      updateIndexToHover: index => this.setState({
+        indexToHover: index
+      })
+    };
+  }
+  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 || (0, _utils.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, i) {
+    var _ref5;
+    const SCompactHorizontalBarGroup = this.Element;
+    const {
+      styles,
+      groupKey
+    } = this.asProps;
+    const {
+      x,
+      y
+    } = this.computeBarData(d, i);
+    this.asProps.dataHintsHandler.describeValueEntity(`${i}.${x}`, groupKey ?? d[y]);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: `horizontal-bar-${i}`
+    }, (_ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.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.default.createElement(_react.default.Fragment, null, this.renderBars(), duration && /*#__PURE__*/_react.default.createElement(_AnimatedClipPath.default, {
+      "aria-hidden": true,
+      duration: duration,
+      id: uid,
+      x: "0",
+      y: "0",
+      width: 0,
+      height: size[1]
+    }));
+  }
+}
+(0, _defineProperty2.default)(CompactHorizontalBarRoot, "displayName", 'CompactHorizontalBar');
+(0, _defineProperty2.default)(CompactHorizontalBarRoot, "enhance", [(0, _uniqueID.default)()]);
+(0, _defineProperty2.default)(CompactHorizontalBarRoot, "style", style);
+(0, _defineProperty2.default)(CompactHorizontalBarRoot, "defaultProps", {
   offset: [0, 0],
   duration: 500,
   wMin: MIN_WIDTH,
@@ -307,119 +268,134 @@ var CompactHorizontalBarRoot = /*#__PURE__*/function (_Component) {
 });
 function Annotation(props) {
   var _ref6;
-  var Children = props.Children,
-    y = props.y,
-    height = props.height,
-    width = props.width,
-    styles = props.styles;
-  var SBarAnnotation = 'div';
-  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement("foreignObject", _ref6.cn("foreignObject", {
+  const {
+    Children,
+    y,
+    height,
+    width,
+    styles
+  } = props;
+  const SBarAnnotation = 'div';
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement("foreignObject", _ref6.cn("foreignObject", {
     "x": '0',
     "y": y - barHeight,
     "height": height,
     "width": width,
     "overflow": 'visible'
-  }), /*#__PURE__*/_react["default"].createElement(SBarAnnotation, _ref6.cn("SBarAnnotation", {}), /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {}))));
+  }), /*#__PURE__*/_react.default.createElement(SBarAnnotation, _ref6.cn("SBarAnnotation", {}), /*#__PURE__*/_react.default.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 = _flexBox.Box;
-  var styles = props.styles,
-    Children = props.Children;
-  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBarLabel, _ref7.cn("SBarLabel", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "__excludeProps": excludeProps
-  }, _ref))), /*#__PURE__*/_react["default"].createElement(Children, _ref7.cn("Children", {})));
+  const SBarLabel = _baseComponents.Box;
+  const {
+    styles,
+    Children
+  } = props;
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SBarLabel, _ref7.cn("SBarLabel", {
+    ...(0, _core.assignProps)({
+      "__excludeProps": excludeProps
+    }, _ref)
+  }), /*#__PURE__*/_react.default.createElement(Children, _ref7.cn("Children", {})));
 }
 function Percent(props) {
   var _ref2 = arguments[0],
     _ref8;
-  var SBarPercent = _flexBox.Box;
-  var styles = props.styles,
-    Children = props.Children;
-  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBarPercent, _ref8.cn("SBarPercent", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "__excludeProps": excludeProps
-  }, _ref2))), /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {})));
+  const SBarPercent = _baseComponents.Box;
+  const {
+    styles,
+    Children
+  } = props;
+  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SBarPercent, _ref8.cn("SBarPercent", {
+    ...(0, _core.assignProps)({
+      "__excludeProps": excludeProps
+    }, _ref2)
+  }), /*#__PURE__*/_react.default.createElement(Children, _ref8.cn("Children", {})));
 }
 function Value(props) {
   var _ref3 = arguments[0],
     _ref9;
-  var SBarValue = _flexBox.Box;
-  var styles = props.styles,
-    Children = props.Children;
-  return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBarValue, _ref9.cn("SBarValue", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "__excludeProps": excludeProps
-  }, _ref3))), /*#__PURE__*/_react["default"].createElement(Children, _ref9.cn("Children", {})));
+  const SBarValue = _baseComponents.Box;
+  const {
+    styles,
+    Children
+  } = props;
+  return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SBarValue, _ref9.cn("SBarValue", {
+    ...(0, _core.assignProps)({
+      "__excludeProps": excludeProps
+    }, _ref3)
+  }), /*#__PURE__*/_react.default.createElement(Children, _ref9.cn("Children", {})));
 }
-var BarContext = /*#__PURE__*/_react["default"].createContext({});
+const BarContext = /*#__PURE__*/_react.default.createContext({});
 function Bar(props) {
-  var Children = props.Children,
-    index = props.index,
-    onClick = props.onClick,
-    transparent = props.transparent,
-    hide = props.hide;
-  var onClickHandler = _react["default"].useCallback(function (event) {
-    onClick === null || onClick === void 0 || onClick(index, event);
+  const {
+    Children,
+    index,
+    onClick,
+    transparent,
+    hide
+  } = props;
+  const onClickHandler = _react.default.useCallback(event => {
+    onClick?.(index, event);
   }, [onClick, index]);
-  var contextValue = _react["default"].useMemo(function () {
-    return {
-      onClick: onClickHandler,
-      transparent: transparent,
-      hide: hide
-    };
-  }, [onClickHandler, transparent, hide]);
-  return /*#__PURE__*/_react["default"].createElement(BarContext.Provider, {
+  const contextValue = _react.default.useMemo(() => ({
+    onClick: onClickHandler,
+    transparent,
+    hide
+  }), [onClickHandler, transparent, hide]);
+  return /*#__PURE__*/_react.default.createElement(BarContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react["default"].createElement(Children, null));
+  }, /*#__PURE__*/_react.default.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,
-    i = props.i,
-    scale = props.scale;
-  var _scale2 = (0, _slicedToArray2["default"])(scale, 1),
-    xScale = _scale2[0];
-  var xRange = xScale.range();
-  var backgroundWidth = xRange[1] - xRange[0];
-  var radius = 0; // left it here in case we will change our mind and return to rounded bars
-  var pathD = _react["default"].useMemo(function () {
+  const {
+    Element: SBar,
+    styles,
+    color,
+    x,
+    y,
+    width,
+    height,
+    uid,
+    duration,
+    resolveColor,
+    patterns,
+    i,
+    scale
+  } = props;
+  const [xScale] = scale;
+  const xRange = xScale.range();
+  const backgroundWidth = xRange[1] - xRange[0];
+  const radius = 0; // left it here in case we will change our mind and return to rounded bars
+  const pathD = _react.default.useMemo(() => {
     if (backgroundWidth - radius > width) {
       return (0, _utils.roundedPath)(x, y, width, height, radius);
     }
     return (0, _utils.roundedPath)(x, y, width, height, radius, false, true, false, true);
   }, [x, y, height, width, radius]);
-  var barProps = _react["default"].useContext(BarContext);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (_ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBar, _ref0.cn("SBar", {
+  const barProps = _react.default.useContext(BarContext);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.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": i,
     "color": resolveColor(color),
-    "pattern": patterns ? "url(#".concat(uid, "-").concat(i, "-pattern)") : undefined,
+    "pattern": patterns ? `url(#${uid}-${i}-pattern)` : undefined,
     "x": x,
     "y": y,
     "width": width,
     "height": height,
-    "use:duration": "".concat(duration, "ms"),
+    "use:duration": `${duration}ms`,
     "onClick": (0, _assignProps5.callAllEventHandlers)(props.onClick, barProps.onClick),
     "transparent": barProps.transparent || props.transparent,
     "hide": barProps.hide || props.hide
-  }))), patterns && /*#__PURE__*/_react["default"].createElement(_Pattern.PatternFill, _ref0.cn("PatternFill", {
-    "id": "".concat(uid, "-").concat(i, "-pattern"),
+  }))), patterns && /*#__PURE__*/_react.default.createElement(_Pattern.PatternFill, _ref0.cn("PatternFill", {
+    "id": `${uid}-${i}-pattern`,
     "patternKey": color,
     "color": resolveColor(color),
     "patterns": patterns
@@ -427,22 +403,23 @@ 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 = (0, _slicedToArray2["default"])(scale, 1),
-    xScale = _scale3[0];
-  var xRange = xScale.range();
-  var width = xRange[1] - xRange[0];
-  var radius = 0; // left it here in case we will change our mind and return to rounded bars
-  var pathD = _react["default"].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; // left it here in case we will change our mind and return to rounded bars
+  const pathD = _react.default.useMemo(() => {
     return (0, _utils.roundedPath)(x, y, width, height, radius, false, true, false, true);
   }, [x, y, height, width, radius]);
-  var barProps = _react["default"].useContext(BarContext);
-  return _ref1 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBackground, _ref1.cn("SBackground", {
+  const barProps = _react.default.useContext(BarContext);
+  return _ref1 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SBackground, _ref1.cn("SBackground", {
     "aria-hidden": true,
     "render": 'path',
     "d": pathD,
@@ -455,153 +432,142 @@ function BarBackground(props) {
     "onClick": (0, _assignProps5.callAllEventHandlers)(props.onClick, barProps.onClick)
   }));
 }
-var Hover = /*#__PURE__*/function (_Component2) {
-  function Hover() {
-    var _this3;
-    (0, _classCallCheck2["default"])(this, Hover);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this3 = (0, _callSuper2["default"])(this, Hover, [].concat(args));
-    (0, _defineProperty2["default"])(_this3, "state", {
+class Hover extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
       index: null
     });
-    (0, _defineProperty2["default"])(_this3, "virtualElement", (0, _canUseDOM["default"])() ? document.createElement('div') : {});
-    (0, _defineProperty2["default"])(_this3, "unsubscribeMouseMoveRoot", null);
-    (0, _defineProperty2["default"])(_this3, "unsubscribeMouseLeaveRoot", null);
-    (0, _defineProperty2["default"])(_this3, "handlerMouseMoveRoot", (0, _rafTrottle["default"])(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 = (0, _utils.eventToPoint)(e, rootRef.current);
-      var clientX = e.clientX,
-        clientY = e.clientY;
-      var index = _this3.getIndex(point);
-      _this3.setState({
-        index: index
-      }, function () {
-        eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), {}, {
-          index: index,
-          patterns: patterns
+    (0, _defineProperty2.default)(this, "virtualElement", (0, _canUseDOM.default)() ? document.createElement('div') : {});
+    (0, _defineProperty2.default)(this, "unsubscribeMouseMoveRoot", null);
+    (0, _defineProperty2.default)(this, "unsubscribeMouseLeaveRoot", null);
+    (0, _defineProperty2.default)(this, "handlerMouseMoveRoot", (0, _rafTrottle.default)(e => {
+      const {
+        eventEmitter,
+        rootRef,
+        patterns,
+        updateIndexToHover,
+        plotId
+      } = this.asProps;
+      const point = (0, _utils.eventToPoint)(e, rootRef.current);
+      const {
+        clientX,
+        clientY
+      } = e;
+      const index = this.getIndex(point);
+      this.setState({
+        index
+      }, () => {
+        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);
       });
     }));
-    (0, _defineProperty2["default"])(_this3, "handlerMouseLeaveRoot", (0, _rafTrottle["default"])(function () {
-      var _this3$asProps2 = _this3.asProps,
-        updateIndexToHover = _this3$asProps2.updateIndexToHover,
-        plotId = _this3$asProps2.plotId;
-      _this3.setState({
+    (0, _defineProperty2.default)(this, "handlerMouseLeaveRoot", (0, _rafTrottle.default)(() => {
+      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;
   }
-  (0, _inherits2["default"])(Hover, _Component2);
-  return (0, _createClass2["default"])(Hover, [{
-    key: "generateGetBoundingClientRect",
-    value: function generateGetBoundingClientRect() {
-      var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      var y = arguments.length > 1 && arguments[1] !== undefined ? 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 i = 0; i < data.length; i++) {
+      const 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;
       }
-      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,
-        render = _this$asProps1.render;
-      if (!render) return null;
-      var index = this.state.index;
-      var SCompactHorizontalBarHoverRect = this.Element;
-      if (index === null) return null;
-      var bar = getBarData(index);
-      return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].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();
     }
-  }]);
-}(_core.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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.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["default"];
-  return _ref11 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SCompactHorizontalBarRadarTooltip, _ref11.cn("SCompactHorizontalBarRadarTooltip", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "tag": CompactHorizontalBar.Hover,
-    "excludeAnchorProps": true
-  }, _ref4))));
+  const SCompactHorizontalBarRadarTooltip = _Tooltip.default;
+  return _ref11 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react.default.createElement(SCompactHorizontalBarRadarTooltip, _ref11.cn("SCompactHorizontalBarRadarTooltip", {
+    ...(0, _core.assignProps)({
+      "tag": CompactHorizontalBar.Hover,
+      "excludeAnchorProps": true
+    }, _ref4)
+  }));
 }
 ;
-var CompactHorizontalBar = (0, _createElement["default"])(CompactHorizontalBarRoot, {
-  Annotation: Annotation,
-  Label: Label,
-  Percent: Percent,
-  Value: Value,
+const CompactHorizontalBar = (0, _createElement.default)(CompactHorizontalBarRoot, {
+  Annotation,
+  Label,
+  Percent,
+  Value,
   Bar: [Bar, {
     Fill: BarFill,
     Background: BarBackground
   }],
-  Hover: Hover,
-  Tooltip: [CompactHorizontalBarTooltip, _Tooltip["default"]._______childrenComponents]
+  Hover,
+  Tooltip: [CompactHorizontalBarTooltip, _Tooltip.default._______childrenComponents]
 });
-var _default = exports["default"] = CompactHorizontalBar;
+var _default = exports.default = CompactHorizontalBar;
 //# sourceMappingURL=CompactHorizontalBar.js.map