[PRO-137] Add indexer and RPC charts in project overview page (#8464)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the chart components in the dashboard by updating properties for better data visualization and integrating new functionalities for displaying RPC and status code requests.

### Detailed summary
- Updated `xAxis` property from `sameDay` to `showHour` in `rate-graph.tsx` and `count-graph.tsx`.
- Increased height of `Card` in `RpcMethodBarChartCardUI.tsx`.
- Changed title and description handling in `RequestsByStatusGraph.tsx`.
- Added `className` prop to `ThirdwebBarChart` component.
- Replaced `RequestsGraph` with `RPCRequestsChartUI` in `RPCAnalytics.tsx`.
- Introduced a new component `TotalValueChartHeader` for displaying total values.
- Updated `RequestsGraph` to include a breakdown by hour.
- Added asynchronous functions for fetching indexer and RPC request data in `page.tsx`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/charts/area-chart.tsx

@@ -1,12 +1,15 @@
 "use client";
 
 import { format } from "date-fns";
+import { ArrowUpRightIcon } from "lucide-react";
+import Link from "next/link";
 import { useMemo } from "react";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
   EmptyChartState,
   LoadingChartState,
 } from "@/components/analytics/empty-chart-state";
+import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -23,6 +26,7 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart";
 import { cn } from "@/lib/utils";
+import { SkeletonContainer } from "../../ui/skeleton";
 
 type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
   header?: {
@@ -40,7 +44,7 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
 
   yAxis?: boolean;
   xAxis?: {
-    sameDay?: boolean;
+    showHour?: boolean;
   };
 
   variant?: "stacked" | "individual";
@@ -112,7 +116,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
                 tickFormatter={(value) =>
                   format(
                     new Date(value),
-                    props.xAxis?.sameDay ? "MMM dd, HH:mm" : "MMM dd",
+                    props.xAxis?.showHour ? "MMM dd, HH:mm" : "MMM dd",
                   )
                 }
                 tickLine={false}
@@ -189,3 +193,49 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
     </Card>
   );
 }
+
+export function TotalValueChartHeader(props: {
+  total: number;
+  title: string;
+  isPending: boolean;
+  viewMoreLink: string | undefined;
+}) {
+  return (
+    <div className="space-y-1 p-6 flex justify-between items-start gap-3">
+      <div>
+        <SkeletonContainer
+          loadedData={!props.isPending ? props.total : undefined}
+          skeletonData={100}
+          render={(value) => {
+            return (
+              <p className="text-3xl font-semibold tracking-tight">
+                {compactNumberFormatter.format(value)}
+              </p>
+            );
+          }}
+        />
+
+        <h3 className="text-muted-foreground">{props.title}</h3>
+      </div>
+
+      {props.viewMoreLink && (
+        <Button
+          asChild
+          size="sm"
+          variant="outline"
+          className="gap-2 rounded-full text-muted-foreground hover:text-foreground"
+        >
+          <Link href={props.viewMoreLink}>
+            <span>View More</span>
+            <ArrowUpRightIcon className="size-4" />
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+}
+
+const compactNumberFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 2,
+});

apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx

@@ -44,6 +44,7 @@ type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
   toolTipValueFormatter?: (value: unknown) => React.ReactNode;
   hideLabel?: boolean;
   emptyChartState?: React.ReactElement;
+  className?: string;
 };
 
 export function ThirdwebBarChart<TConfig extends ChartConfig>(
@@ -55,7 +56,7 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
     props.variant || configKeys.length > 4 ? "stacked" : "grouped";
 
   return (
-    <Card>
+    <Card className={props.className}>
       {props.header && (
         <CardHeader>
           <CardTitle className={cn("mb-2", props.header.titleClassName)}>

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/components/count-graph.tsx

@@ -57,7 +57,7 @@ export function CountGraph(props: {
         return format(label, "MMM dd, HH:mm");
       }}
       xAxis={{
-        sameDay: true,
+        showHour: true,
       }}
       yAxis
     />

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/components/rate-graph.tsx

@@ -57,7 +57,7 @@ export function RateGraph(props: {
         return format(label, "MMM dd, HH:mm");
       }}
       xAxis={{
-        sameDay: true,
+        showHour: true,
       }}
       yAxis
     />

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

@@ -116,7 +116,7 @@ export function RpcMethodBarChartCardUI({
       </CardHeader>
       <CardContent className="px-2 sm:p-6 sm:pl-0">
         <ChartContainer
-          className="aspect-auto h-[250px] w-full pt-6"
+          className="aspect-auto h-[275px] w-full pt-6"
           config={chartConfig}
         >
           <RechartsBarChart

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/gateway/indexer/components/InsightAnalytics.tsx

@@ -183,9 +183,8 @@ export async function InsightAnalytics(props: {
           ) : (
             <RequestsByStatusGraph
               data={"data" in statusCodesData ? statusCodesData.data : []}
-              description="The number of requests by status code over time."
               isPending={false}
-              title="Requests by Status Code"
+              viewMoreLink={undefined}
             />
           )}
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/gateway/indexer/components/RequestsByStatusGraph.tsx

@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import { shortenLargeNumber } from "thirdweb/utils";
 import type { InsightStatusCodeStats } from "@/api/analytics";
 import { EmptyChartState } from "@/components/analytics/empty-chart-state";
+import { TotalValueChartHeader } from "@/components/blocks/charts/area-chart";
 import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
 import type { ChartConfig } from "@/components/ui/chart";
 
@@ -15,11 +16,14 @@ const defaultLabel = 200;
 export function RequestsByStatusGraph(props: {
   data: InsightStatusCodeStats[];
   isPending: boolean;
-  title: string;
-  description: string;
+  viewMoreLink: string | undefined;
 }) {
   const topStatusCodesToShow = 10;
 
+  const total = useMemo(() => {
+    return props.data.reduce((acc, curr) => acc + curr.totalRequests, 0);
+  }, [props.data]);
+
   const { chartConfig, chartData } = useMemo(() => {
     const _chartConfig: ChartConfig = {};
     const _chartDataMap: Map<string, ChartData> = new Map();
@@ -90,17 +94,15 @@ export function RequestsByStatusGraph(props: {
 
   return (
     <ThirdwebBarChart
-      chartClassName="aspect-[1.5] lg:aspect-[3.5]"
+      chartClassName="aspect-auto h-[275px]"
       config={chartConfig}
       customHeader={
-        <div className="relative px-6 pt-6">
-          <h3 className="mb-0.5 font-semibold text-xl tracking-tight">
-            {props.title}
-          </h3>
-          <p className="mb-3 text-muted-foreground text-sm">
-            {props.description}
-          </p>
-        </div>
+        <TotalValueChartHeader
+          isPending={props.isPending}
+          total={total}
+          title="Indexer Requests"
+          viewMoreLink={props.viewMoreLink}
+        />
       }
       data={chartData}
       emptyChartState={<EmptyChartState type="bar" />}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/gateway/rpc/components/RequestsGraph.tsx

@@ -1,14 +1,34 @@
 "use client";
 
-import { format } from "date-fns";
-import { shortenLargeNumber } from "thirdweb/utils";
+import { differenceInCalendarDays, format } from "date-fns";
+import { useMemo } from "react";
 import type { RpcUsageTypeStats } from "@/api/analytics";
-import { ThirdwebAreaChart } from "@/components/blocks/charts/area-chart";
+import {
+  ThirdwebAreaChart,
+  TotalValueChartHeader,
+} from "@/components/blocks/charts/area-chart";
+
+export function RPCRequestsChartUI(props: {
+  data: RpcUsageTypeStats[];
+  viewMoreLink: string | undefined;
+}) {
+  const total = useMemo(() => {
+    return props.data.reduce((acc, curr) => acc + curr.count, 0);
+  }, [props.data]);
+
+  const showBreakdownByHour = useMemo(() => {
+    if (props.data.length === 0) return true;
+    const firstData = props.data[0];
+    const lastData = props.data[props.data.length - 1];
+    if (!firstData || !lastData) return true;
+    const firstDate = new Date(firstData.date);
+    const lastDate = new Date(lastData.date);
+    return Math.abs(differenceInCalendarDays(lastDate, firstDate)) < 2;
+  }, [props.data]);
 
-export function RequestsGraph(props: { data: RpcUsageTypeStats[] }) {
   return (
     <ThirdwebAreaChart
-      chartClassName="aspect-[1.5] lg:aspect-[4]"
+      chartClassName="aspect-auto h-[275px]"
       config={{
         requests: {
           color: "hsl(var(--chart-1))",
@@ -32,21 +52,33 @@ export function RequestsGraph(props: { data: RpcUsageTypeStats[] }) {
           },
           [] as { requests: number; time: string }[],
         )}
-      header={{
-        title: "RPC Requests",
-        titleClassName: "tracking-tight font-semibold text-lg",
-      }}
+      customHeader={
+        <TotalValueChartHeader
+          total={total}
+          isPending={false}
+          title="RPC Requests"
+          viewMoreLink={props.viewMoreLink}
+        />
+      }
       hideLabel={false}
       isPending={false}
       toolTipLabelFormatter={(label) => {
-        return format(label, "MMM dd, HH:mm");
+        if (showBreakdownByHour) {
+          return format(label, "MMM dd, HH:mm");
+        }
+        return format(label, "MMM dd");
       }}
       toolTipValueFormatter={(value) => {
-        return shortenLargeNumber(value as number);
+        return compactNumberFormatter.format(value as number);
       }}
       xAxis={{
-        sameDay: true,
+        showHour: showBreakdownByHour,
       }}
     />
   );
 }
+
+const compactNumberFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 2,
+});

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/gateway/rpc/components/RpcAnalytics.tsx

@@ -8,7 +8,7 @@ import { StatCard } from "@/components/analytics/stat";
 import { Skeleton } from "@/components/ui/skeleton";
 import { RpcMethodBarChartCardAsync } from "../../../components/RpcMethodBarChartCard";
 import { TopRPCMethodsTable } from "./MethodsTable";
-import { RequestsGraph } from "./RequestsGraph";
+import { RPCRequestsChartUI } from "./RequestsGraph";
 import { RpcAnalyticsFilter } from "./RpcAnalyticsFilter";
 import { RpcFTUX } from "./RpcFtux";
 
@@ -23,7 +23,7 @@ export async function RPCAnalytics(props: {
 }) {
   const { projectId, teamId, range, interval, authToken } = props;
 
-  // TODO: add requests by status code, but currently not performant enough
+  // TODO: add requests by status code filter, but currently not performant enough
   const allRequestsByUsageTypePromise = getRpcUsageByType(
     {
       from: range.from,
@@ -98,7 +98,7 @@ export async function RPCAnalytics(props: {
               value={totalRequests}
             />
           </div>
-          <RequestsGraph data={usageData} />
+          <RPCRequestsChartUI data={usageData} viewMoreLink={undefined} />
           <TopRPCMethodsTable
             client={props.client}
             data={evmMethodsData || []}