@squadbase/vantage-template 0.2.0-dev1.15ee4f2 → 0.2.0-dev1.29fa6c1

package/ui-templates/table-focus/pages/index.tsx

@@ -4,7 +4,7 @@ import { Download, Search } from "lucide-react"
 import { definePage } from "@squadbase/vantage"
 import {
   DashboardCardPreset,
-  EChart,
+  AreaChart,
   PageShell,
   PageShellContent,
   PageShellDescription,
@@ -13,7 +13,6 @@ import {
   PageShellHeading,
   PageShellTitle,
   Placeholder,
-  type EChartsOption,
 } from "@squadbase/vantage/components"
 import { Button, Input, ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui"
 
@@ -23,7 +22,7 @@ import {
   summaryRows,
   trendSeries,
 } from "./components/table-focus/mock-data"
-import type { DetailRow, TrendPoint } from "./components/table-focus/types"
+import type { DetailRow } from "./components/table-focus/types"
 
 export const page = definePage({
   title: "Records",
@@ -31,47 +30,6 @@ export const page = definePage({
     "Workbench layout: header search + Export, status filter chips, a sortable detail table as the main element, with a trend chart and segment breakdown in a right sidebar.",
 })
 
-// ── 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 trendOption(data: TrendPoint[]): 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.value),
-        areaStyle: { opacity: 0.18 },
-      },
-    ],
-  }
-}
-
 // ── page ─────────────────────────────────────────────────────────────────────
 
 type StatusFilter = "all" | DetailRow["status"]
@@ -150,7 +108,7 @@ export default function HomePage() {
               title="Trend"
               description="Values over the selected period"
             >
-              <EChart option={trendOption(trendSeries)} height="220px" />
+              <AreaChart data={trendSeries} index="date" categories={["value"]} labels={{ value: "Series A" }} height="220px" />
             </DashboardCardPreset>
             <DashboardCardPreset title="By segment" description="Share of total">
               <div className="space-y-3">

package/ui-templates/table-focus-ja/lib/types.ts

@@ -1,4 +1,4 @@
-export interface DetailRow {
+export type DetailRow = {
   id: string
   name: string
   owner: string
@@ -10,7 +10,7 @@ export interface DetailRow {
   updated: string
 }
 
-export interface SummaryRow {
+export type SummaryRow = {
   segment: string
   count: number
   revenue: number
@@ -18,7 +18,7 @@ export interface SummaryRow {
   share: number
 }
 
-export interface TrendPoint {
+export type TrendPoint = {
   date: string
   value: number
 }

package/ui-templates/table-focus-ja/pages/index.tsx

@@ -4,7 +4,7 @@ import { Download, Search } from "lucide-react"
 import { definePage } from "@squadbase/vantage"
 import {
   DashboardCardPreset,
-  EChart,
+  AreaChart,
   PageShell,
   PageShellContent,
   PageShellDescription,
@@ -13,7 +13,6 @@ import {
   PageShellHeading,
   PageShellTitle,
   Placeholder,
-  type EChartsOption,
 } from "@squadbase/vantage/components"
 import { Button, Input, ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui"
 
@@ -23,7 +22,7 @@ import {
   summaryRows,
   trendSeries,
 } from "./components/table-focus/mock-data"
-import type { DetailRow, TrendPoint } from "./components/table-focus/types"
+import type { DetailRow } from "./components/table-focus/types"
 
 export const page = definePage({
   title: "レコード",
@@ -31,47 +30,6 @@ export const page = definePage({
     "ヘッダーに検索+エクスポート、ステータスフィルタチップ、ソート可能な詳細テーブルを主役とし、右サイドにトレンドチャートとセグメント内訳を配置する作業画面構成。",
 })
 
-// ── 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 trendOption(data: TrendPoint[]): 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.value),
-        areaStyle: { opacity: 0.18 },
-      },
-    ],
-  }
-}
-
 // ── page ─────────────────────────────────────────────────────────────────────
 
 type StatusFilter = "all" | DetailRow["status"]
@@ -150,7 +108,7 @@ export default function HomePage() {
               title="トレンド"
               description="選択期間の値"
             >
-              <EChart option={trendOption(trendSeries)} height="220px" />
+              <AreaChart data={trendSeries} index="date" categories={["value"]} labels={{ value: "系列A" }} height="220px" />
             </DashboardCardPreset>
             <DashboardCardPreset title="セグメント別" description="全体に占める割合">
               <div className="space-y-3">