[Dashboard] Fix: Trend markers and UB volume type dropdown (#7059)

gregfromstl · web-flow · commit ba52e68eabd8 · 2025-05-15T12:05:40.000-07:00
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx
@@ -3,7 +3,7 @@ import { SkeletonContainer } from "@/components/ui/skeleton";
 import { useId, useMemo } from "react";
 import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
 import type { UniversalBridgeWalletStats } from "types/analytics";
-import { CardHeading, ChangeBadge, NoDataOverlay, chartHeight } from "./common";
+import { CardHeading, NoDataOverlay, chartHeight } from "./common";
 
 type GraphDataItem = {
   date: string;
@@ -20,7 +20,7 @@ export function PayNewCustomers(props: {
   /**
    * For each date, compute the total number of wallets that have never existed before in the time series
    */
-  const { graphData, trend } = useMemo(() => {
+  const { graphData } = useMemo(() => {
     const dates = new Set<string>();
     for (const item of props.data) {
       if (!dates.has(item.date)) {
@@ -47,19 +47,7 @@ export function PayNewCustomers(props: {
         value: newUsers,
       });
     }
-    const lastPeriod = newUsersData[newUsersData.length - 3];
-    const currentPeriod = newUsersData[newUsersData.length - 2];
-    // Calculate the percent change from last period to current period
-    const trend =
-      lastPeriod &&
-      currentPeriod &&
-      lastPeriod.value > 0 &&
-      currentPeriod.value > 0
-        ? (currentPeriod.value - lastPeriod.value) / lastPeriod.value
-        : lastPeriod?.value === 0 && (currentPeriod?.value || 0) > 0
-          ? 100
-          : undefined;
-    return { graphData: newUsersData, trend };
+    return { graphData: newUsersData };
   }, [props.data, props.dateFormat]);
   const isEmpty = useMemo(
     () => graphData.length === 0 || graphData.every((x) => x.value === 0),
@@ -89,17 +77,6 @@ export function PayNewCustomers(props: {
                 );
               }}
             />
-
-            {!isEmpty && typeof trend !== "undefined" && (
-              <SkeletonContainer
-                loadedData={trend}
-                className="rounded-2xl"
-                skeletonData={1}
-                render={(v) => {
-                  return <ChangeBadge percent={v} />;
-                }}
-              />
-            )}
           </div>
         </div>
       </div>
@@ -125,7 +102,7 @@ export function PayNewCustomers(props: {
                       {payload?.date}
                     </p>
                     <p className="text-base text-medium">
-                      Customers: {payload?.value}
+                      New Customers: {payload?.value}
                     </p>
                   </div>
                 );
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
 import type { UniversalBridgeStats } from "types/analytics";
 import { toUSD } from "../../../../utils/number";
-import { CardHeading, ChangeBadge, NoDataOverlay, chartHeight } from "./common";
+import { CardHeading, NoDataOverlay, chartHeight } from "./common";
 
 type GraphData = {
   date: string;
@@ -24,7 +24,7 @@ export function Payouts(props: {
     props.data.every((x) => x.developerFeeUsdCents === 0);
 
   const barColor = isEmpty ? "hsl(var(--accent))" : "hsl(var(--chart-1))";
-  const { graphData, totalPayoutsUSD, trend } = useMemo(() => {
+  const { graphData, totalPayoutsUSD } = useMemo(() => {
     const dates = new Set<string>();
     for (const item of props.data) {
       if (!dates.has(item.date)) {
@@ -49,21 +49,9 @@ export function Payouts(props: {
         value: total / 100,
       });
     }
-    const lastPeriod = cleanedData[cleanedData.length - 3];
-    const currentPeriod = cleanedData[cleanedData.length - 2];
-    const trend =
-      lastPeriod &&
-      currentPeriod &&
-      lastPeriod.value > 0 &&
-      currentPeriod.value > 0
-        ? (currentPeriod.value - lastPeriod.value) / lastPeriod.value
-        : lastPeriod?.value === 0 && (currentPeriod?.value || 0) > 0
-          ? 100
-          : undefined;
     return {
       graphData: cleanedData,
       totalPayoutsUSD: totalPayouts / 100,
-      trend,
     };
   }, [props.data, props.dateFormat]);
 
@@ -93,17 +81,6 @@ export function Payouts(props: {
               );
             }}
           />
-
-          {!isEmpty && typeof trend !== "undefined" && (
-            <SkeletonContainer
-              className="rounded-2xl"
-              loadedData={trend}
-              skeletonData={1}
-              render={(percent) => {
-                return <ChangeBadge percent={percent} />;
-              }}
-            />
-          )}
         </div>
 
         <div className="relative flex w-full justify-center">
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
@@ -24,11 +24,10 @@ export function TotalPayVolume(props: {
   };
 }) {
   const uniqueId = useId();
-  const [successType, setSuccessType] = useState<"success" | "fail">("success");
   const [type, setType] = useState<"all" | "crypto" | "fiat">("all");
 
   const graphData: GraphData[] | undefined = useMemo(() => {
-    let data = (() => {
+    const data = (() => {
       switch (type) {
         case "crypto": {
           return props.data?.filter((x) => x.type === "onchain");
@@ -45,13 +44,6 @@ export function TotalPayVolume(props: {
       }
     })();
 
-    data = (() => {
-      if (successType === "fail") {
-        return data.filter((x) => x.status === "failed");
-      }
-      return data.filter((x) => x.status === "completed");
-    })();
-
     const dates = new Set<string>();
     for (const item of data) {
       if (!dates.has(item.date)) {
@@ -72,15 +64,13 @@ export function TotalPayVolume(props: {
       });
     }
     return cleanedData;
-  }, [props.data, type, successType, props.dateFormat]);
+  }, [props.data, type, props.dateFormat]);
 
   const isEmpty =
     graphData.length === 0 || graphData.every((x) => x.value === 0);
   const chartColor = isEmpty
     ? "hsl(var(--muted-foreground))"
-    : successType === "success"
-      ? "hsl(var(--chart-1))"
-      : "hsl(var(--chart-3))";
+    : "hsl(var(--chart-1))";
 
   return (
     <div className="flex flex-1 flex-col">
@@ -104,21 +94,6 @@ export function TotalPayVolume(props: {
                 <SelectItem value="fiat">Fiat</SelectItem>
               </SelectContent>
             </Select>
-
-            <Select
-              value={successType}
-              onValueChange={(value: "success" | "fail") => {
-                setSuccessType(value);
-              }}
-            >
-              <SelectTrigger className="bg-transparent">
-                <SelectValue placeholder="Select" />
-              </SelectTrigger>
-              <SelectContent position="popper">
-                <SelectItem value="success">Successful</SelectItem>
-                <SelectItem value="fail">Failed</SelectItem>
-              </SelectContent>
-            </Select>
           </div>
         )}
       </div>
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx
@@ -1,7 +1,3 @@
-import { Badge } from "@/components/ui/badge";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
-
 export function NoDataOverlay() {
   return (
     <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-card/50 text-muted-foreground text-sm backdrop-blur-sm">
@@ -14,39 +10,6 @@ export function CardHeading(props: { children: React.ReactNode }) {
   return <h3 className="font-medium text-base">{props.children}</h3>;
 }
 
-export function ChangeBadge(props: { percent: number }) {
-  const percentValue = `${props.percent.toFixed(0)}%`;
-  let label = "No change compared to prior range";
-  if (props.percent !== 0) {
-    label = `
-      ${props.percent >= 0 ? "Increase" : "Decrease"} of ${percentValue} compared to prior range
-    `;
-  }
-  return (
-    <ToolTipLabel label={label}>
-      <div>
-        <Badge
-          variant={props.percent >= 0 ? "success" : "destructive"}
-          className="gap-1 px-2 py-1.5 text-sm"
-        >
-          {props.percent >= 0 ? (
-            <ArrowUpIcon className="size-4 " />
-          ) : (
-            <ArrowDownIcon className="size-4" />
-          )}
-
-          {new Intl.NumberFormat("en-US", {
-            style: "percent",
-            minimumFractionDigits: 0,
-            maximumFractionDigits: 0,
-            signDisplay: "never",
-          }).format(props.percent)}
-        </Badge>
-      </div>
-    </ToolTipLabel>
-  );
-}
-
 export function TableData({ children }: { children: React.ReactNode }) {
   return <td className="px-3 py-2 text-sm">{children}</td>;
 }
