@oliasoft-open-source/charts-library 4.8.0-beta-6 → 4.8.0-beta-8

package/dist/index.js

@@ -22856,6 +22856,18 @@ const setDefaultTheme = () => {
   defaults$2.color = DEFAULT_COLOR;
   defaults$2.borderColor = BORDER_COLOR;
 };
+const isNilOrEmpty = (value) => {
+  if (value === null || value === void 0 || value === "") {
+    return true;
+  }
+  if (Array.isArray(value) && value.length === 0) {
+    return true;
+  }
+  if (typeof value === "object" && Object.keys(value).length === 0) {
+    return true;
+  }
+  return false;
+};
 const isLessThanMax = (value, max) => {
   return value === void 0 || max === void 0 || Number(value) < Number(max);
 };
@@ -22875,6 +22887,10 @@ const generateKey = (values) => {
   return key;
 };
 const isPrimitiveValue = (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null;
+const isRangeValid = (r2) => {
+  if (!r2) return false;
+  return Object.values(r2).some((value) => !isNilOrEmpty(value));
+};
 const getChartStateFromStorage = (persistenceId) => {
   if (!persistenceId) return null;
   const chartStateKey = `line-chart-state-${persistenceId}`;
@@ -22885,6 +22901,37 @@ const getChartStateFromStorage = (persistenceId) => {
   }
   return null;
 };
+const removeExpiredChartStates = (maxAgeInHours = 72) => {
+  const currentTime = (/* @__PURE__ */ new Date()).getTime();
+  const maxAgeInMilliseconds = maxAgeInHours * 60 * 60 * 1e3;
+  for (let i2 = 0; i2 < localStorage.length; i2++) {
+    const key = localStorage.key(i2);
+    if (key == null ? void 0 : key.includes("line-chart-state-")) {
+      const chartStateObjectJSON = localStorage.getItem(key);
+      if (chartStateObjectJSON) {
+        const chartStateObject = JSON.parse(chartStateObjectJSON);
+        const storedTime = chartStateObject.timestamp;
+        if (storedTime) {
+          const ageInMilliseconds = currentTime - storedTime;
+          if (ageInMilliseconds > maxAgeInMilliseconds) {
+            localStorage.removeItem(key);
+          }
+        }
+      }
+    }
+  }
+};
+const storeChartStateInStorage = (state, persistenceId) => {
+  if (!persistenceId) return;
+  const currentTime = (/* @__PURE__ */ new Date()).getTime();
+  const chartStateKey = `line-chart-state-${persistenceId}`;
+  const chartStateObject = {
+    state,
+    timestamp: currentTime
+  };
+  localStorage.setItem(chartStateKey, JSON.stringify(chartStateObject));
+  removeExpiredChartStates();
+};
 const initialState = ({ options, persistenceId }) => {
   const {
     additionalAxesOptions: { range: customAxesRange = {} },
@@ -26064,6 +26111,122 @@ const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
     ];
   }, [handleDoubleClick]);
 };
+const useToggleCustomLegendVisibility = (memoState, memoOptions) => {
+  var _a2, _b2;
+  useEffect(() => {
+    var _a3, _b3;
+    if ((_b3 = (_a3 = memoOptions == null ? void 0 : memoOptions.legend) == null ? void 0 : _a3.customLegend) == null ? void 0 : _b3.customLegendPlugin) {
+      const parent = document.getElementById(
+        memoOptions.legend.customLegend.customLegendContainerID
+      );
+      if (parent !== null) {
+        parent.style.visibility = memoState.legendEnabled ? "visible" : "hidden";
+      }
+    }
+  }, [
+    (_b2 = (_a2 = memoOptions == null ? void 0 : memoOptions.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendPlugin,
+    memoState.legendEnabled
+  ]);
+};
+const useStoreChartStateInStorage = (memoState, persistenceId) => {
+  useEffect(() => {
+    storeChartStateInStorage(memoState, persistenceId);
+  }, [
+    memoState.panEnabled,
+    memoState.lineEnabled,
+    memoState.pointsEnabled,
+    memoState.legendEnabled,
+    memoState.enableDragPoints,
+    memoState.zoomEnabled
+  ]);
+};
+const useUpdateAxesRanges = ({
+  chartRef,
+  range,
+  state,
+  dispatch,
+  annotationsData
+}) => {
+  const prevAxes = useRef(state.axes);
+  useEffect(() => {
+    if (range && isRangeValid(range)) {
+      const newAxes = Object.entries(range).map(([key, { min, max }]) => {
+        const { min: minFromData = 0, max: maxFromData = 0 } = getAxisRangeByType(chartRef, key, annotationsData) ?? {};
+        return {
+          id: key,
+          min: min ?? minFromData,
+          max: max ?? maxFromData
+        };
+      });
+      const mergedAxes = [...prevAxes.current ?? []].map((axis) => {
+        const newAxis = newAxes.find((a2) => a2.id === axis.id);
+        return newAxis ? { ...axis, ...newAxis } : axis;
+      });
+      if (!isEqual(mergedAxes, prevAxes.current)) {
+        dispatch({
+          type: UPDATE_AXES_RANGES,
+          payload: { axes: mergedAxes }
+        });
+        prevAxes.current = mergedAxes;
+      }
+    }
+  }, [range]);
+};
+const useSaveInitialAxesRanges = (chartRef, dispatch, generatedDatasets) => {
+  var _a2;
+  const prevDatasets = useRef(null);
+  useEffect(() => {
+    var _a3, _b2;
+    if (((_a3 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a3.scales) && !isEqual(prevDatasets.current, generatedDatasets)) {
+      const scales = ((_b2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _b2.scales) ?? {};
+      const initialAxesRanges = Object.entries(scales).map(
+        ([id, { min, max, _range: range }]) => ({
+          id,
+          min: (range == null ? void 0 : range.min) ?? min,
+          max: (range == null ? void 0 : range.max) ?? max
+        })
+      );
+      dispatch({
+        type: SAVE_INITIAL_AXES_RANGES,
+        payload: { initialAxesRanges }
+      });
+      prevDatasets.current = generatedDatasets;
+    }
+  }, [(_a2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a2.scales, generatedDatasets]);
+};
+const useChartState = ({
+  chartRef,
+  options,
+  state,
+  dispatch,
+  persistenceId,
+  generatedDatasets
+}) => {
+  useEffect(() => {
+    return () => {
+      if (chartRef == null ? void 0 : chartRef.current) {
+        const chart2 = chartRef == null ? void 0 : chartRef.current;
+        chart2 == null ? void 0 : chart2.destroy();
+      }
+    };
+  }, []);
+  const memoState = useMemo(() => state, [state]);
+  const memoOptions = useMemo(() => options, [options]);
+  const {
+    additionalAxesOptions: { range = void 0 },
+    annotations: { annotationsData = [] } = {}
+  } = memoOptions;
+  useStoreChartStateInStorage(memoState, persistenceId);
+  useToggleCustomLegendVisibility(memoState, memoOptions);
+  useUpdateAxesRanges({
+    range,
+    state: memoState,
+    dispatch,
+    chartRef,
+    annotationsData
+  });
+  useSaveInitialAxesRanges(chartRef, dispatch, generatedDatasets);
+};
 const WORD_SEPARATOR = " ";
 const SEMI_TRANSPARENT = "rgba(0, 0, 0, 0.5)";
 const getWords = (text) => {
@@ -27145,19 +27308,16 @@ const LineChart = (props) => {
     initialState
   );
   const generatedDatasets = useMemo(() => {
-    const startTimeStamp = performance.now();
-    const result = generateLineChartDatasets(
-      datasets,
-      state,
-      options,
-      translations
-    );
-    const endTimeStamp = performance.now();
-    console.log(
-      `generateLineChartDatasets execution time: ${(endTimeStamp - startTimeStamp).toFixed(5)} ms`
-    );
-    return result;
+    return generateLineChartDatasets(datasets, state, options, translations);
   }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
+  useChartState({
+    chartRef,
+    options,
+    state,
+    dispatch,
+    persistenceId,
+    generatedDatasets
+  });
   const { resetZoom: resetZoom2, handleKeyDown, handleKeyUp } = useChartFunctions({
     chartRef,
     state,