Skip to content

Dashboard: Add caching to analytics charts #7804

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 7, 2025
Merged

Dashboard: Add caching to analytics charts #7804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,155 changes: 741 additions & 414 deletions apps/dashboard/src/@/api/analytics.ts
View file
Open in desktop

Large diffs are not rendered by default.

23 changes: 15 additions & 8 deletions apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,10 @@ export default async function Page(props: {
});

const projects = await getProjects(params.team_slug);
const projectsWithTotalWallets = await getProjectsWithAnalytics(projects);
const projectsWithTotalWallets = await getProjectsWithAnalytics(
projects,
authToken,
);

return (
<div className="flex grow flex-col">
Expand Down Expand Up @@ -78,20 +81,24 @@ export default async function Page(props: {

async function getProjectsWithAnalytics(
projects: Project[],
authToken: string,
): Promise<Array<ProjectWithAnalytics>> {
return Promise.all(
projects.map(async (project) => {
try {
const today = new Date();
const thirtyDaysAgo = subDays(today, 30);

const data = await getWalletConnections({
from: thirtyDaysAgo,
period: "all",
projectId: project.id,
teamId: project.teamId,
to: today,
});
const data = await getWalletConnections(
{
from: thirtyDaysAgo,
period: "all",
projectId: project.id,
teamId: project.teamId,
to: today,
},
authToken,
);

let uniqueWalletsConnected = 0;
for (const d of data) {
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/analytics/highlights-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export function TeamHighlightsCard({
activeChart={
selectedChart && selectedChart in chartConfig
? (selectedChart as keyof AggregatedMetrics)
: "totalVolume"
: "activeUsers"
}
aggregateFn={(_data, key) => {
if (key === "activeUsers") {
Expand Down
143 changes: 94 additions & 49 deletions apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/analytics/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
getWalletConnections,
getWalletUsers,
} from "@/api/analytics";
import { getAuthToken } from "@/api/auth-token";
import { getTeamBySlug } from "@/api/team/get-team";
import type {
DurationId,
Expand All @@ -28,6 +29,7 @@ import type {
UserOpStats,
WalletStats,
} from "@/types/analytics";
import { loginRedirect } from "@/utils/redirects";
import { PieChartCard } from "../../../../components/Analytics/PieChartCard";
import { TotalSponsoredChartCardUI } from "../../_components/TotalSponsoredCard";
import { TransactionsChartCardWithChainMapping } from "../../_components/transaction-card-with-chain-mapping";
Expand All @@ -53,6 +55,12 @@ export default async function TeamOverviewPage(props: {
props.searchParams,
]);

const authToken = await getAuthToken();

if (!authToken) {
loginRedirect(`/team/${params.team_slug}/~/analytics`);
}

const team = await getTeamBySlug(params.team_slug);

if (!team) {
Expand Down Expand Up @@ -91,6 +99,7 @@ export default async function TeamOverviewPage(props: {
fallback={<LoadingChartState className="h-[458px] border" />}
>
<AsyncTeamHighlightsCard
authToken={authToken}
selectedChartQueryParam="appHighlights"
interval={interval}
range={range}
Expand All @@ -108,7 +117,11 @@ export default async function TeamOverviewPage(props: {
fallback={<LoadingChartState className="h-[431px] border" />}
searchParamsUsed={["from", "to"]}
>
<AsyncWalletDistributionCard range={range} teamId={team.id} />
<AsyncWalletDistributionCard
range={range}
teamId={team.id}
authToken={authToken}
/>
</ResponsiveSuspense>

<ResponsiveSuspense
Expand All @@ -118,6 +131,7 @@ export default async function TeamOverviewPage(props: {
<AsyncAuthMethodDistributionCard
range={range}
teamId={team.id}
authToken={authToken}
/>
</ResponsiveSuspense>
</div>
Expand All @@ -133,6 +147,7 @@ export default async function TeamOverviewPage(props: {
>
<AsyncTransactionsChartCard
selectedChartQueryParam="client_transactions"
authToken={authToken}
interval={interval}
range={range}
selectedChart={
Expand All @@ -149,6 +164,7 @@ export default async function TeamOverviewPage(props: {
searchParamsUsed={["from", "to", "interval", "userOpUsage"]}
>
<AsyncTotalSponsoredCard
authToken={authToken}
selectedChartQueryParam="userOpUsage"
interval={interval}
range={range}
Expand All @@ -173,21 +189,28 @@ async function AsyncTeamHighlightsCard(props: {
interval: "day" | "week";
selectedChart: string | undefined;
selectedChartQueryParam: string;
authToken: string;
}) {
const [walletUserStatsTimeSeries, universalBridgeUsage] =
await Promise.allSettled([
getWalletUsers({
from: props.range.from,
period: props.interval,
teamId: props.teamId,
to: props.range.to,
}),
getUniversalBridgeUsage({
from: props.range.from,
period: props.interval,
teamId: props.teamId,
to: props.range.to,
}),
getWalletUsers(
{
from: props.range.from,
period: props.interval,
teamId: props.teamId,
to: props.range.to,
},
props.authToken,
),
getUniversalBridgeUsage(
{
from: props.range.from,
period: props.interval,
teamId: props.teamId,
to: props.range.to,
},
props.authToken,
),
]);

if (
Expand Down Expand Up @@ -216,13 +239,17 @@ async function AsyncTeamHighlightsCard(props: {
async function AsyncWalletDistributionCard(props: {
teamId: string;
range: Range;
authToken: string;
}) {
const walletConnections = await getWalletConnections({
from: props.range.from,
period: "all",
teamId: props.teamId,
to: props.range.to,
}).catch(() => undefined);
const walletConnections = await getWalletConnections(
{
from: props.range.from,
period: "all",
teamId: props.teamId,
to: props.range.to,
},
props.authToken,
).catch(() => undefined);

return walletConnections && walletConnections.length > 0 ? (
<WalletDistributionCard data={walletConnections} />
Expand All @@ -237,13 +264,17 @@ async function AsyncWalletDistributionCard(props: {
async function AsyncAuthMethodDistributionCard(props: {
teamId: string;
range: Range;
authToken: string;
}) {
const inAppWalletUsage = await getInAppWalletUsage({
from: props.range.from,
period: "all",
teamId: props.teamId,
to: props.range.to,
}).catch(() => undefined);
const inAppWalletUsage = await getInAppWalletUsage(
{
from: props.range.from,
period: "all",
teamId: props.teamId,
to: props.range.to,
},
props.authToken,
).catch(() => undefined);

return inAppWalletUsage && inAppWalletUsage.length > 0 ? (
<AuthMethodDistributionCard data={inAppWalletUsage} />
Expand All @@ -261,21 +292,28 @@ async function AsyncTransactionsChartCard(props: {
interval: "day" | "week";
selectedChart: string | undefined;
selectedChartQueryParam: string;
authToken: string;
}) {
const [clientTransactionsTimeSeries, clientTransactions] =
await Promise.allSettled([
getClientTransactions({
from: props.range.from,
period: props.interval,
teamId: props.teamId,
to: props.range.to,
}),
getClientTransactions({
from: props.range.from,
period: "all",
teamId: props.teamId,
to: props.range.to,
}),
getClientTransactions(
{
from: props.range.from,
period: props.interval,
teamId: props.teamId,
to: props.range.to,
},
props.authToken,
),
getClientTransactions(
{
from: props.range.from,
period: "all",
teamId: props.teamId,
to: props.range.to,
},
props.authToken,
),
]);

return clientTransactionsTimeSeries.status === "fulfilled" &&
Expand All @@ -301,20 +339,27 @@ async function AsyncTotalSponsoredCard(props: {
interval: "day" | "week";
selectedChart: string | undefined;
selectedChartQueryParam: string;
authToken: string;
}) {
const [userOpUsageTimeSeries, userOpUsage] = await Promise.allSettled([
getUserOpUsage({
from: props.range.from,
period: props.interval,
teamId: props.teamId,
to: props.range.to,
}),
getUserOpUsage({
from: props.range.from,
period: "all",
teamId: props.teamId,
to: props.range.to,
}),
getUserOpUsage(
{
from: props.range.from,
period: props.interval,
teamId: props.teamId,
to: props.range.to,
},
props.authToken,
),
getUserOpUsage(
{
from: props.range.from,
period: "all",
teamId: props.teamId,
to: props.range.to,
},
props.authToken,
),
]);

return userOpUsageTimeSeries.status === "fulfilled" &&
Expand Down
Loading
Loading