# CH-04 through CH-09: Figma Teacher Charts Production Specs

---

## CH-04: CLASS PERFORMANCE TREND (Area Chart)

### Chart: `RP/Charts/CH-04-ClassPerformance`

#### ApexCharts Configuration

```javascript
{
    chart: {
        type: 'area',
        height: 280,
        toolbar: { show: false },
        fontFamily: 'Inter, sans-serif',
        background: 'transparent'
    },
    colors: ['#1E5FA8', '#22C55E', '#F59E0B'],
    series: [
        {
            name: 'Class Average',
            data: [68, 72, 70, 75, 78, 80]
        },
        {
            name: 'Top 25%',
            data: [82, 85, 83, 88, 90, 92]
        },
        {
            name: 'Bottom 25%',
            data: [45, 48, 46, 52, 55, 58]
        }
    ],
    xaxis: {
        categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
        labels: {
            style: { fontSize: '12px', fontFamily: 'Inter', colors: '#64748B' }
        },
        axisBorder: { show: false },
        axisTicks: { show: false }
    },
    yaxis: {
        min: 0, max: 100, tickAmount: 5,
        labels: {
            formatter: (val) => val + '%',
            style: { fontSize: '12px', fontFamily: 'Inter', colors: '#64748B' }
        }
    },
    stroke: {
        curve: 'smooth',
        width: [3, 2, 2],
        dashArray: [0, 0, 5]
    },
    fill: {
        type: 'gradient',
        gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.2,
            opacityTo: 0.02,
            stops: [0, 90, 100]
        }
    },
    grid: {
        borderColor: '#E2E8F0',
        strokeDashArray: 4,
        padding: { left: 8, right: 8 }
    },
    tooltip: {
        shared: true, intersect: false, theme: 'light',
        y: { formatter: (val) => val + '%' }
    },
    legend: {
        position: 'bottom', horizontalAlign: 'center',
        fontSize: '12px', fontFamily: 'Inter',
        markers: { width: 12, height: 3, radius: 2 },
        itemMargin: { horizontal: 16 }
    }
}
```

#### Visual Layout

```
┌──────────────────────────────────────────────────┐
│  Class Performance Trend                          │
│                                                  │
│  100% ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │
│                                                  │
│   80% ────────────●───────────●──────●───        │
│                  ╱     ╲      ╱                   │
│   60% ──●────●╱─────────╲──╱─────────●───       │
│         ╲  ╱╱             ╲╱                     │
│   40% ───●╱╱─── ═══════════════════════          │
│              ╲  ╱  (bottom 25% - dashed)          │
│   20% ───────────╱                               │
│                                                  │
│    0% ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │
│                                                  │
│    W1    W2    W3    W4    W5    W6              │
│                                                  │
│  ● Class Average  ● Top 25%  ━━━ Bottom 25%     │
└──────────────────────────────────────────────────┘
```

#### Colors
- Class Average: `color/secondary` (#1E5FA8), solid
- Top 25%: `color/success` (#22C55E), solid
- Bottom 25%: `color/warning` (#F59E0B), dashed

#### Dark Mode
- Grid: #334155, Labels: #94A3B8
- Fill gradient: reduced opacity
- Tooltip BG: #1E293B, text: #E2E8F0

#### Responsive
- Desktop: 280px height
- Tablet: 240px height
- Mobile: 200px height, simplified labels

---

## CH-05: SUBJECT PERFORMANCE TREND (Line Chart)

### Chart: `RP/Charts/CH-05-SubjectPerformance`

#### ApexCharts Configuration

```javascript
{
    chart: {
        type: 'line',
        height: 280,
        toolbar: { show: false },
        fontFamily: 'Inter, sans-serif',
        background: 'transparent'
    },
    colors: ['#1E5FA8', '#22C55E', '#F59E0B', '#8B5CF6', '#EC4899'],
    series: [
        { name: 'Mathematics', data: [72, 75, 70, 78, 82, 85] },
        { name: 'English', data: [68, 70, 72, 74, 76, 78] },
        { name: 'Science', data: [65, 68, 66, 70, 72, 75] },
        { name: 'Social Studies', data: [70, 72, 71, 73, 75, 77] },
        { name: 'ICT', data: [75, 78, 76, 80, 82, 84] }
    ],
    xaxis: {
        categories: ['Term 1', 'Term 2', 'Term 3', 'Term 4', 'Term 5', 'Term 6'],
        labels: {
            style: { fontSize: '12px', fontFamily: 'Inter', colors: '#64748B' }
        },
        axisBorder: { show: false },
        axisTicks: { show: false }
    },
    yaxis: {
        min: 0, max: 100, tickAmount: 5,
        labels: {
            formatter: (val) => val + '%',
            style: { fontSize: '12px', fontFamily: 'Inter', colors: '#64748B' }
        }
    },
    stroke: {
        curve: 'smooth',
        width: [3, 2, 2, 2, 2],
        dashArray: [0, 0, 0, 0, 0]
    },
    grid: {
        borderColor: '#E2E8F0',
        strokeDashArray: 4,
        padding: { left: 8, right: 8 }
    },
    tooltip: {
        shared: true, intersect: false, theme: 'light',
        y: { formatter: (val) => val + '%' }
    },
    legend: {
        position: 'bottom', horizontalAlign: 'center',
        fontSize: '12px', fontFamily: 'Inter',
        markers: { width: 12, height: 3, radius: 2 },
        itemMargin: { horizontal: 12 }
    }
}
```

#### Visual Layout

```
┌──────────────────────────────────────────────────┐
│  Subject Performance Trend                        │
│                                                  │
│  100% ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │
│                                                  │
│   80% ────────────●───────────●──────●───        │
│                  ╱     ╲      ╱                   │
│   60% ──●────●╱─────────╲──╱─────────●───       │
│         ╲  ╱╱             ╲╱                     │
│   40% ───●╱╱─── ═══════════════════════          │
│              ╲  ╱  (multiple lines)               │
│   20% ───────────╱                               │
│                                                  │
│    0% ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │
│                                                  │
│    T1    T2    T3    T4    T5    T6              │
│                                                  │
│  ● Math  ● English  ● Science  ● Social  ● ICT  │
└──────────────────────────────────────────────────┘
```

#### Colors (5 subjects)
| Subject | Color |
|---------|-------|
| Mathematics | #1E5FA8 (secondary) |
| English | #22C55E (success) |
| Science | #F59E0B (warning) |
| Social Studies | #8B5CF6 (purple) |
| ICT | #EC4899 (pink) |

#### Dark Mode
- Grid: #334155, Labels: #94A3B8
- Tooltip BG: #1E293B, text: #E2E8F0

---

## CH-06: ATTENDANCE TREND (Area Chart)

### Chart: `RP/Charts/CH-06-AttendanceTrend`

#### ApexCharts Configuration

```javascript
{
    chart: {
        type: 'area',
        height: 260,
        toolbar: { show: false },
        fontFamily: 'Inter, sans-serif',
        background: 'transparent'
    },
    colors: ['#22C55E', '#F59E0B', '#DC2626'],
    series: [
        { name: 'Present', data: [85, 88, 82, 90, 87, 92] },
        { name: 'Late', data: [8, 6, 10, 5, 7, 4] },
        { name: 'Absent', data: [7, 6, 8, 5, 6, 4] }
    ],
    xaxis: {
        categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
        labels: {
            style: { fontSize: '12px', fontFamily: 'Inter', colors: '#64748B' }
        },
        axisBorder: { show: false },
        axisTicks: { show: false }
    },
    yaxis: {
        min: 0, max: 100, tickAmount: 5,
        labels: {
            formatter: (val) => val + '%',
            style: { fontSize: '12px', fontFamily: 'Inter', colors: '#64748B' }
        }
    },
    stroke: {
        curve: 'smooth',
        width: [3, 2, 2],
        dashArray: [0, 0, 0]
    },
    fill: {
        type: 'gradient',
        gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.3,
            opacityTo: 0.05,
            stops: [0, 90, 100]
        }
    },
    grid: {
        borderColor: '#E2E8F0',
        strokeDashArray: 4,
        padding: { left: 8, right: 8 }
    },
    tooltip: {
        shared: true, intersect: false, theme: 'light',
        y: { formatter: (val) => val + '%' }
    },
    legend: {
        position: 'bottom', horizontalAlign: 'center',
        fontSize: '12px', fontFamily: 'Inter',
        markers: { width: 12, height: 3, radius: 2 },
        itemMargin: { horizontal: 16 }
    }
}
```

#### Visual Layout

```
┌──────────────────────────────────────────────────┐
│  Attendance Trend                                 │
│                                                  │
│  100% ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │
│                                                  │
│   80% ────────────●───────────●──────●───        │
│                  ╱     ╲      ╱                   │
│   60% ──●────●╱─────────╲──╱─────────●───       │
│         ╲  ╱╱             ╲╱                     │
│   40% ───●╱╱─── ═══════════════════════          │
│              ╲  ╱  (late - amber)                 │
│   20% ───────────╱                               │
│                                                  │
│    0% ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │
│                                                  │
│    W1    W2    W3    W4    W5    W6              │
│                                                  │
│  ● Present  ● Late  ● Absent                     │
└──────────────────────────────────────────────────┘
```

#### Colors
- Present: #22C55E (success)
- Late: #F59E0B (warning)
- Absent: #DC2626 (danger)

---

## CH-07: ASSIGNMENT COMPLETION TREND (Bar Chart)

### Chart: `RP/Charts/CH-07-AssignmentCompletion`

#### ApexCharts Configuration

```javascript
{
    chart: {
        type: 'bar',
        height: 260,
        toolbar: { show: false },
        fontFamily: 'Inter, sans-serif',
        background: 'transparent'
    },
    colors: ['#1E5FA8', '#22C55E', '#F59E0B'],
    series: [
        { name: 'Submitted', data: [18, 16, 20, 15, 19, 17] },
        { name: 'Graded', data: [15, 14, 18, 12, 17, 15] },
        { name: 'Late', data: [2, 3, 1, 4, 2, 3] }
    ],
    xaxis: {
        categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
        labels: {
            style: { fontSize: '12px', fontFamily: 'Inter', colors: '#64748B' }
        },
        axisBorder: { show: false },
        axisTicks: { show: false }
    },
    yaxis: {
        min: 0, max: 25, tickAmount: 5,
        labels: {
            style: { fontSize: '12px', fontFamily: 'Inter', colors: '#64748B' }
        }
    },
    stroke: {
        width: 0
    },
    plotOptions: {
        bar: {
            borderRadius: 4,
            columnWidth: '60%',
            borderRadiusApplication: 'end'
        }
    },
    grid: {
        borderColor: '#E2E8F0',
        strokeDashArray: 4,
        padding: { left: 8, right: 8 }
    },
    tooltip: {
        shared: true, intersect: false, theme: 'light'
    },
    legend: {
        position: 'bottom', horizontalAlign: 'center',
        fontSize: '12px', fontFamily: 'Inter',
        markers: { width: 10, height: 10, radius: 2 },
        itemMargin: { horizontal: 16 }
    }
}
```

#### Visual Layout

```
┌──────────────────────────────────────────────────┐
│  Assignment Completion Trend                      │
│                                                  │
│   25 ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─   │
│                                                  │
│   20 ── ██ ── ██ ── ██ ── ██ ── ██ ── ██ ──   │
│         ██    ██    ██    ██    ██    ██          │
│   15 ── ██ ── ██ ── ██ ── ██ ── ██ ── ██ ──   │
│         ██    ██    ██    ██    ██    ██          │
│   10 ── ██ ── ██ ── ██ ── ██ ── ██ ── ██ ──   │
│         ██    ██    ██    ██    ██    ██          │
│    5 ── ██ ── ██ ── ██ ── ██ ── ██ ── ██ ──   │
│         ██    ██    ██    ██    ██    ██          │
│    0 ── ██ ── ██ ── ██ ── ██ ── ██ ── ██ ──   │
│                                                  │
│    W1    W2    W3    W4    W5    W6              │
│                                                  │
│  ██ Submitted  ██ Graded  ██ Late                │
└──────────────────────────────────────────────────┘
```

#### Colors
- Submitted: #1E5FA8 (secondary)
- Graded: #22C55E (success)
- Late: #F59E0B (warning)

---

## CH-08: RISK STUDENT DISTRIBUTION (Donut Chart)

### Chart: `RP/Charts/CH-08-RiskDistribution`

#### ApexCharts Configuration

```javascript
{
    chart: {
        type: 'donut',
        height: 280,
        fontFamily: 'Inter, sans-serif',
        background: 'transparent'
    },
    colors: ['#22C55E', '#F59E0B', '#DC2626', '#7F1D1D'],
    series: [12, 5, 3, 1],
    labels: ['Low Risk', 'Medium Risk', 'High Risk', 'Critical'],
    plotOptions: {
        pie: {
            donut: {
                size: '65%',
                labels: {
                    show: true,
                    name: {
                        show: true, fontSize: '14px', fontFamily: 'Inter',
                        fontWeight: 500, color: '#64748B'
                    },
                    value: {
                        show: true, fontSize: '24px', fontFamily: 'Inter',
                        fontWeight: 700, color: '#0F172A',
                        formatter: (val) => Math.round(val) + '%'
                    },
                    total: {
                        show: true, label: 'Total Students',
                        fontSize: '14px', fontFamily: 'Inter',
                        fontWeight: 500, color: '#64748B',
                        formatter: () => '21'
                    }
                }
            }
        }
    },
    stroke: {
        width: 2,
        colors: ['#FFFFFF']
    },
    dataLabels: { enabled: false },
    legend: {
        position: 'right', fontSize: '12px', fontFamily: 'Inter',
        markers: { width: 10, height: 10, radius: 2 },
        itemMargin: { vertical: 4, horizontal: 0 },
        formatter: (label, opts) => {
            const count = opts.w.config.series[opts.seriesIndex];
            return `${label}: ${count} students`;
        }
    },
    tooltip: {
        y: { formatter: (val) => val + ' students' }
    },
    responsive: [
        { breakpoint: 768, options: { legend: { position: 'bottom' } } }
    ]
}
```

#### Visual Layout

```
┌──────────────────────────────────────────────────┐
│  Risk Student Distribution                        │
│                                                  │
│          ┌─────────────────┐                     │
│          │     ╭─────╮     │                     │
│          │   ╱  Risk  ╲    │   ● Low: 12 students│
│          │  │  Level   │   │   ● Medium: 5       │
│          │  │   21     │   │   ● High: 3         │
│          │   ╲ students╱    │   ● Critical: 1    │
│          │     ╰─────╯     │                     │
│          └─────────────────┘                     │
│                                                  │
└──────────────────────────────────────────────────┘
```

#### Colors
| Risk Level | Color |
|-----------|-------|
| Low | #22C55E (success) |
| Medium | #F59E0B (warning) |
| High | #DC2626 (danger) |
| Critical | #7F1D1D (dark red) |

---

## CH-09: INTERVENTION EFFECTIVENESS (Grouped Bar Chart)

### Chart: `RP/Charts/CH-09-InterventionEffectiveness`

#### ApexCharts Configuration

```javascript
{
    chart: {
        type: 'bar',
        height: 280,
        toolbar: { show: false },
        fontFamily: 'Inter, sans-serif',
        background: 'transparent'
    },
    colors: ['#DC2626', '#22C55E'],
    series: [
        { name: 'OPS Before', data: [42, 55, 61, 48, 68] },
        { name: 'OPS After', data: [68, 78, 75, 65, 82] }
    ],
    xaxis: {
        categories: ['Math Tutoring', 'Attendance Plan', 'Reading Support', 'Exam Prep', 'Homework Help'],
        labels: {
            style: { fontSize: '11px', fontFamily: 'Inter', colors: '#64748B' },
            rotate: -30
        },
        axisBorder: { show: false },
        axisTicks: { show: false }
    },
    yaxis: {
        min: 0, max: 100, tickAmount: 5,
        labels: {
            formatter: (val) => val + '%',
            style: { fontSize: '12px', fontFamily: 'Inter', colors: '#64748B' }
        }
    },
    stroke: { width: 0 },
    plotOptions: {
        bar: {
            borderRadius: 4,
            columnWidth: '50%',
            borderRadiusApplication: 'end',
            barGap: '20%'
        }
    },
    grid: {
        borderColor: '#E2E8F0',
        strokeDashArray: 4,
        padding: { left: 8, right: 8 }
    },
    tooltip: {
        shared: true, intersect: false, theme: 'light',
        y: { formatter: (val) => val + '%' }
    },
    legend: {
        position: 'bottom', horizontalAlign: 'center',
        fontSize: '12px', fontFamily: 'Inter',
        markers: { width: 10, height: 10, radius: 2 },
        itemMargin: { horizontal: 16 }
    }
}
```

#### Visual Layout

```
┌──────────────────────────────────────────────────┐
│  Intervention Effectiveness                       │
│                                                  │
│  100% ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │
│                                                  │
│   80% ── ██ ── ██ ── ██ ── ██ ── ██ ──         │
│         ██    ██    ██    ██    ██                │
│   60% ── ██ ── ██ ── ██ ── ██ ── ██ ──         │
│         ██    ██    ██    ██    ██                │
│   40% ── ██ ── ██ ── ██ ── ██ ── ██ ──         │
│         ██    ██    ██    ██    ██                │
│   20% ── ██ ── ██ ── ██ ── ██ ── ██ ──         │
│         ██    ██    ██    ██    ██                │
│    0% ── ██ ── ██ ── ██ ── ██ ── ██ ──         │
│                                                  │
│    Math   Attend  Read   Exam   Home             │
│    Tutor  Plan    Supp   Prep   Help             │
│                                                  │
│  ██ OPS Before  ██ OPS After                      │
└──────────────────────────────────────────────────┘
```

#### Colors
- OPS Before: #DC2626 (danger)
- OPS After: #22C55E (success)

---

## CHART CONTAINER PATTERNS (Teacher)

### All teacher charts follow this container pattern:

```
RP/Card (shadow/sm, padding/md)
├── Header (Horizontal, justify: space-between)
│   ├── Title (Display/H5, 18px, Medium)
│   └── Controls (tabs, filter, or "View All" button)
│
├── Chart area
│   Width: 100%
│   Height: {chart-specific}
│
└── Footer (optional)
    Summary stats or "Last updated: X" (Body/XS, muted)
```

### Chart Loading State
```
RP/Card
├── Header (real)
├── RP/Skeleton (type: rect, height: 260px)
└── Footer (skeleton lines)
```

### Chart Empty State
```
RP/Card
├── Header (real)
├── RP/EmptyState
│   Icon: bar-chart-2
│   Title: "No data available"
│   Description: "Data will appear here once records are added."
└── Footer (hidden)
```

---

## APEXCHARTS THEME OVERRIDE (Teacher Charts)

### Global ApexCharts theme for RP Learning Portal

```javascript
// Light mode theme
const rpLightTheme = {
    chart: {
        background: 'transparent',
        toolbar: { show: false },
        fontFamily: 'Inter, sans-serif'
    },
    colors: ['#1E5FA8', '#22C55E', '#F59E0B', '#DC2626', '#8B5CF6', '#EC4899'],
    grid: {
        borderColor: '#E2E8F0',
        strokeDashArray: 4
    },
    xaxis: {
        labels: { style: { colors: '#64748B', fontSize: '12px' } },
        axisBorder: { color: '#E2E8F0' },
        axisTicks: { color: '#E2E8F0' }
    },
    yaxis: {
        labels: { style: { colors: '#64748B', fontSize: '12px' } }
    },
    tooltip: {
        theme: 'light',
        style: { fontSize: '12px' }
    },
    legend: {
        labels: { colors: '#1E293B', fontSize: '12px' }
    }
};

// Dark mode theme
const rpDarkTheme = {
    ...rpLightTheme,
    grid: { borderColor: '#334155', strokeDashArray: 4 },
    xaxis: {
        labels: { style: { colors: '#94A3B8', fontSize: '12px' } },
        axisBorder: { color: '#334155' },
        axisTicks: { color: '#334155' }
    },
    yaxis: {
        labels: { style: { colors: '#94A3B8', fontSize: '12px' } }
    },
    tooltip: { theme: 'dark' },
    legend: {
        labels: { colors: '#E2E8F0', fontSize: '12px' }
    }
};
```

### Chart Color Palette

| Position | Color Name | Hex | Use |
|----------|-----------|-----|-----|
| 1 | Royal Blue | #1E5FA8 | Primary data series |
| 2 | Success Green | #22C55E | Positive/attendance |
| 3 | Warning Amber | #F59E0B | Caution/behavior |
| 4 | Danger Red | #DC2626 | Negative/alerts |
| 5 | Purple | #8B5CF6 | Third series |
| 6 | Pink | #EC4899 | Fourth series |

### Chart Accessibility
- All charts must have `aria-label` describing the chart content
- Data tables must be available as alternative (toggle or screen reader)
- Color alone must not convey meaning — use patterns/labels too
- Minimum contrast 3:1 for chart elements against background