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

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

@@ -1,298 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

@@ -1,180 +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 { 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

@@ -1,78 +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
-    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;
-}