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

package/dist/index.js

@@ -22856,18 +22856,6 @@ 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);
 };
@@ -22887,10 +22875,6 @@ 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}`;
@@ -22901,37 +22885,6 @@ 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 = {} },
@@ -25074,8 +25027,7 @@ var CUSTOM_OPTION = /* @__PURE__ */ ((CUSTOM_OPTION2) => {
   return CUSTOM_OPTION2;
 })(CUSTOM_OPTION || {});
 const generateLineChartDatasets = (datasets, state, options, { label }) => {
-  var _a2, _b2;
-  const copyDataset = datasets ?? [];
+  const copyDataset = [...datasets ?? []];
   const { annotations, graph } = options ?? {};
   const {
     controlAnnotation,
@@ -25083,14 +25035,12 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
     annotationsData = []
   } = annotations ?? {};
   if (controlAnnotation && showAnnotations) {
-    let index2 = 0;
-    while (index2 < annotationsData.length) {
-      const ann = annotationsData[index2];
+    const annotationDatasets = annotationsData.map((ann, index2) => {
       const { type, ...annotation2 } = ann;
       const color2 = annotation2.color ?? COLORS[index2];
       const borderDash = ANNOTATION_DASH;
       const borderWidth = BORDER_WIDTH.INITIAL;
-      copyDataset.push({
+      return {
         ...annotation2,
         isAnnotation: true,
         annotationType: type,
@@ -25102,14 +25052,12 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
         borderDash,
         borderWidth,
         data: [{}]
-      });
-      index2++;
-    }
+      };
+    });
+    copyDataset.push(...annotationDatasets);
   }
-  const result = new Array(copyDataset.length);
-  let i2 = 0;
-  while (i2 < copyDataset.length) {
-    const line = copyDataset[i2];
+  return copyDataset == null ? void 0 : copyDataset.map((line, i2) => {
+    var _a2, _b2;
     const {
       formation,
       data = [],
@@ -25136,9 +25084,9 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
         data[2].x = Math.min(axesMax, endPoint.x);
       }
     }
-    const filteredData = (data == null ? void 0 : data.length) ? data == null ? void 0 : data.filter(Boolean) : [];
     const hasCustomOpt = checkCustomOption(line, CUSTOM_OPTION);
-    const isSinglePoint = filteredData.length === 1;
+    const filteredData = data.filter(Boolean) || [];
+    const isSinglePoint = (filteredData == null ? void 0 : filteredData.length) === 1;
     let pointState, lineState;
     if (customShowPoints !== void 0) {
       pointState = customShowPoints;
@@ -25154,19 +25102,17 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
     } else {
       lineState = lineEnabled;
     }
-    const parsedPointRadius = typeof pointRadiusProp === "string" ? parseFloat(pointRadiusProp) : pointRadiusProp;
-    const linePointRadius = parsedPointRadius || DEFAULT_POINT_RADIUS;
-    const parsedHoverRadius = typeof pointHoverRadius === "string" ? parseFloat(pointHoverRadius) : pointHoverRadius;
-    const hoverRadius = parsedHoverRadius || DEFAULT_HOVER_RADIUS;
+    const linePointRadius = parseFloat(pointRadiusProp) || DEFAULT_POINT_RADIUS;
+    const hoverRadius = parseFloat(pointHoverRadius) || DEFAULT_HOVER_RADIUS;
     const indexedColor = COLORS[i2];
-    result[i2] = {
+    return {
       ...line,
       label: (line == null ? void 0 : line.label) ?? `${label} ${i2 + 1}`,
       data: filteredData,
       showLine: lineState,
       lineTension: (line == null ? void 0 : line.lineTension) ?? lineTension,
       spanGaps,
-      borderWidth: (typeof borderWidth === "string" ? parseFloat(borderWidth) : borderWidth) || DEFAULT_BORDER_WIDTH,
+      borderWidth: parseFloat(borderWidth) || DEFAULT_BORDER_WIDTH,
       borderDash: borderDash || [],
       borderJoinStyle: BORDER_JOIN_STYLE,
       borderColor: borderColor ?? indexedColor ?? generateRandomColor(COLORS),
@@ -25177,9 +25123,7 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       pointHitRadius: (line == null ? void 0 : line.pointHitRadius) ?? hoverRadius,
       ...hasCustomOpt ? { hasCustomOpt } : {}
     };
-    i2++;
-  }
-  return result;
+  });
 };
 const getAnnotationsData = (data) => {
   return data == null ? void 0 : data.reduce((acc, obj) => {
@@ -26042,6 +25986,11 @@ const useChartOptions = ({
     chartAreaBorder: {
       borderColor: BORDER_COLOR
     },
+    decimation: {
+      enabled: true,
+      algorithm: "lttb",
+      samples: 200
+    },
     chartAreaText: {
       showLabel,
       text,
@@ -26115,122 +26064,6 @@ 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) => {
@@ -27325,14 +27158,6 @@ const LineChart = (props) => {
     );
     return result;
   }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
-  useChartState({
-    chartRef,
-    options,
-    state,
-    dispatch,
-    persistenceId,
-    generatedDatasets
-  });
   const { resetZoom: resetZoom2, handleKeyDown, handleKeyUp } = useChartFunctions({
     chartRef,
     state,