Client diversity piechart update

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

public/content/developers/docs/nodes-and-clients/client-diversity/index.md

@@ -5,6 +5,27 @@ lang: en
 sidebarDepth: 2
 ---
 
+import { PieChart } from "@/components/PieChart"
+
+const executionData = [
+  { name: "Geth", value: 43 },
+  { name: "Nethermind", value: 36 },
+  { name: "Besu", value: 16 },
+  { name: "Erigon", value: 3 },
+  { name: "Reth", value: 2 },
+  { name: "Other", value: 0 },
+]
+
+const consensusData = [
+  { name: "Lighthouse", value: 32.59 },
+  { name: "Prysm", value: 31.31 },
+  { name: "Teku", value: 27.06 },
+  { name: "Nimbus", value: 5.63 },
+  { name: "Grandine", value: 2.0 },
+  { name: "Lodestar", value: 1.42 },
+  { name: "Others", value: 0.15 },
+]
+
 The behavior of an Ethereum node is controlled by the client software it runs. There are several production-level Ethereum clients, each one developed and maintained in different languages by separate teams. The clients are built to a common spec that ensures the clients seamlessly communicate with each other and have the same functionality and provide an equivalent user experience. However, at the moment the distribution of clients across nodes is not equal enough to realize this network fortification to its full potential. Ideally, users divide roughly equally across the various clients to bring as much client diversity as possible to the network.
 
 ## Prerequisites {#prerequisites}
@@ -41,7 +62,19 @@ There is also a human cost to having majority clients. It puts excess strain and
 
 ## Current client diversity {#current-client-diversity}
 
+
+
+<div style={{ display: 'flex', gap: '1rem' }}>
+  <div style={{ flex: 1 }}>
+    <PieChart data={executionData} title="Execution Clients" />
+  </div>
+  <div style={{ flex: 1 }}>
+    <PieChart data={consensusData} title="Consensus Clients" />
+  </div>
+</div>
+
 ![Pie chart showing client diversity](./client-diversity.png)
+
 _Diagram data from [ethernodes.org](https://ethernodes.org) and [clientdiversity.org](https://clientdiversity.org/)_
 
 The two pie charts above show snapshots of the current client diversity for the execution and consensus layers (at time of writing in January 2022). The execution layer is overwhelmingly dominated by [Geth](https://geth.ethereum.org/), with [Open Ethereum](https://openethereum.github.io/) a distant second, [Erigon](https://github.com/ledgerwatch/erigon) third and [Nethermind](https://nethermind.io/) fourth, with other clients comprising less than 1 % of the network. The most commonly used client on the consensus layer - [Prysm](https://prysmaticlabs.com/#projects) - is not as dominant as Geth but still represents over 60% of the network. [Lighthouse](https://lighthouse.sigmaprime.io/) and [Teku](https://consensys.net/knowledge-base/ethereum-2/teku/) make up ~20% and ~14% respectively, and other clients are rarely used.

src/components/MdComponents/index.tsx

@@ -4,6 +4,7 @@ import type { ChildOnlyProp } from "@/lib/types"
 
 import Contributors from "@/components/Contributors"
 import MarkdownImage from "@/components/MarkdownImage"
+import { PieChart } from "@/components/PieChart"
 import TooltipLink from "@/components/TooltipLink"
 import YouTube from "@/components/YouTube"
 
@@ -166,6 +167,7 @@ export const reactComponents = {
   GlossaryTooltip,
   InfoBanner,
   Page,
+  PieChart,
   QuizWidget: StandaloneQuizWidget,
   IssuesList,
   Tag,

src/components/PieChart/index.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import { FaArrowTrendUp } from "react-icons/fa6"
+import { Pie, PieChart as RechartsPieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+
+type PieChartDataPoint = { name: string; value: number }
+
+/**
+ * PieChartProps defines the properties for the PieChart component.
+ *
+ * @property {PieChartDataPoint[]} data - The data to be displayed in the chart. Each object should have a `name` and `value` property.
+ * @property {string} [title] - The title of the chart.
+ * @property {string} [description] - The description of the chart.
+ * @property {string} [footerText] - The footer text of the chart.
+ * @property {string} [footerSubText] - The footer subtext of the chart.
+ */
+
+type PieChartProps = {
+  data: PieChartDataPoint[]
+  title?: string
+  description?: string
+  footerText?: string
+  footerSubText?: string
+}
+
+const defaultChartConfig = {
+  value: {
+    label: "Value",
+    color: "hsl(var(--accent-a))",
+  },
+} satisfies ChartConfig
+
+/**
+ * PieChart component renders a pie chart with the provided data and optional title, description, footer text, and footer subtext.
+ *
+ * @param {PieChartProps} props - The properties for the PieChart component.
+ * @returns {JSX.Element} The rendered PieChart component.
+ */
+
+export function PieChart({
+  data,
+  title,
+  description,
+  footerText,
+  footerSubText,
+}: PieChartProps) {
+  return (
+    <Card>
+      <CardHeader>
+        {title && <CardTitle>{title}</CardTitle>}
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={defaultChartConfig}>
+          <RechartsPieChart
+            accessibilityLayer
+            data={data}
+            margin={{
+              left: 12,
+              right: 12,
+              top: 12,
+              bottom: 12,
+            }}
+          >
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Pie
+              data={data}
+              dataKey="value"
+              nameKey="name"
+              cx="50%"
+              cy="50%"
+              outerRadius={80}
+              fill="hsl(var(--accent-a))"
+              label
+            />
+          </RechartsPieChart>
+        </ChartContainer>
+      </CardContent>
+      {(footerText || footerSubText) && (
+        <CardFooter>
+          <div className="flex w-full items-start gap-2 text-sm">
+            <div className="grid gap-2">
+              {footerText && (
+                <div className="flex items-center gap-2 font-medium leading-none">
+                  {footerText} <FaArrowTrendUp className="h-4 w-4" />
+                </div>
+              )}
+              {footerSubText && (
+                <div className="text-muted-foreground flex items-center gap-2 leading-none">
+                  {footerSubText}
+                </div>
+              )}
+            </div>
+          </div>
+        </CardFooter>
+      )}
+    </Card>
+  )
+}