Add Pie Chart Key

[yooian]

Description

Added interactive key beside pie chart. Cross-over exists so hovering over an element highlights the name and corresponding slice on pie chart. Hovering over a slice highlights the corresponding name on the key.

The key can fit up to 16 elements per column and an indefinite number of rows (it overflows if there's too many though - may need new issue to deal with extremely large numbers of elements).

Added rudimentary scaling with website resizing but this will definitely need to be tweaked and updated, especially if the key will dynamically resize.

Changes include:

• Adding new flex container beside pie chart for key
• CSS hover effects
• SVG Key elements
• Rudimentary scaling with website

Issues Still Present:

• If the key expands off the screen, then scaling becomes weird
• The key is not perfectly centered vertically

Notes:

• Highlights and style can all be changed if needed
• Also, if there's any merging conflicts/issues with Negative Value Support, I can take a look at it

[yooian]

Idk how good the highlighting feels so let me know. It might be too tacky with the color change. Could reduce it to a simple text shift and go more minimalistic

Also, I didn't include percentages by the name because I thought having it popup on click would look better. Lmk if you have other ideas

[GeorgeBerdovskiy]

Personally, I love the highlighting! And I agree with you on the percentages. It seems like there may be some brower specific CSS issues because I get some interesting results when I test on my machine (which are easily fixed with some small tweaks), but otherwise it looks fantastic. Thank you for putting in the work on this 🙏

This is how it looks by default - not sure if the key is supposed to be fully horizontal like this.

[yooian]

Oh yeah that's weird the key should be vertical and expand horizontally