feat(dashboard): add weekly users metrics for projects

- Introduced a new API endpoint to fetch weekly and daily user metrics for managed projects.
- Updated the dashboard to utilize this new endpoint, replacing the previous daily active users data.
- Created a new component to visualize weekly users metrics in the project cards.
- Refactored existing components to accommodate the new data structure and ensure proper rendering of user activity charts.

This change enhances the analytics capabilities of the dashboard, providing better insights into user engagement over time.

Author: mantrakp04

…i/latest/internal/projects-dau/route.tsx …internal/projects-weekly-users/route.tsxapps/backend/src/app/api/latest/internal/projects-dau/route.tsx renamed to apps/backend/src/app/api/latest/internal/projects-weekly-users/route.tsx apps/backend/src/app/api/latest/internal/projects-dau/route.tsx renamed to apps/backend/src/app/api/latest/internal/projects-weekly-users/route.tsx

@@ -24,7 +24,10 @@ export const GET = createSmartRouteHandler({
     statusCode: yupNumber().oneOf([200]).defined(),
     bodyType: yupString().oneOf(["json"]).defined(),
     body: yupObject({
-      projects: yupRecord(yupString().defined(), MetricsDataPointsSchema).defined(),
+      projects: yupRecord(yupString().defined(), yupObject({
+        weekly_users: yupNumber().integer().defined(),
+        daily_users: MetricsDataPointsSchema,
+      }).defined()).defined(),
     }).defined(),
   }),
   handler: async (req) => {
@@ -52,9 +55,12 @@ export const GET = createSmartRouteHandler({
       return out;
     };
 
-    const byProject: Record<string, { date: string, activity: number }[]> = {};
+    const byProject: Record<string, { weekly_users: number, daily_users: { date: string, activity: number }[] }> = {};
     for (const id of projectIds) {
-      byProject[id] = emptySeries();
+      byProject[id] = {
+        weekly_users: 0,
+        daily_users: emptySeries(),
+      };
     }
 
     if (projectIds.length === 0) {
@@ -65,15 +71,41 @@ export const GET = createSmartRouteHandler({
       };
     }
 
-    let rows: { projectId: string, day: string, dau: number }[] = [];
+    let rows: { projectId: string, weeklyUsers: number }[] = [];
+    let dailyRows: { projectId: string, day: string, dailyUsers: number }[] = [];
     try {
       const clickhouseClient = getClickhouseAdminClient();
       const result = await clickhouseClient.query({
+        query: `
+          SELECT
+            project_id AS projectId,
+            uniqExact(assumeNotNull(user_id)) AS weeklyUsers
+          FROM analytics_internal.events
+          WHERE event_type = '$token-refresh'
+            AND project_id IN {projectIds:Array(String)}
+            AND branch_id = {branchId:String}
+            AND user_id IS NOT NULL
+            AND event_at >= {since:DateTime}
+            AND event_at < {untilExclusive:DateTime}
+            AND coalesce(CAST(data.is_anonymous, 'Nullable(UInt8)'), 0) = 0
+          GROUP BY projectId
+        `,
+        query_params: {
+          projectIds,
+          branchId: DEFAULT_BRANCH_ID,
+          since: since.toISOString().slice(0, 19),
+          untilExclusive: untilExclusive.toISOString().slice(0, 19),
+        },
+        format: "JSONEachRow",
+      });
+      rows = await result.json();
+
+      const dailyResult = await clickhouseClient.query({
         query: `
           SELECT
             project_id AS projectId,
             toDate(event_at) AS day,
-            uniqExact(assumeNotNull(user_id)) AS dau
+            uniqExact(assumeNotNull(user_id)) AS dailyUsers
           FROM analytics_internal.events
           WHERE event_type = '$token-refresh'
             AND project_id IN {projectIds:Array(String)}
@@ -92,13 +124,13 @@ export const GET = createSmartRouteHandler({
         },
         format: "JSONEachRow",
       });
-      rows = await result.json();
+      dailyRows = await dailyResult.json();
     } catch (error) {
       const captureId = error instanceof ClickHouseError
-        ? "internal-projects-dau-clickhouse-error"
-        : "internal-projects-dau-unexpected-error";
+        ? "internal-projects-weekly-users-clickhouse-error"
+        : "internal-projects-weekly-users-unexpected-error";
       captureError(captureId, new StackAssertionError(
-        "Failed to load projects DAU.",
+        "Failed to load projects weekly users.",
         { cause: error, projectCount: projectIds.length },
       ));
       return {
@@ -107,21 +139,25 @@ export const GET = createSmartRouteHandler({
         body: { projects: byProject },
       };
     }
-    const index = new Map<string, Map<string, number>>();
     for (const row of rows) {
+      byProject[row.projectId].weekly_users = Number(row.weeklyUsers);
+    }
+
+    const dailyIndex = new Map<string, Map<string, number>>();
+    for (const row of dailyRows) {
       const dayKey = row.day.split("T")[0];
-      let m = index.get(row.projectId);
+      let m = dailyIndex.get(row.projectId);
       if (!m) {
         m = new Map();
-        index.set(row.projectId, m);
+        dailyIndex.set(row.projectId, m);
       }
-      m.set(dayKey, Number(row.dau));
+      m.set(dayKey, Number(row.dailyUsers));
     }
 
     for (const id of projectIds) {
-      const m = index.get(id);
+      const m = dailyIndex.get(id);
       if (!m) continue;
-      byProject[id] = byProject[id].map((point) => ({
+      byProject[id].daily_users = byProject[id].daily_users.map((point) => ({
         date: point.date,
         activity: m.get(point.date) ?? 0,
       }));

apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page-client.tsx

@@ -68,7 +68,8 @@ export default function PageClient() {
   const [openingConfigFile, setOpeningConfigFile] = useState(false);
   const [projectStatuses, setProjectStatuses] = useState<Map<string, ProjectOnboardingStatus>>(new Map());
   const [loadingProjectStatuses, setLoadingProjectStatuses] = useState(true);
-  const [projectDau, setProjectDau] = useState<Map<string, { date: string, activity: number }[]>>(new Map());
+  const [projectWeeklyUsers, setProjectWeeklyUsers] = useState<Map<string, number>>(new Map());
+  const [projectWeeklyUsersChart, setProjectWeeklyUsersChart] = useState<Map<string, { date: string, activity: number }[]>>(new Map());
   const router = useRouter();
 
   useEffect(() => {
@@ -124,32 +125,48 @@ export default function PageClient() {
     let cancelled = false;
     runAsynchronously(async () => {
       try {
-        const response = await appInternals.sendRequest("/internal/projects-dau", {}, "client");
+        const response = await appInternals.sendRequest("/internal/projects-weekly-users", {}, "client");
         if (!response.ok) {
-          console.warn("[projects-dau] request failed", response.status, await response.text());
+          console.warn("[projects-weekly-users] request failed", response.status, await response.text());
           return;
         }
         const body = await response.json();
         if (body == null || typeof body !== "object" || !("projects" in body) || body.projects == null || typeof body.projects !== "object") {
-          console.warn("[projects-dau] unexpected body", body);
+          console.warn("[projects-weekly-users] unexpected body", body);
           return;
         }
-        const map = new Map<string, { date: string, activity: number }[]>();
-        for (const [projectId, series] of Object.entries(body.projects as Record<string, unknown>)) {
-          if (!Array.isArray(series)) continue;
+        const weeklyUsersMap = new Map<string, number>();
+        const weeklyUsersChartMap = new Map<string, { date: string, activity: number }[]>();
+        for (const [projectId, value] of Object.entries(body.projects)) {
+          if (value == null || typeof value !== "object") {
+            continue;
+          }
+          const weeklyUsers = "weekly_users" in value ? value.weekly_users : undefined;
+          if (typeof weeklyUsers === "number") {
+            weeklyUsersMap.set(projectId, weeklyUsers);
+          }
+          const dailyUsers = "daily_users" in value ? value.daily_users : undefined;
+          if (!Array.isArray(dailyUsers)) {
+            continue;
+          }
           const points: { date: string, activity: number }[] = [];
-          for (const point of series) {
-            if (point != null && typeof point === "object" && "date" in point && "activity" in point && typeof (point as any).date === "string" && typeof (point as any).activity === "number") {
-              points.push({ date: (point as any).date, activity: (point as any).activity });
+          for (const point of dailyUsers) {
+            if (point != null && typeof point === "object" && "date" in point && "activity" in point) {
+              const date = point.date;
+              const activity = point.activity;
+              if (typeof date === "string" && typeof activity === "number") {
+                points.push({ date, activity });
+              }
             }
           }
-          map.set(projectId, points);
+          weeklyUsersChartMap.set(projectId, points);
         }
         if (!cancelled) {
-          setProjectDau(map);
+          setProjectWeeklyUsers(weeklyUsersMap);
+          setProjectWeeklyUsersChart(weeklyUsersChartMap);
         }
       } catch (e) {
-        console.warn("[projects-dau] fetch error", e);
+        console.warn("[projects-weekly-users] fetch error", e);
       }
     });
     return () => {
@@ -355,7 +372,8 @@ export default function PageClient() {
                     project={project}
                     href={projectHref}
                     showIncompleteBadge={!loadingProjectStatuses && onboardingStatus !== "completed"}
-                    dau={projectDau.get(project.id)}
+                    weeklyUsers={projectWeeklyUsers.get(project.id)}
+                    weeklyUsersChart={projectWeeklyUsersChart.get(project.id)}
                   />
                 );
               })}

apps/dashboard/src/components/project-card.tsx

@@ -2,7 +2,7 @@
 import { DesignBadge } from "@/components/design-components/badge";
 import { DesignCard } from "@/components/design-components/card";
 import { Link } from "@/components/link";
-import { ProjectDauSparkline } from "@/components/project-dau-sparkline";
+import { ProjectWeeklyUsersMetric } from "@/components/project-weekly-users-metric";
 import { useFromNow } from '@/hooks/use-from-now';
 import { FolderOpenIcon } from "@phosphor-icons/react";
 import { AdminProject } from '@stackframe/stack';
@@ -12,7 +12,8 @@ export function ProjectCard(props: {
   project: AdminProject,
   href?: string,
   showIncompleteBadge?: boolean,
-  dau?: { date: string, activity: number }[],
+  weeklyUsers?: number,
+  weeklyUsersChart?: { date: string, activity: number }[],
 }) {
   const createdAt = useFromNow(props.project.createdAt);
   const href = props.href ?? urlString`/projects/${props.project.id}`;
@@ -49,7 +50,7 @@ export function ProjectCard(props: {
         </div>
 
         <div className="-mx-3 -mb-3 mt-3 overflow-hidden rounded-b-2xl border-t border-black/[0.08] dark:border-white/[0.06] px-3 pt-3 pb-3">
-          <ProjectDauSparkline data={props.dau} />
+          <ProjectWeeklyUsersMetric weeklyUsers={props.weeklyUsers} data={props.weeklyUsersChart} />
         </div>
       </DesignCard>
     </Link>

…src/components/project-dau-sparkline.tsx …mponents/project-weekly-users-metric.tsxapps/dashboard/src/components/project-dau-sparkline.tsx renamed to apps/dashboard/src/components/project-weekly-users-metric.tsx apps/dashboard/src/components/project-dau-sparkline.tsx renamed to apps/dashboard/src/components/project-weekly-users-metric.tsx

@@ -33,10 +33,11 @@ function EmptyBaseline({ count }: { count: number }) {
   );
 }
 
-export function ProjectDauSparkline(props: { data: DataPoint[] | undefined }) {
+export function ProjectWeeklyUsersMetric(props: { weeklyUsers: number | undefined, data: DataPoint[] | undefined }) {
+  const weeklyUsers = props.weeklyUsers ?? 0;
   const data = props.data;
-  const total = data?.reduce((sum, d) => sum + d.activity, 0) ?? 0;
-  const hasActivity = total > 0;
+  const dailyTotal = data?.reduce((sum, d) => sum + d.activity, 0) ?? 0;
+  const hasActivity = weeklyUsers > 0 || dailyTotal > 0;
   const gradId = useId().replace(/:/g, '');
 
   return (
@@ -48,10 +49,10 @@ export function ProjectDauSparkline(props: { data: DataPoint[] | undefined }) {
             (hasActivity ? 'text-foreground' : 'text-muted-foreground/50')
           }
         >
-          {total.toLocaleString()}
+          {weeklyUsers.toLocaleString()}
         </span>
         <span className="text-[9px] uppercase tracking-[0.14em] text-muted-foreground/60">
-          /wk
+          users/wk
         </span>
       </div>
 
@@ -61,7 +62,7 @@ export function ProjectDauSparkline(props: { data: DataPoint[] | undefined }) {
             <AreaChart data={data} margin={{ top: 22, right: 0, left: 0, bottom: 0 }}>
               <XAxis dataKey="date" hide />
               <defs>
-                <linearGradient id={`dau-fill-${gradId}`} x1="0" y1="0" x2="0" y2="1">
+                <linearGradient id={`weekly-users-fill-${gradId}`} x1="0" y1="0" x2="0" y2="1">
                   <stop offset="0%" stopColor="currentColor" stopOpacity={0.28} />
                   <stop offset="100%" stopColor="currentColor" stopOpacity={0} />
                 </linearGradient>
@@ -79,14 +80,14 @@ export function ProjectDauSparkline(props: { data: DataPoint[] | undefined }) {
                 labelStyle={{ color: 'hsl(var(--muted-foreground))', marginBottom: 1, fontSize: 10 }}
                 itemStyle={{ color: 'hsl(var(--foreground))', padding: 0 }}
                 labelFormatter={(label: string) => formatDay(label)}
-                formatter={(value: number) => [value.toLocaleString(), 'active']}
+                formatter={(value: number) => [value.toLocaleString(), 'daily active users']}
               />
               <Area
                 type="monotone"
                 dataKey="activity"
                 stroke="currentColor"
                 strokeWidth={1.5}
-                fill={`url(#dau-fill-${gradId})`}
+                fill={`url(#weekly-users-fill-${gradId})`}
                 isAnimationActive={false}
                 activeDot={{ r: 2.5, strokeWidth: 0, fill: 'currentColor' }}
               />