@oliasoft-open-source/charts-library 4.8.0-beta-3 → 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 { 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;
@@ -25029,7 +25035,11 @@ const getDefaultProps$3 = (props) => {
     }
   };
 };
+const DEFAULT_POINT_RADIUS = 2;
+const DEFAULT_HOVER_RADIUS = 5;
 const DEFAULT_BORDER_WIDTH = 1;
+const BORDER_JOIN_STYLE = "round";
+const DEFAULT_BACKGROUND_COLOR = "transparent";
 const ZOOM_BOX_BACKGROUND_COLOR = "rgba(0, 0, 0, 0.1)";
 const DOUBLE_CLICK = "dblclick";
 const INIT_KEYS = {
@@ -25038,6 +25048,162 @@ const INIT_KEYS = {
 };
 const LOWER_BOUND = 1e-4;
 const UPPER_BOUND = 1e7;
+const checkCustomOption = (data, customOptions) => {
+  if (isEmpty(data) || isEmpty(customOptions)) return false;
+  const checkOption = (dataset) => {
+    if (typeof customOptions === "string") {
+      return dataset && has(dataset, customOptions);
+    } else if (isArray$2(customOptions)) {
+      return dataset && some(customOptions, (option) => dataset && has(dataset, option));
+    } else {
+      return dataset && some(
+        Object.values(customOptions),
+        (option) => dataset && has(dataset, option)
+      );
+    }
+  };
+  if (isArray$2(data)) {
+    return some(data, checkOption);
+  } else {
+    return checkOption(data);
+  }
+};
+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 }) => {
+  var _a2, _b2;
+  const copyDataset = datasets ?? [];
+  const { annotations, graph } = options ?? {};
+  const {
+    controlAnnotation,
+    showAnnotations,
+    annotationsData = []
+  } = annotations ?? {};
+  if (controlAnnotation && showAnnotations) {
+    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;
+      copyDataset.push({
+        ...annotation2,
+        isAnnotation: true,
+        annotationType: type,
+        label: annotation2.label,
+        annotationIndex: index2,
+        backgroundColor: color2,
+        pointBackgroundColor: color2,
+        borderColor: color2,
+        borderDash,
+        borderWidth,
+        data: [{}]
+      });
+      index2++;
+    }
+  }
+  const result = new Array(copyDataset.length);
+  let i2 = 0;
+  while (i2 < copyDataset.length) {
+    const line = copyDataset[i2];
+    const {
+      formation,
+      data = [],
+      pointRadius: pointRadiusProp,
+      pointHoverRadius,
+      borderWidth,
+      borderColor,
+      backgroundColor,
+      pointBackgroundColor,
+      borderDash,
+      showPoints: customShowPoints,
+      showLine: customShowLine
+    } = line ?? {};
+    const { lineEnabled, pointsEnabled, axes = [] } = state ?? {};
+    const { lineTension, spanGaps } = graph ?? {};
+    if (formation) {
+      const axesMin = (_a2 = axes[0]) == null ? void 0 : _a2.min;
+      const axesMax = (_b2 = axes[0]) == null ? void 0 : _b2.max;
+      const [startPoint, endPoint] = data;
+      if (axesMin && (startPoint == null ? void 0 : startPoint.x)) {
+        data[0].x = Math.max(axesMin, startPoint.x);
+      }
+      if (axesMax && (endPoint == null ? void 0 : endPoint.x)) {
+        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;
+    let pointState, lineState;
+    if (customShowPoints !== void 0) {
+      pointState = customShowPoints;
+    } else if (customShowLine === false) {
+      pointState = true;
+    } else {
+      pointState = pointsEnabled || isSinglePoint;
+    }
+    if (customShowLine !== void 0) {
+      lineState = customShowLine;
+    } else if (customShowPoints === false) {
+      lineState = true;
+    } 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 indexedColor = COLORS[i2];
+    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: (typeof borderWidth === "string" ? parseFloat(borderWidth) : borderWidth) || DEFAULT_BORDER_WIDTH,
+      borderDash: borderDash || [],
+      borderJoinStyle: BORDER_JOIN_STYLE,
+      borderColor: borderColor ?? indexedColor ?? generateRandomColor(COLORS),
+      backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
+      pointBackgroundColor: pointBackgroundColor ?? indexedColor ?? generateRandomColor(COLORS),
+      pointRadius: pointState ? linePointRadius : 0,
+      pointHoverRadius: hoverRadius,
+      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;
   if (Math.abs(delta) >= 1 && tickValue !== Math.floor(Number(tickValue))) {
@@ -25144,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;
@@ -25696,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(
@@ -25816,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(() => {
@@ -27019,7 +27295,7 @@ const LineChart = (props) => {
   const { translations, languageKey } = getConfig();
   const chart2 = getDefaultProps$3(props);
   const {
-    // data: { datasets } = { datasets: [] },
+    data: { datasets } = { datasets: [] },
     options,
     testId,
     persistenceId,
@@ -27027,7 +27303,6 @@ const LineChart = (props) => {
   } = chart2;
   const { annotations, axes, chartStyling, graph } = options ?? {};
   const showCustomLegend = !((_b2 = (_a2 = options == null ? void 0 : options.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendContainerID);
-  console.time("useReducer");
   const [state, dispatch] = useReducer(
     reducer$1,
     {
@@ -27036,13 +27311,20 @@ const LineChart = (props) => {
     },
     initialState
   );
-  console.timeEnd("useReducer");
-  console.time("generatedDatasets");
   const generatedDatasets = useMemo(() => {
-    return [];
+    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]);
-  console.timeEnd("generatedDatasets");
-  console.time("useChartState");
   useChartState({
     chartRef,
     options,
@@ -27051,8 +27333,6 @@ const LineChart = (props) => {
     persistenceId,
     generatedDatasets
   });
-  console.timeEnd("useChartState");
-  console.time("useChartFunctions");
   const { resetZoom: resetZoom2, handleKeyDown, handleKeyUp } = useChartFunctions({
     chartRef,
     state,
@@ -27060,8 +27340,6 @@ const LineChart = (props) => {
     dispatch,
     generatedDatasets
   });
-  console.timeEnd("useChartFunctions");
-  console.time("useChartOptions");
   const useOptions = useChartOptions({
     chartRef,
     state,
@@ -27069,10 +27347,7 @@ const LineChart = (props) => {
     dispatch,
     generatedDatasets
   });
-  console.timeEnd("useChartOptions");
-  console.time("useChartPlugins");
   const usePlugins = useChartPlugins({ options, resetZoom: resetZoom2 });
-  console.timeEnd("useChartPlugins");
   return /* @__PURE__ */ jsxs(
     "div",
     {