@squadbase/vantage-template 0.1.1 → 0.2.0-dev1.0c136ab

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

@@ -1,9 +1,9 @@
-export interface FunnelStage {
+export type FunnelStage = {
   value: number
   conversionRate: number
 }
 
-export interface StageRow {
+export type StageRow = {
   count: number
   conversionRate: number
   avgDays: number

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

@@ -10,7 +10,7 @@ import {
   DashboardCardContent,
   DashboardCardPreset,
   DateRangePicker,
-  EChart,
+  FunnelSteps,
   PageShell,
   PageShellHeader,
   PageShellHeading,
@@ -20,12 +20,10 @@ import {
   PageShellContent,
   Placeholder,
 } from "@squadbase/vantage/components"
-import type { DateRange, EChartsOption } from "@squadbase/vantage/components"
-import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui"
+import type { DateRange } from "@squadbase/vantage/components"
 
 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",
@@ -36,65 +34,7 @@ export const page = definePage({
 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 funnelRows = funnelStages.map((d, i) => ({ stage: STAGE_NAMES[i], value: d.value }))
 
 const summaryCards = [
   {
@@ -128,7 +68,6 @@ export default function HomePage() {
     from: subDays(today, 29),
     to: today,
   })
-  const [display, setDisplay] = useState<DisplayMode>("count")
 
   return (
     <PageShell>
@@ -140,19 +79,6 @@ export default function HomePage() {
           </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}
@@ -180,17 +106,13 @@ export default function HomePage() {
         </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
+            className="lg:col-span-2"
+            title="Conversion funnel"
+            description="Stage-by-stage conversion"
+          >
+            <FunnelSteps data={funnelRows} index="stage" categories={["value"]} />
+          </DashboardCardPreset>
           <DashboardCardPreset title="Stages" description="Conversion by stage">
             <StagesSidebar />
           </DashboardCardPreset>

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

@@ -1,9 +1,9 @@
-export interface FunnelStage {
+export type FunnelStage = {
   value: number
   conversionRate: number
 }
 
-export interface StageRow {
+export type StageRow = {
   count: number
   conversionRate: number
   avgDays: number

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

@@ -10,7 +10,7 @@ import {
   DashboardCardContent,
   DashboardCardPreset,
   DateRangePicker,
-  EChart,
+  FunnelSteps,
   PageShell,
   PageShellHeader,
   PageShellHeading,
@@ -20,12 +20,10 @@ import {
   PageShellContent,
   Placeholder,
 } from "@squadbase/vantage/components"
-import type { DateRange, EChartsOption } from "@squadbase/vantage/components"
-import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui"
+import type { DateRange } from "@squadbase/vantage/components"
 
 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: "ファネル",
@@ -36,64 +34,7 @@ export const page = definePage({
 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 funnelRows = funnelStages.map((d, i) => ({ stage: STAGE_NAMES[i], value: d.value }))
 
 const summaryCards = [
   {
@@ -127,7 +68,6 @@ export default function HomePage() {
     from: subDays(today, 29),
     to: today,
   })
-  const [display, setDisplay] = useState<DisplayMode>("count")
 
   return (
     <PageShell>
@@ -139,19 +79,6 @@ export default function HomePage() {
           </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}
@@ -179,17 +106,13 @@ export default function HomePage() {
         </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
+            className="lg:col-span-2"
+            title="コンバージョンファネル"
+            description="ステージ別コンバージョン"
+          >
+            <FunnelSteps data={funnelRows} index="stage" categories={["value"]} />
+          </DashboardCardPreset>
           <DashboardCardPreset title="ステージ" description="ステージ別コンバージョン">
             <StagesSidebar />
           </DashboardCardPreset>

package/ui-templates/kpi-chart-advanced/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/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/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 }
 }