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,35 +1,53 @@
-import { defineChain } from "thirdweb";
-import { type ChainMetadata, getChainMetadata } from "thirdweb/chains";
+"use client";
+import { useSetResponsiveSearchParams } from "responsive-rsc";
+import type { ChainMetadata } from "thirdweb/chains";
 import { cn } from "@/lib/utils";
 import type { UserOpStats } from "@/types/analytics";
 import { BarChart } from "../../../components/Analytics/BarChart";
 import { CombinedBarChartCard } from "../../../components/Analytics/CombinedBarChartCard";
 import { EmptyAccountAbstractionChartContent } from "../../[project_slug]/(sidebar)/account-abstraction/AccountAbstractionAnalytics/SponsoredTransactionsChartCard";
 
-export async function TotalSponsoredChartCardUI({
-  data,
-  aggregatedData,
-  searchParams,
+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 function TotalSponsoredChartCardUI({
+  processedAggregatedData,
+  selectedChart,
   className,
   onlyMainnet,
   title,
+  chains,
+  data,
   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;
+  chains: ChainMetadata[];
+  processedAggregatedData: {
+    mainnet: number;
+    testnet: number;
+    total: number;
+  };
 }) {
-  const chains = await Promise.all(
-    data.map(
-      (item) =>
-        // eslint-disable-next-line no-restricted-syntax
-        item.chainId && getChainMetadata(defineChain(Number(item.chainId))),
-    ),
-  ).then((chains) => chains.filter((c) => c) as ChainMetadata[]);
+  const setResponsiveSearchParams = useSetResponsiveSearchParams();
 
   // Process data to combine by date and chain type
   const dateMap = new Map<string, { mainnet: number; testnet: number }>();
@@ -55,35 +73,6 @@ export async function TotalSponsoredChartCardUI({
     }))
     .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
 
-  const processedAggregatedData = {
-    mainnet: aggregatedData
-      .filter(
-        (d) => !chains.find((c) => c.chainId === Number(d.chainId))?.testnet,
-      )
-      .reduce((acc, curr) => acc + curr.sponsoredUsd, 0),
-    testnet: aggregatedData
-      .filter(
-        (d) => chains.find((c) => c.chainId === Number(d.chainId))?.testnet,
-      )
-      .reduce((acc, curr) => acc + curr.sponsoredUsd, 0),
-    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 +95,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) =>