645 lines
19 KiB
Markdown
645 lines
19 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) |
|
|
|
|
## 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: Icons.iconShow
|
|
}),
|
|
Stat({
|
|
label: 'New Orders',
|
|
value: '89',
|
|
desc: 'Today',
|
|
icon: Icons.iconSuccess
|
|
}),
|
|
Stat({
|
|
label: 'Pending Tasks',
|
|
value: '23',
|
|
desc: 'Need attention',
|
|
icon: Icons.iconWarning
|
|
})
|
|
]);
|
|
};
|
|
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: Icons.iconInfo
|
|
}),
|
|
Stat({
|
|
label: 'Squared',
|
|
value: () => Math.pow(count(), 2),
|
|
desc: 'Square of counter',
|
|
icon: Icons.iconSuccess
|
|
})
|
|
]),
|
|
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');
|
|
```
|
|
|
|
### With Trend Indicators
|
|
|
|
<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-trends" 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 TrendsDemo = () => {
|
|
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
|
|
Stat({
|
|
label: 'Weekly Sales',
|
|
value: '$12,345',
|
|
desc: Div({ class: 'text-success' }, '↗︎ 15% increase'),
|
|
icon: Icons.iconSuccess
|
|
}),
|
|
Stat({
|
|
label: 'Bounce Rate',
|
|
value: '42%',
|
|
desc: Div({ class: 'text-error' }, '↘︎ 3% from last week'),
|
|
icon: Icons.iconError
|
|
}),
|
|
Stat({
|
|
label: 'Avg. Session',
|
|
value: '4m 32s',
|
|
desc: Div({ class: 'text-warning' }, '↗︎ 12 seconds'),
|
|
icon: Icons.iconWarning
|
|
})
|
|
]);
|
|
};
|
|
Mount(TrendsDemo, '#demo-trends');
|
|
```
|
|
|
|
### 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: Icons.iconShow
|
|
}),
|
|
Stat({
|
|
label: 'Revenue',
|
|
value: () => `$${stats().revenue.toLocaleString()}`,
|
|
desc: 'This month',
|
|
icon: Icons.iconSuccess
|
|
}),
|
|
Stat({
|
|
label: 'Orders',
|
|
value: () => stats().orders.toLocaleString(),
|
|
desc: 'Completed',
|
|
icon: Icons.iconInfo
|
|
}),
|
|
Stat({
|
|
label: 'Satisfaction',
|
|
value: () => `${stats().satisfaction}%`,
|
|
desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
|
|
icon: Icons.iconWarning
|
|
})
|
|
]),
|
|
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: Icons.iconInfo,
|
|
class: 'bg-primary/10 text-primary'
|
|
}),
|
|
Stat({
|
|
label: 'Success Stat',
|
|
value: '89%',
|
|
desc: 'Success rate',
|
|
icon: Icons.iconSuccess,
|
|
class: 'bg-success/10 text-success'
|
|
}),
|
|
Stat({
|
|
label: 'Warning Stat',
|
|
value: '23',
|
|
desc: 'Pending items',
|
|
icon: Icons.iconWarning,
|
|
class: 'bg-warning/10 text-warning'
|
|
}),
|
|
Stat({
|
|
label: 'Error Stat',
|
|
value: '5',
|
|
desc: 'Failed attempts',
|
|
icon: Icons.iconError,
|
|
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');
|
|
```
|
|
|
|
<script>
|
|
(function() {
|
|
const initStatExamples = () => {
|
|
|
|
// 1. Basic Stat
|
|
const basicTarget = document.querySelector('#demo-basic');
|
|
if (basicTarget && !basicTarget.hasChildNodes()) {
|
|
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, basicTarget);
|
|
}
|
|
|
|
// 2. With Icons
|
|
const iconsTarget = document.querySelector('#demo-icons');
|
|
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
|
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: Icons.iconShow
|
|
}),
|
|
Stat({
|
|
label: 'New Orders',
|
|
value: '89',
|
|
desc: 'Today',
|
|
icon: Icons.iconSuccess
|
|
}),
|
|
Stat({
|
|
label: 'Pending Tasks',
|
|
value: '23',
|
|
desc: 'Need attention',
|
|
icon: Icons.iconWarning
|
|
})
|
|
]);
|
|
};
|
|
Mount(IconsDemo, iconsTarget);
|
|
}
|
|
|
|
// 3. Reactive Values
|
|
const reactiveTarget = document.querySelector('#demo-reactive');
|
|
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
|
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: Icons.iconInfo
|
|
}),
|
|
Stat({
|
|
label: 'Squared',
|
|
value: () => Math.pow(count(), 2),
|
|
desc: 'Square of counter',
|
|
icon: Icons.iconSuccess
|
|
})
|
|
]),
|
|
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, reactiveTarget);
|
|
}
|
|
|
|
// 4. With Trend Indicators
|
|
const trendsTarget = document.querySelector('#demo-trends');
|
|
if (trendsTarget && !trendsTarget.hasChildNodes()) {
|
|
const TrendsDemo = () => {
|
|
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
|
|
Stat({
|
|
label: 'Weekly Sales',
|
|
value: '$12,345',
|
|
desc: Div({ class: 'text-success' }, '↗︎ 15% increase'),
|
|
icon: Icons.iconSuccess
|
|
}),
|
|
Stat({
|
|
label: 'Bounce Rate',
|
|
value: '42%',
|
|
desc: Div({ class: 'text-error' }, '↘︎ 3% from last week'),
|
|
icon: Icons.iconError
|
|
}),
|
|
Stat({
|
|
label: 'Avg. Session',
|
|
value: '4m 32s',
|
|
desc: Div({ class: 'text-warning' }, '↗︎ 12 seconds'),
|
|
icon: Icons.iconWarning
|
|
})
|
|
]);
|
|
};
|
|
Mount(TrendsDemo, trendsTarget);
|
|
}
|
|
|
|
// 5. Multiple Stats in Row
|
|
const multipleTarget = document.querySelector('#demo-multiple');
|
|
if (multipleTarget && !multipleTarget.hasChildNodes()) {
|
|
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, multipleTarget);
|
|
}
|
|
|
|
// 6. Dashboard Example
|
|
const dashboardTarget = document.querySelector('#demo-dashboard');
|
|
if (dashboardTarget && !dashboardTarget.hasChildNodes()) {
|
|
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: Icons.iconShow
|
|
}),
|
|
Stat({
|
|
label: 'Revenue',
|
|
value: () => `$${stats().revenue.toLocaleString()}`,
|
|
desc: 'This month',
|
|
icon: Icons.iconSuccess
|
|
}),
|
|
Stat({
|
|
label: 'Orders',
|
|
value: () => stats().orders.toLocaleString(),
|
|
desc: 'Completed',
|
|
icon: Icons.iconInfo
|
|
}),
|
|
Stat({
|
|
label: 'Satisfaction',
|
|
value: () => `${stats().satisfaction}%`,
|
|
desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
|
|
icon: Icons.iconWarning
|
|
})
|
|
]),
|
|
Div({ class: 'flex justify-center' }, [
|
|
Button({
|
|
class: 'btn btn-primary',
|
|
onclick: updateStats
|
|
}, 'Refresh Data')
|
|
])
|
|
]);
|
|
};
|
|
Mount(DashboardDemo, dashboardTarget);
|
|
}
|
|
|
|
// 7. All Variants
|
|
const variantsTarget = document.querySelector('#demo-variants');
|
|
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
|
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: Icons.iconInfo,
|
|
class: 'bg-primary/10 text-primary'
|
|
}),
|
|
Stat({
|
|
label: 'Success Stat',
|
|
value: '89%',
|
|
desc: 'Success rate',
|
|
icon: Icons.iconSuccess,
|
|
class: 'bg-success/10 text-success'
|
|
}),
|
|
Stat({
|
|
label: 'Warning Stat',
|
|
value: '23',
|
|
desc: 'Pending items',
|
|
icon: Icons.iconWarning,
|
|
class: 'bg-warning/10 text-warning'
|
|
}),
|
|
Stat({
|
|
label: 'Error Stat',
|
|
value: '5',
|
|
desc: 'Failed attempts',
|
|
icon: Icons.iconError,
|
|
class: 'bg-error/10 text-error'
|
|
})
|
|
]);
|
|
};
|
|
Mount(VariantsDemo, variantsTarget);
|
|
}
|
|
|
|
// 8. Compact Stats
|
|
const compactTarget = document.querySelector('#demo-compact');
|
|
if (compactTarget && !compactTarget.hasChildNodes()) {
|
|
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, compactTarget);
|
|
}
|
|
};
|
|
|
|
initStatExamples();
|
|
|
|
if (window.$docsify) {
|
|
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
|
hook.doneEach(initStatExamples);
|
|
});
|
|
}
|
|
})();
|
|
</script>
|