@semcore/d3-chart 16.0.0-prerelease.9 → 16.0.0

package/lib/esm/Donut.mjs

@@ -0,0 +1,414 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { sstyled, Component, assignProps } from "@semcore/core";
+import React from "react";
+import { arc, pie } from "d3-shape";
+import { interpolate } from "d3-interpolate";
+import { transition } from "d3-transition";
+import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import createElement from "./createElement.mjs";
+import { getChartDefaultColorName } from "./utils.mjs";
+import Tooltip from "./Tooltip.mjs";
+import { PatternFill } from "./Pattern.mjs";
+var _excluded = ["Element", "styles", "d3Arc", "data", "color", "$animationActivePie", "active", "d3ArcOut", "name", "dataKey", "dataHintsHandler", "transparent", "innerRadius", "outerRadius", "resolveColor", "halfsize", "uid", "patterns"];
+/*!__reshadow-styles__:"./style/donut.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SPie_1h0hc_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPie_1h0hc_gg_.__color_1h0hc_gg_{fill:var(--color_1h0hc)}.___SPie_1h0hc_gg_.__pattern_1h0hc_gg_.__color_1h0hc_gg_{fill:var(--pattern_1h0hc);stroke:var(--color_1h0hc);stroke-width:1px}.___SPie_1h0hc_gg_.__transparent_1h0hc_gg_{opacity:.3}.___SEmptyData_1h0hc_gg_{fill:var(--intergalactic-chart-palette-order-null, #e0e1e9)}.___SEmptyData_1h0hc_gg_.__color_1h0hc_gg_{fill:var(--color_1h0hc)}.___SLabel_1h0hc_gg_{text-anchor:middle;vertical-anchor:middle;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}",
+    /*__inner_css_end__*/
+    "1h0hc_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SPie": "___SPie_1h0hc_gg_",
+    "_color": "__color_1h0hc_gg_",
+    "--color": "--color_1h0hc",
+    "_pattern": "__pattern_1h0hc_gg_",
+    "--pattern": "--pattern_1h0hc",
+    "_transparent": "__transparent_1h0hc_gg_",
+    "__SEmptyData": "___SEmptyData_1h0hc_gg_",
+    "__SLabel": "___SLabel_1h0hc_gg_"
+  })
+);
+var DEFAULT_INSTANCE = Symbol("DEFAULT_INSTANCE");
+function transitionAnglePie(_ref6) {
+  var selector = _ref6.selector, duration = _ref6.duration, halfsize = _ref6.halfsize, d3Arc = _ref6.d3Arc, d3ArcOut = _ref6.d3ArcOut, arcs = _ref6.arcs, activeIndexPie = _ref6.activeIndexPie;
+  return transition().selection().selectAll(selector).interrupt().transition().duration(duration).attrTween("d", function(_, ind) {
+    if (!arcs[ind]) return function() {
+      return "";
+    };
+    var d = Object.assign({}, arcs[ind]);
+    var self = this;
+    var initAngle = halfsize ? -Math.PI / 2 : 0;
+    var prevStartAngle = initAngle;
+    var prevEndAngle = initAngle;
+    if (self.arc) {
+      prevStartAngle = self.arc.startAngle;
+      prevEndAngle = self.arc.endAngle;
+    }
+    var iStartAngle = interpolate(prevStartAngle, d.startAngle);
+    var iEndAngle = interpolate(prevEndAngle, d.endAngle);
+    return function(t) {
+      d.startAngle = iStartAngle(t);
+      d.endAngle = iEndAngle(t);
+      self.arc = d;
+      return ind === activeIndexPie ? d3ArcOut(self.arc) : d3Arc(self.arc);
+    };
+  });
+}
+function transitionRadiusPie(_ref7) {
+  var data = _ref7.data, selector = _ref7.selector, element = _ref7.element, duration = _ref7.duration, innerRadius = _ref7.innerRadius, outerRadiusStartEnd = _ref7.outerRadiusStartEnd, paddingAngle = _ref7.paddingAngle;
+  return transition().selection().select(selector).interrupt().transition().duration(duration).attrTween("d", function() {
+    var _outerRadiusStartEnd = _slicedToArray(outerRadiusStartEnd, 2), start = _outerRadiusStartEnd[0], end = _outerRadiusStartEnd[1];
+    var iOuterRadius = interpolate(start, end);
+    return function(t) {
+      var outerRadiusPX = iOuterRadius(t);
+      element.dataset["currentRadius"] = outerRadiusPX;
+      var d3ArcOut = arc().innerRadius(innerRadius).outerRadius(outerRadiusPX).padAngle(paddingAngle);
+      return d3ArcOut(data);
+    };
+  });
+}
+var increaseFactor = 8;
+function getOuterRadius(_ref8) {
+  var size = _ref8.size, halfsize = _ref8.halfsize;
+  var _size = _slicedToArray(size, 2), width = _size[0], height = _size[1];
+  var minORmax = halfsize ? Math.max : Math.min;
+  return minORmax(width - increaseFactor * 2, height - increaseFactor * 2) / 2;
+}
+var DonutRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(DonutRoot2, _Component);
+  var _super = _createSuper(DonutRoot2);
+  function DonutRoot2() {
+    var _this;
+    _classCallCheck(this, DonutRoot2);
+    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));
+    _defineProperty(_assertThisInitialized(_this), "virtualElement", canUseDOM() ? document.createElement("div") : {});
+    _defineProperty(_assertThisInitialized(_this), "activeIndexPie", void 0);
+    _defineProperty(_assertThisInitialized(_this), "canAnimatedHover", false);
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerTooltip", function(visible, props, tooltipProps) {
+      return function(_ref9) {
+        var clientX = _ref9.clientX, clientY = _ref9.clientY;
+        var eventEmitter = _this.asProps.eventEmitter;
+        eventEmitter.emit("setTooltipPosition", clientX, clientY);
+        eventEmitter.emit("setTooltipRenderingProps", props, tooltipProps);
+        eventEmitter.emit("setTooltipVisible", visible);
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "animationActivePie", function(_ref10) {
+      var data = _ref10.data, active = _ref10.active, selector = _ref10.selector, element = _ref10.element;
+      var _this$asProps = _this.asProps, duration = _this$asProps.duration, innerRadius = _this$asProps.innerRadius, d3Arc = _this$asProps.d3Arc, paddingAngle = _this$asProps.paddingAngle;
+      var outerRadius = d3Arc.outerRadius()();
+      var outerRadiusStartEnd = active ? [+element.dataset["currentRadius"] || outerRadius, outerRadius + increaseFactor] : [+element.dataset["currentRadius"] || outerRadius, outerRadius];
+      if (_this.canAnimatedHover && duration > 0) {
+        transitionRadiusPie({
+          data,
+          selector: "#".concat(_this.id, " ").concat(selector),
+          element,
+          duration: duration === 0 ? 0 : 300,
+          innerRadius,
+          outerRadiusStartEnd,
+          paddingAngle
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "animationTimeout", null);
+    _defineProperty(_assertThisInitialized(_this), "animationUpdatePie", function() {
+      clearTimeout(_this.animationTimeout);
+      _this.animationTimeout = setTimeout(function() {
+        var _this$asProps2 = _this.asProps, duration = _this$asProps2.duration, d3Arc = _this$asProps2.d3Arc, halfsize = _this$asProps2.halfsize, d3ArcOut = _this$asProps2.d3ArcOut;
+        _this.canAnimatedHover = false;
+        if (duration > 0) {
+          transitionAnglePie({
+            selector: "#".concat(_this.id, ' [data-ui-name="Donut.Pie"]'),
+            duration,
+            arcs: _this.arcs,
+            halfsize,
+            d3Arc,
+            d3ArcOut,
+            activeIndexPie: _this.activeIndexPie
+          }).on("end", function() {
+            _this.canAnimatedHover = true;
+          });
+        } else {
+          _this.canAnimatedHover = true;
+        }
+      }, 0);
+    });
+    return _this;
+  }
+  _createClass(DonutRoot2, [{
+    key: "id",
+    get: function get() {
+      var _this$asProps3 = this.asProps, uid = _this$asProps3.uid, id = _this$asProps3.id;
+      return id || uid;
+    }
+  }, {
+    key: "generateGetBoundingClientRect",
+    value: function generateGetBoundingClientRect() {
+      var x = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
+      var y = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+      return function() {
+        return {
+          width: 0,
+          height: 0,
+          top: y,
+          right: x,
+          bottom: y,
+          left: x
+        };
+      };
+    }
+  }, {
+    key: "getArcs",
+    value: function getArcs() {
+      var _this$asProps4 = this.asProps, Children = _this$asProps4.Children, data = _this$asProps4.data, d3Pie = _this$asProps4.d3Pie;
+      var pieData = Object.entries(data);
+      if (d3Pie[DEFAULT_INSTANCE]) {
+        var keys = React.Children.toArray(getOriginChildren(Children)).reduce(function(acc, child) {
+          if (/* @__PURE__ */ React.isValidElement(child) && child.type === Donut.Pie) {
+            acc.push(child.props.dataKey);
+          }
+          return acc;
+        }, []);
+        pieData = Object.entries(data).filter(function(_ref11) {
+          var _ref12 = _slicedToArray(_ref11, 2), key = _ref12[0], value = _ref12[1];
+          return keys.includes(key) && value > 0;
+        }).sort(function(_ref13, _ref14) {
+          var _ref15 = _slicedToArray(_ref13, 1), a = _ref15[0];
+          var _ref16 = _slicedToArray(_ref14, 1), b = _ref16[0];
+          return keys.indexOf(a) > keys.indexOf(b) ? 1 : -1;
+        });
+      }
+      var minValue = pieData.reduce(function(acc, cur) {
+        if (cur[1]) acc += cur[1];
+        return acc;
+      }, 0) / 100;
+      pieData = pieData.map(function(d) {
+        if (d[1] && d[1] < minValue) d[1] = minValue;
+        return d;
+      });
+      return d3Pie(pieData);
+    }
+  }, {
+    key: "getPieProps",
+    value: function getPieProps(props, index) {
+      var _this2 = this;
+      var _this$asProps5 = this.asProps, d3Arc = _this$asProps5.d3Arc, d3ArcOut = _this$asProps5.d3ArcOut, innerRadius = _this$asProps5.innerRadius, outerRadius = _this$asProps5.outerRadius, halfsize = _this$asProps5.halfsize, resolveColor = _this$asProps5.resolveColor, uid = _this$asProps5.uid, patterns = _this$asProps5.patterns;
+      var active = props.active;
+      var data = this.arcs.find(function(arc2) {
+        return arc2.data[0] === props.dataKey;
+      });
+      if (active) {
+        this.activeIndexPie = index;
+      }
+      var tooltipProps = {
+        dataKey: props.dataKey,
+        name: props.name,
+        resolveColor,
+        color: props.color || getChartDefaultColorName(index),
+        active: props.active,
+        transparent: props.transparent,
+        patterns
+      };
+      return {
+        data,
+        d3Arc,
+        d3ArcOut,
+        innerRadius,
+        outerRadius,
+        uid: "".concat(uid, "-").concat(index),
+        patterns,
+        halfsize,
+        color: props.color || getChartDefaultColorName(index),
+        resolveColor,
+        $animationActivePie: this.animationActivePie,
+        onMouseMove: this.bindHandlerTooltip(true, props, tooltipProps),
+        onMouseLeave: this.bindHandlerTooltip(false, props, tooltipProps),
+        onMouseOver: function onMouseOver(e) {
+          if (!active) {
+            _this2.animationActivePie({
+              active: true,
+              data,
+              selector: '[d="'.concat(e.target.getAttribute("d"), '"]'),
+              element: e.target
+            });
+          }
+        },
+        onMouseOut: function onMouseOut(e) {
+          if (!active) {
+            _this2.animationActivePie({
+              active: false,
+              data,
+              selector: '[d="'.concat(e.target.getAttribute("d"), '"]'),
+              element: e.target
+            });
+          }
+        }
+      };
+    }
+  }, {
+    key: "getEmptyDataProps",
+    value: function getEmptyDataProps() {
+      var d3Arc = this.asProps.d3Arc;
+      return {
+        d3Arc
+      };
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var data = this.asProps.data;
+      if (prevProps.$rootProps.data !== data) {
+        this.animationUpdatePie();
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.animationUpdatePie();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$asProps6 = this.asProps, halfsize = _this$asProps6.halfsize, size = _this$asProps6.size;
+      this.asProps.dataHintsHandler.establishDataType("values-set");
+      var _size2 = _slicedToArray(size, 2), width = _size2[0], height = _size2[1];
+      var Element = this.Element;
+      var k = halfsize ? 1 : 2;
+      this.arcs = this.getArcs();
+      return /* @__PURE__ */ React.createElement(Element, {
+        "aria-hidden": true,
+        id: this.id,
+        render: "g",
+        childrenPosition: "inside",
+        transform: "translate(".concat(width / 2, ",").concat(height / k, ")")
+      });
+    }
+  }]);
+  return DonutRoot2;
+}(Component);
+_defineProperty(DonutRoot, "displayName", "Donut");
+_defineProperty(DonutRoot, "style", style);
+_defineProperty(DonutRoot, "enhance", [uniqueIDEnhancement()]);
+_defineProperty(DonutRoot, "defaultProps", function(_ref20) {
+  var _ref20$innerRadius = _ref20.innerRadius, innerRadius = _ref20$innerRadius === void 0 ? 0 : _ref20$innerRadius, _ref20$paddingAngle = _ref20.paddingAngle, paddingAngle = _ref20$paddingAngle === void 0 ? 0 : _ref20$paddingAngle, outerRadius = _ref20.outerRadius, _ref20$halfsize = _ref20.halfsize, halfsize = _ref20$halfsize === void 0 ? false : _ref20$halfsize, size = _ref20.$rootProps.size;
+  var d3Arc = arc().outerRadius(outerRadius || getOuterRadius({
+    size,
+    halfsize,
+    outerRadius
+  })).innerRadius(innerRadius).padAngle(paddingAngle);
+  var d3ArcOut = arc().outerRadius((outerRadius || getOuterRadius({
+    size,
+    halfsize
+  })) + increaseFactor).innerRadius(innerRadius).padAngle(paddingAngle);
+  var d3Pie = pie().sort(null).value(function(_ref21) {
+    var _ref22 = _slicedToArray(_ref21, 2), value = _ref22[1];
+    return value;
+  });
+  d3Pie[DEFAULT_INSTANCE] = true;
+  if (halfsize) {
+    d3Pie = d3Pie.startAngle(-Math.PI / 2).endAngle(Math.PI / 2);
+  }
+  return {
+    d3Pie,
+    d3Arc,
+    d3ArcOut,
+    duration: 500,
+    paddingAngle
+  };
+});
+function Pie(_ref17) {
+  var _ref2;
+  var SPie = _ref17.Element, styles = _ref17.styles, d3Arc = _ref17.d3Arc, data = _ref17.data, color = _ref17.color, $animationActivePie = _ref17.$animationActivePie, active = _ref17.active, d3ArcOut = _ref17.d3ArcOut, name = _ref17.name, dataKey = _ref17.dataKey, dataHintsHandler = _ref17.dataHintsHandler, transparent = _ref17.transparent, innerRadius = _ref17.innerRadius, outerRadius = _ref17.outerRadius, resolveColor = _ref17.resolveColor, halfsize = _ref17.halfsize, uid = _ref17.uid, patterns = _ref17.patterns, other = _objectWithoutProperties(_ref17, _excluded);
+  var _React$useState = React.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), isMount = _React$useState2[0], setIsMount = _React$useState2[1];
+  var pieRef = React.useRef(null);
+  React.useEffect(function() {
+    if (!pieRef.current) return;
+    pieRef.current.dataset["currentRadius"] = (active ? d3ArcOut : d3Arc).outerRadius()();
+    if (!isMount) {
+      setIsMount(true);
+      return;
+    }
+    if (active !== void 0 && active !== null) {
+      $animationActivePie({
+        active,
+        data,
+        selector: '[name="'.concat(other.name, '"]'),
+        element: pieRef.current
+      });
+    }
+  }, [active, Boolean(data)]);
+  React.useEffect(function() {
+    if (!pieRef.current) return;
+    pieRef.current.dataset["currentRadius"] = (active ? d3ArcOut : d3Arc).outerRadius()();
+  }, [active, innerRadius, outerRadius, halfsize, Boolean(data)]);
+  if (!data) return null;
+  dataHintsHandler.establishDataType("values-set");
+  dataHintsHandler.describeValueEntity(dataKey, name);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SPie, _ref2.cn("SPie", {
+    "render": "path",
+    "ref": pieRef,
+    "color": resolveColor(color),
+    "pattern": patterns ? "url(#".concat(uid, "-pattern)") : void 0,
+    "d": active ? d3ArcOut(data) : d3Arc(data),
+    "transparent": transparent
+  }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref2.cn("PatternFill", {
+    "id": "".concat(uid, "-pattern"),
+    "patternKey": color,
+    "color": resolveColor(color),
+    "patterns": patterns
+  })));
+}
+function EmptyData(_ref18) {
+  var _ref3;
+  var SEmptyData = _ref18.Element, styles = _ref18.styles, d3Arc = _ref18.d3Arc, color = _ref18.color, resolveColor = _ref18.resolveColor;
+  return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SEmptyData, _ref3.cn("SEmptyData", {
+    "render": "path",
+    "color": resolveColor(color),
+    "d": d3Arc({
+      endAngle: Math.PI * 2,
+      startAngle: 0
+    })
+  }));
+}
+function Label(_ref19) {
+  var _ref4;
+  var SLabel = _ref19.Element, styles = _ref19.styles, Children = _ref19.Children, children = _ref19.children, label = _ref19.label, dataHintsHandler = _ref19.dataHintsHandler, _ref19$x = _ref19.x, x = _ref19$x === void 0 ? 0 : _ref19$x, _ref19$y = _ref19.y, y = _ref19$y === void 0 ? 0 : _ref19$y;
+  dataHintsHandler.setTitle("vertical", label || children);
+  return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SLabel, _ref4.cn("SLabel", {
+    "render": "text",
+    "x": x,
+    "y": y,
+    "aria-hidden": true
+  }), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})));
+}
+var DonutTooltip = function DonutTooltip2(props) {
+  var _ref = arguments[0], _ref5;
+  var SDonutTooltip = Tooltip;
+  return _ref5 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDonutTooltip, _ref5.cn("SDonutTooltip", _objectSpread({}, assignProps({
+    "excludeAnchorProps": true
+  }, _ref))));
+};
+var Donut = createElement(DonutRoot, {
+  Pie,
+  Label,
+  EmptyData,
+  Tooltip: [DonutTooltip, Tooltip._______childrenComponents]
+});
+export {
+  Donut as default
+};

package/lib/esm/Dots.mjs

@@ -0,0 +1,119 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { sstyled } from "@semcore/core";
+import { bisector } from "d3-array";
+import React from "react";
+import trottle from "@semcore/core/lib/utils/rafTrottle";
+import createElement from "./createElement.mjs";
+import { interpolateValue, eventToPoint, invert, getChartDefaultColorName } from "./utils.mjs";
+import { getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
+/*!__reshadow-styles__:"./style/dot.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SDots_1sgcw_gg_ .___SDot_1sgcw_gg_{transition-duration:var(--duration_1sgcw)}.___SDot_1sgcw_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_1sgcw_gg_.__hide_1sgcw_gg_{display:none}.___SDot_1sgcw_gg_.__color_1sgcw_gg_{fill:var(--color_1sgcw)}.___SDot_1sgcw_gg_.__transparent_1sgcw_gg_{opacity:.3}",
+    /*__inner_css_end__*/
+    "1sgcw_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SDot": "___SDot_1sgcw_gg_",
+    "_hide": "__hide_1sgcw_gg_",
+    "_color": "__color_1sgcw_gg_",
+    "--color": "--color_1sgcw",
+    "_transparent": "__transparent_1sgcw_gg_",
+    "__SDots": "___SDots_1sgcw_gg_",
+    "--duration": "--duration_1sgcw"
+  })
+);
+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;
+  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 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);
+    setActiveIndex(bisect(data, vX));
+  }), [scale, data]);
+  var handlerMouseLeaveRoot = React.useCallback(trottle(function() {
+    setActiveIndex(null);
+  }), []);
+  React.useEffect(function() {
+    var unsubscribeMouseMoveRoot = eventEmitter.subscribe("onMouseMoveChart", function(e) {
+      e.persist();
+      handlerMouseMoveRoot(e);
+    });
+    var unsubscribeMouseLeaveRoot = eventEmitter.subscribe("onMouseLeaveChart", handlerMouseLeaveRoot);
+    return function() {
+      unsubscribeMouseMoveRoot();
+      unsubscribeMouseLeaveRoot();
+    };
+  }, [eventEmitter, scale, data, x, y]);
+  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);
+    if (!d3.defined()(d)) return acc;
+    if (!visible) return acc;
+    var patternKey = color || getChartDefaultColorName(0);
+    var _getPatternSymbolSize = getPatternSymbolSize({
+      patternKey,
+      patterns
+    }), _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2), width = _getPatternSymbolSize2[0], height = _getPatternSymbolSize2[1];
+    if (!patterns) {
+      var _ref;
+      acc.push((_ref = sstyled(styles), /* @__PURE__ */ React.createElement(SDot, _ref.cn("SDot", {
+        "render": "circle",
+        "color": resolveColor(color),
+        "patternKey": patternKey,
+        "patterns": patterns,
+        "key": "".concat(i),
+        "value": d,
+        "visible": visible,
+        "active": active,
+        "hide": hide,
+        "transparent": transparent,
+        "cx": d3.x()(d),
+        "cy": d3.y()(d),
+        "r": radius
+      }))));
+    } else {
+      var _ref2;
+      acc.push((_ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDot, _ref2.cn("SDot", {
+        "render": PatternSymbol,
+        "color": resolveColor(color),
+        "patternKey": patternKey,
+        "patterns": patterns,
+        "key": "".concat(i),
+        "value": d,
+        "visible": visible,
+        "active": active,
+        "hide": hide,
+        "transparent": transparent,
+        "x": d3.x()(d) - width / 2,
+        "y": d3.y()(d) - height / 2,
+        "radius": radius
+      }))));
+    }
+    return acc;
+  }, []);
+  var SDots = "g";
+  return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SDots, _ref3.cn("SDots", {
+    "duration": "".concat(duration, "ms")
+  }), dots);
+}
+Dots.style = style;
+const Dots$1 = createElement(Dots);
+export {
+  Dots$1 as default
+};

package/lib/esm/GroupBar.mjs

@@ -0,0 +1,94 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from "react";
+import { Component } from "@semcore/core";
+import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
+import createElement from "./createElement.mjs";
+import Bar from "./Bar.mjs";
+import HorizontalBar from "./HorizontalBar.mjs";
+import { scaleBand } from "d3-scale";
+import { scaleToBand, getChartDefaultColorName } from "./utils.mjs";
+var GroupBarRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(GroupBarRoot2, _Component);
+  var _super = _createSuper(GroupBarRoot2);
+  function GroupBarRoot2() {
+    _classCallCheck(this, GroupBarRoot2);
+    return _super.apply(this, arguments);
+  }
+  _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 ? 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 ? 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
+      });
+    }
+  }]);
+  return GroupBarRoot2;
+}(Component);
+_defineProperty(GroupBarRoot, "displayName", "GroupBar");
+var GroupBar = createElement(GroupBarRoot, {
+  Bar,
+  HorizontalBar
+});
+export {
+  GroupBar as default
+};