feat: start of creating filtering for statistics

Logannford · Logannford · commit 50f4b7edd63b · 2024-12-10T23:54:08.000Z
diff --git a/src/actions/statistics/get-stats-chart-data.ts b/src/actions/statistics/get-stats-chart-data.ts
@@ -14,8 +14,9 @@ export const getStatsChartData = async (opts: {
   userUid: string;
   to: string;
   from: string;
+  step: 'month' | 'week' | 'day';
 }) => {
-  const { userUid, to, from } = opts;
+  const { userUid, to, from, step } = opts;
 
   if (!userUid) {
     return null;
@@ -44,27 +45,74 @@ export const getStatsChartData = async (opts: {
 
   const data: StatsChartData = {};
 
+  // 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}`;
+  };
+
   questions.forEach((answer) => {
-    console.log(answer.createdAt);
-    const month = answer.createdAt.toISOString().slice(0, 7);
+    let key: string;
+    switch (step) {
+      case 'month':
+        key = answer.createdAt.toISOString().slice(0, 7);
+        break;
+      case 'week':
+        // Get the start of the week (first day of the 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;
+        // Ensure tags array is updated
+        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]
+      };
     }
   });
 
-  console.log(data['2024-12']);
-
   revalidateTag('statistics');
 
   return data;
diff --git a/src/app/(dashboard)/(default_layout)/statistics/page.tsx b/src/app/(dashboard)/(default_layout)/statistics/page.tsx
@@ -4,6 +4,7 @@ import {
   getTotalTimeTaken,
   getHighestScoringTag
 } 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';
@@ -26,7 +27,8 @@ export default async function StatisticsPage() {
       getStatsChartData({
         userUid: user.uid,
         from: '2024-01-01',
-        to: '2024-12-31'
+        to: '2024-12-31',
+        step: 'day'
       }),
       getTotalQuestionCount(user.uid),
       getTotalTimeTaken(user.uid),
@@ -40,10 +42,7 @@ export default async function StatisticsPage() {
           Statistics
         </h1>
         <div className="flex gap-3">
-          <Button>
-            <Calendar className="size-4 mr-2" />
-            Date Range
-          </Button>
+          <StatsRangePicker />
           <Button variant="default">
             <Stars className="size-4 text-yellow-300 fill-yellow-300" />
           </Button>
diff --git a/src/components/statistics/range-picker.tsx b/src/components/statistics/range-picker.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import { Button } from '../ui/button';
+import { Calendar } from 'lucide-react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { STATISTICS_STEPS } from '@/utils/constants/statistics-filters';
+
+export default function StatsRangePicker() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const updateDateRange = (range: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('range', range);
+    router.push(`?${params.toString()}`);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="default"
+          padding="sm"
+          size="sm"
+          className="flex items-center gap-x-2.5 text-xs group"
+        >
+          <Calendar className="size-4 mr-2" />
+          Date Range
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="center"
+        className="!p-0 w-40 bg-black border border-black-50 text-white text-sm"
+      >
+        <DropdownMenuGroup className="p-1">
+          {STATISTICS_STEPS.map((step) => (
+            <DropdownMenuItem
+              key={step.value}
+              className="hover:!text-white"
+              onClick={() => updateDateRange(step.value)}
+            >
+              {step.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/statistics/total-question-chart.tsx b/src/components/statistics/total-question-chart.tsx
@@ -27,91 +27,52 @@ const chartConfig = {
   }
 } satisfies ChartConfig;
 
+export interface StatsChartData {
+  [key: string]: {
+    totalQuestions: number;
+    tagCounts: Record<string, number>;
+    tags: string[];
+  };
+}
+
 export default function QuestionChart({
   questionData
 }: {
   questionData: StatsChartData;
 }) {
   const chartData = useMemo(() => {
     const entries = Object.entries(questionData);
-    const sortedEntries = entries.sort(
-      (a, b) => new Date(a[0]).getTime() - new Date(b[0]).getTime()
-    );
-    const monthCount = sortedEntries.length;
-
-    if (monthCount < 3) {
-      // Convert to weekly or daily data
-      const allDates = sortedEntries.flatMap(([month, data]) => {
-        const [year, monthNum] = month.split('-');
-        const daysInMonth = new Date(
-          Number(year),
-          Number(monthNum),
-          0
-        ).getDate();
-        return Array.from({ length: daysInMonth }, (_, i) => {
-          const day = i + 1;
-          const date = `${year}-${monthNum.padStart(2, '0')}-${day
-            .toString()
-            .padStart(2, '0')}`;
-          return [date, data.totalQuestions / daysInMonth];
-        });
-      });
 
-      if (monthCount < 1) {
-        // Daily data
-        return allDates.map(([date, questions]) => ({
-          date: new Date(date).toLocaleDateString('en-US', {
-            month: 'short',
-            day: 'numeric'
-          }),
-          questions: Math.round(Number(questions))
-        }));
-      } else {
-        // Weekly data
-        const weeklyData: { [week: string]: number } = {};
-        allDates.forEach(([date, questions]) => {
-          const week = getWeekNumber(new Date(date));
-          weeklyData[week] = (weeklyData[week] || 0) + Number(questions);
-        });
-        return Object.entries(weeklyData).map(([week, questions]) => ({
-          date: `Week ${week}`,
-          questions: Math.round(questions)
-        }));
-      }
-    } else {
-      // Monthly data (original logic)
-      return sortedEntries.map(([month, data]) => ({
-        date: new Date(month).toLocaleDateString('en-US', {
-          month: 'short',
-          year: 'numeric'
-        }),
-        questions: data.totalQuestions
-      }));
-    }
+    // Directly use the keys as they should now be pre-formatted
+    return entries.map(([date, data]) => ({
+      date: date,
+      questions: data.totalQuestions
+    }));
   }, [questionData]);
 
   const trend = useMemo(() => {
+    if (chartData.length < 2) {
+      return { percentage: 0, isUp: true };
+    }
+
     const lastPeriod = chartData[chartData.length - 1];
     const previousPeriod = chartData[chartData.length - 2];
 
-    if (lastPeriod && previousPeriod) {
-      const percentageChange =
-        ((lastPeriod.questions - previousPeriod.questions) /
-          previousPeriod.questions) *
-        100;
-      return {
-        percentage: Math.abs(percentageChange).toFixed(2),
-        isUp: percentageChange > 0
-      };
-    }
+    const percentageChange =
+      ((lastPeriod.questions - previousPeriod.questions) /
+        previousPeriod.questions) *
+      100;
 
-    return { percentage: 0, isUp: true };
+    return {
+      percentage: Math.abs(percentageChange).toFixed(2),
+      isUp: percentageChange > 0
+    };
   }, [chartData]);
 
   const periodText = useMemo(() => {
-    const monthCount = Object.keys(questionData).length;
-    if (monthCount < 1) return 'days';
-    if (monthCount < 3) return 'weeks';
+    const entryKeys = Object.keys(questionData);
+    if (entryKeys[0]?.includes(',')) return 'days';
+    if (entryKeys[0]?.length === 10) return 'weeks';
     return 'months';
   }, [questionData]);
 
@@ -163,7 +124,7 @@ export default function QuestionChart({
               tickLine={false}
               axisLine={false}
               tickMargin={8}
-              tickFormatter={(value) => value.split(' ')[0]}
+              tickFormatter={(value) => value.split(',')[0]}
             />
             <YAxis
               tickLine={false}
@@ -194,21 +155,3 @@ export default function QuestionChart({
     </Card>
   );
 }
-
-// Helper function to get week number
-function getWeekNumber(date: Date) {
-  const d = new Date(
-    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
-  );
-  const dayNum = d.getUTCDay() || 7;
-  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
-  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
-  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
-}
-
-export interface StatsChartData {
-  [month: string]: {
-    totalQuestions: number;
-    tagCounts: Record<string, number>;
-  };
-}
diff --git a/src/types/Stats.ts b/src/types/Stats.ts
@@ -1,6 +1,7 @@
-export interface StatsChartData {
-  [month: string]: {
+export type StatsChartData = {
+  [key: string]: {
     totalQuestions: number;
     tagCounts: Record<string, number>;
+    tags: string[];
   };
-}
+};
diff --git a/src/utils/constants/statistics-filters.ts b/src/utils/constants/statistics-filters.ts
@@ -0,0 +1,14 @@
+export const STATISTICS_STEPS = [
+  {
+    value: 'last-7-days',
+    label: 'Last 7 days'
+  },
+  {
+    value: 'last-30-days',
+    label: 'Last 30 days'
+  },
+  {
+    value: 'last-90-days',
+    label: 'Last 90 days'
+  }
+];
