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

package/lib/esm/Dots.mjs

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { sstyled } from "@semcore/core";
 import trottle from "@semcore/core/lib/utils/rafTrottle";
 import { bisector } from "d3-array";
@@ -7,77 +6,89 @@ import createElement from "./createElement.mjs";
 import { getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
 import { interpolateValue, eventToPoint, invert, getChartDefaultColorName } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/dot.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SDots_wid14_gg_ .___SDot_wid14_gg_{transition-duration:var(--duration_wid14)}.___SDot_wid14_gg_{stroke-width:1px;stroke:var(--intergalactic-chart-grid-border, #ffffff);fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:cx,cy,x,y;transition-timing-function:ease-in-out}.___SDot_wid14_gg_.__hide_wid14_gg_{display:none}.___SDot_wid14_gg_.__color_wid14_gg_{fill:var(--color_wid14)}.___SDot_wid14_gg_.__transparent_wid14_gg_{opacity:.3}",
+    ".___SDots_kz49v_gg_ .___SDot_kz49v_gg_{transition-duration:var(--duration_kz49v)}.___SDot_kz49v_gg_{stroke-width:1px;stroke:var(--intergalactic-chart-grid-border, #ffffff);fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:cx,cy,x,y;transition-timing-function:ease-in-out}.___SDot_kz49v_gg_.__hide_kz49v_gg_{display:none}.___SDot_kz49v_gg_.__color_kz49v_gg_{fill:var(--color_kz49v)}.___SDot_kz49v_gg_.__transparent_kz49v_gg_{opacity:.3}",
     /*__inner_css_end__*/
-    "wid14_gg_"
+    "kz49v_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SDot": "___SDot_wid14_gg_",
-    "_hide": "__hide_wid14_gg_",
-    "_color": "__color_wid14_gg_",
-    "--color": "--color_wid14",
-    "_transparent": "__transparent_wid14_gg_",
-    "__SDots": "___SDots_wid14_gg_",
-    "--duration": "--duration_wid14"
+    "__SDot": "___SDot_kz49v_gg_",
+    "_hide": "__hide_kz49v_gg_",
+    "_color": "__color_kz49v_gg_",
+    "--color": "--color_kz49v",
+    "_transparent": "__transparent_kz49v_gg_",
+    "__SDots": "___SDots_kz49v_gg_",
+    "--duration": "--duration_kz49v"
   })
 );
 function Dots(props) {
   var _ref3;
-  var SDot = props.Element, styles = props.styles, color = props.color, d3 = props.d3, x = props.x, y = props.y, eventEmitter = props.eventEmitter, display = props.display, hide = props.hide, rootRef = props.rootRef, scale = props.scale, _props$duration = props.duration, duration = _props$duration === void 0 ? 500 : _props$duration, transparent = props.transparent, _props$radius = props.radius, radiusBase = _props$radius === void 0 ? 4 : _props$radius, resolveColor = props.resolveColor, patterns = props.patterns, onClick = props.onClick;
-  var bisect = bisector(function(d) {
-    return d[x];
-  }).center;
-  var _React$useState = React.useState(null), _React$useState2 = _slicedToArray(_React$useState, 2), activeIndex = _React$useState2[0], setActiveIndex = _React$useState2[1];
-  var patternKey = color || getChartDefaultColorName(0);
-  var svgPatternId = "template_".concat(patternKey);
-  var data = React.useMemo(function() {
-    return props.data.filter(function(item) {
-      return item[y] !== interpolateValue;
-    });
-  }, [props.data]);
-  var handlerMouseMoveRoot = React.useCallback(trottle(function(e) {
-    var _scale = _slicedToArray(scale, 1), xScale = _scale[0];
-    var _eventToPoint = eventToPoint(e, rootRef.current), _eventToPoint2 = _slicedToArray(_eventToPoint, 1), pX = _eventToPoint2[0];
-    var vX = invert(xScale, pX);
+  const {
+    Element: SDot,
+    styles,
+    color,
+    d3,
+    x,
+    y,
+    eventEmitter,
+    display,
+    hide,
+    rootRef,
+    scale,
+    duration = 500,
+    transparent,
+    radius: radiusBase = 4,
+    resolveColor,
+    patterns,
+    onClick
+  } = props;
+  const bisect = bisector((d) => d[x]).center;
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const patternKey = color || getChartDefaultColorName(0);
+  const svgPatternId = `template_${patternKey}`;
+  const data = React.useMemo(() => props.data.filter((item) => item[y] !== interpolateValue), [props.data]);
+  const handlerMouseMoveRoot = React.useCallback(trottle((e) => {
+    const [xScale] = scale;
+    const [pX] = eventToPoint(e, rootRef.current);
+    const vX = invert(xScale, pX);
     setActiveIndex(bisect(data, vX));
   }), [scale, data]);
-  var handlerMouseLeaveRoot = React.useCallback(trottle(function() {
+  const handlerMouseLeaveRoot = React.useCallback(trottle(() => {
     setActiveIndex(null);
   }), []);
-  var handlerOnClick = React.useCallback(function(e) {
+  const handlerOnClick = React.useCallback((e) => {
     e.stopPropagation();
     if (!onClick) return;
-    var _scale2 = _slicedToArray(scale, 1), xScale = _scale2[0];
-    var _eventToPoint3 = eventToPoint(e, rootRef.current), _eventToPoint4 = _slicedToArray(_eventToPoint3, 1), pX = _eventToPoint4[0];
-    var vX = invert(xScale, pX);
-    var index = bisect(data, vX);
+    const [xScale] = scale;
+    const [pX] = eventToPoint(e, rootRef.current);
+    const vX = invert(xScale, pX);
+    const index = bisect(data, vX);
     onClick(index, e);
   }, [scale, data, onClick]);
-  React.useEffect(function() {
-    var unsubscribeMouseMoveRoot = eventEmitter.subscribe("onMouseMoveChart", function(e) {
+  React.useEffect(() => {
+    const unsubscribeMouseMoveRoot = eventEmitter.subscribe("onMouseMoveChart", (e) => {
       e.persist();
       handlerMouseMoveRoot(e);
     });
-    var unsubscribeMouseLeaveRoot = eventEmitter.subscribe("onMouseLeaveChart", handlerMouseLeaveRoot);
-    return function() {
+    const unsubscribeMouseLeaveRoot = eventEmitter.subscribe("onMouseLeaveChart", handlerMouseLeaveRoot);
+    return () => {
       unsubscribeMouseMoveRoot();
       unsubscribeMouseLeaveRoot();
     };
   }, [eventEmitter, scale, data, x, y]);
-  var _getPatternSymbolSize = getPatternSymbolSize({
+  const [width, height] = getPatternSymbolSize({
     patternKey,
     patterns
-  }), _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2), width = _getPatternSymbolSize2[0], height = _getPatternSymbolSize2[1];
-  var dots = data.reduce(function(acc, d, i) {
-    var isPrev = d3.defined()(data[i - 1] || {});
-    var isNext = d3.defined()(data[i + 1] || {});
-    var active = i === activeIndex;
-    var visible = typeof display === "function" ? display(i, i === activeIndex, !isPrev && !isNext) : display || i === activeIndex || !isPrev && !isNext;
-    var radius = radiusBase * (active ? 5 / 4 : 1);
+  });
+  const dots = data.reduce((acc, d, i) => {
+    const isPrev = d3.defined()(data[i - 1] || {});
+    const isNext = d3.defined()(data[i + 1] || {});
+    const active = i === activeIndex;
+    const visible = typeof display === "function" ? display(i, i === activeIndex, !isPrev && !isNext) : display || i === activeIndex || !isPrev && !isNext;
+    const radius = radiusBase * (active ? 5 / 4 : 1);
     if (!d3.defined()(d)) return acc;
     if (!visible) return acc;
     if (!patterns) {
@@ -87,7 +98,7 @@ function Dots(props) {
         "color": resolveColor(color),
         "patternKey": patternKey,
         "patterns": patterns,
-        "key": "".concat(i),
+        "key": `${i}`,
         "value": d,
         "visible": visible,
         "active": active,
@@ -103,7 +114,7 @@ function Dots(props) {
       acc.push((_ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDot, _ref2.cn("SDot", {
         "key": i,
         "render": "use",
-        "href": "#".concat(svgPatternId),
+        "href": `#${svgPatternId}`,
         "x": width + (d3.x()(d) - width / 2),
         "y": d3.y()(d) - height / 2,
         "value": d,
@@ -117,9 +128,9 @@ function Dots(props) {
     }
     return acc;
   }, []);
-  var SDots = "g";
+  const SDots = "g";
   return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SDots, _ref3.cn("SDots", {
-    "duration": "".concat(duration, "ms"),
+    "duration": `${duration}ms`,
     "onClickCapture": handlerOnClick
   }), /* @__PURE__ */ React.createElement(PatternSymbol, _ref3.cn("PatternSymbol", {
     "color": resolveColor(color),

package/lib/esm/GroupBar.mjs

@@ -1,7 +1,3 @@
-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 { Component } from "@semcore/core";
 import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
@@ -11,79 +7,79 @@ import Bar from "./Bar.mjs";
 import createElement from "./createElement.mjs";
 import HorizontalBar from "./HorizontalBar.mjs";
 import { scaleToBand, getChartDefaultColorName } from "./utils.mjs";
-var GroupBarRoot = /* @__PURE__ */ (function(_Component) {
-  function GroupBarRoot2() {
-    _classCallCheck(this, GroupBarRoot2);
-    return _callSuper(this, GroupBarRoot2, arguments);
+class GroupBarRoot extends Component {
+  getScaleGroup() {
+    const {
+      Children,
+      scale,
+      scaleGroup,
+      x
+    } = this.asProps;
+    const xyScale = x ? scale[0] : scale[1];
+    if (scaleGroup) return scaleGroup;
+    const domain = React.Children.toArray(getOriginChildren(Children)).reduce((acc, child) => {
+      if (/* @__PURE__ */ React.isValidElement(child) && child.type === GroupBar.Bar && !child.props.hide) {
+        acc.push(child.props.y);
+      }
+      if (/* @__PURE__ */ React.isValidElement(child) && child.type === GroupBar.HorizontalBar && !child.props.hide) {
+        acc.push(child.props.x);
+      }
+      return acc;
+    }, []);
+    return scaleBand().range([0, scaleToBand(xyScale).bandwidth()]).domain(domain).paddingInner(0.1).paddingOuter(0.1);
   }
-  _inherits(GroupBarRoot2, _Component);
-  return _createClass(GroupBarRoot2, [{
-    key: "getScaleGroup",
-    value: function getScaleGroup() {
-      var _this$asProps = this.asProps, Children = _this$asProps.Children, scale = _this$asProps.scale, scaleGroup = _this$asProps.scaleGroup, x = _this$asProps.x;
-      var xyScale = x ? scale[0] : scale[1];
-      if (scaleGroup) return scaleGroup;
-      var domain = React.Children.toArray(getOriginChildren(Children)).reduce(function(acc, child) {
-        if (/* @__PURE__ */ React.isValidElement(child) && child.type === GroupBar.Bar && !child.props.hide) {
-          acc.push(child.props.y);
-        }
-        if (/* @__PURE__ */ React.isValidElement(child) && child.type === GroupBar.HorizontalBar && !child.props.hide) {
-          acc.push(child.props.x);
-        }
-        return acc;
-      }, []);
-      return scaleBand().range([0, scaleToBand(xyScale).bandwidth()]).domain(domain).paddingInner(0.1).paddingOuter(0.1);
-    }
-  }, {
-    key: "getBarProps",
-    value: function getBarProps(_ref, index) {
-      var y = _ref.y;
-      var _this$asProps2 = this.asProps, x = _this$asProps2.x, _this$asProps2$maxBar = _this$asProps2.maxBarSize, maxBarSize = _this$asProps2$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps2$maxBar, patterns = _this$asProps2.patterns;
-      var bandWidth = this.scaleGroup.bandwidth();
-      var width = Math.min(bandWidth, maxBarSize);
-      var offsetX = this.scaleGroup(y) + bandWidth / 2 - width / 2;
-      return {
-        offset: [offsetX, 0],
-        width,
-        color: getChartDefaultColorName(index),
-        x,
-        groupKey: x,
-        patterns
-      };
-    }
-  }, {
-    key: "getHorizontalBarProps",
-    value: function getHorizontalBarProps(_ref2, index) {
-      var x = _ref2.x;
-      var _this$asProps3 = this.asProps, y = _this$asProps3.y, _this$asProps3$maxBar = _this$asProps3.maxBarSize, maxBarSize = _this$asProps3$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps3$maxBar;
-      var bandWidth = this.scaleGroup.bandwidth();
-      var height = Math.min(bandWidth, maxBarSize);
-      var offsetY = this.scaleGroup(x) + bandWidth / 2 - height / 2;
-      return {
-        offset: [0, offsetY],
-        height,
-        color: getChartDefaultColorName(index),
-        y,
-        groupKey: y
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var Element = this.Element;
-      this.scaleGroup = this.getScaleGroup();
-      this.asProps.dataHintsHandler.establishDataType("grouped-values");
-      return /* @__PURE__ */ React.createElement(Element, {
-        "aria-hidden": true,
-        render: "g",
-        childrenPosition: "inside",
-        scaleGroup: this.scaleGroup
-      });
-    }
-  }]);
-})(Component);
+  getBarProps({
+    y
+  }, index) {
+    const {
+      x,
+      maxBarSize = Number.POSITIVE_INFINITY,
+      patterns
+    } = this.asProps;
+    const bandWidth = this.scaleGroup.bandwidth();
+    const width = Math.min(bandWidth, maxBarSize);
+    const offsetX = this.scaleGroup(y) + bandWidth / 2 - width / 2;
+    return {
+      offset: [offsetX, 0],
+      width,
+      color: getChartDefaultColorName(index),
+      x,
+      groupKey: x,
+      patterns
+    };
+  }
+  getHorizontalBarProps({
+    x
+  }, index) {
+    const {
+      y,
+      maxBarSize = Number.POSITIVE_INFINITY
+    } = this.asProps;
+    const bandWidth = this.scaleGroup.bandwidth();
+    const height = Math.min(bandWidth, maxBarSize);
+    const offsetY = this.scaleGroup(x) + bandWidth / 2 - height / 2;
+    return {
+      offset: [0, offsetY],
+      height,
+      color: getChartDefaultColorName(index),
+      y,
+      groupKey: y
+    };
+  }
+  render() {
+    const Element = this.Element;
+    this.scaleGroup = this.getScaleGroup();
+    this.asProps.dataHintsHandler.establishDataType("grouped-values");
+    return /* @__PURE__ */ React.createElement(Element, {
+      "aria-hidden": true,
+      render: "g",
+      childrenPosition: "inside",
+      scaleGroup: this.scaleGroup
+    });
+  }
+}
 _defineProperty(GroupBarRoot, "displayName", "GroupBar");
-var GroupBar = createElement(GroupBarRoot, {
+const GroupBar = createElement(GroupBarRoot, {
   Bar,
   HorizontalBar
 });

package/lib/esm/HorizontalBar.mjs

@@ -1,8 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, Component } from "@semcore/core";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
@@ -12,144 +7,165 @@ import createElement from "./createElement.mjs";
 import { PatternFill } from "./Pattern.mjs";
 import { scaleToBand, roundedPath } 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 = 2;
-var calcPartBarX = function calcPartBarX2(x, minWidth, width) {
+const MIN_WIDTH = 2;
+const calcPartBarX = (x, minWidth, width) => {
   if (x <= 0) {
     return width <= minWidth ? minWidth : 0;
   }
   return Object.is(x, 0) ? minWidth : 0;
 };
-var HorizontalBarRoot = /* @__PURE__ */ (function(_Component) {
-  function HorizontalBarRoot2() {
-    _classCallCheck(this, HorizontalBarRoot2);
-    return _callSuper(this, HorizontalBarRoot2, arguments);
+class HorizontalBarRoot extends Component {
+  getBackgroundProps(_props, index) {
+    const {
+      data,
+      y
+    } = this.asProps;
+    return {
+      value: data[index][y],
+      index
+    };
   }
-  _inherits(HorizontalBarRoot2, _Component);
-  return _createClass(HorizontalBarRoot2, [{
-    key: "getBackgroundProps",
-    value: function getBackgroundProps(_props, index) {
-      var _this$asProps = this.asProps, data = _this$asProps.data, y = _this$asProps.y;
-      return {
-        value: data[index][y],
-        index
-      };
+  renderBar(d, i) {
+    var _ref;
+    const SBar = this.Element;
+    const {
+      styles,
+      color,
+      x,
+      x0,
+      y,
+      scale,
+      hide,
+      offset: offsetProps,
+      uid,
+      duration,
+      r,
+      wMin,
+      height: heightProps,
+      onMouseMove,
+      onMouseLeave,
+      groupKey,
+      transparent,
+      maxBarSize = Number.POSITIVE_INFINITY,
+      resolveColor,
+      patterns,
+      onClick
+    } = this.asProps;
+    const offset = typeof offsetProps === "function" ? offsetProps(i) : offsetProps;
+    const [xScale, yScale] = scale;
+    const absWidth = Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale(d[x0] ?? 0)));
+    const bandHeight = heightProps || scaleToBand(yScale).bandwidth();
+    const height = Math.min(bandHeight, maxBarSize);
+    const width = Number(d[x] - (d[x0] ?? 0)) === 0 ? 0 : Math.max(absWidth, wMin);
+    const barY = yScale(d[y]) + bandHeight / 2 - height / 2 + offset[1];
+    const barX = xScale(Math.min(d[x0] ?? 0, width <= wMin && d[x] < 0 ? 0 : d[x])) + offset[0] - calcPartBarX(d[x], wMin, width);
+    const handleClick = (event) => onClick == null ? void 0 : onClick(d, event, i, x);
+    const dSvg = getHorizontalRect({
+      x: barX,
+      y: barY,
+      width,
+      height,
+      radius: Array.isArray(r) ? r[i] : r,
+      position: d[x] > 0 || Object.is(d[x], 0) ? "right" : "left"
+    });
+    if (groupKey) {
+      this.asProps.dataHintsHandler.describeGroupedValues(groupKey, x);
+    } else {
+      this.asProps.dataHintsHandler.describeValueEntity(`${i}.${x}`, groupKey ?? d[y]);
     }
-  }, {
-    key: "renderBar",
-    value: function renderBar(d, i) {
-      var _ref, _d$x, _d$x2, _d$x3;
-      var SBar = this.Element;
-      var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, color = _this$asProps2.color, x = _this$asProps2.x, x0 = _this$asProps2.x0, y = _this$asProps2.y, scale = _this$asProps2.scale, hide = _this$asProps2.hide, offsetProps = _this$asProps2.offset, uid = _this$asProps2.uid, duration = _this$asProps2.duration, r = _this$asProps2.r, wMin = _this$asProps2.wMin, heightProps = _this$asProps2.height, onMouseMove = _this$asProps2.onMouseMove, onMouseLeave = _this$asProps2.onMouseLeave, groupKey = _this$asProps2.groupKey, transparent = _this$asProps2.transparent, _this$asProps2$maxBar = _this$asProps2.maxBarSize, maxBarSize = _this$asProps2$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps2$maxBar, resolveColor = _this$asProps2.resolveColor, patterns = _this$asProps2.patterns, onClick = _this$asProps2.onClick;
-      var offset = typeof offsetProps === "function" ? offsetProps(i) : offsetProps;
-      var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
-      var absWidth = Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale((_d$x = d[x0]) !== null && _d$x !== void 0 ? _d$x : 0)));
-      var bandHeight = heightProps || scaleToBand(yScale).bandwidth();
-      var height = Math.min(bandHeight, maxBarSize);
-      var width = Number(d[x] - ((_d$x2 = d[x0]) !== null && _d$x2 !== void 0 ? _d$x2 : 0)) === 0 ? 0 : Math.max(absWidth, wMin);
-      var barY = yScale(d[y]) + bandHeight / 2 - height / 2 + offset[1];
-      var barX = xScale(Math.min((_d$x3 = d[x0]) !== null && _d$x3 !== void 0 ? _d$x3 : 0, width <= wMin && d[x] < 0 ? 0 : d[x])) + offset[0] - calcPartBarX(d[x], wMin, width);
-      var handleClick = function handleClick2(event) {
-        return onClick === null || onClick === void 0 ? void 0 : onClick(d, event, i, x);
-      };
-      var dSvg = getHorizontalRect({
-        x: barX,
-        y: barY,
-        width,
-        height,
-        radius: Array.isArray(r) ? r[i] : r,
-        position: d[x] > 0 || Object.is(d[x], 0) ? "right" : "left"
-      });
-      if (groupKey) {
-        this.asProps.dataHintsHandler.describeGroupedValues(groupKey, x);
-      } else {
-        this.asProps.dataHintsHandler.describeValueEntity("".concat(i, ".").concat(x), groupKey !== null && groupKey !== void 0 ? groupKey : d[y]);
-      }
-      return /* @__PURE__ */ React.createElement(React.Fragment, {
-        key: "horizontal-bar-".concat(i)
-      }, (_ref = sstyled(styles), /* @__PURE__ */ React.createElement(SBar, _ref.cn("SBar", {
-        "aria-hidden": true,
-        "render": "path",
-        "clipPath": "url(#".concat(uid, ")"),
-        "__excludeProps": ["data", "scale", "value", "onClick", "offset"],
-        "childrenPosition": "above",
-        "value": d,
-        "index": i,
-        "hide": hide,
-        "color": resolveColor(color),
-        "pattern": patterns ? "url(#".concat(uid, "-").concat(i, "-pattern)") : void 0,
-        "transparent": transparent,
-        "x": barX,
-        "y": barY,
-        "width": width,
-        "height": height,
-        "d": dSvg,
-        "onClickCapture": handleClick,
-        "use:duration": "".concat(duration, "ms"),
-        "onMouseMove": onMouseMove,
-        "onMouseLeave": onMouseLeave
-      }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref.cn("PatternFill", {
-        "id": "".concat(uid, "-").concat(i, "-pattern"),
-        "patternKey": color,
-        "color": resolveColor(color),
-        "patterns": patterns
-      })));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$asProps3 = this.asProps, data = _this$asProps3.data, uid = _this$asProps3.uid, size = _this$asProps3.size, duration = _this$asProps3.duration;
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, data.map(this.renderBar.bind(this)), duration && /* @__PURE__ */ React.createElement(AnimatedClipPath, {
-        "aria-hidden": true,
-        duration,
-        id: uid,
-        x: "0",
-        y: "0",
-        width: 0,
-        height: size[1]
-      }));
-    }
-  }]);
-})(Component);
+    return /* @__PURE__ */ React.createElement(React.Fragment, {
+      key: `horizontal-bar-${i}`
+    }, (_ref = sstyled(styles), /* @__PURE__ */ React.createElement(SBar, _ref.cn("SBar", {
+      "aria-hidden": true,
+      "render": "path",
+      "clipPath": `url(#${uid})`,
+      "__excludeProps": ["data", "scale", "value", "onClick", "offset"],
+      "childrenPosition": "above",
+      "value": d,
+      "index": i,
+      "hide": hide,
+      "color": resolveColor(color),
+      "pattern": patterns ? `url(#${uid}-${i}-pattern)` : void 0,
+      "transparent": transparent,
+      "x": barX,
+      "y": barY,
+      "width": width,
+      "height": height,
+      "d": dSvg,
+      "onClickCapture": handleClick,
+      "use:duration": `${duration}ms`,
+      "onMouseMove": onMouseMove,
+      "onMouseLeave": onMouseLeave
+    }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref.cn("PatternFill", {
+      "id": `${uid}-${i}-pattern`,
+      "patternKey": color,
+      "color": resolveColor(color),
+      "patterns": patterns
+    })));
+  }
+  render() {
+    const {
+      data,
+      uid,
+      size,
+      duration
+    } = this.asProps;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, data.map(this.renderBar.bind(this)), duration && /* @__PURE__ */ React.createElement(AnimatedClipPath, {
+      "aria-hidden": true,
+      duration,
+      id: uid,
+      x: "0",
+      y: "0",
+      width: 0,
+      height: size[1]
+    }));
+  }
+}
 _defineProperty(HorizontalBarRoot, "displayName", "HorizontalBar");
 _defineProperty(HorizontalBarRoot, "enhance", [uniqueIDEnhancement()]);
 _defineProperty(HorizontalBarRoot, "style", style);
 _defineProperty(HorizontalBarRoot, "defaultProps", {
   offset: [0, 0],
   duration: 500,
-  r: 2,
+  r: 0,
   wMin: MIN_WIDTH
 });
 function Background(props) {
   var _ref2;
-  var SBackground = props.Element, styles = props.styles, scale = props.scale, value = props.value;
-  var _scale2 = _slicedToArray(scale, 2), xScale = _scale2[0], yScale = _scale2[1];
-  var xRange = xScale.range();
+  const {
+    Element: SBackground,
+    styles,
+    scale,
+    value
+  } = props;
+  const [xScale, yScale] = scale;
+  const xRange = xScale.range();
   return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SBackground, _ref2.cn("SBackground", {
     "aria-hidden": true,
     "render": "rect",
@@ -160,8 +176,14 @@ function Background(props) {
     "y": yScale(value)
   }));
 }
-function getHorizontalRect(_ref3) {
-  var x = _ref3.x, y = _ref3.y, width = _ref3.width, height = _ref3.height, radius = _ref3.radius, position = _ref3.position;
+function getHorizontalRect({
+  x,
+  y,
+  width,
+  height,
+  radius,
+  position
+}) {
   if (width < radius) radius = width;
   if (radius) {
     if (position === "right") return roundedPath(x, y, width, height, radius, false, true, false, true);