Add distribution labels

src/components/admin/services/statistics/Chart.jsx

@@ -14,12 +14,14 @@ import {
 const Chart = ({ title, data }) => {
   const ITEMS = { ...ROLES, ...SIZES };
 
-  const chartData = Object.entries(data).map(([type, value]) => ({
-    type: ITEMS[type].label,
-    value: value,
-    className: ITEMS[type].className,
-    fill: ITEMS[type].fill,
-  }));
+  const chartData = Object.entries(data)
+    .filter(([type]) => ROLES[type])
+    .map(([type, value]) => ({
+      type: ITEMS[type].label,
+      value: value,
+      className: ITEMS[type].className,
+      fill: ITEMS[type].fill,
+    }));
 
   const chartConfig = Object.entries(data).map(([type, value]) => {
     const label = ITEMS[type].label;
@@ -35,12 +37,28 @@ const Chart = ({ title, data }) => {
     return chartData.reduce((acc, curr) => acc + curr.value, 0);
   }, [chartData]);
 
+  const CustomLabel = ({ x, y, value }) => {
+    return (
+      <text
+        x={x}
+        y={y}
+        textAnchor="middle"
+        dominantBaseline="middle"
+        fill="#000"
+        fontSize="16px"
+        fontWeight="bold"
+      >
+        {value > 0 ? value : ""}
+      </text>
+    );
+  };
+
   return (
     <Card className="flex flex-col">
-      <CardContent className="flex-1 pb-0">
+      <CardContent className="flex-1 p-2">
         <ChartContainer
           config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
+          className="mx-auto aspect-square max-w-[300px]"
         >
           <PieChart>
             <ChartTooltip
@@ -51,8 +69,9 @@ const Chart = ({ title, data }) => {
               data={chartData}
               dataKey="value"
               nameKey="type"
-              innerRadius={60}
+              innerRadius={70}
               strokeWidth={5}
+              label={<CustomLabel />}
             >
               <Label
                 content={({ viewBox }) => {

src/components/admin/services/statistics/ChartLegend.jsx

@@ -0,0 +1,16 @@
+import { ROLES } from "@/data/admin/Statistics";
+
+const ChartLegend = () => {
+  return (
+    <div className="flex flex-wrap p-6">
+      {Object.entries(ROLES).map(([key, { label, className, fill }]) => (
+        <div key={key} className="flex items-center px-6">
+          <div className={`mr-2 h-4 w-4 ${fill} rounded`}></div>
+          <span className={`text-sm ${className}`}>{label}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ChartLegend;

src/components/admin/services/statistics/Charts.jsx

@@ -2,7 +2,7 @@ import Chart from "./Chart";
 
 const Charts = ({ counts }) => {
   return (
-    <div className="mt-3 grid w-full grid-cols-2 gap-4 p-4 md:grid-cols-4">
+    <div className="grid w-full grid-cols-2 gap-4 p-4 md:grid-cols-4">
       {Object.entries(counts).map(([category, data]) =>
         Object.entries(data)
           .filter(([title, sizes]) =>

src/components/admin/services/statistics/Statistics.jsx

@@ -7,7 +7,7 @@ import Loading from "@/components/Loading";
 import Charts from "./Charts";
 import { getStats } from "./actions";
 import { useQuery } from "@tanstack/react-query";
-
+import ChartLegend from "@/components/admin/services/statistics/ChartLegend";
 const Statistics = () => {
   const { data: counts } = useQuery({
     queryKey: ["/admin/statistics"],
@@ -24,6 +24,7 @@ const Statistics = () => {
           <Subtitle title="Registrations" />
           <Tabs events={counts.events} />
           <Subtitle title="Attendance" />
+          <ChartLegend />
           <Charts counts={counts.users} />
         </div>
       )}

src/components/admin/services/statistics/Tabs.jsx

@@ -3,7 +3,7 @@ import Tab from "./Tab";
 const Tabs = ({ events }) => {
   return (
     <>
-      <div className="mb-3 grid w-full grid-cols-1 gap-4 p-4 md:grid-cols-4">
+      <div className="grid w-full grid-cols-1 gap-4 p-4 md:grid-cols-4">
         {Object.entries(events).map(([title, count], index) => (
           <Tab key={index} title={title} value={count} />
         ))}