Statistic
Statistic is used to show numbers and data in a box.
Usage
import { Statistic } from 'stwui';
import Statistic from 'stwui/statistic';
<script lang="ts">
import { Statistic } from 'stwui';
import { formatNumber } from 'stwui/utils';
</script>
<Statistic>
<Statistic.Title slot="title">Total Likes</Statistic.Title>
<Statistic.Value class="text-primary" slot="value">
{formatNumber(25660000, {
style: 'decimal',
notation: 'compact',
maximumFractionDigits: 1,
minimumFractionDigits: 1
})}
</Statistic.Value>
</Statistic>
<script lang="ts">
import { Statistic } from 'stwui';
import { formatNumber } from 'stwui/utils';
const favorite = "svg-path";
</script>
<Statistic>
<Statistic.Icon class="text-primary" slot="icon" data={favorite} />
<Statistic.Title slot="title">Total Likes</Statistic.Title>
<Statistic.Value class="text-primary" slot="value">
{formatNumber(25660000, {
style: 'decimal',
notation: 'compact',
maximumFractionDigits: 1,
minimumFractionDigits: 1
})}
</Statistic.Value>
</Statistic>
With Progress
<script lang="ts">
import { Statistic } from 'stwui';
import { formatNumber } from 'stwui/utils';
</script>
<Statistic>
<Statistic.Title slot="title">New Users</Statistic.Title>
<Statistic.Value slot="value">
{formatNumber(82001, {
style: 'decimal',
notation: 'compact',
maximumFractionDigits: 1,
minimumFractionDigits: 1
})}
</Statistic.Value>
<Statistic.Goal progress={82.001} />
</Statistic>
With Comparison
<script lang="ts">
import { Statistic } from 'stwui';
import { formatNumber } from 'stwui/utils';
const favorite = "svg-path";
</script>
<Statistic>
<Statistic.Icon slot="icon" data={favorite} />
<Statistic.Title slot="title">Total Likes</Statistic.Title>
<Statistic.Value slot="value">
{formatNumber(25660000, {
style: 'decimal',
notation: 'compact',
maximumFractionDigits: 1,
minimumFractionDigits: 1
})}
</Statistic.Value>
<Statistic.Comparison slot="comparison">
<Statistic.Comparison.Value slot="value">
Last Year: {formatNumber(27660000, {
style: 'decimal',
notation: 'compact',
maximumFractionDigits: 1,
minimumFractionDigits: 1
})}
</Statistic.Comparison.Value>
</Statistic.Comparison>
</Statistic>
$2.7M Last Year: $2.6M
$80.0K (3%) <script lang="ts">
import { Statistic } from 'stwui';
import { formatNumber } from 'stwui/utils';
const favorite = "svg-path";
</script>
<Statistic>
<Statistic.Icon slot="icon" data={chart_box} />
<Statistic.Title slot="title">Page Views</Statistic.Title>
<Statistic.Value slot="value">
{formatNumber(2660000, {
style: 'currency',
notation: 'compact',
maximumFractionDigits: 1,
minimumFractionDigits: 1
})}
</Statistic.Value>
<Statistic.Comparison slot="comparison">
<Statistic.Comparison.Value slot="value">
Last Year: {formatNumber(2580000, {
style: 'currency',
notation: 'compact',
maximumFractionDigits: 1,
minimumFractionDigits: 1
})}
</Statistic.Comparison.Value>
<Statistic.Comparison.Trend trend="up" slot="trend">
<Statistic.Comparison.Trend.Icon slot="icon" data={home} />
{formatNumber(80000, {
style: 'currency',
notation: 'compact',
maximumFractionDigits: 1,
minimumFractionDigits: 1
})} ({formatNumber(0.031, {
style: 'percent'
})})
</Statistic.Comparison.Trend>
</Statistic.Comparison>
</Statistic>
With Custom Colors
$2.7M Last Year: $2.6M
$80.0K (3%) <script lang="ts">
import { Statistic } from 'stwui';
import { formatNumber } from 'stwui/utils';
const favorite = "svg-path";
</script>
<Statistic class="bg-gradient-to-r from-cyan-500 to-blue-500">
<Statistic.Icon class="text-white" slot="icon" data={chart_box} />
<Statistic.Title class="text-white" slot="title">Page Views</Statistic.Title>
<Statistic.Value class="text-white" slot="value">
{formatNumber(2660000, {
style: 'currency',
notation: 'compact',
maximumFractionDigits: 1,
minimumFractionDigits: 1
})}
</Statistic.Value>
<Statistic.Comparison slot="comparison">
<Statistic.Comparison.Value class="text-white" slot="value">
Last Year: {formatNumber(2580000, {
style: 'currency',
notation: 'compact',
maximumFractionDigits: 1,
minimumFractionDigits: 1
})}
</Statistic.Comparison.Value>
<Statistic.Comparison.Trend
class="bg-white text-white bg-opacity-20"
showIcon={false}
slot="trend"
>
{formatNumber(80000, {
style: 'currency',
notation: 'compact',
maximumFractionDigits: 1,
minimumFractionDigits: 1
})} ({formatNumber(0.031, {
style: 'percent'
})})
</Statistic.Comparison.Trend>
</Statistic.Comparison>
</Statistic>
Statistic Slots
| title | <Statistic.Title slot="title" /> |
| icon | <Statistic.Icon slot="icon" /> |
| value | <Statistic.Value slot="value" /> |
| default | |
| comparison | <Statistic.Comparison slot="comparison" /> |
| goal | <Statistic.Goal slot="goal" /> |
Statistic.Icon Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 38px |
| width | string | 38px |
| height | string | 38px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Statistic.Comparison Slots
| value | <Statistic.Comparison.Value slot="value" /> |
| trend | <Statistic.Comparison.Trend slot="trend" /> |
Statistic.Comparison.Value Slots
Statistic.Comparison.Trend Props
| trend | 'up' | 'down' | 'neutral' | undefined | |
| showIcon | boolean | true |
Statistic.Comparison.Trend.Slots Slots
| icon | <Statistic.Comparison.Trend.Icon slot="icon" /> |
| default | |
Statistic.Comparison.Trend.Icon Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 16px |
| width | string | 16px |
| height | string | 16px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Statistic Class Identifiers
| stwui-statistic |
| stwui-statistic-title-wrapper |
| stwui-statistic-title |
| stwui-statistic-icon |
| stwui-statistic-value |
| stwui-statistic-goal |
| stwui-statistic-comparison |
| stwui-statistic-comaprison-value |
| stwui-statistic-comparison-trend |
