Skip to content

Commit 8d732e2

Browse files
catalyst17catalyst17
committed
feat: timeline overview wip
1 parent 0db874c commit 8d732e2

File tree

2 files changed

+78
-87
lines changed

2 files changed

+78
-87
lines changed

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

Lines changed: 75 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -6,110 +6,97 @@ import {} from "lucide-react";
66
import type { ChainMetadata } from "thirdweb/chains";
77
import type { TransactionDetails } from "../hooks/useGetRecentTransactions";
88

9-
interface Contract {
10-
address: string;
11-
name: string;
12-
lastInteraction: string;
13-
}
14-
159
interface TimelineOverviewProps {
16-
chain: ChainMetadata;
1710
transactions: TransactionDetails[];
18-
address: string;
19-
contracts: Contract[];
2011
isLoading: boolean;
2112
}
2213

23-
function parseTransactions(args: {
24-
address: string;
25-
transactions: TransactionDetails[];
26-
}) {
27-
const { address, transactions } = args;
28-
const addressLower = address.toLowerCase();
14+
// function parseTransactions(args: {
15+
// address: string;
16+
// transactions: TransactionDetails[];
17+
// }) {
18+
// const { address, transactions } = args;
19+
// const addressLower = address.toLowerCase();
2920

30-
const numTransactionsDaily: Record<string, number> = {};
31-
const numContractsDaily: Record<string, number> = {};
32-
const topContracts: Record<string, number> = {};
21+
// const numTransactionsDaily: Record<string, number> = {};
22+
// const numContractsDaily: Record<string, number> = {};
23+
// const topContracts: Record<string, number> = {};
3324

34-
for (const transaction of transactions) {
35-
const date = format(transaction.date, "yyyy-MM-dd");
36-
numTransactionsDaily[date] = (numTransactionsDaily[date] || 0) + 1;
37-
numContractsDaily[date] = (numContractsDaily[date] || 0) + 1;
25+
// for (const transaction of transactions) {
26+
// const date = format(transaction.date, "yyyy-MM-dd");
27+
// numTransactionsDaily[date] = (numTransactionsDaily[date] || 0) + 1;
28+
// numContractsDaily[date] = (numContractsDaily[date] || 0) + 1;
3829

39-
if (transaction.from === addressLower) {
40-
topContracts[transaction.from] =
41-
(topContracts[transaction.from] || 0) + 1;
42-
}
43-
}
30+
// if (transaction.from === addressLower) {
31+
// topContracts[transaction.from] =
32+
// (topContracts[transaction.from] || 0) + 1;
33+
// }
34+
// }
4435

45-
return transactions.reduce(
46-
(acc, tx) => {
47-
const date = format(tx.date, "yyyy-MM-dd");
48-
acc[date] = (acc[date] || 0) + 1;
49-
return acc;
50-
},
51-
{} as Record<string, number>,
52-
);
53-
}
36+
// return transactions.reduce(
37+
// (acc, tx) => {
38+
// const date = format(tx.date, "yyyy-MM-dd");
39+
// acc[date] = (acc[date] || 0) + 1;
40+
// return acc;
41+
// },
42+
// {} as Record<string, number>,
43+
// );
44+
// }
5445

5546
export function TimelineOverview({
56-
chain,
5747
transactions,
58-
address,
59-
contracts,
6048
isLoading,
6149
}: TimelineOverviewProps) {
6250
// Process transactions into daily counts
63-
// const data = [
64-
// { date: "2024-03-01", total: 5 },
65-
// { date: "2024-03-02", total: 8 },
66-
// { date: "2024-03-03", total: 3 },
67-
// { date: "2024-03-04", total: 12 },
68-
// { date: "2024-03-05", total: 7 },
69-
// { date: "2024-03-06", total: 15 },
70-
// { date: "2024-03-07", total: 9 },
71-
// ];
7251
const data = (() => {
52+
const time = transactions.map((tx) => tx.date);
53+
54+
return time.map((time) => {
55+
const tx = transactions.find((tx) => tx.date === time);
56+
return {
57+
time,
58+
total: tx ? 1 : 0,
59+
};
60+
});
61+
7362
// Sum transactions by day.
74-
const txDates = transactions.reduce(
75-
(acc, tx) => {
76-
const date = format(tx.date, "yyyy-MM-dd");
77-
const existingEntry = acc.find((entry) => entry.date === date);
78-
if (existingEntry) {
79-
existingEntry.total += 1;
80-
} else {
81-
acc.push({ date, total: 1 });
82-
}
83-
return acc;
84-
},
85-
[] as { date: string; total: number }[],
86-
);
87-
return txDates;
88-
console.log("[DEBUG] txDates:", txDates);
63+
// const txDates = transactions.reduce(
64+
// (acc, tx) => {
65+
// const date = format(tx.date, "yyyy-MM-dd");
66+
// const existingEntry = acc.find((entry) => entry.date === date);
67+
// if (existingEntry) {
68+
// existingEntry.total += 1;
69+
// } else {
70+
// acc.push({ date, total: 1 });
71+
// }
72+
// return acc;
73+
// },
74+
// [] as { date: string; total: number }[],
75+
// );
76+
// return txDates;
77+
// console.log("[DEBUG] txDates:", txDates);
8978

90-
// Get min and max dates.
91-
const dates = txDates.map((d) => new Date(d.date));
92-
const minDate = new Date(Math.min(...dates.map((d) => d.getTime())));
93-
const maxDate = new Date(Math.max(...dates.map((d) => d.getTime())));
79+
// // Get min and max dates.
80+
// const dates = txDates.map((d) => new Date(d.date));
81+
// const minDate = new Date(Math.min(...dates.map((d) => d.getTime())));
82+
// const maxDate = new Date(Math.max(...dates.map((d) => d.getTime())));
9483

95-
// Create array of all dates between min and max
96-
const allDates: { date: string; total: number }[] = [];
97-
const currentDate = new Date(minDate);
98-
while (currentDate <= maxDate) {
99-
const dateStr = format(currentDate, "yyyy-MM-dd");
100-
const existingDate = txDates.find((d) => d.date === dateStr);
101-
allDates.push({
102-
date: dateStr,
103-
total: existingDate?.total || 0,
104-
});
105-
currentDate.setDate(currentDate.getDate() + 1);
106-
}
84+
// // Create array of all dates between min and max
85+
// const allDates: { date: string; total: number }[] = [];
86+
// const currentDate = new Date(minDate);
87+
// while (currentDate <= maxDate) {
88+
// const dateStr = format(currentDate, "yyyy-MM-dd");
89+
// const existingDate = txDates.find((d) => d.date === dateStr);
90+
// allDates.push({
91+
// date: dateStr,
92+
// total: existingDate?.total || 0,
93+
// });
94+
// currentDate.setDate(currentDate.getDate() + 1);
95+
// }
10796

108-
return allDates;
97+
// return allDates;
10998
})();
11099

111-
console.log("[DEBUG] data:", data);
112-
113100
return (
114101
<ThirdwebAreaChart
115102
chartConfig={{
@@ -118,9 +105,12 @@ export function TimelineOverview({
118105
color: "hsl(var(--chart-1))",
119106
},
120107
}}
121-
data={data}
122-
activeKey="total"
123-
emptyChartContent={<>NO CONTENT</>}
108+
data={data || []}
109+
isPending={isLoading}
110+
showLegend
111+
chartClassName="aspect-[1.5] lg:aspect-[4.5]"
112+
// activeKey="total"
113+
// emptyChartContent={<>NO CONTENT</>}
124114
/>
125115
);
126116
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,12 @@ export function WalletDashboard(props: {
3737
/>
3838
)}
3939

40-
<TimelineOverview
40+
{/* <TimelineOverview
4141
chain={props.chain}
4242
address={props.address}
4343
transactions={transactions}
44-
/>
44+
isLoading={isLoadingActivity}
45+
/> */}
4546
<ActivityOverview
4647
chain={props.chain}
4748
transactions={transactions}

0 commit comments

Comments
 (0)