[TASK] Implement Validator's Role Distribution Pie Chart Section

[monaiuu]

Description

Implement a pie chart to visualize the distribution of different roles within the Tangle Network's services on Validator Profile Page for each Validator. The pie chart should be interactive, allowing users to hover over segments to see additional details of each role.

Related tasks and dependency: https://github.com/webb-tools/webb-dapp/issues/1982 Here and here are examples of potential hover effect with legend tooltip on the pie chart, for specific implementation please find an appropriate chart library. The color distribution of the pie chart is TBD and can be discussed with design @monaiuu

Figma Link

Screenshot

[vutuanlinh2k2]

The chart for Shared Restake needs to be be added, there is only for Independent right now. Need to add on both Restake and Vadidator page

[vutuanlinh2k2]

Waiting for @monaiuu to update the Pie Charts to match with real role distribution

[monaiuu]

Chart Update

For all TSSaaS roles, use purple chips for identifier. Below is the breakdown of the color schemas used for each role:

When listing the roles on legend, sort alphabetically for organization.

[yurixander]

Note: On my PRs, I've essentially implemented the same charts. Once everything is merged, it'll be a good idea to consolidate both into a single component.

In terms of the colors, please keep me updated on them in case we do implement them, that way I can also update the colors in the role listing dropdowns, chips, chart colors, etc. of my PRs.

As per the other details, let me know if it's a good idea to also apply things like name sorting on the dropdown list when selecting roles for allocation, with the intent to be consistent, @monaiuu?

[monaiuu]

Currently, the above color scheme follows a linear progression of colors from the darkest shade of purple (#4B3AA4) to the lightest shade (#B5A9F2), divided into 12 distinct colors (# of roles). Each color represents a step between the darkest and lightest shades, and each step is theoretically equidistant from the next in the color space. Each role is then assigned a color code based on its position in the sorted list in alphabetical order.

Due to the dynamic nature of roles to be continuously added (and/or removed) over time, I am wondering the feasibility of aiming for a solution that automates the color assignment by developing a dynamic color assignment function, and map each role to a color based on its alphabetical position, with the first role getting the lightest and last getting the darkest?

Let me know what you guys think is the best way to handle this. @vutuanlinh2k2 @yurixander

• Also note that Zengo GG20 secp256k1 can be removed from the list, as it is no longer applicable.