Mishka
Chelekom

Stat

v0.0.10

v0.0.10StableComponentStatelessApache-2.0
Installation mix mishka.ui.gen.component stat
Source View Source

Overview of the Phoenix LiveView Stat Component

The Mishka Chelekom Stat component renders a metric block with a title, value, description, optional figure (icon/image), trend indicator, and action area. Pair it with stat_group to display multiple stats with dividers and a chosen orientation.

Basic usage

Basic usage

Total revenue
$45,231.89
Last 30 days
heex
<.stat title="Total revenue" value="$45,231.89" description="Last 30 days" />

Figure slot

Pass an icon or any HEEx into the :figure slot. Use figure_position (start, end, top) to control placement.

Figure slot

Total likes
25.6K
From all platforms
Comments
1.2K
This week
Files uploaded
89
Today
heex
<.stat title="Total likes" value="25.6K" description="From all platforms" color="primary">
  <:figure>
    <.icon name="hero-heart" />
  </:figure>
</.stat>

Trend indicator

Set trend="up", "down", or "neutral" to color the description with success / danger / natural tokens and add a directional arrow.

Trend indicator

MRR
$12,400
20.1% from last month
Churn
3.2%
0.4% from last month
ARPU
$84
Flat vs last month
heex
<.stat title="MRR" value="$12,400" description="20.1% from last month" trend="up" />
<.stat title="Churn" value="3.2%" description="0.4% from last month" trend="down" />
<.stat title="ARPU" value="$84" description="Flat vs last month" trend="neutral" />

Actions slot

Actions slot

Account balance
$89,400
heex
<.stat title="Account balance" value="$89,400">
  <:actions>
    <.button color="success" size="small">Add funds</.button>
  </:actions>
</.stat>

Variants & colors

Variants & colors

Visits
42K
This week
Sales
$2.3K
Up 12%
Signups
1,204
Today
Revenue
$98K
MTD
Latency
248ms
p95
heex
<.stat variant="default" color="primary" title="Visits" value="42K" description="This week" />
<.stat variant="shadow" color="success" title="Sales" value="$2.3K" description="Up 12%" />
<.stat variant="bordered" color="info" title="Signups" value="1,204" description="Today" />
<.stat variant="gradient" color="misc" title="Revenue" value="$98K" description="MTD" />
<.stat variant="base" title="Latency" value="248ms" description="p95" />

Sizes

Sizes

Size extra_small
42
example
Size small
42
example
Size medium
42
example
Size large
42
example
Size extra_large
42
example
heex
<.stat size="extra_small" title="XS" value="42" />
<.stat size="small" title="SM" value="42" />
<.stat size="medium" title="MD" value="42" />
<.stat size="large" title="LG" value="42" />
<.stat size="extra_large" title="XL" value="42" />

Stat group

Wrap multiple <.stat> blocks with <.stat_group> to share dividers and a chosen orientation.

Stat group

Downloads
31K
Last 30 days
New users
4,200
+12% MoM
New posts
1,200
-3% MoM
heex
<.stat_group>
  <.stat title="Downloads" value="31K" description="Last 30 days" />
  <.stat title="New users" value="4,200" description="+12% MoM" trend="up" />
  <.stat title="New posts" value="1,200" description="-3% MoM" trend="down" />
</.stat_group>

Orientation

orientation="responsive" stacks vertically on mobile and switches to horizontal at the lg breakpoint.

Orientation

Visits
42K
Sales
$2.3K
Signups
1,204
Visits
42K
Sales
$2.3K
Signups
1,204
Total
89.4K
Avg time
4m 32s
Bounce
38%
heex
<.stat_group orientation="responsive" variant="bordered" color="primary">
  <.stat title="Total" value="89.4K" />
  <.stat title="Avg time" value="4m 32s" />
  <.stat title="Bounce" value="38%" />
</.stat_group>

Dashboard recipe

Dashboard recipe

Revenue
$89,400
20.1% from last month
Subscriptions
2,340
+180 from last month
Active now
573
+201 since last hour
heex
<.stat_group variant="base" orientation="responsive">
  <.stat title="Revenue" value="$89,400" description="20.1% from last month" trend="up" color="success">
    <:figure><.icon name="hero-currency-dollar" /></:figure>
  </.stat>
  <.stat title="Subscriptions" value="2,340" description="180 from last month" trend="up" color="primary">
    <:figure><.icon name="hero-user-group" /></:figure>
  </.stat>
  <.stat title="Active now" value="573" description="201 since last hour" trend="up" color="info">
    <:figure><.icon name="hero-bolt" /></:figure>
  </.stat>
</.stat_group>