Fix line segments with alignToPixel (#9042)

chartjs · May 7, 2021 · 137b51d · 137b51d
1 parent 1a1e677
commit 137b51d
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 0 deletions.
diff --git 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
@@ -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
diff --git 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}]);
+    });
   });
 });