@semcore/d3-chart 3.49.0 → 3.50.0

package/lib/cjs/CompactHorizontalBar.js

@@ -0,0 +1,591 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MIN_WIDTH = void 0;
+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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _index = require("@semcore/utils/lib/core/index");
+var _core = require("@semcore/core");
+var _react = _interopRequireDefault(require("react"));
+var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
+var _createElement = _interopRequireDefault(require("./createElement"));
+var _AnimatedClipPath = _interopRequireDefault(require("./AnimatedClipPath"));
+var _utils = require("./utils");
+var _Pattern = require("./Pattern");
+var _rafTrottle = _interopRequireDefault(require("@semcore/utils/lib/rafTrottle"));
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _assignProps5 = require("@semcore/utils/lib/assignProps");
+var _canUseDOM = _interopRequireDefault(require("@semcore/utils/lib/canUseDOM"));
+var _flexBox = require("@semcore/flex-box");
+/*__reshadow-styles__:"./style/bar.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SBar_1g3k3_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1g3k3);transition-timing-function:ease-in-out}.___SBar_1g3k3_gg_.__color_1g3k3_gg_{fill:var(--color_1g3k3)}.___SBar_1g3k3_gg_.__pattern_1g3k3_gg_.__color_1g3k3_gg_{fill:var(--pattern_1g3k3);stroke:var(--color_1g3k3);stroke-width:1px}.___SBar_1g3k3_gg_.__hide_1g3k3_gg_{display:none}.___SBar_1g3k3_gg_.__transparent_1g3k3_gg_{opacity:.3}.___SBackground_1g3k3_gg_.__onClick_1g3k3_gg_,.___SBar_1g3k3_gg_.__onClick_1g3k3_gg_{cursor:pointer}.___SBackground_1g3k3_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1g3k3_gg_{display:flex;justify-content:space-between}.___SBarLabel_1g3k3_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1g3k3_gg_,.___SBarPercent_1g3k3_gg_,.___SBarValue_1g3k3_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1g3k3_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1g3k3_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1g3k3_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}" /*__inner_css_end__*/, "1g3k3_gg_") /*__reshadow_css_end__*/, {
+  "__SBar": "___SBar_1g3k3_gg_",
+  "--duration": "--duration_1g3k3",
+  "_color": "__color_1g3k3_gg_",
+  "--color": "--color_1g3k3",
+  "_pattern": "__pattern_1g3k3_gg_",
+  "--pattern": "--pattern_1g3k3",
+  "_hide": "__hide_1g3k3_gg_",
+  "_transparent": "__transparent_1g3k3_gg_",
+  "_onClick": "__onClick_1g3k3_gg_",
+  "__SBackground": "___SBackground_1g3k3_gg_",
+  "__SBarAnnotation": "___SBarAnnotation_1g3k3_gg_",
+  "__SBarLabel": "___SBarLabel_1g3k3_gg_",
+  "__SBarPercent": "___SBarPercent_1g3k3_gg_",
+  "__SBarValue": "___SBarValue_1g3k3_gg_",
+  "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1g3k3_gg_"
+});
+var MIN_WIDTH = 4;
+exports.MIN_WIDTH = MIN_WIDTH;
+var barHeight = 20;
+var hoverOffset = 6;
+var CompactHorizontalBarRoot = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(CompactHorizontalBarRoot, _Component);
+  var _super = (0, _createSuper2["default"])(CompactHorizontalBarRoot);
+  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 = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "percentFormatter", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "percentFormatterLocale", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "valueFormatter", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "valueFormatterLocale", null);
+    return _this;
+  }
+  (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
+      };
+    }
+  }, {
+    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]
+      };
+    }
+  }, {
+    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
+      };
+    }
+  }, {
+    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
+      };
+    }
+  }, {
+    key: "getTooltipProps",
+    value: function getTooltipProps(_props, index) {
+      return {
+        render: index === 0
+      };
+    }
+  }, {
+    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 ? 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));
+    }
+  }, {
+    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 CompactHorizontalBarRoot;
+}(_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", {
+  offset: [0, 0],
+  duration: 500,
+  wMin: MIN_WIDTH,
+  locale: 'en',
+  color: 'chart-palette-order-1'
+});
+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", {
+    "x": '0',
+    "y": y - barHeight,
+    "height": height,
+    "width": width
+  }), /*#__PURE__*/_react["default"].createElement(SBarAnnotation, _ref6.cn("SBarAnnotation", {}), /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {}))));
+}
+var 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", {})));
+}
+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", {})));
+}
+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", {})));
+}
+var 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 ? void 0 : 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, {
+    value: contextValue
+  }, /*#__PURE__*/_react["default"].createElement(Children, null));
+}
+function BarFill(props) {
+  var _ref10;
+  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 () {
+    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, (_ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBar, _ref10.cn("SBar", {
+    "aria-hidden": true,
+    "render": 'path',
+    "d": pathD,
+    "clipPath": "url(#".concat(uid, ")"),
+    "__excludeProps": ['data', 'scale', 'value', 'offset'],
+    "childrenPosition": 'above',
+    "index": i,
+    "color": resolveColor(color),
+    "pattern": patterns ? "url(#".concat(uid, "-").concat(i, "-pattern)") : undefined,
+    "x": x,
+    "y": y,
+    "width": width,
+    "height": height,
+    "use:duration": "".concat(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, _ref10.cn("PatternFill", {
+    "id": "".concat(uid, "-").concat(i, "-pattern"),
+    "patternKey": color,
+    "color": resolveColor(color),
+    "patterns": patterns
+  })));
+}
+function BarBackground(props) {
+  var _ref11;
+  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 () {
+    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 _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBackground, _ref11.cn("SBackground", {
+    "aria-hidden": true,
+    "render": 'path',
+    "d": pathD,
+    "childrenPosition": 'above',
+    "width": xRange[1] - xRange[0],
+    "height": height,
+    "x": x,
+    "y": y,
+    "transparent": barProps.transparent,
+    "onClick": (0, _assignProps5.callAllEventHandlers)(props.onClick, barProps.onClick)
+  }));
+}
+var Hover = /*#__PURE__*/function (_Component2) {
+  (0, _inherits2["default"])(Hover, _Component2);
+  var _super2 = (0, _createSuper2["default"])(Hover);
+  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 = _super2.call.apply(_super2, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "state", {
+      index: null
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "virtualElement", (0, _canUseDOM["default"])() ? document.createElement('div') : {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "unsubscribeMouseMoveRoot", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "unsubscribeMouseLeaveRoot", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["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;
+      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', clientX, clientY);
+        eventEmitter.emit('setTooltipRenderingProps', {}, {
+          index: index,
+          patterns: patterns
+        });
+        eventEmitter.emit('setTooltipVisible', index !== null);
+      });
+    }));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "handlerMouseLeaveRoot", (0, _rafTrottle["default"])(function () {
+      _this3.setState({
+        index: null
+      }, function () {
+        _this3.asProps.eventEmitter.emit('setTooltipVisible', false);
+      });
+    }));
+    return _this3;
+  }
+  (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$asProps10 = this.asProps,
+        data = _this$asProps10.data,
+        getBarData = _this$asProps10.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;
+        }
+      }
+      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();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref12;
+      var _this$asProps11 = this.asProps,
+        styles = _this$asProps11.styles,
+        getBarData = _this$asProps11.getBarData,
+        render = _this$asProps11.render;
+      if (!render) return null;
+      var index = this.state.index;
+      var SCompactHorizontalBarHoverRect = this.Element;
+      if (index === null) return null;
+      var bar = getBarData(index);
+      return _ref12 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCompactHorizontalBarHoverRect, _ref12.cn("SCompactHorizontalBarHoverRect", {
+        "render": 'rect',
+        "x": bar.x,
+        "y": bar.y + bar.height - barHeight - hoverOffset * 2,
+        "width": bar.fullWidth,
+        "height": barHeight + hoverOffset * 2
+      }));
+    }
+  }]);
+  return Hover;
+}(_core.Component);
+var CompactHorizontalBarTooltip = function CompactHorizontalBarTooltip(props) {
+  var _ref4 = arguments[0],
+    _ref13;
+  if (!props.render) return null;
+  var SCompactHorizontalBarRadarTooltip = _Tooltip["default"];
+  return _ref13 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SCompactHorizontalBarRadarTooltip, _ref13.cn("SCompactHorizontalBarRadarTooltip", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "tag": CompactHorizontalBar.Hover,
+    "excludeAnchorProps": true
+  }, _ref4))));
+};
+var CompactHorizontalBar = (0, _createElement["default"])(CompactHorizontalBarRoot, {
+  Annotation: Annotation,
+  Label: Label,
+  Percent: Percent,
+  Value: Value,
+  Bar: [Bar, {
+    Fill: BarFill,
+    Background: BarBackground
+  }],
+  Hover: Hover,
+  Tooltip: [CompactHorizontalBarTooltip, _Tooltip["default"]._______childrenComponents]
+});
+var _default = CompactHorizontalBar;
+exports["default"] = _default;
+//# sourceMappingURL=CompactHorizontalBar.js.map