@squadbase/vantage-template 0.1.0-dev.c40b771 → 0.1.0-dev2.12326b6

package/base-template/src/index.tsx

@@ -1,6 +1,7 @@
 import { definePage } from "@squadbase/vantage"
 import {
   DashboardCardPreset,
+  EChart,
   PageShell,
   PageShellContent,
   PageShellDescription,
@@ -8,6 +9,8 @@ import {
   PageShellHeading,
   PageShellTitle,
   Placeholder,
+  Sparkline,
+  type EChartsOption,
 } from "@squadbase/vantage/components"
 
 export const page = definePage({
@@ -17,13 +20,49 @@ export const page = definePage({
 })
 
 const METRICS = [
-  { label: "Metric 1", value: "1,234" },
-  { label: "Metric 2", value: "5,678" },
-  { label: "Metric 3", value: "90.1%" },
-  { label: "Metric 4", value: "$12.3k" },
+  { label: "Metric 1", value: "1,234", trend: [3, 4, 3, 5, 6, 5, 7] },
+  { label: "Metric 2", value: "5,678", trend: [6, 5, 6, 4, 5, 6, 6] },
+  { label: "Metric 3", value: "90.1%", trend: [2, 3, 5, 4, 6, 7, 8] },
+  { label: "Metric 4", value: "$12.3k", trend: [5, 6, 4, 6, 5, 7, 6] },
 ]
 
-const CHARTS = ["Chart 1", "Chart 2"]
+// Sample charts. `EChart` paints series with `--chart-1..5` and the sparklines
+// use `--primary` (both from `styles.css`), so a theme change shows up here.
+const BAR_OPTION: EChartsOption = {
+  legend: { top: 0 },
+  grid: { top: 36, right: 8, bottom: 24, left: 36 },
+  xAxis: { type: "category", data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"] },
+  yAxis: { type: "value" },
+  series: [
+    { name: "Series A", type: "bar", data: [12, 18, 15, 22, 26, 24] },
+    { name: "Series B", type: "bar", data: [8, 11, 13, 12, 16, 19] },
+    { name: "Series C", type: "bar", data: [5, 7, 6, 9, 8, 11] },
+  ],
+}
+
+const PIE_OPTION: EChartsOption = {
+  legend: { bottom: 0 },
+  series: [
+    {
+      type: "pie",
+      radius: ["45%", "70%"],
+      center: ["50%", "45%"],
+      label: { show: false },
+      data: [
+        { name: "Category A", value: 35 },
+        { name: "Category B", value: 25 },
+        { name: "Category C", value: 18 },
+        { name: "Category D", value: 12 },
+        { name: "Category E", value: 10 },
+      ],
+    },
+  ],
+}
+
+const CHARTS = [
+  { title: "Chart 1", option: BAR_OPTION },
+  { title: "Chart 2", option: PIE_OPTION },
+]
 
 export default function HomePage() {
   return (
@@ -42,14 +81,20 @@ export default function HomePage() {
           {METRICS.map((metric) => (
             <DashboardCardPreset key={metric.label} title={metric.label}>
               <Placeholder className="text-2xl font-bold">{metric.value}</Placeholder>
+              <Sparkline
+                className="mt-2"
+                data={metric.trend.map((value) => ({ value }))}
+                color="text-primary"
+                area
+              />
             </DashboardCardPreset>
           ))}
         </section>
 
         <section className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-          {CHARTS.map((title) => (
-            <DashboardCardPreset key={title} title={title}>
-              <Placeholder className="h-64 w-full" />
+          {CHARTS.map((chart) => (
+            <DashboardCardPreset key={chart.title} title={chart.title}>
+              <EChart option={chart.option} height={256} ariaLabel={chart.title} />
             </DashboardCardPreset>
           ))}
         </section>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.0-dev.c40b771",
+  "version": "0.1.0-dev2.12326b6",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",

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

@@ -223,7 +223,7 @@ function heatmapOption(
         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)" } },
+        emphasis: { itemStyle: { shadowBlur: 8 } },
       },
     ],
   }

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

@@ -223,7 +223,7 @@ function heatmapOption(
         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)" } },
+        emphasis: { itemStyle: { shadowBlur: 8 } },
       },
     ],
   }

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

@@ -113,13 +113,13 @@ const summaryCards = [
     label: "Best step",
     value: "31.9%",
     sub: "Highest step conversion",
-    icon: <TrendingUp className="size-4 text-emerald-600" />,
+    icon: <TrendingUp className="size-4 text-chart-2" />,
   },
   {
     label: "Biggest drop",
     value: "68.2%",
     sub: "Largest step drop-off",
-    icon: <TrendingDown className="size-4 text-rose-600" />,
+    icon: <TrendingDown className="size-4 text-destructive" />,
   },
 ]
 

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

@@ -112,13 +112,13 @@ const summaryCards = [
     label: "最良ステップ",
     value: "31.9%",
     sub: "最も高いステップ転換率",
-    icon: <TrendingUp className="size-4 text-emerald-600" />,
+    icon: <TrendingUp className="size-4 text-chart-2" />,
   },
   {
     label: "最大の離脱",
     value: "68.2%",
     sub: "最大のステップ離脱率",
-    icon: <TrendingDown className="size-4 text-rose-600" />,
+    icon: <TrendingDown className="size-4 text-destructive" />,
   },
 ]