groupBy domain by default in usage

Author: steven-tey

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/usage-chart.tsx

@@ -104,23 +104,6 @@ export function UsageChart() {
 
   const filters = useMemo(
     () => [
-      {
-        key: "folderId",
-        icon: Folder,
-        label: "Folder",
-        options:
-          folders?.map((folder) => ({
-            value: folder.id,
-            icon: (
-              <FolderIcon
-                folder={folder}
-                shape="square"
-                iconClassName="size-3"
-              />
-            ),
-            label: folder.name,
-          })) ?? [],
-      },
       {
         key: "domain",
         icon: Globe2,
@@ -140,17 +123,34 @@ export function UsageChart() {
             ),
           })) ?? [],
       },
+      {
+        key: "folderId",
+        icon: Folder,
+        label: "Folder",
+        options:
+          folders?.map((folder) => ({
+            value: folder.id,
+            icon: (
+              <FolderIcon
+                folder={folder}
+                shape="square"
+                iconClassName="size-3"
+              />
+            ),
+            label: folder.name,
+          })) ?? [],
+      },
     ],
-    [activeResource, folders, domains],
+    [activeResource, domains, folders],
   );
 
   // Active filters
   const activeFilters = useMemo(() => {
     const filters: { key: string; value: string }[] = [];
-    if (folderId) filters.push({ key: "folderId", value: folderId });
     if (domain) filters.push({ key: "domain", value: domain });
+    if (folderId) filters.push({ key: "folderId", value: folderId });
     return filters;
-  }, [folderId, domain]);
+  }, [domain, folderId]);
 
   const chartData = useMemo(
     () =>
@@ -341,8 +341,8 @@ export function UsageChart() {
           </div>
           <ToggleGroup
             options={[
-              { value: "folderId", label: "Folder" },
               { value: "domain", label: "Domain" },
+              { value: "folderId", label: "Folder" },
             ]}
             selected={groupBy}
             selectAction={(id) => queryParams({ set: { groupBy: id } })}

apps/web/lib/swr/use-usage-timeseries.ts

@@ -47,10 +47,10 @@ export function useUsageTimeseries({
     };
   }, [searchParams, firstDay, lastDay]);
 
-  const groupBy: "folderId" | "domain" =
-    (["folderId", "domain"] as const).find(
+  const groupBy: "domain" | "folderId" =
+    (["domain", "folderId"] as const).find(
       (gb) => gb === searchParams.get("groupBy"),
-    ) ?? "folderId";
+    ) ?? "domain";
 
   const {
     data: usage,