We have graduated Panels with editable Min/Max values that our users can freely customize. We dynamically generate a tickUnit that will result in a linear scale between the min/max and use graduatedSkip to skip the first and last tick since we want to add them manually. The problem is if the user sets a really large (or small !?) float like 0.0000000001
as the maximum or minimum the graduatedSkip will get fired thousands of time instead of 10 or 11. Here’s a Codesandbox demonstrating this:
In this exemple you can see that:
Min is 0
Max is 0.000001
.
tickUnit is: 1e-7
(max - min / 10
) so it should generate 10 ticks
tickUnitBase is simply 0
I’ve already added console.logs at specific locations so you can see in the console what I want to demonstrate here:
If you run this code as it is you should see that the graduatedSkip is called 11 times as expected since we have 11 ticks.
But if you modify the max and add a 0 you should now see 16 calls which is not good and the more you add zeros the more the graduatedSkip gets called.
min: 0,
max: 0.000001, // 11 graduatedSkip calls - Good !
max: 0.0000001, // 16 graduatedSkip calls - Not good...
max: 0.00000001, // 60 graduatedSkip calls - Not good...
max: 0.000000001, // 511 graduatedSkip calls - Not good...
max: 0.0000000001, // thousands+ graduatedSkip calls - Not good...
// From this point, the Diagram gets super laggy and eventually make the browser crash
Any idea whats causing this ?
Sounds like a floating point issue but not sure: https://floating-point-gui.de/
Thanks in advance :)