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

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

@@ -0,0 +1,98 @@
+import { LinearScaleOptions } from 'chart.js';
+import {
+    IChartAnnotations,
+    IChartDraggableData,
+    IChartInteractions,
+    IChartLegend,
+    IChartStyling
+} from "../../helpers/chart-interface";
+
+export interface IChartOptions {
+    enableZoom: boolean;
+    enablePan: boolean;
+}
+
+export interface IBarChartGraph {
+    showDataLabels: boolean;
+    showMinorGridlines: boolean;
+}
+
+export interface IBarChartTooltip {
+    tooltips: boolean;
+    showLabelsInTooltips: boolean;
+}
+
+export interface IBarChartAdditionalAxesOptions {
+    chartScaleType: 'linear' | 'logarithmic';
+    reverse: boolean;
+    beginAtZero: boolean;
+    stepSize: number;
+    stacked: boolean;
+    suggestedMin: number;
+    suggestedMax:number;
+    min: number;
+    max: number;
+}
+
+export interface IBarChartAxes<PositionType> {
+    label: string;
+    position: PositionType;
+    color: string;
+    unit: string;
+}
+
+export interface IBarScales {
+    x: LinearScaleOptions;
+    y: LinearScaleOptions;
+}
+
+export interface IBarChartOptions {
+    title: string | string[];
+    direction: 'vertical' | 'horizontal';
+    axes: {
+        x: IBarChartAxes<'top' | 'bottom'>[];
+        y: IBarChartAxes<'left' | 'right'>[];
+    };
+    scales: IBarScales,
+    additionalAxesOptions: IBarChartAdditionalAxesOptions;
+    chartStyling: IChartStyling;
+    tooltip: IBarChartTooltip;
+    graph: IBarChartGraph;
+    annotations: IChartAnnotations;
+    legend: IChartLegend;
+    chartOptions: IChartOptions;
+    interactions: IChartInteractions;
+    draggableData :IChartDraggableData;
+}
+
+export interface IBarDataPoint {
+    x: number;
+    y: number;
+    label?: string;
+}
+
+export interface IBarChartDataset {
+    label?: string;
+    data: number[] | number[][] | IBarDataPoint[];
+    borderSkipped?: string;
+    backgroundColor?: string[];
+    borderColor?: string[];
+    borderRadius?: number;
+    borderWidth?: number;
+    yAxisID?: string;
+    stack?: number;
+}
+
+export interface IBarChartData {
+    //TODO: revisit data interface definition after project is more stable
+    testId: string | null;
+    data: {
+        labels?: string[],
+        datasets: IBarChartDataset[]
+    } | any;
+    options: IBarChartOptions;
+}
+
+export interface IBarChartProps {
+    chart: IBarChartData;
+}

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

@@ -0,0 +1,247 @@
+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 dragDataPlugin from 'chartjs-plugin-dragdata';
+
+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';
+import getDraggableData from '../../helpers/get-draggableData';
+
+ChartJS.register(
+  LinearScale,
+  CategoryScale,
+  LogarithmicScale,
+  BarElement,
+  Legend,
+  Tooltip,
+  Title,
+  Filler,
+  zoomPlugin,
+  dataLabelsPlugin,
+  annotationPlugin,
+  dragDataPlugin,
+);
+
+/**
+ * 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,
+            },
+            dragData: getDraggableData(options),
+          },
+        }}
+        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,138 @@
+import { AxisType, ScaleType } from '../../helpers/enums';
+import {
+  getAxisPosition,
+  isVertical,
+  generateRandomColor,
+} from '../../helpers/chart-utils';
+import { COLORS, LOGARITHMIC_STEPS } from '../../helpers/chart-consts';
+import { formatAxisLabelNumbers } from '../line-chart/utils/axis-formatting/axis-formatting';
+
+/**
+ * @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, i) => {
+  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 additionalAxesOptions = chart?.options?.additionalAxesOptions;
+    const ticksConfigFromProps =
+      chart?.options?.scales?.[`${i === 0 ? axisType : axisType + i}`]?.ticks;
+    const isLogarithmic =
+      isDirectionCompatibleWithAxisType &&
+      additionalAxesOptions?.chartScaleType === ScaleType.Logarithmic;
+    const ticksFormattingCallback = (tick, _index, ticks) => {
+      return isLogarithmic
+        ? LOGARITHMIC_STEPS.includes(tick)
+          ? formatAxisLabelNumbers(tick, ticks)
+          : ''
+        : formatAxisLabelNumbers(tick, ticks);
+    };
+    const stepSize = !isLogarithmic
+      ? {
+          stepSize:
+            axisData.stepSize ??
+            (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null),
+        }
+      : {};
+    const ticks = {
+      ...stepSize,
+      callback: ticksFormattingCallback,
+      includeBounds: false, //OW-10088 disable irregular axis ticks
+      ...ticksConfigFromProps,
+      font: {
+        size: 14,
+      },
+    };
+    return ticks;
+  };
+
+  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);
+    const axisId = i === 0 ? axisType : `${axisType}${i + 1}`;
+    return { ...acc, [axisId]: 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,102 @@
+import { toNum } from '@oliasoft-open-source/units';
+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 formattedValueWithDotSeparator = formattedValue.replace(',', '.');
+      const labelNumber = toNum(formattedValueWithDotSeparator);
+
+      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;