Revamp pie chart UI for Insights

[samwinslow]

Is your feature request related to a problem?

From user feedback we uncovered a few bugs and UX snags regarding pie charts. This can be the master issue to contain and describe them.

Describe the solution you'd like

Feedback from user interviews.

1. Add a graph legend, color-coded appropriately.
2. Add percentages to the graph legend and tooltips.
3. Fix bug where adding more than one graph series results in useless unmerged data. n separate pie charts should appear for n graph series Is this the best UX?
4. Reduce size of huge Total annotation
5. Remove Showing all breakdown values – doesn't add any info, unless the user could also toggle breakdown entries in the graph legend.

Describe alternatives you've considered

Additional context

Thank you for your feature request – we love each and every one!

[clarkus]

Summary
Pie charts are useful for describing data that adds up to a meaningful whole value. For example, looking at revenue, we can break down total revenue into the distinct plans available for purchase. Pie charts illustrate values visually using area. As the number of slices/categories increases and as the variance between values increases, it becomes increasingly difficult to compare values visually without the aid of secondary user events (tooltips for example).

Changes to the core pie chart component
This is essentially a direct response to the problems stated above. I've changed the following:

• Added a visual legend to the chart
• Added normalized percentage values to all metrics (legends & tooltips)
• Updated the total annotation to better align with other chart patterns
• Removed the "show all breakdowns" line
• Added a chart options modal that exposes chart-specific options.

General guidelines for this visualization

• Pie charts are like analog clocks in their layout. The first, largest slice starts at the 12 o'clock position, and slices layer in contiguously until the chart is full. This is important to note for the small multiples / alternate layout solution. Since each slice gets its own chart, we start all slices at the 12 o'clock position. This gives users a consistent starting point to reference and makes it easier to scan multiple charts.
• Legend metrics and tooltips metrics use the same format in this example. Given that we're showing a single metric on hover, we can afford to be a bit more visually rich with the tooltip pattern. This could also be an opportunity to consolidate into a single component
• Metrics are always sorted large to small. The legend should use the same sort order as the pie. For this solution, I've specified that metrics are ordered left-to-right, top-to-bottom.

Chart Options
One of the main changes I'm introducing is this chart options concept. Within each chart type, it's feasible that a user might want to adjust values, formatting, or interactive options to help chart viewers better understand the data. With pie charts, this becomes a bit more complex because of their constraints. As the number of slices increases, the newly added legend consumes more and more space. Eventually, it can become so large and complex, that it has more visual weight than the pie chart itself. In this situation, you might be better off just looking at the legend because it's easier to scan than the pie slices.

To help address this, I've added an option that essentially changes the pie into a series of small multiples. This could feasibly be an entirely separate chart type, but for this initial solution documentation, I've left it as a configuration option for pie charts. When the Show a distinct pie chart for each breakdown category option is enabled, the legend is removed and the pie explodes into a single slice pie for each breakdown category.

In the chart options modal, I have also included a decimal precision concept. This would allow a user to specify precision for their axis labels, legend, etc.

Known gaps not addressed by this solution

• Color - As the number of categories shown increases, we will need a visually distinct way of identifying each slice/area. I didn't see any data visualization color palettes, but longer-term we should identify an upper bound for metrics and ensure that we can render each slice in a visually distinct way. WCAG accessibility color contrast criteria should come into consideration here. As much as possible, I have tried to reuse the components defined in the figma design system.
• Metric Formatting - I have a suggestion in the data definition component for formatting metrics based on their meaning. For example, formatting revenue data as currency (USD for example). This is a large area of customization and would require more discovery to fully solve formatting. For now, I just wanted to highlight formatting as a means of making charts more approachable and obvious. Note that this is distinct from decimal precision.
• Comparison ranges - Comparison ranges essentially double the footprint of your legend and tooltips. I didn't make enough time to address this in my solution today. I could see comparison metrics being a component of each individual pie, or being entirely separate metrics.
• Validation - It's possible right now to make pretty much any visualization you want. We could recommend visualization types based on the data definition. For example, if the user is applying a breakdown that contains more than 7 categories, we might suggest using a bar chart over a pie chart for clarity. Secondary to this, we could describe each visualization succinctly to help users know which visualization is best suited for the data they're trying to describe. Edit this is essentially the same idea as Smart graph display #4330

[paolodamico]

Feedback from a focus customer in terms of general use for this type of graph. Would be great to be able to double click on slices and see details (which is addressed in the design above), and be able to exclude blank/nulls.

[pauldambra]

superceded by #11433