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

package/src/components/line-chart/line-chart.minor-gridlines-plugin.js

@@ -0,0 +1,88 @@
+const MINOR_TICKS_PER_MAJOR = 10;
+
+// Return largest gap between ticks
+// (Tick distance may not be consistent if ranges are custom)
+export const getLargestMajorTickWidth = (majorTickPositions) => {
+  return majorTickPositions.reduce((acc, curr, index) => {
+    if (index === 0) return acc;
+    const gap = Math.abs(curr - majorTickPositions[index - 1]);
+    return Math.max(gap, acc);
+  }, 0);
+};
+
+// Check if position is in visible part of axis scale
+// Check position does not duplicate a major tick
+export const isValidPosition = (
+  minorTickPosition,
+  majorTickPositions,
+  scale,
+) => {
+  const { axis, left, top, right, bottom } = scale;
+  const isHorizontal = axis === 'x';
+  const start = isHorizontal ? left : top;
+  const end = isHorizontal ? right : bottom;
+  const isAfterStart = minorTickPosition > start;
+  const isBeforeEnd = minorTickPosition < end;
+  const isDuplicate = majorTickPositions.indexOf(minorTickPosition) !== -1;
+  return isAfterStart && isBeforeEnd && !isDuplicate;
+};
+
+// Generate minor tick positions for a given axis/scale
+// (Uses second tick as starting point in case first tick is an irregular custom value)
+export const getMinorTickPositions = (majorTickPositions, scale) => {
+  const sortedMajorTickPositions = majorTickPositions.sort((a, b) => {
+    return a - b;
+  });
+  const minorTickWidth = getLargestMajorTickWidth(majorTickPositions) / 10;
+  const startPosition = majorTickPositions[0];
+  const numMinorTicks = (majorTickPositions.length + 1) * MINOR_TICKS_PER_MAJOR;
+  const positions = [...Array(numMinorTicks)]
+    .map((_, index) => {
+      const minorTickPosition =
+        startPosition + (index - MINOR_TICKS_PER_MAJOR + 1) * minorTickWidth;
+      return parseFloat(minorTickPosition.toFixed(1));
+    })
+    .filter((position) =>
+      isValidPosition(position, sortedMajorTickPositions, scale),
+    );
+  return positions;
+};
+
+const drawMinorTicksForScale = (scale) => {
+  const { chart, ctx } = scale;
+  if (!chart.config._config.options.scales[scale.id].grid.drawOnChartArea)
+    return;
+  if (chart.config._config.options.indexAxis === scale.axis) return;
+  const isHorizontal = scale.axis === 'x';
+  const majorTickPositions = scale.ticks
+    .map((_, index) => scale.getPixelForTick(index))
+    .sort((a, b) => a - b);
+  const minorTickPositions = getMinorTickPositions(majorTickPositions, scale);
+  ctx.save();
+  ctx.strokeStyle =
+    chart.config._config.options.scales[scale.id].grid.color ||
+    'rgba(0,0,0,0.06)';
+  ctx.lineWidth = 0.5;
+  minorTickPositions.forEach((minorTickPosition) => {
+    ctx.beginPath();
+    if (isHorizontal) {
+      const { top, bottom } = chart.chartArea;
+      ctx.moveTo(minorTickPosition, top);
+      ctx.lineTo(minorTickPosition, bottom);
+    } else {
+      const { left, right } = chart.chartArea;
+      ctx.moveTo(left, minorTickPosition);
+      ctx.lineTo(right, minorTickPosition);
+    }
+    ctx.stroke();
+  });
+  ctx.restore();
+};
+
+export const chartMinorGridlinesPlugin = {
+  id: 'minorGridlines',
+  beforeDatasetsDraw: (chart) => {
+    const { scales } = chart;
+    Object.keys(scales).forEach((id) => drawMinorTicksForScale(scales[id]));
+  },
+};

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

@@ -0,0 +1,77 @@
+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);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px; // Spacing between each section
+
+  .canvas {
+    flex-grow: 1;
+    min-height: 0; // Prevents chart exceeding available space
+    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%;
+  }
+
+  &.squareAspectRatio {
+    aspect-ratio: 1;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  &: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;
+}
+
+.table {
+  overflow: auto;
+}

package/src/components/line-chart/state/action-types.js

@@ -0,0 +1,11 @@
+export const TOGGLE_ZOOM = 'TOGGLE_ZOOM';
+export const TOGGLE_PAN = 'TOGGLE_PAN';
+export const TOGGLE_POINTS = 'TOGGLE_POINTS';
+export const TOGGLE_LINE = 'TOGGLE_LINE';
+export const TOGGLE_LEGEND = 'TOGGLE_LEGEND';
+export const SET_POINTS_ZOOM_DEFAULTS = 'SET_POINTS_ZOOM_DEFAULTS';
+export const TOGGLE_ANNOTATION = 'TOGGLE_ANNOTATION';
+export const TOGGLE_TABLE = 'TOGGLE_TABLE';
+export const SAVE_INITIAL_AXES_RANGES = 'SAVE_INITIAL_AXES_RANGES';
+export const RESET_AXES_RANGES = 'RESET_AXES_RANGES';
+export const UPDATE_AXES_RANGES = 'UPDATE_AXES_RANGES';

package/src/components/line-chart/state/initial-state.js

@@ -0,0 +1,69 @@
+import { AxisType } from '../../../helpers/enums';
+import { setAnnotations } from '../../../helpers/chart-utils';
+import { generateAxisId } from '../line-chart-utils';
+
+const initialState = ({
+  axes,
+  enableZoom,
+  enablePan,
+  showPoints,
+  showLine,
+  legendDisplay,
+  annotationsData,
+  customAxesRange,
+}) => {
+  /**
+   * getStateAxesByType
+   * @param {'x'|'y'} axisType
+   * @param {Object} customAxesRange
+   * @return {{id: string}[] | []} returns array of objects describing all chart axis or empty array
+   */
+  const getStateAxesByType = (axisType, customAxesRange) => {
+    if (!axes[axisType]) {
+      return [];
+    }
+
+    if (axes[axisType]?.length > 1) {
+      return axes[axisType].map((axisObj, index) => {
+        const id = generateAxisId(axisType, index, axes[axisType].length > 1);
+        const customMin = customAxesRange?.[id]?.min;
+        const customMax = customAxesRange?.[id]?.max;
+        return {
+          id,
+          //only add custom axis ranges if defined:
+          ...(customMin ? { min: customMin } : {}),
+          ...(customMax ? { max: customMax } : {}),
+        };
+      });
+    } else {
+      const id = generateAxisId(axisType);
+      const customMin = customAxesRange?.[id]?.min;
+      const customMax = customAxesRange?.[id]?.max;
+      return [
+        {
+          id,
+          //only add custom axis ranges if defined:
+          ...(customMin ? { min: customMin } : {}),
+          ...(customMax ? { max: customMax } : {}),
+        },
+      ];
+    }
+  };
+
+  const xStateAxes = getStateAxesByType(AxisType.X, customAxesRange);
+  const yStateAxes = getStateAxesByType(AxisType.Y, customAxesRange);
+  const stateAxes = [...xStateAxes, ...yStateAxes];
+
+  return {
+    zoomEnabled: enableZoom,
+    panEnabled: true, // TODO: work out why this logic doesn't work, workaround wih dispatch is currently used
+    pointsEnabled: showPoints,
+    lineEnabled: showLine,
+    legendEnabled: legendDisplay !== false,
+    axes: stateAxes,
+    showAnnotationLineIndex: setAnnotations(annotationsData),
+    showTable: false,
+  };
+};
+
+export default initialState;

package/src/components/line-chart/state/line-chart-reducer.js

@@ -0,0 +1,101 @@
+import { produce } from 'immer';
+import {
+  TOGGLE_PAN,
+  TOGGLE_ZOOM,
+  TOGGLE_POINTS,
+  TOGGLE_LINE,
+  TOGGLE_LEGEND,
+  SET_POINTS_ZOOM_DEFAULTS,
+  TOGGLE_ANNOTATION,
+  TOGGLE_TABLE,
+  SAVE_INITIAL_AXES_RANGES,
+  UPDATE_AXES_RANGES,
+  RESET_AXES_RANGES,
+} from './action-types';
+
+export const reducer = (state, action) => {
+  const newState = { ...state };
+  switch (action.type) {
+    case TOGGLE_ZOOM: {
+      newState.zoomEnabled = !newState.zoomEnabled;
+      if (newState.panEnabled) {
+        newState.panEnabled = false;
+      }
+      return newState;
+    }
+    case TOGGLE_PAN: {
+      newState.panEnabled = !newState.panEnabled;
+      if (newState.zoomEnabled) {
+        newState.zoomEnabled = false;
+      }
+      return newState;
+    }
+    case TOGGLE_POINTS: {
+      return {
+        ...newState,
+        pointsEnabled: !newState.pointsEnabled,
+      };
+    }
+    case TOGGLE_LINE: {
+      return {
+        ...newState,
+        lineEnabled: !newState.lineEnabled,
+      };
+    }
+    case TOGGLE_LEGEND: {
+      return {
+        ...newState,
+        legendEnabled: !newState.legendEnabled,
+      };
+    }
+    case TOGGLE_TABLE: {
+      return {
+        ...newState,
+        showTable: !newState.showTable,
+      };
+    }
+    case SAVE_INITIAL_AXES_RANGES: {
+      return produce(state, (draft) => {
+        const { initialAxesRanges } = action.payload;
+        draft.initialAxesRanges = initialAxesRanges;
+      });
+    }
+    case UPDATE_AXES_RANGES: {
+      return produce(state, (draft) => {
+        const { axes } = action.payload;
+        draft.axes = axes;
+      });
+    }
+    case RESET_AXES_RANGES: {
+      return produce(state, (draft) => {
+        const { axes } = state;
+        draft.axes = axes.map((axis) => ({
+          id: axis.id,
+        }));
+      });
+    }
+    case SET_POINTS_ZOOM_DEFAULTS:
+      const { showPoints, enableZoom, enablePan, showLine } = action.payload;
+      return {
+        ...newState,
+        zoomEnabled: enableZoom,
+        pointsEnabled: showPoints,
+        lineEnabled: showLine,
+        panEnabled: enablePan,
+      };
+    case TOGGLE_ANNOTATION:
+      const { annotationIndex } = action.payload;
+      const updatedIndexes = newState.showAnnotationLineIndex.includes(
+        annotationIndex,
+      )
+        ? newState.showAnnotationLineIndex.filter((v) => v !== annotationIndex)
+        : [...newState.showAnnotationLineIndex, annotationIndex];
+      return {
+        ...newState,
+        showAnnotationLineIndex: updatedIndexes,
+      };
+    default: {
+      return newState;
+    }
+  }
+};

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

@@ -0,0 +1,111 @@
+import PropTypes from 'prop-types';
+
+export const PieChartPropTypes = {
+  chart: PropTypes.shape({
+    testId: PropTypes.string,
+    data: PropTypes.shape({
+      labels: PropTypes.arrayOf(PropTypes.string),
+      datasets: PropTypes.arrayOf(PropTypes.object).isRequired,
+    }).isRequired,
+    options: PropTypes.shape({
+      title: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string),
+      ]),
+      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,
+        stacked: PropTypes.bool,
+        cutout: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      }),
+      legend: PropTypes.shape({
+        display: PropTypes.bool,
+        position: PropTypes.oneOf(['top', 'bottom', 'right']),
+        align: PropTypes.oneOf(['start', 'center', 'end']),
+        useDataset: PropTypes.bool,
+      }),
+      chartOptions: PropTypes.shape({
+        enableZoom: PropTypes.bool,
+        enablePan: PropTypes.bool,
+      }),
+      interactions: PropTypes.shape({
+        onLegendClick: PropTypes.func,
+        onPieHover: PropTypes.func,
+        onPieUnhover: PropTypes.func,
+      }),
+    }),
+  }).isRequired,
+};
+
+export const getDefaultProps = (props) => {
+  // Add missing nested objects
+  props.chart.options = props.chart.options || {};
+  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.legend = props.chart.options.legend || {};
+  props.chart.options.chartOptions = props.chart.options.chartOptions || {};
+  props.chart.options.interactions = props.chart.options.interactions || {};
+  // Set defaults for missing properties
+  const chart = {
+    testId: props.chart.testId ?? null,
+    data: props.chart.data,
+    options: {
+      title: props.chart.options.title || '',
+      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,
+        stacked: props.chart.options.graph.stacked || false,
+        cutout: props.chart.options.graph.cutout || 0,
+      },
+      legend: {
+        display:
+          props.chart.options.legend.display != null
+            ? props.chart.options.legend.display
+            : true,
+        useDataset: props.chart.options.legend.useDataset || false,
+        position: props.chart.options.legend.position || 'bottom',
+        align: props.chart.options.legend.align || 'center',
+      },
+      chartOptions: {
+        enableZoom: props.chart.options.chartOptions.enableZoom || false,
+        enablePan: props.chart.options.chartOptions.enablePan || false,
+      },
+      interactions: {
+        onLegendClick: props.chart.options.interactions.onLegendClick,
+        onPieHover: props.chart.options.interactions.onPieHover,
+        onPieUnhover: props.chart.options.interactions.onPieUnhover,
+      },
+    },
+  };
+  return chart;
+};

package/src/components/pie-chart/pie-chart-utils.js

@@ -0,0 +1,32 @@
+export const colors = [
+  '#3366cc',
+  '#dc3912',
+  '#ff9900',
+  '#109618',
+  '#990099',
+  '#0099c6',
+  '#dd4477',
+  '#66aa00',
+  '#b82e2e',
+  '#316395',
+  '#994499',
+  '#22aa99',
+  '#aaaa11',
+  '#6633cc',
+  '#e67300',
+  '#8b0707',
+  '#651067',
+  '#329262',
+  '#5574a6',
+  '#3b3eac',
+];
+
+export const generateRandomColor = () => {
+  const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+  if (colors.includes(color)) {
+    return generateRandomColor();
+  } else {
+    colors.push(color);
+    return color;
+  }
+};

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

@@ -0,0 +1,61 @@
+export interface IChartInteractions {
+    onLegendClick: () => any;
+    onPointHover: () => any;
+    onPointUnhover: () => any;
+}
+
+export interface IChartOptions {
+    enableZoom: boolean;
+    enablePan: boolean;
+}
+
+export interface IChartLegend {
+    display: boolean;
+    position: 'top' | 'bottom' | 'right';
+    align: 'start' | 'center' | 'end';
+    useDataset: boolean;
+}
+
+export interface IChartGraph {
+    showDataLabels: boolean;
+    stacked: boolean;
+    cutout: number | string;
+}
+
+export interface IChartTooltip {
+    tooltips: boolean;
+    showLabelsInTooltips: boolean;
+}
+
+export interface IChartStyling {
+    width: number | string;
+    height: number | string;
+    maintainAspectRatio: boolean;
+    staticChartHeight: boolean;
+    performanceMode: boolean;
+}
+
+export interface IOptions {
+    title: string | string[];
+    chartStyling: IChartStyling;
+    tooltip: IChartTooltip;
+    graph: IChartGraph;
+    legend: IChartLegend;
+    chartOptions: IChartOptions;
+    interactions: IChartInteractions;
+}
+
+export interface IChartData {
+    labels: string;
+    datasets: any[];
+}
+
+export interface IChartData {
+    testId: string | null;
+    data: IChartData;
+    options: IOptions;
+}
+
+export interface IPieChartProps {
+    chart: IChartData;
+}