@squadbase/vantage-template 0.1.1 → 0.2.0-dev1.0c136ab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.1",
+  "version": "0.2.0-dev1.0c136ab",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",
@@ -36,29 +36,32 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "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": "npm run sync-base && tsup",
-    "type-check": "tsc",
-    "agents": "node scripts/build-agents.cjs",
-    "agents:check": "node scripts/build-agents.cjs --check",
-    "template:install": "npm --prefix template ci",
-    "template:build": "npm --prefix template run build",
-    "prepublishOnly": "npm run agents:check && npm run build",
-    "release": "npm publish --@squadbase:registry=https://registry.npmjs.org",
-    "dev": "node scripts/dev.mjs",
-    "screenshot": "node scripts/screenshot.mjs"
-  },
   "devDependencies": {
     "@types/node": "^22.15.0",
     "playwright": "^1.49.0",
     "tsup": "^8.4.0",
-    "typescript": "~5.7.0"
+    "typescript": "~5.7.0",
+    "vitest": "^5.0.5",
+    "@squadbase/squadkit": "0.0.0"
   },
   "optionalDependencies": {
     "@ai-sdk/anthropic": "^2.0.0",
     "@ai-sdk/google": "^2.0.0",
-    "@ai-sdk/openai": "^2.0.0",
+    "@ai-sdk/openai": "2.0.122",
     "ai": "^5.0.52"
+  },
+  "gitHead": "0c136abfd64c5a27978b5bdb29c586394c852b5f",
+  "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",
+    "type-check": "tsc",
+    "test": "vitest run",
+    "agents": "node scripts/build-agents.cjs",
+    "agents:check": "node scripts/build-agents.cjs --check",
+    "template:install": "bun install --cwd template --frozen-lockfile",
+    "template:build": "bun run --cwd template build",
+    "release": "pnpm publish --@squadbase:registry=https://registry.npmjs.org",
+    "dev": "node scripts/dev.mjs",
+    "screenshot": "node scripts/screenshot.mjs"
   }
-}
+}

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）は分離する
 
@@ -96,6 +97,8 @@ 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` / `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 }
 }

package/ui-templates/chart-grid-ja/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({
     "エリア/折れ線/棒/散布/レーダー/ヒートマップの6チャート格子。ヘッダーにカテゴリフィルタチップを配置。",
 })
 
-// ── 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 >= 100_000_000) return `${sign}${(abs / 100_000_000).toFixed(1)}億`
-  if (abs >= 10_000) return `${sign}${(abs / 10_000).toFixed(0)}万`
-  return n.toLocaleString("ja-JP")
-}
-
-// ── 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: "系列A",
-        type: "line",
-        smooth: true,
-        showSymbol: false,
-        data: data.map((d) => d.series1),
-        areaStyle: { opacity: 0.22 },
-      },
-      {
-        name: "系列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: "系列A",
-        type: "line",
-        smooth: true,
-        showSymbol: false,
-        data: data.map((d) => d.series1),
-      },
-      {
-        name: "系列B",
-        type: "line",
-        smooth: true,
-        showSymbol: false,
-        data: data.map((d) => d.series2),
-      },
-    ],
-  }
-}
-
 const BAR_CATEGORIES = [
   "項目1",
   "項目2",
@@ -131,45 +50,6 @@ const BAR_CATEGORIES = [
   "項目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: "系列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 = ["軸1", "軸2", "軸3", "軸4", "軸5", "軸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="トレンド (エリア)"
               description="選択期間の2系列"
             >
-              <EChart option={areaOption(timeSeries)} height="280px" />
+              <AreaChart data={timeSeries} index="date" categories={["series1", "series2"]} labels={{ series1: "系列A", series2: "系列B" }} height="280px" />
             </DashboardCardPreset>
           )}
           {show("trend") && (
@@ -298,17 +151,17 @@ export default function HomePage() {
               title="トレンド (折れ線)"
               description="選択期間の2系列"
             >
-              <EChart option={lineOption(timeSeries)} height="280px" />
+              <LineChart data={timeSeries} index="date" categories={["series1", "series2"]} labels={{ series1: "系列A", series2: "系列B" }} height="280px" />
             </DashboardCardPreset>
           )}
           {show("ranking") && (
             <DashboardCardPreset title="上位カテゴリ" description="値で並べ替え">
-              <EChart option={barOption(barSeries)} height="280px" />
+              <BarChart data={barRows} index="item" categories={["value"]} labels={{ value: "系列A" }} showLegend={false} height="280px" />
             </DashboardCardPreset>
           )}
           {show("distribution") && (
             <DashboardCardPreset title="相関" description="各点が1項目">
-              <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="アクティビティ" description="セルごとの強度">
-              <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={["行7", "行6", "行5", "行4", "行3", "行2", "行1"]} height={280} />
             </DashboardCardPreset>
           )}
         </div>