昨天我們幫每篇日記都加上了情緒標籤（正向 / 中立 / 負向），但光是看一筆筆文字還不夠直覺
所以今天要把情緒「視覺化」，做出折線圖和月曆熱力圖，讓人能一眼看出這個月心情變化，是不是比股市走勢圖還要起起伏伏

今日目標

1. 新增「情緒統計」頁面
2. 折線圖：以日期為橫軸，情緒分數為縱軸（0 = 負向、0.5 = 中立、1 = 正向）
3. 熱力圖：用日曆格子顏色顯示當天平均情緒（綠色偏正向、紅色偏負向、灰色表示無日記）
4. 提供週 / 月切換，能快速切換觀察範圍
5. 所有數據來自 Firestore 中的日記 sentiment 欄位

Prompt

幫我在 React 日記 App 加上「情緒視覺化」功能  

=== 功能需求 ===
1) 資料來源
   - users/{uid}/diaries/{docId}
   - 每筆有 sentiment.score (0~1) 與 date

2) 圖表 1：折線圖
   - x 軸：日期
   - y 軸：情緒分數 (0~1)
   - 線條顯示心情波動
   - 支援切換週 / 月（過濾資料範圍）

3) 圖表 2：月曆熱力圖
   - 顯示當月日曆
   - 每天根據平均 sentiment.score 上色
     - 0~0.3 = 負向 (紅色)
     - 0.3~0.7 = 中立 (灰色)
     - 0.7~1 = 正向 (綠色)
   - 點擊日期 → 顯示當日所有日記摘要

4) UI
   - 頁面上方切換 Tab：「折線圖 / 熱力圖」
   - 下方顯示對應圖表
   - 保持響應式，手機/桌機都能看

5) 技術
   - 建議用 Recharts 或 Chart.js
   - React hooks 管理狀態

今日驗收 ✅

1. 折線圖能正確顯示這週或這月的情緒走勢
   
2. 熱力圖能清楚顯示每天的情緒顏色，沒寫日記的格子保持空白
   

甚至 codex 還幫我加了功能是點擊該天的熱力圖會顯示該天的日記內文，一開始根本沒有規劃做這個功能，不過感覺也還不錯就保留了嘻嘻

3. 切換週 / 月正常運作，數據與日記一致

明日預告

Day 16 要讓這個情緒日記更方便，會有搜尋的功能，讓用戶在想看某方面日記的時候可以快速找到！

理論上 Day21 才會提部署，但我先嘗試把作品掛上去了
霓的情緒日記 歡迎點進去玩玩！
有什麼想法或建議都歡迎跟我說～（拜託不要攻擊我小小的網站 QQ）