ngx-gauge: gauge display not updating when tab is not active
I just figured that the gauge is not updating the display when we change tabs.
If you have: thresholds = { '20': {color: 'orange'}, '30': {color: 'orangeRed'}, '40': {color: 'red'} };
For example if the value of the gauge is 20, you change to another tab for 1-2 minutes and you come back then the displayed value is 50 but the color of the gauge is still orange and at the same level as 20. Hope it’s clear enough.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 26 (9 by maintainers)
I’ll try to make a PR with my changes later today. I think this fixes also issue #20 (which I opened some time ago)
Thank you guys for solving the issue. I will take this PR next week for review.
Anyone willing to try this?
https://stackblitz.com/edit/angular-wzixgj?file=src/ngx-gauge/gauge/gauge.ts
Looks like it’s working fine for me… just some minor changes in the animate function
@ashish-chopra will have to approve your PR, and still release a next version with it. But while this does not occur, in another situation I send a PR from some library I need the change to my implementation I create a Fork and do the implementation (create a package with ng-packagr (there is a script in that library to generate the package:
build:lib)). You do not even need to do the publishing in NPM, you can use it locally. @ObservablerxjsI find it interesting to put the option to activate or deactivate animations, even for performance reasons. (Nice work @Observablerxjs 👏, could include, try to submit this as PR).
But in addition it is important to identify the cause of the problem and verify a possible solution for the background animations.
I think i may have found the issue, it’s the call of requestAnimationFrame in the _create function:
self._animationRequestID = window.requestAnimationFrame((timestamp) =>{ startTime = timestamp || new Date().getTime(); animate(timestamp); })I noticed that when the tab is inactive ( background tab) the function
animate(timestamp), used as a callback in the requestAnimationFrame, is never called.Here is a stackblitz with the modification: https://stackblitz.com/edit/angular-jd7env When the attribute animation is set to false it’s working good (except the fact that the gauge is not animated anymore obviously) In my case, I don’t really need the animation, so it would be nice if we can have a version where we can disable it.
Could this be related to issue #20? The gauge bar value depends on the animation being succesfully executed, but when in the background tab, the browser does not execute the animation and the gauge bar keeps the previous value…
Just guessing…
Kindly reproduce the issue in a stackblitz and share here.