@squadbase/vantage-template 0.2.0-dev1.20f95fa → 0.2.0-dev1.29fa6c1

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

@@ -3,6 +3,11 @@ import { subDays } from "date-fns"
 import { definePage } from "@squadbase/vantage"
 import {
   DashboardCardPreset,
+  AreaChart,
+  BarChart,
+  Heatmap,
+  LineChart,
+  ScatterChart,
   DateRangePicker,
   EChart,
   PageShell,
@@ -22,15 +27,9 @@ import {
   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"
 
@@ -40,86 +39,6 @@ export const page = definePage({
     "エリア/折れ線/棒/散布/レーダー/ヒートマップの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",
@@ -131,45 +50,6 @@ const BAR_CATEGORIES = [
   "項目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 {
@@ -200,34 +80,7 @@ function radarOption(data: RadarPoint[]): EChartsOption {
   }
 }
 
-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 } },
-      },
-    ],
-  }
-}
+const barRows = barSeries.map((d, i) => ({ item: BAR_CATEGORIES[i], value: d.value }))
 
 // ── page ─────────────────────────────────────────────────────────────────────
 
@@ -290,7 +143,7 @@ export default function HomePage() {
               title="トレンド (エリア)"
               description="選択期間の2系列"
             >
-              <EChart option={areaOption(timeSeries)} height="280px" />
+              <AreaChart data={timeSeries} index="date" categories={["series1", "series2"]} labels={{ series1: "系列A", series2: "系列B" }} height="280px" />
             </DashboardCardPreset>
           )}
           {show("trend") && (
@@ -298,17 +151,17 @@ export default function HomePage() {
               title="トレンド (折れ線)"
               description="選択期間の2系列"
             >
-              <EChart option={lineOption(timeSeries)} height="280px" />
+              <LineChart data={timeSeries} index="date" categories={["series1", "series2"]} labels={{ series1: "系列A", series2: "系列B" }} height="280px" />
             </DashboardCardPreset>
           )}
           {show("ranking") && (
             <DashboardCardPreset title="上位カテゴリ" description="値で並べ替え">
-              <EChart option={barOption(barSeries)} height="280px" />
+              <BarChart data={barRows} index="item" categories={["value"]} labels={{ value: "系列A" }} showLegend={false} height="280px" />
             </DashboardCardPreset>
           )}
           {show("distribution") && (
             <DashboardCardPreset title="相関" description="各点が1項目">
-              <EChart option={scatterOption(scatterPoints)} height="280px" />
+              <ScatterChart data={scatterPoints} x="x" y="y" size="size" index="label" height="280px" />
             </DashboardCardPreset>
           )}
           {show("distribution") && (
@@ -318,10 +171,7 @@ export default function HomePage() {
           )}
           {show("distribution") && (
             <DashboardCardPreset title="アクティビティ" description="セルごとの強度">
-              <EChart
-                option={heatmapOption(heatmapCells, HEATMAP_X_AXIS, HEATMAP_Y_AXIS)}
-                height="280px"
-              />
+              <Heatmap data={heatmapCells} x="x" y="y" value="value" xLabels={["0", "1", "2", "3", "4", "5"]} yLabels={["行7", "行6", "行5", "行4", "行3", "行2", "行1"]} height={280} />
             </DashboardCardPreset>
           )}
         </div>

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 }
 }