@squadbase/vantage-template 0.0.1

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

@@ -0,0 +1,109 @@
+import type {
+  KpiItem,
+  ComparisonPoint,
+  BreakdownSlice,
+  TrendPoint,
+  CampaignRow,
+} from "./types"
+
+export const trendSeries: TrendPoint[] = [
+  { date: "2024-03-02", value: 25537 },
+  { date: "2024-03-03", value: 25443 },
+  { date: "2024-03-04", value: 31199 },
+  { date: "2024-03-05", value: 27676 },
+  { date: "2024-03-06", value: 31689 },
+  { date: "2024-03-07", value: 31329 },
+  { date: "2024-03-08", value: 29802 },
+  { date: "2024-03-09", value: 24254 },
+  { date: "2024-03-10", value: 23112 },
+  { date: "2024-03-11", value: 32913 },
+  { date: "2024-03-12", value: 29638 },
+  { date: "2024-03-13", value: 28547 },
+  { date: "2024-03-14", value: 33511 },
+  { date: "2024-03-15", value: 30842 },
+  { date: "2024-03-16", value: 26136 },
+  { date: "2024-03-17", value: 29594 },
+  { date: "2024-03-18", value: 34866 },
+  { date: "2024-03-19", value: 30377 },
+  { date: "2024-03-20", value: 31164 },
+  { date: "2024-03-21", value: 32209 },
+  { date: "2024-03-22", value: 36270 },
+  { date: "2024-03-23", value: 28720 },
+  { date: "2024-03-24", value: 26871 },
+  { date: "2024-03-25", value: 32817 },
+  { date: "2024-03-26", value: 36762 },
+  { date: "2024-03-27", value: 34853 },
+  { date: "2024-03-28", value: 34516 },
+  { date: "2024-03-29", value: 38290 },
+  { date: "2024-03-30", value: 28654 },
+  { date: "2024-03-31", value: 33368 },
+]
+
+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 },
+]
+
+export const breakdownSlices: BreakdownSlice[] = [
+  { segment: "セグメント1", value: 412_000 },
+  { segment: "セグメント2", value: 318_000 },
+  { segment: "セグメント3", value: 287_000 },
+  { segment: "セグメント4", value: 164_000 },
+  { segment: "セグメント5", value: 132_000 },
+]
+
+export const headerKpis: [KpiItem, KpiItem, KpiItem, KpiItem, KpiItem] = [
+  {
+    id: "revenue",
+    value: "¥104万",
+    change: 14.2,
+    changeLabel: "",
+    positiveIsGood: true,
+    sparklineData: [29802, 23112, 29638, 33511, 26136, 34866, 31164, 36270, 26871, 36762, 34516, 28654],
+  },
+  {
+    id: "users",
+    value: "82,400",
+    change: 9.8,
+    changeLabel: "",
+    positiveIsGood: true,
+    sparklineData: [4967, 3852, 4940, 5585, 4356, 5811, 5194, 6045, 4479, 6127, 5753, 4776],
+  },
+  {
+    id: "sessions",
+    value: "132,900",
+    change: 6.5,
+    changeLabel: "",
+    positiveIsGood: true,
+    sparklineData: [7451, 5778, 7410, 8378, 6534, 8717, 7791, 9068, 6718, 9191, 8629, 7164],
+  },
+  {
+    id: "conversion",
+    value: "4.18%",
+    change: -0.4,
+    changeLabel: "",
+    positiveIsGood: true,
+    sparklineData: [4.8, 4.66, 4.79, 4.87, 4.72, 4.9, 4.82, 4.93, 4.74, 4.94, 4.89, 4.77],
+  },
+  {
+    id: "aov",
+    value: "¥12.62",
+    change: 5.1,
+    changeLabel: "",
+    positiveIsGood: true,
+    sparklineData: [1064.36, 825.43, 1058.5, 1196.82, 933.43, 1245.21, 1113, 1295.36, 959.68, 1312.93, 1232.71, 1023.36],
+  },
+]
+
+export const campaignRows: CampaignRow[] = [
+  { id: "c-01", name: "項目1", channel: "グループA", spend: 48_200, conversions: 612, roi: 4.8 },
+  { id: "c-02", name: "項目2", channel: "グループB", spend: 34_600, conversions: 421, roi: 3.4 },
+  { id: "c-03", name: "項目3", channel: "グループC", spend: 12_800, conversions: 308, roi: 6.9 },
+  { id: "c-04", name: "項目4", channel: "グループD", spend: 22_100, conversions: 254, roi: 4.1 },
+  { id: "c-05", name: "項目5", channel: "グループE", spend: 18_400, conversions: 196, roi: 3.2 },
+  { id: "c-06", name: "項目6", channel: "グループB", spend: 14_300, conversions: 124, roi: 2.5 },
+]

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

@@ -0,0 +1,38 @@
+export interface KpiItem {
+  id: "revenue" | "users" | "conversion" | "aov" | "sessions"
+  value: string
+  change: number
+  changeLabel: string
+  positiveIsGood: boolean
+  sparklineData: number[]
+}
+
+export interface ComparisonPoint {
+  period: string
+  current: number
+  previous: number
+  growth: number
+}
+
+export interface BreakdownSlice {
+  segment: string
+  value: number
+}
+
+export interface TrendPoint {
+  date: string
+  value: number
+}
+
+export interface CampaignRow {
+  id: string
+  name: string
+  channel: string
+  spend: number
+  conversions: number
+  roi: number
+}
+
+export interface DashboardFilters {
+  dateRange: { from: Date | undefined; to: Date | undefined }
+}

package/ui-templates/kpi-chart-advanced-ja/manifest.json

@@ -0,0 +1,11 @@
+{
+  "name": "kpi-chart-advanced-ja",
+  "description": "[日本語] KPI + チャート (アドバンスト) — ヒーローKPI (大1+小4の2×2) ・棒+折れ線比較チャート・ドーナツ・日次トレンド・明細テーブルを搭載したKPI主役のダッシュボード構成",
+  "version": "0.1.0",
+  "files": [
+    { "src": "pages/index.tsx", "dest": "index.tsx", "action": "replace" },
+    { "src": "components/campaign-table.tsx", "dest": "components/kpi-chart-advanced/campaign-table.tsx", "action": "add" },
+    { "src": "lib/mock-data.ts", "dest": "components/kpi-chart-advanced/mock-data.ts", "action": "add", "relabel": false },
+    { "src": "lib/types.ts", "dest": "components/kpi-chart-advanced/types.ts", "action": "add", "relabel": false }
+  ]
+}

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

@@ -0,0 +1,333 @@
+import { useState } from "react"
+
+import { subDays } from "date-fns"
+import {
+  Activity,
+  DollarSign,
+  MousePointer,
+  PieChart,
+  ShoppingCart,
+  TrendingUp,
+  Users,
+} from "lucide-react"
+
+import { definePage } from "@squadbase/vantage"
+import {
+  DashboardCard,
+  DashboardCardAction,
+  DashboardCardContent,
+  DashboardCardHeader,
+  DashboardCardPreset,
+  DashboardCardTitle,
+  DateRangePicker,
+  EChart,
+  PageShell,
+  PageShellContent,
+  PageShellDescription,
+  PageShellHeader,
+  PageShellHeaderEnd,
+  PageShellHeading,
+  PageShellSummary,
+  PageShellSummaryCard,
+  PageShellTitle,
+  Placeholder,
+  Sparkline,
+  type EChartsOption,
+} from "@squadbase/vantage/components"
+
+import { CampaignTable } from "./components/kpi-chart-advanced/campaign-table"
+import {
+  breakdownSlices,
+  campaignRows,
+  comparisonSeries,
+  headerKpis,
+  trendSeries,
+} from "./components/kpi-chart-advanced/mock-data"
+import type {
+  BreakdownSlice,
+  ComparisonPoint,
+  DashboardFilters,
+  TrendPoint,
+} from "./components/kpi-chart-advanced/types"
+
+export const page = definePage({
+  title: "KPI + チャート (アドバンスト)",
+  description:
+    "ヒーロー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()
+const initialFilters: DashboardFilters = {
+  dateRange: {
+    from: subDays(today, 29),
+    to: today,
+  },
+}
+
+const smallKpiCards = [
+  { label: "指標2", icon: Users, kpi: headerKpis[1] },
+  { label: "指標3", icon: MousePointer, kpi: headerKpis[2] },
+  { label: "指標4", icon: Activity, kpi: headerKpis[3] },
+  { label: "指標5", icon: ShoppingCart, kpi: headerKpis[4] },
+]
+
+export default function HomePage() {
+  const [filters, setFilters] = useState<DashboardFilters>(initialFilters)
+  const heroKpi = headerKpis[0]
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[テンプレート] パフォーマンスダッシュボード</PageShellTitle>
+          <PageShellDescription>
+            選択期間の主要KPI・比較・詳細。
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd>
+          <DateRangePicker
+            value={filters.dateRange}
+            onChange={(range) =>
+              setFilters((prev) => ({ ...prev, dateRange: range }))
+            }
+            maxDate={today}
+          />
+        </PageShellHeaderEnd>
+        <PageShellSummary>
+          <PageShellSummaryCard accent="accent">
+            <TrendingUp />
+            <div className="min-w-0 flex-1 space-y-1">
+              <p className="text-sm font-semibold">成長</p>
+              <p className="text-xs text-muted-foreground">
+                全体のパフォーマンスは前期比で上昇傾向です。
+              </p>
+            </div>
+          </PageShellSummaryCard>
+          <PageShellSummaryCard accent="default">
+            <PieChart />
+            <div className="min-w-0 flex-1 space-y-1">
+              <p className="text-sm font-semibold">構成</p>
+              <p className="text-xs text-muted-foreground">
+                単一セグメントが全体で最大のシェアを占めています。
+              </p>
+            </div>
+          </PageShellSummaryCard>
+          <PageShellSummaryCard accent="accent">
+            <Activity />
+            <div className="min-w-0 flex-1 space-y-1">
+              <p className="text-sm font-semibold">勢い</p>
+              <p className="text-xs text-muted-foreground">
+                直近の動きはトレンドの好転を示しています。
+              </p>
+            </div>
+          </PageShellSummaryCard>
+        </PageShellSummary>
+      </PageShellHeader>
+
+      <PageShellContent className="space-y-6">
+        <div className="grid gap-4 lg:grid-cols-3">
+          <DashboardCard className="h-full">
+            <DashboardCardHeader>
+              <DashboardCardTitle className="text-muted-foreground">
+                指標1
+              </DashboardCardTitle>
+              <DashboardCardAction>
+                <DollarSign className="size-5 text-muted-foreground" />
+              </DashboardCardAction>
+            </DashboardCardHeader>
+            <DashboardCardContent className="flex flex-1 flex-col gap-5">
+              <div>
+                <Placeholder className="text-4xl font-bold">
+                  {heroKpi.value}
+                </Placeholder>
+                <div className="mt-3">
+                  <Placeholder className="text-sm font-medium">
+                    {heroKpi.change >= 0
+                      ? `+${heroKpi.change}%`
+                      : `${heroKpi.change}%`}
+                  </Placeholder>
+                </div>
+              </div>
+              <Sparkline
+                data={heroKpi.sparklineData.map((v) => ({ value: v }))}
+                height={88}
+                area
+              />
+              <div className="grid grid-cols-2 gap-3 border-t pt-3">
+                <div className="space-y-1.5">
+                  <p className="text-xs text-muted-foreground">指標A</p>
+                  <Placeholder className="text-sm font-medium">¥92万</Placeholder>
+                </div>
+                <div className="space-y-1.5">
+                  <p className="text-xs text-muted-foreground">指標B</p>
+                  <Placeholder className="text-sm font-medium">+8.4%</Placeholder>
+                </div>
+              </div>
+            </DashboardCardContent>
+          </DashboardCard>
+
+          <div className="grid gap-4 sm:grid-cols-2 lg:col-span-2">
+            {smallKpiCards.map(({ label, icon: Icon, kpi }) => (
+              <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">
+                    {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>
+        </div>
+
+        <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" />
+            </DashboardCardPreset>
+          </div>
+          <DashboardCardPreset title="内訳" description="セグメント別シェア">
+            <EChart option={breakdownOption(breakdownSlices)} height="320px" />
+          </DashboardCardPreset>
+        </div>
+
+        <DashboardCardPreset title="トレンド" description="選択期間の値">
+          <EChart option={trendOption(trendSeries)} height="280px" />
+        </DashboardCardPreset>
+
+        <DashboardCardPreset title="キャンペーン" description="キャンペーン別パフォーマンス">
+          <CampaignTable data={campaignRows} />
+        </DashboardCardPreset>
+      </PageShellContent>
+    </PageShell>
+  )
+}

package/ui-templates/kpi-chart-simple/components/top-items-table.tsx

@@ -0,0 +1,73 @@
+import { useMemo } from "react"
+import { DataTablePreset, Placeholder } from "@squadbase/vantage/components"
+import type { ColumnDef } from "@squadbase/vantage/components"
+
+import type { TopItemRow } from "../../lib/kpi-chart-simple/types"
+
+function formatCurrency(n: number, opts: { short?: boolean } = {}): string {
+  const sign = n < 0 ? "-" : ""
+  const abs = Math.abs(n)
+  if (opts.short) {
+    if (abs >= 1_000_000) return `${sign}$${(abs / 1_000_000).toFixed(2)}M`
+    if (abs >= 1_000) return `${sign}$${(abs / 1_000).toFixed(1)}K`
+    return `${sign}$${abs.toLocaleString("en-US")}`
+  }
+  return `${sign}$${Math.round(abs).toLocaleString("en-US")}`
+}
+
+function formatPercent(value: number, digits = 1): string {
+  return `${value.toFixed(digits)}%`
+}
+
+interface TopItemsTableProps {
+  data: TopItemRow[]
+}
+
+export function TopItemsTable({ data }: TopItemsTableProps) {
+  const columns = useMemo<ColumnDef<TopItemRow>[]>(
+    () => [
+      {
+        accessorKey: "name",
+        header: "Column 1",
+      },
+      {
+        accessorKey: "category",
+        header: "Column 2",
+      },
+      {
+        accessorKey: "revenue",
+        header: "Column 3",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {formatCurrency(row.original.revenue, { short: true })}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "units",
+        header: "Column 4",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {row.original.units.toLocaleString("en-US")}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "share",
+        header: "Column 5",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{formatPercent(row.original.share * 100)}</Placeholder>
+          </div>
+        ),
+      },
+    ],
+    [],
+  )
+
+  return <DataTablePreset columns={columns} data={data} enableSorting />
+}

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

@@ -0,0 +1,44 @@
+/**
+ * Shared between the page and `server/api/kpi-summary.ts`.
+ *
+ * These live in `lib/` rather than `components/` because the client may never
+ * import from `server/` (`vantage check` reports `CLIENT_IMPORTS_SERVER`), so
+ * anything both sides need has to sit in neutral ground.
+ */
+
+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 {
+  id: KpiId
+  value: number
+  /** Percent change against the preceding window of the same length. */
+  change: number
+  sparklineData: number[]
+}
+
+export interface TrendPoint {
+  date: string
+  revenue: number
+  orders: number
+  visitors: number
+}
+
+export interface TopItemRow {
+  id: string
+  name: string
+  category: string
+  revenue: number
+  units: number
+  share: number
+}
+
+/** The payload `GET /api/kpi-summary` returns. */
+export interface KpiSummary {
+  range: RangeKey
+  kpis: KpiItem[]
+  trend: TrendPoint[]
+  topItems: TopItemRow[]
+}

package/ui-templates/kpi-chart-simple/manifest.json

@@ -0,0 +1,11 @@
+{
+  "name": "kpi-chart-simple",
+  "description": "KPI + Chart (Simple) — 4 KPI cards, a single trend line, and a ranked-items table, served by server/api and filtered through the URL. The minimal headline-metrics dashboard layout.",
+  "version": "0.2.0",
+  "files": [
+    { "src": "pages/index.tsx", "dest": "index.tsx", "action": "replace" },
+    { "src": "components/top-items-table.tsx", "dest": "components/kpi-chart-simple/top-items-table.tsx", "action": "add" },
+    { "src": "lib/types.ts", "dest": "lib/kpi-chart-simple/types.ts", "action": "add", "relabel": false },
+    { "src": "server/kpi-summary.ts", "dest": "server/api/kpi-summary.ts", "action": "add", "relabel": false }
+  ]
+}