search

naikus / svg-gauge

Minimalistic, animated SVG gauge. Zero dependencies
MIT License
319 stars 74 forks source link

Some nice improvements that could be useful #6

Closed StefanoBettega closed 5 years ago

StefanoBettega commented 7 years ago

Hello, nice component. It would be great to have this kind of features added:

  1. Usage in non square container If you set dialStartAngle to180 and dialEndAngle to 0, gauge will stay on the top half of its container. If you downsize container's height, gauge will resize. Is there any way to make it not resizable?

  2. Floating point support Is there any way to set a gauge value to a floating point number (i.e. 10.5) and have it shown?

  3. Min/Max values on dial and name/unit It would be a nice improvement to add the min/max values on dial (with option to enable/disable them and customize font/size, ...) and optionally a measurement unit near gauge value

Thanks, Stefano

naikus commented 7 years ago

Hi @StefanoBettega, thanks for the feedback. I'll see if I can work on these. Meanwhile, please feel free to submit a merge request if you can :)

naikus commented 7 years ago

Hi @StefanoBettega, The first two points can be solved using following workarounds:

  1. Set a fixed width and height to gauge container and wrap it inside another smaller container with overflow as hidden
  2. To show floating point values provide a label render using label function option. It gets the raw value. The default implementation rounds the value.

The third is a bit more involving and would also make the gauge overly complicated. With a lot more options. This gauge's objective is to remain compact and simple. Feel free to fork and implement it :)

Cheers!

naikus commented 7 years ago

Hi @StefanoBettega I've updated the demo reflecting some of the changes you wanted.

schlunsen commented 6 years ago

Hi,

How would one greate a gauge like number 4 in the demo, but with the possibility of the gauge value to exceed the maximium (represented by the 'dial' in css)? I mean that the underlaying border will still be a 1/4 circle while the gauge value can exceed to be a 1/2 circle.

Thanks for a really great project!

naikus commented 6 years ago

Hi @schlunsen, Unfortunately, that's not possible in this gauge. But a "poor man" solution would be to have dial color same as background color and have a full circle gauge dial.

The gauge options once set don't change (except value). I'll look into this if possible. Meanwhile, you are free to fork and make the changes ;)