KPICard
A card component for displaying Key Performance Indicators with progress visualization towards a target.
Features
- Display current value and target
- Progress visualization
- Customizable colors
- Optional unit display
- Optional icon
- Click events for interaction
Examples
Basic KPICard
Q4 Sales Target
95000
$
Target: 100000 $ 95%
<script>
import { KPICard } from '$lib';
</script>
<KPICard
label="Q4 Sales Target"
value={95000}
target={100000}
unit="$"
color="success"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | Required | KPI label/title |
value | number | Required | Current value |
target | number | Required | Target value |
unit | string | undefined | Unit of measurement |
color | string | 'primary' | Card color theme |
icon | string | undefined | Icon identifier |
Best Practices
- Use for tracking progress towards goals
- Include meaningful units
- Use colors to indicate status
- Keep targets realistic and meaningful