@oliasoft-open-source/charts-library 3.3.6-beta-5 → 3.3.6

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

@@ -1,117 +0,0 @@
-import {
-  generateRandomColor,
-  getAxisPosition,
-} from '../../../helpers/chart-utils';
-import { COLORS, LOGARITHMIC_STEPS } from '../../../helpers/chart-consts';
-import { generateAxisId } from './line-chart-utils';
-import { AxisType, ScaleType } from '../../../helpers/enums';
-import { formatAxisLabelNumbers } from './axis-formatting/axis-formatting';
-
-/**
- * @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 ticksConfigFromProps =
-    options?.scales?.[`${i === 0 ? axisType : axisType + i}`]?.ticks;
-  const { additionalAxesOptions } = options;
-
-  const getTicks = () => {
-    const isLogarithmic =
-      additionalAxesOptions?.chartScaleType === ScaleType.Logarithmic;
-    const ticksFormattingCallback = (tick, _index, ticks) => {
-      return isLogarithmic
-        ? LOGARITHMIC_STEPS.includes(tick)
-          ? formatAxisLabelNumbers(tick, ticks)
-          : ''
-        : formatAxisLabelNumbers(tick, ticks);
-    };
-    const stepSize = !isLogarithmic
-      ? {
-          stepSize:
-            axisData.stepSize ??
-            (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null),
-        }
-      : {};
-    const ticks = {
-      ...stepSize,
-      callback: ticksFormattingCallback,
-      includeBounds: false, //OW-10088 disable irregular axis ticks
-      ...ticksConfigFromProps,
-      font: {
-        size: 14,
-      },
-    };
-    return 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,62 +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)
-  );
-};
-
-/**
- *
- * @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; x, x2 - in case of multiple axes
- */
-export const generateAxisId = (axisType, index = 0, hasMultiAxes = false) => {
-  const i = hasMultiAxes && index !== 0 ? 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;
-}