@oliasoft-open-source/charts-library 2.5.26 → 2.6.0-beta-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.26",
+  "version": "2.6.0-beta-1",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "scripts": {

package/release-notes.md

@@ -1,5 +1,16 @@
 # Charts Library Release Notes
 
+## 2.6.0
+
+- Add support for optional `autoAxisPadding` prop, which autoscales 5% padding around data ([OW-10398](https://oliasoft.atlassian.net/browse/OW-10398))
+- Fix bug in default scales when all data points similar values ([OW-4327](https://oliasoft.atlassian.net/browse/OW-4327))
+
+- Add guard to useEffect in line-chart
+
+## 2.5.27
+
+- Add guard to useEffect in line-chart
+
 ## 2.5.26
 
 - Add guard to getLineChartAxis method

package/src/components/line-chart/axis-scales/axis-scales.js

@@ -0,0 +1,165 @@
+import getLineChartScales from '../get-line-chart-scales';
+import { AxisType } from '../../../helpers/enums';
+import { getAxisTypeFromKey } from '../line-chart-utils';
+import { estimateDataSeriesHaveCloseValues } from '../../../helpers/range/estimate-data-series-have-close-values';
+import { getSuggestedAxisRange } from '../../../helpers/range/range';
+
+/**
+ Function that counts the number of occurences of "x" and "y" in an array and returns the one with the highest count.
+ @param {Array} scalesKeys - An array of strings that may contain "x" or "y".
+ @return {string} - Returns "x" if "x" occurs more times, "y" if "y" occurs more times, or null if they occur the same number of times.
+ */
+const checkMultiAxis = (scalesKeys) => {
+  let counts = {
+    x: 0,
+    y: 0,
+  };
+
+  scalesKeys.forEach((axeKey) => {
+    const key = getAxisTypeFromKey(axeKey);
+    counts[key]++;
+  });
+  const res =
+    (counts.x > counts.y && AxisType.X) ||
+    (counts.y > counts.x && AxisType.Y) ||
+    (counts.x === counts.y && null);
+
+  return res;
+};
+
+/**
+ Function that returns an object containing all the values for a specific key in an array of objects,
+ grouped by the unique values of another key in the same objects.
+ @param {Array} data - An array of objects to search for the keys.
+ @return {Object} - Returns an object with keys representing the unique values for the annotationAxis key in the data array,
+ and values representing an array of all values for the value key in the data array.
+ */
+const getAnnotationsData = (data) => {
+  return data.reduce((acc, obj) => {
+    return {
+      ...acc,
+      [obj.annotationAxis]: [...(acc[obj.annotationAxis] || []), obj.value],
+    };
+  }, {});
+};
+
+/**
+ * return data for each axes
+ * @function getAxesData
+ * @return {object}
+ */
+const getAxesData = (scalesKeys, datasets, annotationsData) => {
+  const allData =
+    datasets?.reduce((acc, item) => [...acc, ...item.data], []) ?? [];
+
+  /**
+   * return data by key and depends on axes count
+   * @function getData
+   * @return {object}
+   */
+  const getData = () => {
+    return scalesKeys.reduce((acc, axeKey) => {
+      const key = getAxisTypeFromKey(axeKey);
+      const data = getAnnotationsData(annotationsData);
+      const formData = allData
+        ?.map((val) => val?.[key])
+        .concat(data[key] || []);
+
+      return {
+        ...acc,
+        [axeKey]: [...new Set(formData)],
+      };
+    }, {});
+  };
+
+  /**
+   Function that returns an object containing the unique values for a multi axis key in an array of objects.
+   @return {Object} - Returns an object with key representing the found key in the scalesKeys array,
+   and values representing an array of unique values for that key in the datasets array. If no key is found, an empty object is returned.
+   */
+  const getDataForMultiAxes = () => {
+    const multiAxesKey = checkMultiAxis(scalesKeys);
+    const axes = scalesKeys?.filter((key) => key?.includes(multiAxesKey)) ?? [];
+    const data = getAnnotationsData(annotationsData);
+    const [first, second] = axes;
+
+    /**
+     * Reduces an array of objects and returns an array of values from the specified key
+     * @param {Array} arr - The array of objects to be reduced
+     * @param {string} key - The key to extract the values from
+     * @returns {Array} - An array of values from the specified key
+     */
+    const reduceData = (arr, key) =>
+      arr.reduce((acc, { [key]: value }) => [...acc, value], []);
+
+    return datasets.reduce(
+      (acc, obj) => {
+        const include = Object.values(obj).some((val) => axes.includes(val));
+        const key = include ? second : first;
+
+        return {
+          ...acc,
+          [key]: [
+            ...new Set([
+              ...acc[key],
+              ...reduceData(obj?.data, multiAxesKey),
+              ...((!include && data?.[multiAxesKey]) || []),
+            ]),
+          ],
+        };
+      },
+      { [first]: [], [second]: [] },
+    );
+  };
+
+  return {
+    ...getData(),
+    ...getDataForMultiAxes(),
+  };
+};
+
+/**
+ * Auto scales axis ranges (mix, max) if no explicit range is set
+ * - overrides some edge cases not handled well by default chart.js
+ * - supports optional padding when `autoAxisPadding` is set
+ * - otherwise does not set min/max (falls back to chart.js default)
+ *
+ * @function autoScale
+ * @return {object} scales
+ */
+export const autoScale = (options, state, generatedDatasets) => {
+  const { additionalAxesOptions = {}, annotations = {} } = options || {};
+  const { annotationsData = [] } = annotations || {};
+  const scales = getLineChartScales(options, state) || {};
+
+  if (
+    !additionalAxesOptions?.autoAxisPadding &&
+    !estimateDataSeriesHaveCloseValues(generatedDatasets)
+  ) {
+    return scales;
+  }
+  const scalesKeys = Object.keys(scales) ?? [];
+  const data =
+    getAxesData(scalesKeys, generatedDatasets, annotationsData) ?? {};
+
+  const adjustedScales = scalesKeys?.reduce((acc, key) => {
+    const { min: propMin = undefined, max: propMax = undefined } = scales[key];
+    const { min, max } = getSuggestedAxisRange({
+      data: data[key],
+      beginAtZero: additionalAxesOptions?.beginAtZero,
+      autoAxisPadding: additionalAxesOptions?.autoAxisPadding,
+    });
+
+    const res = {
+      [key]: {
+        ...scales[key],
+        min: propMin ?? min,
+        max: propMax ?? max,
+      },
+    };
+
+    return { ...acc, ...res };
+  }, {});
+
+  return adjustedScales ?? scales;
+};

package/src/components/line-chart/line-chart-prop-types.js

@@ -44,6 +44,7 @@ export const LineChartPropTypes = {
             max: PropTypes.number,
           }),
         }),
+        autoAxisPadding: PropTypes.bool,
       }),
       chartStyling: PropTypes.shape({
         width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -141,6 +142,8 @@ export const getDefaultProps = (props) => {
         suggestedMin: props.chart.options.additionalAxesOptions.suggestedMin,
         suggestedMax: props.chart.options.additionalAxesOptions.suggestedMax,
         range: props.chart.options.additionalAxesOptions.range,
+        autoAxisPadding:
+          props.chart.options.additionalAxesOptions.autoAxisPadding ?? false,
       },
       chartStyling: {
         width: props.chart.options.chartStyling.width,

package/src/components/line-chart/line-chart-utils.js

@@ -181,3 +181,12 @@ export const generateAxisId = (axisType, index = 0, hasMultiAxes = false) => {
   const i = hasMultiAxes ? index + 1 : '';
   return `${axisType}${i}`;
 };
+
+/**
+ Get axis type from a key string.
+ @param {string} string - The key string to extract from.
+ @returns {string} e.g. x1 => x
+ */
+export const getAxisTypeFromKey = (string) => {
+  return string.match(/[^0-9/]+/gi)[0];
+};

package/src/components/line-chart/line-chart.interface.ts

@@ -43,6 +43,7 @@ export interface ILineChartAdditionalAxesOptions {
         x: IChartRange;
         y: IChartRange;
     };
+    autoAxisPadding: boolean;
 }
 
 export interface ILineChartAxis<PositionType> {

package/src/components/line-chart/line-chart.jsx

@@ -34,7 +34,6 @@ import {
 } from './state/action-types';
 import Controls from '../controls/controls';
 import { getDefaultProps, LineChartPropTypes } from './line-chart-prop-types';
-import getLineChartScales from './get-line-chart-scales';
 import getLineChartToolTips from './get-line-chart-tooltips';
 import getLineChartDataLabels from './get-line-chart-data-labels';
 import {
@@ -72,6 +71,7 @@ import {
 } from '../../helpers/enums';
 import { getAxesRangesFromChart } from './get-axes-ranges-from-chart';
 import { generateAxisId } from './line-chart-utils';
+import { autoScale } from './axis-scales/axis-scales';
 
 ChartJS.register(
   LinearScale,
@@ -131,7 +131,7 @@ const LineChart = (props) => {
 
   useEffect(() => {
     const { range } = props.chart.options.additionalAxesOptions;
-    if (range) {
+    if (range?.x && range?.y) {
       const axes = Object.entries(range).map(([key, { min, max }]) => {
         return {
           id: key,
@@ -479,7 +479,7 @@ const LineChart = (props) => {
                   showLine: state.lineEnabled,
                 },
               },
-              scales: getLineChartScales(options, state),
+              scales: autoScale(options, state, generatedDatasets),
               plugins: {
                 // title: getTitle(options),
                 datalabels: getLineChartDataLabels(options),

package/src/helpers/chart-consts.js

@@ -58,3 +58,5 @@ export const ANIMATION_DURATION = {
 export const DEFAULT_CHART_NAME = 'new_chart';
 
 export const CUSTOM_LEGEND_PLUGIN_NAME = 'htmlLegend';
+
+export const DECIMAL_POINT_TOLERANCE = 9; //ignore decimal points beyond this

package/src/helpers/numbers/numbers.js

@@ -0,0 +1,44 @@
+import { DECIMAL_POINT_TOLERANCE } from '../chart-consts';
+
+/**
+ * Rounds a number to N decimal places
+ *
+ * @param {number} v value
+ * @param {number} n decimal count
+ * @returns {number}
+ */
+export const roundN = (v, n) => {
+  const factor = 10 ** n;
+  return Math.round(v * factor) / factor;
+};
+
+/**
+ * Rounds a number to DECIMAL_POINT_TOLERANCE decimal places
+ *
+ * @param {number} v value
+ * @returns {number}
+ */
+export const round = (v) => roundN(v, DECIMAL_POINT_TOLERANCE);
+
+/**
+ * Determines whether two numbers are close in value with a tolerance
+ * (mitigates excess JavaScript floating point precision quirks)
+ *
+ * Inspired by WellDesign implementations:
+ * - isCloseTo in rounding.js
+ * - isEqual in TDHYDutils.js (recommended by Truls, but quirks comparing values close to 0 need testing)
+ * - TODO: replace this with a universal Oliasoft implementation when ready
+ *
+ * @param {number} a
+ * @param {number} b
+ * @returns {boolean}
+ */
+export const isEqualWithTolerance = (a, b) => {
+  if (typeof a == 'number' && typeof b === typeof a) {
+    const tolerance = 10 ** -DECIMAL_POINT_TOLERANCE;
+    const difference = Math.abs(b - a);
+    const roundedDifference = roundN(difference, DECIMAL_POINT_TOLERANCE);
+    return roundedDifference <= tolerance;
+  }
+  return false;
+};

package/src/helpers/range/estimate-data-series-have-close-values.js

@@ -0,0 +1,54 @@
+import { isEqualWithTolerance } from '../numbers/numbers';
+
+/**
+ * Estimates whether any of the data series has values that are all close together
+ * - checks only the first and last values in each series (i.e. assumes they are ordered)
+ * - uses an equality check with tolerance for decimal precision noise
+ * - this is just an inexpensive "guesstimate" (full min/max detection can be used afterwards)
+ *
+ * @param {Array} generatedDatasets chart dataset series with x, y points
+ * @return {boolean} - at least one series has values that seem close together
+ */
+export const estimateDataSeriesHaveCloseValues = (generatedDatasets) => {
+  if (!Array.isArray(generatedDatasets) || !generatedDatasets.length) {
+    return false;
+  }
+  const axesFirstLast = generatedDatasets.reduce((acc, dataset) => {
+    const xAxisId = dataset?.xAxisID ?? 'defaultX';
+    const yAxisId = dataset?.yAxisID ?? 'defaultY';
+    const data = dataset?.data;
+    if (data && data.length) {
+      const { x: xFirstCurrent, y: yFirstCurrent } = data?.[0] ?? {};
+      const { x: xLastCurrent, y: yLastCurrent } = data.at(-1) ?? {};
+      const xFirstAcc = acc?.[xAxisId]?.xFirst ?? xFirstCurrent;
+      const xLastAcc = acc?.[xAxisId]?.xLast ?? xLastCurrent;
+      const yFirstAcc = acc?.[yAxisId]?.yFirst ?? yFirstCurrent;
+      const yLastAcc = acc?.[yAxisId]?.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 Object.values(axesFirstLast).some(
+    ({ xFirst, xLast, yFirst, yLast }) => {
+      return (
+        isEqualWithTolerance(xFirst, xLast) ||
+        isEqualWithTolerance(yFirst, yLast)
+      );
+    },
+  );
+};

package/src/helpers/range/range.js

@@ -0,0 +1,95 @@
+import { isEqualWithTolerance, round } from '../numbers/numbers';
+
+const whiteSpacePercentage = 0.05; // relative amount of white space on each "side" of the data points
+
+const defaultRange = { min: -1, max: 1 };
+
+/**
+ * Overrides the default chart.js axis range for some edge-cases:
+ * - when no data -> default range
+ * - when all values are close to zero -> default range
+ * - when all values are close to each other -> custom 5% padding
+ * - when autoAxisPadding is set -> custom 5% padding
+ * - all other cases fall back to chart.js default behaviour
+ *
+ * `autoAxisPadding` feature requirements:
+ * - specified by Truls and ported by Mark+Oleg
+ * - numbers that are equal (within tolerance) shall be presented as a straight line
+ * - all other data series shall use 90% of width of axis (5% padding each side)
+ * - the padding on each side shall be symmetric
+ *
+ * @param {object} args
+ * @param {array<number|null>} args.data
+ * @param {boolean} [args.beginAtZero]
+ * @param {boolean>} [args.autoAxisPadding]
+ * @returns {object} returns {min, max} pair
+ */
+export const getSuggestedAxisRange = ({
+  data,
+  beginAtZero = false,
+  autoAxisPadding = false,
+}) => {
+  const dataMin = Math.min(
+    ...data.filter((v) => v !== null && v !== undefined && !isNaN(v)),
+  );
+  const dataMax = Math.max(
+    ...data.filter((v) => v !== null && v !== undefined && !isNaN(v)),
+  );
+  const isNegative = Math.sign(dataMin) === -1 || Math.sign(dataMax) === -1;
+  const isCloseToZeroWithTolerance =
+    isEqualWithTolerance(dataMin, 0) && isEqualWithTolerance(dataMax, 0);
+
+  /*
+    Use default range upon no data or when all values are close to 0
+  */
+  if (!data.length || isCloseToZeroWithTolerance) {
+    return defaultRange;
+  }
+
+  /*
+    When all values are close to the same, always add some padding OW-4327
+  */
+  if (isEqualWithTolerance(dataMin, dataMax)) {
+    const point = dataMax;
+    const padding = point * whiteSpacePercentage;
+    const minAxisValue = beginAtZero && !isNegative ? 0 : point - padding;
+    const maxAxisValue = beginAtZero && isNegative ? 0 : point + padding;
+    return {
+      min: round(minAxisValue),
+      max: round(maxAxisValue),
+    };
+  }
+
+  /*
+    Else fall back to native chart.js implementation when autoAxisPadding is off
+   */
+  if (!autoAxisPadding) {
+    return {
+      min: undefined,
+      max: undefined,
+    };
+  }
+
+  /*
+    Else use custom auto scaling with 5% padding (only when autoAxisPadding is set)
+  */
+  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(minAxisValue),
+    max: round(maxAxisValue),
+  };
+};