Display of float values

[sandtreader]

Hi,

Love this, neat, simple and the default style is perfect for a dark dashboard!

One request - it's hard to get it to show floating point values in the indicator at the moment, because even if you override the children it gets passed fixedValue, not value, and this is rounded to integer here:

https://github.com/lucassaid/react-speedometer/blob/main/src/Indicator.tsx#L33

I've had to fool it by setting value to n*100 and overriding the indicator to display (parseFloat(value)/100), and fudging the marks too, but it would be nice if you could set the decimal places (to pass to toFixed), which would save having to override it at all.

Thanks!

Paul

[sandtreader]

I'm not set up to do a proper PR I'm afraid, but I think this should do it:

diff --git a/src/Indicator.tsx b/src/Indicator.tsx
index 998bf4d..cb9d890 100644
--- a/src/Indicator.tsx
+++ b/src/Indicator.tsx
@@ -5,6 +5,7 @@ interface IndicatorProps extends SVGProps<SVGTextElement> {
   fontSize?: number
   color?: string
   fontFamily?: string
+  decimalPlaces?: number
   textAnchor?: SVGProps<SVGTextElement>['textAnchor']
   children?: (
     fixedValue: string,
@@ -16,6 +17,7 @@ export default function Indicator({
   fontSize = 45,
   color = 'white',
   fontFamily,
+  decimalPlaces = 0,
   children,
   ...rest
 }: IndicatorProps) {
@@ -30,7 +32,7 @@ export default function Indicator({
   const textProps = {
     transform: `rotate(${360 - rotation}, ${radius}, ${radius})`,
   }
-  const fixedValue = Number(value).toFixed()
+  const fixedValue = Number(value).toFixed(decimalPlaces)
 
   if (children) return children(fixedValue, textProps)