# Chart Components
因為要安裝 chart.js 所以

$ pnpm install

## ParticipationChart (班級參與度圖表)
用於顯示不同班級在各個課程中的參與度統計。
### Screenshots
### Usage

<ParticipationChart data={classData} />

### 參數說明
- data: ClassData[] 類型，包含班級資訊和課程參與數據

type ClassData = {
    className: string;      // 班級名稱
    sessions: {            // 課程數據
        sessionName: string;    // 課程名稱
        participation: number;  // 參與度數值
    }[]
}

### 範例資料

const mockParticipationData = [
    {
        className: '101',
        sessions: [
            { sessionName: '關於美食與教育的討論', participation: 150 },
            { sessionName: '社會情緒與道德學習：慈悲', participation: 200 },
            { sessionName: '人際價值觀', participation: 180 }
        ]
    },
    {
        className: '102',
        sessions: [
            { sessionName: '關於美食與教育的討論', participation: 180 },
            { sessionName: '社會情緒與道德學習：慈悲', participation: 220 },
            { sessionName: '人際價值觀', participation: 190 }
        ]
    },
    {
        className: '204',
        sessions: [
            { sessionName: '關於美食與教育的討論', participation: 160 },
            { sessionName: '社會情緒與道德學習：慈悲', participation: 190 },
            { sessionName: '人際價值觀', participation: 210 }
        ]
    },
    {
        className: '303',
        sessions: [
            { sessionName: '關於美食與教育的討論', participation: 170 },
            { sessionName: '社會情緒與道德學習：慈悲', participation: 210 },
            { sessionName: '人際價值觀', participation: 200 }
        ]
    }
];

## DiscussionParticipationChart (討論參與度圖表)
用於顯示不同討論的參與度統計。
### Screenshots
### Usage

<DiscussionParticipationChart data={discussionData} />

### 參數說明
- data: DiscussionData[] 類型，包含討論名稱和參與度數據

type DiscussionData = {
    discussionName: string;  // 討論名稱
    participation: number;   // 參與度數值
}

### 範例資料

const mockDiscussionData = [
    { discussionName: '關於美食與教育的討論', participation: 120 },
    { discussionName: '社會情緒與道德學習：慈悲', participation: 180 },
    { discussionName: '人際價值觀', participation: 150 },
    { discussionName: '0318社會情緒學習', participation: 200 }
];

## StudentParticipationChart (學生參與度圖表)
用於顯示不同學生在各個課程中的參與度統計。
### Screenshots
### Usage

<StudentParticipationChart sessions={sessionData} />

### 參數說明
- sessions: SessionData[] 類型，包含課程資訊和學生參與數據

type SessionData = {
    sessionId: string;      // 課程 ID
    sessionTitle: string;   // 課程標題
    participants: {         // 參與者數據
        [studentId: string]: {
            words: number;  // 字數統計
        }
    }
}

### 範例資料

const mockStudentParticipationData = [
    {
        sessionId: '1',
        sessionTitle: '關於美食與教育的討論',
        participants: {
            王一: { words: 150 },
            李二: { words: 200 },
            陳三: { words: 180 }
        }
    },
    {
        sessionId: '2',
        sessionTitle: '社會情緒與道德學習：慈悲',
        participants: {
            王一: { words: 220 },
            李二: { words: 180 },
            陳三: { words: 250 }
        }
    },
    {
        sessionId: '3',
        sessionTitle: '人際價值觀',
        participants: {
            王一: { words: 190 },
            李二: { words: 210 },
            陳三: { words: 170 }
        }
    }
];

## SubtaskCompletionChart (子目標完成度圖表)
用於顯示學生在討論中的子目標完成情況，以長條圖形式呈現每位學生的平均完成率。
### Snapshots
### Usage

<SubtaskCompletionChart data={subtaskData} />

### 參數說明
- data: SubtaskData[] 類型，包含學生 ID 和子目標完成情況

type SubtaskData = {
    studentId: string;      // 學生 ID
    subtaskCompleted: boolean[];  // 子目標完成情況陣列
}

### 範例資料

const mockSubtaskData = [
    {
        studentId: '王一',
        subtaskCompleted: [true, true, false, true, false]
    },
    {
        studentId: '李二',
        subtaskCompleted: [true, false, true, true, true]
    },
    {
        studentId: '陳三',
        subtaskCompleted: [false, true, true, false, true]
    }
];

## 相關資料
https://docs.google.com/presentation/d/1A9DgB_ME8L42HPzfAZ3zGfJi87PSHJaCmpHnYdNSunE/edit?slide=id.g366ec407781_0_2#slide=id.g366ec407781_0_2!