@oliasoft-open-source/charts-library 2.5.17 → 2.5.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.17",
+  "version": "2.5.18",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "scripts": {

package/release-notes.md

@@ -1,5 +1,9 @@
 # Charts Library Release Notes
 
+## 2.5.18
+
+- Fixed minor gridlines when last major tick does not reach axis bounds ([OW-10296](https://oliasoft.atlassian.net/browse/OW-10296))
+
 ## 2.5.17
 
 - Added some (realistic) test case stories from our app

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

@@ -11,30 +11,40 @@ export const getLargestMajorTickWidth = (majorTickPositions) => {
 };
 
 // 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];
+// 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) => {
+export const getMinorTickPositions = (majorTickPositions, scale) => {
   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 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));
+    .filter((position) =>
+      isValidPosition(position, sortedMajorTickPositions, scale),
+    );
   return positions;
 };
 
@@ -44,10 +54,10 @@ const drawMinorTicksForScale = (scale) => {
     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);
+  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 ||