toomuchdesign/react-minimal-pie-chart

Allow float/string `0.0`

auipga opened this issue · 8 comments

I need to use strings like 12.5 and 0.0 which works fine but fills the console with errors.
Is there a way to ignore this?

Warning: Failed prop type: Invalid prop `data[0].value` of 
type `string` supplied to `ReactMinimalPieChart`, expected `number`.

Hi @auipga,
The error you get comes from prop-types library and you're supposed to strip props validation out in your production bundle.

BTW, I personally find allowing any string a bit overkill in this case. Is there anything preventing your code from providing such values as Number('0.0') or parseFloat('1.2')?

Indeed, allowing all strings will look wrong.
It's not about production, but during development: errors indicate errors. Not those i want to ignore but others.

Unfornately Number('0.0') results in just 0. I want to apply .toFixed(1) to not jump around when the value changes (sometimes frequently).

Is there a way to just ignore this specific type error?

Have you noticed any difference when providing a prop as 0.0 instead of 0? Or any issue in providing number props as 2 digits floating numbers?

Providing data[].value as string is not intentionally supported and could stop working anytime.

If you're worried about the value rendered as label, you can take full control of it by setting the label prop as a function returning any string:

https://github.com/toomuchdesign/react-minimal-pie-chart#label-as-function

0.0 renders 0
0.1 renders 0.1
"0.0" renders 0.0 *
"0.1" renders 0.1 *
*With proptype error but no issues as described.

Label as function is a good idea, but with totalValue=5 a .1 or .2 also makes a difference in the slice's size which I really make use of.

What you describe is the expected behaviour. Could you please restate the issue?

Yes, it is expected. But I simply don't want "0.0" (marked with * in my above comment) to trigger an proptype error OR I want to suppress it.
How would you restate?

data[].value has to be provided as Number.

I read the thread again and what I can't understand is: what is the use case for providing such value as numeric string? What's the difference in terms of visual output?

I'm probably missing your point of view. Maybe a screenshot could help.

If the problem is related to the value rendered as Label (0 instead of 0.0), you can force the label to render any value.

Cheers

I wasn't really getting your point. But you were totally right.
I'm not altering the raw (Number) value anymore but use this function as label property:

const label = labelProps => {
  const value = labelProps.data[0].value
  const multiDigit = Math.abs(value) >=10
  return value.toFixed(multiDigit ? 0 : 1)
}

This is even better as the Number is proceeded with highest precision, resulting in a more precise angle.
Thank you.