@oliasoft-open-source/charts-library 2.0.0

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

@@ -0,0 +1,264 @@
+import React from 'react';
+import { LineChart } from './line-chart';
+import { Container } from '../../helpers/container';
+
+const style = {
+  height: '1000px',
+  width: '1000px',
+};
+
+const dataset1 = {
+  label: 'Curve 1',
+  lineTension: 0,
+  borderColor: '#a30125',
+  pointBackgroundColor: '#a30125',
+  pointRadius: 2,
+  pointHoverRadius: 5,
+  pointHitRadius: 20,
+  borderWidth: 2,
+  fill: false,
+  yAxisID: 'y1',
+  data: [
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: 5,
+      y: 25,
+    },
+    {
+      x: 10,
+      y: 60,
+    },
+    {
+      x: 15,
+      y: 90,
+    },
+    {
+      x: 20,
+      y: 120,
+    },
+    {
+      x: 25,
+      y: 150,
+    },
+  ],
+};
+
+const dataset2 = {
+  label: 'Curve 2',
+  lineTension: 0,
+  borderColor: '#a30125',
+  pointBackgroundColor: '#a30125',
+  pointRadius: 2,
+  pointHoverRadius: 5,
+  pointHitRadius: 20,
+  borderWidth: 2,
+  fill: false,
+  yAxisID: 'y1',
+  data: [
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: 3,
+      y: 15,
+    },
+    {
+      x: 6,
+      y: 30,
+    },
+    {
+      x: 9,
+      y: 60,
+    },
+    {
+      x: 12,
+      y: 120,
+    },
+    {
+      x: 15,
+      y: 240,
+    },
+  ],
+};
+
+const dataset3 = {
+  label: 'Curve 3',
+  lineTension: 0,
+  borderColor: '#011fa3',
+  pointBackgroundColor: '#011fa3',
+  pointRadius: 2,
+  pointHoverRadius: 5,
+  pointHitRadius: 20,
+  borderWidth: 2,
+  fill: false,
+  yAxisID: 'y2',
+  data: [
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: 7,
+      y: 25,
+    },
+    {
+      x: 14,
+      y: 12,
+    },
+    {
+      x: 21,
+      y: 50,
+    },
+    {
+      x: 28,
+      y: 25,
+    },
+    {
+      x: 30,
+      y: 100,
+    },
+  ],
+};
+
+const formation = {
+  label: 'Formation',
+  formation: true,
+  lineTension: 0,
+  borderColor: '#987654',
+  pointBackgroundColor: '#987654',
+  pointRadius: 2,
+  pointHoverRadius: 5,
+  pointHitRadius: 20,
+  borderWidth: 2,
+  borderDash: [10, 5],
+  fill: false,
+  yAxisID: 'y2',
+  hideLegend: true,
+  data: [
+    {
+      x: 0,
+      y: 66,
+    },
+    {
+      x: 35.0 / 2,
+      y: 66,
+      label: 'formation label',
+    },
+    {
+      x: 35,
+      y: 66,
+    },
+  ],
+};
+
+const testChartData = {
+  datasets: [dataset1, dataset2, dataset3, formation],
+};
+
+const kitchenSinkLineChart = {
+  data: testChartData,
+  options: {
+    title: 'Look at this graph!',
+    axes: {
+      x: [
+        {
+          label: 'The X',
+        },
+      ],
+      y: [
+        {
+          label: 'The Y',
+          position: 'right',
+          color: '#a30125',
+        },
+        {
+          label: 'The Y 2',
+          position: 'left',
+          color: '#011fa3',
+          gridLines: {
+            drawOnChartArea: false,
+          },
+        },
+      ],
+    },
+    additionalAxesOptions: {
+      chartScaleType: 'linear',
+      reverse: false,
+      beginAtZero: false,
+      stepSize: 50,
+      truncateAxisNumbersToDigitsCallback: 0,
+      suggestedMin: 0,
+      suggestedMax: 35,
+      // range: {
+      //   x: {
+      //     min: 0,
+      //     max: 100,
+      //   },
+      //   y: {
+      //     min: 0,
+      //     max: 100,
+      //   },
+      // },
+    },
+    chartStyling: {
+      width: 800,
+      height: 800,
+      maintainAspectRatio: false,
+      staticChartHeight: false,
+      performanceMode: true,
+    },
+    tooltip: {
+      tooltips: true,
+      showLabelsInTooltips: false,
+      hideSimulationName: false,
+    },
+    graph: {
+      lineTension: 0,
+      spanGaps: false,
+      showDataLabels: true,
+      showMinorGridlines: true,
+    },
+    annotations: {
+      showAnnotations: true,
+      controlAnnotation: true,
+      annotationsData: [
+        {
+          annotationAxis: 'y',
+          label: 'cool annotation',
+          value: 40,
+          color: 'rgba(128, 32, 196, 0.5)',
+        },
+      ],
+    },
+    legend: {
+      display: true,
+      position: 'bottom',
+      align: 'center',
+    },
+    chartOptions: {
+      showPoints: true,
+      enableZoom: false,
+      enablePan: false,
+    },
+    interactions: {
+      onLegendClick: null,
+      onPointHover: null,
+      onPointUnhover: null,
+    },
+  },
+};
+
+export const LineChartKitchenSink = () => (
+  <Container style={style}>
+    <LineChart chart={kitchenSinkLineChart} />
+  </Container>
+);
+
+export default {
+  title: 'Line Chart Kitchen Sink',
+  component: LineChartKitchenSink,
+};

package/src/components/line-chart/get-line-chart-data-labels.js

@@ -0,0 +1,24 @@
+import { AUTO, DEFAULT_DARK_MODE_COLOR } from '../../helpers/chart-consts';
+import { AlignOptions, PointType } from '../../helpers/enums';
+
+/**
+ * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ */
+const getLineChartDataLabels = (options) => {
+  return options.graph.showDataLabels
+    ? {
+        display: AUTO,
+        align: (context) =>
+          context.dataset.pointType === PointType.Casing
+            ? AlignOptions.Start
+            : AlignOptions.End,
+        formatter: (value, context) =>
+          context.dataset.data[context.dataIndex].label || '',
+        color: options.chartStyling.darkMode
+          ? DEFAULT_DARK_MODE_COLOR
+          : undefined,
+      }
+    : { display: false };
+};
+
+export default getLineChartDataLabels;

package/src/components/line-chart/get-line-chart-scales.js

@@ -0,0 +1,131 @@
+import {
+  generateRandomColor,
+  getAxisPosition,
+} from '../../helpers/chart-utils';
+import {
+  COLORS,
+  DARK_MODE_COLORS,
+  DEFAULT_COLOR,
+  DEFAULT_DARK_MODE_BORDER_COLOR,
+  DEFAULT_DARK_MODE_COLOR,
+  LOGARITHMIC_STEPS,
+} from '../../helpers/chart-consts';
+import { truncateDecimals } from './line-chart-utils';
+import { AxisType, ScaleType } from '../../helpers/enums';
+
+/**
+ * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @param {'x'|'y'} axisType
+ * @param {import('../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ * @param {import('./line-chart.interface').ILineChartAxes[]} [currentScales]
+ * @param {number} [i]
+ */
+const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
+  const axisData = currentScales || options.axes[axisType][0];
+  const stateAxis = state.axes.filter((axis) => axis.id.startsWith(axisType))[
+    i
+  ];
+
+  const { additionalAxesOptions, chartStyling } = options;
+
+  const getTicks = () => {
+    const truncateAxisNumbersToDigitsCallback = Number.isInteger(
+      additionalAxesOptions.truncateAxisNumbersToDigitsCallback,
+    )
+      ? {
+          callback: (tick) =>
+            truncateDecimals(
+              tick,
+              additionalAxesOptions.truncateAxisNumbersToDigitsCallback,
+            ),
+        }
+      : {};
+
+    return additionalAxesOptions.chartScaleType === ScaleType.Logarithmic
+      ? {
+          callback: (tick) => {
+            return LOGARITHMIC_STEPS.includes(tick)
+              ? tick.toLocaleString()
+              : '';
+          },
+        }
+      : {
+          color:
+            axisData.color ||
+            (chartStyling.darkMode ? DEFAULT_DARK_MODE_COLOR : DEFAULT_COLOR),
+          stepSize:
+            axisData.stepSize ||
+            (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null),
+          ...truncateAxisNumbersToDigitsCallback,
+        };
+  };
+
+  return {
+    type: additionalAxesOptions.chartScaleType,
+    position: axisData.position,
+    beginAtZero: additionalAxesOptions.beginAtZero,
+    reverse: axisType === AxisType.Y ? additionalAxesOptions.reverse : false,
+    suggestedMax: additionalAxesOptions.suggestedMax,
+    suggestedMin: additionalAxesOptions.suggestedMin,
+    min: stateAxis.min?.value || additionalAxesOptions?.range?.[axisType]?.min,
+    max: stateAxis.max?.value || additionalAxesOptions?.range?.[axisType]?.max,
+    title: {
+      display: axisData.label?.length,
+      text: axisData.label,
+      padding: 0,
+      color: chartStyling.darkMode ? DEFAULT_DARK_MODE_BORDER_COLOR : undefined,
+    },
+    ticks: getTicks(),
+    grid: {
+      color: chartStyling.darkMode ? DEFAULT_DARK_MODE_BORDER_COLOR : undefined,
+      borderColor: chartStyling.darkMode
+        ? DEFAULT_DARK_MODE_BORDER_COLOR
+        : undefined,
+      ...axisData.gridLines,
+    },
+  };
+};
+
+/**
+ * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @param {'x'|'y'} axisType
+ * @param {import('../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ */
+const getLineChartAxes = (options, axisType, state) => {
+  const axesData = options.axes[axisType];
+  const axes = axesData.reduce((acc, curr, i) => {
+    const axisData = curr;
+    axisData.color =
+      curr.color ||
+      (options.chartStyling.darkMode ? DARK_MODE_COLORS[i] : COLORS[i]) ||
+      generateRandomColor(COLORS);
+    axisData.position = curr.position || getAxisPosition(axisType, i);
+
+    const axis = getLineChartAxis(options, axisType, state, axisData, i);
+    return { ...acc, [axisType + (i + 1)]: axis };
+  }, {});
+  return axes;
+};
+
+/**
+ *
+ * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @param {import('../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ */
+const getLineChartScales = (options, state) => {
+  const hasMultipleXAxes = options.axes.x?.length > 1;
+  const hasMultipleYAxes = options.axes.y?.length > 1;
+
+  const xAxes = hasMultipleXAxes
+    ? getLineChartAxes(options, AxisType.X, state)
+    : { x: getLineChartAxis(options, AxisType.X, state) };
+  const yAxes = hasMultipleYAxes
+    ? getLineChartAxes(options, AxisType.Y, state)
+    : { y: getLineChartAxis(options, AxisType.Y, state) };
+  return {
+    ...xAxes,
+    ...yAxes,
+  };
+};
+
+export default getLineChartScales;

package/src/components/line-chart/get-line-chart-tooltips.js

@@ -0,0 +1,91 @@
+import { ChartHoverMode, Position, TooltipLabel } from '../../helpers/enums';
+import { afterLabelCallback, getTooltipLabel } from '../../helpers/chart-utils';
+
+/**
+ * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ */
+const getLineChartToolTips = (options) => {
+  const getTooltipLabels = (dataset) => {
+    const xIndex = dataset.xAxisID?.length > 1 ? dataset.xAxisID[1] - 1 : 0;
+    const yIndex = dataset.yAxisID?.length > 1 ? dataset.yAxisID[1] - 1 : 0;
+    const xAxis = options.axes.x[xIndex];
+    const yAxis = options.axes.y[yIndex];
+
+    if (options.axes.x[0].position === Position.Top) {
+      return {
+        titleAxisLabel: yAxis?.label || '',
+        valueAxisLabel: xAxis?.label || '',
+        titleLabel: TooltipLabel.Y,
+        valueLabel: TooltipLabel.X,
+      };
+    } else {
+      return {
+        titleAxisLabel: xAxis?.label || '',
+        valueAxisLabel: yAxis?.label || '',
+        titleLabel: TooltipLabel.X,
+        valueLabel: TooltipLabel.Y,
+      };
+    }
+  };
+
+  const titleCallback = (tooltipItem, data) => {
+    const labels = getTooltipLabels(tooltipItem[0].dataset);
+    const { titleLabel, titleAxisLabel } = labels;
+
+    const formattedValue =
+      titleLabel === TooltipLabel.Y
+        ? tooltipItem[0].parsed.y
+        : tooltipItem[0].parsed.x;
+    const roundedValue =
+      Math.abs(formattedValue) < 1
+        ? formattedValue.toPrecision(3)
+        : formattedValue.toFixed(2);
+
+    return `${roundedValue} ${titleAxisLabel}`;
+  };
+
+  const labelCallback = (tooltipItem) => {
+    const { showLabelsInTooltips, hideSimulationName } = options.tooltip;
+    let label = tooltipItem.dataset.label || '';
+    const labels = getTooltipLabels(tooltipItem.dataset);
+    const { valueLabel, valueAxisLabel } = labels;
+
+    const getTooltipItemValue = () => {
+      const labelNumber =
+        valueLabel === TooltipLabel.X
+          ? tooltipItem.parsed.x
+          : tooltipItem.parsed.y;
+      return Math.abs(labelNumber) < 1
+        ? labelNumber.toPrecision(3)
+        : labelNumber.toFixed(3);
+    };
+
+    const splitValueAxisLabel = valueAxisLabel.split(' ');
+    const newValueAxisLabel = hideSimulationName
+      ? splitValueAxisLabel[splitValueAxisLabel.length - 1]
+      : valueAxisLabel;
+
+    const tooltipItemValue = getTooltipItemValue();
+    const valAxisLabel =
+      label === valueAxisLabel || valueAxisLabel.includes(label)
+        ? ''
+        : newValueAxisLabel;
+    const tooltipLabel = getTooltipLabel(tooltipItem, showLabelsInTooltips);
+
+    return `${label}: ${tooltipItemValue} ${valAxisLabel}${tooltipLabel}`;
+  };
+
+  return {
+    enabled: options.tooltip.tooltips,
+    mode: ChartHoverMode.Nearest,
+    intersect: true,
+    padding: 8,
+    callbacks: {
+      title: titleCallback,
+      label: labelCallback,
+      afterLabel: afterLabelCallback,
+    },
+  };
+};
+
+export default getLineChartToolTips;

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

@@ -0,0 +1,6 @@
+export const DEFAULT_POINT_RADIUS = 2;
+export const DEFAULT_HOVER_RADIUS = 5;
+export const DEFAULT_BORDER_WIDTH = 1;
+export const BORDER_JOIN_STYLE = 'round';
+export const DEFAULT_LINE_POINT_RADIUS = 0;
+export const DEFAULT_BACKGROUND_COLOR = 'transparent';

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

@@ -0,0 +1,187 @@
+import PropTypes from 'prop-types';
+
+export const LineChartPropTypes = {
+  chart: PropTypes.shape({
+    data: PropTypes.object.isRequired,
+    options: PropTypes.shape({
+      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,
+          }),
+        ),
+        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,
+        truncateAxisNumbersToDigitsCallback: 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,
+          }),
+        }),
+      }),
+      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,
+        darkMode: PropTypes.bool,
+      }),
+      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({
+        showAnnotations: PropTypes.bool,
+        controlAnnotation: PropTypes.bool,
+        annotationsData: PropTypes.arrayOf(
+          PropTypes.shape({
+            annotationAxis: PropTypes.oneOf(['x', 'y']),
+            label: PropTypes.string,
+            color: PropTypes.string,
+            value: PropTypes.number,
+            endValue: PropTypes.number,
+          }),
+        ),
+      }),
+      legend: PropTypes.shape({
+        display: PropTypes.bool,
+        position: PropTypes.oneOf(['top', 'bottom', 'right']),
+        align: PropTypes.oneOf(['start', 'center', 'end']),
+      }),
+      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,
+      }),
+    }),
+  }).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.chartOptions = props.chart.options.chartOptions || {};
+  props.chart.options.interactions = props.chart.options.interactions || {};
+  // Set defaults for missing properties
+  const chart = {
+    data: props.chart.data,
+    options: {
+      title: props.chart.options.title || '',
+      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,
+        truncateAxisNumbersToDigitsCallback:
+          props.chart.options.additionalAxesOptions
+            .truncateAxisNumbersToDigitsCallback,
+        suggestedMin: props.chart.options.additionalAxesOptions.suggestedMin,
+        suggestedMax: props.chart.options.additionalAxesOptions.suggestedMax,
+        range: props.chart.options.additionalAxesOptions.range,
+      },
+      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,
+        darkMode: props.chart.options.chartStyling.darkMode || false,
+      },
+      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.1,
+        spanGaps: props.chart.options.graph.spanGaps || false,
+        showDataLabels: props.chart.options.graph.showDataLabels || false,
+        showMinorGridlines:
+          props.chart.options.graph.showMinorGridlines || false,
+      },
+      annotations: {
+        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',
+        align: props.chart.options.legend.align || 'center',
+      },
+      chartOptions: {
+        showPoints: props.chart.options.chartOptions.showPoints ?? true,
+        enableZoom: props.chart.options.chartOptions.enableZoom || false,
+        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,
+      },
+    },
+  };
+  return chart;
+};