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

package/src/components/line-chart/line-chart-prop-types.js

@@ -0,0 +1,298 @@
+import PropTypes from 'prop-types';
+import { TextLabelPosition } from './plugins/plugin-constants';
+import { Position } from '../../helpers/enums';
+
+export const LineChartPropTypes = {
+  table: PropTypes.node,
+  chart: PropTypes.shape({
+    persistenceId: PropTypes.string,
+    controlsPortalId: PropTypes.string,
+    testId: PropTypes.string,
+    data: PropTypes.object.isRequired,
+    options: PropTypes.shape({
+      scales: PropTypes.object,
+      title: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string),
+      ]),
+      axes: PropTypes.shape({
+        x: PropTypes.arrayOf(
+          PropTypes.shape({
+            label: PropTypes.string,
+            position: PropTypes.oneOf(['top', 'bottom']),
+            color: PropTypes.string,
+            unit: PropTypes.shape({
+              options: PropTypes.arrayOf(PropTypes.string),
+              selectedUnit: PropTypes.string,
+              setSelectedUnit: PropTypes.func,
+            }),
+          }),
+        ),
+        y: PropTypes.arrayOf(
+          PropTypes.shape({
+            label: PropTypes.string,
+            position: PropTypes.oneOf(['left', 'right']),
+            color: PropTypes.string,
+          }),
+        ),
+      }),
+      additionalAxesOptions: PropTypes.shape({
+        chartScaleType: PropTypes.oneOf(['linear', 'logarithmic']),
+        reverse: PropTypes.bool,
+        beginAtZero: PropTypes.bool,
+        stepSize: PropTypes.number,
+        suggestedMin: PropTypes.number,
+        suggestedMax: PropTypes.number,
+        range: PropTypes.shape({
+          x: PropTypes.shape({
+            min: PropTypes.number,
+            max: PropTypes.number,
+          }),
+          y: PropTypes.shape({
+            min: PropTypes.number,
+            max: PropTypes.number,
+          }),
+        }),
+        autoAxisPadding: PropTypes.bool,
+      }),
+      chartStyling: PropTypes.shape({
+        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        maintainAspectRatio: PropTypes.bool,
+        staticChartHeight: PropTypes.bool,
+        performanceMode: PropTypes.bool,
+        squareAspectRatio: PropTypes.bool,
+        layoutPadding: PropTypes.oneOfType([
+          PropTypes.number,
+          PropTypes.shape({
+            top: PropTypes.number,
+            bottom: PropTypes.number,
+            left: PropTypes.number,
+            right: PropTypes.number,
+          }),
+        ]),
+      }),
+      tooltip: PropTypes.shape({
+        tooltips: PropTypes.bool,
+        showLabelsInTooltips: PropTypes.bool,
+        hideSimulationName: PropTypes.bool,
+      }),
+      graph: PropTypes.shape({
+        lineTension: PropTypes.number,
+        spanGaps: PropTypes.bool,
+        showDataLabels: PropTypes.bool,
+        showMinorGridlines: PropTypes.bool,
+      }),
+      annotations: PropTypes.shape({
+        labelAnnotation: PropTypes.shape({
+          showLabel: PropTypes.bool,
+          text: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.arrayOf(PropTypes.string),
+          ]),
+          position: PropTypes.string,
+          fontSize: PropTypes.number,
+          xOffset: PropTypes.number,
+          yOffset: PropTypes.number,
+          maxWidth: PropTypes.number,
+          lineHeight: PropTypes.number,
+        }),
+        showAnnotations: PropTypes.bool,
+        controlAnnotation: PropTypes.bool,
+        annotationsData: PropTypes.arrayOf(
+          PropTypes.shape({
+            adjustScaleRange: PropTypes.bool,
+            annotationAxis: PropTypes.oneOf(['x', 'y']),
+            color: PropTypes.string,
+            endValue: PropTypes.number,
+            label: PropTypes.string,
+            type: PropTypes.string,
+            value: PropTypes.number,
+            xMin: PropTypes.number,
+            xMax: PropTypes.number,
+            yMin: PropTypes.number,
+            yMax: PropTypes.number,
+          }),
+        ),
+      }),
+      legend: PropTypes.shape({
+        display: PropTypes.bool,
+        position: PropTypes.oneOf([
+          Position.TopLeft,
+          Position.TopRight,
+          Position.BottomLeft,
+          Position.BottomRight,
+        ]),
+        align: PropTypes.oneOf(['start', 'center', 'end']),
+        customLegend: PropTypes.shape({
+          customLegendPlugin: PropTypes.object,
+          customLegendContainerID: PropTypes.string,
+        }),
+      }),
+      chartOptions: PropTypes.shape({
+        showPoints: PropTypes.bool,
+        enableZoom: PropTypes.bool,
+        enablePan: PropTypes.bool,
+        closeOnOutsideClick: PropTypes.bool,
+      }),
+      interactions: PropTypes.shape({
+        onLegendClick: PropTypes.func,
+        onPointHover: PropTypes.func,
+        onPointUnhover: PropTypes.func,
+        onAnimationComplete: PropTypes.func,
+      }),
+      depthType: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.string),
+        selectedDepthType: PropTypes.string,
+        setSelectedDepthType: PropTypes.func,
+      }),
+      dragData: PropTypes.shape({
+        enableDragData: PropTypes.bool,
+        showTooltip: PropTypes.bool,
+        roundPoints: PropTypes.bool,
+        dragX: PropTypes.bool,
+        dragY: PropTypes.bool,
+        onDragStart: PropTypes.func,
+        onDrag: PropTypes.func,
+        onDragEnd: PropTypes.func,
+      }),
+    }),
+  }).isRequired,
+};
+
+export const getDefaultProps = (props) => {
+  // Add missing nested objects
+  props.chart.options = props.chart.options || {};
+  props.chart.options.axes = props.chart.options.axes || {};
+  props.chart.options.additionalAxesOptions =
+    props.chart.options.additionalAxesOptions || {};
+  props.chart.options.chartStyling = props.chart.options.chartStyling || {};
+  props.chart.options.tooltip = props.chart.options.tooltip || {};
+  props.chart.options.graph = props.chart.options.graph || {};
+  props.chart.options.annotations = props.chart.options.annotations || {};
+  props.chart.options.legend = props.chart.options.legend || {};
+  props.chart.options.legend.customLegend = props.chart.options.legend
+    .customLegend || { customLegendPlugin: null, customLegendContainerID: '' };
+  props.chart.options.chartOptions = props.chart.options.chartOptions || {};
+  props.chart.options.interactions = props.chart.options.interactions || {};
+  props.chart.options.dragData = props.chart.options.dragData || {};
+  // Set defaults for missing properties
+  const chart = {
+    persistenceId: props.chart.persistenceId ?? '',
+    controlsPortalId: props.chart.controlsPortalId ?? null,
+    testId: props.chart.testId ?? null,
+    data: props.chart.data,
+    options: {
+      title: props.chart.options.title || '',
+      scales: props.chart.options.scales || {},
+      axes: {
+        x: props.chart.options.axes.x || [{}],
+        y: props.chart.options.axes.y || [{}],
+      },
+      additionalAxesOptions: {
+        chartScaleType:
+          props.chart.options.additionalAxesOptions.chartScaleType || 'linear',
+        reverse: props.chart.options.additionalAxesOptions.reverse || false,
+        beginAtZero:
+          props.chart.options.additionalAxesOptions.beginAtZero || false,
+        stepSize: props.chart.options.additionalAxesOptions.stepSize,
+        suggestedMin: props.chart.options.additionalAxesOptions.suggestedMin,
+        suggestedMax: props.chart.options.additionalAxesOptions.suggestedMax,
+        range: props.chart.options.additionalAxesOptions.range,
+        autoAxisPadding:
+          props.chart.options.additionalAxesOptions.autoAxisPadding ?? false,
+      },
+      chartStyling: {
+        width: props.chart.options.chartStyling.width,
+        height: props.chart.options.chartStyling.height,
+        maintainAspectRatio:
+          props.chart.options.chartStyling.maintainAspectRatio || false,
+        staticChartHeight:
+          props.chart.options.chartStyling.staticChartHeight || false,
+        performanceMode:
+          props.chart.options.chartStyling.performanceMode ?? true,
+        squareAspectRatio:
+          props.chart.options.chartStyling.squareAspectRatio || false,
+        layoutPadding: props.chart.options.chartStyling.layoutPadding || {
+          top: 0,
+          bottom: 20,
+          left: 0,
+          right: 0,
+        },
+      },
+      tooltip: {
+        tooltips: props.chart.options.tooltip.tooltips ?? true,
+        showLabelsInTooltips:
+          props.chart.options.tooltip.showLabelsInTooltips || false,
+        hideSimulationName:
+          props.chart.options.tooltip.hideSimulationName || false,
+      },
+      graph: {
+        lineTension: props.chart.options.graph.lineTension || 0.01,
+        spanGaps: props.chart.options.graph.spanGaps || false,
+        showDataLabels: props.chart.options.graph.showDataLabels || false,
+        showMinorGridlines:
+          props.chart.options.graph.showMinorGridlines || false,
+      },
+      annotations: {
+        labelAnnotation: {
+          showLabel:
+            props.chart.options.annotations.labelAnnotation?.showLabel ?? false,
+          text: props.chart.options.annotations.labelAnnotation?.text ?? '',
+          position:
+            props.chart.options.annotations.labelAnnotation?.position ??
+            TextLabelPosition.BOTTOM_RIGHT,
+          fontSize:
+            props.chart.options.annotations.labelAnnotation?.fontSize ?? 12,
+          xOffset:
+            props.chart.options.annotations.labelAnnotation?.xOffset ?? 5,
+          yOffset:
+            props.chart.options.annotations.labelAnnotation?.yOffset ?? 5,
+          maxWidth:
+            props.chart.options.annotations.labelAnnotation?.maxWidth ?? 300,
+          lineHeight:
+            props.chart.options.annotations.labelAnnotation?.lineHeight ?? 12,
+        },
+        showAnnotations:
+          props.chart.options.annotations.showAnnotations ?? false,
+        controlAnnotation:
+          props.chart.options.annotations.controlAnnotation || false,
+        annotationsData: props.chart.options.annotations.annotationsData || [],
+      },
+      legend: {
+        display: props.chart.options.legend.display ?? true,
+        position: props.chart.options.legend.position || 'bottom-left',
+        align: props.chart.options.legend.align || 'center',
+        customLegend: props.chart.options.legend.customLegend,
+        usePointStyle: props.chart.options.legend.usePointStyle ?? true,
+      },
+      chartOptions: {
+        showPoints: props.chart.options.chartOptions.showPoints ?? true,
+        enableZoom: props.chart.options.chartOptions.enableZoom || true,
+        enablePan: props.chart.options.chartOptions.enablePan || false,
+        showLine: props.chart.options.chartOptions.showLine ?? true,
+        closeOnOutsideClick:
+          props.chart.options.chartOptions.closeOnOutsideClick || false,
+      },
+      interactions: {
+        onLegendClick: props.chart.options.interactions.onLegendClick,
+        onPointHover: props.chart.options.interactions.onPointHover,
+        onPointUnhover: props.chart.options.interactions.onPointUnhover,
+        onAnimationComplete:
+          props.chart.options.interactions.onAnimationComplete,
+      },
+      depthType: props.chart.options.depthType,
+      dragData: {
+        enableDragData: props.chart.options.dragData.enableDragData || false,
+        showTooltip: props.chart.options.dragData.showTooltip || true,
+        roundPoints: props.chart.options.dragData.roundPoints || true,
+        dragX: props.chart.options.dragData.dragX || true,
+        dragY: props.chart.options.dragData.dragY || true,
+        onDragStart: props.chart.options.dragData.onDragStart,
+        onDrag: props.chart.options.dragData.onDrag,
+        onDragEnd: props.chart.options.dragData.onDragEnd,
+      },
+    },
+  };
+  return chart;
+};

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

@@ -0,0 +1,128 @@
+import { LinearScaleOptions } from 'chart.js';
+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;
+    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 ILineScales {
+    x: LinearScaleOptions;
+    y: LinearScaleOptions;
+}
+
+export interface IDepthType {
+    options: string[],
+    selectedUnit: string,
+    setSelectedUnit: () => void,
+}
+export interface ILineChartOptions {
+    title: string | string[];
+    axes: ILineChartAxes;
+    scales: ILineScales,
+    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

@@ -0,0 +1,180 @@
+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 { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+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 CustomLegend from './legend/legend';
+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,
+    controlsPortalId,
+  } = chart;
+  const { annotations, axes, chartStyling, graph } = options;
+  const showCustomLegend = !options.legend.customLegend.customLegendContainerID;
+
+  /**
+   * @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}
+        controlsPortalId={controlsPortalId}
+      />
+      {table && state.showTable ? (
+        <div className={styles.table}>{table}</div>
+      ) : (
+        <DndProvider backend={HTML5Backend}>
+          <div className={styles.canvas} id="canvas">
+            <Line
+              ref={chartRef}
+              data={{
+                datasets: generatedDatasets,
+              }}
+              options={useOptions}
+              plugins={usePlugins}
+            />
+            {showCustomLegend && (
+              <CustomLegend
+                props={props}
+                chartRef={chartRef}
+                state={state}
+                options={options}
+                dispatch={dispatch}
+                generatedDatasets={generatedDatasets}
+                translations={translations}
+              />
+            )}
+          </div>
+        </DndProvider>
+      )}
+    </div>
+  );
+};
+
+LineChart.propTypes = LineChartPropTypes;
+
+export { LineChart };

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

@@ -0,0 +1,78 @@
+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
+    position: relative;
+    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;
+}