consistent naming & strucutre

pkgs/ui/src/components/table/nodePieChart.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from "recharts";
+import { useTheme } from "@mui/material/styles";
+import { Box } from "@mui/material";
+
+export interface PieData {
+  name: string;
+  value: number;
+  color: string;
+}
+
+interface Props {
+  data: PieData[];
+  showLabels?: boolean;
+}
+
+export function NodePieChart(props: Props) {
+  const theme = useTheme();
+  const { data, showLabels } = props;
+
+  return (
+    <Box height={350}>
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            data={data}
+            innerRadius={85}
+            outerRadius={120}
+            fill={theme.palette.primary.main}
+            dataKey="value"
+            nameKey="name"
+            label={showLabels}
+            legendType="square"
+            cx="50%"
+            cy="50%"
+            startAngle={0}
+            endAngle={360}
+            paddingAngle={0}
+            labelLine={true}
+            hide={false}
+            minAngle={0}
+            isAnimationActive={true}
+            animationBegin={0}
+            animationDuration={1000}
+            animationEasing="ease-in"
+            blendStroke={true}
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} />
+            ))}
+          </Pie>
+          <Legend verticalAlign="bottom" />
+        </PieChart>
+      </ResponsiveContainer>
+    </Box>
+  );
+}