enhancment complete with phase 10

apps/admin/src/components/charts/MembershipDistributionChart.tsx

@@ -20,81 +20,47 @@ export function MembershipDistributionChart({
   title = "Membership Distribution",
 }: MembershipDistributionChartProps) {
   const chartOptions: AgChartOptions = useMemo(
-    () => ({
-      title: {
-        text: title,
-        fontSize: 18,
-        fontWeight: "bold",
-      },
-      data,
-      series: [
-        {
-          type: "pie",
-          calloutLabelKey: "label",
-          angleKey: "value",
-          sectorLabelKey: "label",
-          fills: data.map((item) => item.color || "#3b82f6"),
-          strokes: ["#ffffff"],
-          strokeWidth: 2,
-          calloutLabel: {
-            enabled: true,
-            fontSize: 12,
-            fontWeight: "bold",
-          },
-          sectorLabel: {
-            enabled: true,
-            fontSize: 14,
-            fontWeight: "bold",
-            color: "#ffffff",
-            formatter: (params: any) => {
-              const percentage = (
-                (params.datum.value /
-                  data.reduce((sum, item) => sum + item.value, 0)) *
-                100
-              ).toFixed(1);
-              return `${params.datum.label}: ${percentage}%`;
-            },
-          },
-          highlightStyle: {
-            item: {
-              fillOpacity: 0.8,
-              stroke: "#000000",
-              strokeWidth: 2,
-            },
-          },
-          tooltip: {
-            enabled: true,
-            renderer: (params: any) => {
-              const percentage = (
-                (params.datum.value /
-                  data.reduce((sum, item) => sum + item.value, 0)) *
-                100
-              ).toFixed(1);
-              return `<div class="bg-white p-2 rounded shadow-lg border">
-              <div class="font-bold">${params.datum.label}</div>
-              <div class="text-sm">Count: ${params.datum.value}</div>
-              <div class="text-sm">Percentage: ${percentage}%</div>
-            </div>`;
-            },
-          },
+    () =>
+      ({
+        title: {
+          text: title,
         },
-      ],
-      legend: {
-        enabled: true,
-        position: "right",
-        fontSize: 12,
-        marker: {
-          shape: "square",
-          size: 12,
+        data,
+        series: [
+          {
+            type: "pie",
+            calloutLabelKey: "label",
+            angleKey: "value",
+            sectorLabelKey: "label",
+            fills: data.map((item) => item.color || "#3b82f6"),
+            calloutLabel: {
+              enabled: true,
+            },
+            sectorLabel: {
+              enabled: true,
+              color: "#ffffff",
+              formatter: (params: any) => {
+                const percentage = (
+                  (params.datum.value /
+                    data.reduce((sum, item) => sum + item.value, 0)) *
+                  100
+                ).toFixed(1);
+                return `${percentage}%`;
+              },
+            },
+            tooltip: {
+              renderer: (params: any) => ({
+                title: params.datum.label,
+                content: `${params.datum.value} (${((params.datum.value / data.reduce((sum, item) => sum + item.value, 0)) * 100).toFixed(1)}%)`,
+              }),
+            },
+          },
+        ],
+        legend: {
+          enabled: true,
+          position: "right",
         },
-      },
-      padding: {
-        top: 20,
-        right: 20,
-        bottom: 20,
-        left: 20,
-      },
-    }),
+      }) as any,
     [data, title],
   );