Add weekly signups in admin panel

server/api/admin/stats.ts

@@ -86,3 +86,27 @@ GROUP BY "weekNumber"
 
   return res.status(200).send(success(activeUsersByWeek));
 }));
+
+statsRouter.get('/weekly-signups',
+  requireAdminUser,
+  h(async (req: RequestWithUser, res: ApiResponse<WeeklyStat[]>) =>
+{
+  const results: { weekNumber: string; signups: number }[] = await dbClient.$queryRaw`
+SELECT
+	EXTRACT(ISOYEAR FROM "createdAt") || '-' || lpad(EXTRACT(WEEK FROM "createdAt")::text, 2, '0') AS "weekNumber",
+	COUNT(DISTINCT "agentId") AS "signups"
+FROM public."AuditEvent"
+WHERE "eventType" = 'user:signup'
+GROUP BY "weekNumber"
+;
+  `;
+
+  const now = new Date();
+  const signupsByWeek = results.map(({ weekNumber, signups }) => {
+    const weekStart = format(parse(weekNumber, 'R-II', now), 'y-MM-dd');
+
+    return { weekStart, count: Number(signups) };
+  });
+
+  return res.status(200).send(success(signupsByWeek));
+}));

src/components/pages/admin/AdminStatsPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
 
-import { getWeeklyActiveUsers, WeeklyStat } from 'src/lib/api/admin/stats.ts'
+import { getWeeklyActiveUsers, getWeeklySignups, WeeklyStat } from 'src/lib/api/admin/stats.ts'
 
 import AdminLayout from 'src/layouts/AdminLayout.vue';
 import SectionTitle from 'src/components/layout/SectionTitle.vue';
@@ -15,31 +15,39 @@ const breadcrumbs: MenuItem[] = [
 ];
 
 const weeklyActiveUsers = ref<WeeklyStat[]>([]);
-const isLoading = ref<boolean>(false);
-const errorMessage = ref<string | null>(null);
-
 const loadWeeklyActiveUsers = async function() {
-  isLoading.value = true;
-  errorMessage.value = null;
-
   try {
     weeklyActiveUsers.value = await getWeeklyActiveUsers();
-  } catch(err) {
-    errorMessage.value = err.message;
-  } finally {
-    isLoading.value = false;
-  }
+  } catch(err) { }
 }
 
-const data = computed(() => {
+const weeklySignups = ref<WeeklyStat[]>([]);
+const loadWeeklySignups = async function() {
+  try {
+    weeklySignups.value = await getWeeklySignups();
+  } catch(err) { }
+}
+
+const activeUsersData = computed(() => {
   return weeklyActiveUsers.value.map(({ weekStart, count }) => ({
     series: 'Weekly Active Users',
     date: weekStart,
     value: count,
   }));
 });
 
-onMounted(() => loadWeeklyActiveUsers());
+const signupsData = computed(() => {
+  return weeklySignups.value.map(({ weekStart, count }) => ({
+    series: 'Weekly Signups',
+    date: weekStart,
+    value: count,
+  }));
+});
+
+onMounted(() => {
+  loadWeeklyActiveUsers();
+  loadWeeklySignups();
+});
 
 </script>
 
@@ -48,13 +56,15 @@ onMounted(() => loadWeeklyActiveUsers());
     :breadcrumbs="breadcrumbs"
   >
     <SectionTitle title="Weekly Active Users" />
-    <div class="w-full">
+    <div class="max-w-screen-lg">
       <PlotWavyLineChart
-        :data="data"
+        :data="activeUsersData"
       />
     </div>
-    <div v-if="data.length === 0">
-      No stats found. Are you sure this thing is on?
+    <div class="max-w-screen-lg">
+      <PlotWavyLineChart
+        :data="signupsData"
+      />
     </div>
   </AdminLayout>
 </template>

src/lib/api/admin/stats.ts

@@ -9,3 +9,7 @@ const ENDPOINT = '/api/admin/stats';
 export async function getWeeklyActiveUsers() {
   return callApiV1<WeeklyStat[]>(ENDPOINT + '/weekly-active-users', 'GET');
 }
+
+export async function getWeeklySignups() {
+  return callApiV1<WeeklyStat[]>(ENDPOINT + '/weekly-signups', 'GET');
+}