Astro 專題 - 多語系商品探索儀表板 (Multi-lang Product Explorer) - 3

要在 Astro v5 儀表板中加入互動圖表，最推薦的方式是使用 Recharts 或 Chart.js 配合 React 或 Vue 組件，因為圖表需要客戶端（Client-side）的 JavaScript 來達成縮放、懸停提示等互動功能。

1. 安裝必要套件

這裡我們以 Recharts 為例（它是 React 生態中最受歡迎的圖表庫，且對響應式支援極佳）：

# 安裝 React 整合包與 Recharts
npx astro add react
npm install recharts

2. 準備圖表數據 (Content Layer)

在 src/pages/[lang]/dashboard.astro 中，我們可以將 Content Layer 的商品數據處理成圖表需要的格式：

---
import { getCollection } from 'astro:content';
import PriceChart from '../../components/PriceChart'; // 這是我們等下要寫的 React 組件

const { lang } = Astro.params;
const allProducts = await getCollection('products', ({ id }) => id.startsWith(lang));

// 將數據轉換為圖表格式，例如：[ { name: 'iPhone', price: 999 }, ... ]
const chartData = allProducts.map(p => ({
  name: p.data.title,
  price: p.data.price
}));
---

3. 建立互動圖表組件

在 src/components/PriceChart.tsx 建立組件。注意我們使用了 client:load 指令來確保它在瀏覽器中運行：

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts'

export default function PriceChart({ data }) {
  return (
    <div className="h-[400px] w-full bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
      <h3 className="text-lg font-bold mb-4 text-gray-800">商品價格分佈圖</h3>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data}>
          <CartesianGrid
            strokeDasharray="3 3"
            vertical={false}
            stroke="#f1f5f9"
          />
          <XAxis
            dataKey="name"
            axisLine={false}
            tickLine={false}
            tick={{ fill: '#64748b', fontSize: 12 }}
          />
          <YAxis
            axisLine={false}
            tickLine={false}
            tick={{ fill: '#64748b', fontSize: 12 }}
          />
          <Tooltip
            cursor={{ fill: '#f8fafc' }}
            contentStyle={{
              borderRadius: '8px',
              border: 'none',
              boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
            }}
          />
          {/* 使用 Tailwind v4 定義的顏色變數 */}
          <Bar
            dataKey="price"
            fill="var(--color-brand)"
            radius={[4, 4, 0, 0]}
          />
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}

4. 在頁面中引用 (關鍵的 client:load)

在 Astro 頁面中使用組件時，必須加上互動指令，否則它會被渲染成靜態 HTML：

<section class="mt-8">
  <PriceChart client:load data={chartData} />
</section>

5. 進階：讓圖表隨主題顏色切換

Tailwind v4 讓「暗黑模式」變得非常簡單。你可以微調 PriceChart.tsx 讓它自動讀取 CSS 變數：

/* src/styles/global.css */
@theme {
  --color-brand: #3b82f6;
}

@variant dark {
  --color-brand: #60a5fa;
  --color-dashboard-bg: #0f172a;
}

在圖表組件中，顏色會自動跟隨 --color-brand 的變化。