@oliasoft-open-source/charts-library 3.6.3 → 3.6.5-beta-1

package/dist/index.js

@@ -11,7 +11,7 @@ import { round as round$2, displayNumber, isCloseTo, roundByMagnitude, toNum } f
 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, Portal } from "@oliasoft-open-source/react-ui-library";
-import { debounce as debounce$3, isEqual } from "lodash";
+import { isEmpty, isArray as isArray$2, some, has, debounce as debounce$3, isEqual } from "lodash";
 import { roundNumberToPrecision } from "@oliasoft-open-source/units/dist/rounding/rounding";
 /*!
  * @kurkle/color v0.3.2
@@ -22877,7 +22877,8 @@ const LineOptions = ({
   onToggleLine,
   onTogglePoints,
   pointsEnabled,
-  translations
+  translations,
+  hasCustomOpt
 }) => {
   const options = [
     {
@@ -22907,17 +22908,26 @@ const LineOptions = ({
     }
   ];
   const selectedOption = options.find((option) => option.selected);
-  return /* @__PURE__ */ jsx(Tooltip$2, { text: selectedOption == null ? void 0 : selectedOption.label, placement: "bottom", children: /* @__PURE__ */ jsx(
-    Button,
+  return /* @__PURE__ */ jsx(
+    Tooltip$2,
     {
-      small: true,
-      basic: true,
-      colored: "muted",
-      round: true,
-      icon: selectedOption == null ? void 0 : selectedOption.icon,
-      onClick: selectedOption == null ? void 0 : selectedOption.onClick
+      text: selectedOption == null ? void 0 : selectedOption.label,
+      placement: "bottom",
+      enabled: !hasCustomOpt,
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          small: true,
+          basic: true,
+          colored: "muted",
+          round: true,
+          icon: selectedOption == null ? void 0 : selectedOption.icon,
+          onClick: selectedOption == null ? void 0 : selectedOption.onClick,
+          disabled: hasCustomOpt
+        }
+      )
     }
-  ) });
+  );
 };
 function TbHandStop(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" } }, { "tag": "path", "attr": { "d": "M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" } }, { "tag": "path", "attr": { "d": "M14 5.5a1.5 1.5 0 0 1 3 0v6.5" } }, { "tag": "path", "attr": { "d": "M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" } }] })(props);
@@ -23994,7 +24004,6 @@ const useChartFunctions = ({
       onHover: onPointHover,
       onUnhover: onPointUnhover
     },
-    additionalAxesOptions,
     axes
   } = options;
   const legendClick = useCallback(
@@ -24101,18 +24110,6 @@ const useChartFunctions = ({
     },
     [chartRef]
   );
-  const controlsAxes = state.axes.map((axis, i2) => {
-    var _a2, _b2, _c2, _d2;
-    const axisType = i2 ? AxisType.Y : AxisType.X;
-    const min = axis.min ?? ((_b2 = (_a2 = additionalAxesOptions == null ? void 0 : additionalAxesOptions.range) == null ? void 0 : _a2[axisType]) == null ? void 0 : _b2.min);
-    const max = axis.max ?? ((_d2 = (_c2 = additionalAxesOptions == null ? void 0 : additionalAxesOptions.range) == null ? void 0 : _c2[axisType]) == null ? void 0 : _d2.max);
-    return {
-      ...axis,
-      // only add min and max properties if they are defined:
-      ...min ? { min } : {},
-      ...max ? { max } : {}
-    };
-  });
   const getControlsAxesLabels = useCallback(
     (propsAxes) => {
       var _a2;
@@ -24170,7 +24167,6 @@ const useChartFunctions = ({
     handleDownload,
     handleKeyDown,
     handleKeyUp,
-    controlsAxes,
     controlsAxesLabels: getControlsAxesLabels(axes),
     updateAxesRangesFromChart,
     onResetAxes,
@@ -24187,7 +24183,7 @@ const initializeFormState = ({
   initialAxesRanges,
   axes = []
 }) => {
-  return (initialAxesRanges == null ? void 0 : initialAxesRanges.map((initialAxisRange) => {
+  const res = (initialAxesRanges == null ? void 0 : initialAxesRanges.map((initialAxisRange) => {
     const currentAxisRange = axes.find((a2) => a2.id === initialAxisRange.id);
     return {
       id: initialAxisRange.id,
@@ -24196,6 +24192,8 @@ const initializeFormState = ({
       unit: currentAxisRange == null ? void 0 : currentAxisRange.unit
     };
   })) || [];
+  console.log(res);
+  return res;
 };
 const isEmptyString = (value) => value === "";
 const createErrorMessages = (value, compareTo, type) => {
@@ -24263,9 +24261,9 @@ const AxesOptionsPopover = (optionsPopover) => {
     controlsAxesLabels,
     onUpdateAxes,
     onResetAxes,
-    close,
     depthType,
-    translations
+    translations,
+    close
   } = optionsPopover;
   const [depthTypeState, setDepthTypeState] = useState(
     depthType == null ? void 0 : depthType.selectedDepthType
@@ -24278,6 +24276,7 @@ const AxesOptionsPopover = (optionsPopover) => {
     },
     initializeFormState
   );
+  console.log(formState);
   const { errors, valid } = validateAxes(formState);
   const onEditValue = ({ name, value, id }) => {
     dispatch({
@@ -24489,6 +24488,27 @@ const ControlsPortal = ({
   }
   return children;
 };
+const checkCustomOption = (data, customOptions) => {
+  if (isEmpty(data) || isEmpty(customOptions))
+    return false;
+  const checkOption = (dataset) => {
+    if (typeof customOptions === "string") {
+      return has(dataset, customOptions);
+    } else if (isArray$2(customOptions)) {
+      return some(customOptions, (option) => has(dataset, option));
+    } else {
+      return some(
+        Object.values(customOptions),
+        (option) => has(dataset, option)
+      );
+    }
+  };
+  if (isArray$2(data)) {
+    return some(data, (dataset) => checkOption(dataset));
+  } else {
+    return checkOption(data);
+  }
+};
 const Controls = ({
   headerComponent,
   subheaderComponent,
@@ -24520,19 +24540,14 @@ const Controls = ({
     onToggleDragPoints,
     onDisableDragOptions
   } = useToggleHandlers(dispatch);
-  const {
-    handleDownload,
-    controlsAxes,
-    controlsAxesLabels,
-    onResetAxes,
-    onUpdateAxes
-  } = useChartFunctions({
+  const { handleDownload, controlsAxesLabels, onResetAxes, onUpdateAxes } = useChartFunctions({
     chartRef,
     state,
     options,
     dispatch,
     generatedDatasets
   });
+  const hasCustomOpt = checkCustomOption(generatedDatasets, "hasCustomOpt");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles$3.controls, children: [
       !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
@@ -24543,7 +24558,7 @@ const Controls = ({
             AxesOptions,
             {
               initialAxesRanges,
-              axes: controlsAxes,
+              axes: state.axes,
               controlsAxesLabels,
               onUpdateAxes,
               onResetAxes,
@@ -24558,7 +24573,8 @@ const Controls = ({
               pointsEnabled,
               onToggleLine,
               onTogglePoints,
-              translations
+              translations,
+              hasCustomOpt
             }
           ),
           /* @__PURE__ */ jsx(
@@ -25135,6 +25151,11 @@ const INIT_KEYS = {
 };
 const LOWER_BOUND = 1e-4;
 const UPPER_BOUND = 1e7;
+var CUSTOM_OPTION = /* @__PURE__ */ ((CUSTOM_OPTION2) => {
+  CUSTOM_OPTION2["showLine"] = "showLine";
+  CUSTOM_OPTION2["showPoints"] = "showPoints";
+  return CUSTOM_OPTION2;
+})(CUSTOM_OPTION || {});
 const generateLineChartDatasets = (datasets, state, options, { label }) => {
   const copyDataset = [...datasets];
   const { annotations, graph } = options;
@@ -25176,7 +25197,9 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       borderColor,
       backgroundColor,
       pointBackgroundColor,
-      borderDash
+      borderDash,
+      showPoints = true,
+      showLine
     } = line ?? {};
     const { lineEnabled, pointsEnabled, axes = [] } = state ?? {};
     const { lineTension, spanGaps } = graph ?? {};
@@ -25194,14 +25217,15 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
     const filteredData = data.filter(Boolean) || [];
     const isSinglePoint = (filteredData == null ? void 0 : filteredData.length) === 1;
     const linePointRadius = parseFloat(pointRadiusProp) || DEFAULT_POINT_RADIUS;
-    const pointRadius = pointsEnabled || isSinglePoint ? linePointRadius : 0;
+    const pointRadius = (pointsEnabled || isSinglePoint) && showPoints ? linePointRadius : 0;
     const hoverRadius = parseFloat(pointHoverRadius) || DEFAULT_HOVER_RADIUS;
     const indexedColor = COLORS[i2];
+    const hasCustomOpt = checkCustomOption(line, CUSTOM_OPTION);
     return {
       ...line,
       label: line.label || `${label} ${i2 + 1}`,
       data: filteredData,
-      showLine: lineEnabled,
+      showLine: showLine ?? lineEnabled,
       lineTension,
       spanGaps,
       borderWidth: parseFloat(borderWidth) || DEFAULT_BORDER_WIDTH,
@@ -25212,7 +25236,8 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       pointBackgroundColor: pointBackgroundColor ?? indexedColor ?? generateRandomColor(COLORS),
       pointRadius,
       pointHoverRadius: hoverRadius,
-      pointHitRadius: line.pointHitRadius ?? hoverRadius
+      pointHitRadius: line.pointHitRadius ?? hoverRadius,
+      ...hasCustomOpt ? { hasCustomOpt } : {}
     };
   });
 };
@@ -25943,27 +25968,22 @@ const useUpdateAxesRanges = ({
     }
   }, [range]);
 };
-const useSaveInitialAxesRanges = (chartRef, axes, generatedDatasets, dispatch) => {
-  const prevGeneratedDatasets = useRef();
-  const saveInitialAxesRanges = useCallback(() => {
-    if (chartRef && !isEqual(generatedDatasets, prevGeneratedDatasets.current)) {
+const useSaveInitialAxesRanges = (chartRef, axes, dispatch) => {
+  useEffect(() => {
+    if (chartRef.current) {
       const initialAxesRanges = getAxesRangesFromChart(chartRef, axes);
+      console.log("initialAxesRanges", initialAxesRanges);
       dispatch({
         type: SAVE_INITIAL_AXES_RANGES,
         payload: { initialAxesRanges }
       });
-      prevGeneratedDatasets.current = generatedDatasets;
     }
-  }, [chartRef, generatedDatasets]);
-  useEffect(() => {
-    saveInitialAxesRanges();
-  }, [saveInitialAxesRanges, generatedDatasets]);
+  }, []);
 };
 const useChartState = ({
   chartRef,
   options,
   state,
-  generatedDatasets,
   dispatch,
   persistenceId
 }) => {
@@ -25983,7 +26003,7 @@ const useChartState = ({
     chartRef,
     annotationsData
   });
-  useSaveInitialAxesRanges(chartRef, axes, generatedDatasets, dispatch);
+  useSaveInitialAxesRanges(chartRef, axes, dispatch);
 };
 const WORD_SEPARATOR = " ";
 const SEMI_TRANSPARENT = "rgba(0, 0, 0, 0.5)";
@@ -26219,7 +26239,6 @@ const LineChart = (props) => {
     chartRef,
     options,
     state,
-    generatedDatasets,
     dispatch,
     persistenceId
   });