@oliasoft-open-source/charts-library 0.0.2-beta-1

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

@@ -0,0 +1,120 @@
+import {
+  generateRandomColor,
+  getAxisPosition,
+} from '../../helpers/chart-utils';
+import { COLORS, LOGARITHMIC_STEPS } from '../../helpers/chart-consts';
+import { generateAxisId, truncateDecimals } from './line-chart-utils';
+import { AxisType, ScaleType } from '../../helpers/enums';
+
+/**
+ * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @param {'x'|'y'} axisType
+ * @param {import('../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ * @param {import('./line-chart.interface').ILineChartAxis[]} [currentScales]
+ * @param {number} [i]
+ */
+const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
+  const axisData = currentScales || options.axes[axisType][0];
+  const stateAxis = state.axes.filter((axis) => axis.id.startsWith(axisType))[
+    i
+  ];
+
+  const { additionalAxesOptions, chartStyling } = options;
+
+  const getTicks = () => {
+    const truncateAxisNumbersToDigitsCallback = Number.isInteger(
+      additionalAxesOptions.truncateAxisNumbersToDigitsCallback,
+    )
+      ? {
+          callback: (tick) =>
+            truncateDecimals(
+              tick,
+              additionalAxesOptions.truncateAxisNumbersToDigitsCallback,
+            ),
+        }
+      : {};
+
+    const ticks =
+      additionalAxesOptions.chartScaleType === ScaleType.Logarithmic
+        ? {
+            callback: (tick) => {
+              return LOGARITHMIC_STEPS.includes(tick)
+                ? tick.toLocaleString()
+                : '';
+            },
+          }
+        : {
+            stepSize:
+              axisData.stepSize ||
+              (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null),
+            ...truncateAxisNumbersToDigitsCallback,
+          };
+    return {
+      ...ticks,
+      includeBounds: false, //OW-10088 disable irregular axis ticks
+    };
+  };
+
+  return {
+    type: additionalAxesOptions.chartScaleType,
+    position: axisData.position,
+    beginAtZero: additionalAxesOptions.beginAtZero,
+    reverse: axisType === AxisType.Y ? additionalAxesOptions.reverse : false,
+    suggestedMax: additionalAxesOptions.suggestedMax,
+    suggestedMin: additionalAxesOptions.suggestedMin,
+    min: stateAxis?.min ?? additionalAxesOptions?.range?.[axisType]?.min,
+    max: stateAxis?.max ?? additionalAxesOptions?.range?.[axisType]?.max,
+    title: {
+      display: axisData.label?.length,
+      text: axisData.label,
+      padding: 0,
+    },
+    ticks: getTicks(),
+    grid: {
+      ...axisData.gridLines,
+    },
+  };
+};
+
+/**
+ * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @param {'x'|'y'} axisType
+ * @param {import('../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ */
+const getLineChartAxes = (options, axisType, state) => {
+  const axesData = options.axes[axisType];
+  const axes = axesData.reduce((acc, curr, i) => {
+    const axisData = curr;
+    axisData.color = curr.color || COLORS[i] || generateRandomColor(COLORS);
+    axisData.position = curr.position || getAxisPosition(axisType, i);
+
+    const axis = getLineChartAxis(options, axisType, state, axisData, i);
+    const axisId = generateAxisId(axisType, i, true);
+    return { ...acc, [axisId]: axis };
+  }, {});
+  return axes;
+};
+
+/**
+ *
+ * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @param {import('../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ */
+const getLineChartScales = (options, state) => {
+  const hasMultipleXAxes = options.axes.x?.length > 1;
+  const hasMultipleYAxes = options.axes.y?.length > 1;
+
+  const xAxes = hasMultipleXAxes
+    ? getLineChartAxes(options, AxisType.X, state)
+    : { x: getLineChartAxis(options, AxisType.X, state) };
+  const yAxes = hasMultipleYAxes
+    ? getLineChartAxes(options, AxisType.Y, state)
+    : { y: getLineChartAxis(options, AxisType.Y, state) };
+
+  return {
+    ...xAxes,
+    ...yAxes,
+  };
+};
+
+export default getLineChartScales;

package/src/components/line-chart/get-line-chart-tooltips.js

@@ -0,0 +1,91 @@
+import { ChartHoverMode, Position, TooltipLabel } from '../../helpers/enums';
+import { afterLabelCallback, getTooltipLabel } from '../../helpers/chart-utils';
+
+/**
+ * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ */
+const getLineChartToolTips = (options) => {
+  const getTooltipLabels = (dataset) => {
+    const xIndex = dataset.xAxisID?.length > 1 ? dataset.xAxisID[1] - 1 : 0;
+    const yIndex = dataset.yAxisID?.length > 1 ? dataset.yAxisID[1] - 1 : 0;
+    const xAxis = options.axes.x[xIndex];
+    const yAxis = options.axes.y[yIndex];
+
+    if (options.axes.x[0].position === Position.Top) {
+      return {
+        titleAxisLabel: yAxis?.label || '',
+        valueAxisLabel: xAxis?.label || '',
+        titleLabel: TooltipLabel.Y,
+        valueLabel: TooltipLabel.X,
+      };
+    } else {
+      return {
+        titleAxisLabel: xAxis?.label || '',
+        valueAxisLabel: yAxis?.label || '',
+        titleLabel: TooltipLabel.X,
+        valueLabel: TooltipLabel.Y,
+      };
+    }
+  };
+
+  const titleCallback = (tooltipItem, data) => {
+    const labels = getTooltipLabels(tooltipItem[0].dataset);
+    const { titleLabel, titleAxisLabel } = labels;
+
+    const formattedValue =
+      titleLabel === TooltipLabel.Y
+        ? tooltipItem[0].parsed.y
+        : tooltipItem[0].parsed.x;
+    const roundedValue =
+      Math.abs(formattedValue) < 1
+        ? formattedValue.toPrecision(3)
+        : formattedValue.toFixed(2);
+
+    return `${roundedValue} ${titleAxisLabel}`;
+  };
+
+  const labelCallback = (tooltipItem) => {
+    const { showLabelsInTooltips, hideSimulationName } = options.tooltip;
+    let label = tooltipItem.dataset.label || '';
+    const labels = getTooltipLabels(tooltipItem.dataset);
+    const { valueLabel, valueAxisLabel } = labels;
+
+    const getTooltipItemValue = () => {
+      const labelNumber =
+        valueLabel === TooltipLabel.X
+          ? tooltipItem.parsed.x
+          : tooltipItem.parsed.y;
+      return Math.abs(labelNumber) < 1
+        ? labelNumber.toPrecision(3)
+        : labelNumber.toFixed(3);
+    };
+
+    const splitValueAxisLabel = valueAxisLabel.split(' ');
+    const newValueAxisLabel = hideSimulationName
+      ? splitValueAxisLabel[splitValueAxisLabel.length - 1]
+      : valueAxisLabel;
+
+    const tooltipItemValue = getTooltipItemValue();
+    const valAxisLabel =
+      label === valueAxisLabel || valueAxisLabel.includes(label)
+        ? ''
+        : newValueAxisLabel;
+    const tooltipLabel = getTooltipLabel(tooltipItem, showLabelsInTooltips);
+
+    return `${label}: ${tooltipItemValue} ${valAxisLabel}${tooltipLabel}`;
+  };
+
+  return {
+    enabled: options.tooltip.tooltips,
+    mode: ChartHoverMode.Nearest,
+    intersect: true,
+    padding: 8,
+    callbacks: {
+      title: titleCallback,
+      label: labelCallback,
+      afterLabel: afterLabelCallback,
+    },
+  };
+};
+
+export default getLineChartToolTips;

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

@@ -0,0 +1,7 @@
+export const DEFAULT_POINT_RADIUS = 2;
+export const DEFAULT_HOVER_RADIUS = 5;
+export const DEFAULT_BORDER_WIDTH = 1;
+export const BORDER_JOIN_STYLE = 'round';
+export const DEFAULT_LINE_POINT_RADIUS = 0;
+export const DEFAULT_BACKGROUND_COLOR = 'transparent';
+export const ZOOM_BOX_BACKGROUND_COLOR = 'rgba(0, 0, 0, 0.1)';

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

@@ -0,0 +1,212 @@
+import PropTypes from 'prop-types';
+
+export const LineChartPropTypes = {
+  table: PropTypes.node,
+  chart: PropTypes.shape({
+    testId: PropTypes.string,
+    data: PropTypes.object.isRequired,
+    options: PropTypes.shape({
+      title: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string),
+      ]),
+      axes: PropTypes.shape({
+        x: PropTypes.arrayOf(
+          PropTypes.shape({
+            label: PropTypes.string,
+            position: PropTypes.oneOf(['top', 'bottom']),
+            color: PropTypes.string,
+          }),
+        ),
+        y: PropTypes.arrayOf(
+          PropTypes.shape({
+            label: PropTypes.string,
+            position: PropTypes.oneOf(['left', 'right']),
+            color: PropTypes.string,
+          }),
+        ),
+      }),
+      additionalAxesOptions: PropTypes.shape({
+        chartScaleType: PropTypes.oneOf(['linear', 'logarithmic']),
+        reverse: PropTypes.bool,
+        beginAtZero: PropTypes.bool,
+        stepSize: PropTypes.number,
+        truncateAxisNumbersToDigitsCallback: PropTypes.number,
+        suggestedMin: PropTypes.number,
+        suggestedMax: PropTypes.number,
+        range: PropTypes.shape({
+          x: PropTypes.shape({
+            min: PropTypes.number,
+            max: PropTypes.number,
+          }),
+          y: PropTypes.shape({
+            min: PropTypes.number,
+            max: PropTypes.number,
+          }),
+        }),
+        autoAxisPadding: PropTypes.bool,
+      }),
+      chartStyling: PropTypes.shape({
+        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        maintainAspectRatio: PropTypes.bool,
+        staticChartHeight: PropTypes.bool,
+        performanceMode: PropTypes.bool,
+        squareAspectRatio: PropTypes.bool,
+      }),
+      tooltip: PropTypes.shape({
+        tooltips: PropTypes.bool,
+        showLabelsInTooltips: PropTypes.bool,
+        hideSimulationName: PropTypes.bool,
+      }),
+      graph: PropTypes.shape({
+        lineTension: PropTypes.number,
+        spanGaps: PropTypes.bool,
+        showDataLabels: PropTypes.bool,
+        showMinorGridlines: PropTypes.bool,
+      }),
+      annotations: PropTypes.shape({
+        labelAnnotation: PropTypes.object,
+        showAnnotations: PropTypes.bool,
+        controlAnnotation: PropTypes.bool,
+        annotationsData: PropTypes.arrayOf(
+          PropTypes.shape({
+            adjustScaleRange: PropTypes.bool,
+            annotationAxis: PropTypes.oneOf(['x', 'y']),
+            color: PropTypes.string,
+            endValue: PropTypes.number,
+            label: PropTypes.string,
+            type: PropTypes.string,
+            value: PropTypes.number,
+            xMin: PropTypes.number,
+            xMax: PropTypes.number,
+            yMin: PropTypes.number,
+            yMax: PropTypes.number,
+          }),
+        ),
+      }),
+      legend: PropTypes.shape({
+        display: PropTypes.bool,
+        position: PropTypes.oneOf(['top', 'bottom', 'right']),
+        align: PropTypes.oneOf(['start', 'center', 'end']),
+        customLegend: PropTypes.shape({
+          customLegendPlugin: PropTypes.object,
+          customLegendContainerID: PropTypes.string,
+        }),
+      }),
+      chartOptions: PropTypes.shape({
+        showPoints: PropTypes.bool,
+        enableZoom: PropTypes.bool,
+        enablePan: PropTypes.bool,
+        closeOnOutsideClick: PropTypes.bool,
+      }),
+      interactions: PropTypes.shape({
+        onLegendClick: PropTypes.func,
+        onPointHover: PropTypes.func,
+        onPointUnhover: PropTypes.func,
+        onAnimationComplete: PropTypes.func,
+      }),
+    }),
+  }).isRequired,
+};
+
+export const getDefaultProps = (props) => {
+  // Add missing nested objects
+  props.chart.options = props.chart.options || {};
+  props.chart.options.axes = props.chart.options.axes || {};
+  props.chart.options.additionalAxesOptions =
+    props.chart.options.additionalAxesOptions || {};
+  props.chart.options.chartStyling = props.chart.options.chartStyling || {};
+  props.chart.options.tooltip = props.chart.options.tooltip || {};
+  props.chart.options.graph = props.chart.options.graph || {};
+  props.chart.options.annotations = props.chart.options.annotations || {};
+  props.chart.options.legend = props.chart.options.legend || {};
+  props.chart.options.legend.customLegend = props.chart.options.legend
+    .customLegend || { customLegendPlugin: null, customLegendContainerID: '' };
+  props.chart.options.chartOptions = props.chart.options.chartOptions || {};
+  props.chart.options.interactions = props.chart.options.interactions || {};
+  // Set defaults for missing properties
+  const chart = {
+    testId: props.chart.testId ?? null,
+    data: props.chart.data,
+    options: {
+      title: props.chart.options.title || '',
+      axes: {
+        x: props.chart.options.axes.x || [{}],
+        y: props.chart.options.axes.y || [{}],
+      },
+      additionalAxesOptions: {
+        chartScaleType:
+          props.chart.options.additionalAxesOptions.chartScaleType || 'linear',
+        reverse: props.chart.options.additionalAxesOptions.reverse || false,
+        beginAtZero:
+          props.chart.options.additionalAxesOptions.beginAtZero || false,
+        stepSize: props.chart.options.additionalAxesOptions.stepSize,
+        truncateAxisNumbersToDigitsCallback:
+          props.chart.options.additionalAxesOptions
+            .truncateAxisNumbersToDigitsCallback,
+        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,
+        height: props.chart.options.chartStyling.height,
+        maintainAspectRatio:
+          props.chart.options.chartStyling.maintainAspectRatio || false,
+        staticChartHeight:
+          props.chart.options.chartStyling.staticChartHeight || false,
+        performanceMode:
+          props.chart.options.chartStyling.performanceMode ?? true,
+        squareAspectRatio:
+          props.chart.options.chartStyling.squareAspectRatio || false,
+      },
+      tooltip: {
+        tooltips: props.chart.options.tooltip.tooltips ?? true,
+        showLabelsInTooltips:
+          props.chart.options.tooltip.showLabelsInTooltips || false,
+        hideSimulationName:
+          props.chart.options.tooltip.hideSimulationName || false,
+      },
+      graph: {
+        lineTension: props.chart.options.graph.lineTension || 0.01,
+        spanGaps: props.chart.options.graph.spanGaps || false,
+        showDataLabels: props.chart.options.graph.showDataLabels || false,
+        showMinorGridlines:
+          props.chart.options.graph.showMinorGridlines || false,
+      },
+      annotations: {
+        labelAnnotation: props.chart.options.annotations.labelAnnotation || {},
+        showAnnotations:
+          props.chart.options.annotations.showAnnotations ?? false,
+        controlAnnotation:
+          props.chart.options.annotations.controlAnnotation || false,
+        annotationsData: props.chart.options.annotations.annotationsData || [],
+      },
+      legend: {
+        display: props.chart.options.legend.display ?? true,
+        position: props.chart.options.legend.position || 'bottom',
+        align: props.chart.options.legend.align || 'center',
+        customLegend: props.chart.options.legend.customLegend,
+      },
+      chartOptions: {
+        showPoints: props.chart.options.chartOptions.showPoints ?? true,
+        enableZoom: props.chart.options.chartOptions.enableZoom || false,
+        enablePan: props.chart.options.chartOptions.enablePan || false,
+        showLine: props.chart.options.chartOptions.showLine ?? true,
+        closeOnOutsideClick:
+          props.chart.options.chartOptions.closeOnOutsideClick || false,
+      },
+      interactions: {
+        onLegendClick: props.chart.options.interactions.onLegendClick,
+        onPointHover: props.chart.options.interactions.onPointHover,
+        onPointUnhover: props.chart.options.interactions.onPointUnhover,
+        onAnimationComplete:
+          props.chart.options.interactions.onAnimationComplete,
+      },
+    },
+  };
+  return chart;
+};

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

@@ -0,0 +1,192 @@
+import Fraction from 'fraction.js';
+
+const isNull = (str) => str === null;
+const isUndefined = (str) => str === undefined;
+const isArray = (str) => str && str.constructor === Array;
+const isObject = (str) => str && str.constructor === Object;
+const hasDivisor = (str) =>
+  str && typeof str.includes === 'function' && str.includes('/');
+export const isEmptyString = (str) => str === '';
+const isTrailingPeriodSeparator = (str) => str && str[str.length - 1] === '.';
+const isTrailingCommaSeparator = (str) => str && str[str.length - 1] === ',';
+const isOnlyNumbers = (str) => /^-?\d*\.?\d+$/.test(str);
+
+export const charCount = (chr, str) => {
+  let total = 0,
+    last_location = 0,
+    single_char = (chr + '')[0];
+  while ((last_location = str.indexOf(single_char, last_location) + 1)) {
+    total += 1;
+  }
+  return total;
+};
+
+export const cleanNumStr = (str) => {
+  str += '';
+  let slashCount = charCount('/', str);
+  let spaceCount = charCount(' ', str) + charCount(' ', str);
+  let dotcount = charCount('.', str);
+  let commacount = charCount(',', str);
+  if (slashCount === 0 && spaceCount > 0) str = str.replace(/\s/g, '');
+  if (commacount > 1) str = str.replace(/,/g, '');
+  if (dotcount > 1) str = str.replace(/\./g, '');
+  commacount = charCount(',', str);
+  dotcount = charCount('.', str);
+  if (dotcount === 1 && commacount === 1) {
+    // One of each, make the rightmost act as decimal separator
+    if (str.indexOf(',') > str.indexOf('.')) {
+      str = str.replace('.', '');
+      str = str.replace(',', '.');
+    } else {
+      str = str.replace(',', '');
+    }
+    if (str.indexOf('.') === 0) {
+      str = 0 + str;
+    }
+    return str;
+  }
+  if (dotcount === 1 && commacount) str = str.replace(',', '');
+  if (!dotcount && commacount) str = str.replace(',', '.');
+  if (str.indexOf('.') === 0) {
+    str = 0 + str;
+  }
+  return str;
+};
+
+export const numFraction = (str) => {
+  if (str instanceof Array || str === null || str === undefined) {
+    return str;
+  }
+  if (typeof str === 'string') {
+    str = str.trim(); //trailing whitespace causes InvalidParameter error in fraction.js
+  }
+  let result = str;
+  try {
+    result = Fraction(str);
+  } catch (e) {
+    //do nothing
+  }
+  return result.valueOf();
+};
+
+export const isValidNum = (input) => {
+  let result = false;
+  if (isEmptyString(input)) {
+    result = true;
+  } else {
+    if (
+      !(
+        isNull(input) ||
+        isUndefined(input) ||
+        isTrailingPeriodSeparator(input) ||
+        isTrailingCommaSeparator(input) ||
+        isArray(input) ||
+        isObject(input) ||
+        !isOnlyNumbers(input)
+      )
+    ) {
+      let number;
+      const cleaned = cleanNumStr(input);
+      if (hasDivisor(cleaned)) {
+        //numFraction is slow, so only call it if needed
+        number = numFraction(cleaned);
+      } else {
+        number = parseFloat(cleaned);
+      }
+      if (!isNaN(number)) {
+        result = true;
+      }
+    }
+  }
+  return result;
+};
+
+export const toNumber = (input, defaultValue, minimum) => {
+  let result;
+  defaultValue = defaultValue === undefined ? input : defaultValue;
+  if (
+    isNull(input) ||
+    isUndefined(input) ||
+    isEmptyString(input) ||
+    isTrailingPeriodSeparator(input) ||
+    isTrailingCommaSeparator(input) ||
+    isArray(input) ||
+    isObject(input)
+  ) {
+    result = defaultValue;
+  } else {
+    let number;
+    const cleaned = cleanNumStr(input);
+    if (hasDivisor(cleaned)) {
+      //numFraction is slow, so only call it if needed
+      number = numFraction(cleaned);
+    } else {
+      number = parseFloat(cleaned);
+    }
+    if (isNaN(number)) {
+      result = defaultValue;
+    } else if (minimum && number < minimum) {
+      result = minimum;
+    } else {
+      result = number;
+    }
+  }
+  return result;
+};
+
+export const validNumber = (value) => {
+  return isValidNum(value);
+};
+
+export const toNum = (value) => {
+  const asNumber = toNumber(value);
+  return value === '' || isNaN(asNumber) ? '' : asNumber;
+};
+
+export const isLessThanMax = (value, max) => {
+  return (
+    value === undefined || max === undefined || Number(value) < Number(max)
+  );
+};
+
+export const isGreaterThanMin = (value, min) => {
+  return (
+    value === undefined || min === undefined || Number(value) > Number(min)
+  );
+};
+
+/**
+ * Truncates a number to the specified decimal digits.
+ * Truncate refers to shaving digits off a number without rounding it.
+ * @param {Number} number
+ * @param {Number} digits
+ * @returns {Number}
+ */
+export const truncateDecimals = (number, digits) => {
+  const multiplier = 10 ** digits;
+  const adjustedNum = number * multiplier;
+  const truncatedNum = Math[adjustedNum < 0 ? 'ceil' : 'floor'](adjustedNum);
+
+  return truncatedNum / multiplier;
+};
+
+/**
+ *
+ * @param {'x'|'y'} axisType
+ * @param {number} [index] - axis index; optional, 0 by default
+ * @param {boolean} [hasMultiAxes] - optional, false by default
+ * @return {string} - e.g. x if chart has singular axes; x1, x2 - in case of multiple axes
+ */
+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];
+};