palerdot / vue-speedometer

Vue component library for showing speedometer like gauge using d3

Home Page:https://palerdot.in/vue-speedometer

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Speedometer is not responsive

sytcnky opened this issue · comments

Component is not responsive, do you plan to add it? Or how can we do it?

You can try watching for window resize events (or your own div which you think should be responsive), and on change you can update following props fluidWidth: true (always), value, width, height. I have not tried, but it might work.

Or, once your responsive DOM resize event is complete, trigger an update with fluidWidth: true, value: 0 (to reset the component), and after few milliseconds, trigger an update with actual value like fluidWidth: true, value: your_value. This will definitely trigger an update and will take the width of your responsive DOM.

The challenge with this feature is knowing when to rerender which is tricky. If this component automatically starts watching for parent DOM changes it will create additional rendering gotchas which might break basic speedometer functionality. The core of the library is framework independent and resides here - https://github.com/palerdot/react-d3-speedometer/tree/master/src/core

If you wish to give suggestions and PR, I would suggest doing it in the core repository. Once it is fine there, core will be made available for vue-speedometer.

As of now, this is not a priority and no immediate plans to add it as it will seriously affect maintainability.