@squadbase/vantage-template 0.0.1

package/ui-templates/funnel/pages/index.tsx

@@ -0,0 +1,252 @@
+import { useState } from "react"
+import { subDays } from "date-fns"
+import { TrendingDown, TrendingUp, Users, Target } from "lucide-react"
+import { definePage } from "@squadbase/vantage"
+import {
+  DashboardCard,
+  DashboardCardHeader,
+  DashboardCardTitle,
+  DashboardCardAction,
+  DashboardCardContent,
+  DashboardCardPreset,
+  DateRangePicker,
+  EChart,
+  PageShell,
+  PageShellHeader,
+  PageShellHeading,
+  PageShellTitle,
+  PageShellDescription,
+  PageShellHeaderEnd,
+  PageShellContent,
+  Placeholder,
+} from "@squadbase/vantage/components"
+import type { DateRange, EChartsOption } from "@squadbase/vantage/components"
+import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui"
+
+import { StageTable } from "./components/funnel/stage-table"
+import { funnelStages, stageRows } from "./components/funnel/mock-data"
+import type { FunnelStage } from "./components/funnel/types"
+
+export const page = definePage({
+  title: "Funnel",
+  description:
+    "Pipeline-centric layout: summary KPIs, a theme-coloured funnel chart with a per-stage sidebar, and a stage-performance table.",
+})
+
+const today = new Date()
+
+const STAGE_NAMES = ["Stage 1", "Stage 2", "Stage 3", "Stage 4", "Stage 5"]
+
+type DisplayMode = "count" | "percent"
+
+function funnelOption(
+  data: FunnelStage[],
+  labels: string[],
+  display: DisplayMode,
+): EChartsOption {
+  const max = data[0]?.value ?? 0
+
+  return {
+    tooltip: { trigger: "item" },
+    series: [
+      {
+        type: "funnel",
+        orient: "horizontal",
+        funnelAlign: "center",
+        left: "2%",
+        right: "2%",
+        top: 16,
+        bottom: 64,
+        min: 0,
+        max,
+        sort: "descending",
+        gap: 4,
+        label: {
+          show: true,
+          position: "bottom",
+          formatter: (p: unknown) => {
+            const params = p as {
+              name: string
+              value: number
+              data: { conversionRate: number; share: number }
+            }
+            const main =
+              display === "percent"
+                ? `${params.data.share.toFixed(1)}%`
+                : params.value.toLocaleString("en-US")
+            return `{name|${params.name}}\n{value|${main}}`
+          },
+          rich: {
+            name: { fontSize: 12, fontWeight: 600, lineHeight: 16, align: "center" },
+            value: { fontSize: 11, opacity: 0.6, lineHeight: 14, align: "center" },
+          },
+        },
+        labelLine: { show: false },
+        // No `itemStyle.color` and no `option.color`: the stages take
+        // `--chart-1..5`, and the labels the foreground token, so the chart
+        // rebrands with the theme (v0.2.1+).
+        data: data.map((d, i) => ({
+          name: labels[i] ?? "",
+          value: d.value,
+          conversionRate: d.conversionRate,
+          share: (d.value / Math.max(1, max)) * 100,
+        })),
+      },
+    ] as EChartsOption["series"],
+  }
+}
+
+const summaryCards = [
+  {
+    label: "Entered",
+    value: "124,500",
+    sub: "Total entering the funnel",
+    icon: <Users className="size-4 text-muted-foreground" />,
+  },
+  {
+    label: "Converted",
+    value: "1,186",
+    sub: "Completed conversions",
+    icon: <Target className="size-4 text-muted-foreground" />,
+  },
+  {
+    label: "Best step",
+    value: "31.9%",
+    sub: "Highest step conversion",
+    icon: <TrendingUp className="size-4 text-emerald-600" />,
+  },
+  {
+    label: "Biggest drop",
+    value: "68.2%",
+    sub: "Largest step drop-off",
+    icon: <TrendingDown className="size-4 text-rose-600" />,
+  },
+]
+
+export default function HomePage() {
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: subDays(today, 29),
+    to: today,
+  })
+  const [display, setDisplay] = useState<DisplayMode>("count")
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[Template] Conversion funnel</PageShellTitle>
+          <PageShellDescription>
+            Stage-by-stage conversion for the selected period.
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd className="flex-row items-center gap-2">
+          {/* Base UI toggle groups are always multi-value — keep the array at length 1. */}
+          <ToggleGroup
+            value={[display]}
+            onValueChange={(value) => {
+              const next = value[0]
+              if (next) setDisplay(next as DisplayMode)
+            }}
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="count">Option A</ToggleGroupItem>
+            <ToggleGroupItem value="percent">Option B</ToggleGroupItem>
+          </ToggleGroup>
+          <DateRangePicker
+            value={dateRange}
+            onChange={setDateRange}
+            maxDate={today}
+          />
+        </PageShellHeaderEnd>
+      </PageShellHeader>
+
+      <PageShellContent className="space-y-6">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {summaryCards.map(({ label, value, sub, icon }) => (
+            <DashboardCard key={label}>
+              <DashboardCardHeader>
+                <DashboardCardTitle className="text-muted-foreground">
+                  {label}
+                </DashboardCardTitle>
+                <DashboardCardAction>{icon}</DashboardCardAction>
+              </DashboardCardHeader>
+              <DashboardCardContent>
+                <Placeholder className="text-2xl font-bold">{value}</Placeholder>
+                <p className="mt-2 text-xs text-muted-foreground">{sub}</p>
+              </DashboardCardContent>
+            </DashboardCard>
+          ))}
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <DashboardCardPreset
+              title="Conversion funnel"
+              description="Stage-by-stage conversion"
+            >
+              <EChart
+                option={funnelOption(funnelStages, STAGE_NAMES, display)}
+                height="440px"
+              />
+            </DashboardCardPreset>
+          </div>
+          <DashboardCardPreset title="Stages" description="Conversion by stage">
+            <StagesSidebar />
+          </DashboardCardPreset>
+        </div>
+
+        <DashboardCardPreset
+          title="Stage breakdown"
+          description="Conversion between stages"
+        >
+          <StageTable data={stageRows} />
+        </DashboardCardPreset>
+      </PageShellContent>
+    </PageShell>
+  )
+}
+
+function StagesSidebar() {
+  return (
+    <ol className="space-y-4">
+      {funnelStages.map((s, i) => {
+        const prev = i > 0 ? funnelStages[i - 1] : null
+        const dropoffPct = prev ? ((prev.value - s.value) / prev.value) * 100 : 0
+        return (
+          <li key={i} className="space-y-2">
+            <div className="flex items-baseline justify-between gap-2">
+              <div className="flex items-baseline gap-2 min-w-0">
+                <span className="text-xs font-semibold text-muted-foreground tabular-nums">
+                  {String(i + 1).padStart(2, "0")}
+                </span>
+                <span className="truncate text-sm font-medium">{STAGE_NAMES[i]}</span>
+              </div>
+              <Placeholder className="text-sm font-medium">
+                {s.value.toLocaleString("en-US")}
+              </Placeholder>
+            </div>
+            <div className="grid grid-cols-2 gap-3 text-xs text-muted-foreground">
+              <span>Conversion rate</span>
+              <div className="flex justify-end">
+                <Placeholder>{`${s.conversionRate.toFixed(1)}%`}</Placeholder>
+              </div>
+            </div>
+            {prev && (
+              <div className="flex h-1.5 overflow-hidden rounded-full bg-muted">
+                <div
+                  className="h-full bg-chart-1"
+                  style={{ width: `${s.conversionRate.toFixed(1)}%` }}
+                />
+                <div
+                  className="h-full bg-muted-foreground/30"
+                  style={{ width: `${dropoffPct.toFixed(1)}%` }}
+                />
+              </div>
+            )}
+          </li>
+        )
+      })}
+    </ol>
+  )
+}

package/ui-templates/funnel-ja/components/chart-helpers.ts

@@ -0,0 +1,11 @@
+export 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")
+}
+
+export function formatPercent(value: number, digits = 1): string {
+  return `${value.toFixed(digits)}%`
+}

package/ui-templates/funnel-ja/components/stage-table.tsx

@@ -0,0 +1,63 @@
+import { useMemo } from "react"
+import { DataTablePreset, Placeholder } from "@squadbase/vantage/components"
+import type { ColumnDef } from "@squadbase/vantage/components"
+
+import { formatNumber, formatPercent } from "./chart-helpers"
+import type { StageRow } from "./types"
+
+const STEP_NAMES = ["ステージ1 → 2", "ステージ2 → 3", "ステージ3 → 4", "ステージ4 → 5"]
+
+interface StageTableProps {
+  data: StageRow[]
+}
+
+export function StageTable({ data }: StageTableProps) {
+  const columns = useMemo<ColumnDef<StageRow>[]>(
+    () => [
+      {
+        id: "step",
+        header: "列1",
+        cell: ({ row }) => STEP_NAMES[row.index],
+      },
+      {
+        accessorKey: "count",
+        header: "列2",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{formatNumber(row.original.count)}</Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "conversionRate",
+        header: "列3",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{formatPercent(row.original.conversionRate)}</Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "avgDays",
+        header: "列4",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{`${row.original.avgDays.toFixed(1)}日`}</Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "dropoff",
+        header: "列5",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{formatNumber(row.original.dropoff)}</Placeholder>
+          </div>
+        ),
+      },
+    ],
+    [],
+  )
+
+  return <DataTablePreset columns={columns} data={data} enableSorting />
+}

package/ui-templates/funnel-ja/lib/mock-data.ts

@@ -0,0 +1,22 @@
+import type { FunnelStage, StageRow } from "./types"
+
+const VISITORS = 124_500
+const LEADS = 38_240
+const QUALIFIED = 12_180
+const OPPORTUNITIES = 4_520
+const CONVERSIONS = 1_186
+
+export const funnelStages: FunnelStage[] = [
+  { value: VISITORS, conversionRate: 100 },
+  { value: LEADS, conversionRate: (LEADS / VISITORS) * 100 },
+  { value: QUALIFIED, conversionRate: (QUALIFIED / LEADS) * 100 },
+  { value: OPPORTUNITIES, conversionRate: (OPPORTUNITIES / QUALIFIED) * 100 },
+  { value: CONVERSIONS, conversionRate: (CONVERSIONS / OPPORTUNITIES) * 100 },
+]
+
+export const stageRows: StageRow[] = [
+  { count: LEADS, conversionRate: (LEADS / VISITORS) * 100, avgDays: 0.6, dropoff: VISITORS - LEADS },
+  { count: QUALIFIED, conversionRate: (QUALIFIED / LEADS) * 100, avgDays: 3.2, dropoff: LEADS - QUALIFIED },
+  { count: OPPORTUNITIES, conversionRate: (OPPORTUNITIES / QUALIFIED) * 100, avgDays: 7.4, dropoff: QUALIFIED - OPPORTUNITIES },
+  { count: CONVERSIONS, conversionRate: (CONVERSIONS / OPPORTUNITIES) * 100, avgDays: 12.8, dropoff: OPPORTUNITIES - CONVERSIONS },
+]

package/ui-templates/funnel-ja/lib/types.ts

@@ -0,0 +1,11 @@
+export interface FunnelStage {
+  value: number
+  conversionRate: number
+}
+
+export interface StageRow {
+  count: number
+  conversionRate: number
+  avgDays: number
+  dropoff: number
+}

package/ui-templates/funnel-ja/manifest.json

@@ -0,0 +1,12 @@
+{
+  "name": "funnel-ja",
+  "description": "[日本語] ファネル — 上部に 4 つのサマリ KPI (ファネル流入 / エンドツーエンド転換率 / 最良ステージ / ボトルネック)、その下に左揃えでテーマ配色 (--chart-1..5) のファネルとステージ別「通過率 + 離脱」サイドバー、最下段にステージ別パフォーマンステーブル。コンバージョン/パイプライン分析向け",
+  "version": "0.1.0",
+  "files": [
+    { "src": "pages/index.tsx", "dest": "index.tsx", "action": "replace" },
+    { "src": "components/stage-table.tsx", "dest": "components/funnel/stage-table.tsx", "action": "add" },
+    { "src": "components/chart-helpers.ts", "dest": "components/funnel/chart-helpers.ts", "action": "add" },
+    { "src": "lib/mock-data.ts", "dest": "components/funnel/mock-data.ts", "action": "add", "relabel": false },
+    { "src": "lib/types.ts", "dest": "components/funnel/types.ts", "action": "add", "relabel": false }
+  ]
+}

package/ui-templates/funnel-ja/pages/index.tsx

@@ -0,0 +1,251 @@
+import { useState } from "react"
+import { subDays } from "date-fns"
+import { TrendingDown, TrendingUp, Users, Target } from "lucide-react"
+import { definePage } from "@squadbase/vantage"
+import {
+  DashboardCard,
+  DashboardCardHeader,
+  DashboardCardTitle,
+  DashboardCardAction,
+  DashboardCardContent,
+  DashboardCardPreset,
+  DateRangePicker,
+  EChart,
+  PageShell,
+  PageShellHeader,
+  PageShellHeading,
+  PageShellTitle,
+  PageShellDescription,
+  PageShellHeaderEnd,
+  PageShellContent,
+  Placeholder,
+} from "@squadbase/vantage/components"
+import type { DateRange, EChartsOption } from "@squadbase/vantage/components"
+import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui"
+
+import { StageTable } from "./components/funnel/stage-table"
+import { funnelStages, stageRows } from "./components/funnel/mock-data"
+import type { FunnelStage } from "./components/funnel/types"
+
+export const page = definePage({
+  title: "ファネル",
+  description:
+    "パイプライン中心のレイアウト。サマリ KPI、テーマ配色のファネルとステージ別サイドバー、ステージ別パフォーマンステーブル。",
+})
+
+const today = new Date()
+
+const STAGE_NAMES = ["ステージ1", "ステージ2", "ステージ3", "ステージ4", "ステージ5"]
+
+type DisplayMode = "count" | "percent"
+
+function funnelOption(
+  data: FunnelStage[],
+  labels: string[],
+  display: DisplayMode,
+): EChartsOption {
+  const max = data[0]?.value ?? 0
+
+  return {
+    tooltip: { trigger: "item" },
+    series: [
+      {
+        type: "funnel",
+        orient: "horizontal",
+        funnelAlign: "center",
+        left: "2%",
+        right: "2%",
+        top: 16,
+        bottom: 64,
+        min: 0,
+        max,
+        sort: "descending",
+        gap: 4,
+        label: {
+          show: true,
+          position: "bottom",
+          formatter: (p: unknown) => {
+            const params = p as {
+              name: string
+              value: number
+              data: { conversionRate: number; share: number }
+            }
+            const main =
+              display === "percent"
+                ? `${params.data.share.toFixed(1)}%`
+                : params.value.toLocaleString("ja-JP")
+            return `{name|${params.name}}\n{value|${main}}`
+          },
+          rich: {
+            name: { fontSize: 12, fontWeight: 600, lineHeight: 16, align: "center" },
+            value: { fontSize: 11, opacity: 0.6, lineHeight: 14, align: "center" },
+          },
+        },
+        labelLine: { show: false },
+        // itemStyle.color も option.color も持たせない: ステージは --chart-1..5、
+        // ラベルは文字色トークンで描かれ、テーマ差し替えに追従する (v0.2.1〜)。
+        data: data.map((d, i) => ({
+          name: labels[i] ?? "",
+          value: d.value,
+          conversionRate: d.conversionRate,
+          share: (d.value / Math.max(1, max)) * 100,
+        })),
+      },
+    ] as EChartsOption["series"],
+  }
+}
+
+const summaryCards = [
+  {
+    label: "流入数",
+    value: "124,500",
+    sub: "ファネルへの総流入数",
+    icon: <Users className="size-4 text-muted-foreground" />,
+  },
+  {
+    label: "コンバージョン数",
+    value: "1,186",
+    sub: "完了したコンバージョン",
+    icon: <Target className="size-4 text-muted-foreground" />,
+  },
+  {
+    label: "最良ステップ",
+    value: "31.9%",
+    sub: "最も高いステップ転換率",
+    icon: <TrendingUp className="size-4 text-emerald-600" />,
+  },
+  {
+    label: "最大の離脱",
+    value: "68.2%",
+    sub: "最大のステップ離脱率",
+    icon: <TrendingDown className="size-4 text-rose-600" />,
+  },
+]
+
+export default function HomePage() {
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: subDays(today, 29),
+    to: today,
+  })
+  const [display, setDisplay] = useState<DisplayMode>("count")
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[テンプレート] コンバージョンファネル</PageShellTitle>
+          <PageShellDescription>
+            選択期間のステージ別コンバージョン。
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd className="flex-row items-center gap-2">
+          {/* Base UI の ToggleGroup は常に配列。単一選択は長さ 1 に保つ。 */}
+          <ToggleGroup
+            value={[display]}
+            onValueChange={(value) => {
+              const next = value[0]
+              if (next) setDisplay(next as DisplayMode)
+            }}
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="count">選択肢A</ToggleGroupItem>
+            <ToggleGroupItem value="percent">選択肢B</ToggleGroupItem>
+          </ToggleGroup>
+          <DateRangePicker
+            value={dateRange}
+            onChange={setDateRange}
+            maxDate={today}
+          />
+        </PageShellHeaderEnd>
+      </PageShellHeader>
+
+      <PageShellContent className="space-y-6">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {summaryCards.map(({ label, value, sub, icon }) => (
+            <DashboardCard key={label}>
+              <DashboardCardHeader>
+                <DashboardCardTitle className="text-muted-foreground">
+                  {label}
+                </DashboardCardTitle>
+                <DashboardCardAction>{icon}</DashboardCardAction>
+              </DashboardCardHeader>
+              <DashboardCardContent>
+                <Placeholder className="text-2xl font-bold">{value}</Placeholder>
+                <p className="mt-2 text-xs text-muted-foreground">{sub}</p>
+              </DashboardCardContent>
+            </DashboardCard>
+          ))}
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <DashboardCardPreset
+              title="コンバージョンファネル"
+              description="ステージ別コンバージョン"
+            >
+              <EChart
+                option={funnelOption(funnelStages, STAGE_NAMES, display)}
+                height="440px"
+              />
+            </DashboardCardPreset>
+          </div>
+          <DashboardCardPreset title="ステージ" description="ステージ別コンバージョン">
+            <StagesSidebar />
+          </DashboardCardPreset>
+        </div>
+
+        <DashboardCardPreset
+          title="ステージ内訳"
+          description="ステージ間のコンバージョン"
+        >
+          <StageTable data={stageRows} />
+        </DashboardCardPreset>
+      </PageShellContent>
+    </PageShell>
+  )
+}
+
+function StagesSidebar() {
+  return (
+    <ol className="space-y-4">
+      {funnelStages.map((s, i) => {
+        const prev = i > 0 ? funnelStages[i - 1] : null
+        const dropoffPct = prev ? ((prev.value - s.value) / prev.value) * 100 : 0
+        return (
+          <li key={i} className="space-y-2">
+            <div className="flex items-baseline justify-between gap-2">
+              <div className="flex items-baseline gap-2 min-w-0">
+                <span className="text-xs font-semibold text-muted-foreground tabular-nums">
+                  {String(i + 1).padStart(2, "0")}
+                </span>
+                <span className="truncate text-sm font-medium">{STAGE_NAMES[i]}</span>
+              </div>
+              <Placeholder className="text-sm font-medium">
+                {s.value.toLocaleString("ja-JP")}
+              </Placeholder>
+            </div>
+            <div className="grid grid-cols-2 gap-3 text-xs text-muted-foreground">
+              <span>転換率</span>
+              <div className="flex justify-end">
+                <Placeholder>{`${s.conversionRate.toFixed(1)}%`}</Placeholder>
+              </div>
+            </div>
+            {prev && (
+              <div className="flex h-1.5 overflow-hidden rounded-full bg-muted">
+                <div
+                  className="h-full bg-chart-1"
+                  style={{ width: `${s.conversionRate.toFixed(1)}%` }}
+                />
+                <div
+                  className="h-full bg-muted-foreground/30"
+                  style={{ width: `${dropoffPct.toFixed(1)}%` }}
+                />
+              </div>
+            )}
+          </li>
+        )
+      })}
+    </ol>
+  )
+}