progress with chart data (#257)

Author: Logannford

src/actions/statistics/get-stats-chart-data.ts

@@ -1,38 +1,42 @@
 'use server';
-import { StatsChartData } from '@/types/Stats';
+import { StatsChartData, StatsSteps } from '@/types/Stats';
 import { prisma } from '@/utils/prisma';
+import { getRange } from '@/utils/stats/get-range';
 import { revalidateTag } from 'next/cache';
 
 /**
  * Method to get all the question data for the user and return it
  * in a format to display in a chart.
  *
  * We return the data in the following format:
- * [month]: { totalQuestions: number, tags: string[], tagCounts: Record<string, number> }
+ * [key]: { totalQuestions: number, tags: string[], tagCounts: Record<string, number> }
  */
 export const getStatsChartData = async (opts: {
   userUid: string;
   to: string;
-  from: string;
+  from: StatsSteps;
+  step: 'month' | 'week' | 'day';
 }) => {
-  const { userUid, to, from } = opts;
+  const { userUid, to, from, step } = opts;
 
   if (!userUid) {
     return null;
   }
 
+  const toDate = new Date(to);
+  const fromDate = getRange(from);
+
   const questions = await prisma.answers.findMany({
     where: {
       userUid,
       createdAt: {
-        gte: new Date(from),
-        lte: new Date(to)
+        gte: fromDate,
+        lte: toDate
       }
     },
     include: {
       question: {
         select: {
-          createdAt: true,
           tags: {
             include: {
               tag: true
@@ -46,20 +50,43 @@ export const getStatsChartData = async (opts: {
   const data: StatsChartData = {};
 
   questions.forEach((answer) => {
-    const month = answer.question.createdAt.toISOString().slice(0, 7);
+    let key: string;
+    switch (step) {
+      case 'month':
+        key = answer.createdAt.toISOString().slice(0, 7);
+        break;
+      case 'week':
+        const weekStart = new Date(answer.createdAt);
+        weekStart.setDate(
+          answer.createdAt.getDate() - answer.createdAt.getDay()
+        );
+        key = weekStart.toISOString().slice(0, 10);
+        break;
+      case 'day':
+        key = formatDayLabel(answer.createdAt);
+        break;
+    }
+
     const tags = answer.question.tags.map((tag) => tag.tag.name);
 
-    if (data[month]) {
-      data[month].totalQuestions++;
+    if (data[key]) {
+      data[key].totalQuestions++;
       tags.forEach((tag) => {
-        data[month].tagCounts[tag] = (data[month].tagCounts[tag] || 0) + 1;
+        data[key].tagCounts[tag] = (data[key].tagCounts[tag] || 0) + 1;
+        if (!data[key].tags.includes(tag)) {
+          data[key].tags.push(tag);
+        }
       });
     } else {
       const tagCounts: Record<string, number> = {};
       tags.forEach((tag) => {
         tagCounts[tag] = 1;
       });
-      data[month] = { totalQuestions: 1, tagCounts };
+      data[key] = {
+        totalQuestions: 1,
+        tagCounts,
+        tags: [...tags]
+      };
     }
   });
 
@@ -69,19 +96,27 @@ export const getStatsChartData = async (opts: {
 };
 
 /**
- * Gets the total number of questions the user has answered.
- *
- * @param userUid
- * @returns
+ * Gets the total number of questions the user has answered within a specific range.
  */
-export const getTotalQuestionCount = async (userUid: string) => {
+export const getTotalQuestionCount = async (
+  userUid: string,
+  to: string,
+  from: StatsSteps
+) => {
   if (!userUid) {
     return null;
   }
 
+  const toDate = new Date(to);
+  const fromDate = getRange(from);
+
   const questions = await prisma.answers.count({
     where: {
-      userUid
+      userUid,
+      createdAt: {
+        gte: fromDate,
+        lte: toDate
+      }
     }
   });
 
@@ -90,34 +125,66 @@ export const getTotalQuestionCount = async (userUid: string) => {
   return questions;
 };
 
-export const getTotalTimeTaken = async (userUid: string) => {
+/**
+ * Gets the total time taken for questions answered within a specific range.
+ */
+export const getTotalTimeTaken = async (
+  userUid: string,
+  to: string,
+  from: StatsSteps
+) => {
   if (!userUid) {
     return null;
   }
 
+  const toDate = new Date(to);
+  const fromDate = getRange(from);
+
   const answers = await prisma.answers.findMany({
     where: {
-      userUid
+      userUid,
+      createdAt: {
+        gte: fromDate,
+        lte: toDate
+      }
+    },
+    select: {
+      timeTaken: true
     }
   });
 
-  const totalTime = answers.reduce((acc, answer) => {
-    return acc + (answer.timeTaken || 0);
-  }, 0);
+  const totalTime = answers.reduce(
+    (acc, answer) => acc + (answer.timeTaken || 0),
+    0
+  );
 
   revalidateTag('statistics');
 
   return totalTime;
 };
 
-export const getHighestScoringTag = async (userUid: string) => {
+/**
+ * Gets the highest scoring tag within a specific range.
+ */
+export const getHighestScoringTag = async (
+  userUid: string,
+  to: string,
+  from: StatsSteps
+) => {
   if (!userUid) {
     return null;
   }
 
+  const toDate = new Date(to);
+  const fromDate = getRange(from);
+
   const answers = await prisma.answers.findMany({
     where: {
-      userUid
+      userUid,
+      createdAt: {
+        gte: fromDate,
+        lte: toDate
+      }
     },
     include: {
       question: {
@@ -141,9 +208,10 @@ export const getHighestScoringTag = async (userUid: string) => {
     });
   });
 
-  const highestScoringTag = Object.keys(tagCounts).reduce((acc, tag) => {
-    return tagCounts[tag] > tagCounts[acc] ? tag : acc;
-  }, '');
+  const highestScoringTag = Object.keys(tagCounts).reduce(
+    (a, b) => (tagCounts[a] > tagCounts[b] ? a : b),
+    ''
+  );
 
   revalidateTag('statistics');
 
@@ -152,3 +220,47 @@ export const getHighestScoringTag = async (userUid: string) => {
     count: tagCounts[highestScoringTag]
   };
 };
+
+export const getData = async (opts: {
+  userUid: string;
+  to: string;
+  from: StatsSteps;
+  step: 'month' | 'week' | 'day';
+}) => {
+  const { userUid, to, from } = opts;
+
+  const [stats, totalQuestions, totalTimeTaken, highestScoringTag] =
+    await Promise.all([
+      getStatsChartData(opts),
+      getTotalQuestionCount(userUid, to, from),
+      getTotalTimeTaken(userUid, to, from),
+      getHighestScoringTag(userUid, to, from)
+    ]);
+
+  return { stats, totalQuestions, totalTimeTaken, highestScoringTag };
+};
+
+// Helper function to format day label
+const formatDayLabel = (date: Date) => {
+  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  const months = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec'
+  ];
+
+  const dayOfWeek = days[date.getDay()];
+  const month = months[date.getMonth()];
+  const dayOfMonth = date.getDate();
+
+  return `${dayOfWeek}, ${month} ${dayOfMonth}`;
+};

src/app/(dashboard)/(default_layout)/statistics/page.tsx

@@ -2,56 +2,63 @@ import {
   getStatsChartData,
   getTotalQuestionCount,
   getTotalTimeTaken,
-  getHighestScoringTag
+  getHighestScoringTag,
+  getData
 } from '@/actions/statistics/get-stats-chart-data';
+import StatsRangePicker from '@/components/statistics/range-picker';
 import QuestionChart from '@/components/statistics/total-question-chart';
 import TotalStatsCard from '@/components/statistics/total-stats-card';
 import { Button } from '@/components/ui/button';
 import LoadingSpinner from '@/components/ui/loading';
 import { Separator } from '@/components/ui/separator';
 import { useUserServer } from '@/hooks/useUserServer';
+import { StatsSteps } from '@/types/Stats';
+import { STATISTICS } from '@/utils/constants/statistics-filters';
 import { formatSeconds } from '@/utils/time';
 import { Calendar, Stars } from 'lucide-react';
 import { redirect } from 'next/navigation';
 
-export default async function StatisticsPage() {
+export default async function StatisticsPage({
+  searchParams
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
   const user = await useUserServer();
-
   if (!user) {
     return redirect('/login');
   }
 
-  const [stats, totalQuestions, totalTimeTaken, highestScoringTag] =
-    await Promise.all([
-      getStatsChartData({
-        userUid: user.uid,
-        from: '2024-01-01',
-        to: '2024-12-31'
-      }),
-      getTotalQuestionCount(user.uid),
-      getTotalTimeTaken(user.uid),
-      getHighestScoringTag(user.uid)
-    ]);
+  // get the date range from the search params
+  let range = searchParams.range as StatsSteps;
+  if (!range) range = '90d';
+
+  const { step } = STATISTICS[range];
+
+  const { stats, highestScoringTag, totalQuestions, totalTimeTaken } =
+    await getData({
+      userUid: user.uid,
+      from: range,
+      to: new Date().toISOString(),
+      step
+    });
 
   return (
     <div>
-      <div className="pt-14 pb-5 flex w-full justify-between items-center">
+      <div className="pt-14 pb-5 flex flex-col gap-3 md:flex-row w-full justify-between md:items-center">
         <h1 className="text-3xl text-gradient from-white to-white/55">
           Statistics
         </h1>
         <div className="flex gap-3">
-          <Button>
-            <Calendar className="size-4 mr-2" />
-            Date Range
-          </Button>
-          <Button variant="default">
+          <StatsRangePicker selectedRange={STATISTICS[range].label} />
+          {/* <Button variant="default">
             <Stars className="size-4 text-yellow-300 fill-yellow-300" />
-          </Button>
+          </Button> */}
         </div>
       </div>
       <div className="grid grid-cols-12 gap-y-4 gap-x-8">
         {totalQuestions ? (
           <TotalStatsCard
+            className="-left-3 relative"
             header={Number(totalQuestions)}
             description="Total Questions Answered"
           />
@@ -78,7 +85,6 @@ export default async function StatisticsPage() {
           {stats ? <QuestionChart questionData={stats} /> : <LoadingSpinner />}
         </div>
       </div>
-      <pre>{JSON.stringify(stats, null, 2)}</pre>
     </div>
   );
 }