Feat: Implement dynamic Pie Chart for Client Diversity and enhance localization support.

[LifeofDan-EL]

Description

This pull request addresses an update to the website's client diversity section by introducing a new PieChart component with the following key changes:

Dynamic Data Visualization: The chart now renders dynamically, updating the visualization based on the provided data values.

Component Reusability: The PieChart component has been abstracted and made reusable, allowing it to be easily implemented in other parts of the application as needed.

Internationalization (i18n) Support: All text elements within the client diversity chart are now configured for localization, facilitating future language translation efforts.

Related Issue

Fixes #15099

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	5b5ea6a
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/68fe1e41ec620b0008aa0aa0
😎 Deploy Preview	https://deploy-preview-16547--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 48 (🔴 down 2 from production) Accessibility: 94 (no change from production) Best Practices: 92 (🔴 down 8 from production) SEO: 92 (no change from production) PWA: 59 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[LifeofDan-EL]

Hello @wackerow, I effected the changes with the direction you gave earlier, thanks.

However, I noticed this breaking since the push from about 11 hours ago on the dev which I pulled from. The error is not from the files I worked on, which I have tested locally already.

Thanks.

[wackerow]

Thanks @LifeofDan-EL! Looking better =)

Left some suggestions. These charts can be tricky to get them "responsive" on all screen sizes, so I think the simpler-the-better here. Otherwise I think this looks good to go once those updates are made.. thanks again for the help!

[wackerow]

Getting challenging overflow issues with these charts when trying to lay them side-by-side. I think for simplicity and robustness, we should probably just keep them stacked.

Benefits:

• No x-overflow when they're side-by-side
• The ClientDiversityChart wrapper becomes completely unnecessary... can just render the two PieChart components we need
• Can also just place the sub-text directly here as markdown, avoiding the need for altering page-developers-docs.json

Suggested change

	<ClientDiversityChart>
	<PieChart
	data={[
	{ name: "Geth", value: 41 },
	{ name: "Nethermind", value: 38 },
	{ name: "Besu", value: 16 },
	{ name: "Erigon", value: 3 },
	{ name: "Reth", value: 2 }
	]}
	title="Execution Clients"
	/>
	<PieChart
	data={[
	{ name: "Lighthouse", value: 42.71 },
	{ name: "Prysm", value: 30.91},
	{ name: "Teku", value: 13.86},
	{ name: "Nimbus", value: 8.74},
	{ name: "Lodestar", value: 2.67 },
	{ name: "Grandine", value: 1.04 },
	{ name: "Other", value: 0.07 }
	]}
	title="Consensus Clients"
	/>
	</ClientDiversityChart>
	<PieChart
	data={[
	{ name: "Geth", value: 41 },
	{ name: "Nethermind", value: 38 },
	{ name: "Besu", value: 16 },
	{ name: "Erigon", value: 3 },
	{ name: "Reth", value: 2 }
	]}
	title="Execution Clients"
	/>
	<PieChart
	data={[
	{ name: "Lighthouse", value: 42.71 },
	{ name: "Prysm", value: 30.91},
	{ name: "Teku", value: 13.86},
	{ name: "Nimbus", value: 8.74},
	{ name: "Lodestar", value: 2.67 },
	{ name: "Grandine", value: 1.04 },
	{ name: "Other", value: 0.07 }
	]}
	title="Consensus Clients"
	/>
	> This diagram may be outdated—go to [ethernodes.org](https://ethernodes.org) and [clientdiversity.org](https://clientdiversity.org) for up-to-date information.

[wackerow]

As noted in the index.md file, would just ditch this wrapper entirely, along with it's import in MdComponents/index.tsx, and the additions to page-developers-docs.json... that string can go straight into the markdown file.

[LifeofDan-EL]

Thanks, I have effected the changes. Testing before sending out.