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

package/ui-templates/kpi-chart-advanced/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({
     "Hero KPI (1 large + 4 small in 2×2 grid), bar+line comparison, donut breakdown, daily trend, and a detail table. KPI-led analytics dashboard layout.",
 })
 
-// ── 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 >= 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 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: "Series A",
-        type: "bar",
-        data: data.map((d) => d.current),
-        barMaxWidth: 28,
-      },
-      {
-        name: "Series B",
-        type: "bar",
-        data: data.map((d) => d.previous),
-        barMaxWidth: 28,
-      },
-      {
-        name: "Series 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: "Series A",
-        type: "line",
-        smooth: true,
-        showSymbol: false,
-        data: data.map((d) => d.value),
-        areaStyle: { opacity: 0.18 },
-      },
-    ],
-  }
-}
-
 // ── page ─────────────────────────────────────────────────────────────────────
 
 const today = new Date()
@@ -315,11 +204,11 @@ export default function HomePage() {
               title="Comparison"
               description="Current vs previous period"
             >
-              <EChart option={comparisonOption(comparisonSeries)} height="320px" />
+              <BarChart data={comparisonSeries} index="period" categories={["current", "previous"]} labels={{ current: "Series A", previous: "Series B" }} height="320px" />
             </DashboardCardPreset>
           </div>
           <DashboardCardPreset title="Breakdown" description="Share by segment">
-            <EChart option={breakdownOption(breakdownSlices)} height="320px" />
+            <DonutChart data={breakdownSlices} index="segment" categories={["value"]} height="320px" />
           </DashboardCardPreset>
         </div>
 
@@ -327,7 +216,7 @@ export default function HomePage() {
           title="Trend"
           description="Values over the selected period"
         >
-          <EChart option={trendOption(trendSeries)} height="280px" />
+          <AreaChart data={trendSeries} index="date" categories={["value"]} labels={{ value: "Series A" }} height="280px" />
         </DashboardCardPreset>
 
         <DashboardCardPreset title="Campaigns" description="Performance by campaign">

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

@@ -40,12 +40,12 @@ export const trendSeries: TrendPoint[] = [
 ]
 
 export const comparisonSeries: ComparisonPoint[] = [
-  { period: "2023-10", current: 308820, previous: 285196, growth: 8.28 },
-  { period: "2023-11", current: 360871, previous: 300245, growth: 20.19 },
-  { period: "2023-12", current: 369038, previous: 344274, growth: 7.19 },
-  { period: "2024-01", current: 402455, previous: 338646, growth: 18.84 },
-  { period: "2024-02", current: 443741, previous: 396096, growth: 12.03 },
-  { period: "2024-03", current: 445883, previous: 387812, growth: 14.97 },
+  { period: "2023-10", current: 308820, previous: 285196 },
+  { period: "2023-11", current: 360871, previous: 300245 },
+  { period: "2023-12", current: 369038, previous: 344274 },
+  { period: "2024-01", current: 402455, previous: 338646 },
+  { period: "2024-02", current: 443741, previous: 396096 },
+  { period: "2024-03", current: 445883, previous: 387812 },
 ]
 
 export const breakdownSlices: BreakdownSlice[] = [

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

@@ -1,4 +1,4 @@
-export interface KpiItem {
+export type KpiItem = {
   id: "revenue" | "users" | "conversion" | "aov" | "sessions"
   value: string
   change: number
@@ -7,24 +7,23 @@ export interface KpiItem {
   sparklineData: number[]
 }
 
-export interface ComparisonPoint {
+export type ComparisonPoint = {
   period: string
   current: number
   previous: number
-  growth: number
 }
 
-export interface BreakdownSlice {
+export type BreakdownSlice = {
   segment: string
   value: number
 }
 
-export interface TrendPoint {
+export type TrendPoint = {
   date: string
   value: number
 }
 
-export interface CampaignRow {
+export type CampaignRow = {
   id: string
   name: string
   channel: string
@@ -33,6 +32,6 @@ export interface CampaignRow {
   roi: number
 }
 
-export interface DashboardFilters {
+export type DashboardFilters = {
   dateRange: { from: Date | undefined; to: Date | undefined }
 }

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. */
@@ -189,7 +151,7 @@ function DashboardBody({ data }: { data: KpiSummary }) {
       </div>
 
       <DashboardCardPreset data-sq-ref="trend" title="Trend" description="Values over the selected period">
-        <EChart option={trendOption(data.trend)} height="320px" />
+        <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">

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 のレスポンスではなく描画側に置く。 */
@@ -189,7 +153,7 @@ function DashboardBody({ data }: { data: KpiSummary }) {
       </div>
 
       <DashboardCardPreset data-sq-ref="trend" title="トレンド" description="選択期間の値">
-        <EChart option={trendOption(data.trend)} height="320px" />
+        <AreaChart data={data.trend} index="date" categories={["revenue"]} labels={{ revenue: "系列A" }} height="320px" />
       </DashboardCardPreset>
 
       <DashboardCardPreset data-sq-ref="top-items" title="上位項目" description="値で並べ替え">

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
 }