feat: ✨ add nestedStackedBarsVertical and confarea

[lloydrichards]

Goals/Scope

We have identified two opportunities to improve the SSZVIS library by incorporating commonly used features, the nestedStackedBar and the confarea. Here are the key points:

• Currently, these features are implemented across 35 charts (5% of all charts, more than heatmap, sunburst and pie chart combined).
• The widespread use indicates its importance and utility in our visualisations (11% of line charts include confarea).
• Maintaining separate implementations increases the risk of bugs and complicates future maintenance efforts.

Proposed Solution

To address this, we propose:

• Integrating the existing nestedStackedBar and confarea implementation directly into the SSZVIS library (bump version to 3.1.0).
• Removing individual implementations from specific charts reduces the overall code surface area.
• Add documentation on how to use and build charts using these features

Additional Tasks

There are a few underlying issues with charts that are related to the old .enter().exit() pattern. We will address these issues as part of this PR by updating the code to use the new .join() pattern.

Description

Porting the nestedStackedBar and confarea features went as smooth as expected. There is now a new page for the nestedStackedBar and confarea was added to the annotation section:

sszvis.nestedStackedBarsVertical

• Ported the nestedStackedBar feature to the SSZVIS library
• Added documentation to a new page on how to use the nestedStackedBar feature
• Added example chart

sszvis.annotationConfArea

• Ported the confarea feature to the SSZVIS library
• Added documentation to the Annotation page on how to use the confarea feature
• Added example chart

With the .join() pattern there was actually a lot of places this needed to be changes and many side effects that needed to be addressed. .enter() has now been removed from the codebase and all the charts tested for visual regression and functionality.

Will be good to do some more testing with all the production charts to make sure everything is working as expected.

How to Test

In order to see the charts you will need to spin up the local server and navigate to the nestedStackedBar and Annotation pages. (make sure to run npm run build before starting the server)

---

• Timeframe: [24 hr]
• Urgent!

[wereHamster]

code looks good, I assume you tested with the two examples