@squadbase/vantage-template 0.0.1

package/ui-templates/chart-grid-ja/pages/index.tsx

@@ -0,0 +1,331 @@
+import { useState } from "react"
+import { subDays } from "date-fns"
+import { definePage } from "@squadbase/vantage"
+import {
+  DashboardCardPreset,
+  DateRangePicker,
+  EChart,
+  PageShell,
+  PageShellContent,
+  PageShellDescription,
+  PageShellHeader,
+  PageShellHeaderEnd,
+  PageShellHeading,
+  PageShellTitle,
+} from "@squadbase/vantage/components"
+import type { EChartsOption } from "@squadbase/vantage/components"
+import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui"
+
+import {
+  timeSeries,
+  barSeries,
+  scatterPoints,
+  radarAxes,
+  heatmapCells,
+  HEATMAP_X_AXIS,
+  HEATMAP_Y_AXIS,
+} from "./components/chart-grid/mock-data"
+import type {
+  TimePoint,
+  BarPoint,
+  ScatterPoint,
+  RadarPoint,
+  HeatmapCell,
+  DashboardFilters,
+} from "./components/chart-grid/types"
+
+export const page = definePage({
+  title: "チャート概要",
+  description:
+    "エリア/折れ線/棒/散布/レーダー/ヒートマップの6チャート格子。ヘッダーにカテゴリフィルタチップを配置。",
+})
+
+// ── chart helpers ───────────────────────────────────────────────────────────
+
+function getBaseGrid() {
+  return { left: "3%", right: "4%", bottom: "10%", 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 areaOption(data: TimePoint[]): 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.series1),
+        areaStyle: { opacity: 0.22 },
+      },
+      {
+        name: "系列B",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        data: data.map((d) => d.series2),
+        areaStyle: { opacity: 0.14 },
+      },
+    ],
+  }
+}
+
+function lineOption(data: TimePoint[]): 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.series1),
+      },
+      {
+        name: "系列B",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        data: data.map((d) => d.series2),
+      },
+    ],
+  }
+}
+
+const BAR_CATEGORIES = [
+  "項目1",
+  "項目2",
+  "項目3",
+  "項目4",
+  "項目5",
+  "項目6",
+  "項目7",
+  "項目8",
+]
+
+function barOption(data: BarPoint[]): EChartsOption {
+  return {
+    tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+    grid: getBaseGrid(),
+    xAxis: { type: "category", data: BAR_CATEGORIES },
+    yAxis: { type: "value", axisLabel: { formatter: (v: number) => formatNumber(v) } },
+    series: [
+      {
+        name: "系列A",
+        type: "bar",
+        data: data.map((d) => d.value),
+        barMaxWidth: 28,
+      },
+    ],
+  }
+}
+
+function scatterOption(data: ScatterPoint[]): EChartsOption {
+  return {
+    tooltip: { trigger: "item" },
+    grid: getBaseGrid(),
+    xAxis: { type: "value" },
+    yAxis: { type: "value" },
+    series: [
+      {
+        type: "scatter",
+        data: data.map((p) => ({
+          value: [p.x, p.y, p.size] as [number, number, number],
+          label: p.label,
+        })),
+        symbolSize: (val: unknown) => {
+          const arr = val as [number, number, number]
+          return arr[2]
+        },
+      },
+    ] as EChartsOption["series"],
+  }
+}
+
+const RADAR_AXES = ["軸1", "軸2", "軸3", "軸4", "軸5", "軸6"]
+
+function radarOption(data: RadarPoint[]): EChartsOption {
+  return {
+    tooltip: { trigger: "item" },
+    legend: { bottom: 0 },
+    radar: {
+      indicator: data.map((_, i) => ({ name: RADAR_AXES[i], max: 100 })),
+      radius: "65%",
+    },
+    series: [
+      {
+        type: "radar",
+        data: [
+          {
+            value: data.map((r) => r.current),
+            name: "系列A",
+            areaStyle: { opacity: 0.28 },
+          },
+          {
+            value: data.map((r) => r.benchmark),
+            name: "系列B",
+            areaStyle: { opacity: 0.18 },
+          },
+        ],
+      },
+    ],
+  }
+}
+
+function heatmapOption(
+  data: HeatmapCell[],
+  xAxis: string[],
+  yAxis: string[],
+): EChartsOption {
+  const max = Math.max(...data.map((c) => c.value))
+  return {
+    tooltip: { position: "top" },
+    grid: { height: "70%", top: "8%", left: "10%", right: "8%" },
+    xAxis: { type: "category", data: xAxis, splitArea: { show: true } },
+    yAxis: { type: "category", data: yAxis, splitArea: { show: true } },
+    visualMap: {
+      min: 0,
+      max,
+      calculable: true,
+      orient: "horizontal",
+      bottom: 0,
+    },
+    series: [
+      {
+        type: "heatmap",
+        data: data.map((c) => [xAxis.indexOf(c.x), yAxis.indexOf(c.y), c.value]),
+        label: { show: false },
+        emphasis: { itemStyle: { shadowBlur: 8, shadowColor: "rgba(0,0,0,0.4)" } },
+      },
+    ],
+  }
+}
+
+// ── page ─────────────────────────────────────────────────────────────────────
+
+const today = new Date()
+const initialFilters: DashboardFilters = {
+  dateRange: {
+    from: subDays(today, 29),
+    to: today,
+  },
+}
+
+type Category = "all" | "trend" | "ranking" | "distribution"
+
+export default function HomePage() {
+  const [filters, setFilters] = useState<DashboardFilters>(initialFilters)
+  const [category, setCategory] = useState<Category>("all")
+
+  const show = (target: Exclude<Category, "all">) =>
+    category === "all" || category === target
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[テンプレート] チャート概要</PageShellTitle>
+          <PageShellDescription>
+            選択期間のチャートをグリッド表示。
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd className="flex-row items-center gap-3">
+          {/* Base UI の ToggleGroup は単一選択でも value が配列 */}
+          <ToggleGroup
+            value={[category]}
+            onValueChange={(values) => {
+              const next = values[0]
+              if (next) setCategory(next as Category)
+            }}
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="all">すべて</ToggleGroupItem>
+            <ToggleGroupItem value="trend">グループA</ToggleGroupItem>
+            <ToggleGroupItem value="ranking">グループB</ToggleGroupItem>
+            <ToggleGroupItem value="distribution">グループC</ToggleGroupItem>
+          </ToggleGroup>
+          <DateRangePicker
+            value={filters.dateRange}
+            onChange={(range) =>
+              setFilters((prev) => ({ ...prev, dateRange: range }))
+            }
+            maxDate={today}
+          />
+        </PageShellHeaderEnd>
+      </PageShellHeader>
+
+      <PageShellContent>
+        <div className="grid gap-4 lg:grid-cols-2">
+          {show("trend") && (
+            <DashboardCardPreset
+              title="トレンド (エリア)"
+              description="選択期間の2系列"
+            >
+              <EChart option={areaOption(timeSeries)} height="280px" />
+            </DashboardCardPreset>
+          )}
+          {show("trend") && (
+            <DashboardCardPreset
+              title="トレンド (折れ線)"
+              description="選択期間の2系列"
+            >
+              <EChart option={lineOption(timeSeries)} height="280px" />
+            </DashboardCardPreset>
+          )}
+          {show("ranking") && (
+            <DashboardCardPreset title="上位カテゴリ" description="値で並べ替え">
+              <EChart option={barOption(barSeries)} height="280px" />
+            </DashboardCardPreset>
+          )}
+          {show("distribution") && (
+            <DashboardCardPreset title="相関" description="各点が1項目">
+              <EChart option={scatterOption(scatterPoints)} height="280px" />
+            </DashboardCardPreset>
+          )}
+          {show("distribution") && (
+            <DashboardCardPreset title="プロファイル" description="現在 vs ベンチマーク">
+              <EChart option={radarOption(radarAxes)} height="280px" />
+            </DashboardCardPreset>
+          )}
+          {show("distribution") && (
+            <DashboardCardPreset title="アクティビティ" description="セルごとの強度">
+              <EChart
+                option={heatmapOption(heatmapCells, HEATMAP_X_AXIS, HEATMAP_Y_AXIS)}
+                height="280px"
+              />
+            </DashboardCardPreset>
+          )}
+        </div>
+      </PageShellContent>
+    </PageShell>
+  )
+}

package/ui-templates/funnel/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 >= 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")
+}
+
+export function formatPercent(value: number, digits = 1): string {
+  return `${value.toFixed(digits)}%`
+}

package/ui-templates/funnel/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 = ["Stage 1 → 2", "Stage 2 → 3", "Stage 3 → 4", "Stage 4 → 5"]
+
+interface StageTableProps {
+  data: StageRow[]
+}
+
+export function StageTable({ data }: StageTableProps) {
+  const columns = useMemo<ColumnDef<StageRow>[]>(
+    () => [
+      {
+        id: "step",
+        header: "Column 1",
+        cell: ({ row }) => STEP_NAMES[row.index],
+      },
+      {
+        accessorKey: "count",
+        header: "Column 2",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{formatNumber(row.original.count)}</Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "conversionRate",
+        header: "Column 3",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{formatPercent(row.original.conversionRate)}</Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "avgDays",
+        header: "Column 4",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{`${row.original.avgDays.toFixed(1)}d`}</Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "dropoff",
+        header: "Column 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/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/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/manifest.json

@@ -0,0 +1,12 @@
+{
+  "name": "funnel",
+  "description": "Funnel — Pipeline-centric layout: 4 summary KPIs (Top of funnel / End-to-end conversion / Best stage / Bottleneck) on top, then a left-aligned funnel chart coloured from the theme tokens with a per-stage drop-off + pass-through sidebar, and a stage-performance ranking table below. For conversion / pipeline analysis dashboards.",
+  "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 }
+  ]
+}