@oliasoft-open-source/charts-library 3.2.1 → 3.2.3-beta-1

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";
 /*!
@@ -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: {
@@ -32844,16 +32862,17 @@ const formatAxisLabelNumbers = (tickValue, ticks, locale = "en-gb") => {
       Math.abs(ticks[0].value),
       Math.abs(ticks[ticks.length - 1].value)
     );
-    if (maxTick < 1e-4 || maxTick > 1e15) {
+    if (maxTick < 1e-4 || maxTick > 1e7) {
       notation = "scientific";
     }
     delta = calculateDelta(tickValue, ticks);
   }
   const logDelta = Math.log10(Math.abs(delta));
   const numDecimal = isNaN(logDelta) ? 1 : Math.max(Math.min(-1 * Math.floor(logDelta), 20), 0);
+  const roundScientificCoefficient = numDecimal === 0 ? 1 : numDecimal;
   return displayNumber(round$2(tickValue, numDecimal), {
     scientific: notation === "scientific",
-    roundScientificCoefficientToNDecimals: numDecimal
+    roundScientificCoefficient
   });
 };
 const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
@@ -33776,7 +33795,8 @@ const LineChart = (props) => {
     data: { datasets },
     options,
     testId,
-    persistenceId
+    persistenceId,
+    controlsPortalId
   } = chart2;
   const { annotations, axes, chartStyling, graph } = options;
   const [state, dispatch] = useReducer(
@@ -33835,7 +33855,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(