Adjust half-donut chart

[outerpress]

Half-donut Chart Types

This can be broken down to two different chart types used throughout the project - a more robust one used for comparison, and a simpler one used for highlighting.

Multi-value

A multi-value half-donut chart can be used to compare 2 or percentages of a base value. Components are:

• Title
• Date (optional)
• Base value
• Sub-values
• Percent values and labels for each sub-value

Example:

Highlight Chart

This is used to highlight a particular number. It's a simplified version of the multi-value chart.

Example:

General Functionality

Coloring

It's difficult to distinguish the differences in non-focused values in the current scheme because they're all the same grey. The colors should be a gradient of the base color.

• The section that the chart is initially focused on should stay the base color (75568d)
• Sections to the left of focus should be darker - to the right should be lighter:
• The colors don't change when focus changes. The initially focused value sets the scheme.

Sections

Along with the color changes above, lets make the sections a bit clearer, and more useful:

• The percent value of the total should show in the section.
• The whitespace between sections should be increased to better show the separate (try ~5px)
• If possible, I'd like the active section to show the whole number associated with the percentage. See the mockups above for an example.

Labeling

• Labels, when clicked, expose the whole number of the chart section they are associated with.
• Active state - outlined, button style
• Hover/Focus state - background color highlighted

Example:

Active State: Unsheltered Focus/Hover State: Transitional Housing

Values

• If possible on the front end, percent values should be rounded to the nearest whole number

Dates

Dates will be a global element for each card. I'll describe them in a separate issue, but basically, they can be updated by clicking the date anywhere it shows up within a card.

[outerpress]

@clemf This is my first pass at standardizing/updating our half donuts. We can definitely simplify/clarify further. 🔪 🍩

[clemf]

@outerpress I love this! This will really help me refactor into a nice reusable component.