Indicate thresholds on utilization donut charts

[ncameronbritt]

The utilization donut chart pattern indicates that fill colors can be used to indicate different thresholds. It could be helpful for a user to see where those thresholds change and where the current value sits within the ranges. I.e. Am I close to the line, or safely within a range?

[jeperry]

+1 this would add much needed context to donuts when there is a threshold.

[LHinson]

@ncameronbritt curious, do you have any ideas, examples or designs for how you expected this to look/behave? Not required but wanted to make sure we had all the history.

@jeperry do you want a priority number associated with this issue?

[ncameronbritt]

I didn't have anything specific in mind, it was something @jeperry mentioned. I could imagine that instead of a grey background on the unfilled part of donut, that the threshold colors are hinted at in some way:

[mcoker]

@dlabrecq do you know if this is something the charting library supports?

cc @mceledonia

[mceledonia]

I like the idea, we could visually represent this as faded colors like Cameron shows above, or perhaps 1px colored line at the edge of each threshold would work. Either way I think we can come up with a nice solution from a visual standpoint, and I agree we should support it.

[dlabrecq]

Victory doesn't support a donut chart out of the box. We can change styles for the stroke color, width, etc., but they're applied to the entire chart. Although, it may be possible to overlay one chart on top of another?

[rachael-phillips]

@kybaker and @mceledonia we are bumping this issue up in priority. What are the design next steps on this and what is your availability to work on it?

[mceledonia]

@gdoyle1 Actually has some work on this in her donut chart documentation. Take a look at that and I would be happy to pick this up from where she left off! It looks like it might be enough to run with though. I think really I would just take what's there and spell it out more precisely.

[LHinson]

nice @mceledonia, where can we find that work?

looping in @ncameronbritt and @beanh66 on this since they have vested interest.

[ncameronbritt]

May as well get @cshinn in here too, since he's working on the charting stuff in OpenShift.

[mceledonia]

@LHinson @rachael-phillips @cshinn @ncameronbritt
Check out the donut chart section here
https://docs.google.com/document/d/1-R9JGlkTeU8-xa0lkfox4kn5HxFN6vJjQ1i9NN1-z6M/edit?usp=sharing
@dlabrecq Based on the information there and our conversation earlier in the week, how's that level of detail look? I am happy to expand on what's there if needed, but figured we could check first.

[gdoyle1]

This is what I proposed in the documentation:

(Disregard the pointers in the image)
Donut chart fill: When dealing with thresholds, the fill should either be blue, orange or red. The fill starts at 12 ‘oclock and move clockwise.
The fill color depends on the thresholds:

1. When no thresholds exist, apply the charting color system.
2. When a threshold exists and the percentage has not surpassed any thresholds, the indicator is blue (#39A5DC). The remaining area of the chart will be #D8D8D8.
3. When the utilization percentage has surpassed the warning threshold, but not the error threshold, the indicator is orange (#F0AB00). The remaining area of the chart will be #D8D8D8.
4. When the utilization percentage has surpassed the error threshold, the indicator is red (#CC0000). The remaining area of the chart will be #D8D8D8.

[ncameronbritt]

The idea behind the original issue was to be able to see how close you are to the threshold--to see where the breakpoints are--not just to be able to change color based on some thresholds. For example in the above mockup, am I just barely in the yellow, in the middle of the yellow, or am I almost in the red?

You get that with the gauges we have in OpenShift:

[gdoyle1]

@ncameronbritt @beanh66 @cshinn @rachael-phillips @jeperry We still have some technical discovery to do in order to figure out if this option is possible using Victory, but here is what I came up with for donut charts with thresholds https://redhat.invisionapp.com/share/C2RIRGUYTQA. Does this satisfy your requirements?

[ncameronbritt]

That's similar to what my first thought was. But now seeing the mockups with the different levels, I notice that once it turns yellow you can't see how close you are to blue, and once it turns red you can't see how close you are to yellow or blue. The scale only works in one direction--you can only see how close you are to the next worst level.

I think ideally you should always be able to see thresholds, regardless of the current level.

[mcarrano]

@gdoyle1 What's the latest on this? Did we ever finalize these designs?

[gdoyle1]

@mcarrano Latest is that I met with the people tagged above to discuss the design and got it passed by Kyle - I then met with @TheRealJon to discuss the feasibility of the design and it seems like it'll work but he'll have to prototype to make sure. I handed this InVision project here that contains the most updated designs and documentation to Jon last week

[dlabrecq]

Created the following PR for the donut percentage and threshold charts.
patternfly/patternfly-react#2064