@squadbase/vantage-template 0.2.0-dev1.3cd91d9 → 0.2.0-dev1.54651d3

package/base-template/AGENTS.md

@@ -96,7 +96,7 @@ root/
 | `@squadbase/vantage/router` | `Link`・`Outlet`・`useParams`・`useSearch`・`useNavigate`・`redirect`・`notFound`・`useRoutes`・`useCurrentRoute`・`useSearchParam`・`useSearchState` |
 | `@squadbase/vantage/query` | `useApiQuery`・`useApiMutation`・`apiJson`・`apiFetch`・`apiUrl`・`ApiError`、ほか `useQuery`/`useMutation` など TanStack Query の再エクスポート |
 | `@squadbase/vantage/ui` | shadcn/ui(Base UI バリアント)プリミティブ(`Button`・`Loading`・`ErrorState`・`Empty` ほか) |
-| `@squadbase/vantage/components` | 複合パーツ(`PageShell`・`DashboardCardPreset`・`DataTablePreset`、KPI の `KpiCard`・`Delta`、型付きチャート `LineChart`・`BarChart`・`AreaChart`・`DonutChart`・`BarList` ほか、`EChart`、書式の `formatValue`) |
+| `@squadbase/vantage/components` | 複合パーツ(`PageShell`・`DashboardCardPreset`・`DataTablePreset`、KPI の `KpiCard`・`Delta`、型付きチャート `LineChart`・`BarChart`・`AreaChart`・`ScatterChart`・`Heatmap`・`DonutChart`・`FunnelSteps`・`BarList` ほか、表せないときだけ `EChart`、書式の `formatValue`) |
 | `@squadbase/vantage/table` | `FilePageView`・`TableViewer`(データファイルページの表ビューア) |
 | `@squadbase/vantage/slide` | `SlideDeck`・`Slide`・`Steps`・`Step`・`MorphElement`・`useSlideNumber`・`useIsActiveSlide`、1 枚分の block `SlideCover`・`SlideExecSummary`・`SlideKpiHero`・`SlideKpiGrid`・`SlideChartInsight`・`SlideScorecardTable`・`SlideNextActions`・`SlideSection`・`SlideComparison`・`SlideChartFull`、手書きの 1 枚に使う部品 `SlideHeading`・`SlideSourceLine`・`SlideColumns`・`SlideColumn`・`DeltaText`(スライド専用。1920×1080 の固定キャンバス) |
 | `@squadbase/vantage/doc` | `Document`、ドキュメント用の block `DocReportHeader`・`DocExecutiveSummary`・`DocKpiScorecard`・`DocFigure`・`DocDataTable`・`DocCallout`・`DocKeyFindings`・`DocActionItems`・`DocNotesAndSources`、部品 `DeltaText`(ドキュメント専用。中の素の HTML 要素に見出し・表などのスタイルが当たる) |
@@ -137,7 +137,7 @@ import { KpiCard, Delta } from "@squadbase/vantage/components";
   まとめる)。増減の良否は指標の性質(コスト減・解約率減は良い)で決めて
   positive / negative に分け(`KpiCard` / `Delta` の `betterWhen`。下がって良い指標は `betterWhen="down"`)、向きは ▲▼ や符号で表す。
 - **レイアウト:** 内容はカードで包む(ページのチャートはタイトル付きの `DashboardCardPreset` に入れる。
-  `EChart` は親の幅に追従する)。順序は KPI → チャート → 表。値が 1 つなら KPI にする
+  チャートは親の幅に追従する)。順序は KPI → チャート → 表。値が 1 つなら KPI にする
   (1 本の棒グラフにしない)。強調は 1 画面(スライドは 1 枚)に 1 か所。数値には単位と比較対象を添える。
 - **Do:** トークンで色を指定する / 色の意味をアプリ全体でそろえる / チャートのタイトルに結論を書く。
 - **Don't:** 色コードや素のパレットクラスを書く / `dark:` を並べる / 3D・装飾目的のグラデーション・

package/base-template/agents/page.md

@@ -224,7 +224,7 @@ refetchOnWindowFocus false・networkMode "always")。挙動を変えたいとき
   `ErrorState`・`Empty`・`Select`・`Checkbox`・`RadioGroup`・`Field`・`Combobox`・`Pagination`・
   `Avatar`・`Kbd`・`HoverCard`・`AlertDialog`・`Drawer`・`Toaster` + `toast.add()` ほか)。
 - **複合パーツ**は `@squadbase/vantage/components` から(`PageShell`・`DashboardCardPreset`・
-  `DataTablePreset`・型付きチャート(下の「グラフ」)・`EChart` ほか)。
+  `DataTablePreset`・型付きチャート(下の「グラフ」)ほか)。
 - **どの名前が import 可能か / props の詳細は `vantage docs` で引く。** ガイドとコンポーネント
   リファレンスはパッケージに同梱されていて、オフラインでも読める(→ `AGENTS.md` の
   「ドキュメントを引く」)。**名前が分からないとき**はやりたいことで `vantage search` する
@@ -246,13 +246,14 @@ refetchOnWindowFocus false・networkMode "always")。挙動を変えたいとき
 
 ### グラフはまず型付きチャートで描く
 
-- 推移は `LineChart` / `AreaChart`、比較は `BarChart`、構成比は `DonutChart`。`data`(行の配列)・
+- 推移は `LineChart` / `AreaChart`、比較は `BarChart`、相関は `ScatterChart`、2 軸の濃淡は `Heatmap`、
+  構成比は `DonutChart`、段階ごとの減少は `FunnelSteps`。`data`(行の配列)・
   `index`(x 軸の列)・`categories`(系列の列)を渡すだけで、option は書かない
   (`DonutChart` は `category` / `value`)。
 - 上位 N 件は `BarList`、判定帯や予算消化は `CategoryBar`、達成率は `ProgressCircle`、
   日ごとの状態は `Tracker`。
-- `EChart` + `EChartsOption` は、二軸・散布図・ヒートマップ・注釈線など型付きチャートの props で
-  表せないときだけ使う。
+- `EChart` + option 関数は、レーダーなど型付きチャートで表せないときだけ使う。`EChart` で組んだ
+  グラフは、あとから種類もデータも編集で変えられない。
 - 色は省略してテーマトークンに任せる。指定するなら `"chart-1"`〜`"chart-5"` か
   `"var(--destructive)"` などの CSS 色。hex の直書きや Tailwind クラスは使わない。
 - 数値の書式(`¥`・`%`・桁区切り)は `valueFormatter` に渡す。

package/base-template/bun.lock

@@ -6,7 +6,7 @@
       "name": "vibe-app",
       "dependencies": {
         "@squadbase/react": "^0.1.0",
-        "@squadbase/vantage": "0.7.1-dev1.5e06644",
+        "@squadbase/vantage": "0.7.1-dev1.618b9b9",
         "@squadbase/vantage-sdk": "0.1.2-dev1.5f6d2a8",
         "date-fns": "^4.1.0",
         "lucide-react": "^0.468.0",
@@ -196,7 +196,7 @@
 
     "@squadbase/react": ["@squadbase/react@0.1.0", "", { "dependencies": { "zod": "^4.3.6" }, "peerDependencies": { "@types/react": "17.x || 18.x || 19.x", "react": "17.x || 18.x || 19.x" }, "optionalPeers": ["@types/react"] }, "sha512-k+Dpyj7eH+Yjydw54iEluCjYDae086d12hWgBjNMpw4wLbQGz3CrJ6Yipodg8n1cKUt7zvwddlcTHd79bgKsXg=="],
 
-    "@squadbase/vantage": ["@squadbase/vantage@0.7.1-dev1.5e06644", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.1.5", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.3", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "echarts": "^6.0.0", "esbuild": "0.28.1", "fflate": "^0.8.3", "hono": "^4.13.13", "html-to-image": "^1.11.13", "lucide-react": "^0.468.0", "papaparse": "^5.7.0", "picocolors": "^1.1.1", "react-day-picker": "^10.0.1", "read-excel-file": "^9.3.10", "shiki": "3.23.0", "streamdown": "^2.5.0", "tailwind-merge": "3.6.0", "tailwindcss": "^4.3.3", "tw-animate-css": "^1.0.0", "vite": "^8.3.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.0.0" }, "optionalPeers": ["typescript"], "bin": { "vantage": "dist/cli.js" } }, "sha512-3NJpd7No3IGD4/i6ju7iI8BDsiZHf4rYH6WwgjigQd+C2JW9CeYuwzYkXJdVMs2x/ffiFdIPjj6Nk/X3WGH3Kw=="],
+    "@squadbase/vantage": ["@squadbase/vantage@0.7.1-dev1.618b9b9", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.1.5", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.3", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "echarts": "^6.0.0", "esbuild": "0.28.1", "fflate": "^0.8.3", "hono": "^4.13.13", "html-to-image": "^1.11.13", "lucide-react": "^0.468.0", "papaparse": "^5.7.0", "picocolors": "^1.1.1", "react-day-picker": "^10.0.1", "read-excel-file": "^9.3.10", "shiki": "3.23.0", "streamdown": "^2.5.0", "tailwind-merge": "3.6.0", "tailwindcss": "^4.3.3", "tw-animate-css": "^1.0.0", "vite": "^8.3.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.0.0" }, "optionalPeers": ["typescript"], "bin": { "vantage": "dist/cli.js" } }, "sha512-e5mM9x2jLq8Q4uoeIFei1zxNCd25GCffS38vR08ODWebFawK0OAv9gupCJ0FuXJL8R5fdzN644cnxYlSzzhk9A=="],
 
     "@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.2-dev1.5f6d2a8", "", {}, "sha512-XMJ6wHC2aMiqA+IN+jTuPZBIopsI4dTO3dq40e2LfpXcfUeyDASHxYmTxV/klgHUZH97rGNyq4y7Eb3XIixpVA=="],
 

package/base-template/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@squadbase/react": "^0.1.0",
-    "@squadbase/vantage": "0.7.1-dev1.5e06644",
+    "@squadbase/vantage": "0.7.1-dev1.618b9b9",
     "@squadbase/vantage-sdk": "0.1.2-dev1.5f6d2a8",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.2.0-dev1.3cd91d9",
+  "version": "0.2.0-dev1.54651d3",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",
@@ -50,7 +50,7 @@
     "@ai-sdk/openai": "2.0.122",
     "ai": "^5.0.52"
   },
-  "gitHead": "3cd91d96fe1d617abb0d60b15701407b88b1113a",
+  "gitHead": "54651d38a82bf9e6e2bd36615d516a5cae6e02ae",
   "scripts": {
     "sync-base": "rsync -a --delete --exclude='node_modules' --exclude='dist' --exclude='.vantage' --exclude='*.tsbuildinfo' --exclude='*.log' template/ base-template/ && mv base-template/.gitignore base-template/_gitignore",
     "build": "pnpm run sync-base && tsup",

package/ui-templates/CLAUDE.md

@@ -40,22 +40,23 @@ src/components/<slug>/
 
 **`components/` を使う理由（重要）**: Vantage は**ファイルベースルーティング**で、`.tsx` ファイルは原則すべてページ扱いになる。`components/` / `hooks/` / `lib/` / `server/` / `public/` だけがルート走査から除外される（`NON_ROUTE_DIRS`）ため、`src/templates/<slug>/` のようなディレクトリに `.tsx` を置くと **`/templates/<slug>/...` という意図しないルートが生え、`vantage check` が `MISSING_DEFAULT_EXPORT` で落ちる**（`SUSPICIOUS_ROUTE_DIR` 警告も出る）。データファイル（`.ts`）も同じディレクトリに置いてコロケーションを保つ。
 
-### 2. インライン優先 — 薄いラッパ component を作らない
+### 2. チャートは型付き部品で書く — EChart + option 関数は作らない
 
-**`data → EChartsOption → <EChart>` だけの薄いチャート component は作らず、`index.tsx` 内のオプションビルダ関数にする。**
+**折れ線 / 面 / 棒 / 散布図 / ヒートマップ / ドーナツ / ファネルは、カタログ部品（`LineChart` / `AreaChart` / `BarChart` / `ScatterChart` / `Heatmap` / `DonutChart` / `FunnelSteps`）に行配列とキー名を渡して書く。** 行配列は識別子（`mock-data.ts` の配列、または `index.tsx` 内で一度だけ作る `const xxxRows`）で渡す。JSX の prop に `.map(...)` や option 関数の呼び出しを書かない（Bluetree がチャートを部品として読めなくなる）。
 
 ```tsx
-// ✅ 推奨: index.tsx 内のオプションビルダ関数 + EChart 直レンダ
-function areaOption(data: TimePoint[]): EChartsOption {
-  return { /* ... */ }
-}
-// JSX 内:
-<EChart option={areaOption(timeSeries)} height="280px" />
+<AreaChart
+  data={timeSeries}
+  index="date"
+  categories={["series1", "series2"]}
+  labels={{ series1: "Series A", series2: "Series B" }}
+  height="280px"
+/>
 ```
 
-チャート整形ヘルパ（`getBaseGrid` / `formatNumber` 等）も同様に `index.tsx` 内へ inline する。
-
-**チャートに色をハードコードしない。** `@squadbase/vantage` v0.2.1 以降、`EChart` は init 時に `--chart-1..5`（系列色）と文字色/境界色トークン（軸・凡例・ツールチップ）を読み、light / dark の切り替えにも追従する。v0.2.2 からはスタイルシートの差し替え（`chart <preset>` の適用や `styles.css` の HMR）も拾い、トークンの実値が変わった時だけ再描画する。`option.color` / `itemStyle.color` / ラベルの `color` を書くと、その分だけテンプレがテーマ差し替え（`vantage-template chart <preset>` や `styles.css` の override）から外れる。**ui-templates では書かない**のが既定 — 意味色（成功=緑・失敗=赤など）を出したいときだけ、その series に限って指定する。`theme` プロップは使わない（渡した時点でトークン追従が完全に止まる）。
+- データ型は `interface` ではなく `type` で宣言する（部品の `data` は `Record<string, unknown>[]` を要求し、`interface` は代入できない）。
+- 部品が表せない表現（第2軸の折れ線の重ね描き、`visualMap` など）のために `EChart` + option 関数へ戻さない。**カタログに部品が無いチャート（現状はレーダーだけ）に限り**、`index.tsx` 内のオプションビルダ関数 + `<EChart option={...} />` で書く。
+- 色は書かない。部品も `EChart` も `--chart-1..5` に追従するので、`option.color` / `itemStyle.color` / ラベルの `color` / `theme` プロップは使わない。意味色（成功=緑・失敗=赤）が要る series だけ例外。
 
 ### 3. データ層（mock-data / types）は分離する
 
@@ -97,7 +98,7 @@ server/api/<endpoint>.ts                 # ★ サンプルデータ + GET ハ
 | `PageShell*` / `DashboardCard*` / `EChart` / `EChartsOption` / `DataTable*` / `ColumnDef` / `DateRangePicker` / `FilterBar*` / `FunnelSteps` / `MetricValue` / `TrendIndicator` / `StatusBadge` / `SegmentedControl` / `MultiSelect` / `SearchableSelect` / `SectionHeader` / `AppShell` / `Placeholder` / `Sparkline` | `@squadbase/vantage/components` |
 | `Button` / `Input` / `Badge` / `Tabs*` / `ToggleGroup*` / `Table*` / `Select*` / `Dialog*` / `cn` ほか shadcn プリミティブ | `@squadbase/vantage/ui` |
 
-型付きチャート(`LineChart` / `AreaChart` / `BarChart` / `DonutChart` / `BarList` / `CategoryBar` / `ProgressCircle` / `Tracker`、`@squadbase/vantage/components`)と `Avatar` / `Pagination` / `RadioGroup` / `AlertDialog` / `Drawer` / `Toaster` / `Field` / `Combobox` / `HoverCard` / `Kbd`(`@squadbase/vantage/ui`)は 0.6.3 で入った。雛形の依存が `^0.5.3` の間は使わない(上の EChart の書き方のまま)。
+型付きチャート(`LineChart` / `AreaChart` / `BarChart` / `ScatterChart` / `Heatmap` / `DonutChart` / `FunnelSteps` / `BarList` / `CategoryBar` / `ProgressCircle` / `Tracker`、`@squadbase/vantage/components`)は 0.6.3 以降の部品。雛形の依存は `^0.7.0` なので使ってよい。`Avatar` / `Pagination` / `RadioGroup` / `AlertDialog` / `Drawer` / `Toaster` / `Field` / `Combobox` / `HoverCard` / `Kbd`(`@squadbase/vantage/ui`)も同じ。
 | `definePage` | `@squadbase/vantage` |
 | `Link` / `Outlet` / `useParams` / `useSearch` / `useNavigate` / `useRoutes` / `useCurrentRoute` / `useSearchParam` / `useSearchState` | `@squadbase/vantage/router` |
 | `useApiQuery` / `useApiMutation` / `useQuery` / `useMutation` / `apiFetch` | `@squadbase/vantage/query` |

package/ui-templates/chart-grid/lib/mock-data.ts

@@ -90,9 +90,6 @@ export const radarAxes: RadarPoint[] = [
   { current: 79, benchmark: 70 },
 ]
 
-export const HEATMAP_X_AXIS = ["0", "1", "2", "3", "4", "5"]
-export const HEATMAP_Y_AXIS = ["Row 1", "Row 2", "Row 3", "Row 4", "Row 5", "Row 6", "Row 7"]
-
 export const heatmapCells: HeatmapCell[] = [
   { x: "0", y: "Row 1", value: 57 },
   { x: "1", y: "Row 1", value: 25 },

package/ui-templates/chart-grid/lib/types.ts

@@ -1,31 +1,31 @@
-export interface TimePoint {
+export type TimePoint = {
   date: string
   series1: number
   series2: number
 }
 
-export interface BarPoint {
+export type BarPoint = {
   value: number
 }
 
-export interface ScatterPoint {
+export type ScatterPoint = {
   x: number
   y: number
   size: number
   label: string
 }
 
-export interface RadarPoint {
+export type RadarPoint = {
   current: number
   benchmark: number
 }
 
-export interface HeatmapCell {
+export type HeatmapCell = {
   x: string
   y: string
   value: number
 }
 
-export interface DashboardFilters {
+export type DashboardFilters = {
   dateRange: { from: Date | undefined; to: Date | undefined }
 }

package/ui-templates/chart-grid/pages/index.tsx

@@ -3,6 +3,11 @@ import { subDays } from "date-fns"
 import { definePage } from "@squadbase/vantage"
 import {
   DashboardCardPreset,
+  AreaChart,
+  BarChart,
+  Heatmap,
+  LineChart,
+  ScatterChart,
   DateRangePicker,
   EChart,
   PageShell,
@@ -22,15 +27,9 @@ import {
   scatterPoints,
   radarAxes,
   heatmapCells,
-  HEATMAP_X_AXIS,
-  HEATMAP_Y_AXIS,
 } from "./components/chart-grid/mock-data"
 import type {
-  TimePoint,
-  BarPoint,
-  ScatterPoint,
   RadarPoint,
-  HeatmapCell,
   DashboardFilters,
 } from "./components/chart-grid/types"
 
@@ -40,86 +39,6 @@ export const page = definePage({
     "Six-chart grid (area, line, bar, scatter, radar, heatmap) with category filter chips in the header.",
 })
 
-// ── chart helpers ───────────────────────────────────────────────────────────
-
-function getBaseGrid() {
-  return { left: "3%", right: "4%", bottom: "10%", containLabel: true }
-}
-
-function formatNumber(n: number): string {
-  const sign = n < 0 ? "-" : ""
-  const abs = Math.abs(n)
-  if (abs >= 1_000_000) return `${sign}${(abs / 1_000_000).toFixed(1)}M`
-  if (abs >= 1_000) return `${sign}${(abs / 1_000).toFixed(1)}K`
-  return n.toLocaleString("en-US")
-}
-
-// ── chart options ────────────────────────────────────────────────────────────
-
-function areaOption(data: TimePoint[]): EChartsOption {
-  return {
-    tooltip: { trigger: "axis" },
-    legend: { bottom: 0 },
-    grid: getBaseGrid(),
-    xAxis: {
-      type: "category",
-      data: data.map((d) => d.date),
-      boundaryGap: false,
-      axisLabel: { formatter: (v: string) => v.slice(5) },
-    },
-    yAxis: { type: "value", axisLabel: { formatter: (v: number) => formatNumber(v) } },
-    series: [
-      {
-        name: "Series A",
-        type: "line",
-        smooth: true,
-        showSymbol: false,
-        data: data.map((d) => d.series1),
-        areaStyle: { opacity: 0.22 },
-      },
-      {
-        name: "Series B",
-        type: "line",
-        smooth: true,
-        showSymbol: false,
-        data: data.map((d) => d.series2),
-        areaStyle: { opacity: 0.14 },
-      },
-    ],
-  }
-}
-
-function lineOption(data: TimePoint[]): EChartsOption {
-  return {
-    tooltip: { trigger: "axis" },
-    legend: { bottom: 0 },
-    grid: getBaseGrid(),
-    xAxis: {
-      type: "category",
-      data: data.map((d) => d.date),
-      boundaryGap: false,
-      axisLabel: { formatter: (v: string) => v.slice(5) },
-    },
-    yAxis: { type: "value", axisLabel: { formatter: (v: number) => formatNumber(v) } },
-    series: [
-      {
-        name: "Series A",
-        type: "line",
-        smooth: true,
-        showSymbol: false,
-        data: data.map((d) => d.series1),
-      },
-      {
-        name: "Series B",
-        type: "line",
-        smooth: true,
-        showSymbol: false,
-        data: data.map((d) => d.series2),
-      },
-    ],
-  }
-}
-
 const BAR_CATEGORIES = [
   "Item 1",
   "Item 2",
@@ -131,45 +50,6 @@ const BAR_CATEGORIES = [
   "Item 8",
 ]
 
-function barOption(data: BarPoint[]): EChartsOption {
-  return {
-    tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
-    grid: getBaseGrid(),
-    xAxis: { type: "category", data: BAR_CATEGORIES },
-    yAxis: { type: "value", axisLabel: { formatter: (v: number) => formatNumber(v) } },
-    series: [
-      {
-        name: "Series A",
-        type: "bar",
-        data: data.map((d) => d.value),
-        barMaxWidth: 28,
-      },
-    ],
-  }
-}
-
-function scatterOption(data: ScatterPoint[]): EChartsOption {
-  return {
-    tooltip: { trigger: "item" },
-    grid: getBaseGrid(),
-    xAxis: { type: "value" },
-    yAxis: { type: "value" },
-    series: [
-      {
-        type: "scatter",
-        data: data.map((p) => ({
-          value: [p.x, p.y, p.size] as [number, number, number],
-          label: p.label,
-        })),
-        symbolSize: (val: unknown) => {
-          const arr = val as [number, number, number]
-          return arr[2]
-        },
-      },
-    ] as EChartsOption["series"],
-  }
-}
-
 const RADAR_AXES = ["Axis 1", "Axis 2", "Axis 3", "Axis 4", "Axis 5", "Axis 6"]
 
 function radarOption(data: RadarPoint[]): EChartsOption {
@@ -200,34 +80,7 @@ function radarOption(data: RadarPoint[]): EChartsOption {
   }
 }
 
-function heatmapOption(
-  data: HeatmapCell[],
-  xAxis: string[],
-  yAxis: string[],
-): EChartsOption {
-  const max = Math.max(...data.map((c) => c.value))
-  return {
-    tooltip: { position: "top" },
-    grid: { height: "70%", top: "8%", left: "10%", right: "8%" },
-    xAxis: { type: "category", data: xAxis, splitArea: { show: true } },
-    yAxis: { type: "category", data: yAxis, splitArea: { show: true } },
-    visualMap: {
-      min: 0,
-      max,
-      calculable: true,
-      orient: "horizontal",
-      bottom: 0,
-    },
-    series: [
-      {
-        type: "heatmap",
-        data: data.map((c) => [xAxis.indexOf(c.x), yAxis.indexOf(c.y), c.value]),
-        label: { show: false },
-        emphasis: { itemStyle: { shadowBlur: 8 } },
-      },
-    ],
-  }
-}
+const barRows = barSeries.map((d, i) => ({ item: BAR_CATEGORIES[i], value: d.value }))
 
 // ── page ─────────────────────────────────────────────────────────────────────
 
@@ -290,7 +143,7 @@ export default function HomePage() {
               title="Trend (area)"
               description="Two series over the selected period"
             >
-              <EChart option={areaOption(timeSeries)} height="280px" />
+              <AreaChart data={timeSeries} index="date" categories={["series1", "series2"]} labels={{ series1: "Series A", series2: "Series B" }} height="280px" />
             </DashboardCardPreset>
           )}
           {show("trend") && (
@@ -298,17 +151,17 @@ export default function HomePage() {
               title="Trend (line)"
               description="Two series over the selected period"
             >
-              <EChart option={lineOption(timeSeries)} height="280px" />
+              <LineChart data={timeSeries} index="date" categories={["series1", "series2"]} labels={{ series1: "Series A", series2: "Series B" }} height="280px" />
             </DashboardCardPreset>
           )}
           {show("ranking") && (
             <DashboardCardPreset title="Top categories" description="Ranked by value">
-              <EChart option={barOption(barSeries)} height="280px" />
+              <BarChart data={barRows} index="item" categories={["value"]} labels={{ value: "Series A" }} showLegend={false} height="280px" />
             </DashboardCardPreset>
           )}
           {show("distribution") && (
             <DashboardCardPreset title="Correlation" description="Each point is an item">
-              <EChart option={scatterOption(scatterPoints)} height="280px" />
+              <ScatterChart data={scatterPoints} x="x" y="y" size="size" index="label" height="280px" />
             </DashboardCardPreset>
           )}
           {show("distribution") && (
@@ -318,10 +171,7 @@ export default function HomePage() {
           )}
           {show("distribution") && (
             <DashboardCardPreset title="Activity" description="Intensity by cell">
-              <EChart
-                option={heatmapOption(heatmapCells, HEATMAP_X_AXIS, HEATMAP_Y_AXIS)}
-                height="280px"
-              />
+              <Heatmap data={heatmapCells} x="x" y="y" value="value" xLabels={["0", "1", "2", "3", "4", "5"]} yLabels={["Row 7", "Row 6", "Row 5", "Row 4", "Row 3", "Row 2", "Row 1"]} height={280} />
             </DashboardCardPreset>
           )}
         </div>

package/ui-templates/chart-grid-ja/lib/mock-data.ts

@@ -90,9 +90,6 @@ export const radarAxes: RadarPoint[] = [
   { current: 79, benchmark: 70 },
 ]
 
-export const HEATMAP_X_AXIS = ["0", "1", "2", "3", "4", "5"]
-export const HEATMAP_Y_AXIS = ["行1", "行2", "行3", "行4", "行5", "行6", "行7"]
-
 export const heatmapCells: HeatmapCell[] = [
   { x: "0", y: "行1", value: 57 },
   { x: "1", y: "行1", value: 25 },

package/ui-templates/chart-grid-ja/lib/types.ts

@@ -1,31 +1,31 @@
-export interface TimePoint {
+export type TimePoint = {
   date: string
   series1: number
   series2: number
 }
 
-export interface BarPoint {
+export type BarPoint = {
   value: number
 }
 
-export interface ScatterPoint {
+export type ScatterPoint = {
   x: number
   y: number
   size: number
   label: string
 }
 
-export interface RadarPoint {
+export type RadarPoint = {
   current: number
   benchmark: number
 }
 
-export interface HeatmapCell {
+export type HeatmapCell = {
   x: string
   y: string
   value: number
 }
 
-export interface DashboardFilters {
+export type DashboardFilters = {
   dateRange: { from: Date | undefined; to: Date | undefined }
 }