@oliasoft-open-source/charts-library 0.0.2-beta-1

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

@@ -0,0 +1,107 @@
+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;
+    };
+    autoAxisPadding: boolean;
+}
+
+export interface ILineChartAxis<PositionType> {
+    label: string;
+    position: PositionType;
+    color: string;
+}
+
+export interface ILineChartAxes {
+    x: ILineChartAxis<'top' | 'bottom'>[];
+    y: ILineChartAxis<'left' | 'right'>[];
+}
+
+export interface ILineChartOptions {
+    title: string | string[];
+    axes: ILineChartAxes;
+    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
+    testId: string | null;
+    data: {
+        labels?: string[],
+        datasets: ILineChartDataset[]
+    } | any;
+    options: ILineChartOptions;
+}
+
+export interface ILineChartProps {
+    chart: ILineChartData;
+}

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

@@ -0,0 +1,531 @@
+import React, { useEffect, useReducer, useRef, useState } 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 { 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 {
+  SET_POINTS_ZOOM_DEFAULTS,
+  TOGGLE_ANNOTATION,
+  TOGGLE_LEGEND,
+  TOGGLE_LINE,
+  TOGGLE_PAN,
+  TOGGLE_POINTS,
+  TOGGLE_TABLE,
+  TOGGLE_ZOOM,
+  SAVE_INITIAL_AXES_RANGES,
+  UPDATE_AXES_RANGES,
+  RESET_AXES_RANGES,
+} from './state/action-types';
+import Controls from '../controls/controls';
+import { getDefaultProps, LineChartPropTypes } from './line-chart-prop-types';
+import getLineChartToolTips from './get-line-chart-tooltips';
+import getLineChartDataLabels from './get-line-chart-data-labels';
+import {
+  BORDER_JOIN_STYLE,
+  DEFAULT_BACKGROUND_COLOR,
+  DEFAULT_BORDER_WIDTH,
+  DEFAULT_HOVER_RADIUS,
+  DEFAULT_LINE_POINT_RADIUS,
+  DEFAULT_POINT_RADIUS,
+  ZOOM_BOX_BACKGROUND_COLOR,
+} from './line-chart-consts';
+
+import getAnnotation from '../../helpers/get-chart-annotation';
+import {
+  generateRandomColor,
+  getChartFileName,
+  getClassName,
+  getLegend,
+  getPlugins,
+  setDefaultTheme,
+} from '../../helpers/chart-utils';
+import {
+  ANIMATION_DURATION,
+  AUTO,
+  COLORS,
+  CUSTOM_LEGEND_PLUGIN_NAME,
+  BORDER_COLOR,
+} from '../../helpers/chart-consts';
+import {
+  AxisType,
+  ChartHoverMode,
+  Key,
+  PanZoomMode,
+  PointStyle,
+} from '../../helpers/enums';
+import { getAxesRangesFromChart } from './get-axes-ranges-from-chart';
+import { generateAxisId } from './line-chart-utils';
+import { autoScale } from './axis-scales/axis-scales';
+
+ChartJS.register(
+  LinearScale,
+  PointElement,
+  LineElement,
+  CategoryScale,
+  LogarithmicScale,
+  Legend,
+  Tooltip,
+  Title,
+  Filler,
+  zoomPlugin,
+  dataLabelsPlugin,
+  annotationPlugin,
+);
+
+/**
+ * this is a line chart component
+ * @param {import('./line-chart.interface').ILineChartProps} props
+ */
+const LineChart = (props) => {
+  setDefaultTheme();
+  const chartRef = useRef(null);
+  const [hoveredPoint, setHoveredPoint] = useState(null);
+  const chart = getDefaultProps(props);
+  const { options, testId } = chart;
+  const { headerComponent, subheaderComponent, table } = props;
+  const {
+    additionalAxesOptions,
+    annotations,
+    axes,
+    chartOptions,
+    chartStyling,
+    graph,
+    interactions,
+    legend,
+  } = options;
+  const { showLine, showPoints, enableZoom, enablePan } = 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,
+      customAxesRange: additionalAxesOptions?.range,
+    },
+    initialState,
+  );
+
+  useEffect(() => {
+    const { range } = props.chart.options.additionalAxesOptions;
+    if (range?.x && range?.y) {
+      const axes = Object.entries(range).map(([key, { min, max }]) => {
+        return {
+          id: key,
+          min: min ?? 0,
+          max: max ?? 0,
+        };
+      });
+
+      dispatch({
+        type: UPDATE_AXES_RANGES,
+        payload: { axes },
+      });
+    }
+  }, [props.chart.options.additionalAxesOptions.range]);
+
+  useEffect(() => {
+    if (chartOptions.enablePan !== true) {
+      dispatch({ type: TOGGLE_PAN });
+    }
+    if (chartRef) {
+      //save the initial axis ranges in state (we need this for resetting ranges)
+      dispatch({
+        type: SAVE_INITIAL_AXES_RANGES,
+        payload: { initialAxesRanges: getAxesRangesFromChart(chartRef) },
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    dispatch({
+      type: SET_POINTS_ZOOM_DEFAULTS,
+      payload: { showLine, showPoints, enableZoom, enablePan },
+    });
+  }, [showLine, showPoints, enableZoom, enablePan]);
+
+  /**
+   * Toggle custom legends visibility.
+   * Needed because they are rendered in a html element separate from the chart.
+   */
+  useEffect(() => {
+    if (options.legend.customLegend.customLegendPlugin) {
+      const parent = document.getElementById(
+        options.legend.customLegend.customLegendContainerID,
+      );
+      if (state.legendEnabled) {
+        parent.style.visibility = 'visible';
+      } else {
+        parent.style.visibility = 'hidden';
+      }
+    }
+  }, [state.legendEnabled]);
+
+  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 || 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;
+        const axesMax = state.axes[0]?.max;
+        // 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;
+        }
+      }
+      /*
+        Remove invalid falsy data points OW-9855
+        Points should be an object of {x, y} pairs
+        This is an extra guard to prevent crashes if parent apps pass bad inputs
+      */
+      line.data = line?.data?.filter(Boolean) || [];
+
+      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 = 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: RESET_AXES_RANGES });
+  };
+
+  const onHover = (evt, hoveredItems) => {
+    if (!hoveredItems?.length && interactions.onPointUnhover && hoveredPoint) {
+      setHoveredPoint(null);
+      interactions.onPointUnhover(evt);
+    }
+
+    if (hoveredItems?.length && interactions.onPointHover) {
+      const { index, datasetIndex } = hoveredItems[0];
+      const dataset = generatedDatasets[datasetIndex];
+      const point = dataset?.data[index];
+
+      if (point && hoveredPoint !== point) {
+        setHoveredPoint(point);
+        interactions.onPointHover(evt, datasetIndex, index, generatedDatasets);
+      }
+    }
+  };
+
+  const handleDownload = () => {
+    const chart = chartRef.current;
+    // Add temporary canvas background
+    const { ctx } = chart;
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = '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) {
+      const chart = chartRef.current;
+      chart.config.options.plugins.zoom.zoom.mode = PanZoomMode.Y;
+      chart.config.options.plugins.zoom.pan.mode = PanZoomMode.Y;
+      chart.update();
+    }
+  };
+
+  const handleKeyUp = (evt) => {
+    if (evt.key === Key.Shift) {
+      const chart = chartRef.current;
+      chart.config.options.plugins.zoom.zoom.mode = PanZoomMode.Z;
+      chart.config.options.plugins.zoom.pan.mode = PanZoomMode.Z;
+      chart.update();
+    }
+  };
+
+  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 = axis.min ?? additionalAxesOptions?.range?.[axisType]?.min;
+      const max = axis.max ?? additionalAxesOptions?.range?.[axisType]?.max;
+      return {
+        ...axis,
+        //only add min and max properties if they are defined:
+        ...(min ? { min } : {}),
+        ...(max ? { max } : {}),
+      };
+    });
+  };
+  const controlsAxes = getControlsAxes(axes);
+
+  const getControlsAxesLabels = (propsAxes) => {
+    if (!Object.keys(propsAxes)?.length) {
+      return [];
+    }
+
+    const getAxesLabels = (axes, axisType) => {
+      if (!axes[axisType] || !axes[axisType]?.length) {
+        return [];
+      } else {
+        return axes[axisType].map((axisObj, index) => {
+          return {
+            id: generateAxisId(axisType, index, axes[axisType].length > 1),
+            label: axisObj?.label || '',
+          };
+        });
+      }
+    };
+
+    const axesLabels = [
+      ...getAxesLabels(propsAxes, AxisType.X),
+      ...getAxesLabels(propsAxes, AxisType.Y),
+    ];
+    return axesLabels;
+  };
+
+  const controlsAxesLabels = getControlsAxesLabels(props.chart.options.axes);
+
+  const updateAxesRangesFromChart = (chart) => {
+    const { scales = {} } = chart || {};
+    const axes = Object.entries(scales).map(([key, { min, max }]) => {
+      return {
+        id: key,
+        min: min ?? 0,
+        max: max ?? 0,
+      };
+    });
+    dispatch({
+      type: UPDATE_AXES_RANGES,
+      payload: { axes },
+    });
+  };
+
+  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}
+      data-testid={testId}
+    >
+      <Controls
+        axes={controlsAxes}
+        controlsAxesLabels={controlsAxesLabels}
+        chart={chart}
+        headerComponent={headerComponent}
+        legendEnabled={state.legendEnabled}
+        lineEnabled={state.lineEnabled}
+        onDownload={handleDownload}
+        onResetAxes={() => {
+          dispatch({ type: RESET_AXES_RANGES });
+        }}
+        onUpdateAxes={({ axes }) => {
+          dispatch({ type: UPDATE_AXES_RANGES, payload: { axes } });
+        }}
+        onToggleLegend={() => dispatch({ type: TOGGLE_LEGEND })}
+        onToggleLine={() => dispatch({ type: TOGGLE_LINE })}
+        onTogglePan={() => dispatch({ type: TOGGLE_PAN })}
+        onTogglePoints={() => dispatch({ type: TOGGLE_POINTS })}
+        onToggleTable={() => dispatch({ type: TOGGLE_TABLE })}
+        onToggleZoom={() => dispatch({ type: TOGGLE_ZOOM })}
+        panEnabled={state.panEnabled}
+        pointsEnabled={state.pointsEnabled}
+        initialAxesRanges={state.initialAxesRanges}
+        showTable={state.showTable}
+        subheaderComponent={subheaderComponent}
+        table={table}
+        zoomEnabled={state.zoomEnabled}
+      />
+      {table && state.showTable ? (
+        <div className={styles.table}>{table}</div>
+      ) : (
+        <div className={styles.canvas}>
+          <Line
+            ref={chartRef}
+            data={{
+              datasets: generatedDatasets,
+            }}
+            options={{
+              onClick,
+              onHover,
+              maintainAspectRatio: chartStyling.maintainAspectRatio,
+              aspectRatio: chartStyling.squareAspectRatio ? 1 : null, // 1 equals square aspect ratio
+              animation: chartStyling.performanceMode
+                ? false
+                : {
+                    duration: ANIMATION_DURATION.FAST,
+                    onComplete: interactions.onAnimationComplete,
+                  },
+              hover: {
+                mode: ChartHoverMode.Nearest,
+                intersect: true,
+              },
+              elements: {
+                line: {
+                  pointStyle: PointStyle.Circle,
+                  showLine: state.lineEnabled,
+                },
+              },
+              scales: autoScale(options, state, generatedDatasets),
+              plugins: {
+                // title: getTitle(options),
+                datalabels: getLineChartDataLabels(options),
+                annotation: getAnnotation(options, state),
+                zoom: {
+                  pan: {
+                    enabled: state.panEnabled,
+                    mode: PanZoomMode.XY,
+                    onPanComplete({ chart }) {
+                      updateAxesRangesFromChart(chart);
+                    },
+                  },
+                  zoom: {
+                    mode: PanZoomMode.XY,
+                    drag: {
+                      enabled: state.zoomEnabled,
+                      threshold: 3,
+                      backgroundColor: ZOOM_BOX_BACKGROUND_COLOR,
+                      borderColor: BORDER_COLOR,
+                      borderWidth: 1,
+                    },
+                    onZoomComplete({ chart }) {
+                      updateAxesRangesFromChart(chart);
+                    },
+                  },
+                },
+                tooltip: getLineChartToolTips(options),
+                legend: getLegend(options, legendClick, state),
+                [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend
+                  .customLegendPlugin && {
+                  containerID:
+                    options.legend.customLegend.customLegendContainerID,
+                },
+                chartAreaBorder: {
+                  borderColor: BORDER_COLOR,
+                },
+              },
+            }}
+            plugins={getPlugins(graph, legend, state)}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+LineChart.propTypes = LineChartPropTypes;
+
+export { LineChart };