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

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

@@ -0,0 +1,243 @@
+import React, { useRef, useState } from 'react';
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  Legend,
+  LinearScale,
+  LogarithmicScale,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import { Bar } from 'react-chartjs-2';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import dataLabelsPlugin from 'chartjs-plugin-datalabels';
+import annotationPlugin from 'chartjs-plugin-annotation';
+
+import styles from './bar-chart.module.less';
+import { BarChartPropTypes, getDefaultProps } from './bar-chart-prop-types';
+import getBarChartScales from './get-bar-chart-scales';
+import getBarChartToolTips from './get-bar-chart-tooltips';
+import getBarChartDataLabels from './get-bar-chart-data-labels';
+import getAnnotation from '../../helpers/get-chart-annotation';
+import {
+  getTitle,
+  isVertical,
+  setAnnotations,
+  generateRandomColor,
+  getClassName,
+  getPlugins,
+  getLegend,
+  setDefaultTheme,
+} from '../../helpers/chart-utils';
+import {
+  ALPHA_CHANEL,
+  ANIMATION_DURATION,
+  AUTO,
+  COLORS,
+  CUSTOM_LEGEND_PLUGIN_NAME,
+  BORDER_COLOR,
+} from '../../helpers/chart-consts';
+import {
+  AxisType,
+  ChartHoverMode,
+  ChartType,
+  PointStyle,
+} from '../../helpers/enums';
+
+ChartJS.register(
+  LinearScale,
+  CategoryScale,
+  LogarithmicScale,
+  BarElement,
+  Legend,
+  Tooltip,
+  Title,
+  Filler,
+  zoomPlugin,
+  dataLabelsPlugin,
+  annotationPlugin,
+);
+
+/**
+ * this is a bar chart component
+ * @param {import('./bar-chart.interface').IBarChartProps} props
+ */
+const BarChart = (props) => {
+  setDefaultTheme();
+  const chartRef = useRef(null);
+  const [pointHover, setPointHover] = useState(false);
+  const chart = getDefaultProps(props);
+  const { options, testId } = chart;
+  const { annotations, chartStyling, interactions, graph } = chart.options;
+
+  const [visibleAnnotationsIndices, setVisibleAnnotationsIndices] = useState(
+    setAnnotations(annotations.annotationsData),
+  );
+
+  const generateBarChartDatasets = (datasets) => {
+    const barDatasetsCopy = [...datasets];
+
+    // Add annotations to dataset to have them appear in legend.
+    if (
+      annotations.controlAnnotation &&
+      annotations.showAnnotations &&
+      annotations.annotationsData?.length
+    ) {
+      annotations.annotationsData.forEach((annotation, index) => {
+        barDatasetsCopy.push({
+          isAnnotation: true,
+          label: annotation.label,
+          annotationIndex: index,
+          backgroundColor: annotation.color || COLORS[index],
+          borderColor: annotation.color || COLORS[index],
+          data: [],
+          type: ChartType.Bar,
+        });
+      });
+    }
+
+    const generatedDatasets = barDatasetsCopy.map((barDataset, index) => {
+      const colorSchema = COLORS;
+      const colors = barDataset.data.map((_, i) => {
+        const colorSelectionIndex = datasets.length > 1 ? index : i;
+        return colorSchema[colorSelectionIndex] || generateRandomColor(COLORS);
+      });
+
+      const backgroundColors =
+        barDataset.backgroundColor ||
+        colors.map((color) => color + ALPHA_CHANEL);
+
+      return {
+        ...barDataset,
+        borderWidth: parseFloat(barDataset.borderWidth) || '1',
+        borderColor: barDataset.borderColor || colors,
+        backgroundColor: backgroundColors,
+      };
+    });
+    return generatedDatasets;
+  };
+
+  const generatedDatasets = generateBarChartDatasets(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;
+      if (visibleAnnotationsIndices.includes(annotationIndex)) {
+        setVisibleAnnotationsIndices(
+          visibleAnnotationsIndices.filter((ann) => ann !== annotationIndex),
+        );
+      } else {
+        setVisibleAnnotationsIndices([
+          ...visibleAnnotationsIndices,
+          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();
+    // TODO: Restore redux-logic for zoom
+  };
+
+  const onHover = (evt, hoveredItems, chartInstance) => {
+    if (pointHover && !hoveredItems?.length) {
+      setPointHover(false);
+      if (interactions.onBarUnhover) {
+        interactions.onBarUnhover(evt);
+      }
+    }
+    if (!pointHover && hoveredItems?.length) {
+      setPointHover(true);
+      if (interactions.onBarHover) {
+        const { index, datasetIndex } = hoveredItems[0];
+        const generatedDataset = generatedDatasets;
+        interactions.onBarHover(evt, datasetIndex, index, generatedDataset);
+      }
+    }
+  };
+
+  return (
+    <div
+      className={getClassName(chartStyling, styles)}
+      style={{
+        width: chartStyling.width || AUTO,
+        height: chartStyling.height || AUTO,
+      }}
+      data-testid={testId}
+    >
+      <Bar
+        ref={chartRef}
+        data={{
+          labels: chart.data.labels.length ? chart.data.labels : [''],
+          datasets: generatedDatasets,
+        }}
+        options={{
+          onClick,
+          onHover,
+          indexAxis: isVertical(options.direction) ? AxisType.X : AxisType.Y,
+          maintainAspectRatio: chartStyling.maintainAspectRatio,
+          animation: chartStyling.performanceMode
+            ? false
+            : {
+                duration: ANIMATION_DURATION.FAST,
+              },
+          hover: {
+            mode: ChartHoverMode.Nearest,
+            intersect: true,
+          },
+          elements: {
+            bar: { pointStyle: PointStyle.Circle },
+          },
+          scales: getBarChartScales(chart),
+          plugins: {
+            title: getTitle(options),
+            datalabels: getBarChartDataLabels(options),
+            annotation: getAnnotation(options, {
+              showAnnotationLineIndex: visibleAnnotationsIndices,
+            }),
+            tooltip: getBarChartToolTips(options),
+            legend: getLegend(options, legendClick),
+            [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend
+              .customLegendPlugin && {
+              containerID: options.legend.customLegend.customLegendContainerID,
+            },
+            chartAreaBorder: {
+              borderColor: BORDER_COLOR,
+            },
+          },
+        }}
+        plugins={getPlugins(graph, options.legend)}
+      />
+    </div>
+  );
+};
+
+BarChart.propTypes = BarChartPropTypes;
+
+export { BarChart };

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

@@ -0,0 +1,61 @@
+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);
+  padding-top: 10px;
+  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%;
+  }
+
+  &: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;
+}

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

@@ -0,0 +1,42 @@
+import { AlignOptions } from '../../helpers/enums';
+import { AUTO } from '../../helpers/chart-consts';
+
+/**
+ * @param {import('./bar-chart.interface').IBarChartOptions} options - bar chart options object
+ */
+const getBarChartDataLabels = (options) => {
+  const { beginAtZero, reverse } = options.additionalAxesOptions;
+
+  const formatterCallback = (value, context) => {
+    const { dataset, dataIndex } = context;
+    const dataElement = dataset.data[dataIndex];
+
+    let dataLabel = '';
+    if (typeof dataElement === 'number') {
+      dataLabel = Number.isInteger(dataElement)
+        ? dataElement
+        : dataElement.toFixed(2);
+    }
+    if (Array.isArray(dataElement)) {
+      dataLabel = dataElement.reduce((acc, curr, i) => {
+        return i === 0 ? `${acc} ${curr}` : `${acc}, ${curr}`;
+      }, '');
+    }
+
+    return dataLabel;
+  };
+
+  const beginAtNotZeroAlign = reverse ? AlignOptions.End : AlignOptions.Start;
+  const beginAtNotZeroAnchor = reverse ? AlignOptions.Start : AlignOptions.End;
+
+  return options.graph.showDataLabels
+    ? {
+        display: AUTO,
+        align: beginAtZero ? AlignOptions.Center : beginAtNotZeroAlign,
+        anchor: beginAtZero ? AlignOptions.Center : beginAtNotZeroAnchor,
+        formatter: formatterCallback,
+      }
+    : { display: false };
+};
+
+export default getBarChartDataLabels;

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

@@ -0,0 +1,123 @@
+import { AxisType, ScaleType } from '../../helpers/enums';
+import {
+  getAxisPosition,
+  isVertical,
+  generateRandomColor,
+} from '../../helpers/chart-utils';
+import { COLORS, LOGARITHMIC_STEPS } from '../../helpers/chart-consts';
+
+/**
+ * @param {import('./bar-chart.interface').IBarChartData} chart - chart data
+ * @param {'x'|'y'} axisType
+ * @param {import('./bar-chart.interface').IBarChartAxes} [currentScales]
+ */
+const getBarChartAxis = (chart, axisType, currentScales) => {
+  const isDirectionVertical = isVertical(chart.options.direction);
+
+  const axisData = currentScales || chart.options.axes[axisType][0];
+  const isDirectionCompatibleWithAxisType =
+    (isDirectionVertical && axisType === AxisType.Y) ||
+    (!isDirectionVertical && axisType === AxisType.X);
+
+  const grid = axisData?.gridLines || {};
+
+  const getScaleType = () => {
+    const scaleType = chart.data.labels ? ScaleType.Category : ScaleType.Linear;
+    const axisWithScale = isDirectionVertical ? AxisType.X : AxisType.Y;
+    return axisType === axisWithScale
+      ? scaleType
+      : chart.options.additionalAxesOptions.chartScaleType;
+  };
+
+  const getReverse = () => {
+    const axisWithReverse = isDirectionVertical ? AxisType.Y : AxisType.X;
+    return axisType === axisWithReverse
+      ? chart.options.additionalAxesOptions.reverse
+      : false;
+  };
+
+  const getTicks = () => {
+    const areLogarithmicTicks =
+      isDirectionCompatibleWithAxisType &&
+      chart.options.additionalAxesOptions.chartScaleType ===
+        ScaleType.Logarithmic;
+
+    if (areLogarithmicTicks) {
+      return {
+        callback: (tick) => {
+          return LOGARITHMIC_STEPS.includes(tick) ? tick.toLocaleString() : '';
+        },
+      };
+    } else {
+      return {
+        stepSize:
+          axisData.stepSize || chart.options.additionalAxesOptions.stepSize,
+      };
+    }
+  };
+
+  return {
+    type: getScaleType(),
+    position: axisData.position,
+    beginAtZero: chart.options.additionalAxesOptions.beginAtZero,
+    reverse: getReverse(),
+    suggestedMax: chart.options?.additionalAxesOptions?.suggestedMax,
+    suggestedMin: chart.options?.additionalAxesOptions?.suggestedMin,
+    min: isDirectionCompatibleWithAxisType
+      ? chart.options?.additionalAxesOptions?.min
+      : undefined,
+    max: isDirectionCompatibleWithAxisType
+      ? chart.options?.additionalAxesOptions?.max
+      : undefined,
+    title: {
+      display: axisData.label?.length || axisData.unit?.length,
+      text: axisData.label || axisData.unit,
+      padding: 0,
+    },
+    ticks: getTicks(),
+    grid: {
+      ...grid,
+    },
+    stacked: chart.options.additionalAxesOptions.stacked,
+  };
+};
+
+/**
+ * @param {import('./bar-chart.interface').IBarChartData} chart - chart data
+ * @param {'x'|'y'} axisType
+ */
+const getBarChartAxes = (chart, axisType) => {
+  const axesData = chart.options.axes[axisType];
+  const axes = axesData.reduce((acc, curr, i) => {
+    const axisData = curr;
+    const color = curr.color || COLORS[i] || generateRandomColor(COLORS);
+    axisData.color = color;
+    axisData.position = curr.position || getAxisPosition(axisType, i);
+
+    const axis = getBarChartAxis(chart, axisType, axisData);
+    return { ...acc, [axisType + (i + 1)]: axis };
+  }, {});
+  return axes;
+};
+
+/**
+ * @param {import('./bar-chart.interface').IBarChartData} chart - chart data
+ */
+const getBarChartScales = (chart) => {
+  const hasMultipleXAxes = chart.options.axes.x?.length > 1;
+  const hasMultipleYAxes = chart.options.axes.y?.length > 1;
+
+  const xAxesScales = hasMultipleXAxes
+    ? getBarChartAxes(chart, AxisType.X)
+    : { x: getBarChartAxis(chart, AxisType.X) };
+  const yAxesScales = hasMultipleYAxes
+    ? getBarChartAxes(chart, AxisType.Y)
+    : { y: getBarChartAxis(chart, AxisType.Y) };
+
+  return {
+    ...xAxesScales,
+    ...yAxesScales,
+  };
+};
+
+export default getBarChartScales;

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

@@ -0,0 +1,100 @@
+import {
+  afterLabelCallback,
+  getTooltipLabel,
+  isVertical,
+} from '../../helpers/chart-utils';
+import { ChartHoverMode, TooltipLabel } from '../../helpers/enums';
+
+/**
+ * @param {import('./bar-chart.interface').IBarChartOptions} options - bar chart options object
+ */
+const getBarChartToolTips = (options) => {
+  const getTooltipLabels = (dataset) => {
+    const isDirectionVertical = isVertical(options.direction);
+    const { x, y } = options.axes;
+
+    const xIndex = dataset.xAxisID?.length > 1 ? dataset.xAxisID[1] - 1 : 0;
+    const yIndex = dataset.yAxisID?.length > 1 ? dataset.yAxisID[1] - 1 : 0;
+    const xAxis = isDirectionVertical ? x[xIndex] : y[yIndex];
+    const yAxis = isDirectionVertical ? y[yIndex] : x[xIndex];
+
+    return {
+      titleAxisLabel: xAxis?.label || '',
+      valueAxisLabel: yAxis?.label || '',
+      titleLabel: TooltipLabel.X,
+      valueLabel: TooltipLabel.Y,
+      titleUnit: xAxis?.unit || '',
+      valueUnit: yAxis?.unit || '',
+    };
+  };
+
+  const titleCallback = (tooltipItem, data) => {
+    const barLabel = tooltipItem[0]?.label || '';
+    const labels = getTooltipLabels(tooltipItem[0].dataset);
+    const { titleAxisLabel, titleUnit } = labels;
+    const axisLabel =
+      !titleAxisLabel && !titleUnit ? '' : `${titleAxisLabel || titleUnit}: `;
+    return axisLabel + barLabel;
+  };
+
+  const labelCallback = (tooltipItem) => {
+    const { showLabelsInTooltips } = options.tooltip;
+    let label = tooltipItem.dataset?.label || '';
+
+    const labels = getTooltipLabels(tooltipItem.dataset);
+    const { valueUnit, valueAxisLabel } = labels;
+
+    const getTooltipItemValue = () => {
+      const { formattedValue } = tooltipItem;
+      const labelNumber = Number(formattedValue);
+
+      let labelNumberFormatted;
+      if (Math.abs(labelNumber) < 1) {
+        labelNumberFormatted = labelNumber.toPrecision(3);
+      } else {
+        labelNumberFormatted = Number.isInteger(labelNumber)
+          ? labelNumber
+          : labelNumber.toFixed(3);
+      }
+
+      let tooltipItemValue = '';
+      if (typeof tooltipItem.raw === 'number') {
+        tooltipItemValue = labelNumberFormatted;
+      }
+      if (Array.isArray(tooltipItem.raw)) {
+        tooltipItemValue = tooltipItem.raw.reduce((acc, curr, i) => {
+          return i === 0 ? `${acc} ${curr}` : `${acc}, ${curr}`;
+        }, '');
+      }
+      if (typeof tooltipItem.raw === 'object') {
+        tooltipItemValue = formattedValue;
+      }
+
+      return tooltipItemValue;
+    };
+
+    const hideValueAxisLabel =
+      label === valueAxisLabel || valueAxisLabel.includes(label);
+
+    const tooltipItemValue = getTooltipItemValue();
+    const unit = valueUnit ? `[${valueUnit}] ` : '';
+    const valAxisLabel = hideValueAxisLabel ? '' : valueAxisLabel;
+    const tooltipLabel = getTooltipLabel(tooltipItem, showLabelsInTooltips);
+
+    return `${label}: ${tooltipItemValue} ${unit}${valAxisLabel}${tooltipLabel}`;
+  };
+
+  return {
+    enabled: options.tooltip.tooltips,
+    mode: ChartHoverMode.Nearest,
+    intersect: true,
+    padding: 8,
+    callbacks: {
+      title: titleCallback,
+      label: labelCallback,
+      afterLabel: afterLabelCallback,
+    },
+  };
+};
+
+export default getBarChartToolTips;

package/src/components/controls/axes-options/axes-options-form-state.js

@@ -0,0 +1,95 @@
+import { produce } from 'immer';
+import {
+  isGreaterThanMin,
+  isLessThanMax,
+  validNumber,
+} from '../../line-chart/line-chart-utils';
+
+export const actionTypes = Object.freeze({
+  reset: 'reset',
+  valueUpdated: 'valueUpdated',
+});
+
+/**
+ * Initialize local component form state for a custom loads density table
+ *
+ * @param {Object} args
+ * @param {Object} args.initialAxesRanges
+ * @param {Array} [args.axes]
+ * @returns {Object} formState
+ */
+export const initializeFormState = ({ initialAxesRanges, axes = [] }) => {
+  return initialAxesRanges.map((initialAxisRange) => {
+    const currentAxisRange = axes.find((a) => a.id === initialAxisRange.id);
+    return {
+      id: initialAxisRange.id,
+      min: currentAxisRange?.min ?? initialAxisRange?.min,
+      max: currentAxisRange?.max ?? initialAxisRange?.max,
+    };
+  });
+};
+
+/**
+ * @typedef {Object} Action
+ * @property {String} type Action type
+ * @property {Object} [payload] Action payload (optional)
+ */
+
+const isEmptyString = (value) => value === '';
+
+export const validateAxes = (formState) => {
+  return formState.reduce(
+    (acc, { id, min, max }) => {
+      return produce(acc, (draft) => {
+        const errors = {
+          min: [
+            ...(isEmptyString(min) ? ['Must have a value'] : []),
+            ...(!validNumber(min) ? ['Must be a number'] : []),
+            ...(!isLessThanMax(min, max) ? ['Must be less than max'] : []),
+          ],
+          max: [
+            ...(isEmptyString(max) ? ['Must have a value'] : []),
+            ...(!validNumber(max) ? ['Must be a number'] : []),
+            ...(!isGreaterThanMin(max, min)
+              ? ['Must be greater than min']
+              : []),
+          ],
+        };
+        draft.errors.push({
+          id,
+          ...errors,
+        });
+        draft.valid = !(
+          !acc.valid ||
+          !!errors.min.length ||
+          !!errors.max.length
+        );
+      });
+    },
+    { errors: [], valid: true },
+  );
+};
+
+/**
+ * Local component form state reducer for a axes options form
+ *
+ * @param {Object} state Local component form state
+ * @param {Action} action Action with type and payload
+ * @returns {Object} FormState
+ */
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case actionTypes.reset: {
+      const { initialAxesRanges } = action.payload;
+      return initializeFormState({ initialAxesRanges });
+    }
+    case actionTypes.valueUpdated:
+      return produce(state, (draft) => {
+        const { name, value, id } = action.payload;
+        const axis = draft.find((a) => a.id === id);
+        axis[name] = value;
+      });
+    default:
+      return state;
+  }
+};