feat(dashboard): rpc chart

Author: gregfromstl

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

@@ -1,48 +1,12 @@
 import { fetchAnalytics } from "data/analytics/fetch-analytics";
-
-export interface WalletStats {
-  date: string;
-  uniqueWalletsConnected: number;
-  totalConnections: number;
-  walletType: string;
-}
-
-export interface WalletUserStats {
-  date: string;
-  newUsers: number;
-  returningUsers: number;
-  totalUsers: number;
-}
-
-export interface InAppWalletStats {
-  date: string;
-  authenticationMethod: string;
-  uniqueWalletsConnected: number;
-}
-
-export interface EcosystemWalletStats extends InAppWalletStats { }
-
-export interface UserOpStats {
-  date: string;
-  successful: number;
-  failed: number;
-  sponsoredUsd: number;
-  chainId?: string;
-}
-
-export interface RpcMethodStats {
-  date: string;
-  evmMethod: string;
-  count: number;
-}
-
-export interface AnalyticsQueryParams {
-  clientId?: string;
-  accountId?: string;
-  from?: Date;
-  to?: Date;
-  period?: "day" | "week" | "month" | "year" | "all";
-}
+import type {
+  AnalyticsQueryParams,
+  InAppWalletStats,
+  RpcMethodStats,
+  UserOpStats,
+  WalletStats,
+  WalletUserStats,
+} from "types/analytics";
 
 function buildSearchParams(params: AnalyticsQueryParams): URLSearchParams {
   const searchParams = new URLSearchParams();

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -1,4 +1,3 @@
-import type { UserOpStats } from "@/api/analytics";
 import type { Team } from "@/api/team";
 import {
   type Query,
@@ -9,6 +8,7 @@ import {
 import { THIRDWEB_ANALYTICS_API_HOST, THIRDWEB_API_HOST } from "constants/urls";
 import { useAllChainsData } from "hooks/chains/allChains";
 import invariant from "tiny-invariant";
+import type { UserOpStats } from "types/analytics";
 import { accountKeys, apiKeys, authorizedWallets } from "../cache-keys";
 import { useLoggedInUser } from "./useLoggedInUser";
 

apps/dashboard/src/app/team/[team_slug]/(team)/_components/TotalSponsoredCard.tsx

@@ -1,7 +1,7 @@
-import type { UserOpStats } from "@/api/analytics";
 import { cn } from "@/lib/utils";
 import { defineChain } from "thirdweb";
 import { type ChainMetadata, getChainMetadata } from "thirdweb/chains";
+import type { UserOpStats } from "types/analytics";
 import { EmptyAccountAbstractionChartContent } from "../../../../../components/smart-wallets/AccountAbstractionAnalytics/SponsoredTransactionsChartCard";
 import { BarChart } from "../../../components/Analytics/BarChart";
 import { CombinedBarChartCard } from "../../../components/Analytics/CombinedBarChartCard";

apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx

@@ -10,7 +10,7 @@ import type {
   InAppWalletStats,
   WalletStats,
   WalletUserStats,
-} from "@/api/analytics";
+} from "types/analytics";
 
 import {
   type DurationId,

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx

@@ -1,5 +1,4 @@
 "use client";
-import type { EcosystemWalletStats } from "@/api/analytics";
 import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
 import {
   type ChartConfig,
@@ -21,6 +20,7 @@ import { format } from "date-fns";
 import { formatTickerNumber } from "lib/format-utils";
 import { useMemo } from "react";
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import type { EcosystemWalletStats } from "types/analytics";
 
 type ChartData = Record<string, number> & {
   time: string; // human readable date

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/Summary.tsx

@@ -1,6 +1,6 @@
-import type { EcosystemWalletStats } from "@/api/analytics";
 import { Stat } from "components/analytics/stat";
 import { ActivityIcon, UserIcon } from "lucide-react";
+import type { EcosystemWalletStats } from "types/analytics";
 
 export function EcosystemWalletsSummary(props: {
   allTimeStats: EcosystemWalletStats[] | undefined;

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx

@@ -1,5 +1,4 @@
 "use client";
-import type { EcosystemWalletStats } from "@/api/analytics";
 import { CopyButton } from "@/components/ui/CopyButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -24,6 +23,7 @@ import {
 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
+import type { EcosystemWalletStats } from "types/analytics";
 import { useEcosystemList } from "../../../hooks/use-ecosystem-list";
 import type { Ecosystem } from "../../../types";
 import { EcosystemWalletsSummary } from "../analytics/components/Summary";

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/RpcMethodBarChartCard/RpcMethodBarChartCard.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BadgeContainer, mobileViewport } from "stories/utils";
+import type { RpcMethodStats } from "types/analytics";
+import { RpcMethodBarChartCardUI } from "./RpcMethodBarChartCardUI";
+
+const meta = {
+  title: "Analytics/RpcMethodBarChartCard",
+  component: Component,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+  },
+};
+
+export const Mobile: Story = {
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+const generateTimeSeriesData = (
+  days: number,
+  methods: string[],
+  emptyData = false,
+) => {
+  const data: RpcMethodStats[] = [];
+  const today = new Date();
+
+  for (let i = days - 1; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(date.getDate() - i);
+
+    for (const method of methods) {
+      data.push({
+        date: date.toISOString(),
+        evmMethod: method,
+        count: emptyData ? 0 : Math.floor(Math.random() * 1000) + 100,
+      });
+    }
+  }
+
+  return data;
+};
+
+const commonMethods = [
+  "eth_call",
+  "eth_getBalance",
+  "eth_getTransactionReceipt",
+  "eth_blockNumber",
+];
+
+function Component() {
+  return (
+    <div className="container space-y-8 py-8">
+      <BadgeContainer label="Normal Usage">
+        <RpcMethodBarChartCardUI
+          rawData={generateTimeSeriesData(30, commonMethods)}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Empty Data">
+        <RpcMethodBarChartCardUI rawData={[]} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Zero Values">
+        <RpcMethodBarChartCardUI
+          rawData={generateTimeSeriesData(30, commonMethods, true)}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Single Method">
+        <RpcMethodBarChartCardUI
+          rawData={generateTimeSeriesData(30, ["eth_call"])}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}

apps/dashboard/src/app/team/components/Analytics/RpcMethodBarChartCard.tsx renamed to apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/RpcMethodBarChartCard/RpcMethodBarChartCardUI.tsx

@@ -1,37 +1,22 @@
-import {
-  Bar,
-  CartesianGrid,
-  BarChart as RechartsBarChart,
-  XAxis,
-  YAxis,
-} from "recharts";
+"use client";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
-  ChartConfig,
+  type ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  AnalyticsQueryParams,
-  getRpcMethodUsage,
-  RpcMethodStats,
-} from "@/api/analytics";
-import { EmptyState } from "./EmptyState";
 import { formatTickerNumber } from "lib/format-utils";
+import {
+  Bar,
+  CartesianGrid,
+  BarChart as RechartsBarChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+import type { RpcMethodStats } from "types/analytics";
+import { EmptyStateCard } from "../../../../components/Analytics/EmptyStateCard";
 
-const chartConfig = {
-  evmMethod: { label: "EVM Method", color: "hsl(var(--chart-1))" },
-  count: { label: "Count", color: "hsl(var(--chart-2))" },
-};
-
-export async function RpcMethodBarChartCard(props: AnalyticsQueryParams) {
-  const rawData = await getRpcMethodUsage(props);
-
-  return <RpcMethodBarChartCardUI rawData={rawData} />;
-}
-
-// Split the UI out for storybook mocking
 export function RpcMethodBarChartCardUI({
   rawData,
 }: { rawData: RpcMethodStats[] }) {
@@ -46,6 +31,28 @@ export function RpcMethodBarChartCardUI({
       );
       dateData[method] = methodData?.count ?? 0;
     }
+
+    // If we have too many methods to display well, add "other" and group the lowest keys for each time period
+    if (uniqueMethods.length > 5) {
+      // If we haven't added "other" as a key yet, add it
+      if (!uniqueMethods.includes("Other")) {
+        uniqueMethods.push("Other");
+      }
+
+      // Sort the methods by their count for the time period
+      const sortedMethods = uniqueMethods
+        .filter((m) => m !== "Other")
+        .sort(
+          (a, b) =>
+            ((dateData[b] as number) ?? 0) - ((dateData[a] as number) ?? 0),
+        );
+
+      dateData.Other = 0;
+      for (const method of sortedMethods.slice(5, sortedMethods.length)) {
+        dateData.Other += (dateData[method] as number) ?? 0;
+        delete dateData[method];
+      }
+    }
     return dateData;
   });
 
@@ -56,8 +63,13 @@ export function RpcMethodBarChartCardUI({
     };
   }
 
-  if (rawData.length === 0 || rawData.every((d) => d.count === 0)) {
-    return <EmptyState />;
+  if (
+    data.length === 0 ||
+    data.every((date) =>
+      Object.keys(date).every((k) => k === "date" || date[k] === 0),
+    )
+  ) {
+    return <EmptyStateCard metric="RPC" link="https://portal.thirdweb.com/" />;
   }
 
   return (
@@ -69,9 +81,7 @@ export function RpcMethodBarChartCardUI({
       </CardHeader>
       <CardContent className="px-2 sm:p-6 sm:pl-0">
         <ChartContainer
-          config={{
-            ...chartConfig,
-          }}
+          config={config}
           className="aspect-auto h-[250px] w-full pt-6"
         >
           <RechartsBarChart
@@ -106,7 +116,6 @@ export function RpcMethodBarChartCardUI({
             <ChartTooltip
               content={
                 <ChartTooltipContent
-                  className="w-[200px]"
                   labelFormatter={(value) => {
                     return new Date(value).toLocaleDateString("en-US", {
                       month: "short",
@@ -125,8 +134,13 @@ export function RpcMethodBarChartCardUI({
                 key={method}
                 stackId="a"
                 dataKey={method}
-                radius={4}
-                fill={`hsl(var(--chart-${idx}))`}
+                radius={[
+                  idx === uniqueMethods.length - 1 ? 4 : 0,
+                  idx === uniqueMethods.length - 1 ? 4 : 0,
+                  idx === 0 ? 4 : 0,
+                  idx === 0 ? 4 : 0,
+                ]}
+                fill={`hsl(var(--chart-${idx + 1}))`}
               />
             ))}
           </RechartsBarChart>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/RpcMethodBarChartCard/index.tsx

@@ -0,0 +1,26 @@
+import { getRpcMethodUsage } from "@/api/analytics";
+import { LoadingChartState } from "components/analytics/empty-chart-state";
+import { Suspense } from "react";
+import type { AnalyticsQueryParams } from "types/analytics";
+import { RpcMethodBarChartCardUI } from "./RpcMethodBarChartCardUI";
+
+export function RpcMethodBarChartCard(props: AnalyticsQueryParams) {
+  return (
+    // TODO: Add better LoadingChartState
+    <Suspense
+      fallback={
+        <div className="h-[400px]">
+          <LoadingChartState />
+        </div>
+      }
+    >
+      <RpcMethodBarChartCardAsync {...props} />
+    </Suspense>
+  );
+}
+
+async function RpcMethodBarChartCardAsync(props: AnalyticsQueryParams) {
+  const rawData = await getRpcMethodUsage(props);
+
+  return <RpcMethodBarChartCardUI rawData={rawData} />;
+}