Brickslab.Tools

@brickslab./ui-webAnalytics

KPI card with SVG sparkline, delta badge, target progress bar, and loading skeleton.

Variants

Completion rateLast 30 days

74%

↑ 12%93% of 80% target

NPS score

↓ 3%

Avg. duration

3m 5s

↑ 5%

Revenue

$12,400

↑ 8%

Loading state

Completion rate

Props

Prop	Type	Défaut	Requis	Description
`title`	`string`	—	✓	Card label.
`value`	`number \| string`	—	✓	Primary metric value.
`delta`	`number`	—	—	Percentage change (positive = up, negative = down).
`target`	`number`	—	—	Shows a progress bar toward this target value.
`sparkline`	`number[]`	—	—	Array of historical values drawn as an SVG sparkline.
`format`	`"number" \| "percent" \| "currency" \| "time"`	`"number"`	—	Formats the displayed value.
`timeframe`	`string`	—	—	Small timeframe label (e.g. «Last 30 days»).
`loading`	`boolean`	`false`	—	Shows a shimmer skeleton.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  title="..."
  value="..."
  delta={0}
  target={0}
  sparkline={0}
  format="number"
  timeframe="..."
  loading={false}
/>

titlevaluedeltatargetsparklineformattimeframeloading

Usage

tsx

import { KPITrendWidget } from "@brickslab./ui-web";

<KPITrendWidget
  title="Completion rate"
  value={74}
  format="percent"
  delta={12}
  sparkline={[55, 60, 65, 70, 74]}
  target={80}
  timeframe="Last 30 days"
/>