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

package/lib/esm/Plot.mjs

@@ -1,134 +1,137 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
+import { Box } from "@semcore/base-components";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import keyboardFocusEnhance from "@semcore/core/lib/utils/enhances/keyboardFocusEnhance";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
 import EventEmitter from "@semcore/core/lib/utils/eventEmitter";
-import { Box } from "@semcore/flex-box";
 import React from "react";
 import { makeDataHintsContainer, makeDataHintsHandlers } from "./a11y/hints.mjs";
 import { PlotA11yModule } from "./a11y/PlotA11yModule.mjs";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
 import { uniqueId, eventToPoint } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/plot.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPlot_1kb8p_gg_{overflow:hidden}.___SPlot_1kb8p_gg_:focus{outline:0}.___SPlot_1kb8p_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}foreignObject[data-aria-only]{pointer-events:none}.___SPlot_1kb8p_gg_.__keyboardFocused_1kb8p_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset;border-radius:var(--intergalactic-surface-rounded, 6px)}",
+    ".___SPlot_desqn_gg_{overflow:hidden}.___SPlot_desqn_gg_:focus{outline:0}.___SPlot_desqn_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}foreignObject[data-aria-only]{pointer-events:none}.___SPlot_desqn_gg_:has(foreignObject[data-aria-only]:focus-within){outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset;border-radius:var(--intergalactic-surface-rounded, 6px)}",
     /*__inner_css_end__*/
-    "1kb8p_gg_"
+    "desqn_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPlot": "___SPlot_1kb8p_gg_",
-    "_keyboardFocused": "__keyboardFocused_1kb8p_gg_"
+    "__SPlot": "___SPlot_desqn_gg_"
   })
 );
-var PlotRoot = /* @__PURE__ */ (function(_Component) {
-  function PlotRoot2(props) {
-    var _this;
-    _classCallCheck(this, PlotRoot2);
-    _this = _callSuper(this, PlotRoot2, [props]);
-    _defineProperty(_this, "plotId", uniqueId());
-    _defineProperty(_this, "rootRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "dataStructureHints", _this.props.dataHints || makeDataHintsContainer());
-    _defineProperty(_this, "dataHintsHandler", makeDataHintsHandlers(_this.dataStructureHints));
-    _defineProperty(_this, "handlerMouseMove", function(e) {
-      var scale = _this.asProps.scale;
-      _this.eventEmitter.emit("onMouseMoveRoot", e);
+class PlotRoot extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "plotId", uniqueId());
+    _defineProperty(this, "rootRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "dataStructureHints", this.props.dataHints || makeDataHintsContainer());
+    _defineProperty(this, "dataHintsHandler", makeDataHintsHandlers(this.dataStructureHints));
+    _defineProperty(this, "handlerMouseMove", (e) => {
+      const {
+        scale
+      } = this.asProps;
+      this.eventEmitter.emit("onMouseMoveRoot", e);
       if (scale && scale.length >= 2) {
-        var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
-        var _eventToPoint = eventToPoint(e, _this.rootRef.current), _eventToPoint2 = _slicedToArray(_eventToPoint, 2), pX = _eventToPoint2[0], pY = _eventToPoint2[1];
-        var _xScale$range = xScale.range(), _xScale$range2 = _slicedToArray(_xScale$range, 2), minX = _xScale$range2[0], maxX = _xScale$range2[1];
-        var _yScale$range = yScale.range(), _yScale$range2 = _slicedToArray(_yScale$range, 2), maxY = _yScale$range2[0], minY = _yScale$range2[1];
+        const [xScale, yScale] = scale;
+        const [pX, pY] = eventToPoint(e, this.rootRef.current);
+        const [minX, maxX] = xScale.range();
+        const [maxY, minY] = yScale.range();
         if (pX >= minX && pX <= maxX && pY >= minY && pY <= maxY) {
-          _this.eventEmitter.emit("onMouseMoveChart", e, _this.rootRef.current);
+          this.eventEmitter.emit("onMouseMoveChart", e, this.rootRef.current);
         } else {
-          _this.eventEmitter.emit("onMouseLeaveChart", e);
+          this.eventEmitter.emit("onMouseLeaveChart", e);
         }
       }
     });
-    _defineProperty(_this, "handlerMouseLeave", function(e) {
-      _this.eventEmitter.emit("onMouseLeaveRoot", e);
-      _this.eventEmitter.emit("onMouseLeaveChart", e);
+    _defineProperty(this, "handlerMouseLeave", (e) => {
+      this.eventEmitter.emit("onMouseLeaveRoot", e);
+      this.eventEmitter.emit("onMouseLeaveChart", e);
     });
-    _this.eventEmitter = props.eventEmitter || new EventEmitter();
-    return _this;
+    this.eventEmitter = props.eventEmitter || new EventEmitter();
   }
-  _inherits(PlotRoot2, _Component);
-  return _createClass(PlotRoot2, [{
-    key: "setContext",
-    value: function setContext() {
-      var _scale$, _scale$$domain;
-      var _this$asProps = this.asProps, scale = _this$asProps.scale, data = _this$asProps.data, width = _this$asProps.width, height = _this$asProps.height, locale = _this$asProps.locale, resolveColor = _this$asProps.resolveColor, patterns = _this$asProps.patterns, duration = _this$asProps.duration;
-      var yScaleDomain = scale === null || scale === void 0 || (_scale$ = scale[1]) === null || _scale$ === void 0 || (_scale$$domain = _scale$.domain) === null || _scale$$domain === void 0 ? void 0 : _scale$$domain.call(_scale$);
-      if (yScaleDomain !== null && yScaleDomain !== void 0 && yScaleDomain.length && data !== null && data !== void 0 && data.length) {
-        this.dataHintsHandler.setPointsDensity(data.length / width, Math.abs(yScaleDomain[1] - yScaleDomain[0]) / height);
-      }
-      return {
-        $rootProps: {
-          size: [width, height],
-          data,
-          locale,
-          scale,
-          eventEmitter: this.eventEmitter,
-          rootRef: this.rootRef,
-          dataHintsHandler: this.dataHintsHandler,
-          resolveColor,
-          patterns,
-          duration,
-          plotId: this.plotId
-        }
-      };
+  setContext() {
+    var _a, _b;
+    const {
+      scale,
+      data,
+      width,
+      height,
+      locale,
+      resolveColor,
+      patterns,
+      duration
+    } = this.asProps;
+    const yScaleDomain = (_b = (_a = scale == null ? void 0 : scale[1]) == null ? void 0 : _a.domain) == null ? void 0 : _b.call(_a);
+    if ((yScaleDomain == null ? void 0 : yScaleDomain.length) && (data == null ? void 0 : data.length)) {
+      this.dataHintsHandler.setPointsDensity(data.length / width, Math.abs(yScaleDomain[1] - yScaleDomain[0]) / height);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref2;
-      var SPlot = Box;
-      var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, width = _this$asProps2.width, height = _this$asProps2.height, Children = _this$asProps2.Children, data = _this$asProps2.data, a11yAltTextConfig = _this$asProps2.a11yAltTextConfig, label = _this$asProps2.label, locale = _this$asProps2.locale, getI18nText = _this$asProps2.getI18nText;
-      if (!width || !height) return null;
-      var ariaLabel = label !== null && label !== void 0 ? label : getI18nText("d3Chart.Plot:aria-label");
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SPlot, _ref2.cn("SPlot", _objectSpread({}, assignProps({
+    return {
+      $rootProps: {
+        size: [width, height],
+        data,
+        locale,
+        scale,
+        eventEmitter: this.eventEmitter,
+        rootRef: this.rootRef,
+        dataHintsHandler: this.dataHintsHandler,
+        resolveColor,
+        patterns,
+        duration,
+        plotId: this.plotId
+      }
+    };
+  }
+  render() {
+    var _ref = this.asProps, _ref2;
+    const SPlot = Box;
+    const {
+      styles,
+      width,
+      height,
+      Children,
+      data,
+      a11yAltTextConfig,
+      label,
+      locale,
+      getI18nText
+    } = this.asProps;
+    if (!width || !height) return null;
+    const ariaLabel = label ?? getI18nText("d3Chart.Plot:aria-label");
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SPlot, _ref2.cn("SPlot", {
+      ...assignProps({
         "tag": "svg",
         "__excludeProps": ["data", "scale"],
         "ref": this.rootRef,
         "onMouseMove": this.handlerMouseMove,
         "onMouseLeave": this.handlerMouseLeave,
         "aria-label": ariaLabel,
-        "tabIndex": 0,
         "data-plot-id": this.plotId
-      }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})), /* @__PURE__ */ React.createElement("foreignObject", _ref2.cn("foreignObject", {
-        "width": "100%",
-        "height": "100%",
-        "data-aria-only": true
-      }), /* @__PURE__ */ React.createElement(PlotA11yModule, _ref2.cn("PlotA11yModule", {
-        "id": this.plotId,
-        "data": data,
-        "plotLabel": label,
-        "locale": locale,
-        "plotRef": this.rootRef,
-        "hints": this.dataStructureHints,
-        "config": a11yAltTextConfig
-      }))));
-    }
-  }]);
-})(Component);
+      }, _ref)
+    }), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})), /* @__PURE__ */ React.createElement("foreignObject", _ref2.cn("foreignObject", {
+      "width": "100%",
+      "height": "100%",
+      "data-aria-only": true
+    }), /* @__PURE__ */ React.createElement(PlotA11yModule, _ref2.cn("PlotA11yModule", {
+      "id": this.plotId,
+      "payload": data,
+      "plotLabel": label,
+      "locale": locale,
+      "plotRef": this.rootRef,
+      "hints": this.dataStructureHints,
+      "config": a11yAltTextConfig
+    }))));
+  }
+}
 _defineProperty(PlotRoot, "displayName", "Plot");
 _defineProperty(PlotRoot, "style", style);
-_defineProperty(PlotRoot, "defaultProps", function() {
-  return {
-    width: 0,
-    height: 0
-  };
-});
-_defineProperty(PlotRoot, "enhance", [keyboardFocusEnhance(), resolveColorEnhance(), i18nEnhance(localizedMessages)]);
+_defineProperty(PlotRoot, "defaultProps", () => ({
+  width: 0,
+  height: 0
+}));
+_defineProperty(PlotRoot, "enhance", [resolveColorEnhance(), i18nEnhance(localizedMessages)]);
 const Plot = createComponent(PlotRoot);
 export {
   Plot as default