Comments (6)
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.
from react-gauge-chart.
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.
from react-gauge-chart.
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
from react-gauge-chart.
Thanks for merge - this issue can now be closed.
from react-gauge-chart.
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 %
from react-gauge-chart.
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.
from react-gauge-chart.
Related Issues (20)
- dependency issue with react 18 HOT 6
- How Add Value to gauge chart ? HOT 1
- Removing the percent sign HOT 1
- Needle shows current value before animating to it from 0 HOT 2
- Publish latest version to npm HOT 2
- Error Can't resolve 'lodash/isEqual' HOT 6
- Error: require() of ES Module HOT 13
- Updating props passed to chart appends new chart instead of replacing.
- Package not working with Next Js 13 Typescript HOT 1
- ParseError: 'import' and 'export' may appear only with 'sourceType: module' HOT 3
- Can we add an HTML element to text instead of the string? HOT 1
- Need tool tip with labels showing info similar to legends
- D3 related build issue - use import() instead of require() HOT 3
- [IMPORTANT] Looking for maintainers HOT 2
- Warning: GaugeChart: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
- Change SVG neadle HOT 2
- GaugeChart is shaking in DOM and BOM HOT 4
- Default props support removec warning shown in the console HOT 2
- Publish latest version to NPM registry HOT 1
- Adding support for reference lines - baseline and target line
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-gauge-chart.