@oliasoft-open-source/charts-library 2.0.0

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

@@ -0,0 +1,83 @@
+import {IChartAnnotations, 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;
+}
+
+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
+    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,
+  defaults,
+  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,
+} from '../../helpers/chart-utils';
+import {
+  ALPHA_CHANEL,
+  ANIMATION_DURATION,
+  AUTO,
+  COLORS,
+  DARK_MODE_COLORS,
+  DEFAULT_COLOR,
+  DEFAULT_DARK_MODE_BORDER_COLOR,
+  DEFAULT_DARK_MODE_COLOR,
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+} 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,
+);
+
+defaults.font.size = DEFAULT_FONT_SIZE;
+defaults.color = DEFAULT_COLOR;
+defaults.font.family = DEFAULT_FONT_FAMILY;
+defaults.darkModeColor = DEFAULT_DARK_MODE_COLOR;
+defaults.darkModeBorderColor = DEFAULT_DARK_MODE_BORDER_COLOR;
+
+/**
+ * this is a bar chart component
+ * @param {import('./bar-chart.interface').IBarChartProps} props
+ */
+const BarChart = (props) => {
+  const chartRef = useRef(null);
+  const [pointHover, setPointHover] = useState(false);
+  const chart = getDefaultProps(props);
+  const { options } = 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 = chartStyling.darkMode ? DARK_MODE_COLORS : 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,
+      }}
+    >
+      <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: {
+            duration: chartStyling.performanceMode
+              ? ANIMATION_DURATION.NO
+              : ANIMATION_DURATION.FAST,
+          },
+          hover: {
+            mode: ChartHoverMode.Nearest,
+            intersect: true,
+            animationDuration: chartStyling.performanceMode
+              ? ANIMATION_DURATION.NO
+              : ANIMATION_DURATION.SLOW,
+          },
+          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),
+          },
+        }}
+        plugins={getPlugins(graph)}
+      />
+    </div>
+  );
+};
+
+BarChart.propTypes = BarChartPropTypes;
+
+export { BarChart };

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

@@ -0,0 +1,56 @@
+.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;
+}