@oliasoft-open-source/charts-library 2.17.5 → 2.18.0-beta-1

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

@@ -1,91 +0,0 @@
-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 IBarChartOptions {
-    title: string | string[];
-    direction: 'vertical' | 'horizontal';
-    axes: {
-        x: IBarChartAxes<'top' | 'bottom'>[];
-        y: IBarChartAxes<'left' | 'right'>[];
-    };
-    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

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

@@ -1,61 +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);
-  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

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

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

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