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

package/lib/esm/Bar.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";
@@ -13,149 +8,161 @@ 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_HEIGHT = 2;
-var calcPartBarY = function calcPartBarY2(y, minHeight, height) {
+const MIN_HEIGHT = 2;
+const calcPartBarY = (y, minHeight, height) => {
   if (y <= 0) {
     return Object.is(y, 0) ? minHeight : 0;
   }
   return height <= minHeight ? minHeight : 0;
 };
-var BarRoot = /* @__PURE__ */ (function(_Component) {
-  function BarRoot2() {
-    _classCallCheck(this, BarRoot2);
-    return _callSuper(this, BarRoot2, arguments);
+class BarRoot extends Component {
+  getBackgroundProps(_props, index) {
+    const {
+      x,
+      data
+    } = this.asProps;
+    return {
+      value: data[index][x],
+      index
+    };
   }
-  _inherits(BarRoot2, _Component);
-  return _createClass(BarRoot2, [{
-    key: "getBackgroundProps",
-    value: function getBackgroundProps(_props, index) {
-      var _this$asProps = this.asProps, x = _this$asProps.x, data = _this$asProps.data;
-      return {
-        value: data[index][x],
-        index
-      };
+  animationBar() {
+    const {
+      duration,
+      uid
+    } = this.asProps;
+    const selectRect = transition().selection().selectAll(`#${uid} rect`);
+    const selectRectNode = selectRect.node();
+    if (duration > 0 && selectRectNode && selectRectNode.getAttribute("y") !== "0") {
+      selectRect.transition().duration(duration).attr("y", 0);
     }
-  }, {
-    key: "animationBar",
-    value: function animationBar() {
-      var _this$asProps2 = this.asProps, duration = _this$asProps2.duration, uid = _this$asProps2.uid;
-      var selectRect = transition().selection().selectAll("#".concat(uid, " rect"));
-      var selectRectNode = selectRect.node();
-      if (duration > 0 && selectRectNode && selectRectNode.getAttribute("y") !== "0") {
-        selectRect.transition().duration(duration).attr("y", 0);
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.animationBar();
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.animationBar();
-    }
-  }, {
-    key: "renderBar",
-    value: function renderBar(d, i) {
-      var _ref, _d$y, _d$y2, _d$y3;
-      var SBar = this.Element;
-      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, color = _this$asProps3.color, resolveColor = _this$asProps3.resolveColor, x = _this$asProps3.x, y = _this$asProps3.y, y0 = _this$asProps3.y0, scale = _this$asProps3.scale, hide = _this$asProps3.hide, offsetProps = _this$asProps3.offset, duration = _this$asProps3.duration, uid = _this$asProps3.uid, r = _this$asProps3.r, hMin = _this$asProps3.hMin, widthProps = _this$asProps3.width, groupKey = _this$asProps3.groupKey, onClick = _this$asProps3.onClick, transparent = _this$asProps3.transparent, _this$asProps3$maxBar = _this$asProps3.maxBarSize, maxBarSize = _this$asProps3$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps3$maxBar, patterns = _this$asProps3.patterns, dataHintsHandler = _this$asProps3.dataHintsHandler;
-      var offset = typeof offsetProps === "function" ? offsetProps(i) : offsetProps;
-      var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
-      var absHeight = Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale((_d$y = d[y0]) !== null && _d$y !== void 0 ? _d$y : 0)));
-      var height = Number(d[y] - ((_d$y2 = d[y0]) !== null && _d$y2 !== void 0 ? _d$y2 : 0)) === 0 ? 0 : Math.max(absHeight, hMin);
-      var bandWidth = widthProps || scaleToBand(xScale).bandwidth();
-      var width = Math.min(bandWidth, maxBarSize);
-      var barX = xScale(d[x]) + bandWidth / 2 - width / 2 + offset[0];
-      var barY = yScale(Math.max((_d$y3 = d[y0]) !== null && _d$y3 !== void 0 ? _d$y3 : 0, height <= hMin && d[y] > 0 ? 0 : d[y])) + offset[1] - calcPartBarY(d[y], hMin, height);
-      var handleClick = function handleClick2(event) {
-        return onClick === null || onClick === void 0 ? void 0 : onClick(d, event, i, y);
-      };
-      var dSvg = getRect({
-        x: barX,
-        y: barY,
-        width,
-        height,
-        radius: Array.isArray(r) ? r[i] : r,
-        position: d[y] > 0 || Object.is(d[y], 0) ? "top" : "bottom"
-      });
-      if (groupKey) {
-        dataHintsHandler.describeGroupedValues(groupKey, y);
-      } else {
-        dataHintsHandler.describeValueEntity("".concat(i, ".").concat(y), groupKey !== null && groupKey !== void 0 ? groupKey : d[x]);
-        dataHintsHandler.specifyDataRowFields(x, y);
-      }
-      return /* @__PURE__ */ React.createElement(React.Fragment, {
-        key: "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,
-        "pattern": patterns ? "url(#".concat(uid, "-").concat(i, "-pattern)") : void 0,
-        "color": resolveColor(color),
-        "x": barX,
-        "y": barY,
-        "width": width,
-        "height": height,
-        "d": dSvg,
-        "onClickCapture": handleClick,
-        "use:duration": "".concat(duration, "ms"),
-        "transparent": transparent
-      }))), 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$asProps4 = this.asProps, data = _this$asProps4.data, uid = _this$asProps4.uid, size = _this$asProps4.size, duration = _this$asProps4.duration;
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, data.map(this.renderBar.bind(this)), duration && /* @__PURE__ */ React.createElement(AnimatedClipPath, {
-        duration,
-        key: "".concat(uid, "-animation"),
-        attributeName: "y",
-        values: "100%;0",
-        id: uid,
-        width: size[0],
-        height: "".concat(size[1], "px")
-      }));
+  }
+  componentDidUpdate() {
+    this.animationBar();
+  }
+  componentDidMount() {
+    this.animationBar();
+  }
+  renderBar(d, i) {
+    var _ref;
+    const SBar = this.Element;
+    const {
+      styles,
+      color,
+      resolveColor,
+      x,
+      y,
+      y0,
+      scale,
+      hide,
+      offset: offsetProps,
+      duration,
+      uid,
+      r,
+      hMin,
+      width: widthProps,
+      groupKey,
+      onClick,
+      transparent,
+      maxBarSize = Number.POSITIVE_INFINITY,
+      patterns,
+      dataHintsHandler
+    } = this.asProps;
+    const offset = typeof offsetProps === "function" ? offsetProps(i) : offsetProps;
+    const [xScale, yScale] = scale;
+    const absHeight = Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0)));
+    const height = Number(d[y] - (d[y0] ?? 0)) === 0 ? 0 : Math.max(absHeight, hMin);
+    const bandWidth = widthProps || scaleToBand(xScale).bandwidth();
+    const width = Math.min(bandWidth, maxBarSize);
+    const barX = xScale(d[x]) + bandWidth / 2 - width / 2 + offset[0];
+    const barY = yScale(Math.max(d[y0] ?? 0, height <= hMin && d[y] > 0 ? 0 : d[y])) + offset[1] - calcPartBarY(d[y], hMin, height);
+    const handleClick = (event) => onClick == null ? void 0 : onClick(d, event, i, y);
+    const dSvg = getRect({
+      x: barX,
+      y: barY,
+      width,
+      height,
+      radius: Array.isArray(r) ? r[i] : r,
+      position: d[y] > 0 || Object.is(d[y], 0) ? "top" : "bottom"
+    });
+    if (groupKey) {
+      dataHintsHandler.describeGroupedValues(groupKey, y);
+    } else {
+      dataHintsHandler.describeValueEntity(`${i}.${y}`, groupKey ?? d[x]);
+      dataHintsHandler.specifyDataRowFields(x, y);
     }
-  }]);
-})(Component);
+    return /* @__PURE__ */ React.createElement(React.Fragment, {
+      key: `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,
+      "pattern": patterns ? `url(#${uid}-${i}-pattern)` : void 0,
+      "color": resolveColor(color),
+      "x": barX,
+      "y": barY,
+      "width": width,
+      "height": height,
+      "d": dSvg,
+      "onClickCapture": handleClick,
+      "use:duration": `${duration}ms`,
+      "transparent": transparent
+    }))), 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, {
+      duration,
+      key: `${uid}-animation`,
+      attributeName: "y",
+      values: "100%;0",
+      id: uid,
+      width: size[0],
+      height: `${size[1]}px`
+    }));
+  }
+}
 _defineProperty(BarRoot, "displayName", "Bar");
 _defineProperty(BarRoot, "style", style);
 _defineProperty(BarRoot, "enhance", [uniqueIDEnhancement()]);
@@ -167,9 +174,14 @@ _defineProperty(BarRoot, "defaultProps", {
 });
 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 yRange = yScale.range();
+  const {
+    Element: SBackground,
+    styles,
+    scale,
+    value
+  } = props;
+  const [xScale, yScale] = scale;
+  const yRange = yScale.range();
   return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SBackground, _ref2.cn("SBackground", {
     "aria-hidden": true,
     "render": "rect",
@@ -180,8 +192,14 @@ function Background(props) {
     "y": yRange[1]
   }));
 }
-function getRect(_ref3) {
-  var x = _ref3.x, y = _ref3.y, width = _ref3.width, height = _ref3.height, radius = _ref3.radius, position = _ref3.position;
+function getRect({
+  x,
+  y,
+  width,
+  height,
+  radius,
+  position
+}) {
   if (height < radius) radius = height;
   if (radius) {
     if (position === "top") return roundedPath(x, y, width, height, radius, true, true, false, false);