Fix RPC usage graphs and improve rate limit visualization (#6737)

# 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 -->

Author: jnsdls

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

@@ -13,24 +13,34 @@ export function CountGraph(props: {
     rateLimitedCount: number;
   }[];
 }) {
+  const hasAnyRateLimited = props.data.some((v) => v.rateLimitedCount > 0);
   return (
     <ThirdwebAreaChart
       chartClassName="aspect-[1.5] lg:aspect-[4]"
       header={{
         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}
     />

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,

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>