@oliasoft-open-source/charts-library 4.3.11 → 4.3.12

package/dist/index.js

@@ -11,7 +11,7 @@ import React__default, { forwardRef, useRef, useEffect, createContext as createC
 import { produce } from "immer";
 import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
 import cx from "classnames";
-import { Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Portal } from "@oliasoft-open-source/react-ui-library";
+import { Portal, Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer } from "@oliasoft-open-source/react-ui-library";
 import { isEmpty, isArray as isArray$2, some, has, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, isNil, map as map$3, find, get as get$1 } from "lodash";
 import { roundNumberToPrecision } from "@oliasoft-open-source/units/dist/rounding/rounding";
 /*!
@@ -22784,6 +22784,15 @@ const initialState = ({ options, persistenceId }) => {
     initialAxesRanges: []
   };
 };
+const ControlsPortal = ({
+  children,
+  controlsPortalId
+}) => {
+  if (controlsPortalId) {
+    return /* @__PURE__ */ jsx(Portal, { id: controlsPortalId, children });
+  }
+  return children;
+};
 const SvgLineOnly = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 12 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props }, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { d: "m0 0h12v12h-12z" })), /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m.5 6.5v-1h11v1c-4.16104 0-6.63549 0-11 0z" })));
 const SvgPointOnly = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 12 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("circle", { cx: 6, cy: 6, r: 2 }));
 const SvgLineAndPoint = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 12 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props }, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { d: "m0 0h12v12h-12z" })), /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m7.937 6.5c-.11122.42912-.36179.80916-.71237 1.08047-.35058.2713-.78133.4185-1.22463.4185s-.87405-.1472-1.22463-.4185c-.35058-.27131-.60115-.65135-.71237-1.08047h-3.563v-1h3.563c.11122-.42912.36179-.80916.71237-1.08046s.78133-.41851 1.22463-.41851.87405.14721 1.22463.41851.60115.65134.71237 1.08046h3.563v1z" })));
@@ -24449,15 +24458,6 @@ const AxesOptions = (optionsPopover) => {
     }
   );
 };
-const ControlsPortal = ({
-  children,
-  controlsPortalId
-}) => {
-  if (controlsPortalId && document.getElementById(controlsPortalId)) {
-    return /* @__PURE__ */ jsx(Portal, { id: controlsPortalId, children });
-  }
-  return children;
-};
 const Controls = ({
   headerComponent,
   subheaderComponent,
@@ -40062,6 +40062,7 @@ const getDefaultProps$1 = (props) => {
   const options = (chart2 == null ? void 0 : chart2.options) || {};
   return {
     testId: (chart2 == null ? void 0 : chart2.testId) ?? "",
+    controlsPortalId: (chart2 == null ? void 0 : chart2.controlsPortalId) ?? "",
     data: chart2 == null ? void 0 : chart2.data,
     options: {
       title: (options == null ? void 0 : options.title) || "",
@@ -40103,7 +40104,7 @@ const BarChart = (props) => {
   const chartRef = useRef(null);
   const chart2 = getDefaultProps$1(props);
   const { translations, languageKey } = getConfig();
-  const { options, testId } = chart2;
+  const { options, testId, controlsPortalId } = chart2;
   const { chartStyling, graph } = options;
   const { generatedDatasets } = useBarChartConfig(chartRef, chart2);
   const barChartOptions = useBarChartOptions({ chart: chart2, chartRef });
@@ -40118,7 +40119,7 @@ const BarChart = (props) => {
       },
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles$1.actions, children: /* @__PURE__ */ jsx(Tooltip$2, { text: translations.downloadAsPNG, placement: "bottom-end", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId, children: /* @__PURE__ */ jsx("div", { className: styles$1.actions, children: /* @__PURE__ */ jsx(Tooltip$2, { text: translations.downloadAsPNG, placement: "bottom-end", children: /* @__PURE__ */ jsx(
           Button,
           {
             small: true,
@@ -40128,7 +40129,7 @@ const BarChart = (props) => {
             icon: "download",
             onClick: () => downloadPgn(chartRef)
           }
-        ) }) }),
+        ) }) }) }),
         /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsxs("div", { className: styles$1.canvas, id: "canvas", children: [
           /* @__PURE__ */ jsx(
             Bar,