feat: add chart for wallet and tx count (#6134)

Co-authored-by: = <=>

Author: vernonjohnson

apps/dashboard/src/app/(dashboard)/hackweek/[chain_id]/[address]/components/TimelineOverview.tsx

@@ -1,116 +1,75 @@
 import { ThirdwebAreaChart } from "@/components/blocks/charts/area-chart";
-import {} from "@/components/ui/card";
-import {} from "@/components/ui/table";
-import { format } from "date-fns";
-import {} from "lucide-react";
-import type { ChainMetadata } from "thirdweb/chains";
 import type { TransactionDetails } from "../hooks/useGetRecentTransactions";
 
 interface TimelineOverviewProps {
   transactions: TransactionDetails[];
   isLoading: boolean;
 }
 
-// function parseTransactions(args: {
-//   address: string;
-//   transactions: TransactionDetails[];
-// }) {
-//   const { address, transactions } = args;
-//   const addressLower = address.toLowerCase();
-
-//   const numTransactionsDaily: Record<string, number> = {};
-//   const numContractsDaily: Record<string, number> = {};
-//   const topContracts: Record<string, number> = {};
-
-//   for (const transaction of transactions) {
-//     const date = format(transaction.date, "yyyy-MM-dd");
-//     numTransactionsDaily[date] = (numTransactionsDaily[date] || 0) + 1;
-//     numContractsDaily[date] = (numContractsDaily[date] || 0) + 1;
-
-//     if (transaction.from === addressLower) {
-//       topContracts[transaction.from] =
-//         (topContracts[transaction.from] || 0) + 1;
-//     }
-//   }
-
-//   return transactions.reduce(
-//     (acc, tx) => {
-//       const date = format(tx.date, "yyyy-MM-dd");
-//       acc[date] = (acc[date] || 0) + 1;
-//       return acc;
-//     },
-//     {} as Record<string, number>,
-//   );
-// }
+function getDayKey(date: Date) {
+  return date.toDateString().split("T")[0];
+}
 
 export function TimelineOverview({
   transactions,
   isLoading,
 }: TimelineOverviewProps) {
-  // Process transactions into daily counts
-  const data = (() => {
-    const time = transactions.map((tx) => tx.date);
+  const aggResults = transactions.reduce(
+    (
+      agg: {
+        [key: string]: {
+          time: Date;
+          transactions: number;
+          wallets: Set<string>;
+        };
+      },
+      val: TransactionDetails,
+    ) => {
+      const day = getDayKey(val.date);
+      if (!day) return agg;
+      if (agg[day] === undefined) {
+        agg[day] = {
+          time: val.date,
+          transactions: 1,
+          wallets: new Set([val.to as string]),
+        };
+      } else {
+        agg[day] = {
+          time: val.date,
+          transactions: agg[day].transactions + 1,
+          wallets: agg[day].wallets.add(val.to as string),
+        };
+      }
+      return agg;
+    },
+    {},
+  );
 
-    return time.map((time) => {
-      const tx = transactions.find((tx) => tx.date === time);
+  const data = Object.values(aggResults)
+    .map((val) => {
       return {
-        time,
-        total: tx ? 1 : 0,
+        time: val.time,
+        transactions: val.transactions,
+        wallets: val.wallets.size,
       };
-    });
-
-    // Sum transactions by day.
-    // const txDates = transactions.reduce(
-    //   (acc, tx) => {
-    //     const date = format(tx.date, "yyyy-MM-dd");
-    //     const existingEntry = acc.find((entry) => entry.date === date);
-    //     if (existingEntry) {
-    //       existingEntry.total += 1;
-    //     } else {
-    //       acc.push({ date, total: 1 });
-    //     }
-    //     return acc;
-    //   },
-    //   [] as { date: string; total: number }[],
-    // );
-    // return txDates;
-    // console.log("[DEBUG] txDates:", txDates);
-
-    // // Get min and max dates.
-    // const dates = txDates.map((d) => new Date(d.date));
-    // const minDate = new Date(Math.min(...dates.map((d) => d.getTime())));
-    // const maxDate = new Date(Math.max(...dates.map((d) => d.getTime())));
-
-    // // Create array of all dates between min and max
-    // const allDates: { date: string; total: number }[] = [];
-    // const currentDate = new Date(minDate);
-    // while (currentDate <= maxDate) {
-    //   const dateStr = format(currentDate, "yyyy-MM-dd");
-    //   const existingDate = txDates.find((d) => d.date === dateStr);
-    //   allDates.push({
-    //     date: dateStr,
-    //     total: existingDate?.total || 0,
-    //   });
-    //   currentDate.setDate(currentDate.getDate() + 1);
-    // }
-
-    // return allDates;
-  })();
-
+    })
+    .sort((a, b) => a.time.getTime() - b.time.getTime());
   return (
     <ThirdwebAreaChart
-      chartConfig={{
-        total: {
+      config={{
+        transactions: {
           label: "Transactions",
           color: "hsl(var(--chart-1))",
         },
+        wallets: {
+          label: "Unique Wallets",
+          color: "hsl(var(--chart-2))",
+        },
       }}
       data={data || []}
       isPending={isLoading}
       showLegend
       chartClassName="aspect-[1.5] lg:aspect-[4.5]"
-      // activeKey="total"
-      // emptyChartContent={<>NO CONTENT</>}
     />
   );
 }

apps/dashboard/src/app/(dashboard)/hackweek/[chain_id]/[address]/components/WalletDashboard.tsx

@@ -36,13 +36,10 @@ export function WalletDashboard(props: {
           nfts={nfts}
         />
       )}
-
-      {/* <TimelineOverview
-        chain={props.chain}
-        address={props.address}
+      <TimelineOverview
         transactions={transactions}
         isLoading={isLoadingActivity}
-      /> */}
+      />
       <ActivityOverview
         chain={props.chain}
         transactions={transactions}