From baf95b9077337b8e817dc839f12db176f7b6fe4d Mon Sep 17 00:00:00 2001
From: jnsdls <jonas.daniels@outlook.com>
Date: Tue, 15 Apr 2025 21:16:37 +0000
Subject: [PATCH] Fix RPC usage graphs and improve rate limit visualization
 (#6737)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Improve RPC Usage Graphs

This PR enhances the RPC usage graphs in the dashboard:

- Only show rate limited requests in the legend when there are actually rate limited requests
- Fix data processing by removing the `.slice(1, -1)` which was incorrectly trimming data points
- Ensure numeric values by explicitly converting to Number
- Move data slicing to the parent component for better control
- Add a type assertion comment to handle the TypeScript warning
- Add a check to conditionally display relevant chart configuration

These changes improve the accuracy and presentation of the RPC usage data visualization.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `CountGraph` component by improving the handling of rate-limited data and formatting the `currentRateLimit` value for better readability.

### Detailed summary
- Updated the `currentRateLimit` display to use `toLocaleString()`.
- Added a check for `hasAnyRateLimited` to conditionally configure the chart.
- Modified the `config` object to include `rateLimitedCount` only if there are any rate-limited requests.
- Converted `includedCount` and `rateLimitedCount` to `Number` type during data mapping.

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

<!-- end pr-codex -->
---
 .../~/usage/rpc/components/count-graph.tsx    | 38 ++++++++++++-------
 .../~/usage/rpc/components/rate-graph.tsx     |  1 -
 .../[team_slug]/(team)/~/usage/rpc/page.tsx   |  2 +-
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/components/count-graph.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/components/count-graph.tsx
index 688380501f0..896ff7b89c6 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/components/count-graph.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/components/count-graph.tsx
@@ -13,6 +13,7 @@ export function CountGraph(props: {
     rateLimitedCount: number;
   }[];
 }) {
+  const hasAnyRateLimited = props.data.some((v) => v.rateLimitedCount > 0);
   return (
     <ThirdwebAreaChart
       chartClassName="aspect-[1.5] lg:aspect-[4]"
@@ -20,17 +21,26 @@ export function CountGraph(props: {
         title: "Requests Over Time",
         description: "Requests over the last 24 hours. All times in UTC.",
       }}
-      config={{
-        includedCount: {
-          label: "Successful Requests",
-          color: "hsl(var(--chart-1))",
-        },
-        rateLimitedCount: {
-          label: "Rate Limited Requests",
-          color: "hsl(var(--chart-4))",
-        },
-      }}
-      showLegend
+      config={
+        hasAnyRateLimited
+          ? {
+              includedCount: {
+                label: "Successful Requests",
+                color: "hsl(var(--chart-1))",
+              },
+              rateLimitedCount: {
+                label: "Rate Limited Requests",
+                color: "hsl(var(--chart-4))",
+              },
+            }
+          : {
+              includedCount: {
+                label: "Successful Requests",
+                color: "hsl(var(--chart-1))",
+              },
+            }
+      }
+      showLegend={hasAnyRateLimited}
       yAxis
       xAxis={{
         sameDay: true,
@@ -39,13 +49,13 @@ export function CountGraph(props: {
       toolTipLabelFormatter={(label) => {
         return formatDate(new Date(label), "MMM dd, HH:mm");
       }}
+      // @ts-expect-error - sending MORE data than expected is ok
       data={props.data
-        .slice(1, -1)
         .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
         .map((v) => ({
           time: v.date,
-          includedCount: v.includedCount + v.overageCount,
-          rateLimitedCount: v.rateLimitedCount,
+          includedCount: Number(v.includedCount) + Number(v.overageCount),
+          rateLimitedCount: Number(v.rateLimitedCount),
         }))}
       isPending={false}
     />
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/components/rate-graph.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/components/rate-graph.tsx
index ad781219b81..6fecf9f2714 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/components/rate-graph.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/components/rate-graph.tsx
@@ -35,7 +35,6 @@ export function RateGraph(props: {
         },
       }}
       data={props.data
-        .slice(1, -1)
         .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
         .map((v) => ({
           time: v.date,
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/page.tsx
index 8d8479495d9..b23835db41e 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/page.tsx
@@ -84,7 +84,7 @@ export default async function RPCUsage(props: {
           <CardContent>
             <div className="flex items-center justify-between">
               <div className="font-bold text-2xl capitalize">
-                {currentRateLimit} RPS
+                {currentRateLimit.toLocaleString()} RPS
               </div>
               <TeamPlanBadge plan={currentPlan} />
             </div>