feat(analytics): updated flag usage analytics

Author: Davidthecode

apps/api/src/routes/project/route.ts

@@ -15,9 +15,9 @@ import {
 } from "@/lib/validations/project";
 import { resolveRoleByProjectParams } from "@/middleware/resolve-role";
 import { verifyRole } from "@/middleware/verify-role";
-import type { DailyConversionData, TinybirdRow } from "@/types/analytics";
+import type { DailyConversionData } from "@/types/analytics";
 import type { RequestWithSession } from "@/types/request";
-import { pivotAnalyticsData } from "@/utils/analytics";
+import { fillMissingDates, pivotAnalyticsData } from "@/utils/analytics";
 import { sendProjectInviteEmail } from "@/utils/project";
 
 const router = Router();
@@ -1367,6 +1367,7 @@ router.get(
   async (req: RequestWithSession, res: Response) => {
     const { projectId } = req.params;
     const { timeRange = "7d" } = req.query;
+
     let days: number;
     if (timeRange === "30d") {
       days = 30;
@@ -1400,30 +1401,31 @@ router.get(
 
       const safeData = Array.isArray(data) ? data : [];
 
+      const dailyImpressions = fillMissingDates(
+        safeData.filter((r) => r.impressions !== null),
+        days
+      );
+
+      const flagDistribution = safeData.filter(
+        (r) => r.flag_key !== null && r.total !== null
+      );
+
+      const dailyTopFlagImpressions = pivotAnalyticsData(
+        safeData.filter((r) => r.flag_key && r.val && !r.variation_name),
+        "flag_key",
+        "val",
+        days
+      );
+
+      const dailyVariationUsage = safeData.filter(
+        (r) => r.variation_name !== null && r.val !== null
+      );
+
       res.json({
-        dailyImpressions:
-          safeData.filter(
-            (r: DailyConversionData) => r.impressions !== undefined
-          ) || [],
-        flagDistribution:
-          safeData.filter(
-            (r: DailyConversionData) => r.flag_key && r.total !== undefined
-          ) || [],
-        dailyVariationUsageProjectWide: pivotAnalyticsData(
-          safeData.filter(
-            (r): r is TinybirdRow & { variation_name: string } =>
-              !!r.variation_name
-          ),
-          "variation_name",
-          "val"
-        ),
-        dailyTopFlagImpressions: pivotAnalyticsData(
-          safeData.filter(
-            (r): r is TinybirdRow & { flag_key: string } => !!r.flag_key
-          ),
-          "flag_key",
-          "val"
-        ),
+        dailyImpressions,
+        flagDistribution,
+        dailyVariationUsage,
+        dailyTopFlagImpressions,
       });
     } catch (error) {
       console.error("Failed to get usage analytics:", error);

apps/api/src/utils/analytics.ts

@@ -1,39 +1,75 @@
-/**
- * Transforms flat Tinybird rows into component-ready JSON
- * e.g [{date: '2023-01-01', variation: 'A', val: 10}]
- * -> [{date: '2023-01-01', A: 10}]
- */
-export function pivotAnalyticsData<
-  T extends { date: string },
-  P extends keyof T,
-  V extends keyof T,
->(
-  rows: T[],
-  pivotKey: P,
-  valueKey: V
-): Array<{ date: string } & Record<string, T[V]>> {
-  if (!rows || rows.length === 0) {
-    return [];
+import { eachDayOfInterval, format, subDays } from "date-fns";
+
+type AnalyticsRow = {
+  date?: string | null;
+  [key: string]: unknown;
+};
+
+type ChartDataNode = {
+  date: string;
+  [key: string]: string | number;
+};
+
+export function pivotAnalyticsData(
+  rows: AnalyticsRow[],
+  pivotKey: string,
+  valueKey: string,
+  days: number
+): ChartDataNode[] {
+  const endDate = new Date();
+  const startDate = subDays(endDate, days - 1);
+  const dateRange = eachDayOfInterval({ start: startDate, end: endDate });
+
+  const resultObj: Record<string, ChartDataNode> = {};
+
+  for (const day of dateRange) {
+    const dateStr = format(day, "yyyy-MM-dd");
+    resultObj[dateStr] = { date: dateStr };
   }
 
-  const grouped = rows.reduce(
-    (acc, row) => {
+  if (rows && Array.isArray(rows)) {
+    for (const row of rows) {
       const date = row.date;
 
-      // The value of the pivotKey (e.g., 'Variation A') becomes a property name
-      // We cast to string to ensure it's a valid object key
-      const dynamicKey = String(row[pivotKey]);
-      const value = row[valueKey];
+      if (date && resultObj[date]) {
+        const key = String(row[pivotKey]);
+
+        const value = Number(row[valueKey]) || 0;
 
-      if (!acc[date]) {
-        acc[date] = { date } as { date: string } & Record<string, T[V]>;
+        const currentVal = (resultObj[date][key] as number) || 0;
+        resultObj[date][key] = currentVal + value;
       }
+    }
+  }
 
-      acc[date][dynamicKey] = value;
-      return acc;
-    },
-    {} as Record<string, { date: string } & Record<string, T[V]>>
+  return (Object.values(resultObj) as ChartDataNode[]).sort((a, b) =>
+    a.date.localeCompare(b.date)
   );
+}
+
+export function fillMissingDates(
+  rows: AnalyticsRow[],
+  days: number
+): Array<{ date: string; impressions: number }> {
+  const endDate = new Date();
+  const startDate = subDays(endDate, days - 1);
+  const dateRange = eachDayOfInterval({ start: startDate, end: endDate });
+
+  const resultObj: Record<string, { date: string; impressions: number }> = {};
+
+  for (const day of dateRange) {
+    const dateStr = format(day, "yyyy-MM-dd");
+    resultObj[dateStr] = { date: dateStr, impressions: 0 };
+  }
+
+  if (rows && Array.isArray(rows)) {
+    for (const row of rows) {
+      const date = row.date;
+      if (date && resultObj[date]) {
+        resultObj[date].impressions = Number(row.impressions) || 0;
+      }
+    }
+  }
 
-  return Object.values(grouped).sort((a, b) => a.date.localeCompare(b.date));
+  return Object.values(resultObj).sort((a, b) => a.date.localeCompare(b.date));
 }