Fix line segments with alignToPixel (#9042)

diff --git a/src/helpers/helpers.segment.js b/src/helpers/helpers.segment.js
index fe79403027c73c6247a741ab1a663dc6a597a1f3..13063f019d36ae9dc787ff414e704e3a9c546172 100644 (file)
--- a/src/helpers/helpers.segment.js
+++ b/src/helpers/helpers.segment.js
@@ -100,6 +100,11 @@ export function _boundSegment(segment, points, bounds) {
     }
 
     value = normalize(point[property]);
+
+    if (value === prevValue) {
+      continue;
+    }
+
     inside = between(value, startBound, endBound);
 
     if (subStart === null && shouldStart()) {

diff --git a/test/fixtures/plugin.filler/line/segments/alignToPixels.js b/test/fixtures/plugin.filler/line/segments/alignToPixels.js
new file mode 100644 (file)
index 0000000..99ece11
--- /dev/null
+++ b/test/fixtures/plugin.filler/line/segments/alignToPixels.js
@@ -0,0 +1,46 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [
+        {
+          data: [
+            {x: 0, y: 0},
+            {x: 1, y: 20},
+            {x: 1.00001, y: 30},
+            {x: 2, y: 100},
+            {x: 2.00001, y: 100}
+          ],
+          backgroundColor: '#FF000070',
+          borderColor: 'black',
+          radius: 0,
+          segment: {
+            borderDash: ctx => ctx.p0.parsed.x > 1 ? [10, 5] : undefined,
+          },
+          fill: true
+        }
+      ]
+    },
+    options: {
+      plugins: {
+        legend: false
+      },
+      scales: {
+        x: {
+          type: 'linear',
+          alignToPixels: true,
+          display: false
+        },
+        y: {
+          display: false
+        }
+      }
+    }
+  },
+  options: {
+    canvas: {
+      width: 300,
+      height: 240
+    }
+  }
+};

diff --git a/test/fixtures/plugin.filler/line/segments/alignToPixels.png b/test/fixtures/plugin.filler/line/segments/alignToPixels.png
new file mode 100644 (file)
index 0000000..df12d54
Binary files /dev/null and b/test/fixtures/plugin.filler/line/segments/alignToPixels.png differ

diff --git a/test/specs/helpers.segment.tests.js b/test/specs/helpers.segment.tests.js
index 0553a2aac4a40f2a7b2f67543f408a1c53913a65..f603a6ebc5ea23f3c7b925737cf4a694389f2881 100644 (file)
--- a/test/specs/helpers.segment.tests.js
+++ b/test/specs/helpers.segment.tests.js
@@ -49,5 +49,13 @@ describe('helpers.segments', function() {
         {start: 3, end: 4, loop: false, style: undefined},
       ]);
     });
+
+    it('should find correct segments when there are multiple points with same property value', function() {
+      const repeatedPoints = [{x: 1, y: 5}, {x: 1, y: 6}, {x: 2, y: 5}, {x: 2, y: 6}, {x: 3, y: 5}, {x: 3, y: 6}, {x: 3, y: 7}];
+      expect(_boundSegment({start: 0, end: 6, loop: false}, repeatedPoints, {property: 'x', start: 1, end: 1.1})).toEqual([{start: 0, end: 2, loop: false, style: undefined}]);
+      expect(_boundSegment({start: 0, end: 6, loop: false}, repeatedPoints, {property: 'x', start: 2, end: 2.1})).toEqual([{start: 2, end: 4, loop: false, style: undefined}]);
+      expect(_boundSegment({start: 0, end: 6, loop: false}, repeatedPoints, {property: 'x', start: 2, end: 3.1})).toEqual([{start: 2, end: 6, loop: false, style: undefined}]);
+      expect(_boundSegment({start: 0, end: 6, loop: false}, repeatedPoints, {property: 'x', start: 0, end: 8})).toEqual([{start: 0, end: 6, loop: false, style: undefined}]);
+    });
   });
 });