From 17957e118b8368acce5e33ddabb0d35988d2f9aa Mon Sep 17 00:00:00 2001
From: "py1u.dev" <py1u.dev@gmail.com>
Date: Sat, 10 Aug 2024 16:56:28 -0700
Subject: [PATCH 1/4] add distribution labels

---
 .../admin/services/statistics/Chart.jsx       | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/admin/services/statistics/Chart.jsx b/src/components/admin/services/statistics/Chart.jsx
index 42c2314fa..16768d8a8 100644
--- a/src/components/admin/services/statistics/Chart.jsx
+++ b/src/components/admin/services/statistics/Chart.jsx
@@ -3,7 +3,6 @@
 import * as React from "react";
 import { Label, Pie, PieChart } from "recharts";
 import { ROLES } from "@/data/admin/Statistics";
-
 import { Card, CardContent } from "@/components/ui/card";
 import {
   ChartContainer,
@@ -12,22 +11,22 @@ import {
 } from "@/components/ui/chart";
 
 const Chart = ({ title, data }) => {
-  const chartData = Object.entries(data).map(([type, value]) => ({
-    type: ROLES[type].label,
-    value: value,
-    className: ROLES[type].className,
-    fill: ROLES[type].fill,
-  }));
-
-  const chartConfig = Object.entries(data).map(([type, value]) => {
-    const label = ROLES[type].label;
+  const chartData = Object.entries(data)
+    .filter(([type]) => ROLES[type])
+    .map(([type, value]) => ({
+      type: ROLES[type].label,
+      value: value,
+      className: ROLES[type].className,
+      fill: ROLES[type].fill,
+    }));
 
-    return {
+  const chartConfig = Object.entries(data)
+    .filter(([type]) => ROLES[type])
+    .map(([type, value]) => ({
       label: {
-        label: label,
+        label: ROLES[type].label,
       },
-    };
-  });
+    }));
 
   const total = React.useMemo(() => {
     return chartData.reduce((acc, curr) => acc + curr.value, 0);
@@ -35,6 +34,13 @@ const Chart = ({ title, data }) => {
 
   return (
     <Card className="flex flex-col">
+      <div className="flex flex-col p-6">
+        {chartData.map((entry, index) => (
+          <div key={index} className="flex items-center">
+            <span className="text-md font-medium">{`${entry.type}: ${entry.value}`}</span>
+          </div>
+        ))}
+      </div>
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={chartConfig}

From 30959a5241e7332c644b89e61c9dbfb537b422f0 Mon Sep 17 00:00:00 2001
From: "py1u.dev" <py1u.dev@gmail.com>
Date: Thu, 12 Sep 2024 17:12:30 -0700
Subject: [PATCH 2/4] update: distribution labels with numbers added to chart

---
 .../admin/services/statistics/Chart.jsx       | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/admin/services/statistics/Chart.jsx b/src/components/admin/services/statistics/Chart.jsx
index 16768d8a8..0f02fdce5 100644
--- a/src/components/admin/services/statistics/Chart.jsx
+++ b/src/components/admin/services/statistics/Chart.jsx
@@ -32,19 +32,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">
-      <div className="flex flex-col p-6">
-        {chartData.map((entry, index) => (
-          <div key={index} className="flex items-center">
-            <span className="text-md font-medium">{`${entry.type}: ${entry.value}`}</span>
-          </div>
-        ))}
-      </div>
-      <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
@@ -55,8 +64,9 @@ const Chart = ({ title, data }) => {
               data={chartData}
               dataKey="value"
               nameKey="type"
-              innerRadius={60}
+              innerRadius={70}
               strokeWidth={5}
+              label={<CustomLabel />}
             >
               <Label
                 content={({ viewBox }) => {

From 58639ccc29da07382733a62263197b7ce7333988 Mon Sep 17 00:00:00 2001
From: "py1u.dev" <py1u.dev@gmail.com>
Date: Thu, 12 Sep 2024 17:14:46 -0700
Subject: [PATCH 3/4] refactor: remove top margin spacing for Tabs.jsx and
 Charts.jsx

---
 src/components/admin/services/statistics/Charts.jsx | 2 +-
 src/components/admin/services/statistics/Tabs.jsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/admin/services/statistics/Charts.jsx b/src/components/admin/services/statistics/Charts.jsx
index a289a9257..3f3e563df 100644
--- a/src/components/admin/services/statistics/Charts.jsx
+++ b/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(([title, data], index) => (
         <Chart key={index} title={title} data={data} />
       ))}
diff --git a/src/components/admin/services/statistics/Tabs.jsx b/src/components/admin/services/statistics/Tabs.jsx
index dc1a8b531..09b188872 100644
--- a/src/components/admin/services/statistics/Tabs.jsx
+++ b/src/components/admin/services/statistics/Tabs.jsx
@@ -3,7 +3,7 @@ import Tab from "./Tab";
 const Tabs = ({ events }) => {
   return (
     <>
-      <div className="mt-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} />
         ))}

From 51934051217864f9efd2d8a88f51a0eac97be76b Mon Sep 17 00:00:00 2001
From: "py1u.dev" <py1u.dev@gmail.com>
Date: Thu, 12 Sep 2024 17:15:57 -0700
Subject: [PATCH 4/4] feat: create chart legend component for statistics page

---
 .../admin/services/statistics/ChartLegend.jsx    | 16 ++++++++++++++++
 .../admin/services/statistics/Statistics.jsx     |  3 ++-
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 src/components/admin/services/statistics/ChartLegend.jsx

diff --git a/src/components/admin/services/statistics/ChartLegend.jsx b/src/components/admin/services/statistics/ChartLegend.jsx
new file mode 100644
index 000000000..fdbd8dc42
--- /dev/null
+++ b/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;
diff --git a/src/components/admin/services/statistics/Statistics.jsx b/src/components/admin/services/statistics/Statistics.jsx
index d39913ae2..fc30de6dc 100644
--- a/src/components/admin/services/statistics/Statistics.jsx
+++ b/src/components/admin/services/statistics/Statistics.jsx
@@ -6,7 +6,7 @@ import Loading from "@/components/Loading";
 import { api } from "@/utils/api";
 
 import Charts from "./Charts";
-
+import ChartLegend from "@/components/admin/services/statistics/ChartLegend";
 const Statistics = () => {
   const [counts, setCounts] = useState(null);
 
@@ -25,6 +25,7 @@ const Statistics = () => {
       ) : (
         <div>
           <Tabs events={counts.events} />
+          <ChartLegend />
           <Charts counts={counts.users} />
         </div>
       )}