vue-speedometer icon indicating copy to clipboard operation
vue-speedometer copied to clipboard

Speedometer is not responsive

Open sytcnky opened this issue 2 years ago • 1 comments

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

sytcnky avatar Mar 06 '23 12:03 sytcnky

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.

palerdot avatar Mar 07 '23 03:03 palerdot