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

package/ui-templates/kpi-chart-advanced-ja/pages/index.tsx

@@ -20,7 +20,9 @@ import {
   DashboardCardPreset,
   DashboardCardTitle,
   DateRangePicker,
-  EChart,
+  AreaChart,
+  BarChart,
+  DonutChart,
   PageShell,
   PageShellContent,
   PageShellDescription,
@@ -32,7 +34,6 @@ import {
   PageShellTitle,
   Placeholder,
   Sparkline,
-  type EChartsOption,
 } from "@squadbase/vantage/components"
 
 import { CampaignTable } from "./components/kpi-chart-advanced/campaign-table"
@@ -44,10 +45,7 @@ import {
   trendSeries,
 } from "./components/kpi-chart-advanced/mock-data"
 import type {
-  BreakdownSlice,
-  ComparisonPoint,
   DashboardFilters,
-  TrendPoint,
 } from "./components/kpi-chart-advanced/types"
 
 export const page = definePage({
@@ -56,115 +54,6 @@ export const page = definePage({
     "ヒーローKPI (大1+小4の2×2) ・棒+折れ線比較チャート・ドーナツ・日次トレンド・明細テーブルを搭載したKPI主役のダッシュボード構成",
 })
 
-// ── chart helpers ───────────────────────────────────────────────────────────
-
-function getBaseGrid() {
-  return { left: "3%", right: "4%", bottom: "12%", containLabel: true }
-}
-
-function getDualAxisGrid() {
-  return { left: "3%", right: "6%", bottom: "12%", 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 comparisonOption(data: ComparisonPoint[]): EChartsOption {
-  return {
-    tooltip: { trigger: "axis" },
-    legend: { bottom: 0 },
-    grid: getDualAxisGrid(),
-    xAxis: {
-      type: "category",
-      data: data.map((d) => d.period),
-    },
-    yAxis: [
-      {
-        type: "value",
-        axisLabel: { formatter: (v: number) => formatNumber(v) },
-      },
-      {
-        type: "value",
-        axisLabel: { formatter: (v: number) => `${v.toFixed(0)}%` },
-        splitLine: { show: false },
-      },
-    ],
-    series: [
-      {
-        name: "系列A",
-        type: "bar",
-        data: data.map((d) => d.current),
-        barMaxWidth: 28,
-      },
-      {
-        name: "系列B",
-        type: "bar",
-        data: data.map((d) => d.previous),
-        barMaxWidth: 28,
-      },
-      {
-        name: "系列C",
-        type: "line",
-        yAxisIndex: 1,
-        smooth: true,
-        data: data.map((d) => d.growth),
-      },
-    ],
-  }
-}
-
-function breakdownOption(data: BreakdownSlice[]): EChartsOption {
-  return {
-    tooltip: { trigger: "item" },
-    legend: { bottom: 0 },
-    series: [
-      {
-        type: "pie",
-        radius: ["52%", "78%"],
-        avoidLabelOverlap: true,
-        itemStyle: { borderRadius: 6, borderColor: "transparent", borderWidth: 2 },
-        label: { show: false },
-        data: data.map((d) => ({ name: d.segment, value: d.value })),
-      },
-    ],
-  }
-}
-
-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 ─────────────────────────────────────────────────────────────────────
 
 const today = new Date()
@@ -312,16 +201,16 @@ export default function HomePage() {
         <div className="grid gap-4 lg:grid-cols-3">
           <div className="lg:col-span-2">
             <DashboardCardPreset title="比較" description="今期 vs 前期">
-              <EChart option={comparisonOption(comparisonSeries)} height="320px" />
+              <BarChart data={comparisonSeries} index="period" categories={["current", "previous"]} labels={{ current: "系列A", previous: "系列B" }} height="320px" />
             </DashboardCardPreset>
           </div>
           <DashboardCardPreset title="内訳" description="セグメント別シェア">
-            <EChart option={breakdownOption(breakdownSlices)} height="320px" />
+            <DonutChart data={breakdownSlices} index="segment" categories={["value"]} height="320px" />
           </DashboardCardPreset>
         </div>
 
         <DashboardCardPreset title="トレンド" description="選択期間の値">
-          <EChart option={trendOption(trendSeries)} height="280px" />
+          <AreaChart data={trendSeries} index="date" categories={["value"]} labels={{ value: "系列A" }} height="280px" />
         </DashboardCardPreset>
 
         <DashboardCardPreset title="キャンペーン" description="キャンペーン別パフォーマンス">

package/ui-templates/kpi-chart-simple/lib/types.ts

@@ -11,7 +11,7 @@ export type RangeKey = "7d" | "30d" | "90d"
 export type KpiId = "total-revenue" | "active-users" | "conversion-rate" | "aov"
 
 /** Raw numbers only — labels and formatting belong to the page. */
-export interface KpiItem {
+export type KpiItem = {
   id: KpiId
   value: number
   /** Percent change against the preceding window of the same length. */
@@ -19,14 +19,14 @@ export interface KpiItem {
   sparklineData: number[]
 }
 
-export interface TrendPoint {
+export type TrendPoint = {
   date: string
   revenue: number
   orders: number
   visitors: number
 }
 
-export interface TopItemRow {
+export type TopItemRow = {
   id: string
   name: string
   category: string
@@ -36,7 +36,7 @@ export interface TopItemRow {
 }
 
 /** The payload `GET /api/kpi-summary` returns. */
-export interface KpiSummary {
+export type KpiSummary = {
   range: RangeKey
   kpis: KpiItem[]
   trend: TrendPoint[]

package/ui-templates/kpi-chart-simple/pages/index.tsx

@@ -7,7 +7,7 @@ import {
   DashboardCardHeader,
   DashboardCardPreset,
   DashboardCardTitle,
-  EChart,
+  AreaChart,
   PageShell,
   PageShellContent,
   PageShellDescription,
@@ -19,13 +19,13 @@ import {
   SegmentedControl,
   Sparkline,
 } from "@squadbase/vantage/components"
-import type { EChartsOption, SegmentOption } from "@squadbase/vantage/components"
+import type { SegmentOption } from "@squadbase/vantage/components"
 import { Button, ErrorState, Loading } from "@squadbase/vantage/ui"
 import { useApiQuery } from "@squadbase/vantage/query"
 import { useSearchParam } from "@squadbase/vantage/router"
 
 import { TopItemsTable } from "./components/kpi-chart-simple/top-items-table"
-import type { KpiId, KpiSummary, TrendPoint } from "./lib/kpi-chart-simple/types"
+import type { KpiId, KpiSummary } from "./lib/kpi-chart-simple/types"
 
 export const page = definePage({
   title: "KPI + Chart (Simple)",
@@ -35,14 +35,6 @@ export const page = definePage({
 
 // ── formatting ───────────────────────────────────────────────────────────────
 
-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")
-}
-
 function formatCurrency(n: number): string {
   const sign = n < 0 ? "-" : ""
   const abs = Math.abs(n)
@@ -51,36 +43,6 @@ function formatCurrency(n: number): string {
   return `${sign}$${abs.toFixed(0)}`
 }
 
-// ── chart options ────────────────────────────────────────────────────────────
-
-function trendOption(data: TrendPoint[]): EChartsOption {
-  return {
-    tooltip: { trigger: "axis" },
-    legend: { bottom: 0 },
-    grid: { left: "3%", right: "4%", bottom: "10%", containLabel: true },
-    xAxis: {
-      type: "category",
-      data: data.map((d) => d.date),
-      boundaryGap: false,
-      axisLabel: { formatter: (value: string) => value.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.revenue),
-        areaStyle: { opacity: 0.18 },
-      },
-    ],
-  }
-}
-
 // ── page ─────────────────────────────────────────────────────────────────────
 
 /** Display labels live here, not in the payload the API returns. */
@@ -104,54 +66,6 @@ const RANGE_OPTIONS: SegmentOption[] = [
   { label: "90 days", value: "90d" },
 ]
 
-function DashboardBody({ data }: { data: KpiSummary }) {
-  return (
-    <>
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {data.kpis.map((kpi) => {
-          const { label, icon: Icon, format } = KPI_META[kpi.id]
-          return (
-            <DashboardCard key={kpi.id}>
-              <DashboardCardHeader>
-                <DashboardCardTitle className="text-muted-foreground">
-                  {label}
-                </DashboardCardTitle>
-                <DashboardCardAction>
-                  <Icon className="size-4 text-muted-foreground" />
-                </DashboardCardAction>
-              </DashboardCardHeader>
-              <DashboardCardContent>
-                <Placeholder className="text-2xl font-bold">
-                  {format(kpi.value)}
-                </Placeholder>
-                <div className="mt-2">
-                  <Placeholder className="text-sm font-medium">
-                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
-                  </Placeholder>
-                </div>
-                <Sparkline
-                  data={kpi.sparklineData.map((v) => ({ value: v }))}
-                  height={32}
-                  area
-                  className="mt-3"
-                />
-              </DashboardCardContent>
-            </DashboardCard>
-          )
-        })}
-      </div>
-
-      <DashboardCardPreset title="Trend" description="Values over the selected period">
-        <EChart option={trendOption(data.trend)} height="320px" />
-      </DashboardCardPreset>
-
-      <DashboardCardPreset title="Top items" description="Ranked by value">
-        <TopItemsTable data={data.topItems} />
-      </DashboardCardPreset>
-    </>
-  )
-}
-
 export default function HomePage() {
   // Filter state belongs in the URL rather than `useState`: it survives a
   // reload, and a pasted link reproduces exactly what you were looking at.
@@ -198,3 +112,51 @@ export default function HomePage() {
     </PageShell>
   )
 }
+
+function DashboardBody({ data }: { data: KpiSummary }) {
+  return (
+    <>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {data.kpis.map((kpi) => {
+          const { label, icon: Icon, format } = KPI_META[kpi.id]
+          return (
+            <DashboardCard key={kpi.id} data-sq-ref={kpi.id}>
+              <DashboardCardHeader>
+                <DashboardCardTitle className="text-muted-foreground">
+                  {label}
+                </DashboardCardTitle>
+                <DashboardCardAction>
+                  <Icon className="size-4 text-muted-foreground" />
+                </DashboardCardAction>
+              </DashboardCardHeader>
+              <DashboardCardContent>
+                <Placeholder className="text-2xl font-bold">
+                  {format(kpi.value)}
+                </Placeholder>
+                <div className="mt-2">
+                  <Placeholder className="text-sm font-medium">
+                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
+                  </Placeholder>
+                </div>
+                <Sparkline
+                  data={kpi.sparklineData.map((v) => ({ value: v }))}
+                  height={32}
+                  area
+                  className="mt-3"
+                />
+              </DashboardCardContent>
+            </DashboardCard>
+          )
+        })}
+      </div>
+
+      <DashboardCardPreset data-sq-ref="trend" title="Trend" description="Values over the selected period">
+        <AreaChart data={data.trend} index="date" categories={["revenue"]} labels={{ revenue: "Series A" }} height="320px" />
+      </DashboardCardPreset>
+
+      <DashboardCardPreset data-sq-ref="top-items" title="Top items" description="Ranked by value">
+        <TopItemsTable data={data.topItems} />
+      </DashboardCardPreset>
+    </>
+  )
+}

package/ui-templates/kpi-chart-simple-ja/lib/types.ts

@@ -11,7 +11,7 @@ export type RangeKey = "7d" | "30d" | "90d"
 export type KpiId = "total-revenue" | "active-users" | "conversion-rate" | "aov"
 
 /** Raw numbers only — labels and formatting belong to the page. */
-export interface KpiItem {
+export type KpiItem = {
   id: KpiId
   value: number
   /** Percent change against the preceding window of the same length. */
@@ -19,14 +19,14 @@ export interface KpiItem {
   sparklineData: number[]
 }
 
-export interface TrendPoint {
+export type TrendPoint = {
   date: string
   revenue: number
   orders: number
   visitors: number
 }
 
-export interface TopItemRow {
+export type TopItemRow = {
   id: string
   name: string
   category: string
@@ -36,7 +36,7 @@ export interface TopItemRow {
 }
 
 /** The payload `GET /api/kpi-summary` returns. */
-export interface KpiSummary {
+export type KpiSummary = {
   range: RangeKey
   kpis: KpiItem[]
   trend: TrendPoint[]

package/ui-templates/kpi-chart-simple-ja/pages/index.tsx

@@ -7,7 +7,7 @@ import {
   DashboardCardHeader,
   DashboardCardPreset,
   DashboardCardTitle,
-  EChart,
+  AreaChart,
   PageShell,
   PageShellContent,
   PageShellDescription,
@@ -19,13 +19,13 @@ import {
   SegmentedControl,
   Sparkline,
 } from "@squadbase/vantage/components"
-import type { EChartsOption, SegmentOption } from "@squadbase/vantage/components"
+import type { SegmentOption } from "@squadbase/vantage/components"
 import { Button, ErrorState, Loading } from "@squadbase/vantage/ui"
 import { useApiQuery } from "@squadbase/vantage/query"
 import { useSearchParam } from "@squadbase/vantage/router"
 
 import { TopItemsTable } from "./components/kpi-chart-simple/top-items-table"
-import type { KpiId, KpiSummary, TrendPoint } from "./lib/kpi-chart-simple/types"
+import type { KpiId, KpiSummary } from "./lib/kpi-chart-simple/types"
 
 export const page = definePage({
   title: "KPI + チャート (シンプル)",
@@ -35,14 +35,6 @@ export const page = definePage({
 
 // ── 表示フォーマット ─────────────────────────────────────────────────────────
 
-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("ja-JP")
-}
-
 function formatCurrency(n: number): string {
   const sign = n < 0 ? "-" : ""
   const abs = Math.abs(n)
@@ -53,34 +45,6 @@ function formatCurrency(n: number): string {
 
 // ── チャートオプション ───────────────────────────────────────────────────────
 
-function trendOption(data: TrendPoint[]): EChartsOption {
-  return {
-    tooltip: { trigger: "axis" },
-    legend: { bottom: 0 },
-    grid: { left: "3%", right: "4%", bottom: "10%", containLabel: true },
-    xAxis: {
-      type: "category",
-      data: data.map((d) => d.date),
-      boundaryGap: false,
-      axisLabel: { formatter: (value: string) => value.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.revenue),
-        areaStyle: { opacity: 0.18 },
-      },
-    ],
-  }
-}
-
 // ── ページ ───────────────────────────────────────────────────────────────────
 
 /** 表示ラベルは API のレスポンスではなく描画側に置く。 */
@@ -104,54 +68,6 @@ const RANGE_OPTIONS: SegmentOption[] = [
   { label: "90日", value: "90d" },
 ]
 
-function DashboardBody({ data }: { data: KpiSummary }) {
-  return (
-    <>
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {data.kpis.map((kpi) => {
-          const { label, icon: Icon, format } = KPI_META[kpi.id]
-          return (
-            <DashboardCard key={kpi.id}>
-              <DashboardCardHeader>
-                <DashboardCardTitle className="text-muted-foreground">
-                  {label}
-                </DashboardCardTitle>
-                <DashboardCardAction>
-                  <Icon className="size-4 text-muted-foreground" />
-                </DashboardCardAction>
-              </DashboardCardHeader>
-              <DashboardCardContent>
-                <Placeholder className="text-2xl font-bold">
-                  {format(kpi.value)}
-                </Placeholder>
-                <div className="mt-2">
-                  <Placeholder className="text-sm font-medium">
-                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
-                  </Placeholder>
-                </div>
-                <Sparkline
-                  data={kpi.sparklineData.map((v) => ({ value: v }))}
-                  height={32}
-                  area
-                  className="mt-3"
-                />
-              </DashboardCardContent>
-            </DashboardCard>
-          )
-        })}
-      </div>
-
-      <DashboardCardPreset title="トレンド" description="選択期間の値">
-        <EChart option={trendOption(data.trend)} height="320px" />
-      </DashboardCardPreset>
-
-      <DashboardCardPreset title="上位項目" description="値で並べ替え">
-        <TopItemsTable data={data.topItems} />
-      </DashboardCardPreset>
-    </>
-  )
-}
-
 export default function HomePage() {
   // 絞り込み状態は useState ではなく URL に置く。リロードで消えず、URL を
   // そのまま共有すれば相手も同じ画面を見られる。
@@ -198,3 +114,51 @@ export default function HomePage() {
     </PageShell>
   )
 }
+
+function DashboardBody({ data }: { data: KpiSummary }) {
+  return (
+    <>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {data.kpis.map((kpi) => {
+          const { label, icon: Icon, format } = KPI_META[kpi.id]
+          return (
+            <DashboardCard key={kpi.id} data-sq-ref={kpi.id}>
+              <DashboardCardHeader>
+                <DashboardCardTitle className="text-muted-foreground">
+                  {label}
+                </DashboardCardTitle>
+                <DashboardCardAction>
+                  <Icon className="size-4 text-muted-foreground" />
+                </DashboardCardAction>
+              </DashboardCardHeader>
+              <DashboardCardContent>
+                <Placeholder className="text-2xl font-bold">
+                  {format(kpi.value)}
+                </Placeholder>
+                <div className="mt-2">
+                  <Placeholder className="text-sm font-medium">
+                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
+                  </Placeholder>
+                </div>
+                <Sparkline
+                  data={kpi.sparklineData.map((v) => ({ value: v }))}
+                  height={32}
+                  area
+                  className="mt-3"
+                />
+              </DashboardCardContent>
+            </DashboardCard>
+          )
+        })}
+      </div>
+
+      <DashboardCardPreset data-sq-ref="trend" title="トレンド" description="選択期間の値">
+        <AreaChart data={data.trend} index="date" categories={["revenue"]} labels={{ revenue: "系列A" }} height="320px" />
+      </DashboardCardPreset>
+
+      <DashboardCardPreset data-sq-ref="top-items" title="上位項目" description="値で並べ替え">
+        <TopItemsTable data={data.topItems} />
+      </DashboardCardPreset>
+    </>
+  )
+}

package/ui-templates/table-focus/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
 }