@oliasoft-open-source/charts-library 2.0.0

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

@@ -0,0 +1,78 @@
+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
+export const isValidPosition = (minorTickPosition, majorTickPositions) => {
+  const isAfterStart = minorTickPosition > majorTickPositions[0];
+  const isBeforeEnd =
+    minorTickPosition < majorTickPositions[majorTickPositions.length - 1];
+  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) => {
+  const sortedMajorTickPositions = majorTickPositions.sort((a, b) => {
+    return a - b;
+  });
+  const minorTickWidth = getLargestMajorTickWidth(majorTickPositions) / 10;
+  const startPosition = majorTickPositions[1];
+  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));
+  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),
+  );
+  const minorTickPositions = getMinorTickPositions(majorTickPositions);
+  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.minor-gridlines-plugin.test.js

@@ -0,0 +1,34 @@
+import {
+  getLargestMajorTickWidth,
+  getMinorTickPositions,
+  isValidPosition,
+} from './line-chart.minor-gridlines-plugin';
+
+describe('chartMinorGridlinesPlugin', () => {
+  test('getLargestMajorTickWidth', () => {
+    const even = [0, 1, 2, 3];
+    const uneven = [0.85, 1, 2, 2.25];
+    expect(getLargestMajorTickWidth(even)).toBe(1);
+    expect(getLargestMajorTickWidth(uneven)).toBe(1);
+  });
+  test('isValidPosition', () => {
+    const tickPositions = [0, 1, 2, 3];
+    const inBounds = 0.1;
+    const outOfBounds = 3.1;
+    const duplicate = 2;
+    expect(isValidPosition(inBounds, tickPositions)).toBe(true);
+    expect(isValidPosition(outOfBounds, tickPositions)).toBe(false);
+    expect(isValidPosition(duplicate, tickPositions)).toBe(false);
+  });
+  test('getMinorTickPositions', () => {
+    const even = [0, 1, 2, 3];
+    const uneven = [0.85, 1, 2, 2.25];
+    expect(getMinorTickPositions(even)).toStrictEqual([
+      0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6,
+      1.7, 1.8, 1.9, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9,
+    ]);
+    expect(getMinorTickPositions(uneven)).toStrictEqual([
+      0.9, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.1, 2.2,
+    ]);
+  });
+});

package/src/components/line-chart/line-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;
+}

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

@@ -0,0 +1,9 @@
+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 UNSET_AXES_VALUES = 'UNSET_AXES_VALUES';
+export const SET_AXIS_VALUE = 'SET_AXIS_VALUE';
+export const SET_POINTS_ZOOM_DEFAULTS = 'SET_POINTS_ZOOM_DEFAULTS';
+export const TOGGLE_ANNOTATION = 'TOGGLE_ANNOTATION';

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

@@ -0,0 +1,51 @@
+import { AxisType } from '../../../helpers/enums';
+import { setAnnotations } from '../../../helpers/chart-utils';
+
+const initialState = ({
+  axes,
+  enableZoom,
+  enablePan,
+  showPoints,
+  showLine,
+  legendDisplay,
+  annotationsData,
+}) => {
+  /**
+   * getAxis
+   * @param {'x'|'y'} axisType
+   * @return {{id: string, label: string}[] | []} returns array of objects describing all chart axis or empty array
+   */
+  const getStateAxesByType = (axisType) => {
+    if (axes[axisType].length > 1) {
+      return axes[axisType].map((axisObj, index) => {
+        return {
+          id: `${axisType}${index}`,
+          label: axisObj.label,
+        };
+      });
+    } else {
+      return [
+        {
+          id: axisType,
+          label: axes[axisType][0].label,
+        },
+      ];
+    }
+  };
+
+  const xStateAxes = getStateAxesByType(AxisType.X);
+  const yStateAxes = getStateAxesByType(AxisType.Y);
+  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),
+  };
+};
+
+export default initialState;

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

@@ -0,0 +1,115 @@
+import {
+  cleanNumStr,
+  isGreaterThanMin,
+  isLessThanMax,
+  toNum,
+  validNumber,
+} from '../line-chart-utils';
+import {
+  TOGGLE_PAN,
+  TOGGLE_ZOOM,
+  TOGGLE_POINTS,
+  TOGGLE_LINE,
+  TOGGLE_LEGEND,
+  UNSET_AXES_VALUES,
+  SET_AXIS_VALUE,
+  SET_POINTS_ZOOM_DEFAULTS,
+  TOGGLE_ANNOTATION,
+} from './action-types';
+import { getAxisValue } from '../../../helpers/chart-utils';
+
+const unsetAxisValues = (axes) => axes.map(({ min, max, ...axis }) => axis);
+
+export const reducer = (state, action) => {
+  const newState = { ...state };
+  switch (action.type) {
+    case TOGGLE_ZOOM: {
+      newState.zoomEnabled = !newState.zoomEnabled;
+      if (newState.panEnabled) {
+        newState.panEnabled = false;
+      }
+      // TODO: find out if this logic is needed once panning and zomming works properly
+      // if (!newState.zoomEnabled) {
+      //   //reset the axes when enabling zoom (zoom plugin and manual ranges aren't compatible together yet)
+      //   newState.axes = unsetAxisValues(newState.axes);
+      // }
+      return newState;
+    }
+    case TOGGLE_PAN: {
+      newState.panEnabled = !newState.panEnabled;
+      if (newState.zoomEnabled) {
+        newState.zoomEnabled = false;
+      }
+      // if (!newState.panEnabled) {
+      //   //reset the axes when enabling pan (zoom plugin and manual ranges aren't compatible together yet)
+      //   newState.axes = unsetAxisValues(newState.axes);
+      // }
+      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 UNSET_AXES_VALUES: {
+      return {
+        ...newState,
+        axes: unsetAxisValues(newState.axes),
+      };
+    }
+    case SET_AXIS_VALUE: {
+      const { name, value: nextInputValue, id } = action.payload;
+      const nextValue = isNaN(nextInputValue)
+        ? cleanNumStr(nextInputValue)
+        : toNum(nextInputValue);
+      const axis = newState.axes.find((a) => a.id === id);
+      axis.min = getAxisValue(name === 'min' ? nextValue : axis.min?.value);
+      axis.max = getAxisValue(name === 'max' ? nextValue : axis.max?.value);
+      axis.min.valid =
+        validNumber(axis.min.inputValue ?? '') &&
+        isLessThanMax(axis.min.value, axis.max.value);
+      axis.min.displayValue = axis.min.valid ? axis.min.value : undefined;
+      axis.max.valid =
+        validNumber(axis.max.inputValue ?? '') &&
+        isGreaterThanMin(axis.max.value, axis.min.value);
+      axis.max.displayValue = axis.max.valid ? axis.max.value : undefined;
+      return newState;
+    }
+    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/line-chart/stories/shapes/cubes.stories.jsx

@@ -0,0 +1,326 @@
+import React from 'react';
+import { LineChart } from '../../line-chart';
+import { Container } from '../../../../helpers/container';
+
+const style = {
+  height: '1000px',
+  width: '1000px',
+};
+
+const cubeLines = {
+  borderColor: '#011fa3',
+  pointBackgroundColor: '#011fa3',
+  pointRadius: '0',
+  pointHoverRadius: '0',
+  pointHitRadius: '0',
+  borderWidth: 4,
+  data: [
+    {
+      x: 10,
+      y: 30,
+    },
+    {
+      x: 10,
+      y: 10,
+    },
+    {
+      x: 30,
+      y: 10,
+    },
+    {
+      x: 36,
+      y: 17,
+    },
+    {
+      x: 36,
+      y: 33,
+    },
+    {
+      x: 20,
+      y: 33,
+    },
+    {
+      x: 10,
+      y: 30,
+    },
+    {
+      x: 30,
+      y: 30,
+    },
+    {
+      x: 30,
+      y: 10,
+    },
+    {
+      x: 30,
+      y: 30,
+    },
+    {
+      x: 36,
+      y: 33,
+    },
+  ],
+};
+
+const cubeDashedLines = {
+  borderColor: '#011fa3',
+  pointBackgroundColor: '#011fa3',
+  pointRadius: '0',
+  pointHoverRadius: '0',
+  pointHitRadius: '0',
+  borderDash: [10, 5],
+  borderWidth: 2,
+  data: [
+    {
+      x: 10,
+      y: 10,
+    },
+    {
+      x: 20,
+      y: 17,
+    },
+    {
+      x: 36,
+      y: 17,
+    },
+    {
+      x: 20,
+      y: 17,
+    },
+    {
+      x: 20,
+      y: 33,
+    },
+  ],
+};
+
+const cubeData = {
+  datasets: [cubeLines, cubeDashedLines],
+};
+
+export const CubesLineChartExample = () => (
+  <Container style={style}>
+    <LineChart
+      chart={{
+        data: cubeData,
+        options: {
+          title: 'Cube using datasets',
+          axes: {
+            x: [
+              {
+                gridLines: {
+                  drawOnChartArea: false,
+                },
+              },
+            ],
+            y: [
+              {
+                gridLines: {
+                  drawOnChartArea: false,
+                },
+              },
+            ],
+          },
+          additionalAxesOptions: {
+            range: {
+              x: {
+                min: 5,
+                max: 40,
+              },
+              y: {
+                min: 5,
+                max: 40,
+              },
+            },
+          },
+          chartStyling: {
+            width: 768,
+            height: 768,
+          },
+          legend: {
+            display: false,
+          },
+        },
+      }}
+    />
+    <LineChart
+      chart={{
+        data: cubeData,
+        options: {
+          title: 'Cube with perspective lines using annotations',
+          axes: {
+            x: [
+              {
+                gridLines: {
+                  drawOnChartArea: false,
+                },
+              },
+            ],
+            y: [
+              {
+                gridLines: {
+                  drawOnChartArea: false,
+                },
+              },
+            ],
+          },
+          additionalAxesOptions: {
+            range: {
+              x: {
+                min: 5,
+                max: 40,
+              },
+              y: {
+                min: 5,
+                max: 40,
+              },
+            },
+          },
+          chartStyling: {
+            width: 768,
+            height: 768,
+          },
+          annotations: {
+            annotationsData: [
+              {
+                annotationAxis: 'x',
+                value: 55.7,
+                endValue: 25.8,
+                color: 'rgba(128, 32, 196, 0.5)',
+              },
+              {
+                annotationAxis: 'x',
+                value: 52.5,
+                endValue: 3,
+                color: 'rgba(128, 32, 196, 0.5)',
+              },
+              {
+                annotationAxis: 'x',
+                value: 49.3,
+                endValue: -19.8,
+                color: 'rgba(128, 32, 196, 0.4)',
+              },
+              {
+                annotationAxis: 'x',
+                value: 46.1,
+                endValue: -42.6,
+                color: 'rgba(128, 32, 196, 0.3)',
+              },
+              {
+                annotationAxis: 'x',
+                value: 42.9,
+                endValue: -65.4,
+                color: 'rgba(128, 32, 196, 0.2)',
+              },
+              {
+                annotationAxis: 'x',
+                value: 39.7,
+                endValue: -88.2,
+                color: 'rgba(128, 32, 196, 0.1)',
+              },
+              {
+                annotationAxis: 'x',
+                value: 36.5,
+                endValue: -111,
+                color: 'rgba(128, 32, 196, 0.1)',
+              },
+              {
+                annotationAxis: 'x',
+                value: 33.3,
+                endValue: -133.8,
+                color: 'rgba(128, 32, 196, 0.1)',
+              },
+              {
+                annotationAxis: 'x',
+                value: 30.1,
+                endValue: -156.6,
+                color: 'rgba(128, 32, 196, 0.1)',
+              },
+              {
+                annotationAxis: 'x',
+                value: 26.9,
+                endValue: -179.4,
+                color: 'rgba(128, 32, 196, 0.1)',
+              },
+              {
+                annotationAxis: 'y',
+                value: 10,
+                color: 'rgba(128, 32, 196, 0.5)',
+              },
+              {
+                annotationAxis: 'y',
+                value: 17,
+                color: 'rgba(128, 32, 196, 0.5)',
+              },
+              {
+                annotationAxis: 'y',
+                value: 23,
+                color: 'rgba(128, 32, 196, 0.5)',
+              },
+              {
+                annotationAxis: 'y',
+                value: 28,
+                color: 'rgba(128, 32, 196, 0.5)',
+              },
+              {
+                annotationAxis: 'y',
+                value: 32,
+                color: 'rgba(128, 32, 196, 0.4)',
+              },
+              {
+                annotationAxis: 'y',
+                value: 35,
+                color: 'rgba(128, 32, 196, 0.3)',
+              },
+              {
+                annotationAxis: 'y',
+                value: 37,
+                color: 'rgba(128, 32, 196, 0.2)',
+              },
+              {
+                annotationAxis: 'y',
+                value: 38,
+                color: 'rgba(128, 32, 196, 0.1)',
+              },
+            ],
+          },
+          legend: {
+            display: false,
+          },
+        },
+      }}
+    />
+    <LineChart
+      chart={{
+        data: cubeData,
+        options: {
+          title: 'Cube with gridlines',
+          additionalAxesOptions: {
+            range: {
+              x: {
+                min: 5,
+                max: 40,
+              },
+              y: {
+                min: 5,
+                max: 40,
+              },
+            },
+          },
+          chartStyling: {
+            width: 768,
+            height: 768,
+          },
+          legend: {
+            display: false,
+          },
+        },
+      }}
+    />
+  </Container>
+);
+
+export default {
+  title: 'Line Chart - Cube Shape',
+  component: CubesLineChartExample,
+};