We have graduated panels that we use as input sliders or knobs. We want to display a scale of value between min and max with standardized increments that looks like this: 0.25, 0.50 or 1.
The increments will be 1 but the last tick will be 10 and 10.1 will not be displayed. So here the increments are correct but we need to find a way to always display the maximum as the last tick.
Potential solution to this problem:
Our idea was to set graduatedTickUnit to 0.1, or anything that fits the floating point precision of min or max, and use graduatedSkip to skip the ticks that we dont want. Something like this:
const graduatedSkip = (v) => {
const value = Number(v.toFixed(1));
return !(
Number.isInteger(value) ||
value === graduatedMin ||
value === graduatedMax
);
};
The problem with graduatedSkip:
This works fine for displaying the ticks exactly as we want but it seems like if all the “skipped” ticks are still taken into account for positionning or something like that because when we set a range of like 0-100.1 the ticks will simply not show up even though they are mostly skipped and there are still plenty of space for them (the visible ones). here’s a codesandbox demonstrating this problem: GoJs Knob with graduatedSkip
If you change the graduatedMax to something lower like 13.3 it will work fine but not with higher values. It also depends on the size of the widget or if it is resizable.
Our questionning:
Is it the intended behavior for the graduatedSkip or is it bugged ?
And/Or is there a better solution to our initial problem ?
As far as the skip issue, this has been fixed and will be out with the next release, which may be in a week or so.
I’m not sure if there’s a better solution for your initial problem, but can you display the “10.1” tick in some other way using an additional Shape in your Panel? Or would that be too annoying to position in your case?
Yes the additional Shape was something we talked about but it’s a last case scenario for us since, as you said, it will be hard to position it right and may not work as expected for all cases.
We decided to go with this solution and try to inject the Maximum and Minimum numbers manually. It’s frustrating for sure because we have many Graduated Panel Templates but at least it’s better than freezing the Diagram when working with large scale.
Example : For a minimum of 0, maximum of 10000 it’s okay to use a graduatedTickUnit of 1000.
However, at the moment you change the maximum to 10000.1. The graduatedTickUnit should be 0.1 in order to display the latest tick. And that’s a waste of ressources.
It’s kinda unfortunate to not be able to just toggle a boolean to display the min and the max values. Why would I use a graduatedTickUnit of 0.1 for a maximum value of 10000.1 ? Anyway the Graduated Panel usually should display nice intervals (base * 10^exp). The only exception is the Min and Max values.
For 0 and 10000.1 I expect to use a graduatedTickUnit of 1000 to display [1000, 2000 …, 9000] plus the min and max with an option or something.