@oliasoft-open-source/charts-library 3.2.0 → 3.2.2

package/dist/index.js

@@ -10,7 +10,7 @@ import React, { forwardRef, useRef, useEffect, useMemo, useCallback, useState, u
 import { round as round$2, toNum, displayNumber, isCloseTo } from "@oliasoft-open-source/units";
 import cx from "classnames";
 import { produce } from "immer";
-import { 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 { 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 PropTypes from "prop-types";
 import { debounce as debounce$3, isEqual } from "lodash";
 /*!
@@ -31208,7 +31208,7 @@ const isGreaterThanMin = (value, min) => {
   return value === void 0 || min === void 0 || Number(value) > Number(min);
 };
 const generateAxisId = (axisType, index2 = 0, hasMultiAxes = false) => {
-  const i2 = hasMultiAxes ? index2 + 1 : "";
+  const i2 = hasMultiAxes && index2 !== 0 ? index2 + 1 : "";
   return `${axisType}${i2}`;
 };
 const getAxisTypeFromKey = (string) => {
@@ -32306,6 +32306,12 @@ AxesOptionsPopover.propTypes = {
     options: PropTypes.arrayOf(PropTypes.string)
   })
 };
+const ControlsPortal = ({ children, controlsPortalId }) => {
+  if (controlsPortalId && document.getElementById(controlsPortalId)) {
+    return /* @__PURE__ */ jsx(Portal, { id: controlsPortalId, children });
+  }
+  return children;
+};
 const Controls = ({
   props: { headerComponent, subheaderComponent, table: table2 },
   chartRef,
@@ -32313,7 +32319,8 @@ const Controls = ({
   options,
   dispatch,
   generatedDatasets,
-  translations
+  translations,
+  controlsPortalId
 }) => {
   const {
     enableDragPoints,
@@ -32353,7 +32360,7 @@ const Controls = ({
     /* @__PURE__ */ jsxs("div", { className: styles$2.controls, children: [
       !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
       headerComponent,
-      /* @__PURE__ */ jsxs("div", { className: styles$2.buttons, children: [
+      /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId, children: /* @__PURE__ */ jsxs("div", { className: styles$2.buttons, children: [
         !showTable && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             AxesOptions,
@@ -32385,17 +32392,24 @@ const Controls = ({
               translations
             }
           ),
-          /* @__PURE__ */ jsx(Tooltip$2, { text: translations.downloadAsPNG, placement: "bottom-end", children: /* @__PURE__ */ jsx(
-            Button,
+          /* @__PURE__ */ jsx(
+            Tooltip$2,
             {
-              small: true,
-              basic: true,
-              colored: "muted",
-              round: true,
-              icon: /* @__PURE__ */ jsx(RiFileDownloadLine, {}),
-              onClick: handleDownload
+              text: translations.downloadAsPNG,
+              placement: "bottom-end",
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  small: true,
+                  basic: true,
+                  colored: "muted",
+                  round: true,
+                  icon: /* @__PURE__ */ jsx(RiFileDownloadLine, {}),
+                  onClick: handleDownload
+                }
+              )
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsx(
             DragOptions,
             {
@@ -32429,7 +32443,7 @@ const Controls = ({
             )
           }
         ) : null
-      ] })
+      ] }) })
     ] }),
     subheaderComponent
   ] });
@@ -32438,7 +32452,8 @@ Controls.defaultProps = {
   props: {
     headerComponent: null,
     subheaderComponent: null,
-    table: null
+    table: null,
+    controlsPortalId: null
   },
   state: {
     initialAxesRanges: []
@@ -32449,7 +32464,8 @@ Controls.propTypes = {
   props: PropTypes.shape({
     headerComponent: PropTypes.node,
     subheaderComponent: PropTypes.node,
-    table: PropTypes.node
+    table: PropTypes.node,
+    controlsPortalId: PropTypes.string
   }),
   chartRef: PropTypes.object.isRequired,
   state: PropTypes.shape({
@@ -32485,6 +32501,7 @@ const LineChartPropTypes = {
   table: PropTypes.node,
   chart: PropTypes.shape({
     persistenceId: PropTypes.string,
+    controlsPortalId: PropTypes.string,
     testId: PropTypes.string,
     data: PropTypes.object.isRequired,
     options: PropTypes.shape({
@@ -32648,6 +32665,7 @@ const getDefaultProps$2 = (props) => {
   props.chart.options.dragData = props.chart.options.dragData || {};
   const chart2 = {
     persistenceId: props.chart.persistenceId ?? "",
+    controlsPortalId: props.chart.controlsPortalId ?? null,
     testId: props.chart.testId ?? null,
     data: props.chart.data,
     options: {
@@ -33167,11 +33185,7 @@ const generateAnnotations = (options, state) => {
     if (!((_a2 = state == null ? void 0 : state.showAnnotationLineIndex) == null ? void 0 : _a2.includes(i2))) {
       return { ...acc };
     }
-    const getScaleId = () => {
-      var _a3;
-      const axisType = curr.annotationAxis;
-      return ((_a3 = options.axes[axisType]) == null ? void 0 : _a3.length) > 1 ? `${axisType}1` : axisType;
-    };
+    const scaleID = (curr == null ? void 0 : curr.annotationAxis) ?? void 0;
     const color2 = (curr == null ? void 0 : curr.color) || COLORS[i2];
     const type = (curr == null ? void 0 : curr.type) || "line";
     const adjustScaleRange2 = curr == null ? void 0 : curr.adjustScaleRange;
@@ -33201,7 +33215,7 @@ const generateAnnotations = (options, state) => {
     const annotation2 = {
       ...curr,
       id: `${curr == null ? void 0 : curr.label}-${curr == null ? void 0 : curr.value}-${i2}`,
-      scaleID: getScaleId(),
+      scaleID,
       label,
       backgroundColor: color2,
       borderColor,
@@ -33780,7 +33794,8 @@ const LineChart = (props) => {
     data: { datasets },
     options,
     testId,
-    persistenceId
+    persistenceId,
+    controlsPortalId
   } = chart2;
   const { annotations, axes, chartStyling, graph } = options;
   const [state, dispatch] = useReducer(
@@ -33839,7 +33854,8 @@ const LineChart = (props) => {
             options,
             dispatch,
             generatedDatasets,
-            translations
+            translations,
+            controlsPortalId
           }
         ),
         table2 && state.showTable ? /* @__PURE__ */ jsx("div", { className: styles$3.table, children: table2 }) : /* @__PURE__ */ jsx("div", { className: styles$3.canvas, children: /* @__PURE__ */ jsx(
@@ -34608,8 +34624,9 @@ const getBarChartAxes = (chart2, axisType) => {
     const color2 = curr.color || COLORS[i2] || generateRandomColor$1(COLORS);
     axisData.color = color2;
     axisData.position = curr.position || getAxisPosition(axisType, i2);
-    const axis = getBarChartAxis(chart2, axisType, axisData, i2);
-    return { ...acc, [axisType + (i2 + 1)]: axis };
+    const axis = getBarChartAxis(chart2, axisType, axisData);
+    const axisId = i2 === 0 ? axisType : `${axisType}${i2 + 1}`;
+    return { ...acc, [axisId]: axis };
   }, {});
   return axes;
 };