fix: calc visible points on update #10467 (#10523)

chartjs · Jul 28, 2022 · e800b46 · e800b46
1 parent c6120f9
commit e800b46
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
@@ -153,8 +153,8 @@ function getStartAndCountOfVisiblePoints(meta, points, animationsDisabled) {
     }
     if (maxDefined) {
       count = _limitValue(Math.max(
-        _lookupByKey(_parsed, iScale.axis, max).hi + 1,
-        animationsDisabled ? 0 : _lookupByKey(points, axis, iScale.getPixelForValue(max)).hi + 1),
+        _lookupByKey(_parsed, iScale.axis, max, true).hi + 1,
+        animationsDisabled ? 0 : _lookupByKey(points, axis, iScale.getPixelForValue(max), true).hi + 1),
       start, pointCount) - start;
     } else {
       count = pointCount - start;

diff --git a/src/helpers/helpers.collection.js b/src/helpers/helpers.collection.js
@@ -30,10 +30,13 @@ export function _lookup(table, value, cmp) {
  * @param {array} table - the table search. must be sorted!
  * @param {string} key - property name for the value in each entry
  * @param {number} value - value to find
+ * @param {boolean} [last] - lookup last index
  * @private
  */
-export const _lookupByKey = (table, key, value) =>
-  _lookup(table, value, index => table[index][key] < value);
+export const _lookupByKey = (table, key, value, last) =>
+  _lookup(table, value, last
+    ? index => table[index][key] <= value
+    : index => table[index][key] < value);
 
 /**
  * Reverse binary search

diff --git a/test/specs/controller.line.tests.js b/test/specs/controller.line.tests.js
@@ -1016,4 +1016,51 @@ describe('Chart.controllers.line', function() {
       expect(point.stop).toBe(i === 3);
     }
   });
+
+  it('should correctly calc visible points on update', async() => {
+    var chart = window.acquireChart({
+      type: 'line',
+      data: {
+        datasets: [{
+          data: [
+            {x: 10, y: 20},
+            {x: 15, y: 19},
+          ]
+        }],
+      },
+      options: {
+        scales: {
+          y: {
+            type: 'linear',
+            min: 0,
+            max: 25,
+          },
+          x: {
+            type: 'linear',
+            min: 0,
+            max: 50
+          },
+        }
+      }
+    });
+
+    chart.data.datasets[0].data = [
+      {x: 10, y: 20},
+      {x: 15, y: 19},
+      {x: 17, y: 12},
+      {x: 50, y: 9},
+      {x: 50, y: 9},
+      {x: 50, y: 9},
+    ];
+    chart.update();
+
+    var point = chart.getDatasetMeta(0).data[0];
+    var event = {
+      type: 'mousemove',
+      native: true,
+      ...point
+    };
+
+    chart._handleEvent(event, false, true);
+  }, 500);
 });