palerdot/react-d3-speedometer

Rendering multiple speedometer leads to weird maxValue/ticks behaviour

Closed this issue · 6 comments

tinaboyce commented

First speedometer

  • value=60
  • maxValue=200

Second speedometer

  • value=10
  • maxValue=40

Third speedometer

  • value=1
  • maxValue=30

This is replicable when maxValue changes on subsequent components.

screen shot 2018-09-24 at 9 30 22 pm

palerdot commented

@tinaboyce Can you share the source for the above snippet with multiple speedometers?

palerdot commented

@tinaboyce I see you have given a PR. I will look into this issue and PR and update on this issue. Thanks for your effort.

tinaboyce commented

Thanks for looking into it!

I should've updated my findings here. During debugging, I've narrowed down to wierd behaviour with the ticker pumping out wrong values.

My issue above is replicable if you turned of my additions and see the update in storybook.

palerdot commented

I investigated this issue and seems like a d3-scale bug. I have also raised an issue - d3/d3-scale#149

I have created a new branch - https://github.com/palerdot/react-d3-speedometer/tree/issue-27-d3-scale-bugfix with following changes

Since there is a major version bump of d3, this will be released as 0.4.0. I will publish these changes once tests pass in travis CI and update stuffs in this issue. Thanks for raising this issue and suggesting the fix.

izzycart commented

@tinaboyce How did you even get this to show... i have been on this for weeks and mine is not showing... I enqueued the index.js in the page i want the speedometer to show, i go an error saying require is not designed. I then searched the internet and just got a solution few minutes ago using Browserify (which i have done and created a bundle file of the index.js (which is located in node_modules>react-d3-speedometer>dist>index.js) and enqueued the bundled js and the error was fixed but speedometer still not showing. Now sure what i'm still missing. I already created an issue here: #37