Box plot chart

[kuklas]

Is this a new component or an extension of an existing one?
It's not entirely clear whether this is a new component or an extension. The x and y axes, lines, and other elements are consistent across all charts, with only the middle part being different. Based on this, it could be considered an extension.

Describe the feature
A box plot, also known as a box-and-whisker plot, is a graphical representation of a data set that displays the distribution of the data, particularly the shape, spread, and skewness. It is a way of summarizing a large amount of data in a compact and easy-to-read format.

The box plot feature in Resource optimization is designed to help users understand the data that is used to analyze and generate a recommendation. By displaying a graphical representation of the distribution of the data, particularly its shape, spread, and skewness, users can trust the recommendation and make informed decisions. The box plot allows for a lot of data to be shown to the customer, making it a good tool for comparison purposes.
For example, if a user's memory request is 500 MB and 50% of the time the actual memory usage is between 450 and 520 MB, the box plot would display a box that goes from 450 to 520 MB. The chart would also include a line for the average memory usage, a line for the request, a line for the limit (which is usually outside the box because the limit is typically greater than the request), and top and bottom outliers.
Overall, the box plot feature is an effective way to visualize and interpret data in Resource optimization, allowing users to make informed decisions based on the data analysis and recommendations generated by the system.

Densify is using these charts to show these values for the same purpose https://www.densify.com/product/cloud-resource-optimizer/

Are there visuals for this feature? If applicable, please include examples for each state and for varying widths
Include screenshots or links to Marvel or other mockups.
I put together a visual but it's not the best one, I didn't explore more because it wasn't our main focus for MVP, but in the future, this could be helpful.
https://www.sketch.com/s/c1987a7a-9bf0-432a-a31f-ff05976ffec7/a/Vrjdbqg

Any other information?
Related link: https://formidable.com/open-source/victory/docs/victory-box-plot/

[pgarciaq]

This video explains what a box plot is:
https://www.youtube.com/watch?v=INSIyaZUXIY

[mcarrano]

@dlabrecq is this something that can be supported with our current Victory charts?

[dlabrecq]

Victory supports a box plot, but PatternFly doesn't have a component for it. Although, we previously created CSS variables for a box plot in PatternFly core.

Victory examples: https://formidable.com/open-source/victory/docs/victory-box-plot

Design notes

1. The colors used in the mock are not from the PatternFly chart color theme
2. "Min/Max" would NOT be its own legend item. Each Victory legend item represents a unique data set

Victory notes

1. It's possible to label the min, median, max, q1, and q3 of each box
2. Data may be pre-calculated or an array of raw data (i.e., Victory will perform calculations for you)
3. Tooltips are not well supported for box plots, but we may be able to create a custom one?

[dlabrecq]

A couple POCs to show min/max labels and a custom tooltip. The values shown in the tooltip can be customized as needed; min, median, max, q1, and q3.

Live examples here: https://patternfly-react-pr-8900.surge.sh/charts/box-plot-chart/

[pgarciaq]

It looks very nice indeed @dlabrecq!

[dlabrecq]

Created a PR for PatternFly's upcoming v5 branch.
See #8900