@oliasoft-open-source/charts-library 2.17.6 → 2.18.0-beta-2

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

@@ -1,209 +0,0 @@
-import PropTypes from 'prop-types';
-
-export const BarChartPropTypes = {
-  chart: PropTypes.shape({
-    testId: PropTypes.string,
-    data: PropTypes.object.isRequired,
-    options: PropTypes.shape({
-      title: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string),
-      ]),
-      direction: PropTypes.oneOf(['vertical', 'horizontal']),
-      axes: PropTypes.shape({
-        x: PropTypes.arrayOf(
-          PropTypes.shape({
-            label: PropTypes.string,
-            position: PropTypes.oneOf(['top', 'bottom']),
-            color: PropTypes.string,
-            unit: PropTypes.string,
-          }),
-        ),
-        y: PropTypes.arrayOf(
-          PropTypes.shape({
-            label: PropTypes.string,
-            position: PropTypes.oneOf(['left', 'right']),
-            color: PropTypes.string,
-            unit: PropTypes.string,
-          }),
-        ),
-      }),
-      additionalAxesOptions: PropTypes.shape({
-        chartScaleType: PropTypes.oneOf(['linear', 'logarithmic']),
-        reverse: PropTypes.bool,
-        beginAtZero: PropTypes.bool,
-        stepSize: PropTypes.number,
-        stacked: PropTypes.bool,
-        suggestedMin: PropTypes.number,
-        suggestedMax: PropTypes.number,
-        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,
-      }),
-      tooltip: PropTypes.shape({
-        tooltips: PropTypes.bool,
-        showLabelsInTooltips: PropTypes.bool,
-      }),
-      graph: PropTypes.shape({
-        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']),
-        customLegend: PropTypes.shape({
-          customLegendPlugin: PropTypes.object,
-          customLegendContainerID: PropTypes.string,
-        }),
-      }),
-      chartOptions: PropTypes.shape({
-        enableZoom: PropTypes.bool,
-        enablePan: PropTypes.bool,
-      }),
-      interactions: PropTypes.shape({
-        onLegendClick: PropTypes.func,
-        onBarHover: PropTypes.func,
-        onBarUnhover: 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 = {
-    testId: props.chart.testId ?? null,
-    data: props.chart.data,
-    options: {
-      title: props.chart.options.title || '',
-      direction: props.chart.options.direction || 'vertical',
-      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,
-        stacked: props.chart.options.additionalAxesOptions.stacked || false,
-        beginAtZero:
-          props.chart.options.additionalAxesOptions.beginAtZero != null
-            ? props.chart.options.additionalAxesOptions.beginAtZero
-            : true,
-        stepSize: props.chart.options.additionalAxesOptions.stepSize,
-        suggestedMin: props.chart.options.additionalAxesOptions.suggestedMin,
-        suggestedMax: props.chart.options.additionalAxesOptions.suggestedMax,
-        min: props.chart.options.additionalAxesOptions.min,
-        max: props.chart.options.additionalAxesOptions.max,
-      },
-      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 != null
-            ? props.chart.options.chartStyling.performanceMode
-            : true,
-      },
-      tooltip: {
-        tooltips:
-          props.chart.options.tooltip.tooltips != null
-            ? props.chart.options.tooltip.tooltips
-            : true,
-        showLabelsInTooltips:
-          props.chart.options.tooltip.showLabelsInTooltips || false,
-      },
-      graph: {
-        showDataLabels: props.chart.options.graph.showDataLabels || false,
-        showMinorGridlines:
-          props.chart.options.graph.showMinorGridlines || false,
-      },
-      annotations: {
-        showAnnotations:
-          props.chart.options.annotations.showAnnotations != null
-            ? props.chart.options.annotations.showAnnotations
-            : true,
-        controlAnnotation:
-          props.chart.options.annotations.controlAnnotation || false,
-        annotationsData: props.chart.options.annotations.annotationsData || [],
-      },
-      legend: {
-        display:
-          props.chart.options.legend.display != null
-            ? props.chart.options.legend.display
-            : true,
-        position: props.chart.options.legend.position || 'bottom',
-        align: props.chart.options.legend.align || 'center',
-        customLegend: props.chart.options.legend.customLegend,
-      },
-      chartOptions: {
-        enableZoom: props.chart.options.chartOptions.enableZoom || false,
-        enablePan: props.chart.options.chartOptions.enablePan || false,
-      },
-      interactions: {
-        onLegendClick: props.chart.options.interactions.onLegendClick,
-        onBarHover: props.chart.options.interactions.onBarHover,
-        onBarUnhover: props.chart.options.interactions.onBarUnhover,
-      },
-      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/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;