Skip to content

Performance Analytics Dashboard

Jump to bottom
github-actions[bot] edited this page Apr 24, 2026 · 2 revisions

Performance Analytics Dashboard

**Referenced Files in This Document** - [analytics.tsx](file://client/src/pages/analytics.tsx) - [performance-chart.tsx](file://client/src/components/dashboard/performance-chart.tsx) - [top-students.tsx](file://client/src/components/dashboard/top-students.tsx) - [tabs.tsx](file://client/src/components/ui/tabs.tsx) - [card.tsx](file://client/src/components/ui/card.tsx) - [theme-context.tsx](file://client/src/contexts/theme-context.tsx) - [utils.ts](file://client/src/lib/utils.ts) - [index.css](file://client/src/index.css) - [tailwind.config.ts](file://tailwind.config.ts) - [App.tsx](file://client/src/App.tsx)

Table of Contents

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Dependency Analysis
  7. Performance Considerations
  8. Troubleshooting Guide
  9. Conclusion

Introduction

This document provides a comprehensive guide to the Performance Analytics Dashboard component. It explains the dashboard layout architecture using a responsive grid system, the integration of visualization components (PerformanceChart, TopStudents panel, and pie charts), the tabbed interface for switching between class and individual insights, data binding patterns, state management for period selection, styling with Tailwind CSS and the card-based layout system, and placeholder implementations with future enhancement opportunities for individual student analytics.

Project Structure

The Performance Analytics Dashboard is implemented as a page component that composes reusable UI elements and visualization libraries. The page orchestrates:

  • A responsive grid layout using Tailwind CSS utilities
  • Card-based containers for each visualization
  • Recharts for bar and pie chart visualizations
  • Radix UI Tabs for toggling between class and individual insights
  • Placeholder content for individual student analytics
graph TB
Analytics["Analytics Page<br/>client/src/pages/analytics.tsx"] --> Grid["Responsive Grid<br/>Tailwind CSS"]
Grid --> PerfCard["Performance Chart Card<br/>Card + PerformanceChart"]
Grid --> TopCard["Top Students Card<br/>Card + TopStudents"]
Grid --> CompletionCard["Completion Rate Card<br/>Card + PieChart"]
Grid --> SubjectCard["Subject Distribution Card<br/>Card + PieChart"]
Analytics --> InsightsTabs["Insights Tabs<br/>Tabs + Content Panels"]
InsightsTabs --> ClassPanel["Class Insights Panel"]
InsightsTabs --> IndividualPanel["Individual Students Panel (Placeholder)"]
Loading

Diagram sources

  • analytics.tsx
  • performance-chart.tsx
  • top-students.tsx
  • tabs.tsx
  • card.tsx

Section sources

  • analytics.tsx

Core Components

This section documents the key building blocks of the dashboard and their roles.

  • Analytics Page: Orchestrates the layout, manages the period state, defines sample datasets for visualizations, and renders the tabbed insights panel.
  • PerformanceChart: A bar chart component that displays class vs school averages per subject with responsive sizing and theme-aware styling.
  • TopStudents: A ranked list of top-performing students with avatars and scores, featuring skeleton loading placeholders.
  • Tabs: A Radix UI-based tab system enabling switching between class and individual insights.
  • Card: A reusable card container providing consistent spacing, typography, and styling for dashboard sections.

Section sources

  • analytics.tsx
  • performance-chart.tsx
  • top-students.tsx
  • tabs.tsx
  • card.tsx

Architecture Overview

The dashboard follows a component-driven architecture:

  • The Analytics page serves as the container, managing state and assembling child components.
  • Visualization components encapsulate chart rendering and data handling.
  • UI primitives (Card, Tabs) provide consistent presentation and interaction patterns.
  • Styling leverages Tailwind CSS with theme-aware color tokens and responsive utilities.
graph TB
subgraph "Page Layer"
A["Analytics Page<br/>analytics.tsx"]
end
subgraph "Visualization Layer"
B["PerformanceChart<br/>performance-chart.tsx"]
C["TopStudents<br/>top-students.tsx"]
D["Pie Charts<br/>Recharts in analytics.tsx"]
end
subgraph "UI Primitives"
E["Card<br/>card.tsx"]
F["Tabs<br/>tabs.tsx"]
end
subgraph "Styling & Theming"
G["Tailwind CSS<br/>index.css + tailwind.config.ts"]
H["Theme Context<br/>theme-context.tsx"]
end
A --> B
A --> C
A --> D
A --> F
B --> H
C --> H
A --> E
E --> G
F --> G
B --> G
C --> G
D --> G
Loading

Diagram sources

  • analytics.tsx
  • performance-chart.tsx
  • top-students.tsx
  • tabs.tsx
  • card.tsx
  • index.css
  • tailwind.config.ts
  • theme-context.tsx

Detailed Component Analysis

Analytics Page Layout and State Management

The Analytics page:

  • Manages a period state for insights filtering (default monthly).
  • Defines sample datasets for test completion and subject distribution.
  • Uses a responsive grid system to arrange cards:
    • Two-column layout on medium screens and above.
    • Single-column layout on smaller screens.
  • Renders two pie charts (completion rate and subject distribution) using Recharts with ResponsiveContainer for adaptive sizing.
  • Implements a tabbed interface for class and individual insights.
sequenceDiagram
participant U as "User"
participant P as "Analytics Page"
participant T as "Tabs"
participant C1 as "Class Insights Panel"
participant C2 as "Individual Students Panel"
U->>P : Open Analytics
P->>P : Initialize period state (monthly)
P->>P : Define sample datasets
P->>P : Render grid layout
P->>T : Render Tabs (Class, Individuals)
U->>T : Switch to "Class"
T->>C1 : Show improvement areas and recommendations
U->>T : Switch to "Individuals"
T->>C2 : Show placeholder message
Loading

Diagram sources

  • analytics.tsx
  • tabs.tsx

Section sources

  • analytics.tsx

PerformanceChart Component

The PerformanceChart component:

  • Uses React Query to fetch class performance data (currently disabled with a mock dataset).
  • Applies theme-aware styling via the ThemeContext, adjusting grid lines, axes, and tooltips for light/dark modes.
  • Renders a responsive bar chart with class average and school average comparisons per subject.
  • Includes a skeleton loader during data fetching.
classDiagram
class PerformanceChart {
+useState theme
+useQuery data
+mockData
+render() BarChart
+tooltip styling
+axis styling
}
class ThemeContext {
+theme
+setTheme()
}
PerformanceChart --> ThemeContext : "uses"
Loading

Diagram sources

  • performance-chart.tsx
  • theme-context.tsx

Section sources

  • performance-chart.tsx
  • theme-context.tsx

TopStudents Component

The TopStudents component:

  • Fetches top student data via React Query (currently disabled with a mock dataset).
  • Displays a ranked list with avatars, names, classes, and scores.
  • Provides skeleton loaders for improved perceived performance.
flowchart TD
Start(["Render TopStudents"]) --> CheckQuery["Check React Query state"]
CheckQuery --> |Loading| ShowSkeleton["Show skeleton placeholders"]
CheckQuery --> |Success| ShowList["Render student list"]
ShowList --> MapStudents["Map each student to row"]
MapStudents --> End(["Done"])
ShowSkeleton --> End
Loading

Diagram sources

  • top-students.tsx

Section sources

  • top-students.tsx

Tabbed Interface Implementation

The tabbed interface uses Radix UI Tabs:

  • A grid-based TabsList provides equal-width triggers for "Class Insights" and "Individual Students".
  • TabsContent panels render distinct content for each tab.
  • The individual insights panel currently shows a placeholder message indicating future availability.
sequenceDiagram
participant U as "User"
participant TL as "TabsList"
participant TC as "TabsContent"
participant CI as "Class Panel"
participant II as "Individual Panel"
U->>TL : Click "Class Insights"
TL->>TC : Activate "class" content
TC->>CI : Render improvement areas and recommendations
U->>TL : Click "Individual Students"
TL->>TC : Activate "individuals" content
TC->>II : Render placeholder message
Loading

Diagram sources

  • tabs.tsx
  • analytics.tsx

Section sources

  • tabs.tsx
  • analytics.tsx

Data Binding Patterns and State Management

  • Period selection state: Managed at the Analytics page level with a default value suitable for initial rendering.
  • Visualization data: Provided as inline sample data for immediate UI feedback; components are structured to accept dynamic data from React Query.
  • Chart interactivity: Tooltips and legends are configured to improve readability and accessibility.
flowchart TD
PS["periodTab State<br/>default: monthly"] --> AC["Analytics Container"]
AC --> PC["PerformanceChart"]
AC --> TS["TopStudents"]
AC --> PZ["Pie Charts"]
PC --> RD["React Query Data/Mock"]
TS --> RD
PZ --> SD["Sample Datasets"]
Loading

Diagram sources

  • analytics.tsx
  • performance-chart.tsx
  • top-students.tsx

Section sources

  • analytics.tsx
  • performance-chart.tsx
  • top-students.tsx

Styling Approach and Card-Based Layout

  • Tailwind CSS provides utility-first styling with theme-aware tokens:
    • Color tokens for backgrounds, borders, and chart colors adapt to light/dark themes.
    • Responsive utilities define grid layouts and spacing.
  • The Card component standardizes container appearance with consistent padding, typography, and shadows.
  • The dashboard uses a two-tier grid:
    • First row: Performance chart (spanning two columns on medium screens) and Top Students panel.
    • Second row: Completion rate and Subject distribution pie charts.
graph TB
subgraph "Styling Tokens"
T1["Background/Foreground"]
T2["Primary/Muted"]
T3["Chart Colors (--chart-*)"]
end
subgraph "Components"
C1["Card"]
C2["Grid Utilities"]
end
T1 --> C1
T2 --> C1
T3 --> C1
T1 --> C2
T2 --> C2
Loading

Diagram sources

  • index.css
  • tailwind.config.ts
  • card.tsx
  • analytics.tsx

Section sources

  • index.css
  • tailwind.config.ts
  • card.tsx
  • analytics.tsx

Placeholder Implementations and Future Enhancements

  • Individual Students panel currently displays a placeholder message indicating future availability.
  • Enhancement opportunities include:
    • Integrating individual student analytics data via React Query.
    • Adding drill-down capabilities from class insights to specific student profiles.
    • Implementing interactive filters for subjects, periods, and student groups.
    • Incorporating personalized learning recommendations based on individual performance trends.

Section sources

  • analytics.tsx

Dependency Analysis

The dashboard components depend on:

  • React and React DOM for rendering.
  • Recharts for visualization.
  • Radix UI for accessible tabs.
  • TanStack React Query for data fetching patterns.
  • Tailwind CSS for styling and theme tokens.
graph TB
R["React"] --> AP["Analytics Page"]
RQ["@tanstack/react-query"] --> PC["PerformanceChart"]
RQ --> TS["TopStudents"]
RC["Recharts"] --> PC
RC --> PZ["Pie Charts"]
RU["Radix UI Tabs"] --> AT["Analytics Tabs"]
TW["Tailwind CSS"] --> AP
TW --> PC
TW --> TS
TW --> PZ
TW --> AT
Loading

Diagram sources

  • analytics.tsx
  • performance-chart.tsx
  • top-students.tsx
  • tabs.tsx
  • index.css

Section sources

  • analytics.tsx
  • performance-chart.tsx
  • top-students.tsx
  • tabs.tsx
  • index.css

Performance Considerations

  • Skeleton loaders: Both PerformanceChart and TopStudents provide skeleton placeholders to maintain perceived performance during data loading.
  • Responsive charts: Recharts with ResponsiveContainer ensures charts adapt efficiently to screen sizes without manual breakpoints.
  • Theme-aware rendering: Dynamic styling reduces unnecessary re-renders by computing styles once per theme change.
  • Data fetching: React Query is configured to disable automatic fetching initially, preventing unneeded network requests until endpoints are implemented.

[No sources needed since this section provides general guidance]

Troubleshooting Guide

  • Charts not rendering:
    • Verify Recharts imports and ResponsiveContainer usage.
    • Ensure data arrays are non-empty; fall back to mock data when needed.
  • Dark/light mode inconsistencies:
    • Confirm ThemeContext is properly wrapped around the app.
    • Check Tailwind CSS color tokens for chart and background variants.
  • Tab content not switching:
    • Ensure TabsList and TabsContent values match exactly ("class", "individuals").
    • Verify Radix UI components are imported correctly.
  • Layout breaks on small screens:
    • Confirm grid column classes and responsive modifiers are applied consistently.

Section sources

  • performance-chart.tsx
  • top-students.tsx
  • tabs.tsx
  • theme-context.tsx
  • index.css

Conclusion

The Performance Analytics Dashboard demonstrates a clean, modular architecture combining responsive layout, reusable UI primitives, and data visualization. Its current implementation provides immediate value through sample datasets and placeholder content, with clear pathways for integrating real-time data and expanding individual student analytics. The styling system and theme-aware components ensure consistent, accessible experiences across devices and user preferences.

Clone this wiki locally