@squadbase/vantage-template 0.0.1

package/ui-templates/chart-grid/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: "Charts overview",
+  description:
+    "Six-chart grid (area, line, bar, scatter, radar, heatmap) with category filter chips in the header.",
+})
+
+// ── 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 >= 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 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: "Series A",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        data: data.map((d) => d.series1),
+        areaStyle: { opacity: 0.22 },
+      },
+      {
+        name: "Series 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: "Series A",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        data: data.map((d) => d.series1),
+      },
+      {
+        name: "Series B",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        data: data.map((d) => d.series2),
+      },
+    ],
+  }
+}
+
+const BAR_CATEGORIES = [
+  "Item 1",
+  "Item 2",
+  "Item 3",
+  "Item 4",
+  "Item 5",
+  "Item 6",
+  "Item 7",
+  "Item 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: "Series 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 = ["Axis 1", "Axis 2", "Axis 3", "Axis 4", "Axis 5", "Axis 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: "Series A",
+            areaStyle: { opacity: 0.28 },
+          },
+          {
+            value: data.map((r) => r.benchmark),
+            name: "Series 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>[Template] Charts overview</PageShellTitle>
+          <PageShellDescription>
+            A grid of charts for the selected period.
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd className="flex-row items-center gap-3">
+          {/* Base UI ToggleGroup is array-valued even for single select. */}
+          <ToggleGroup
+            value={[category]}
+            onValueChange={(values) => {
+              const next = values[0]
+              if (next) setCategory(next as Category)
+            }}
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="all">All</ToggleGroupItem>
+            <ToggleGroupItem value="trend">Group A</ToggleGroupItem>
+            <ToggleGroupItem value="ranking">Group B</ToggleGroupItem>
+            <ToggleGroupItem value="distribution">Group 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="Trend (area)"
+              description="Two series over the selected period"
+            >
+              <EChart option={areaOption(timeSeries)} height="280px" />
+            </DashboardCardPreset>
+          )}
+          {show("trend") && (
+            <DashboardCardPreset
+              title="Trend (line)"
+              description="Two series over the selected period"
+            >
+              <EChart option={lineOption(timeSeries)} height="280px" />
+            </DashboardCardPreset>
+          )}
+          {show("ranking") && (
+            <DashboardCardPreset title="Top categories" description="Ranked by value">
+              <EChart option={barOption(barSeries)} height="280px" />
+            </DashboardCardPreset>
+          )}
+          {show("distribution") && (
+            <DashboardCardPreset title="Correlation" description="Each point is an item">
+              <EChart option={scatterOption(scatterPoints)} height="280px" />
+            </DashboardCardPreset>
+          )}
+          {show("distribution") && (
+            <DashboardCardPreset title="Profile" description="Current vs benchmark">
+              <EChart option={radarOption(radarAxes)} height="280px" />
+            </DashboardCardPreset>
+          )}
+          {show("distribution") && (
+            <DashboardCardPreset title="Activity" description="Intensity by cell">
+              <EChart
+                option={heatmapOption(heatmapCells, HEATMAP_X_AXIS, HEATMAP_Y_AXIS)}
+                height="280px"
+              />
+            </DashboardCardPreset>
+          )}
+        </div>
+      </PageShellContent>
+    </PageShell>
+  )
+}

package/ui-templates/chart-grid-ja/lib/mock-data.ts

@@ -0,0 +1,139 @@
+import type {
+  TimePoint,
+  BarPoint,
+  ScatterPoint,
+  RadarPoint,
+  HeatmapCell,
+} from "./types"
+
+export const timeSeries: TimePoint[] = [
+  { date: "2024-03-02", series1: 16462, series2: 12092 },
+  { date: "2024-03-03", series1: 17807, series2: 11084 },
+  { date: "2024-03-04", series1: 17272, series2: 13572 },
+  { date: "2024-03-05", series1: 18462, series2: 13897 },
+  { date: "2024-03-06", series1: 19943, series2: 12100 },
+  { date: "2024-03-07", series1: 21026, series2: 13152 },
+  { date: "2024-03-08", series1: 18203, series2: 14502 },
+  { date: "2024-03-09", series1: 20265, series2: 13472 },
+  { date: "2024-03-10", series1: 18075, series2: 13476 },
+  { date: "2024-03-11", series1: 21018, series2: 15075 },
+  { date: "2024-03-12", series1: 20104, series2: 12868 },
+  { date: "2024-03-13", series1: 21755, series2: 15713 },
+  { date: "2024-03-14", series1: 20240, series2: 13282 },
+  { date: "2024-03-15", series1: 20796, series2: 14953 },
+  { date: "2024-03-16", series1: 21397, series2: 14028 },
+  { date: "2024-03-17", series1: 21203, series2: 13791 },
+  { date: "2024-03-18", series1: 19673, series2: 13895 },
+  { date: "2024-03-19", series1: 22335, series2: 16589 },
+  { date: "2024-03-20", series1: 21241, series2: 14266 },
+  { date: "2024-03-21", series1: 22068, series2: 14360 },
+  { date: "2024-03-22", series1: 21903, series2: 14062 },
+  { date: "2024-03-23", series1: 21685, series2: 15876 },
+  { date: "2024-03-24", series1: 21315, series2: 17515 },
+  { date: "2024-03-25", series1: 21435, series2: 14613 },
+  { date: "2024-03-26", series1: 23871, series2: 16287 },
+  { date: "2024-03-27", series1: 22747, series2: 17526 },
+  { date: "2024-03-28", series1: 22262, series2: 15910 },
+  { date: "2024-03-29", series1: 25130, series2: 16666 },
+  { date: "2024-03-30", series1: 23698, series2: 15561 },
+  { date: "2024-03-31", series1: 25719, series2: 15619 },
+]
+
+export const barSeries: BarPoint[] = [
+  { value: 184_320 },
+  { value: 162_480 },
+  { value: 138_750 },
+  { value: 121_900 },
+  { value: 98_640 },
+  { value: 87_220 },
+  { value: 72_410 },
+  { value: 54_220 },
+]
+
+export const scatterPoints: ScatterPoint[] = [
+  { x: 24, y: 750, size: 23, label: "項目1" },
+  { x: 30, y: 572, size: 23, label: "項目2" },
+  { x: 79, y: 692, size: 19, label: "項目3" },
+  { x: 43, y: 585, size: 20, label: "項目4" },
+  { x: 35, y: 626, size: 13, label: "項目5" },
+  { x: 90, y: 289, size: 29, label: "項目6" },
+  { x: 80, y: 851, size: 11, label: "項目7" },
+  { x: 39, y: 885, size: 13, label: "項目8" },
+  { x: 79, y: 768, size: 21, label: "項目9" },
+  { x: 75, y: 873, size: 24, label: "項目10" },
+  { x: 60, y: 676, size: 29, label: "項目11" },
+  { x: 67, y: 552, size: 25, label: "項目12" },
+  { x: 49, y: 876, size: 20, label: "項目13" },
+  { x: 40, y: 223, size: 23, label: "項目14" },
+  { x: 73, y: 768, size: 22, label: "項目15" },
+  { x: 21, y: 186, size: 26, label: "項目16" },
+  { x: 78, y: 652, size: 22, label: "項目17" },
+  { x: 37, y: 740, size: 19, label: "項目18" },
+  { x: 92, y: 827, size: 26, label: "項目19" },
+  { x: 35, y: 386, size: 9, label: "項目20" },
+  { x: 60, y: 694, size: 21, label: "項目21" },
+  { x: 41, y: 324, size: 26, label: "項目22" },
+  { x: 90, y: 552, size: 12, label: "項目23" },
+  { x: 81, y: 853, size: 11, label: "項目24" },
+  { x: 48, y: 702, size: 9, label: "項目25" },
+  { x: 23, y: 474, size: 15, label: "項目26" },
+  { x: 41, y: 544, size: 17, label: "項目27" },
+  { x: 53, y: 387, size: 24, label: "項目28" },
+]
+
+export const radarAxes: RadarPoint[] = [
+  { current: 82, benchmark: 70 },
+  { current: 91, benchmark: 78 },
+  { current: 64, benchmark: 75 },
+  { current: 88, benchmark: 80 },
+  { current: 73, benchmark: 65 },
+  { current: 79, benchmark: 70 },
+]
+
+export const HEATMAP_X_AXIS = ["0", "1", "2", "3", "4", "5"]
+export const HEATMAP_Y_AXIS = ["行1", "行2", "行3", "行4", "行5", "行6", "行7"]
+
+export const heatmapCells: HeatmapCell[] = [
+  { x: "0", y: "行1", value: 57 },
+  { x: "1", y: "行1", value: 25 },
+  { x: "2", y: "行1", value: 91 },
+  { x: "3", y: "行1", value: 77 },
+  { x: "4", y: "行1", value: 96 },
+  { x: "5", y: "行1", value: 45 },
+  { x: "0", y: "行2", value: 46 },
+  { x: "1", y: "行2", value: 32 },
+  { x: "2", y: "行2", value: 75 },
+  { x: "3", y: "行2", value: 94 },
+  { x: "4", y: "行2", value: 83 },
+  { x: "5", y: "行2", value: 37 },
+  { x: "0", y: "行3", value: 56 },
+  { x: "1", y: "行3", value: 22 },
+  { x: "2", y: "行3", value: 76 },
+  { x: "3", y: "行3", value: 85 },
+  { x: "4", y: "行3", value: 79 },
+  { x: "5", y: "行3", value: 39 },
+  { x: "0", y: "行4", value: 56 },
+  { x: "1", y: "行4", value: 12 },
+  { x: "2", y: "行4", value: 73 },
+  { x: "3", y: "行4", value: 88 },
+  { x: "4", y: "行4", value: 95 },
+  { x: "5", y: "行4", value: 19 },
+  { x: "0", y: "行5", value: 60 },
+  { x: "1", y: "行5", value: 17 },
+  { x: "2", y: "行5", value: 77 },
+  { x: "3", y: "行5", value: 85 },
+  { x: "4", y: "行5", value: 81 },
+  { x: "5", y: "行5", value: 43 },
+  { x: "0", y: "行6", value: 36 },
+  { x: "1", y: "行6", value: 56 },
+  { x: "2", y: "行6", value: 55 },
+  { x: "3", y: "行6", value: 34 },
+  { x: "4", y: "行6", value: 20 },
+  { x: "5", y: "行6", value: 27 },
+  { x: "0", y: "行7", value: 50 },
+  { x: "1", y: "行7", value: 44 },
+  { x: "2", y: "行7", value: 32 },
+  { x: "3", y: "行7", value: 55 },
+  { x: "4", y: "行7", value: 46 },
+  { x: "5", y: "行7", value: 39 },
+]

package/ui-templates/chart-grid-ja/lib/types.ts

@@ -0,0 +1,31 @@
+export interface TimePoint {
+  date: string
+  series1: number
+  series2: number
+}
+
+export interface BarPoint {
+  value: number
+}
+
+export interface ScatterPoint {
+  x: number
+  y: number
+  size: number
+  label: string
+}
+
+export interface RadarPoint {
+  current: number
+  benchmark: number
+}
+
+export interface HeatmapCell {
+  x: string
+  y: string
+  value: number
+}
+
+export interface DashboardFilters {
+  dateRange: { from: Date | undefined; to: Date | undefined }
+}

package/ui-templates/chart-grid-ja/manifest.json

@@ -0,0 +1,10 @@
+{
+  "name": "chart-grid-ja",
+  "description": "[日本語] チャート格子 — エリア/折れ線/棒/散布/レーダー/ヒートマップの6チャート格子。ヘッダーにカテゴリフィルタチップを配置。チャートだけで構成する可視化重視のダッシュボード",
+  "version": "0.1.0",
+  "files": [
+    { "src": "pages/index.tsx", "dest": "index.tsx", "action": "replace" },
+    { "src": "lib/mock-data.ts", "dest": "components/chart-grid/mock-data.ts", "action": "add", "relabel": false },
+    { "src": "lib/types.ts", "dest": "components/chart-grid/types.ts", "action": "add", "relabel": false }
+  ]
+}