Preview Updated 2026-05-10

MetricCard

Value + unit + delta + embedded sparkline trend.

Basic usage

Data is passed via props; pure SVG rendering with no third-party chart library. Colors come from the --viz-1..8 tokens and are color-blind friendly.

今日 PV+8.4%

12,420

活跃用户-2.1%

3,180

付费转化+0.4%

6.2%

src/App.vue vue

<CfMetricCard ... />

src/App.tsx tsx

<CfMetricCard ... />

Grid layout

Pair with grid-template-columns: repeat(auto-fit, minmax(...)) for adaptive density.

今日 PV+8.4%

12,420

活跃用户-2.1%

3,180

付费转化+0.4%

6.2%

平均停留0.0%

3:42

错误率-0.1%

0.18%

src/App.vue vue

<CfMetricCard label="…" value="…" :delta="…" :trend="[…]" />

src/App.tsx tsx

<CfMetricCard label="…" value="…" delta={…} trend={[…]} />

API

Prop	Type	Default	Description
`label`	`string`	`—`	Small top label
`value`	`string \| number`	`—`	Main value
`unit`	`string`	`—`	Unit (after the value)
`delta`	`number`	`—`	Percentage change; tinted by sign
`trend`	`number[]`	`—`	Embedded sparkline data