@oliasoft-open-source/charts-library 2.0.0

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

@@ -0,0 +1,163 @@
+import Fraction from 'fraction.js';
+
+const isNull = (str) => str === null;
+const isUndefined = (str) => str === undefined;
+const isArray = (str) => str && str.constructor === Array;
+const isObject = (str) => str && str.constructor === Object;
+const hasDivisor = (str) =>
+  str && typeof str.includes === 'function' && str.includes('/');
+export const isEmptyString = (str) => str === '';
+const isTrailingPeriodSeparator = (str) => str && str[str.length - 1] === '.';
+const isTrailingCommaSeparator = (str) => str && str[str.length - 1] === ',';
+
+export const charCount = (chr, str) => {
+  let total = 0,
+    last_location = 0,
+    single_char = (chr + '')[0];
+  while ((last_location = str.indexOf(single_char, last_location) + 1)) {
+    total += 1;
+  }
+  return total;
+};
+
+export const cleanNumStr = (str) => {
+  str += '';
+  let slashCount = charCount('/', str);
+  let spaceCount = charCount(' ', str) + charCount(' ', str);
+  let dotcount = charCount('.', str);
+  let commacount = charCount(',', str);
+  if (slashCount === 0 && spaceCount > 0) str = str.replace(/\s/g, '');
+  if (commacount > 1) str = str.replace(/,/g, '');
+  if (dotcount > 1) str = str.replace(/\./g, '');
+  commacount = charCount(',', str);
+  dotcount = charCount('.', str);
+  if (dotcount === 1 && commacount === 1) {
+    // One of each, make the rightmost act as decimal separator
+    if (str.indexOf(',') > str.indexOf('.')) {
+      str = str.replace('.', '');
+      str = str.replace(',', '.');
+    } else {
+      str = str.replace(',', '');
+    }
+    if (str.indexOf('.') === 0) {
+      str = 0 + str;
+    }
+    return str;
+  }
+  if (dotcount === 1 && commacount) str = str.replace(',', '');
+  if (!dotcount && commacount) str = str.replace(',', '.');
+  if (str.indexOf('.') === 0) {
+    str = 0 + str;
+  }
+  return str;
+};
+
+export const numFraction = (str) => {
+  if (str instanceof Array || str === null || str === undefined) {
+    return str;
+  }
+  if (typeof str === 'string') {
+    str = str.trim(); //trailing whitespace causes InvalidParameter error in fraction.js
+  }
+  let result = str;
+  try {
+    result = Fraction(str);
+  } catch (e) {
+    //do nothing
+  }
+  return result.valueOf();
+};
+
+export const isValidNum = (input) => {
+  let result = false;
+  if (isEmptyString(input)) {
+    result = true;
+  } else {
+    if (
+      !(
+        isNull(input) ||
+        isUndefined(input) ||
+        isTrailingPeriodSeparator(input) ||
+        isTrailingCommaSeparator(input) ||
+        isArray(input) ||
+        isObject(input)
+      )
+    ) {
+      let number;
+      const cleaned = cleanNumStr(input);
+      if (hasDivisor(cleaned)) {
+        //numFraction is slow, so only call it if needed
+        number = numFraction(cleaned);
+      } else {
+        number = parseFloat(cleaned);
+      }
+      if (!isNaN(number)) {
+        result = true;
+      }
+    }
+  }
+  return result;
+};
+
+export const toNumber = (input, defaultValue, minimum) => {
+  let result;
+  defaultValue = defaultValue === undefined ? input : defaultValue;
+  if (
+    isNull(input) ||
+    isUndefined(input) ||
+    isEmptyString(input) ||
+    isTrailingPeriodSeparator(input) ||
+    isTrailingCommaSeparator(input) ||
+    isArray(input) ||
+    isObject(input)
+  ) {
+    result = defaultValue;
+  } else {
+    let number;
+    const cleaned = cleanNumStr(input);
+    if (hasDivisor(cleaned)) {
+      //numFraction is slow, so only call it if needed
+      number = numFraction(cleaned);
+    } else {
+      number = parseFloat(cleaned);
+    }
+    if (isNaN(number)) {
+      result = defaultValue;
+    } else if (minimum && number < minimum) {
+      result = minimum;
+    } else {
+      result = number;
+    }
+  }
+  return result;
+};
+
+export const validNumber = (value) => isValidNum(value);
+
+export const toNum = (value) => {
+  const asNumber = toNumber(value);
+  return value === '' || isNaN(asNumber) ? undefined : asNumber;
+};
+
+export const isLessThanMax = (value, max) => {
+  return value === undefined || max === undefined || value < max;
+};
+
+export const isGreaterThanMin = (value, min) => {
+  return value === undefined || min === undefined || value > 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;
+};

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

@@ -0,0 +1,103 @@
+import {
+    IChartAnnotations,
+    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;
+    };
+}
+
+export interface ILineChartAxes<PositionType> {
+    label: string;
+    position: PositionType;
+    color: string;
+}
+
+export interface ILineChartOptions {
+    title: string | string[];
+    axes: {
+        x: ILineChartAxes<'top' | 'bottom'>[];
+        y: ILineChartAxes<'left' | 'right'>[];
+    };
+    additionalAxesOptions: ILineChartAdditionalAxesOptions;
+    chartStyling: IChartStyling;
+    tooltip: ILineChartTooltip;
+    graph: ILineChartGraph;
+    annotations: IChartAnnotations;
+    legend: IChartLegend;
+    chartOptions: IChartOptions;
+    interactions: IChartInteractions;
+}
+
+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
+    data: {
+        labels?: string[],
+        datasets: ILineChartDataset[]
+    } | any;
+    options: ILineChartOptions;
+}
+
+export interface ILineChartProps {
+    chart: ILineChartData;
+}

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

@@ -0,0 +1,423 @@
+import React, { useEffect, useReducer, useRef, useState } from 'react';
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  defaults,
+  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 { triggerBase64Download } from 'react-base64-downloader';
+
+import styles from './line-chart.module.less';
+import { reducer } from './state/line-chart-reducer';
+import initialState from './state/initial-state';
+import {
+  TOGGLE_PAN,
+  TOGGLE_ZOOM,
+  TOGGLE_POINTS,
+  TOGGLE_LINE,
+  TOGGLE_LEGEND,
+  UNSET_AXES_VALUES,
+  SET_AXIS_VALUE,
+  TOGGLE_ANNOTATION,
+  SET_POINTS_ZOOM_DEFAULTS,
+} from './state/action-types';
+import { Controls } from './Controls/Controls';
+import { getDefaultProps, LineChartPropTypes } from './line-chart-prop-types';
+import getLineChartScales from './get-line-chart-scales';
+import getLineChartToolTips from './get-line-chart-tooltips';
+import getLineChartDataLabels from './get-line-chart-data-labels';
+import {
+  DEFAULT_BORDER_WIDTH,
+  DEFAULT_HOVER_RADIUS,
+  DEFAULT_POINT_RADIUS,
+  BORDER_JOIN_STYLE,
+  DEFAULT_LINE_POINT_RADIUS,
+  DEFAULT_BACKGROUND_COLOR,
+} from './line-chart-consts';
+
+import getAnnotation from '../../helpers/get-chart-annotation';
+import {
+  generateRandomColor,
+  getClassName,
+  getTitle,
+  getAxisValue,
+  getPlugins,
+  getLegend,
+  getChartFileName,
+} from '../../helpers/chart-utils';
+import {
+  ANIMATION_DURATION,
+  AUTO,
+  COLORS,
+  DARK_MODE_COLORS,
+  DEFAULT_COLOR,
+  DEFAULT_DARK_MODE_BORDER_COLOR,
+  DEFAULT_DARK_MODE_COLOR,
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+} from '../../helpers/chart-consts';
+import {
+  AxisType,
+  ChartHoverMode,
+  Key,
+  PanZoomMode,
+  PointStyle,
+} from '../../helpers/enums';
+
+ChartJS.register(
+  LinearScale,
+  PointElement,
+  LineElement,
+  CategoryScale,
+  LogarithmicScale,
+  Legend,
+  Tooltip,
+  Title,
+  Filler,
+  zoomPlugin,
+  dataLabelsPlugin,
+  annotationPlugin,
+);
+
+defaults.font.size = DEFAULT_FONT_SIZE;
+defaults.color = DEFAULT_COLOR;
+defaults.font.family = DEFAULT_FONT_FAMILY;
+defaults.darkModeColor = DEFAULT_DARK_MODE_COLOR;
+defaults.darkModeBorderColor = DEFAULT_DARK_MODE_BORDER_COLOR;
+
+/**
+ * this is a line chart component
+ * @param {import('./line-chart.interface').ILineChartProps} props
+ */
+const LineChart = (props) => {
+  const chartRef = useRef(null);
+  const [shiftPressed, setShiftPressed] = useState(false);
+  let pointHover = false;
+  const chart = getDefaultProps(props);
+  const { options } = chart;
+
+  const {
+    additionalAxesOptions,
+    annotations,
+    axes,
+    chartOptions,
+    chartStyling,
+    graph,
+    interactions,
+    legend,
+  } = options;
+  const { showLine, showPoints, enableZoom, enablePan, closeOnOutsideClick } =
+    chartOptions;
+
+  /**
+   * @type {[object, import('react').Dispatch<{type: String, payload: any}>]}  useReducer
+   */
+  const [state, dispatch] = useReducer(
+    reducer,
+    {
+      axes,
+      enableZoom: chartOptions.enableZoom,
+      enablePan: chartOptions.enablePan,
+      showPoints: chartOptions.showPoints,
+      showLine: chartOptions.showLine,
+      legendDisplay: legend.display,
+      annotationsData: annotations.annotationsData,
+    },
+    initialState,
+  );
+
+  useEffect(() => {
+    if (chartOptions.enablePan !== true) {
+      dispatch({ type: TOGGLE_PAN });
+    }
+  }, []);
+
+  useEffect(() => {
+    dispatch({
+      type: SET_POINTS_ZOOM_DEFAULTS,
+      payload: { showLine, showPoints, enableZoom, enablePan },
+    });
+  }, [showLine, showPoints, enableZoom, enablePan]);
+
+  const generateLineChartDatasets = (datasets) => {
+    const copyDataset = [...datasets];
+
+    // Add annotations to dataset to have them appear in legend.
+    if (
+      annotations.controlAnnotation &&
+      annotations.showAnnotations &&
+      annotations.annotationsData?.length
+    ) {
+      annotations.annotationsData.forEach((annotation, index) => {
+        const color =
+          annotation.color ||
+          (chartStyling.darkMode ? DARK_MODE_COLORS[index] : COLORS[index]);
+        copyDataset.push({
+          isAnnotation: true,
+          label: annotation.label,
+          annotationIndex: index,
+          backgroundColor: color,
+          pointBackgroundColor: color,
+          borderColor: color,
+          data: [{}],
+        });
+      });
+    }
+
+    const generatedDatasets = copyDataset.map((line, i) => {
+      if (line.formation) {
+        const axesMin = state.axes[0]?.min?.value;
+        const axesMax = state.axes[0]?.max?.value;
+        // line with formation flag has 3 points: start point, mid-point with label, and end point.
+        const [startPoint, midPointWithLabel, endPoint] = line.data;
+
+        if (axesMin && startPoint?.x) {
+          line.data[0].x = axesMin < startPoint?.x ? axesMin : startPoint?.x;
+        }
+
+        if (axesMax && endPoint?.x) {
+          line.data[2].x = axesMax > endPoint?.x ? axesMax : endPoint?.x;
+        }
+      }
+
+      // line does not render if first datapoints are null
+      if (line.data[0] === null) {
+        line.data.shift();
+      }
+
+      line.showLine = state.lineEnabled;
+      const linePointRadius = line.pointRadius
+        ? parseFloat(line.pointRadius)
+        : DEFAULT_POINT_RADIUS;
+      const pointHoverRadius = line.pointHoverRadius
+        ? parseFloat(line.pointHoverRadius)
+        : DEFAULT_HOVER_RADIUS;
+      const indexedColor = chartStyling.darkMode
+        ? DARK_MODE_COLORS[i]
+        : COLORS[i];
+
+      return {
+        ...line,
+        lineTension: graph.lineTension,
+        spanGaps: graph.spanGaps,
+        borderWidth: parseFloat(line.borderWidth) || DEFAULT_BORDER_WIDTH,
+        borderDash: line.borderDash || [],
+        borderJoinStyle: BORDER_JOIN_STYLE,
+        borderColor:
+          line.borderColor || indexedColor || generateRandomColor(COLORS),
+        backgroundColor: line.backgroundColor || DEFAULT_BACKGROUND_COLOR,
+        pointBackgroundColor:
+          line.pointBackgroundColor ||
+          indexedColor ||
+          generateRandomColor(COLORS),
+        pointRadius:
+          state.pointsEnabled === true
+            ? linePointRadius
+            : DEFAULT_LINE_POINT_RADIUS,
+        pointHoverRadius,
+        pointHitRadius: line.pointHitRadius || pointHoverRadius,
+      };
+    });
+    return generatedDatasets;
+  };
+
+  const generatedDatasets = generateLineChartDatasets(chart.data.datasets);
+
+  const legendClick = (e, legendItem) => {
+    const index = legendItem.datasetIndex;
+    const chartInstance = chartRef.current;
+    const { datasets } = chartInstance.data;
+    const dataset = datasets[index];
+    const meta = chartInstance.getDatasetMeta(index);
+    meta.hidden = meta.hidden === null ? !dataset.hidden : null;
+
+    if (annotations.controlAnnotation && dataset.isAnnotation) {
+      const { annotationIndex } = dataset;
+      dispatch({ type: TOGGLE_ANNOTATION, payload: { annotationIndex } });
+    }
+
+    // Show/hide entire display group
+    if (dataset.displayGroup) {
+      datasets.forEach((ds, ix) => {
+        if (ds.displayGroup !== dataset.displayGroup) {
+          return;
+        }
+        chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
+      });
+    }
+
+    if (interactions.onLegendClick) {
+      interactions.onLegendClick(legendItem?.text, legendItem.hidden);
+    }
+
+    chartInstance.update();
+  };
+
+  const onClick = (evt, elements, chartInstance) => {
+    chartInstance.resetZoom();
+    dispatch({ type: UNSET_AXES_VALUES });
+  };
+
+  const onHover = (evt, hoveredItems, chartInstance) => {
+    if (pointHover && !hoveredItems?.length) {
+      pointHover = false;
+      if (interactions.onPointUnhover) {
+        interactions.onPointUnhover(evt);
+      }
+    }
+    if (!pointHover && hoveredItems?.length) {
+      pointHover = true;
+      if (interactions.onPointHover) {
+        const { index, datasetIndex } = hoveredItems[0];
+        const generatedDataset = generatedDatasets;
+        interactions.onPointHover(evt, datasetIndex, index, generatedDataset);
+      }
+    }
+  };
+
+  const handleDownload = () => {
+    const chart = chartRef.current;
+    // Add temporary canvas background
+    const { ctx } = chart;
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = chartStyling.darkMode ? 'black' : 'white';
+    ctx.fillRect(0, 0, chart.width, chart.height);
+    ctx.restore();
+
+    const base64Image = chart.toBase64Image();
+    const fileName = getChartFileName(state.axes);
+
+    triggerBase64Download(base64Image, fileName);
+  };
+
+  const handleKeyDown = (evt) => {
+    if (evt.key === Key.Shift && !shiftPressed) {
+      setShiftPressed(true);
+    }
+  };
+
+  const handleKeyUp = (evt) => {
+    if (evt.key === Key.Shift) {
+      setShiftPressed(false);
+    }
+  };
+
+  const getControlsAxes = () => {
+    return state.axes.map((axis, i) => {
+      const axisType = i ? AxisType.Y : AxisType.X; // only first element is 'x' - rest is 'y'
+      const min = additionalAxesOptions?.range?.[axisType]?.min;
+      const max = additionalAxesOptions?.range?.[axisType]?.max;
+
+      return {
+        ...axis,
+        min: axis.min ?? getAxisValue(min),
+        max: axis.max ?? getAxisValue(max),
+      };
+    });
+  };
+  const controlsAxes = getControlsAxes();
+
+  return (
+    <div
+      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}
+    >
+      <div className={styles.zoomForm}>
+        <Controls
+          axes={controlsAxes}
+          legendEnabled={state.legendEnabled}
+          lineEnabled={state.lineEnabled}
+          panEnabled={state.panEnabled}
+          pointsEnabled={state.pointsEnabled}
+          zoomEnabled={state.zoomEnabled}
+          onSetAxisValue={(evt) =>
+            dispatch({ type: SET_AXIS_VALUE, payload: evt })
+          }
+          onResetAxes={() => {
+            dispatch({ type: UNSET_AXES_VALUES });
+          }}
+          onToggleLegend={() => dispatch({ type: TOGGLE_LEGEND })}
+          onToggleLine={() => dispatch({ type: TOGGLE_LINE })}
+          onTogglePan={() => dispatch({ type: TOGGLE_PAN })}
+          onTogglePoints={() => dispatch({ type: TOGGLE_POINTS })}
+          onToggleZoom={() => dispatch({ type: TOGGLE_ZOOM })}
+          onDownload={handleDownload}
+          closeOnOutsideClick={closeOnOutsideClick}
+        />
+      </div>
+      <Line
+        ref={chartRef}
+        data={{
+          datasets: generatedDatasets,
+        }}
+        options={{
+          onClick,
+          onHover,
+          maintainAspectRatio: chartStyling.maintainAspectRatio,
+          animation: {
+            duration: chartStyling.performanceMode
+              ? ANIMATION_DURATION.NO
+              : ANIMATION_DURATION.FAST,
+          },
+          hover: {
+            mode: ChartHoverMode.Nearest,
+            intersect: true,
+            animationDuration: chartStyling.performanceMode
+              ? ANIMATION_DURATION.NO
+              : ANIMATION_DURATION.SLOW,
+          },
+          elements: {
+            line: {
+              pointStyle: PointStyle.Circle,
+              showLine: state.lineEnabled,
+            },
+          },
+          scales: getLineChartScales(options, state),
+          plugins: {
+            title: getTitle(options),
+            datalabels: getLineChartDataLabels(options),
+            annotation: getAnnotation(options, state),
+            zoom: {
+              pan: {
+                enabled: state.panEnabled,
+                mode: shiftPressed ? PanZoomMode.Y : PanZoomMode.X,
+              },
+              zoom: {
+                mode: PanZoomMode.X,
+                drag: {
+                  enabled: state.zoomEnabled,
+                  threshold: 3,
+                },
+              },
+            },
+            tooltip: getLineChartToolTips(options),
+            legend: getLegend(options, legendClick, state),
+          },
+        }}
+        plugins={getPlugins(graph)}
+      />
+    </div>
+  );
+};
+
+LineChart.propTypes = LineChartPropTypes;
+
+export { LineChart };