feat: add Engine Cloud analytics to project overview

Author: arcoraven

.gitignore

@@ -16,6 +16,7 @@ yalc.lock
 ./build/
 playwright-report/
 .env/
+.pnpm-store/
 
 # codecov binary
 codecov

apps/dashboard/src/@/api/analytics.ts

@@ -3,6 +3,7 @@ import "server-only";
 import type {
   AnalyticsQueryParams,
   EcosystemWalletStats,
+  EngineCloudStats,
   InAppWalletStats,
   RpcMethodStats,
   TransactionStats,
@@ -431,3 +432,24 @@ export async function getUniversalBridgeWalletUsage(args: {
   const json = await res.json();
   return json.data as UniversalBridgeWalletStats[];
 }
+
+export async function getEngineCloudMethodUsage(
+  params: AnalyticsQueryParams,
+): Promise<EngineCloudStats[]> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/engine-cloud/requests?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    },
+  );
+
+  if (res?.status !== 200) {
+    console.error("Failed to fetch Engine Cloud method usage");
+    return [];
+  }
+
+  const json = await res.json();
+  return json.data as EngineCloudStats[];
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCard.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BadgeContainer } from "stories/utils";
+import type { EngineCloudStats } from "types/analytics";
+import { EngineCloudBarChartCardUI } from "./EngineCloudBarChartCardUI";
+
+const meta = {
+  title: "Analytics/EngineCloudBarChartCard",
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+  },
+};
+
+const generateTimeSeriesData = (days: number, pathnames: string[]) => {
+  const data: EngineCloudStats[] = [];
+  const today = new Date();
+
+  for (let i = days - 1; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(date.getDate() - i);
+    const dateStr = date.toISOString().split("T")[0];
+    for (const pathname of pathnames) {
+      data.push({
+        date: dateStr,
+        chainId: "84532",
+        pathname,
+        totalRequests: Math.floor(Math.random() * 1000) + 100,
+      });
+    }
+  }
+
+  return data;
+};
+
+function Component() {
+  return (
+    <div className="container max-w-6xl space-y-10 py-10">
+      <BadgeContainer label="Multiple Pathnames">
+        <EngineCloudBarChartCardUI
+          rawData={generateTimeSeriesData(30, [
+            "/v1/write/transaction",
+            "/v1/sign/transaction",
+            "/v1/sign/message",
+          ])}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx

@@ -0,0 +1,141 @@
+"use client";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { formatDate } from "date-fns";
+import { useMemo } from "react";
+import {
+  Bar,
+  CartesianGrid,
+  BarChart as RechartsBarChart,
+  XAxis,
+} from "recharts";
+import type { EngineCloudStats } from "types/analytics";
+import { EmptyStateCard } from "../../../../../components/Analytics/EmptyStateCard";
+
+export function EngineCloudBarChartCardUI({
+  rawData,
+}: { rawData: EngineCloudStats[] }) {
+  const { data, pathnames, chartConfig, isAllEmpty } = useMemo(() => {
+    // Dynamically collect all unique pathnames
+    const pathnameSet = new Set<string>();
+    for (const item of rawData) {
+      // Ignore empty pathname ''.
+      if (item.pathname) {
+        pathnameSet.add(item.pathname);
+      }
+    }
+    const pathnames = Array.from(pathnameSet);
+
+    // Group by date, then by pathname
+    const dateMap = new Map<string, Record<string, number>>();
+    for (const { date, pathname, totalRequests } of rawData) {
+      const map = dateMap.get(date) ?? {};
+      map[pathname] = Number(totalRequests) || 0;
+      dateMap.set(date, map);
+    }
+
+    // Build data array for recharts
+    const data = Array.from(dateMap.entries()).map(([date, value]) => {
+      let total = 0;
+      for (const pathname of pathnames) {
+        if (!value[pathname]) value[pathname] = 0;
+        total += value[pathname];
+      }
+      return { date, ...value, total };
+    });
+
+    // Chart config
+    const chartConfig: ChartConfig = {};
+    for (const pathname of pathnames) {
+      chartConfig[pathname] = { label: pathname };
+    }
+
+    return {
+      data,
+      pathnames,
+      chartConfig,
+      isAllEmpty: data.every((d) => d.total === 0),
+    };
+  }, [rawData]);
+
+  console.log("[DEBUG] data:", data);
+
+  if (data.length === 0 || isAllEmpty) {
+    return <EmptyStateCard metric="RPC" link="https://portal.thirdweb.com/" />;
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0">
+        <div className="flex flex-1 flex-col justify-center gap-1 p-6">
+          <CardTitle className="font-semibold text-lg">
+            Engine Cloud Requests
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6 sm:pl-0">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full pt-6"
+        >
+          <RechartsBarChart
+            accessibilityLayer
+            data={data}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value: string) => {
+                const date = new Date(value);
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                });
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(d) => formatDate(new Date(d), "MMM d")}
+                  valueFormatter={(_value, _item) => {
+                    const value = typeof _value === "number" ? _value : 0;
+                    return <span className="inline-flex gap-1.5">{value}</span>;
+                  }}
+                />
+              }
+            />
+            {pathnames.map((pathname, idx) => (
+              <Bar
+                key={pathname}
+                stackId="a"
+                dataKey={pathname}
+                radius={[
+                  idx === pathnames.length - 1 ? 4 : 0,
+                  idx === pathnames.length - 1 ? 4 : 0,
+                  idx === 0 ? 4 : 0,
+                  idx === 0 ? 4 : 0,
+                ]}
+                fill={`hsl(var(--chart-${idx + 1}))`}
+                strokeWidth={1}
+                className="stroke-background"
+              />
+            ))}
+          </RechartsBarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}