TABLE / CHART 進階功能
table 與 chart 兩個模板除了基本渲染之外還各有一組進階能力：TABLE 可以在表格旁附上產生它的
SQL 並讓使用者把資料下載走，CHART 可以一次給多種圖表讓使用者自己切換。兩者都不需要任何
props，後端在模板裡填了欄位就會出現。
選擇範例
表格上方有 Table / SQL 兩個分頁，Table 分頁的標題列右側有下載按鈕（CSV / JSON Lines）。
TABLE：SQL 分頁
table 物件有兩個選用欄位：
| 欄位 | 型別 | 說明 |
|---|---|---|
sql | string | 產生這張表的查詢，在 SQL 分頁以帶語法高亮的程式碼區塊呈現 |
sqlExplanation | string | 查詢說明，以 Markdown 渲染在 SQL 下方 |
任一個有值就會在表格上方長出 Table / SQL 兩個分頁；兩個都沒有時連分頁列都不會出現，就只是
一張普通的表格。兩個欄位各自獨立——只給 sqlExplanation 不給 sql 也是合法的，SQL 分頁就只有
說明文字。
TABLE：下載
下載按鈕出現在標題列右側，條件是在 Table 分頁且有資料（切到 SQL 分頁時會消失）。點開是 兩個選項：
| 格式 | 產出 |
|---|---|
| CSV | 逗號分隔，值含 ,／"／換行時加引號並把 " 跳脫成 ""。檔案開頭加了 BOM，Excel 開中文才不會亂碼 |
| JSON Lines | 一列一個 JSON 物件，以 columns 的 key 為鍵 |
檔名是 <標題>_<YYYY-MM-DD>.<副檔名>，標題裡非中英數的字元會被換成底線。
pagination 只影響畫面上顯示幾列，下載一律匯出 data 的完整內容。整份檔案都在前端從當前資料
產生，不會回頭打後端。
兩種格式匯出的都是套用 format 之後的顯示值，不是原始值——CURRENCY 欄位出來是
"$135,000" 而不是 135000。要拿原始數值做後續運算的話，這不是合適的來源。
下載完成後右下角會跳出提示條，可以直接開啟剛下載的檔案，5 秒後自動收起。
TABLE：欄位與格式
interface TableData {
rowType: "OBJECT" | "ARRAY";
columns: { header: string; key?: string; format?: "DATE" | "DATE_TIME" | "CURRENCY" }[];
pagination: { size: number } | null;
data: Record<string, unknown>[] | unknown[][];
sql?: string;
sqlExplanation?: string;
}
rowType 決定怎麼從一列取值，也決定表頭長什麼樣：
OBJECT— 每列是物件，用column.key取值。表頭會顯示兩行：header在上、key在下。ARRAY— 每列是陣列，按欄位順序取值（key用不到）。表頭只有header一行。
format 影響儲存格的呈現：DATE 走 toLocaleDateString()、DATE_TIME 走 toLocaleString()、
CURRENCY 格式化成新台幣（無小數）。沒給 format 就直接轉成字串；null / undefined 一律顯示
成空字串。
CHART：多種圖表切換
chartOptions 是一個陣列，每個元素是一種畫法：
| 欄位 | 型別 | 說明 |
|---|---|---|
chartOptions[].type | string | 識別字，defaultChart 用它比對 |
chartOptions[].title | string | 下拉選單顯示的名稱 |
chartOptions[].spec | object | Vega 或 Vega-Lite spec |
defaultChart | string | 預設選中的 type |
只給一個 option 時圖表照畫，但沒有可切換的東西，選單也就不會渲染。
另外 defaultChart 對不到任何 type 時會退回第一個 option 的 spec，不會報錯——所以填錯字
只會安靜地畫出第一張圖。
{
type: MessageTemplateType.CHART,
title: "各區銷售趨勢",
text: "同一份資料提供兩種圖表。",
defaultChart: "bar",
chartOptions: [
{ type: "bar", title: "長條圖", spec: barSpec },
{ type: "line", title: "折線圖", spec: lineSpec },
],
}
CHART：渲染時 SDK 會動 spec
送進去的 spec 不是原封不動被畫出來的。SDK 會複製一份再改兩件事：
- 背景固定成白色。 這是刻意的——深色主題下 Vega 預設的軸標與圖例文字是深色的，透明背景會 讓它們幾乎看不見。
- 寬度跟著容器跑。 用
ResizeObserver量外框寬度寫進spec.width，並補上autosize: { type: "fit", resize: true, contains: "padding" }。所以 spec 裡自己寫的width會被覆蓋，height則保留。
Vega 內建的 actions 選單（存檔／看原始碼那顆）一律關閉。