Resizing the window sets needle back to original position.

[NetrushGarrett]

If I have a Gauge where I frequently update the percent and then the window resizes it will set the needle back to whatever the first percent I passed was.

Here is an example. let the gauge update twice and then resize the window you will see it go back to the original

https://codesandbox.io/s/pedantic-heisenberg-03qd1?fontsize=14&hidenavigation=1&theme=dark

[NetrushGarrett]

I was able to get around this by unmounting and remounting the component every time I change the value instead of relying on prop change to update, That way when it does resize there's no prevProps for it to look at.

[aaroncrawford]

Receiving this as well. Had to put extra logic in to ensure that the gauge never received zero data before my state was changed with it's final set of data.

[dominicboston]

I'm having the same issue here, but it is triggered by scrolling down to the bottom of the page on mobile. I also made a sandbox to confirm this with the resize reset. Click the button then resize the window. Can we turn this issue report into an official bug?
video of problem https://dab-online.co.uk/RPReplay_Final1606780028.MP4
https://codesandbox.io/s/reactgaugeresize-wwbct?file=/src/App.js

[dominicboston]

Thanks for merge - this issue can now be closed.

[jeff1evesque]

I was able to keep using react-gauge-chart at version 0.3.0, and followed an above recommendation:

(base) jeff1evesque@AlienWareMacBook supercode % git diff jsx
diff --git a/jsx/import/xyz/flashy-popsicles.jsx b/jsx/import/xyz/flashy-popsicles.jsx
index 12b62c2..e9bfa63 100644
--- a/jsx/import/xyz/flashy-popsicles.jsx
+++ b/jsx/import/xyz/flashy-popsicles.jsx
@@ -110,6 +110,21 @@ class Chart extends Component {
             colors: colors,
             arcs_length: arcs_length
         }
+
+        this.resize = this.resize.bind(this);
+    }
+
+    resize() {
+        if (
+            'percent' in this.props
+            && checkValidFloat(this.props.percent)
+        ) {
+            this.setState({ percent: this.props.percent });
+        }
+    }
+
+    componentDidMount() {
+        window.addEventListener('resize', this.resize);
     }
 
     componentDidUpdate(prevProps, prevState) {
(base) jeff1evesque@AlienWareMacBook supercode % 

[jeff1evesque]

My workaround is still a bit glitchy, since its not very smooth between transition of the needle being forced to a (re)render on window resize.