---
# System prepended metadata

title: Chart Components

---

# Chart Components
因為要安裝 chart.js 所以
```shell
$ pnpm install
```
## ParticipationChart (班級參與度圖表)
用於顯示不同班級在各個課程中的參與度統計。
### Screenshots
![Screenshot 2025-06-17 at 12.21.02 AM](https://hackmd.io/_uploads/HJp_NaTmgx.png)
![Screenshot 2025-06-17 at 12.21.22 AM](https://hackmd.io/_uploads/HyZcVpaXlx.png)
### Usage
```html
<ParticipationChart data={classData} />
```
### 參數說明
- data: ClassData[] 類型，包含班級資訊和課程參與數據
```typescript
type ClassData = {
    className: string;      // 班級名稱
    sessions: {            // 課程數據
        sessionName: string;    // 課程名稱
        participation: number;  // 參與度數值
    }[]
}
```
### 範例資料
```javascript
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
![Screenshot 2025-06-17 at 12.24.44 AM](https://hackmd.io/_uploads/B1JDrpa7xl.png)
![Screenshot 2025-06-17 at 12.24.32 AM](https://hackmd.io/_uploads/rJkUSpaXxx.png)
### Usage
```html
<DiscussionParticipationChart data={discussionData} />
```
### 參數說明
- data: DiscussionData[] 類型，包含討論名稱和參與度數據
```typescript
type DiscussionData = {
    discussionName: string;  // 討論名稱
    participation: number;   // 參與度數值
}
```
### 範例資料
```javascript
const mockDiscussionData = [
    { discussionName: '關於美食與教育的討論', participation: 120 },
    { discussionName: '社會情緒與道德學習：慈悲', participation: 180 },
    { discussionName: '人際價值觀', participation: 150 },
    { discussionName: '0318社會情緒學習', participation: 200 }
];
```
## StudentParticipationChart (學生參與度圖表)
用於顯示不同學生在各個課程中的參與度統計。
### Screenshots
![Screenshot 2025-06-17 at 12.27.22 AM](https://hackmd.io/_uploads/rytg8aamll.png)
![Screenshot 2025-06-17 at 12.27.38 AM](https://hackmd.io/_uploads/B1db86TXgl.png)
### Usage
```html
<StudentParticipationChart sessions={sessionData} />
```
### 參數說明
- sessions: SessionData[] 類型，包含課程資訊和學生參與數據
```typescript
type SessionData = {
    sessionId: string;      // 課程 ID
    sessionTitle: string;   // 課程標題
    participants: {         // 參與者數據
        [studentId: string]: {
            words: number;  // 字數統計
        }
    }
}
```
### 範例資料
```javascript
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
![Screenshot 2025-06-17 at 7.41.25 PM](https://hackmd.io/_uploads/ryauECRXlx.png)
![Screenshot 2025-06-17 at 7.42.29 PM](https://hackmd.io/_uploads/H1Hn4A0mgl.png)
### Usage
```html
<SubtaskCompletionChart data={subtaskData} />
```
### 參數說明
- data: SubtaskData[] 類型，包含學生 ID 和子目標完成情況
```typescript
type SubtaskData = {
    studentId: string;      // 學生 ID
    subtaskCompleted: boolean[];  // 子目標完成情況陣列
}
```
### 範例資料
```javascript
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!