TABLE / CHART 進階功能

TABLE：SQL 分頁​

table 物件有兩個選用欄位：

任一個有值就會在表格上方長出 Table / SQL 兩個分頁；兩個都沒有時連分頁列都不會出現，就只是 一張普通的表格。兩個欄位各自獨立——只給 sqlExplanation 不給 sql 也是合法的，SQL 分頁就只有 說明文字。

TABLE：下載​

下載按鈕出現在標題列右側，條件是在 Table 分頁且有資料（切到 SQL 分頁時會消失）。點開是 兩個選項：

檔名是 <標題>_<YYYY-MM-DD>.<副檔名>，標題裡非中英數的字元會被換成底線。

兩種格式匯出的都是套用 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 是一個陣列，每個元素是一種畫法：

{
  type: MessageTemplateType.CHART,
  title: "各區銷售趨勢",
  text: "同一份資料提供兩種圖表。",
  defaultChart: "bar",
  chartOptions: [
    { type: "bar",  title: "長條圖", spec: barSpec },
    { type: "line", title: "折線圖", spec: lineSpec },
  ],
}

CHART：渲染時 SDK 會動 spec​

送進去的 spec 不是原封不動被畫出來的。SDK 會複製一份再改兩件事：

1. 背景固定成白色。 這是刻意的——深色主題下 Vega 預設的軸標與圖例文字是深色的，透明背景會 讓它們幾乎看不見。
2. 寬度跟著容器跑。 用 ResizeObserver 量外框寬度寫進 spec.width，並補上 autosize: { type: "fit", resize: true, contains: "padding" }。所以 spec 裡自己寫的 width 會被覆蓋，height 則保留。

Vega 內建的 actions 選單（存檔／看原始碼那顆）一律關閉。

也看看​

• 訊息模板 — 全部模板類型總覽
• 主題 — 調整聊天介面配色（圖表背景不受影響，見上）