From 9548410c3bbf5a64a857d791bb84864a6309ccea Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Mon, 6 Sep 2021 15:08:08 +0300
Subject: [PATCH 1/2] fix: chart constantly jumping in 1-2 pixel steps

The issue is noticeable at `millisPerPixel` being between ~ 0.5 & 2.0 the size
of `requestAnimationFrame` period. Canvas image update period would be
inconsistent - some would last longer, some less, some would get skipped
altogether.
---
 smoothie.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/smoothie.js b/smoothie.js
index ad40ed5..2ea7e73 100644
--- a/smoothie.js
+++ b/smoothie.js
@@ -784,31 +784,31 @@
     if (this.options.limitFPS > 0 && nowMillis - this.lastRenderTimeMillis < (1000/this.options.limitFPS))
       return;
 
+    time = time || nowMillis - (this.delay || 0);
+
+    // Round time down to pixel granularity, so motion appears smoother.
+    time -= time % this.options.millisPerPixel;
+
     if (!this.isAnimatingScale) {
       // We're not animating. We can use the last render time and the scroll speed to work out whether
       // we actually need to paint anything yet. If not, we can return immediately.
-
-      // Render at least every 1/6th of a second. The canvas may be resized, which there is
-      // no reliable way to detect.
-      var maxIdleMillis = Math.min(1000/6, this.options.millisPerPixel);
-
-      if (nowMillis - this.lastRenderTimeMillis < maxIdleMillis) {
-        return;
+      var sameTime = this.lastChartTimestamp === time;
+      if (sameTime) {
+        // Render at least every 1/6th of a second. The canvas may be resized, which there is
+        // no reliable way to detect.
+        var needToRenderInCaseCanvasResized = nowMillis - this.lastRenderTimeMillis > 1000/6;
+        if (!needToRenderInCaseCanvasResized) {
+          return;
+        }
       }
     }
 
-    this.resize();
-
     this.lastRenderTimeMillis = nowMillis;
-
-    canvas = canvas || this.canvas;
-    time = time || nowMillis - (this.delay || 0);
-
-    // Round time down to pixel granularity, so motion appears smoother.
-    time -= time % this.options.millisPerPixel;
-
     this.lastChartTimestamp = time;
 
+    this.resize();
+
+    canvas = canvas || this.canvas;
     var context = canvas.getContext('2d'),
         chartOptions = this.options,
         dimensions = { top: 0, left: 0, width: canvas.clientWidth, height: canvas.clientHeight },

From 1fffdd8506cdfa2a7ff20105cf6a81ef1a0dce6d Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Mon, 6 Sep 2021 15:17:52 +0300
Subject: [PATCH 2/2] docs: update changelog

---
 smoothie.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/smoothie.js b/smoothie.js
index 2ea7e73..8e2387a 100644
--- a/smoothie.js
+++ b/smoothie.js
@@ -95,6 +95,7 @@
  *        Add title option, by @mesca
  *        Fix data drop stoppage by rejecting NaNs in append(), by @timdrysdale
  *        Allow setting interpolation per time series, by @WofWca (#123)
+ *        Fix chart constantly jumping in 1-2 pixel steps, by @WofWca (#131)
  */
 
 ;(function(exports) {