Bileşenler

StatCard

Bir ölçünün değerini, önceki dönemle farkını ve isteğe bağlı eğilimini tek bir kutuda gösterir.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

StatCard; etiket, değer, değişim ve dönemden oluşur. Değeri ve değişimi uygulamanız Intl ile biçimlendirip verir; StatCard sayıyı biçimlendirmez.

Toplam öğe

1.280

8 %geçen aya göre

import { StatCard } from '@bigbang/ui';

export default function Default() {
  return <StatCard label="Toplam öğe" value="1.280" delta={{ value: '8 %', direction: 'up' }} period="geçen aya göre" className="w-full max-w-72" />;
}

Değişim yönü ve anlamı

direction oku ve okunan kelimeyi belirler (up, down, flat). sentiment rengi belirler. Varsayılan anlam yöndendir: yukarı olumlu, aşağı olumsuz, yatay nötr. Azalmasının iyi olduğu bir ölçüde direction="down" ile sentiment="positive" birlikte kullanın.

Artış

1.280

8 %geçen aya göre

Azalış

940

3 %geçen aya göre

Değişim yok

312

0 %geçen aya göre

Azalış, olumlu

5 %geçen aya göre

import { StatCard } from '@bigbang/ui';

export default function Deltas() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-2">
      <StatCard label="Artış" value="1.280" delta={{ value: '8 %', direction: 'up' }} period="geçen aya göre" />
      <StatCard label="Azalış" value="940" delta={{ value: '3 %', direction: 'down' }} period="geçen aya göre" />
      <StatCard label="Değişim yok" value="312" delta={{ value: '0 %', direction: 'flat' }} period="geçen aya göre" />
      <StatCard label="Azalış, olumlu" value="12" delta={{ value: '5 %', direction: 'down', sentiment: 'positive' }} period="geçen aya göre" />
    </div>
  );
}

Eğilim

trend bir küçük grafik alır. Etiketsiz içerik süs sayılır ve ekran okuyucudan gizlenir; okunmasını istiyorsanız içeriğe role="img" ve aria-label verin. info değerin nasıl sayıldığını anlatır.

Etkin kullanıcı

3.420

12 %geçen aya göre

Son 30 günün toplamı.

Tamamlanma oranı

76 %

2 %geçen aya göre

import { StatCard } from '@bigbang/ui';

function Sparkline() {
  return (
    <svg width="96" height="32" viewBox="0 0 96 32" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="2,26 16,20 30,23 44,12 58,16 72,8 94,4" />
    </svg>
  );
}

export default function WithTrend() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-2">
      <StatCard
        label="Etkin kullanıcı"
        value="3.420"
        delta={{ value: '12 %', direction: 'up' }}
        period="geçen aya göre"
        trend={<Sparkline />}
        info="Son 30 günün toplamı."
      />
      <StatCard
        label="Tamamlanma oranı"
        value="76 %"
        delta={{ value: '2 %', direction: 'down' }}
        period="geçen aya göre"
        trend={
          <span role="img" aria-label="Son yedi günün eğilimi">
            <Sparkline />
          </span>
        }
      />
    </div>
  );
}

Yükleniyor, veri yok ve gizli

Yüklenirken değer ve değişim yer tutucuyla gösterilir, kök aria-busy olur. Değer null, undefined ya da boş metinse çizgi (—) ve gerekçe görünür. hidden gizlilik modudur: değer •••• olarak gösterilir.

Toplam öğe

Etkin kullanıcı

geçen aya göre

Tamamlanma oranı

8 %geçen aya göre

import { StatCard } from '@bigbang/ui';

export default function States() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-3">
      <StatCard label="Toplam öğe" value="1.280" delta={{ value: '8 %', direction: 'up' }} loading />
      <StatCard label="Etkin kullanıcı" value={null} period="geçen aya göre" />
      <StatCard label="Tamamlanma oranı" value="1.280" delta={{ value: '8 %', direction: 'up' }} period="geçen aya göre" hidden />
    </div>
  );
}

Izgarada

Dört kutu yan yana durabilir; kutular aynı varyantı kullanır.

Toplam öğe

1.280

8 %geçen aya göre

Etkin kullanıcı

3.420

3 %geçen aya göre

Tamamlanma oranı

76 %

0 %geçen aya göre

Bekleyen öğe

5 %geçen aya göre

import { StatCard } from '@bigbang/ui';

export default function Grid() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-2 lg:grid-cols-4">
      <StatCard label="Toplam öğe" value="1.280" delta={{ value: '8 %', direction: 'up' }} period="geçen aya göre" />
      <StatCard label="Etkin kullanıcı" value="3.420" delta={{ value: '3 %', direction: 'down' }} period="geçen aya göre" />
      <StatCard label="Tamamlanma oranı" value="76 %" delta={{ value: '0 %', direction: 'flat' }} period="geçen aya göre" />
      <StatCard label="Bekleyen öğe" value="18" delta={{ value: '5 %', direction: 'down', sentiment: 'positive' }} period="geçen aya göre" />
    </div>
  );
}

Açık ve koyu mod

StatCard tüm renklerini yüzey, metin ve veri token’larından alır.

Artış

1.280

8 %geçen aya göre

Azalış

940

3 %geçen aya göre

Değişim yok

312

0 %geçen aya göre

Azalış, olumlu

5 %geçen aya göre

Artış

1.280

8 %geçen aya göre

Azalış

940

3 %geçen aya göre

Değişim yok

312

0 %geçen aya göre

Azalış, olumlu

5 %geçen aya göre

import { StatCard } from '@bigbang/ui';

export default function Deltas() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-2">
      <StatCard label="Artış" value="1.280" delta={{ value: '8 %', direction: 'up' }} period="geçen aya göre" />
      <StatCard label="Azalış" value="940" delta={{ value: '3 %', direction: 'down' }} period="geçen aya göre" />
      <StatCard label="Değişim yok" value="312" delta={{ value: '0 %', direction: 'flat' }} period="geçen aya göre" />
      <StatCard label="Azalış, olumlu" value="12" delta={{ value: '5 %', direction: 'down', sentiment: 'positive' }} period="geçen aya göre" />
    </div>
  );
}