@oliasoft-open-source/charts-library 2.13.5 → 2.14.0-beta-1

package/src/components/line-chart/state/line-chart-reducer.js

@@ -15,104 +15,86 @@ import {
 } from './action-types';
 
 export const reducer = (state, action) => {
-  const newState = { ...state };
-  switch (action.type) {
-    case TOGGLE_ZOOM: {
-      newState.zoomEnabled = !newState.zoomEnabled;
-      if (newState.panEnabled) {
-        newState.panEnabled = false;
+  return produce(state, (draft) => {
+    switch (action.type) {
+      case TOGGLE_ZOOM: {
+        draft.zoomEnabled = !draft.zoomEnabled;
+        if (draft.panEnabled) {
+          draft.panEnabled = false;
+        }
+        if (draft.enableDragPoints) {
+          draft.enableDragPoints = false;
+        }
+        break;
       }
-      if (newState.enableDragPoints) {
-        newState.enableDragPoints = false;
+      case TOGGLE_PAN: {
+        draft.panEnabled = !draft.panEnabled;
+        if (draft.zoomEnabled) {
+          draft.zoomEnabled = false;
+        }
+        break;
       }
-      return newState;
-    }
-    case TOGGLE_PAN: {
-      newState.panEnabled = !newState.panEnabled;
-      if (newState.zoomEnabled) {
-        newState.zoomEnabled = false;
+      case TOGGLE_POINTS: {
+        draft.pointsEnabled = !draft.pointsEnabled;
+        break;
       }
-      return newState;
-    }
-    case TOGGLE_POINTS: {
-      return {
-        ...newState,
-        pointsEnabled: !newState.pointsEnabled,
-      };
-    }
-    case TOGGLE_LINE: {
-      return {
-        ...newState,
-        lineEnabled: !newState.lineEnabled,
-      };
-    }
-    case TOGGLE_LEGEND: {
-      return {
-        ...newState,
-        legendEnabled: !newState.legendEnabled,
-      };
-    }
-    case TOGGLE_TABLE: {
-      return {
-        ...newState,
-        showTable: !newState.showTable,
-      };
-    }
-    case SAVE_INITIAL_AXES_RANGES: {
-      return produce(state, (draft) => {
+      case TOGGLE_LINE: {
+        draft.lineEnabled = !draft.lineEnabled;
+        break;
+      }
+      case TOGGLE_LEGEND: {
+        draft.legendEnabled = !draft.legendEnabled;
+        break;
+      }
+      case TOGGLE_TABLE: {
+        draft.showTable = !draft.showTable;
+        break;
+      }
+      case SAVE_INITIAL_AXES_RANGES: {
         const { initialAxesRanges } = action.payload;
         draft.initialAxesRanges = initialAxesRanges;
-      });
-    }
-    case UPDATE_AXES_RANGES: {
-      return produce(state, (draft) => {
+        break;
+      }
+      case UPDATE_AXES_RANGES: {
         const { axes } = action.payload;
         draft.axes = axes;
-      });
-    }
-    case RESET_AXES_RANGES: {
-      return produce(state, (draft) => {
-        const { axes } = state;
+        break;
+      }
+      case RESET_AXES_RANGES: {
+        const { axes } = draft;
         draft.axes = axes.map((axis) => ({
           id: axis.id,
         }));
-      });
-    }
-    case TOGGLE_ANNOTATION:
-      const { annotationIndex } = action.payload;
-      const updatedIndexes = newState.showAnnotationLineIndex.includes(
-        annotationIndex,
-      )
-        ? newState.showAnnotationLineIndex.filter((v) => v !== annotationIndex)
-        : [...newState.showAnnotationLineIndex, annotationIndex];
-      return {
-        ...newState,
-        showAnnotationLineIndex: updatedIndexes,
-      };
-    case TOGGLE_DRAG_POINTS: {
-      newState.enableDragPoints = !newState.enableDragPoints;
-      if (newState.panEnabled) {
-        newState.panEnabled = false;
+        break;
       }
-      if (newState.zoomEnabled) {
-        newState.zoomEnabled = false;
+      case TOGGLE_ANNOTATION: {
+        const { annotationIndex } = action.payload;
+        const updatedIndexes = draft.showAnnotationLineIndex.includes(
+          annotationIndex,
+        )
+          ? draft.showAnnotationLineIndex.filter((v) => v !== annotationIndex)
+          : [...draft.showAnnotationLineIndex, annotationIndex];
+        draft.showAnnotationLineIndex = updatedIndexes;
+        break;
       }
-      return newState;
-    }
-    case DISABLE_DRAG_OPTIONS: {
-      if (
-        newState.enableDragPoints ||
-        newState.panEnabled ||
-        newState.zoomEnabled
-      ) {
-        newState.enableDragPoints = false;
-        newState.panEnabled = false;
-        newState.zoomEnabled = false;
+      case TOGGLE_DRAG_POINTS: {
+        draft.enableDragPoints = !draft.enableDragPoints;
+        if (draft.panEnabled) {
+          draft.panEnabled = false;
+        }
+        if (draft.zoomEnabled) {
+          draft.zoomEnabled = false;
+        }
+        break;
+      }
+      case DISABLE_DRAG_OPTIONS: {
+        if (draft.enableDragPoints || draft.panEnabled || draft.zoomEnabled) {
+          draft.enableDragPoints = false;
+          draft.panEnabled = false;
+          draft.zoomEnabled = false;
+        }
+        break;
       }
-      return newState;
-    }
-    default: {
-      return newState;
     }
-  }
+  });
 };

package/src/components/line-chart/state/use-chart-state.js

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { isEqual } from 'lodash';
 import { storeChartStateInStorage } from './manage-state-in-local-storage';
 import { SAVE_INITIAL_AXES_RANGES, UPDATE_AXES_RANGES } from './action-types';
-import { getAxesRangesFromChart } from '../get-axes-ranges-from-chart';
+import { getAxesRangesFromChart } from '../utils/get-axes-ranges-from-chart';
 
 /**
  * Hook for toggling the visibility of the custom legend.
@@ -103,6 +103,7 @@ const useSaveInitialAxesRanges = (chartRef, axes, dispatch) => {
  * @param chartRef - The reference to the chart.
  * @param options - The chart options.
  * @param state - The chart state.
+ * @param dispatch - The dispatch function for state management.
  * @param persistenceId - The chart persistenceId.
  */
 export const useChartState = ({

package/src/components/line-chart/{axis-scales → utils/axis-scales}/axis-scales.js

@@ -1,8 +1,8 @@
 import getLineChartScales from '../get-line-chart-scales';
-import { AxisType } from '../../../helpers/enums';
+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';
+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.

package/src/components/line-chart/{datalabels-alignment → utils/datalabels-alignment}/get-datalabels-position.js

@@ -1,6 +1,6 @@
 import { getCondition } from './get-alignment-condition';
 import { getAlignmentData } from './get-alignment-data';
-import { AlignOptions } from '../../../helpers/enums';
+import { AlignOptions } from '../../../../helpers/enums';
 
 /** returning position depends on condition
  *

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

@@ -0,0 +1,114 @@
+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 translations object containing translations string
+ * @returns {Array} - The generated line chart datasets with applied settings and configurations.
+ */
+export const generateLineChartDatasets = (
+  datasets,
+  state,
+  options,
+  translations,
+) => {
+  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 || `${translations.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/{get-line-chart-data-labels.js → utils/get-line-chart-data-labels.js}

@@ -1,10 +1,10 @@
-import { AUTO } from '../../helpers/chart-consts';
+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
+ * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
  * @return {object} - returning position, if label exist in datasets item
  */
 const getLineChartDataLabels = (options) => {

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

@@ -1,16 +1,16 @@
 import {
   generateRandomColor,
   getAxisPosition,
-} from '../../helpers/chart-utils';
-import { COLORS, LOGARITHMIC_STEPS } from '../../helpers/chart-consts';
+} 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';
+import { AxisType, ScaleType } from '../../../helpers/enums';
 
 /**
- * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @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 {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) => {
@@ -19,7 +19,7 @@ const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
     i
   ];
 
-  const { additionalAxesOptions, chartStyling } = options;
+  const { additionalAxesOptions } = options;
 
   const getTicks = () => {
     const truncateAxisNumbersToDigitsCallback = Number.isInteger(
@@ -77,9 +77,9 @@ const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
 };
 
 /**
- * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @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('../../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
  */
 const getLineChartAxes = (options, axisType, state) => {
   const axesData = options.axes[axisType];
@@ -97,8 +97,8 @@ const getLineChartAxes = (options, axisType, state) => {
 
 /**
  *
- * @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
+ * @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;

package/src/components/line-chart/{get-line-chart-tooltips.js → utils/get-line-chart-tooltips.js}

@@ -1,8 +1,11 @@
-import { ChartHoverMode, Position, TooltipLabel } from '../../helpers/enums';
-import { afterLabelCallback, getTooltipLabel } from '../../helpers/chart-utils';
+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
+ * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
  */
 const getLineChartToolTips = (options) => {
   const getTooltipLabels = (dataset) => {

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

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

package/src/helpers/chart-utils.js

@@ -3,8 +3,8 @@ import { defaults } from 'chart.js';
 import cx from 'classnames';
 import { chartMinorGridlinesPlugin } from '../components/line-chart/line-chart.minor-gridlines-plugin';
 import {
-  CUSTOM_LEGEND_PLUGIN_NAME,
   BORDER_COLOR,
+  CUSTOM_LEGEND_PLUGIN_NAME,
   DEFAULT_CHART_NAME,
   DEFAULT_COLOR,
   DEFAULT_FONT_FAMILY,
@@ -19,10 +19,9 @@ import { chartAreaBorderPlugin } from './chart-border-plugin';
  * @param {import('../components/bar-chart/bar-chart.interface').IBarChartGraph |
  * import('../components/line-chart/line-chart.interface').ILineChartGraph } graph - graph data from chart options
  * @param {import('../helpers/chart-interface').IChartLegend} legend
- * @param {import('./chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
  * @return {[]}
  */
-export const getPlugins = (graph, legend, state = null) => {
+export const getPlugins = (graph, legend) => {
   let plugins = [];
   if (graph.showMinorGridlines) {
     plugins.push(chartMinorGridlinesPlugin);
@@ -131,7 +130,7 @@ export const getClassName = (chartStyling, styles) => {
  * @returns {*}
  */
 export const getLegend = (options, clickHandler, state = null) => {
-  const { legend, chartStyling } = options;
+  const { legend } = options;
   return {
     position: legend.position || Position.Top,
     display: !legend?.customLegend?.customLegendPlugin
@@ -144,7 +143,6 @@ export const getLegend = (options, clickHandler, state = null) => {
       boxHeight: LEGEND_LABEL_BOX_SIZE,
       boxWidth: LEGEND_LABEL_BOX_SIZE,
       usePointStyle: true,
-      filter: (item, data) => !data.datasets[item.datasetIndex].hideLegend,
     },
     onClick: clickHandler,
   };

package/src/helpers/enums.js

@@ -85,3 +85,12 @@ export const PanZoomMode = Object.freeze({
 export const Key = Object.freeze({
   Shift: 'Shift',
 });
+
+export const Events = Object.freeze([
+  'mousemove',
+  'mouseout',
+  'click',
+  'touchstart',
+  'touchmove',
+  'dblclick',
+]);

package/src/components/controls/controls.jsx

@@ -1,114 +0,0 @@
-import React from 'react';
-import { Button, Text, Tooltip } from '@oliasoft-open-source/react-ui-library';
-import {
-  RiFileDownloadLine,
-  RiLineChartLine,
-  RiTableLine,
-} from 'react-icons/ri';
-import { LineOptions } from './line-options';
-import { DragOptions } from './drag-options';
-import { AxesOptions } from './axes-options/axes-options';
-import { LegendOptions } from './legend-options';
-import styles from './controls.module.less';
-
-const Controls = ({
-  axes,
-  controlsAxesLabels,
-  chart,
-  headerComponent,
-  legendEnabled,
-  lineEnabled,
-  onDownload,
-  onResetAxes,
-  onUpdateAxes,
-  onToggleLegend,
-  onToggleLine,
-  onTogglePan,
-  onTogglePoints,
-  onToggleTable,
-  onToggleZoom,
-  panEnabled,
-  pointsEnabled,
-  initialAxesRanges,
-  showTable,
-  subheaderComponent,
-  table,
-  zoomEnabled,
-  depthType,
-  enableDragPoints,
-  isDragDataAllowed,
-  onToggleDragPoints,
-  onDisableDragOptions,
-}) => {
-  return (
-    <>
-      <div className={styles.controls}>
-        {!!chart.options.title && <Text bold>{chart.options.title}</Text>}
-        {headerComponent}
-        <div className={styles.buttons}>
-          {!showTable && (
-            <>
-              <AxesOptions
-                initialAxesRanges={initialAxesRanges}
-                axes={axes}
-                controlsAxesLabels={controlsAxesLabels}
-                onUpdateAxes={onUpdateAxes}
-                onResetAxes={onResetAxes}
-                depthType={depthType}
-              />
-              <LineOptions
-                lineEnabled={lineEnabled}
-                pointsEnabled={pointsEnabled}
-                onToggleLine={onToggleLine}
-                onTogglePoints={onTogglePoints}
-              />
-              <LegendOptions
-                legendEnabled={legendEnabled}
-                onToggleLegend={onToggleLegend}
-              />
-              <Tooltip text="Download as PNG" placement="bottom-end">
-                <Button
-                  small
-                  basic
-                  colored="muted"
-                  round
-                  icon={<RiFileDownloadLine />}
-                  onClick={onDownload}
-                />
-              </Tooltip>
-              <DragOptions
-                panEnabled={panEnabled}
-                zoomEnabled={zoomEnabled}
-                onTogglePan={onTogglePan}
-                onToggleZoom={onToggleZoom}
-                enableDragPoints={enableDragPoints}
-                isDragDataAllowed={isDragDataAllowed}
-                onToggleDragPoints={onToggleDragPoints}
-                onDisableDragOptions={onDisableDragOptions}
-              />
-            </>
-          )}
-
-          {table ? (
-            <Tooltip
-              text={showTable ? 'Show chart' : 'Show table'}
-              placement="bottom-end"
-            >
-              <Button
-                small
-                basic
-                colored="muted"
-                round
-                icon={showTable ? <RiLineChartLine /> : <RiTableLine />}
-                onClick={onToggleTable}
-              />
-            </Tooltip>
-          ) : null}
-        </div>
-      </div>
-      {subheaderComponent}
-    </>
-  );
-};
-
-export default Controls;