UI updates - graphs added in results#47
UI updates - graphs added in results#47GowthamDhanaraju wants to merge 18 commits intoevalify:developmentfrom
Conversation
- Added icons to question and explanation titles in Match Following, MCQ, and True/False question components for better visual representation. - Updated the MCQ question component to allow clickable options for selecting correct answers, enhancing user experience. - Improved the Tiptap editor to accept a height prop for better customization. - Refactored select components for cleaner code and improved styling. - Created a new test page for editing questions with sample data to facilitate testing.
…anagement - Created types for student overall results, recent test results, course results, test summaries, detailed test results, question results, and results filters. - Implemented ResultsAPI class with methods to fetch student overview, course results, test summaries, detailed test results, and recent results. - Added mock data for development and testing purposes for both student and teacher results.
feat: implement StudentResultsTable component for detailed student results feat: define types for teacher-specific results in types.ts refactor: remove deprecated TestSummaries component and related types refactor: delete unused types from results/types.ts fix: update results-api to use new types and mock data structure feat: create utility functions for consistent score color display chore: add stub for useRecentTestResults to resolve import errors
- Removed `question-stats-table` component and its export from `index.ts`. - Added `marks-frequency-bar-chart`, `question-wise-bar-chart`, and `student-performance-pie-chart` components for improved data visualization. - Updated mock data in `results-api.ts` to reflect more realistic test results and added new courses and tests. - Increased the number of mock students and questions for better testing scenarios.
…nts; update mock data for testing
|
Caution Review failedThe pull request is closed. WalkthroughThis update introduces several new chart components for visualizing student and teacher test results, including performance trends, distributions, and question-wise analysis. It reorganizes the teacher and student results pages to incorporate these charts, enhances mock data with more detailed course and test entries, and removes obsolete components and exports. Changes
Sequence Diagram(s)sequenceDiagram
participant Student as StudentResultsPage
participant Trends as StudentPerformanceTrendsChart
participant API as ResultsAPI
Student->>API: Fetch courseResults
Student->>Trends: Pass courseResults as prop
Trends->>Student: Render performance trends chart
sequenceDiagram
participant Teacher as TeacherResultsPage
participant API as ResultsAPI
participant Pie as StudentPerformancePieChart
participant Bar as MarksFrequencyBarChart
participant QBar as QuestionWiseBarChart
Teacher->>API: Fetch test statistics
Teacher->>Pie: Pass scores
Teacher->>Bar: Pass scores
Teacher->>QBar: Pass questionStats
Pie->>Teacher: Render pie chart
Bar->>Teacher: Render bar chart
QBar->>Teacher: Render question-wise bar chart
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (5)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Pull Request Overview
This PR introduces several new chart components and integrates them into both the teacher and student results pages to visualize performance data.
- Added new reusable chart components (pie, bar, and line) under
components/results - Integrated graphs into the teacher results page with toggleable layouts
- Integrated performance trends chart into the student results page and cleaned up unused exports
Reviewed Changes
Copilot reviewed 11 out of 14 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/results/teacher/student-performance-pie-chart.tsx | New pie chart for overall student performance |
| src/components/results/teacher/question-wise-bar-chart.tsx | New bar chart for question-wise correct/wrong stats |
| src/components/results/teacher/marks-frequency-bar-chart.tsx | New line chart for marks frequency distribution |
| src/components/results/teacher/index.ts | Removed unused export |
| src/app/(test)/teacher-results/page.tsx | Integrated teacher graphs section with layout toggle |
| src/components/results/student/performance-trends-chart.tsx | New line chart for student performance trends |
| src/app/(test)/student-results/page.tsx | Added performance trends chart to student view |
Comments suppressed due to low confidence (1)
src/components/results/teacher/student-performance-pie-chart.tsx:1
- This new chart component doesn’t have accompanying unit or integration tests. Consider adding tests to verify that
getPerformanceDistributioncorrectly bins various score sets.
import React from "react";
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (9)
src/components/results/teacher/marks-frequency-bar-chart.tsx (1)
23-26: Consider renaming component to reflect actual chart type.The component name
MarksFrequencyBarChartsuggests it renders a bar chart, but it actually renders a line chart. Consider renaming toMarksFrequencyLineChartfor clarity.src/components/results/student/performance-trends-chart.tsx (1)
32-89: Consider extracting chart dataset logic for better maintainability.The dataset creation logic is quite complex and could benefit from extraction into a separate function to improve readability and testability.
Consider extracting:
const createCourseDatasets = ( filteredCourses: CourseResult[], labels: string[], palette: string[] ) => { return filteredCourses.map((course, idx) => { // existing dataset logic here }); };This would make the main component more focused and the dataset logic more testable.
src/components/results/teacher/question-wise-bar-chart.tsx (2)
30-34: Incomplete scroll logic implementation.The scroll threshold logic sets up conditions but doesn't actually implement scrolling. The component slices data in horizontal mode but doesn't provide UI feedback about truncated data or scrolling controls.
Consider either:
- Implementing actual scroll behavior with UI indicators
- Removing the incomplete logic and handling scrolling at the parent level
- Adding a note in props documentation about external scroll handling
43-43: Hard-coded colors should use design system.The green and red colors should be consistent with the application's design system rather than hard-coded hex values.
Consider using CSS custom properties or design system tokens:
-backgroundColor: "#22c55e", +backgroundColor: "hsl(var(--success))", -backgroundColor: "#ef4444", +backgroundColor: "hsl(var(--destructive))",Also applies to: 49-49
src/components/results/student/performance-distribution-chart.tsx (2)
56-60: Add explicit empty state handling.While the function returns an empty array for no results, consider adding a user-facing empty state message in the component.
+if (tests.length === 0) { + return ( + <Card className="border border-border shadow-sm"> + <CardContent className="pt-6"> + <div className="h-80 w-full flex items-center justify-center"> + <p className="text-muted-foreground">No test data available</p> + </div> + </CardContent> + </Card> + ); +}
108-117: Consider adding accessibility labels to the select.The select component could benefit from proper ARIA labels for better accessibility.
<Select value={grouping} onValueChange={handleGroupingChange}> - <SelectTrigger className="w-[100px] h-8"> + <SelectTrigger className="w-[100px] h-8" aria-label="Score range grouping"> <SelectValue placeholder="Group by" /> </SelectTrigger>src/app/(test)/teacher-results/page.tsx (3)
500-506: Extract repeated calculation into a helper function.The calculation pattern
(score/100) * totalMarksis repeated multiple times. Consider extracting it into a helper function for better maintainability.Add a helper function at the component level:
+const calculateAbsoluteMarks = (percentage: number, totalMarks: number): string => { + return ((percentage / 100) * totalMarks).toFixed(1); +};Then simplify the repeated calculations:
-{testStatistics.averageScore.toFixed(1)}% ( -{( - (testStatistics.averageScore / 100) * - testStatistics.totalMarks -).toFixed(1)} -/{testStatistics.totalMarks}) +{testStatistics.averageScore.toFixed(1)}% ( +{calculateAbsoluteMarks(testStatistics.averageScore, testStatistics.totalMarks)} +/{testStatistics.totalMarks})Also applies to: 530-541, 551-557
574-591: Consider using a proper toggle component for better accessibility.The current implementation works but could benefit from using a proper toggle/segmented control component that provides better keyboard navigation and ARIA attributes.
Consider using a ToggleGroup component from your UI library or implementing proper ARIA attributes:
-<div className="inline-flex rounded-md shadow-sm bg-muted border border-border"> +<div className="inline-flex rounded-md shadow-sm bg-muted border border-border" role="group" aria-label="Chart layout toggle"> <button type="button" - aria-label="Vertical layout" + aria-label="Vertical layout" + aria-pressed={chartsStacked} className={...} onClick={() => setChartsStacked(true)} >
658-669: Remove commented out code.This commented section should be removed since it has been replaced by the new Performance Graphs section. Keeping dead code creates confusion and maintenance overhead.
-{/* <div className="mb-2"> - <h2 className="text-xl font-semibold">Question Analysis</h2> - <p className="text-sm text-muted-foreground mt-1"> - Performance metrics for each question on the test - </p> -</div> -<div className="mb-8"> - <QuestionBarChart questions={testStatistics?.questionStats || []} /> -</div> -<div className="mb-8"> - <MarksPieChart questions={testStatistics?.questionStats || []} /> -</div> */}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (12)
src/app/(test)/student-results/page.tsx(2 hunks)src/app/(test)/teacher-results/page.tsx(7 hunks)src/components/results/common/detailed-test-result.tsx(3 hunks)src/components/results/common/marks-pie-chart.tsx(1 hunks)src/components/results/common/question-bar-chart.tsx(1 hunks)src/components/results/student/performance-distribution-chart.tsx(1 hunks)src/components/results/student/performance-trends-chart.tsx(1 hunks)src/components/results/teacher/index.ts(0 hunks)src/components/results/teacher/marks-frequency-bar-chart.tsx(1 hunks)src/components/results/teacher/question-wise-bar-chart.tsx(1 hunks)src/components/results/teacher/student-performance-pie-chart.tsx(1 hunks)src/lib/results-api.ts(16 hunks)
💤 Files with no reviewable changes (1)
- src/components/results/teacher/index.ts
🧰 Additional context used
🧬 Code Graph Analysis (6)
src/components/results/teacher/student-performance-pie-chart.tsx (2)
src/components/ui/tooltip.tsx (1)
Tooltip(61-61)src/components/ui/card.tsx (4)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardContent(91-91)
src/app/(test)/student-results/page.tsx (1)
src/components/results/student/performance-trends-chart.tsx (1)
StudentPerformanceTrendsChart(32-222)
src/components/results/student/performance-distribution-chart.tsx (3)
src/components/ui/tooltip.tsx (1)
Tooltip(61-61)src/components/ui/card.tsx (4)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardContent(91-91)src/components/ui/select.tsx (5)
Select(175-175)SelectTrigger(183-183)SelectValue(184-184)SelectContent(176-176)SelectItem(178-178)
src/components/results/teacher/marks-frequency-bar-chart.tsx (2)
src/components/ui/tooltip.tsx (1)
Tooltip(61-61)src/components/ui/card.tsx (4)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardContent(91-91)
src/components/results/teacher/question-wise-bar-chart.tsx (2)
src/components/ui/tooltip.tsx (1)
Tooltip(61-61)src/components/ui/card.tsx (4)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardContent(91-91)
src/lib/results-api.ts (3)
src/components/results/index.ts (2)
StudentTestResult(17-17)QuestionStat(18-18)src/components/results/teacher/types.ts (2)
StudentTestResult(39-54)QuestionStat(76-86)src/components/results/teacher/question-wise-bar-chart.tsx (1)
QuestionStat(15-19)
🔇 Additional comments (15)
src/components/results/common/marks-pie-chart.tsx (1)
1-47: LGTM! Clean and well-structured pie chart component.The implementation correctly handles the three answer states (correct, wrong, unanswered) with proper mark aggregation and fallback handling. The Chart.js configuration is appropriate with good color choices and responsive design.
src/components/results/common/question-bar-chart.tsx (1)
1-66: LGTM! Well-implemented stacked bar chart for question analysis.The component correctly transforms question results into binary datasets for visualization, with proper Chart.js configuration including stacked axes, integer precision, and responsive design.
src/lib/results-api.ts (2)
169-296: LGTM! Enhanced mock data supports new visualization components.The expanded test data across courses provides richer datasets for the new chart components, enabling more realistic performance trend visualization.
Also applies to: 303-401, 407-505, 699-891
1441-1443: Good enhancement to support detailed analytics.Increasing the sample sizes (30 students, 20 questions) and adding
totalStudentsfield provides more comprehensive data for the teacher analytics charts.Also applies to: 1462-1463, 1504-1504
src/app/(test)/student-results/page.tsx (2)
15-15: LGTM! Clean import addition.The import follows the established pattern for component imports.
174-178: Well-positioned chart integration.The performance trends chart is logically placed in the overview section and correctly uses the
courseResultsstate as its data source.src/components/results/common/detailed-test-result.tsx (2)
139-177: Good refactoring for improved readability.Introducing
isCorrectandisSelectedconstants eliminates repeated expressions and makes the conditional logic clearer.
313-315: Improved formatting for better readability.Breaking the function call across multiple lines improves code readability.
src/components/results/student/performance-distribution-chart.tsx (2)
33-39: Well-designed color mapping function.The color progression from red (low scores) to green (high scores) provides intuitive visual feedback aligned with common score interpretations.
60-91: Solid distribution calculation logic.The bin generation and score assignment logic handles edge cases well, particularly the special handling for perfect scores (100%) to ensure they fall into the last bin.
src/app/(test)/teacher-results/page.tsx (5)
30-31: LGTM!The new icon imports for layout toggle functionality are appropriate.
35-39: LGTM!The chart component imports align with the new visualization features mentioned in the PR objectives.
63-63: LGTM!The state variable for managing chart layout is well-named and properly initialized.
516-520: Good defensive programming with nullish coalescing.The handling of potentially null
totalStudentswith the??operator is appropriate.
682-683: ```shell
#!/bin/bash
set -eLocate occurrences of
testStatisticsand surrounding context in page.tsxrg -n 'testStatistics' -C5 src/app/(test)/teacher-results/page.tsx
Show the top of the file to inspect data fetching / props resolution
sed -n '1,200p' src/app/(test)/teacher-results/page.tsx
</details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
src/components/results/teacher/student-performance-pie-chart.tsx
Outdated
Show resolved
Hide resolved
…e colors; update performance distribution comments
- Fix SSR compatibility in student-performance-pie-chart by adding window check for getComputedStyle - Fix rounding error in QuestionWiseBarChart calculation to ensure correct + wrong = attemptedCount - Rename QuestionStat to QuestionStatChart in question-wise-bar-chart to avoid type conflicts - Add useThemeColors hook for SSR-safe theme detection in chart components - Switch from sonner to useToast hook for toast messages (partial implementation)
2 participants
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Chores