@squadbase/vantage-template 0.0.1

package/ui-templates/kpi-chart-advanced/components/campaign-table.tsx

@@ -0,0 +1,69 @@
+import { useMemo } from "react"
+
+import { DataTablePreset, Placeholder, type ColumnDef } from "@squadbase/vantage/components"
+
+import type { CampaignRow } from "./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")}`
+}
+
+interface CampaignTableProps {
+  data: CampaignRow[]
+}
+
+export function CampaignTable({ data }: CampaignTableProps) {
+  const columns = useMemo<ColumnDef<CampaignRow>[]>(
+    () => [
+      {
+        accessorKey: "name",
+        header: "Column 1",
+      },
+      {
+        accessorKey: "channel",
+        header: "Column 2",
+      },
+      {
+        accessorKey: "spend",
+        header: "Column 3",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {formatCurrency(row.original.spend, { short: true })}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "conversions",
+        header: "Column 4",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {row.original.conversions.toLocaleString("en-US")}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "roi",
+        header: "Column 5",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{`${row.original.roi.toFixed(1)}x`}</Placeholder>
+          </div>
+        ),
+      },
+    ],
+    [],
+  )
+
+  return <DataTablePreset columns={columns} data={data} enableSorting />
+}

package/ui-templates/kpi-chart-advanced/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: "Segment 1", value: 412_000 },
+  { segment: "Segment 2", value: 318_000 },
+  { segment: "Segment 3", value: 287_000 },
+  { segment: "Segment 4", value: 164_000 },
+  { segment: "Segment 5", value: 132_000 },
+]
+
+export const headerKpis: [KpiItem, KpiItem, KpiItem, KpiItem, KpiItem] = [
+  {
+    id: "revenue",
+    value: "$1.04M",
+    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: "Item 1", channel: "Group A", spend: 48_200, conversions: 612, roi: 4.8 },
+  { id: "c-02", name: "Item 2", channel: "Group B", spend: 34_600, conversions: 421, roi: 3.4 },
+  { id: "c-03", name: "Item 3", channel: "Group C", spend: 12_800, conversions: 308, roi: 6.9 },
+  { id: "c-04", name: "Item 4", channel: "Group D", spend: 22_100, conversions: 254, roi: 4.1 },
+  { id: "c-05", name: "Item 5", channel: "Group E", spend: 18_400, conversions: 196, roi: 3.2 },
+  { id: "c-06", name: "Item 6", channel: "Group B", spend: 14_300, conversions: 124, roi: 2.5 },
+]

package/ui-templates/kpi-chart-advanced/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/manifest.json

@@ -0,0 +1,11 @@
+{
+  "name": "kpi-chart-advanced",
+  "description": "KPI + Chart (Advanced) — 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.",
+  "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/pages/index.tsx

@@ -0,0 +1,339 @@
+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 + Chart (Advanced)",
+  description:
+    "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()
+const initialFilters: DashboardFilters = {
+  dateRange: {
+    from: subDays(today, 29),
+    to: today,
+  },
+}
+
+const smallKpiCards = [
+  { label: "Metric 2", icon: Users, kpi: headerKpis[1] },
+  { label: "Metric 3", icon: MousePointer, kpi: headerKpis[2] },
+  { label: "Metric 4", icon: Activity, kpi: headerKpis[3] },
+  { label: "Metric 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>[Template] Performance dashboard</PageShellTitle>
+          <PageShellDescription>
+            Headline KPIs, comparisons, and detail for the selected period.
+          </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">Growth</p>
+              <p className="text-xs text-muted-foreground">
+                Overall performance is trending up versus the previous period.
+              </p>
+            </div>
+          </PageShellSummaryCard>
+          <PageShellSummaryCard accent="default">
+            <PieChart />
+            <div className="min-w-0 flex-1 space-y-1">
+              <p className="text-sm font-semibold">Mix</p>
+              <p className="text-xs text-muted-foreground">
+                A single segment drives the largest share of the total.
+              </p>
+            </div>
+          </PageShellSummaryCard>
+          <PageShellSummaryCard accent="accent">
+            <Activity />
+            <div className="min-w-0 flex-1 space-y-1">
+              <p className="text-sm font-semibold">Momentum</p>
+              <p className="text-xs text-muted-foreground">
+                Recent activity points to a positive shift in the trend.
+              </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">
+                Metric 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">Metric A</p>
+                  <Placeholder className="text-sm font-medium">$0.92M</Placeholder>
+                </div>
+                <div className="space-y-1.5">
+                  <p className="text-xs text-muted-foreground">Metric 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="Comparison"
+              description="Current vs previous period"
+            >
+              <EChart option={comparisonOption(comparisonSeries)} height="320px" />
+            </DashboardCardPreset>
+          </div>
+          <DashboardCardPreset title="Breakdown" description="Share by segment">
+            <EChart option={breakdownOption(breakdownSlices)} height="320px" />
+          </DashboardCardPreset>
+        </div>
+
+        <DashboardCardPreset
+          title="Trend"
+          description="Values over the selected period"
+        >
+          <EChart option={trendOption(trendSeries)} height="280px" />
+        </DashboardCardPreset>
+
+        <DashboardCardPreset title="Campaigns" description="Performance by campaign">
+          <CampaignTable data={campaignRows} />
+        </DashboardCardPreset>
+      </PageShellContent>
+    </PageShell>
+  )
+}

package/ui-templates/kpi-chart-advanced-ja/components/campaign-table.tsx

@@ -0,0 +1,69 @@
+import { useMemo } from "react"
+
+import { DataTablePreset, Placeholder, type ColumnDef } from "@squadbase/vantage/components"
+
+import type { CampaignRow } from "./types"
+
+function formatCurrency(n: number, opts: { short?: boolean } = {}): string {
+  const sign = n < 0 ? "-" : ""
+  const abs = Math.abs(n)
+  if (opts.short) {
+    if (abs >= 100_000_000) return `${sign}${(abs / 100_000_000).toFixed(2)}億円`
+    if (abs >= 10_000) return `${sign}${(abs / 10_000).toFixed(0)}万円`
+    return `${sign}¥${abs.toLocaleString("ja-JP")}`
+  }
+  return `${sign}¥${Math.round(abs).toLocaleString("ja-JP")}`
+}
+
+interface CampaignTableProps {
+  data: CampaignRow[]
+}
+
+export function CampaignTable({ data }: CampaignTableProps) {
+  const columns = useMemo<ColumnDef<CampaignRow>[]>(
+    () => [
+      {
+        accessorKey: "name",
+        header: "列1",
+      },
+      {
+        accessorKey: "channel",
+        header: "列2",
+      },
+      {
+        accessorKey: "spend",
+        header: "列3",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {formatCurrency(row.original.spend, { short: true })}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "conversions",
+        header: "列4",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {row.original.conversions.toLocaleString("ja-JP")}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "roi",
+        header: "列5",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{`${row.original.roi.toFixed(1)}倍`}</Placeholder>
+          </div>
+        ),
+      },
+    ],
+    [],
+  )
+
+  return <DataTablePreset columns={columns} data={data} enableSorting />
+}