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

İstatistik Bileşeni

Son güncelleme:

Metrikleri görüntülemek için yalnızca CSS'ye özgü Tailwind CSS istatistiği. Değer, etiket, açıklama ve simge yuvaları. Duyarlı ızgara düzeni. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

İ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

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

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

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

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

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

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

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>

Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?

Cherry MCP, AI editörünüze talep üzerine tam İstatistik sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.

Cherry MCP'yi deneyin