Add charts on usage page

Author: MananTank

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

@@ -1,6 +1,9 @@
 import type { UserOpStats } from "@/api/analytics";
+import { cn } from "@/lib/utils";
 import { defineChain } from "thirdweb";
 import { type ChainMetadata, getChainMetadata } from "thirdweb/chains";
+import { EmptyAccountAbstractionChartContent } from "../../../../../components/smart-wallets/AccountAbstractionAnalytics/SponsoredTransactionsChartCard";
+import { BarChart } from "../../../components/Analytics/BarChart";
 import { CombinedBarChartCard } from "../../../components/Analytics/CombinedBarChartCard";
 
 export async function TotalSponsoredChartCardUI({
@@ -81,19 +84,33 @@ export async function TotalSponsoredChartCardUI({
     },
   };
 
+  if (onlyMainnet) {
+    const filteredData = timeSeriesData.filter((d) => d.mainnet > 0);
+    return (
+      <div className={cn("rounded-lg border p-4 lg:p-6", className)}>
+        <h3 className="mb-1 font-semibold text-xl tracking-tight">
+          {title || "Total Sponsored"}
+        </h3>
+        <p className="text-muted-foreground"> {description}</p>
+        <BarChart
+          isCurrency
+          chartConfig={chartConfig}
+          data={filteredData}
+          activeKey="mainnet"
+          emptyChartContent={<EmptyAccountAbstractionChartContent />}
+        />
+      </div>
+    );
+  }
+
   return (
     <CombinedBarChartCard
       isCurrency
       title={title || "Total Sponsored"}
-      description={description}
       chartConfig={chartConfig}
       data={timeSeriesData}
-      hideTabs={onlyMainnet}
       activeChart={
-        onlyMainnet
-          ? "mainnet"
-          : ((searchParams?.totalSponsored as keyof typeof chartConfig) ??
-            "mainnet")
+        (searchParams?.totalSponsored as keyof typeof chartConfig) ?? "mainnet"
       }
       queryKey="totalSponsored"
       existingQueryParams={searchParams}

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx

@@ -101,18 +101,10 @@ function BillingInfo({
     (subscription) => subscription.type === "USAGE",
   );
 
-  // only plan and usage subscriptions are considered for now
-  const totalUsd = getAllSubscriptionsTotal(
-    subscriptions.filter((sub) => sub.type === "PLAN" || sub.type === "USAGE"),
-  );
-
   return (
     <div>
       {planSubscription && (
-        <SubscriptionOverview
-          subscription={planSubscription}
-          title="Plan Cost"
-        />
+        <SubscriptionOverview subscription={planSubscription} />
       )}
 
       {usageSubscription && (
@@ -124,28 +116,23 @@ function BillingInfo({
           />
         </>
       )}
-
-      <Separator className="my-4" />
-
-      <div className="flex items-center justify-between gap-6">
-        <h5 className="font-medium text-lg">Total Upcoming Bill</h5>
-        <p className="text-foreground">{totalUsd}</p>
-      </div>
     </div>
   );
 }
 
 function SubscriptionOverview(props: {
   subscription: TeamSubscription;
-  title: string;
+  title?: string;
 }) {
   const { subscription } = props;
 
   return (
     <div>
       <div className="flex items-center justify-between gap-6">
         <div>
-          <h5 className="font-medium text-lg">{props.title} </h5>
+          {props.title && (
+            <h5 className="font-medium text-lg">{props.title}</h5>
+          )}
           <p className="text-muted-foreground text-sm lg:text-base">
             {format(
               new Date(props.subscription.currentPeriodStart),
@@ -159,7 +146,7 @@ function SubscriptionOverview(props: {
           </p>
         </div>
 
-        <p className="text-muted-foreground">
+        <p className="text-foreground">
           {formatCurrencyAmount(
             subscription.upcomingInvoice.amount || 0,
             subscription.upcomingInvoice.currency,
@@ -170,21 +157,6 @@ function SubscriptionOverview(props: {
   );
 }
 
-function getAllSubscriptionsTotal(subscriptions: TeamSubscription[]) {
-  let totalCents = 0;
-  let currency = "USD";
-
-  for (const subscription of subscriptions) {
-    const amount = subscription.upcomingInvoice.amount;
-    currency = subscription.upcomingInvoice.currency;
-    if (amount) {
-      totalCents += amount;
-    }
-  }
-
-  return formatCurrencyAmount(totalCents, currency);
-}
-
 function formatCurrencyAmount(centsAmount: number, currency: string) {
   return new Intl.NumberFormat(undefined, {
     style: "currency",

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx

@@ -14,6 +14,7 @@ import { TotalSponsoredChartCardUI } from "../../../../_components/TotalSponsore
 import { UsageCard } from "./UsageCard";
 
 type UsageProps = {
+  // TODO - remove when we have all the data available from team
   usage: UsageBillableByService;
   subscriptions: TeamSubscription[];
   account: Account;
@@ -26,6 +27,7 @@ export const Usage: React.FC<UsageProps> = ({
   account,
   team,
 }) => {
+  // TODO - get this from team instead of account
   const storageMetrics = useMemo(() => {
     if (!usageData) {
       return {};
@@ -36,18 +38,18 @@ export const Usage: React.FC<UsageProps> = ({
     const percent = toPercent(consumedBytes, limitBytes);
 
     return {
-      total: `${toSize(consumedBytes, "MB")} / ${toSize(
-        limitBytes,
-      )} (${percent}%)`,
+      total: `${toSize(Math.min(consumedBytes, limitBytes), "MB")} of ${toSize(limitBytes)} included storage used`,
       progress: percent,
       ...(usageData.billableUsd.storage > 0
         ? {
             overage: usageData.billableUsd.storage,
           }
         : {}),
+      totalUsage: `Total Usage: ${toSize(consumedBytes, "MB")}`,
     };
   }, [usageData]);
 
+  // TODO - get this from team instead of account
   const rpcMetrics = useMemo(() => {
     if (!usageData) {
       return {};

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/UsageCard.tsx

@@ -1,4 +1,3 @@
-import { cn } from "@/lib/utils";
 import type { JSX } from "react";
 import { toUSD } from "utils/number";
 
@@ -10,6 +9,7 @@ interface UsageCardProps {
   progress?: number;
   description: string;
   children?: JSX.Element;
+  totalUsage?: string;
 }
 
 export const UsageCard: React.FC<UsageCardProps> = ({
@@ -20,10 +20,11 @@ export const UsageCard: React.FC<UsageCardProps> = ({
   progress,
   description,
   children,
+  totalUsage,
 }) => {
   return (
     <div className="relative flex min-h-[190px] flex-col rounded-lg border border-border bg-muted/50 p-4 lg:p-6">
-      <h3 className="mb-1 font-semibold text-xl">{name}</h3>
+      <h3 className="mb-1 font-semibold text-xl tracking-tight">{name}</h3>
       <p className="text-muted-foreground"> {description}</p>
 
       <div className="h-6" />
@@ -32,12 +33,13 @@ export const UsageCard: React.FC<UsageCardProps> = ({
         {title && <p className="text-foreground">{title}</p>}
 
         {total !== undefined && (
-          <p className="text-muted-foreground text-sm">
+          <p className="text-muted-foreground">
             {typeof total === "number" ? toUSD(total) : total}
           </p>
         )}
 
         {progress !== undefined && <Progress value={progress} />}
+        {totalUsage && <p className="mt-2 text-foreground">{totalUsage}</p>}
 
         {overage && (
           <p className="mt-2 text-muted-foreground text-sm">
@@ -58,14 +60,7 @@ function Progress(props: {
   return (
     <div className="rounded-full bg-muted">
       <div
-        className={cn(
-          "h-2 rounded-full",
-          props.value > 90
-            ? "bg-red-600"
-            : props.value > 50
-              ? "bg-yellow-600"
-              : "bg-blue-600",
-        )}
+        className={"h-2 rounded-full bg-blue-600"}
         style={{
           width: `${Math.min(props.value, 100)}%`,
         }}

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

@@ -40,6 +40,7 @@ export default async function Page(props: {
 
   return (
     <Usage
+      // TODO - remove accountUsage when we have all the data available from team
       usage={accountUsage}
       subscriptions={subscriptions}
       account={account}

apps/dashboard/src/app/team/components/Analytics/BarChart.tsx

@@ -14,19 +14,22 @@ import {
   YAxis,
 } from "recharts";
 import { toUSD } from "utils/number";
+import { EmptyChartState } from "../../../../components/analytics/empty-chart-state";
 
 export function BarChart({
   chartConfig,
   data,
   activeKey,
   tooltipLabel,
   isCurrency = false,
+  emptyChartContent,
 }: {
   chartConfig: ChartConfig;
   data: { [key in string]: number | string }[];
   activeKey: string;
   tooltipLabel?: string;
   isCurrency?: boolean;
+  emptyChartContent?: React.ReactNode;
 }) {
   return (
     <ChartContainer
@@ -38,62 +41,66 @@ export function BarChart({
       }}
       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",
-            });
+      {data.length === 0 ? (
+        <EmptyChartState> {emptyChartContent} </EmptyChartState>
+      ) : (
+        <RechartsBarChart
+          accessibilityLayer
+          data={data}
+          margin={{
+            left: 12,
+            right: 12,
           }}
-        />
-        <YAxis
-          width={48}
-          dataKey={activeKey}
-          tickLine={false}
-          axisLine={false}
-          tickFormatter={(value: number) => formatTickerNumber(value)}
-        />
-        <ChartTooltip
-          content={
-            <ChartTooltipContent
-              className="w-[200px]"
-              nameKey={activeKey}
-              labelFormatter={(value) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                  year: "numeric",
-                });
-              }}
-              valueFormatter={(v: unknown) =>
-                isCurrency
-                  ? toUSD(v as number)
-                  : formatTickerNumber(v as number)
-              }
-            />
-          }
-        />
-        <Bar
-          dataKey={activeKey}
-          radius={4}
-          fill={chartConfig[activeKey]?.color ?? "hsl(var(--chart-1))"}
-        />
-      </RechartsBarChart>
+        >
+          <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",
+              });
+            }}
+          />
+          <YAxis
+            width={48}
+            dataKey={activeKey}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={(value: number) => formatTickerNumber(value)}
+          />
+          <ChartTooltip
+            content={
+              <ChartTooltipContent
+                className="w-[200px]"
+                nameKey={activeKey}
+                labelFormatter={(value) => {
+                  return new Date(value).toLocaleDateString("en-US", {
+                    month: "short",
+                    day: "numeric",
+                    year: "numeric",
+                  });
+                }}
+                valueFormatter={(v: unknown) =>
+                  isCurrency
+                    ? toUSD(v as number)
+                    : formatTickerNumber(v as number)
+                }
+              />
+            }
+          />
+          <Bar
+            dataKey={activeKey}
+            radius={4}
+            fill={chartConfig[activeKey]?.color ?? "hsl(var(--chart-1))"}
+          />
+        </RechartsBarChart>
+      )}
     </ChartContainer>
   );
 }