Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Stat Component

CSS-only Tailwind CSS stat for displaying metrics. Value, label, description, and icon slots. Responsive grid layout. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

İstatistik bileşenleri temel metrikleri ve sayısal verileri açık ve düzenli bir biçimde görüntüler. Anlamsal HTML ve esnek düzenlerle oluşturulan istatistikler, önemli iş ölçümlerini ve analizlerini iletir. Frutjam istatistik sistemi birden fazla düzenlemeyi ve stili destekler; gösterge tabloları, performans raporları ve veri özetleri için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
statsTemelBir veya daha fazla istatistik öğesi için kapsayıcı
statDeğiştiriciBaşlığı, değeri ve açıklaması olan bireysel istatistik öğesi
stat-titleDeğiştiriciİstatistik değerinin üzerindeki etiket
stat-valueDeğiştiriciBüyük birincil sayısal veya metin değeri
stat-descDeğiştiriciDeğerin altındaki ek açıklama
stat-figureDeğiştiriciİstatistiğin yanında simge veya avatar
stats-horizontalDeğiştiriciİstatistik öğelerini yan yana düzenler (varsayılan)
stats-verticalDeğiştiriciİstatistik öğelerini dikey olarak yığınlar
stat-primaryRenkİstatistik değeri için birincil tema rengi
stat-secondaryRenkİstatistik değeri için ikincil tema rengi
stat-accentRenkİstatistik değeri için vurgu teması rengi
stat-neutralRenkİstatistik değeri için nötr tema rengi
stat-infoRenkİstatistik değeri için bilgi anlamsal rengi
stat-successRenkİstatistik değeri için başarı anlamsal rengi
stat-warningRenkİstatistik değeri için uyarı anlamsal rengi
stat-errorRenkİstatistik değeri için hata anlamsal rengi

Temel Kullanım

Downloads
31K
From January 1st to February 1st
1
2
3
4
5
<div class="stat place-items-center">
  <div class="stat-title">Downloads</div>
  <div class="stat-value">31K</div>
  <div class="stat-desc">From January 1st to February 1st</div>
</div>

1
2
3
4
5
<div className="stat place-items-center">
  <div className="stat-title">Downloads</div>
  <div className="stat-value">31K</div>
  <div className="stat-desc">From January 1st to February 1st</div>
</div>

Çoklu İstatistikler

Total Page Views
89,400
21% more than last month
Total Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↗︎ 90 (14%)
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="stats shadow">
  <div class="stat place-items-center">
    <div class="stat-title">Total Page Views</div>
    <div class="stat-value">89,400</div>
    <div class="stat-desc">21% more than last month</div>
  </div>

  <div class="stat place-items-center">
    <div class="stat-title">Total Users</div>
    <div class="stat-value">4,200</div>
    <div class="stat-desc">↗︎ 400 (22%)</div>
  </div>

  <div class="stat place-items-center">
    <div class="stat-title">New Registers</div>
    <div class="stat-value">1,200</div>
    <div class="stat-desc">↗︎ 90 (14%)</div>
  </div>
</div>

Simgelerle İstatistikler

Page Views
40.5K
↗︎ 21% from last month
Users
3,200
↗︎ 400 from last month
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="stats shadow">
  <div class="stat">
    <div class="stat-figure text-primary">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
    </div>
    <div class="stat-title">Page Views</div>
    <div class="stat-value text-primary">40.5K</div>
    <div class="stat-desc">↗︎ 21% from last month</div>
  </div>

  <div class="stat">
    <div class="stat-figure text-secondary">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
    </div>
    <div class="stat-title">Users</div>
    <div class="stat-value text-secondary">3,200</div>
    <div class="stat-desc">↗︎ 400 from last month</div>
  </div>
</div>

Yatay İstatistikler

Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↗︎ 90 (14%)
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="stats stats-horizontal shadow">
  <div class="stat">
    <div class="stat-title">Downloads</div>
    <div class="stat-value">31K</div>
    <div class="stat-desc">Jan 1st - Feb 1st</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Users</div>
    <div class="stat-value">4,200</div>
    <div class="stat-desc">↗︎ 400 (22%)</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Registers</div>
    <div class="stat-value">1,200</div>
    <div class="stat-desc">↗︎ 90 (14%)</div>
  </div>
</div>

Dikey İstatistikler

Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↗︎ 90 (14%)
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="stats stats-vertical shadow">
  <div class="stat">
    <div class="stat-title">Downloads</div>
    <div class="stat-value">31K</div>
    <div class="stat-desc">Jan 1st - Feb 1st</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Users</div>
    <div class="stat-value">4,200</div>
    <div class="stat-desc">↗︎ 400 (22%)</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Registers</div>
    <div class="stat-value">1,200</div>
    <div class="stat-desc">↗︎ 90 (14%)</div>
  </div>
</div>

Renk Çeşitleri

Primary
12.4K
↗︎ 8% this week
Secondary
3,800
↗︎ 12% this week
Accent
960
↗︎ 5% this week
Neutral
540
No change
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="stats shadow">
  <div class="stat stat-primary">
    <div class="stat-title">Primary</div>
    <div class="stat-value">12.4K</div>
    <div class="stat-desc">↗︎ 8% this week</div>
  </div>

  <div class="stat stat-secondary">
    <div class="stat-title">Secondary</div>
    <div class="stat-value">3,800</div>
    <div class="stat-desc">↗︎ 12% this week</div>
  </div>

  <div class="stat stat-accent">
    <div class="stat-title">Accent</div>
    <div class="stat-value">960</div>
    <div class="stat-desc">↗︎ 5% this week</div>
  </div>

  <div class="stat stat-neutral">
    <div class="stat-title">Neutral</div>
    <div class="stat-value">540</div>
    <div class="stat-desc">No change</div>
  </div>
</div>

Anlamsal Renk Çeşitleri

Info
1,024
Active sessions
Success
98.3%
Uptime this month
Warning
42
Pending reviews
Error
7
Failed jobs today
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="stats shadow">
  <div class="stat stat-info">
    <div class="stat-title">Info</div>
    <div class="stat-value">1,024</div>
    <div class="stat-desc">Active sessions</div>
  </div>

  <div class="stat stat-success">
    <div class="stat-title">Success</div>
    <div class="stat-value">98.3%</div>
    <div class="stat-desc">Uptime this month</div>
  </div>

  <div class="stat stat-warning">
    <div class="stat-title">Warning</div>
    <div class="stat-value">42</div>
    <div class="stat-desc">Pending reviews</div>
  </div>

  <div class="stat stat-error">
    <div class="stat-title">Error</div>
    <div class="stat-value">7</div>
    <div class="stat-desc">Failed jobs today</div>
  </div>
</div>