enhancment complete with phase 10

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

@@ -20,84 +20,52 @@ export function RevenueChart({
   title = "Monthly Revenue",
 }: RevenueChartProps) {
   const chartOptions: AgChartOptions = useMemo(
-    () => ({
-      title: {
-        text: title,
-        fontSize: 18,
-        fontWeight: "bold",
-      },
-      data,
-      series: [
-        {
-          type: "bar",
-          xKey: "category",
-          yKey: "value",
-          fills: data.map((item) => item.color || "#10b981"),
-          strokes: ["#ffffff"],
-          strokeWidth: 2,
-          cornerRadius: 4,
-          highlightStyle: {
-            item: {
-              fill: "#059669",
-              stroke: "#ffffff",
-              strokeWidth: 2,
+    () =>
+      ({
+        title: {
+          text: title,
+        },
+        data,
+        series: [
+          {
+            type: "bar",
+            xKey: "category",
+            yKey: "value",
+            fill: "#10b981",
+            stroke: "#ffffff",
+            strokeWidth: 2,
+            cornerRadius: 4,
+            highlightStyle: {
+              item: {
+                fill: "#059669",
+              },
+            },
+            label: {
+              placement: "outside",
+              formatter: (params: any) => `$${params.value.toLocaleString()}`,
+            },
+            tooltip: {
+              renderer: (params: any) => ({
+                title: params.datum.category,
+                content: `Revenue: $${params.datum.value.toLocaleString()}`,
+              }),
             },
           },
-          label: {
-            enabled: true,
-            position: "top",
-            fontSize: 12,
-            fontWeight: "bold",
-            color: "#374151",
-            formatter: (params: any) => `$${params.value.toLocaleString()}`,
+        ],
+        axes: [
+          {
+            type: "category",
+            position: "bottom",
           },
-          tooltip: {
-            enabled: true,
-            renderer: (params: any) => {
-              return `<div class="bg-white p-2 rounded shadow-lg border">
-              <div class="font-bold">${params.datum.category}</div>
-              <div class="text-sm">Revenue: $${params.datum.value.toLocaleString()}</div>
-            </div>`;
+          {
+            type: "number",
+            position: "left",
+            label: {
+              formatter: (params: any) => `$${params.value.toLocaleString()}`,
             },
           },
-        },
-      ],
-      axes: [
-        {
-          type: "category",
-          position: "bottom",
-          title: {
-            text: "Month",
-            fontSize: 14,
-          },
-          label: {
-            fontSize: 12,
-            rotation: 45,
-          },
-        },
-        {
-          type: "number",
-          position: "left",
-          title: {
-            text: "Revenue ($)",
-            fontSize: 14,
-          },
-          label: {
-            fontSize: 12,
-            formatter: (params: any) => `$${params.value.toLocaleString()}`,
-          },
-        },
-      ],
-      legend: {
-        enabled: false,
-      },
-      padding: {
-        top: 20,
-        right: 20,
-        bottom: 60,
-        left: 80,
-      },
-    }),
+        ],
+      }) as any,
     [data, title],
   );