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

package/src/components/line-chart/plugins/chart-area-text-plugin.js

@@ -1,246 +0,0 @@
-import { TextLabelPosition } from './plugin-constants';
-import { AlignOptions } from '../../../helpers/enums';
-
-const WORD_SEPARATOR = ' ';
-const SEMI_TRANSPARENT = 'rgba(0, 0, 0, 0.5)';
-
-/**
- * Splits the input text into words based on the predefined WORD_SEPARATOR.
- * If the input is an array, it first joins the array and then splits it.
- *
- * @param {string | string[]} text - The text to split into words.
- * @returns {string[]} An array of words.
- */
-const getWords = (text) => {
-  return (Array.isArray(text) ? text.join(WORD_SEPARATOR) : text).split(
-    WORD_SEPARATOR,
-  );
-};
-
-/**
- * Renders the lines of text on the canvas context.
- * It iterates over the array of lines and renders each line with the provided styling.
- *
- * @param {CanvasRenderingContext2D} ctx - The canvas rendering context to draw on.
- * @param {string[]} lines - The array of lines to be rendered.
- * @param {number} lineHeight - The height of each line.
- * @param {number} x - The x-coordinate of the starting position.
- * @param {number} y - The y-coordinate of the starting position.
- * @param {string} position - The position for the text (one of the values from the TextLabelPosition enum).
- */
-const drawText = (ctx, lines, lineHeight, x, y, position) => {
-  lines.forEach((line, index) => {
-    const lineY = position.includes('top')
-      ? y + lineHeight * (index + 1) - 5
-      : y - (lines.length - 1 - index) * lineHeight;
-    ctx.fillText(line, x, lineY);
-  });
-};
-
-/**
- * Calculates the maximum width for the text based on the initial maximum width
- * and the chart area width.
- * @param {number} initialMaxWidth - The initial maximum width.
- * @param {number} chartAreaWidth - The width of the chart area.
- * @returns {number} The updated maximum width.
- */
-const calculateMaxWidth = (initialMaxWidth, chartAreaWidth) => {
-  const factorMiddle = 0.5;
-  const factorSmall = 0.7;
-  const maxWidthFactor =
-    chartAreaWidth < 500
-      ? factorMiddle
-      : chartAreaWidth < 700
-      ? factorSmall
-      : 1;
-  return initialMaxWidth * maxWidthFactor;
-};
-
-/**
- * Determines the legend dimensions (width and height) based on its position.
- *
- * @param {object} chart - The Chart.js chart object.
- * @returns {object} An object containing the legend width and height.
- */
-const getLegendDimensions = (chart) => {
-  const { legend } = chart;
-
-  const legendWidth =
-    legend && legend.display && legend.options.position === 'left'
-      ? legend.width + legend.options.labels.padding * 2
-      : 0;
-
-  const legendHeight =
-    legend &&
-    legend.display &&
-    (legend.options.position === 'top' || legend.options.position === 'bottom')
-      ? legend.height + legend.options.labels.padding * 2
-      : 0;
-
-  return { legendWidth, legendHeight };
-};
-
-/**
- * Determines the X and Y coordinates for the provided position.
- *
- * @param {string} position - The position for the text (one of the values from the TextLabelPosition enum).
- * @param {object} chart - The Chart.js chart object.
- * @param {number} xOffset - The horizontal offset from the specified position.
- * @param {number} yOffset - The vertical offset from the specified position.
- * @returns {number[]} An array with the X and Y coordinates.
- */
-const getPositionCoordinates = (position, chart, xOffset, yOffset) => {
-  const { chartArea, width } = chart;
-  const temporaryChartAreaRight = width - 8;
-
-  const { legendWidth, legendHeight } = getLegendDimensions(chart);
-
-  switch (position) {
-    case TextLabelPosition.TOP_LEFT:
-      return [
-        chartArea.left + xOffset + legendWidth,
-        chartArea.top + yOffset + legendHeight,
-      ];
-    case TextLabelPosition.TOP_CENTER:
-      return [
-        chartArea.left + chartArea.width / 2,
-        chartArea.top + yOffset + legendHeight,
-      ];
-    case TextLabelPosition.TOP_RIGHT:
-      return [
-        temporaryChartAreaRight - xOffset, //replace within chartArea.right when resize bug will be fixed
-        chartArea.top + yOffset + legendHeight,
-      ];
-    case TextLabelPosition.MIDDLE_LEFT:
-      return [
-        chartArea.left + xOffset + legendWidth,
-        chartArea.top + chartArea.height / 2,
-      ];
-    case TextLabelPosition.MIDDLE_CENTER:
-      return [
-        chartArea.left + chartArea.width / 2,
-        chartArea.top + chartArea.height / 2,
-      ];
-    case TextLabelPosition.MIDDLE_RIGHT:
-      return [
-        temporaryChartAreaRight - xOffset - legendWidth, //replace within chartArea.right when resize bug will be fixed
-        chartArea.top + chartArea.height / 2,
-      ];
-    case TextLabelPosition.BOTTOM_LEFT:
-      return [
-        chartArea.left + xOffset + legendWidth,
-        chartArea.bottom - yOffset - legendHeight,
-      ];
-    case TextLabelPosition.BOTTOM_CENTER:
-      return [
-        chartArea.left + chartArea.width / 2,
-        chartArea.bottom - yOffset - legendHeight,
-      ];
-    case TextLabelPosition.BOTTOM_RIGHT:
-    default:
-      return [
-        temporaryChartAreaRight - xOffset - legendWidth, //replace within chartArea.right when resize bug will be fixed
-        chartArea.bottom - yOffset - legendHeight,
-      ];
-  }
-};
-
-/**
- * Determines the appropriate text alignment based on the position provided.
- *
- * @param {string} position - The position for the text (one of the values from the TextLabelPosition enum).
- * @returns {string} The text alignment ('left', 'center', or 'right').
- */
-const getTextAlign = (position) => {
-  if (position.includes(AlignOptions.Center)) {
-    return AlignOptions.Center;
-  } else if (position.includes(AlignOptions.Left)) {
-    return AlignOptions.Left;
-  } else {
-    return AlignOptions.Right;
-  }
-};
-
-/**
- * Wraps the text into lines based on the maxWidth provided.
- *
- * @param {string[]} words - The array of words to be processed.
- * @param {number} maxWidth - The maximum width allowed for the text.
- * @param {CanvasRenderingContext2D} ctx - The canvas rendering context to measure the text width.
- * @returns {string[]} An array of wrapped lines.
- */
-const wrapText = (words, maxWidth, ctx) => {
-  let line = '';
-  let lines = [];
-  for (let i = 0; i < words.length; i++) {
-    const testLine = `${line}${words[i]}${WORD_SEPARATOR}`;
-    const { width: testWidth } = ctx.measureText(testLine);
-    if (testWidth > maxWidth) {
-      lines.push(line.trim());
-      line = `${words[i]}${WORD_SEPARATOR}`;
-    } else {
-      line = testLine;
-    }
-  }
-  lines.push(line.trim()); // Add the last line
-  return lines;
-};
-
-/**
- * Renders the wrapped text on the canvas context.
- *
- * @param {CanvasRenderingContext2D} ctx - The canvas rendering context to draw on.
- * @param {object} options - The options object containing text, maxWidth, fontSize, lineHeight, position, and coordinates (x, y).
- */
-const renderWrappedText = (ctx, options) => {
-  const { text, maxWidth, fontSize, lineHeight, x, y, position } = options;
-
-  const words = getWords(text);
-  const wrappedLines = wrapText(words, maxWidth, ctx);
-
-  ctx.save();
-  ctx.font = `${fontSize}px Arial`;
-  ctx.fillStyle = SEMI_TRANSPARENT;
-  ctx.textAlign = getTextAlign(position);
-
-  drawText(ctx, wrappedLines, lineHeight, x, y, position);
-
-  ctx.restore();
-};
-
-export const chartAreaTextPlugin = {
-  id: 'chartAreaText',
-
-  beforeDraw: (chart, args, options) => {
-    const {
-      showLabel,
-      text,
-      fontSize,
-      xOffset,
-      yOffset,
-      lineHeight,
-      maxWidth: initialMaxWidth,
-      position,
-    } = options;
-    const { ctx, chartArea } = chart;
-
-    if (!showLabel || !text) return;
-
-    // Determine the maxWidth based on chartArea width
-    const maxWidth = calculateMaxWidth(initialMaxWidth, chartArea.width);
-
-    // Get the position coordinates
-    const [x, y] = getPositionCoordinates(position, chart, xOffset, yOffset);
-
-    // Render the wrapped text
-    renderWrappedText(ctx, {
-      text,
-      maxWidth,
-      fontSize,
-      lineHeight,
-      x,
-      y,
-      position,
-    });
-  },
-};

package/src/components/line-chart/plugins/line-chart.minor-gridlines-plugin.js

@@ -1,88 +0,0 @@
-const MINOR_TICKS_PER_MAJOR = 10;
-
-// Return largest gap between ticks
-// (Tick distance may not be consistent if ranges are custom)
-export const getLargestMajorTickWidth = (majorTickPositions) => {
-  return majorTickPositions.reduce((acc, curr, index) => {
-    if (index === 0) return acc;
-    const gap = Math.abs(curr - majorTickPositions[index - 1]);
-    return Math.max(gap, acc);
-  }, 0);
-};
-
-// Check if position is in visible part of axis scale
-// Check position does not duplicate a major tick
-export const isValidPosition = (
-  minorTickPosition,
-  majorTickPositions,
-  scale,
-) => {
-  const { axis, left, top, right, bottom } = scale;
-  const isHorizontal = axis === 'x';
-  const start = isHorizontal ? left : top;
-  const end = isHorizontal ? right : bottom;
-  const isAfterStart = minorTickPosition > start;
-  const isBeforeEnd = minorTickPosition < end;
-  const isDuplicate = majorTickPositions.indexOf(minorTickPosition) !== -1;
-  return isAfterStart && isBeforeEnd && !isDuplicate;
-};
-
-// Generate minor tick positions for a given axis/scale
-// (Uses second tick as starting point in case first tick is an irregular custom value)
-export const getMinorTickPositions = (majorTickPositions, scale) => {
-  const sortedMajorTickPositions = majorTickPositions.sort((a, b) => {
-    return a - b;
-  });
-  const minorTickWidth = getLargestMajorTickWidth(majorTickPositions) / 10;
-  const startPosition = majorTickPositions[0];
-  const numMinorTicks = (majorTickPositions.length + 1) * MINOR_TICKS_PER_MAJOR;
-  const positions = [...Array(numMinorTicks)]
-    .map((_, index) => {
-      const minorTickPosition =
-        startPosition + (index - MINOR_TICKS_PER_MAJOR + 1) * minorTickWidth;
-      return parseFloat(minorTickPosition.toFixed(1));
-    })
-    .filter((position) =>
-      isValidPosition(position, sortedMajorTickPositions, scale),
-    );
-  return positions;
-};
-
-const drawMinorTicksForScale = (scale) => {
-  const { chart, ctx } = scale;
-  if (!chart.config._config.options.scales[scale.id].grid.drawOnChartArea)
-    return;
-  if (chart.config._config.options.indexAxis === scale.axis) return;
-  const isHorizontal = scale.axis === 'x';
-  const majorTickPositions = scale.ticks
-    .map((_, index) => scale.getPixelForTick(index))
-    .sort((a, b) => a - b);
-  const minorTickPositions = getMinorTickPositions(majorTickPositions, scale);
-  ctx.save();
-  ctx.strokeStyle =
-    chart.config._config.options.scales[scale.id].grid.color ||
-    'rgba(0,0,0,0.06)';
-  ctx.lineWidth = 0.5;
-  minorTickPositions.forEach((minorTickPosition) => {
-    ctx.beginPath();
-    if (isHorizontal) {
-      const { top, bottom } = chart.chartArea;
-      ctx.moveTo(minorTickPosition, top);
-      ctx.lineTo(minorTickPosition, bottom);
-    } else {
-      const { left, right } = chart.chartArea;
-      ctx.moveTo(left, minorTickPosition);
-      ctx.lineTo(right, minorTickPosition);
-    }
-    ctx.stroke();
-  });
-  ctx.restore();
-};
-
-export const chartMinorGridlinesPlugin = {
-  id: 'minorGridlines',
-  beforeDatasetsDraw: (chart) => {
-    const { scales } = chart;
-    Object.keys(scales).forEach((id) => drawMinorTicksForScale(scales[id]));
-  },
-};

package/src/components/line-chart/plugins/plugin-constants.js

@@ -1,11 +0,0 @@
-export const TextLabelPosition = {
-  TOP_LEFT: 'top-left',
-  TOP_CENTER: 'top-center',
-  TOP_RIGHT: 'top-right',
-  MIDDLE_LEFT: 'middle-left',
-  MIDDLE_CENTER: 'middle-center',
-  MIDDLE_RIGHT: 'middle-right',
-  BOTTOM_LEFT: 'bottom-left',
-  BOTTOM_CENTER: 'bottom-center',
-  BOTTOM_RIGHT: 'bottom-right',
-};

package/src/components/line-chart/state/action-types.js

@@ -1,12 +0,0 @@
-export const TOGGLE_ZOOM = 'TOGGLE_ZOOM';
-export const TOGGLE_PAN = 'TOGGLE_PAN';
-export const TOGGLE_POINTS = 'TOGGLE_POINTS';
-export const TOGGLE_LINE = 'TOGGLE_LINE';
-export const TOGGLE_LEGEND = 'TOGGLE_LEGEND';
-export const TOGGLE_ANNOTATION = 'TOGGLE_ANNOTATION';
-export const TOGGLE_TABLE = 'TOGGLE_TABLE';
-export const SAVE_INITIAL_AXES_RANGES = 'SAVE_INITIAL_AXES_RANGES';
-export const RESET_AXES_RANGES = 'RESET_AXES_RANGES';
-export const UPDATE_AXES_RANGES = 'UPDATE_AXES_RANGES';
-export const TOGGLE_DRAG_POINTS = 'TOGGLE_DRAG_POINTS';
-export const DISABLE_DRAG_OPTIONS = 'DISABLE_DRAG_OPTIONS';

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

@@ -1,89 +0,0 @@
-import { AxisType } from '../../../helpers/enums';
-import { setAnnotations } from '../../../helpers/chart-utils';
-import { generateAxisId } from '../utils/line-chart-utils';
-import { getChartStateFromStorage } from './manage-state-in-local-storage';
-
-/**
- Initial chart state for the line chart.
-
- @param {Object} options - The chart options.
- @return {Object} The initial chart state.
- */
-const initialState = ({ options, persistenceId }) => {
-  const {
-    additionalAxesOptions: { range: customAxesRange },
-    annotations: { annotationsData },
-    axes,
-    chartOptions: { enableZoom, enablePan, showPoints, showLine },
-    legend: { display },
-    dragData,
-  } = options;
-  /**
-   * getStateAxesByType
-   * @param {'x'|'y'} axisType
-   * @param {Object} customAxesRange
-   * @return {{id: string}[] | []} returns array of objects describing all chart axis or empty array
-   */
-  const getStateAxesByType = (axisType, customAxesRange) => {
-    if (!axes[axisType]) {
-      return [];
-    }
-
-    if (axes[axisType]?.length > 1) {
-      return axes[axisType].map((axisObj, index) => {
-        const id = generateAxisId(axisType, index, axes[axisType].length > 1);
-        const customMin = customAxesRange?.[id]?.min;
-        const customMax = customAxesRange?.[id]?.max;
-        const { unit } = axisObj;
-        return {
-          id,
-          //only add custom axis ranges if defined:
-          ...(customMin ? { min: customMin } : {}),
-          ...(customMax ? { max: customMax } : {}),
-          ...(unit ? { unit } : {}),
-        };
-      });
-    } else {
-      const id = generateAxisId(axisType);
-      const customMin = customAxesRange?.[id]?.min;
-      const customMax = customAxesRange?.[id]?.max;
-      const unit = axes?.[id][0].unit;
-      return [
-        {
-          id,
-          //only add custom axis ranges if defined:
-          ...(customMin ? { min: customMin } : {}),
-          ...(customMax ? { max: customMax } : {}),
-          ...(unit ? { unit } : {}),
-        },
-      ];
-    }
-  };
-
-  const xStateAxes = getStateAxesByType(AxisType.X, customAxesRange);
-  const yStateAxes = getStateAxesByType(AxisType.Y, customAxesRange);
-  const stateAxes = [...xStateAxes, ...yStateAxes];
-
-  const {
-    zoomEnabled,
-    panEnabled,
-    pointsEnabled,
-    lineEnabled,
-    legendEnabled,
-    enableDragPoints,
-  } = getChartStateFromStorage(persistenceId) || {};
-
-  return {
-    zoomEnabled: zoomEnabled ?? enableZoom,
-    panEnabled: panEnabled ?? enablePan,
-    pointsEnabled: pointsEnabled ?? showPoints,
-    lineEnabled: lineEnabled ?? showLine,
-    legendEnabled: legendEnabled ?? display,
-    axes: stateAxes,
-    showAnnotationLineIndex: setAnnotations(annotationsData),
-    showTable: false,
-    enableDragPoints: dragData.enableDragData && enableDragPoints,
-  };
-};
-
-export default initialState;

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

@@ -1,101 +0,0 @@
-import { produce } from 'immer';
-import {
-  DISABLE_DRAG_OPTIONS,
-  RESET_AXES_RANGES,
-  SAVE_INITIAL_AXES_RANGES,
-  TOGGLE_ANNOTATION,
-  TOGGLE_DRAG_POINTS,
-  TOGGLE_LEGEND,
-  TOGGLE_LINE,
-  TOGGLE_PAN,
-  TOGGLE_POINTS,
-  TOGGLE_TABLE,
-  TOGGLE_ZOOM,
-  UPDATE_AXES_RANGES,
-} from './action-types';
-
-export const reducer = (state, action) => {
-  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;
-      }
-      case TOGGLE_PAN: {
-        draft.panEnabled = !draft.panEnabled;
-        if (draft.zoomEnabled) {
-          draft.zoomEnabled = false;
-        }
-        break;
-      }
-      case TOGGLE_POINTS: {
-        draft.pointsEnabled = !draft.pointsEnabled;
-        break;
-      }
-      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;
-        break;
-      }
-      case UPDATE_AXES_RANGES: {
-        const { axes } = action.payload;
-        draft.axes = axes;
-        break;
-      }
-      case RESET_AXES_RANGES: {
-        const { initialAxesRanges } = draft;
-        draft.axes = initialAxesRanges.map((axis) => ({
-          id: axis.id,
-          ...(axis.unit && { unit: axis.unit }),
-        }));
-        break;
-      }
-      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;
-      }
-      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;
-      }
-    }
-  });
-};

package/src/components/line-chart/state/manage-state-in-local-storage.js

@@ -1,86 +0,0 @@
-/**
- * Retrieves the chart state from local storage.
- *
- * @param {string|''} persistenceId - The chart persistenceId.
- * @returns {object|null} The chart state object or null if not found.
- */
-export const getChartStateFromStorage = (persistenceId) => {
-  if (!persistenceId) return null;
-
-  // Retrieve the chart state object from local storage
-  const chartStateKey = `line-chart-state-${persistenceId}`;
-  const chartStateObjectJSON = localStorage.getItem(chartStateKey);
-
-  if (chartStateObjectJSON) {
-    // If the chart state object was found, parse it
-    const chartStateObject = JSON.parse(chartStateObjectJSON);
-
-    // Return the state property of the parsed chart state object
-    return chartStateObject.state;
-  }
-
-  // If the chart state object was not found, return null
-  return null;
-};
-
-/**
- * Remove expired chart states from local storage.
- *
- * @param {number} maxAgeInHours - The maximum age of chart states to keep in local storage (in hours). Default is 72 hours.
- */
-const removeExpiredChartStates = (maxAgeInHours = 72) => {
-  const currentTime = new Date().getTime();
-  const maxAgeInMilliseconds = maxAgeInHours * 60 * 60 * 1000;
-
-  // Iterate through all keys in local storage
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
-
-    // Check if the key is related to a line-chart-state
-    if (key.includes('line-chart-state-')) {
-      const chartStateObjectJSON = localStorage.getItem(key);
-
-      // If a valid chart state object JSON is found
-      if (chartStateObjectJSON) {
-        const chartStateObject = JSON.parse(chartStateObjectJSON);
-        const storedTime = chartStateObject.timestamp;
-
-        // If a valid timestamp is found
-        if (storedTime) {
-          const ageInMilliseconds = currentTime - storedTime;
-
-          // If the age of the chart state is older than the specified maxAgeInHours
-          if (ageInMilliseconds > maxAgeInMilliseconds) {
-            // Remove the expired chart state from local storage
-            localStorage.removeItem(key);
-          }
-        }
-      }
-    }
-  }
-};
-
-/**
- * Stores the chart state in local storage.
- *
- * @param {object} state - The chart state object to store.
- * @param {string|''} persistenceId - The chart persistenceId.
- */
-export const storeChartStateInStorage = (state, persistenceId) => {
-  if (!persistenceId) return;
-
-  const currentTime = new Date().getTime();
-  const chartStateKey = `line-chart-state-${persistenceId}`;
-
-  // Create an object containing the chart state and the timestamp
-  const chartStateObject = {
-    state,
-    timestamp: currentTime,
-  };
-
-  // Serialize the chart state object as a JSON string and store it in local storage
-  localStorage.setItem(chartStateKey, JSON.stringify(chartStateObject));
-
-  // Remove expired chart states from local storage
-  removeExpiredChartStates();
-};