Data Visualization Layer

Data Visualization Overview

ProctorAI utilizes Recharts as its primary visualization engine to transform raw monitoring signals into actionable integrity insights. The data visualization layer is designed to provide proctors and administrators with a high-level overview of exam health, violation patterns, and individual risk distributions.

All charts are implemented as client-side components within the /analytics route, leveraging ResponsiveContainer for fluid layouts across various screen sizes.

Key Visualizations

1. Risk Trend Analysis

The "Risk Score Over Time" visualization uses an AreaChart to track the aggregate risk levels across all active sessions. This allows proctors to identify specific periods during an exam where suspicious activity spikes.

Implementation Details:

• Component: AreaChart
• Data Source: riskOverTimeData
• Visual Features: Linear gradients for the area fill and CartesianGrid for readability.

<ResponsiveContainer width="100%" height="100%">
  <AreaChart data={riskOverTimeData}>
    <defs>
      <linearGradient id="colorRisk" x1="0" y1="0" x2="0" y2="1">
        <stop offset="5%" stopColor="#00bcd4" stopOpacity={0.3}/>
        <stop offset="95%" stopColor="#00bcd4" stopOpacity={0}/>
      </linearGradient>
    </defs>
    <Tooltip />
    <Area 
      type="monotone" 
      dataKey="score" 
      stroke="#00bcd4" 
      fillOpacity={1} 
      fill="url(#colorRisk)" 
    />
  </AreaChart>
</ResponsiveContainer>

2. Violation Category Breakdown

To help administrators understand the nature of academic dishonesty, a BarChart categorizes events such as "Gaze Deviation," "Tab Switching," and "Audio Anomalies."

Key Features:

• Rounded Bars: Styled using radius={[0, 4, 4, 0]} for a modern aesthetic.
• Custom Tooltips: Displays exact violation counts on hover.
• Orientation: Horizontal layout to accommodate long category labels.

3. Student Risk Distribution

A PieChart provides a demographic breakdown of the student population based on their calculated risk scores. This is categorized into four tiers: Low, Moderate, High, and Critical.

Data Mapping:

const PIE_COLORS = ["#10b981", "#f59e0b", "#f97316", "#ef4444"];

// Categories mapped to score ranges:
// 0-25: Low
// 26-50: Moderate
// 51-75: High
// 76-100: Critical

Integrating Data Sources

The visualization layer is decoupled from the data fetching logic. Currently, it consumes structured arrays from src/lib/mockData.ts. When moving to a production backend, the charts expect the following data interface:

| Prop | Type | Description | | :--- | :--- | :--- | | name | string | The X-axis label (e.g., Timestamp, Category Name). | | value | number | The primary metric value. | | fill | string | (Optional) Custom color override for specific data points. |

Interactivity & Motion

Charts are wrapped in framer-motion containers to provide smooth entry transitions. This prevents the "flash" of empty containers during initial client-side hydration.

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  {/* Recharts Component */}
</motion.div>

Theming and Styling

The visualization layer integrates with Tailwind CSS v4 variables. Chart colors are defined using hexadecimal constants that align with the ProctorAI brand palette (Navy, Cyan, and Emerald).

To customize the chart theme:

1. Locate the COLORS array in src/app/analytics/page.tsx.
2. Update the color hex codes to match your institution's branding.
3. Use the Cell component within PieChart or Bar to map specific colors to data indices.