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

package/dist/index.js

@@ -6,10 +6,10 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { forwardRef, useRef, useEffect, createContext as createContext$2, memo, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext, useReducer } from "react";
 import { produce } from "immer";
-import { round as round$2, displayNumber, roundByMagnitude } from "@oliasoft-open-source/units";
+import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
 import cx from "classnames";
 import { Portal, Icon, Menu, Tooltip as Tooltip$2, Button, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Flex, Text } from "@oliasoft-open-source/react-ui-library";
-import { isEmpty, isArray as isArray$2, some, has, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, isNil, map as map$3, find, get as get$1, noop as noop$2 } from "lodash";
+import { isEmpty, isArray as isArray$2, some, has, isNil, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, map as map$3, find, get as get$1, noop as noop$2 } from "lodash";
 /*!
  * @kurkle/color v0.3.2
  * https://github.com/kurkle/color#readme
@@ -22723,6 +22723,8 @@ const ANIMATION_DURATION = {
 };
 const DEFAULT_CHART_NAME = "new_chart";
 const CUSTOM_LEGEND_PLUGIN_NAME = "htmlLegend";
+const DECIMAL_POINT_TOLERANCE = 9;
+const MAX_DECIMAL_DIFF = 1 / 10 ** DECIMAL_POINT_TOLERANCE;
 const GRADIENT_COLORS = [
   { offset: 0, color: "rgba(144,238,144,0.8)" },
   // Light green
@@ -22876,6 +22878,10 @@ const generateAxisId = (axisType, index2 = 0, hasMultiAxes = false) => {
   const i2 = hasMultiAxes && index2 !== 0 ? index2 + 1 : "";
   return `${axisType}${i2}`;
 };
+const getAxisTypeFromKey = (string) => {
+  var _a2;
+  return ((_a2 = string == null ? void 0 : string.match(/[^0-9/]+/gi)) == null ? void 0 : _a2[0]) ?? "";
+};
 const generateKey = (values) => {
   const key = values.join("");
   return key;
@@ -25068,7 +25074,8 @@ var CUSTOM_OPTION = /* @__PURE__ */ ((CUSTOM_OPTION2) => {
   return CUSTOM_OPTION2;
 })(CUSTOM_OPTION || {});
 const generateLineChartDatasets = (datasets, state, options, { label }) => {
-  const copyDataset = [...datasets ?? []];
+  var _a2, _b2;
+  const copyDataset = datasets ?? [];
   const { annotations, graph } = options ?? {};
   const {
     controlAnnotation,
@@ -25076,12 +25083,14 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
     annotationsData = []
   } = annotations ?? {};
   if (controlAnnotation && showAnnotations) {
-    const annotationDatasets = annotationsData.map((ann, index2) => {
+    let index2 = 0;
+    while (index2 < annotationsData.length) {
+      const ann = annotationsData[index2];
       const { type, ...annotation2 } = ann;
       const color2 = annotation2.color ?? COLORS[index2];
       const borderDash = ANNOTATION_DASH;
       const borderWidth = BORDER_WIDTH.INITIAL;
-      return {
+      copyDataset.push({
         ...annotation2,
         isAnnotation: true,
         annotationType: type,
@@ -25093,12 +25102,14 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
         borderDash,
         borderWidth,
         data: [{}]
-      };
-    });
-    copyDataset.push(...annotationDatasets);
+      });
+      index2++;
+    }
   }
-  return copyDataset == null ? void 0 : copyDataset.map((line, i2) => {
-    var _a2, _b2;
+  const result = new Array(copyDataset.length);
+  let i2 = 0;
+  while (i2 < copyDataset.length) {
+    const line = copyDataset[i2];
     const {
       formation,
       data = [],
@@ -25125,9 +25136,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 filteredData = data.filter(Boolean) || [];
-    const isSinglePoint = (filteredData == null ? void 0 : filteredData.length) === 1;
+    const isSinglePoint = filteredData.length === 1;
     let pointState, lineState;
     if (customShowPoints !== void 0) {
       pointState = customShowPoints;
@@ -25143,17 +25154,19 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
     } else {
       lineState = lineEnabled;
     }
-    const linePointRadius = parseFloat(pointRadiusProp) || DEFAULT_POINT_RADIUS;
-    const hoverRadius = parseFloat(pointHoverRadius) || DEFAULT_HOVER_RADIUS;
+    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 indexedColor = COLORS[i2];
-    return {
+    result[i2] = {
       ...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: parseFloat(borderWidth) || DEFAULT_BORDER_WIDTH,
+      borderWidth: (typeof borderWidth === "string" ? parseFloat(borderWidth) : borderWidth) || DEFAULT_BORDER_WIDTH,
       borderDash: borderDash || [],
       borderJoinStyle: BORDER_JOIN_STYLE,
       borderColor: borderColor ?? indexedColor ?? generateRandomColor(COLORS),
@@ -25164,7 +25177,32 @@ 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) => {
+    return {
+      ...acc,
+      [obj.annotationAxis]: [...acc[obj.annotationAxis] || [], +obj.value]
+    };
+  }, {});
+};
+const getAxisRangeByType = (chartRef, axesType, annotationsData) => {
+  if (!chartRef || !chartRef.current) return null;
+  const metasets = chartRef.current.getSortedVisibleDatasetMetas();
+  const annotDataByType = getAnnotationsData(annotationsData)[axesType] ?? [];
+  let allData = [];
+  metasets.forEach((metaset) => {
+    const data = metaset._parsed.map((parsedData) => parsedData[axesType]).filter((value) => value != null && !isNaN(value));
+    allData = allData.concat(data);
   });
+  allData = allData.concat(annotDataByType);
+  if (allData.length === 0) return null;
+  const min = Math.min(...allData);
+  const max = Math.max(...allData);
+  return { min, max };
 };
 const calculateDelta$1 = (tickValue, ticks) => {
   let delta = ticks.length > 3 ? ticks[2].value - ticks[1].value : ticks[1].value - ticks[0].value;
@@ -25272,9 +25310,142 @@ const getLineChartScales = (options, state) => {
     ...yAxes
   };
 };
-const autoScale = (options, state) => {
+const estimateDataSeriesHaveCloseValues = (generatedDatasets) => {
+  var _a2;
+  if (!Array.isArray(generatedDatasets) || !(generatedDatasets == null ? void 0 : generatedDatasets.length)) {
+    return false;
+  }
+  const axesFirstLast = generatedDatasets == null ? void 0 : generatedDatasets.reduce((acc, dataset) => {
+    var _a3, _b2, _c2, _d2;
+    const xAxisId = (dataset == null ? void 0 : dataset.xAxisID) ?? "defaultX";
+    const yAxisId = (dataset == null ? void 0 : dataset.yAxisID) ?? "defaultY";
+    const data = (dataset == null ? void 0 : dataset.data) ?? [];
+    if (data && (data == null ? void 0 : data.length)) {
+      const { x: xFirstCurrent, y: yFirstCurrent } = (data == null ? void 0 : data[0]) ?? {};
+      const { x: xLastCurrent = 0, y: yLastCurrent = 0 } = (data == null ? void 0 : data.at(-1)) ?? {};
+      const xFirstAcc = ((_a3 = acc == null ? void 0 : acc[xAxisId]) == null ? void 0 : _a3.xFirst) ?? xFirstCurrent;
+      const xLastAcc = ((_b2 = acc == null ? void 0 : acc[xAxisId]) == null ? void 0 : _b2.xLast) ?? xLastCurrent;
+      const yFirstAcc = ((_c2 = acc == null ? void 0 : acc[yAxisId]) == null ? void 0 : _c2.yFirst) ?? yFirstCurrent;
+      const yLastAcc = ((_d2 = acc == null ? void 0 : acc[yAxisId]) == null ? void 0 : _d2.yLast) ?? yLastCurrent;
+      const xFirst = Math.min(xFirstCurrent, xFirstAcc);
+      const xLast = Math.max(xLastCurrent, xLastAcc);
+      const yFirst = Math.min(yFirstCurrent, yFirstAcc);
+      const yLast = Math.max(yLastCurrent, yLastAcc);
+      acc = {
+        ...acc,
+        [xAxisId]: {
+          ...acc[xAxisId],
+          xFirst,
+          xLast
+        },
+        [yAxisId]: {
+          yFirst,
+          yLast
+        }
+      };
+    }
+    return acc;
+  }, {});
+  return (_a2 = Object.values(axesFirstLast)) == null ? void 0 : _a2.some(({ xFirst, xLast, yFirst, yLast }) => {
+    return isCloseTo(xFirst, xLast, { absoluteDiff: MAX_DECIMAL_DIFF }) || isCloseTo(yFirst, yLast, { absoluteDiff: MAX_DECIMAL_DIFF });
+  });
+};
+const whiteSpacePercentage = 0.05;
+const defaultRange = { min: -1, max: 1 };
+const getSuggestedAxisRange = ({
+  data,
+  beginAtZero = false,
+  autoAxisPadding = false
+}) => {
+  const dataMin = Math.min(
+    ...data.filter((v2) => v2 !== null && v2 !== void 0 && !isNaN(v2))
+  );
+  const dataMax = Math.max(
+    ...data.filter((v2) => v2 !== null && v2 !== void 0 && !isNaN(v2))
+  );
+  const isNegative = Math.sign(dataMin) === -1 || Math.sign(dataMax) === -1;
+  const isCloseToZeroWithTolerance = isCloseTo(dataMin, 0, { absoluteDiff: MAX_DECIMAL_DIFF }) && isCloseTo(dataMax, 0, { absoluteDiff: MAX_DECIMAL_DIFF });
+  if (!(data == null ? void 0 : data.length) || isCloseToZeroWithTolerance) {
+    return defaultRange;
+  }
+  if (isCloseTo(dataMin, dataMax, { absoluteDiff: MAX_DECIMAL_DIFF })) {
+    const point = dataMax;
+    const padding2 = point * whiteSpacePercentage;
+    const minAxisValue2 = beginAtZero && !isNegative ? 0 : point - padding2;
+    const maxAxisValue2 = beginAtZero && isNegative ? 0 : point + padding2;
+    const roundedMinAxisValue = round$2(maxAxisValue2, DECIMAL_POINT_TOLERANCE);
+    const roundedMaxAxisValue = round$2(minAxisValue2, DECIMAL_POINT_TOLERANCE);
+    return {
+      min: roundedMinAxisValue < 0 ? roundedMinAxisValue : roundedMaxAxisValue,
+      max: roundedMaxAxisValue < 0 ? roundedMaxAxisValue : roundedMinAxisValue
+    };
+  }
+  if (!autoAxisPadding) {
+    return {
+      min: void 0,
+      max: void 0
+    };
+  }
+  const rangeBeginAtZero = dataMin === 0 || dataMax === 0 || beginAtZero;
+  const positiveAndNegative = Math.sign(dataMin) === -1 && Math.sign(dataMax) === 1;
+  const range = Math.abs(dataMax - dataMin);
+  const padding = autoAxisPadding ? range * whiteSpacePercentage : 0;
+  const minAxisValue = !positiveAndNegative && rangeBeginAtZero && beginAtZero && !isNegative ? 0 : dataMin - padding;
+  const maxAxisValue = !positiveAndNegative && rangeBeginAtZero && beginAtZero && isNegative ? 0 : dataMax + padding;
+  return {
+    min: round$2(minAxisValue, DECIMAL_POINT_TOLERANCE),
+    max: round$2(maxAxisValue, DECIMAL_POINT_TOLERANCE)
+  };
+};
+const getAxesDataFromMetasets = (chartRef, scalesKeys, annotationsData) => {
+  var _a2;
+  if (!chartRef || !scalesKeys) return {};
+  const metasets = ((_a2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a2.getSortedVisibleDatasetMetas()) ?? [];
+  const annotData = getAnnotationsData(annotationsData);
+  return metasets && (scalesKeys == null ? void 0 : scalesKeys.reduce((acc, key) => {
+    const data = metasets.filter((dataset) => Object.values(dataset).includes(key)).flatMap((dataset) => dataset._parsed).map((parsedData) => parsedData[getAxisTypeFromKey(key)]).concat((annotData == null ? void 0 : annotData[key]) ?? []);
+    return {
+      ...acc,
+      [key]: [...new Set(data)]
+    };
+  }, {}));
+};
+const shouldCalculate = (min, max) => !isNil(min) || !isNil(max);
+const autoScale = (options, state, generatedDatasets, chartRef) => {
+  const {
+    additionalAxesOptions,
+    annotations: { annotationsData = [], controlAnnotation = false } = {}
+  } = options || {};
   const scales = getLineChartScales(options, state) || {};
-  return scales;
+  const datasets = controlAnnotation ? generatedDatasets.filter(({ isAnnotation }) => !isAnnotation) : generatedDatasets;
+  if (!(additionalAxesOptions == null ? void 0 : additionalAxesOptions.autoAxisPadding) && !estimateDataSeriesHaveCloseValues(datasets)) {
+    return scales;
+  }
+  const scalesKeys = Object.keys(scales) ?? [];
+  const data = getAxesDataFromMetasets(
+    chartRef,
+    scalesKeys,
+    annotationsData
+  );
+  const adjustedScales = data && (scalesKeys == null ? void 0 : scalesKeys.reduce((acc, key) => {
+    const scale = scales[key];
+    const { min: propMin = void 0, max: propMax = void 0 } = scale;
+    const { min: calcMin, max: calcMax } = getAxisRangeByType(chartRef, key, annotationsData) ?? {};
+    const { min: suggestedMin, max: suggestedMax } = getSuggestedAxisRange({
+      data: data[key],
+      beginAtZero: additionalAxesOptions == null ? void 0 : additionalAxesOptions.beginAtZero,
+      autoAxisPadding: additionalAxesOptions == null ? void 0 : additionalAxesOptions.autoAxisPadding
+    });
+    const res = {
+      [key]: {
+        ...scale,
+        min: propMin ?? (shouldCalculate(propMin, propMax) ? calcMin : suggestedMin),
+        max: propMax ?? (shouldCalculate(propMin, propMax) ? calcMax : suggestedMax)
+      }
+    };
+    return { ...acc, ...res };
+  }, {}));
+  return adjustedScales ?? scales;
 };
 const getCondition = (x2, y2, left2, right2, bottom2) => {
   const threshold = 100;
@@ -25824,7 +25995,7 @@ const useChartOptions = ({
   const datalabels = getLineChartDataLabels(options);
   const tooltip = getLineChartToolTips(options);
   const scales = useMemo(
-    () => autoScale(options, state),
+    () => autoScale(options, state, generatedDatasets, chartRef),
     [options, state, generatedDatasets, chartRef]
   );
   const dragData = useMemo(
@@ -25944,29 +26115,6 @@ const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
     ];
   }, [handleDoubleClick]);
 };
-const getAnnotationsData = (data) => {
-  return data == null ? void 0 : data.reduce((acc, obj) => {
-    return {
-      ...acc,
-      [obj.annotationAxis]: [...acc[obj.annotationAxis] || [], +obj.value]
-    };
-  }, {});
-};
-const getAxisRangeByType = (chartRef, axesType, annotationsData) => {
-  if (!chartRef || !chartRef.current) return null;
-  const metasets = chartRef.current.getSortedVisibleDatasetMetas();
-  const annotDataByType = getAnnotationsData(annotationsData)[axesType] ?? [];
-  let allData = [];
-  metasets.forEach((metaset) => {
-    const data = metaset._parsed.map((parsedData) => parsedData[axesType]).filter((value) => value != null && !isNaN(value));
-    allData = allData.concat(data);
-  });
-  allData = allData.concat(annotDataByType);
-  if (allData.length === 0) return null;
-  const min = Math.min(...allData);
-  const max = Math.max(...allData);
-  return { min, max };
-};
 const useToggleCustomLegendVisibility = (memoState, memoOptions) => {
   var _a2, _b2;
   useEffect(() => {
@@ -27164,7 +27312,18 @@ const LineChart = (props) => {
     initialState
   );
   const generatedDatasets = useMemo(() => {
-    return generateLineChartDatasets(datasets, state, options, translations);
+    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;
   }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
   useChartState({
     chartRef,