Dashboard: Improved chart responsiveness, code cleanup

Author: MananTank

apps/dashboard/src/@/components/analytics/date-range-selector.tsx

@@ -18,6 +18,7 @@ export function DateRangeSelector(props: {
 }) {
   const { range, setRange } = props;
   const daysDiff = differenceInCalendarDays(range.to, range.from);
+
   const matchingRange =
     normalizeTime(range.to).getTime() === normalizeTime(new Date()).getTime()
       ? durationPresets.find((preset) => preset.days === daysDiff)
@@ -85,7 +86,7 @@ export function getLastNDaysRange(id: DurationId) {
     throw new Error(`Invalid duration id: ${id}`);
   }
 
-  const todayDate = new Date(Date.now() + 1000 * 60 * 60 * 24); // add 1 day to avoid timezone issues
+  const todayDate = new Date(Date.now());
 
   const value: Range = {
     from: subDays(todayDate, durationInfo.days),

apps/dashboard/src/@/components/analytics/range-selector.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import {
+  useResponsiveSearchParams,
+  useSetResponsiveSearchParams,
+} from "responsive-rsc";
+import {
+  DateRangeSelector,
+  type DurationId,
+} from "@/components/analytics/date-range-selector";
+import { IntervalSelector } from "@/components/analytics/interval-selector";
+import { getFiltersFromSearchParams, normalizeTimeISOString } from "@/lib/time";
+
+export function ResponsiveTimeFilters(props: { defaultRange: DurationId }) {
+  const responsiveSearchParams = useResponsiveSearchParams();
+  const setResponsiveSearchParams = useSetResponsiveSearchParams();
+  const { range, interval } = getFiltersFromSearchParams({
+    defaultRange: props.defaultRange,
+    from: responsiveSearchParams.from,
+    interval: responsiveSearchParams.interval,
+    to: responsiveSearchParams.to,
+  });
+
+  return (
+    <div className="flex justify-end gap-3 flex-col lg:flex-row">
+      <DateRangeSelector
+        className="rounded-full"
+        range={range}
+        setRange={(newRange) => {
+          setResponsiveSearchParams((v) => {
+            const newParams = {
+              ...v,
+              from: normalizeTimeISOString(newRange.from),
+              to: normalizeTimeISOString(newRange.to),
+            };
+            return newParams;
+          });
+        }}
+      />
+      <IntervalSelector
+        className="bg-card rounded-full"
+        intervalType={interval}
+        setIntervalType={(newInterval) => {
+          setResponsiveSearchParams((v) => {
+            const newParams = {
+              ...v,
+              interval: newInterval,
+            };
+            return newParams;
+          });
+        }}
+      />
+    </div>
+  );
+}

apps/dashboard/src/@/components/analytics/responsive-time-filters.tsx

@@ -1,3 +1,5 @@
+"use client";
+import { useSetResponsiveSearchParams } from "responsive-rsc";
 import { defineChain } from "thirdweb";
 import { type ChainMetadata, getChainMetadata } from "thirdweb/chains";
 import { cn } from "@/lib/utils";
@@ -6,23 +8,41 @@ import { BarChart } from "../../../components/Analytics/BarChart";
 import { CombinedBarChartCard } from "../../../components/Analytics/CombinedBarChartCard";
 import { EmptyAccountAbstractionChartContent } from "../../[project_slug]/(sidebar)/account-abstraction/AccountAbstractionAnalytics/SponsoredTransactionsChartCard";
 
+const chartConfig = {
+  mainnet: {
+    color: "hsl(var(--chart-1))",
+    label: "Mainnet Chains",
+  },
+  testnet: {
+    color: "hsl(var(--chart-2))",
+    label: "Testnet Chains",
+  },
+  total: {
+    color: "hsl(var(--chart-3))",
+    label: "All Chains",
+  },
+};
+
 export async function TotalSponsoredChartCardUI({
   data,
   aggregatedData,
-  searchParams,
+  selectedChart,
   className,
   onlyMainnet,
   title,
   description,
+  selectedChartQueryParam,
 }: {
   data: UserOpStats[];
   aggregatedData: UserOpStats[];
-  searchParams?: { [key: string]: string | string[] | undefined };
+  selectedChart: string | undefined;
   className?: string;
   onlyMainnet?: boolean;
   title?: string;
+  selectedChartQueryParam: string;
   description?: string;
 }) {
+  const setResponsiveSearchParams = useSetResponsiveSearchParams();
   const chains = await Promise.all(
     data.map(
       (item) =>
@@ -69,21 +89,6 @@ export async function TotalSponsoredChartCardUI({
     total: aggregatedData.reduce((acc, curr) => acc + curr.sponsoredUsd, 0),
   };
 
-  const chartConfig = {
-    mainnet: {
-      color: "hsl(var(--chart-1))",
-      label: "Mainnet Chains",
-    },
-    testnet: {
-      color: "hsl(var(--chart-2))",
-      label: "Testnet Chains",
-    },
-    total: {
-      color: "hsl(var(--chart-3))",
-      label: "All Chains",
-    },
-  };
-
   if (onlyMainnet) {
     const filteredData = timeSeriesData.filter((d) => d.mainnet > 0);
     return (
@@ -106,15 +111,23 @@ export async function TotalSponsoredChartCardUI({
   return (
     <CombinedBarChartCard
       activeChart={
-        (searchParams?.totalSponsored as keyof typeof chartConfig) ?? "mainnet"
+        selectedChart && selectedChart in chartConfig
+          ? (selectedChart as keyof typeof chartConfig)
+          : "mainnet"
       }
+      onSelect={(key) => {
+        setResponsiveSearchParams((v) => {
+          return {
+            ...v,
+            [selectedChartQueryParam]: key,
+          };
+        });
+      }}
       aggregateFn={(_data, key) => processedAggregatedData[key]}
       chartConfig={chartConfig}
       className={className}
       data={timeSeriesData}
-      existingQueryParams={searchParams}
       isCurrency
-      queryKey="totalSponsored"
       title={title || "Gas Sponsored"}
       // Get the trend from the last two COMPLETE periods
       trendFn={(data, key) =>

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

@@ -1,3 +1,4 @@
+import { useSetResponsiveSearchParams } from "responsive-rsc";
 import { defineChain } from "thirdweb";
 import { type ChainMetadata, getChainMetadata } from "thirdweb/chains";
 import { cn } from "@/lib/utils";
@@ -6,23 +7,41 @@ import { BarChart } from "../../../components/Analytics/BarChart";
 import { CombinedBarChartCard } from "../../../components/Analytics/CombinedBarChartCard";
 import { EmptyAccountAbstractionChartContent } from "../../[project_slug]/(sidebar)/account-abstraction/AccountAbstractionAnalytics/SponsoredTransactionsChartCard";
 
+const chartConfig = {
+  mainnet: {
+    color: "hsl(var(--chart-1))",
+    label: "Mainnet Chains",
+  },
+  testnet: {
+    color: "hsl(var(--chart-2))",
+    label: "Testnet Chains",
+  },
+  total: {
+    color: "hsl(var(--chart-3))",
+    label: "All Chains",
+  },
+};
+
 export async function TransactionsChartCardUI({
   data,
   aggregatedData,
-  searchParams,
   className,
   onlyMainnet,
   title,
   description,
+  selectedChart,
+  selectedChartQueryParam,
 }: {
   data: TransactionStats[];
   aggregatedData: TransactionStats[];
-  searchParams?: { [key: string]: string | string[] | undefined };
   className?: string;
   onlyMainnet?: boolean;
   title?: string;
+  selectedChartQueryParam: string;
+  selectedChart: string | undefined;
   description?: string;
 }) {
+  const setResponsiveSearchParams = useSetResponsiveSearchParams();
   const uniqueChainIds = [
     ...new Set(data.map((item) => item.chainId).filter(Boolean)),
   ];
@@ -71,21 +90,6 @@ export async function TransactionsChartCardUI({
     total: aggregatedData.reduce((acc, curr) => acc + curr.count, 0),
   };
 
-  const chartConfig = {
-    mainnet: {
-      color: "hsl(var(--chart-1))",
-      label: "Mainnet Chains",
-    },
-    testnet: {
-      color: "hsl(var(--chart-2))",
-      label: "Testnet Chains",
-    },
-    total: {
-      color: "hsl(var(--chart-3))",
-      label: "All Chains",
-    },
-  };
-
   if (onlyMainnet) {
     const filteredData = timeSeriesData.filter((d) => d.mainnet > 0);
     return (
@@ -107,15 +111,22 @@ export async function TransactionsChartCardUI({
   return (
     <CombinedBarChartCard
       activeChart={
-        (searchParams?.client_transactions as keyof typeof chartConfig) ??
-        "mainnet"
+        selectedChart && selectedChart in chartConfig
+          ? (selectedChart as keyof typeof chartConfig)
+          : "mainnet"
       }
       aggregateFn={(_data, key) => processedAggregatedData[key]}
       chartConfig={chartConfig}
       className={className}
+      onSelect={(key) => {
+        setResponsiveSearchParams((v) => {
+          return {
+            ...v,
+            [selectedChartQueryParam]: key,
+          };
+        });
+      }}
       data={timeSeriesData}
-      existingQueryParams={searchParams}
-      queryKey="client_transactions"
       title={title || "Transactions"}
       // Get the trend from the last two COMPLETE periods
       trendFn={(data, key) =>