讓冷冰冰的數據活起來
昨天我們成功建好了底部導覽列這扇「門」，現在你可以優雅地在「打卡鍵盤」與「圖表數據」之間來回切換了。但如果你仔細一看，會發現圖表上顯示的數字，還是 Day 11 時為了看預覽畫面而硬塞的「假資料 (Mock Data)」。
我們已經千辛萬苦把真實的訓練重量和次數存進了 Firebase 的雲端保險箱裡，怎麼能讓圖表拿著假金幣展示呢？今天，我們就要打通資料庫的「讀取 (Read)」管線，並且把 Firebase 吐出來的原始資料，轉換成 Chart.js 看得懂的格式，讓你的重訓心血真正化為視覺化的成長軌跡！

用自然語言寫出讀取與轉換邏輯
在傳統開發中，從資料庫撈資料、處理非同步等待 (Promise)，接著再用 map 或 reduce 把陣列重新組裝成圖表需要的 X 軸與 Y 軸格式，往往會讓人頭昏腦脹。但在 Vibe Coding 中，我們只要把「來源」與「目的」交代清楚，中間的過程就交給 AI 處理。

*AI Prompt *
@js/services/workout-service.js @js/components/chart-bars.js @js/views/habits-view.js
我們現在需要讓 Chart.js 圖表顯示 Firebase 內的真實數據，替換掉原本的假資料。
實作要求：
新增讀取函式： 請在 workout-service.js 中新增一個非同步函式 getWorkoutHistory()，使用 Firebase 的 getDocs 撈取當前使用者 (test_user_001 或真實 uid) 集合下的所有歷史訓練紀錄。
資料格式轉換 (Data Transformation)： 將 Firebase 回傳的原始資料，整理成 Chart.js 接受的格式。請將「訓練日期」整理為 X 軸 (labels 陣列)，將當天的「總重量或組數」加總後整理為 Y 軸 (data 陣列)。
動態渲染： 當使用者透過導覽列切換到「📊 數據 (Habits)」頁面時，請先顯示簡單的「載入中」提示，等待資料讀取完成後，將真實數據注入並呼叫圖表的 chart.update() 方法重新渲染畫面。
清理程式碼： 請確實移除圖表元件中原本寫死的 Mock Data。

輸出成果: