feat: init stats page refresh (WIP/ON HOLD)

src/app/(app)/(default_layout)/layout.tsx

@@ -5,20 +5,18 @@ import UserXp from '@/components/ui/user-xp';
 
 export default function StatisticsLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <div className="text-white flex flex-col gap-y-4 relative h-full">
-      <div className="container">
-        <div className="flex w-full items-center container">
-          <div className="flex-1">
-            <SidebarLayoutTrigger />
-          </div>
-          <div className="flex items-center gap-x-3">
-            <CurrentStreak />
-            <UserXp />
-            <UpgradeModal />
-          </div>
+    <div className="text-white flex flex-col gap-y-4 relative h-full container">
+      <div className="flex w-full items-center">
+        <div className="flex-1">
+          <SidebarLayoutTrigger />
+        </div>
+        <div className="flex items-center gap-x-3">
+          <CurrentStreak />
+          <UserXp />
+          <UpgradeModal />
         </div>
       </div>
-      <div className="container">{children}</div>
+      {children}
     </div>
   );
 }

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

@@ -1,5 +1,6 @@
 import StatsRangePicker from '@/components/app/statistics/range-picker';
 import QuestionChart from '@/components/app/statistics/total-question-chart';
+import DifficultyRadialChart from '@/components/app/statistics/difficulty-radial-chart';
 
 import { useUserServer } from '@/hooks/use-user-server';
 import { StatsSteps } from '@/types/Stats';
@@ -12,11 +13,22 @@ import SuggestedQuestions from '@/components/app/statistics/suggested-questions'
 import StatisticsReport from '@/components/app/statistics/statistics-report';
 import StatisticsOverviewMenu from '@/components/app/statistics/statistics-overview-menu';
 import QuestionTracker from '@/components/app/statistics/question-tracker';
+import { createMetadata } from '@/utils/seo';
+import { getUserDisplayName } from '@/utils/user';
 
-export const metadata = {
-  title: 'Statistics | techblitz',
-  description: 'View your coding statistics and progress',
-};
+export async function generateMetadata() {
+  return createMetadata({
+    title: 'Statistics | TechBlitz',
+    description:
+      'Dive into your current coding journey, track your progress, and gain insight on how to improve your skills.',
+    image: {
+      text: 'Statistics | TechBlitz',
+      bgColor: '#000',
+      textColor: '#fff',
+    },
+    canonicalUrl: '/statistics',
+  });
+}
 
 export default async function StatisticsPage({
   searchParams,
@@ -33,36 +45,33 @@ export default async function StatisticsPage({
   const range = (searchParams.range as StatsSteps) || '7d';
   const { step } = STATISTICS[range];
 
-  // Prefetch data
-  const { stats } = await getData({
-    userUid: user.uid,
-    from: range,
-    to: new Date().toISOString(),
-    step,
-  });
+  // Prefetch data - get both time-grouped and overall stats
+  const [timeGroupedStats, overallStats] = await Promise.all([
+    getData({
+      userUid: user.uid,
+      from: range,
+      to: new Date().toISOString(),
+      step,
+      includeDifficultyData: true,
+    }),
+    getData({
+      userUid: user.uid,
+      from: 'all',
+      to: new Date().toISOString(),
+      includeDifficultyData: true,
+    }),
+  ]);
 
   return (
-    <div>
-      <div className="flex flex-col gap-3 md:flex-row w-full justify-between md:items-center">
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 md:flex-row w-full justify-between">
         <Hero
-          heading="Coding Journey"
+          heading={`${getUserDisplayName(user)}'s Statistics`}
           container={false}
-          subheading="An overview of your coding journey on TechBlitz."
+          subheading="Dive into your coding journey, track your progress, and gain insight on how to improve your skills."
+          gridPosition="top-right"
         />
-        <div className="flex gap-3">
-          <StatsRangePicker selectedRange={STATISTICS[range].label} />
-          <StatisticsOverviewMenu user={user} />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-12 gap-y-4 gap-x-8 mt-8 md:mt-0">
-        <div className="max-h-[28rem] col-span-12 mb-4">
-          {stats && <QuestionChart questionData={stats} step={step} />}
-        </div>
-        {stats && <QuestionTracker className="mb-4" stats={stats} step={step} range={range} />}
-        {/** suggested q's and analysis blocks TODO: CHANGE SUGGESTED QUESTIONS TO STREAK DATA (I THINK) */}
-        <SuggestedQuestions />
-        <StatisticsReport />
+        {overallStats.stats && <DifficultyRadialChart questionData={overallStats.stats} />}
       </div>
     </div>
   );

src/components/app/statistics/difficulty-radial-chart.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { useMemo } from 'react';
+import { RadialBarChart, RadialBar, Legend, ResponsiveContainer, Tooltip } from 'recharts';
+import { StatsChartData } from '@/types/Stats';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+
+// Define colors for each difficulty
+// Use the same difficulty colors as defined in the app's utility functions
+const DIFFICULTY_COLORS = {
+  BEGINNER: '#3b82f6', // blue-500
+  EASY: '#22c55e', // green-500
+  MEDIUM: '#eab308', // yellow-500
+  HARD: '#ef4444', // red-500
+};
+
+// Map difficulty to friendly names
+const DIFFICULTY_LABELS = {
+  BEGINNER: 'Beginner',
+  EASY: 'Easy',
+  MEDIUM: 'Medium',
+  HARD: 'Hard',
+};
+
+export default function DifficultyRadialChart({ questionData }: { questionData: StatsChartData }) {
+  // Calculate total questions by difficulty
+  const difficultyData = useMemo(() => {
+    // Create object to store totals by difficulty
+    const totalsByDifficulty: Record<string, number> = {};
+    let grandTotal = 0;
+
+    // Sum up all question counts by difficulty across all time periods
+    Object.values(questionData).forEach((data) => {
+      // Only process entries that have difficulties data
+      if (data.difficulties) {
+        Object.entries(data.difficulties).forEach(([difficulty, count]) => {
+          // Ensure count is treated as a number
+          const countValue = count ? Number(count) : 0;
+          totalsByDifficulty[difficulty] = (totalsByDifficulty[difficulty] || 0) + countValue;
+          grandTotal += countValue;
+        });
+      }
+    });
+
+    // Convert to array format for radial chart
+    // Sort from highest to lowest count for better visualization
+    const chartData = Object.entries(totalsByDifficulty)
+      .filter(([_, count]) => count > 0) // Only include non-zero counts
+      .sort((a, b) => b[1] - a[1]) // Sort by count (descending)
+      .map(([difficulty, count], index) => {
+        // Calculate the angle for the radial chart
+        return {
+          name: DIFFICULTY_LABELS[difficulty as keyof typeof DIFFICULTY_LABELS] || difficulty,
+          value: count,
+          difficulty,
+          fill: DIFFICULTY_COLORS[difficulty as keyof typeof DIFFICULTY_COLORS] || '#888',
+          percentage: grandTotal > 0 ? ((count / grandTotal) * 100).toFixed(1) : '0',
+        };
+      });
+
+    return { chartData, grandTotal };
+  }, [questionData]);
+
+  // Generate a legend that shows both counts and percentages
+  const LegendContent = () => {
+    return (
+      <div className="flex flex-wrap justify-center gap-4 mt-4">
+        {difficultyData.chartData.map((entry, index) => (
+          <div key={index} className="flex items-center">
+            <div
+              className="w-3 h-3 rounded-full mr-2"
+              style={{ backgroundColor: entry.fill }}
+            ></div>
+            <div className="flex flex-col">
+              <span className="text-sm font-medium">{entry.name}</span>
+              <span className="text-xs text-gray-400">
+                {entry.value} ({entry.percentage}%)
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // Custom tooltip component
+  const CustomTooltip = ({ active, payload }: any) => {
+    if (active && payload && payload.length) {
+      const data = payload[0].payload;
+      return (
+        <div className="bg-[#090909] border border-black-50 rounded-md shadow-lg">
+          <p className="text-white px-3 py-2 font-onest text-sm font-medium">{data.name}</p>
+          <Separator className="bg-black-50" />
+          <div className="flex items-center gap-2 px-3 py-2">
+            <div className="size-2 rounded-[2px]" style={{ backgroundColor: data.fill }} />
+            <p className="text-gray-300 text-sm">Questions: {data.value}</p>
+          </div>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <>
+      {difficultyData.grandTotal > 0 ? (
+        <div className="w-full h-[350px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <RadialBarChart
+              cx="50%"
+              cy="50%"
+              innerRadius="10%"
+              outerRadius="80%"
+              barSize={17}
+              data={difficultyData.chartData}
+            >
+              <RadialBar
+                background={{ fill: '#090909' }}
+                label={{
+                  position: 'insideStart',
+                  fill: '#fff',
+                  fontSize: 12,
+                  formatter: (value: number) => value,
+                }}
+                dataKey="value"
+                startAngle={45}
+                endAngle={450}
+              />
+              <Tooltip content={<CustomTooltip />} animationDuration={500} />
+            </RadialBarChart>
+          </ResponsiveContainer>
+        </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center gap-4 h-[300px]">
+          <p className="text-lg text-muted-foreground text-center">
+            No difficulty data available due to lack of questions answered
+          </p>
+          <Button href="/questions">Start answering now</Button>
+        </div>
+      )}
+    </>
+  );
+}

src/components/shared/hero.tsx

@@ -7,8 +7,16 @@ export default function Hero(opts: {
   children?: React.ReactNode;
   container?: boolean;
   chip?: React.ReactNode;
+  gridPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }) {
-  const { heading, subheading, children, container = true, chip } = opts;
+  const {
+    heading,
+    subheading,
+    children,
+    container = true,
+    chip,
+    gridPosition = 'bottom-left',
+  } = opts;
 
   return (
     <section className="w-full pt-14 pb-8 group relative">
@@ -30,7 +38,7 @@ export default function Hero(opts: {
         )}
         {children}
       </div>
-      <Grid size={25} position="bottom-left" />
+      <Grid size={25} position={gridPosition} />
 
       {/* Fade-out gradient overlay */}
       <div className="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-[#000000] to-transparent pointer-events-none"></div>

src/types/Stats.ts

@@ -1,12 +1,18 @@
 import { STEPS } from '@/utils/constants';
-import { StatisticsReport } from '@prisma/client';
+import { StatisticsReport, QuestionDifficulty } from '@prisma/client';
 import { Question } from '@/types/Questions';
 
+// Record of difficulty types with their counts
+export type DifficultyRecord = {
+  [K in QuestionDifficulty]?: number;
+};
+
 export type StatsChartData = {
   [key: string]: {
     totalQuestions: number;
     tagCounts: Record<string, number>;
     tags: string[];
+    difficulties?: DifficultyRecord;
   };
 };