@oliasoft-open-source/charts-library 2.17.6 → 2.18.0-beta-2

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

@@ -1,114 +0,0 @@
-import { COLORS } from '../../../helpers/chart-consts';
-import {
-  BORDER_JOIN_STYLE,
-  DEFAULT_BACKGROUND_COLOR,
-  DEFAULT_BORDER_WIDTH,
-  DEFAULT_HOVER_RADIUS,
-  DEFAULT_LINE_POINT_RADIUS,
-  DEFAULT_POINT_RADIUS,
-} from '../constants/line-chart-consts';
-import { generateRandomColor } from '../../../helpers/chart-utils';
-
-/**
- * Generates line chart datasets based on the provided datasets, state, and options.
- *
- * @param {Array} datasets - The initial datasets for the line chart.
- * @param {Object} state - The state object containing chart settings (e.g., lineEnabled, pointsEnabled, axes).
- * @param {Object} options - The options object containing additional settings (e.g., annotations, graph).
- * @param {Object} translations - The getTranslations object with the label property
- * @returns {Array} - The generated line chart datasets with applied settings and configurations.
- */
-export const generateLineChartDatasets = (
-  datasets,
-  state,
-  options,
-  { label },
-) => {
-  const copyDataset = [...datasets];
-  const { annotations, graph } = options;
-  const {
-    controlAnnotation,
-    showAnnotations,
-    annotationsData = [],
-  } = annotations;
-  // Add annotations to dataset to have them appear in legend.
-  if (controlAnnotation && showAnnotations) {
-    const annotationDatasets = annotationsData.map((annotation, index) => {
-      const color = annotation.color ?? COLORS[index];
-
-      // Create an annotation dataset
-      return {
-        isAnnotation: true,
-        label: annotation.label,
-        annotationIndex: index,
-        backgroundColor: color,
-        pointBackgroundColor: color,
-        borderColor: color,
-        data: [{}],
-      };
-    });
-
-    // Add annotation datasets to the copyDataset array
-    copyDataset.push(...annotationDatasets);
-  }
-
-  // Map over the copyDataset array and generate line chart datasets with applied settings and configurations
-  return copyDataset.map((line, i) => {
-    // Destructure properties from the line, state, and graph objects
-    const {
-      formation,
-      data = [],
-      pointRadius,
-      pointHoverRadius,
-      borderWidth,
-      borderColor,
-      backgroundColor,
-      pointBackgroundColor,
-      borderDash,
-    } = line ?? {};
-    const { lineEnabled, pointsEnabled, axes = [] } = state ?? {};
-    const { lineTension, spanGaps } = graph ?? {};
-
-    // Adjust the start and end points of the line if it has a formation flag
-    if (formation) {
-      const axesMin = axes[0]?.min;
-      const axesMax = axes[0]?.max;
-      const [startPoint, midPointWithLabel, endPoint] = data;
-
-      if (axesMin && startPoint?.x) {
-        data[0].x = Math.max(axesMin, startPoint.x);
-      }
-
-      if (axesMax && endPoint?.x) {
-        data[2].x = Math.min(axesMax, endPoint.x);
-      }
-    }
-
-    // Remove invalid falsy data points (OW-9855)
-    const filteredData = data.filter(Boolean) || [];
-
-    const linePointRadius = parseFloat(pointRadius) || DEFAULT_POINT_RADIUS;
-    const hoverRadius = parseFloat(pointHoverRadius) || DEFAULT_HOVER_RADIUS;
-    const indexedColor = COLORS[i];
-
-    // Return the dataset with applied settings and configurations
-    return {
-      ...line,
-      label: line.label || `${label} ${i + 1}`,
-      data: filteredData,
-      showLine: lineEnabled,
-      lineTension,
-      spanGaps,
-      borderWidth: parseFloat(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: pointsEnabled ? linePointRadius : DEFAULT_LINE_POINT_RADIUS,
-      pointHoverRadius: hoverRadius,
-      pointHitRadius: line.pointHitRadius ?? hoverRadius,
-    };
-  });
-};

package/src/components/line-chart/utils/get-axes-ranges-from-chart.js

@@ -1,13 +0,0 @@
-export const getAxesRangesFromChart = (chartRef, axes) => {
-  const { scales = {} } = chartRef.current || {};
-  return Object.entries(scales).map(([key, { min, max }], i) => {
-    const axesArray = axes.x.concat(axes.y);
-    const unit = axesArray?.[i]?.unit;
-    return {
-      id: key,
-      min,
-      max,
-      ...(unit ? { unit } : {}),
-    };
-  });
-};

package/src/components/line-chart/utils/get-line-chart-data-labels.js

@@ -1,21 +0,0 @@
-import { AUTO } from '../../../helpers/chart-consts';
-import { getPosition } from './datalabels-alignment/get-datalabels-position';
-
-/**
- * adjusts the position of the label depends on chart area
- *
- * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
- * @return {object} - returning position, if label exist in datasets item
- */
-const getLineChartDataLabels = (options) => {
-  return options.graph.showDataLabels
-    ? {
-        display: AUTO,
-        align: getPosition(),
-        formatter: (value, context) =>
-          context.dataset.data[context.dataIndex].label || '',
-      }
-    : { display: false };
-};
-
-export default getLineChartDataLabels;

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

@@ -1,120 +0,0 @@
-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 } = 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/utils/get-line-chart-tooltips.js

@@ -1,94 +0,0 @@
-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/utils/line-chart-utils.js

@@ -1,77 +0,0 @@
-import { toNum as toNumber } from '@oliasoft-open-source/units';
-
-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];
-};
-
-/**
- * Generates a key based on an array of values. The key changes
- * if any of the values in the array change.
- *
- * @param {Array} values - The array of values to base the key on.
- * @returns {String} The key.
- */
-export const generateKey = (values) => {
-  const key = values.join('');
-  return key;
-};
-
-/**
- * Checks if a value is a primitive value (which includes strings, numbers, booleans, and null).
- * @param {*} value - The value to check.
- * @returns {boolean} - Returns true if the value is a primitive value, otherwise false.
- */
-export const isPrimitiveValue = (value) =>
-  typeof value === 'string' ||
-  typeof value === 'number' ||
-  typeof value === 'boolean' ||
-  value === null;

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

@@ -1,17 +0,0 @@
-import { defaultTranslations } from '../../constants/default-translations';
-
-/**
- * Merges custom getTranslations with the default getTranslations.
- * If a custom translation is provided for a key, it will override the default one.
- * @param {object} translations - Custom getTranslations.
- * @returns {object} - The resulting getTranslations object, containing both default and custom getTranslations.
- */
-export const getTranslations = (translations = {}) => {
-  return Object.keys(defaultTranslations).reduce(
-    (acc, key) => ({
-      ...acc,
-      [key]: translations[key] || defaultTranslations[key],
-    }),
-    {},
-  );
-};

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

@@ -1,111 +0,0 @@
-import PropTypes from 'prop-types';
-
-export const PieChartPropTypes = {
-  chart: PropTypes.shape({
-    testId: PropTypes.string,
-    data: PropTypes.shape({
-      labels: PropTypes.arrayOf(PropTypes.string),
-      datasets: PropTypes.arrayOf(PropTypes.object).isRequired,
-    }).isRequired,
-    options: PropTypes.shape({
-      title: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string),
-      ]),
-      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,
-      }),
-      tooltip: PropTypes.shape({
-        tooltips: PropTypes.bool,
-        showLabelsInTooltips: PropTypes.bool,
-      }),
-      graph: PropTypes.shape({
-        showDataLabels: PropTypes.bool,
-        stacked: PropTypes.bool,
-        cutout: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-      }),
-      legend: PropTypes.shape({
-        display: PropTypes.bool,
-        position: PropTypes.oneOf(['top', 'bottom', 'right']),
-        align: PropTypes.oneOf(['start', 'center', 'end']),
-        useDataset: PropTypes.bool,
-      }),
-      chartOptions: PropTypes.shape({
-        enableZoom: PropTypes.bool,
-        enablePan: PropTypes.bool,
-      }),
-      interactions: PropTypes.shape({
-        onLegendClick: PropTypes.func,
-        onPieHover: PropTypes.func,
-        onPieUnhover: PropTypes.func,
-      }),
-    }),
-  }).isRequired,
-};
-
-export const getDefaultProps = (props) => {
-  // Add missing nested objects
-  props.chart.options = props.chart.options || {};
-  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.legend = props.chart.options.legend || {};
-  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 || '',
-      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 != null
-            ? props.chart.options.chartStyling.performanceMode
-            : true,
-      },
-      tooltip: {
-        tooltips:
-          props.chart.options.tooltip.tooltips != null
-            ? props.chart.options.tooltip.tooltips
-            : true,
-        showLabelsInTooltips:
-          props.chart.options.tooltip.showLabelsInTooltips || false,
-      },
-      graph: {
-        showDataLabels: props.chart.options.graph.showDataLabels || false,
-        stacked: props.chart.options.graph.stacked || false,
-        cutout: props.chart.options.graph.cutout || 0,
-      },
-      legend: {
-        display:
-          props.chart.options.legend.display != null
-            ? props.chart.options.legend.display
-            : true,
-        useDataset: props.chart.options.legend.useDataset || false,
-        position: props.chart.options.legend.position || 'bottom',
-        align: props.chart.options.legend.align || 'center',
-      },
-      chartOptions: {
-        enableZoom: props.chart.options.chartOptions.enableZoom || false,
-        enablePan: props.chart.options.chartOptions.enablePan || false,
-      },
-      interactions: {
-        onLegendClick: props.chart.options.interactions.onLegendClick,
-        onPieHover: props.chart.options.interactions.onPieHover,
-        onPieUnhover: props.chart.options.interactions.onPieUnhover,
-      },
-    },
-  };
-  return chart;
-};

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

@@ -1,32 +0,0 @@
-export const colors = [
-  '#3366cc',
-  '#dc3912',
-  '#ff9900',
-  '#109618',
-  '#990099',
-  '#0099c6',
-  '#dd4477',
-  '#66aa00',
-  '#b82e2e',
-  '#316395',
-  '#994499',
-  '#22aa99',
-  '#aaaa11',
-  '#6633cc',
-  '#e67300',
-  '#8b0707',
-  '#651067',
-  '#329262',
-  '#5574a6',
-  '#3b3eac',
-];
-
-export const generateRandomColor = () => {
-  const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
-  if (colors.includes(color)) {
-    return generateRandomColor();
-  } else {
-    colors.push(color);
-    return color;
-  }
-};

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

@@ -1,61 +0,0 @@
-export interface IChartInteractions {
-    onLegendClick: () => any;
-    onPointHover: () => any;
-    onPointUnhover: () => any;
-}
-
-export interface IChartOptions {
-    enableZoom: boolean;
-    enablePan: boolean;
-}
-
-export interface IChartLegend {
-    display: boolean;
-    position: 'top' | 'bottom' | 'right';
-    align: 'start' | 'center' | 'end';
-    useDataset: boolean;
-}
-
-export interface IChartGraph {
-    showDataLabels: boolean;
-    stacked: boolean;
-    cutout: number | string;
-}
-
-export interface IChartTooltip {
-    tooltips: boolean;
-    showLabelsInTooltips: boolean;
-}
-
-export interface IChartStyling {
-    width: number | string;
-    height: number | string;
-    maintainAspectRatio: boolean;
-    staticChartHeight: boolean;
-    performanceMode: boolean;
-}
-
-export interface IOptions {
-    title: string | string[];
-    chartStyling: IChartStyling;
-    tooltip: IChartTooltip;
-    graph: IChartGraph;
-    legend: IChartLegend;
-    chartOptions: IChartOptions;
-    interactions: IChartInteractions;
-}
-
-export interface IChartData {
-    labels: string;
-    datasets: any[];
-}
-
-export interface IChartData {
-    testId: string | null;
-    data: IChartData;
-    options: IOptions;
-}
-
-export interface IPieChartProps {
-    chart: IChartData;
-}