329 lines
8.8 KiB
Markdown
329 lines
8.8 KiB
Markdown
# Stat
|
||
|
||
Statistic card component for displaying metrics, counts, and key performance indicators with optional icons and descriptions.
|
||
|
||
## Tag
|
||
|
||
`Stat`
|
||
|
||
## Props
|
||
|
||
| Prop | Type | Default | Description |
|
||
| :--- | :--- | :--- | :--- |
|
||
| `label` | `string \| VNode \| Signal` | `-` | Statistic label/title |
|
||
| `value` | `string \| number \| Signal` | `-` | Main statistic value |
|
||
| `desc` | `string \| VNode \| Signal` | `-` | Description or trend text |
|
||
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed in the figure area |
|
||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||
|
||
## Styling
|
||
|
||
Stat supports all **daisyUI Stat classes**:
|
||
|
||
| Category | Keywords | Description |
|
||
| :--- | :--- | :--- |
|
||
| Base | `stat` | Base stat container |
|
||
| Sections | `stat-figure`, `stat-title`, `stat-value`, `stat-desc` | Stat sub-components |
|
||
| Variants | `stat-compact` | Compact spacing variant |
|
||
|
||
> For further details, check the [daisyUI Stat Documentation](https://daisyui.com/components/stat) – Full reference for CSS classes.
|
||
|
||
## Live Examples
|
||
|
||
### Basic Stat
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const BasicDemo = () => {
|
||
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
|
||
Stat({
|
||
label: 'Total Users',
|
||
value: '2,345',
|
||
desc: '↗︎ 120 new users this month'
|
||
}),
|
||
Stat({
|
||
label: 'Revenue',
|
||
value: '$45,678',
|
||
desc: '↘︎ 5% decrease from last month'
|
||
}),
|
||
Stat({
|
||
label: 'Conversion Rate',
|
||
value: '3.45%',
|
||
desc: '↗︎ 0.5% increase'
|
||
})
|
||
]);
|
||
};
|
||
$mount(BasicDemo, '#demo-basic');
|
||
```
|
||
|
||
### With Icons
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const IconsDemo = () => {
|
||
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
|
||
Stat({
|
||
label: 'Active Users',
|
||
value: '1,234',
|
||
desc: 'Currently online',
|
||
icon: Span({ class: 'text-2xl' }, '👥')
|
||
}),
|
||
Stat({
|
||
label: 'New Orders',
|
||
value: '89',
|
||
desc: 'Today',
|
||
icon: Span({ class: 'text-2xl' }, '📦')
|
||
}),
|
||
Stat({
|
||
label: 'Pending Tasks',
|
||
value: '23',
|
||
desc: 'Need attention',
|
||
icon: Span({ class: 'text-2xl' }, '⏳')
|
||
})
|
||
]);
|
||
};
|
||
$mount(IconsDemo, '#demo-icons');
|
||
```
|
||
|
||
### Reactive Values
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const ReactiveDemo = () => {
|
||
const count = $(0);
|
||
|
||
return Div({ class: 'flex flex-col gap-4' }, [
|
||
Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
|
||
Stat({
|
||
label: 'Counter',
|
||
value: () => count(),
|
||
desc: 'Click the button to increase',
|
||
icon: Span({ class: 'text-2xl' }, '🔢')
|
||
}),
|
||
Stat({
|
||
label: 'Squared',
|
||
value: () => Math.pow(count(), 2),
|
||
desc: 'Square of counter',
|
||
icon: Span({ class: 'text-2xl' }, '📐')
|
||
})
|
||
]),
|
||
Div({ class: 'flex gap-2 justify-center' }, [
|
||
Button({
|
||
class: 'btn btn-primary',
|
||
onclick: () => count(count() + 1)
|
||
}, 'Increment'),
|
||
Button({
|
||
class: 'btn btn-ghost',
|
||
onclick: () => count(0)
|
||
}, 'Reset')
|
||
])
|
||
]);
|
||
};
|
||
$mount(ReactiveDemo, '#demo-reactive');
|
||
```
|
||
|
||
### Multiple Stats in Row
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const MultipleDemo = () => {
|
||
return Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
|
||
Stat({
|
||
label: 'Posts',
|
||
value: '1,234',
|
||
desc: 'Total content',
|
||
icon: Span({ class: 'text-2xl' }, '📝')
|
||
}),
|
||
Stat({
|
||
label: 'Comments',
|
||
value: '8,901',
|
||
desc: 'Engagement',
|
||
icon: Span({ class: 'text-2xl' }, '💬')
|
||
}),
|
||
Stat({
|
||
label: 'Likes',
|
||
value: '12,345',
|
||
desc: 'Reactions',
|
||
icon: Span({ class: 'text-2xl' }, '❤️')
|
||
}),
|
||
Stat({
|
||
label: 'Shares',
|
||
value: '456',
|
||
desc: 'Viral reach',
|
||
icon: Span({ class: 'text-2xl' }, '🔄')
|
||
})
|
||
]);
|
||
};
|
||
$mount(MultipleDemo, '#demo-multiple');
|
||
```
|
||
|
||
### Dashboard Example
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-dashboard" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const DashboardDemo = () => {
|
||
const stats = $({
|
||
users: 1245,
|
||
revenue: 89342,
|
||
orders: 342,
|
||
satisfaction: 94
|
||
});
|
||
|
||
const updateStats = () => {
|
||
stats({
|
||
users: stats().users + Math.floor(Math.random() * 50),
|
||
revenue: stats().revenue + Math.floor(Math.random() * 1000),
|
||
orders: stats().orders + Math.floor(Math.random() * 20),
|
||
satisfaction: Math.min(100, stats().satisfaction + Math.floor(Math.random() * 5) - 2)
|
||
});
|
||
};
|
||
|
||
return Div({ class: 'flex flex-col gap-6' }, [
|
||
Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
|
||
Stat({
|
||
label: 'Total Users',
|
||
value: () => stats().users.toLocaleString(),
|
||
desc: 'Registered users',
|
||
icon: Span({ class: 'text-2xl' }, '👥')
|
||
}),
|
||
Stat({
|
||
label: 'Revenue',
|
||
value: () => `$${stats().revenue.toLocaleString()}`,
|
||
desc: 'This month',
|
||
icon: Span({ class: 'text-2xl' }, '💰')
|
||
}),
|
||
Stat({
|
||
label: 'Orders',
|
||
value: () => stats().orders.toLocaleString(),
|
||
desc: 'Completed',
|
||
icon: Span({ class: 'text-2xl' }, '📦')
|
||
}),
|
||
Stat({
|
||
label: 'Satisfaction',
|
||
value: () => `${stats().satisfaction}%`,
|
||
desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
|
||
icon: Span({ class: 'text-2xl' }, '😊')
|
||
})
|
||
]),
|
||
Div({ class: 'flex justify-center' }, [
|
||
Button({
|
||
class: 'btn btn-primary',
|
||
onclick: updateStats
|
||
}, 'Refresh Data')
|
||
])
|
||
]);
|
||
};
|
||
$mount(DashboardDemo, '#demo-dashboard');
|
||
```
|
||
|
||
### All Variants
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const VariantsDemo = () => {
|
||
return Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
|
||
Stat({
|
||
label: 'Primary Stat',
|
||
value: '1,234',
|
||
desc: 'With description',
|
||
icon: Span({ class: 'text-2xl' }, '⭐'),
|
||
class: 'bg-primary/10 text-primary'
|
||
}),
|
||
Stat({
|
||
label: 'Success Stat',
|
||
value: '89%',
|
||
desc: 'Success rate',
|
||
icon: Span({ class: 'text-2xl' }, '✅'),
|
||
class: 'bg-success/10 text-success'
|
||
}),
|
||
Stat({
|
||
label: 'Warning Stat',
|
||
value: '23',
|
||
desc: 'Pending items',
|
||
icon: Span({ class: 'text-2xl' }, '⚠️'),
|
||
class: 'bg-warning/10 text-warning'
|
||
}),
|
||
Stat({
|
||
label: 'Error Stat',
|
||
value: '5',
|
||
desc: 'Failed attempts',
|
||
icon: Span({ class: 'text-2xl' }, '❌'),
|
||
class: 'bg-error/10 text-error'
|
||
})
|
||
]);
|
||
};
|
||
$mount(VariantsDemo, '#demo-variants');
|
||
```
|
||
|
||
### Compact Stats
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-compact" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const CompactDemo = () => {
|
||
return Div({ class: 'flex flex-wrap gap-4' }, [
|
||
Stat({
|
||
label: 'Views',
|
||
value: '12.3K',
|
||
class: 'stat-compact'
|
||
}),
|
||
Stat({
|
||
label: 'Likes',
|
||
value: '2,456',
|
||
class: 'stat-compact'
|
||
}),
|
||
Stat({
|
||
label: 'Comments',
|
||
value: '345',
|
||
class: 'stat-compact'
|
||
}),
|
||
Stat({
|
||
label: 'Shares',
|
||
value: '89',
|
||
class: 'stat-compact'
|
||
})
|
||
]);
|
||
};
|
||
$mount(CompactDemo, '#demo-compact');
|
||
``` |