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

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

@@ -1,121 +0,0 @@
-import {
-    IChartAnnotations, IChartDraggableData,
-    IChartInteractions,
-    IChartLegend,
-    IChartStyling,
-} from "../../helpers/chart-interface";
-
-export interface IChartOptions {
-    showPoints: boolean;
-    enableZoom: boolean;
-    enablePan: boolean;
-    closeOnOutsideClick: boolean;
-}
-
-export interface ILineChartGraph {
-    lineTension: number;
-    spanGaps: boolean;
-    showDataLabels: boolean;
-    showMinorGridlines: boolean;
-}
-
-export interface ILineChartTooltip {
-    tooltips: boolean;
-    showLabelsInTooltips: boolean;
-    hideSimulationName: boolean;
-}
-
-
-export interface IChartRange {
-    min: number;
-    max: number;
-}
-
-export interface ILineChartAdditionalAxesOptions {
-    chartScaleType: 'linear' | 'logarithmic';
-    reverse: boolean;
-    beginAtZero: boolean;
-    stepSize: number;
-    truncateAxisNumbersToDigitsCallback: number;
-    suggestedMin: number;
-    suggestedMax:number;
-    range: {
-        x: IChartRange;
-        y: IChartRange;
-    };
-    autoAxisPadding: boolean;
-}
-
-export interface IUnitOptions {
-    options: string[],
-    selectedUnit: string,
-    setSelectedUnit: () => void,
-}
-
-export interface ILineChartAxis<PositionType> {
-    label: string;
-    position: PositionType;
-    color: string;
-    unit: IUnitOptions
-}
-
-export interface ILineChartAxes {
-    x: ILineChartAxis<'top' | 'bottom'>[];
-    y: ILineChartAxis<'left' | 'right'>[];
-}
-
-export interface IDepthType {
-    options: string[],
-    selectedUnit: string,
-    setSelectedUnit: () => void,
-}
-export interface ILineChartOptions {
-    title: string | string[];
-    axes: ILineChartAxes;
-    additionalAxesOptions: ILineChartAdditionalAxesOptions;
-    chartStyling: IChartStyling;
-    tooltip: ILineChartTooltip;
-    graph: ILineChartGraph;
-    annotations: IChartAnnotations;
-    legend: IChartLegend;
-    chartOptions: IChartOptions;
-    interactions: IChartInteractions;
-    depthType: IDepthType
-    draggableData :IChartDraggableData;
-}
-
-export interface IDataPoint {
-    x: number,
-    y: number,
-    label?: string[]
-}
-
-export interface ILineChartDataset {
-    label?: string,
-    lineTension?: number,
-    borderColor?: string,
-    pointBackgroundColor?: string,
-    backgroundColor?: string,
-    pointRadius?: number,
-    pointHoverRadius?: number,
-    pointHitRadius?: number,
-    borderWidth?: number,
-    fill?: boolean,
-    yAxisID?: string,
-    formation?: boolean,
-    data: IDataPoint[],
-}
-
-export interface ILineChartData {
-    //TODO: revisit data interface definition after project is more stable
-    testId: string | null;
-    data: {
-        labels?: string[],
-        datasets: ILineChartDataset[]
-    } | any;
-    options: ILineChartOptions;
-}
-
-export interface ILineChartProps {
-    chart: ILineChartData;
-}

package/src/components/line-chart/line-chart.jsx

@@ -1,161 +0,0 @@
-import React, { useMemo, useReducer, useRef } from 'react';
-import {
-  CategoryScale,
-  Chart as ChartJS,
-  Filler,
-  Legend,
-  LinearScale,
-  LineElement,
-  LogarithmicScale,
-  PointElement,
-  Title,
-  Tooltip,
-} from 'chart.js';
-import { Line } from 'react-chartjs-2';
-import zoomPlugin from 'chartjs-plugin-zoom';
-import dataLabelsPlugin from 'chartjs-plugin-datalabels';
-import annotationPlugin from 'chartjs-plugin-annotation';
-import dragDataPlugin from 'chartjs-plugin-dragdata';
-import styles from './line-chart.module.less';
-import { reducer } from './state/line-chart-reducer';
-import initialState from './state/initial-state';
-import Controls from './controls/controls';
-import { getDefaultProps, LineChartPropTypes } from './line-chart-prop-types';
-import { getClassName, setDefaultTheme } from '../../helpers/chart-utils';
-import { AUTO } from '../../helpers/chart-consts';
-import { generateLineChartDatasets } from './utils/generate-line-chart-datasets';
-import { useChartFunctions } from './hooks/use-chart-functions';
-import { useChartOptions } from './hooks/use-chart-options';
-import { useChartPlugins } from './hooks/use-chart-plugins';
-import { generateKey } from './utils/line-chart-utils';
-import { useChartState } from './state/use-chart-state';
-import { chartAreaTextPlugin } from './plugins/chart-area-text-plugin';
-import { getConfig } from './initialize/config';
-
-ChartJS.register(
-  LinearScale,
-  PointElement,
-  LineElement,
-  CategoryScale,
-  LogarithmicScale,
-  Legend,
-  Tooltip,
-  Title,
-  Filler,
-  zoomPlugin,
-  dataLabelsPlugin,
-  annotationPlugin,
-  dragDataPlugin,
-  chartAreaTextPlugin,
-);
-
-/**
- * this is a line chart component
- * @param {import('./line-chart.interface').ILineChartProps} props
- */
-const LineChart = (props) => {
-  setDefaultTheme();
-  const chartRef = useRef(null);
-  const { table } = props;
-  const { translations, languageKey } = getConfig();
-  const chart = getDefaultProps(props);
-  const {
-    data: { datasets },
-    options,
-    testId,
-    persistenceId,
-  } = chart;
-  const { annotations, axes, chartStyling, graph } = options;
-
-  /**
-   * @type {[object, import('react').Dispatch<{type: String, payload: any}>]}  useReducer
-   */
-  const [state, dispatch] = useReducer(
-    reducer,
-    {
-      options,
-      persistenceId,
-    },
-    initialState,
-  );
-
-  const generatedDatasets = useMemo(() => {
-    return generateLineChartDatasets(datasets, state, options, translations);
-  }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
-
-  // Call the custom hooks.
-  useChartState({
-    chartRef,
-    options,
-    state,
-    generatedDatasets,
-    dispatch,
-    persistenceId,
-  });
-
-  const { resetZoom, handleKeyDown, handleKeyUp } = useChartFunctions({
-    chartRef,
-    state,
-    options,
-    dispatch,
-    generatedDatasets,
-  });
-
-  const useOptions = useChartOptions({
-    chartRef,
-    state,
-    options,
-    dispatch,
-    generatedDatasets,
-  });
-
-  const usePlugins = useChartPlugins({ options, resetZoom });
-
-  return (
-    <div
-      key={generateKey([
-        state.enableDragPoints,
-        state.zoomEnabled,
-        state.panEnabled,
-        languageKey,
-      ])}
-      className={getClassName(chartStyling, styles)}
-      style={{
-        width: chartStyling.width || AUTO,
-        height: chartStyling.height || AUTO,
-      }}
-      tabIndex={0} //eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-      onKeyDown={handleKeyDown}
-      onKeyUp={handleKeyUp}
-      data-testid={testId}
-    >
-      <Controls
-        props={props}
-        chartRef={chartRef}
-        state={state}
-        options={options}
-        dispatch={dispatch}
-        generatedDatasets={generatedDatasets}
-        translations={translations}
-      />
-      {table && state.showTable ? (
-        <div className={styles.table}>{table}</div>
-      ) : (
-        <div className={styles.canvas}>
-          <Line
-            ref={chartRef}
-            data={{
-              datasets: generatedDatasets,
-            }}
-            options={useOptions}
-            plugins={usePlugins}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-LineChart.propTypes = LineChartPropTypes;
-
-export { LineChart };

package/src/components/line-chart/line-chart.module.less

@@ -1,77 +0,0 @@
-html[data-theme='dark'] .chart canvas {
-  // Flip chart colors if dark mode enabled
-  filter: invert(1) hue-rotate(180deg);
-}
-
-.chart {
-  border: 1px solid rgba(255, 255, 255, 0);
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px; // Spacing between each section
-
-  .canvas {
-    flex-grow: 1;
-    min-height: 0; // Prevents chart exceeding available space
-    canvas {
-      width: 100% !important; // Fix for resizing bug
-      height: 100% !important; // Remove if stretched when maintainAspectRatio=true
-    }
-  }
-
-  &.fixedHeight {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-    height: auto;
-  }
-
-  &.stretchHeight {
-    display: flex;
-    align-items: stretch;
-    justify-content: stretch;
-    height: 100%;
-  }
-
-  &.squareAspectRatio {
-    aspect-ratio: 1;
-    min-height: 0;
-    min-width: 0;
-  }
-
-  &:focus {
-    // border: 1px solid #85b7d9;
-    outline: none; // Remove dotted outline on FF
-  }
-
-  &::-moz-focus-inner {
-    border: 0; // Remove dotted outline on FF
-  }
-}
-
-.zoomForm {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  right: 0;
-
-  .zoomReset {
-    margin-left: 10px;
-  }
-
-  .help {
-    margin-left: 5px;
-    line-height: 0; // Strip whitespace from icon
-  }
-}
-
-.autoWeight {
-  width: auto;
-  height: auto;
-}
-
-.table {
-  overflow: auto;
-}

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',
-};