Add Learning Analytics Dashboard with study tracking and performance insights - #17
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: RamNarra <106406667+RamNarra@users.noreply.github.com>
Co-authored-by: RamNarra <106406667+RamNarra@users.noreply.github.com>
Co-authored-by: RamNarra <106406667+RamNarra@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive learning analytics dashboard that provides students with insights into their study patterns and performance. The feature includes mock data generation, analytics calculations for various metrics (study time, quiz performance, habits), and a rich UI dashboard with visualizations. The implementation follows the existing authentication patterns and adds conditional navigation for authenticated users only.
Key Changes:
- Added complete type definitions for learning analytics data structures (StudyTime, Performance, Habits, Predictions, StudySession, QuizResult)
- Implemented analytics service with mock data generators and calculation algorithms for metrics including exam readiness, improvement rate, and study habit analysis
- Created AnalyticsPage with animated visualizations for daily/weekly study time, subject breakdown, performance analysis, and personalized recommendations
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| types.ts | Adds learning analytics type definitions including interfaces for StudySession, QuizResult, and LearningAnalytics with nested interfaces |
| services/analytics.ts | New analytics service with mock data generation and calculation engine for study metrics, performance trends, and exam readiness predictions |
| pages/AnalyticsPage.tsx | New dashboard page displaying key metrics cards, study time visualizations, performance analysis, habits insights, and exam readiness score |
| components/Navbar.tsx | Adds conditional Analytics navigation link visible only to authenticated users |
| App.tsx | Adds /analytics route to application routing configuration |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { Menu, X, BookOpen, LayoutDashboard, User, LogIn, Sparkles, Calculator, Terminal, Sun, Moon, BarChart3 } from 'lucide-react'; | ||
| import { Menu, X, BookOpen, LayoutDashboard, User, LogIn, Sparkles, Calculator, Terminal, Sun, Moon, Brain } from 'lucide-react'; |
There was a problem hiding this comment.
There are duplicate import statements for lucide-react icons. Line 6 imports BarChart3 while line 7 imports Brain, but both lines import the same base icons (Menu, X, BookOpen, etc.). These should be merged into a single import statement that includes both BarChart3 and Brain along with the other icons.
| import { Menu, X, BookOpen, LayoutDashboard, User, LogIn, Sparkles, Calculator, Terminal, Sun, Moon, BarChart3 } from 'lucide-react'; | |
| import { Menu, X, BookOpen, LayoutDashboard, User, LogIn, Sparkles, Calculator, Terminal, Sun, Moon, Brain } from 'lucide-react'; | |
| import { Menu, X, BookOpen, LayoutDashboard, User, LogIn, Sparkles, Calculator, Terminal, Sun, Moon, BarChart3, Brain } from 'lucide-react'; |
|
|
||
| // Calculate improvement rate | ||
| const improvementRate = quizResults.length >= 2 | ||
| ? ((quizResults[quizResults.length - 1].score - quizResults[0].score) / quizResults[0].score) * 100 |
There was a problem hiding this comment.
Division by zero error when quizResults[0].score is 0. If the first quiz score is 0, calculating improvement rate will result in Infinity or -Infinity. Add a check to handle the case where the initial score is 0, or use a different calculation method such as the absolute difference or set a minimum threshold.
| ? ((quizResults[quizResults.length - 1].score - quizResults[0].score) / quizResults[0].score) * 100 | |
| ? (quizResults[0].score === 0 | |
| ? 0 | |
| : ((quizResults[quizResults.length - 1].score - quizResults[0].score) / quizResults[0].score) * 100) |
| return `${h - 12} PM`; | ||
| }; | ||
|
|
||
| const mostActiveTime = `${formatHour(mostActiveHour)} - ${formatHour((parseInt(mostActiveHour) + 1).toString())}`; |
There was a problem hiding this comment.
Potential issue with hour range display when mostActiveHour is 23. Adding 1 to hour 23 results in 24, which when formatted would incorrectly display as "12 PM" instead of "12 AM" for midnight. Consider using modulo arithmetic: (parseInt(mostActiveHour) + 1) % 24 to properly handle the 23 to 0 hour transition.
| const mostActiveTime = `${formatHour(mostActiveHour)} - ${formatHour((parseInt(mostActiveHour) + 1).toString())}`; | |
| const mostActiveTime = `${formatHour(mostActiveHour)} - ${formatHour(((parseInt(mostActiveHour) + 1) % 24).toString())}`; |
| export const calculateAnalytics = ( | ||
| sessions: StudySession[], | ||
| quizResults: QuizResult[] | ||
| ): LearningAnalytics => { |
There was a problem hiding this comment.
The calculateAnalytics function lacks documentation. Given its complexity and importance as the core analytics calculation engine, it should have a JSDoc comment explaining its parameters, return value, and the algorithm used to calculate metrics like exam readiness (60% performance, 40% study time consistency).
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
@copilot apply changes based on the comments in this thread |
|
@copilot apply changes based on the comments in this thread |
Implements a personal learning analytics dashboard that visualizes study patterns, performance metrics, and generates exam readiness predictions based on mock data.
Implementation
Types & Data Model (
types.ts,services/analytics.ts)LearningAnalytics,StudySession,QuizResultinterfacesDashboard UI (
pages/AnalyticsPage.tsx)Navigation (
App.tsx,Navbar.tsx)/analyticsroute with auth protection (redirects to login if not authenticated)Example
Screenshot
Notes
Current implementation uses generated mock data. For production use, replace
generateMockStudySessions()andgenerateMockQuizResults()with Firestore queries to persist real study session and quiz data.Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.