Chart

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

Canlı örnek, StorybookStorybook'ta aç

Çizgi ve alan

line zaman gibi sıralı bir eksendeki değişimi gösterir. Birden çok seri olduğunda her çizginin sembolü ve çizgi biçimi (düz, kesik, noktalı) farklıdır; seriler yalnızca renkle ayrışmaz. area tek serinin altını hafifçe doldurur.

Aylık değerler

Tablo olarak göster

İki serinin ocak ile haziran arasındaki değerleri.

AçıkKoyu

Kodu kopyala

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

const months = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran'];
const first = [12, 18, 15, 24, 30, 28];
const second = [8, 11, 17, 14, 19, 26];

const toPoints = (values: number[]) => values.map((y, index) => ({ x: months[index] ?? '', y }));

export default function Line() {
  return (
    <div className="w-full max-w-2xl">
      <Chart
        kind="line"
        title="Aylık değerler"
        description="İki serinin ocak ile haziran arasındaki değerleri."
        series={[
          { id: 'first', label: 'Birinci seri', data: toPoints(first) },
          { id: 'second', label: 'İkinci seri', data: toPoints(second) },
        ]}
      />
    </div>
  );
}

Çubuk ve yığılmış çubuk

bar kategorileri karşılaştırır; değer ekseni her zaman sıfırdan başlar. stacked-bar bir bütünün parçalarını gösterir. Çubuklarda renge ek olarak desen (decal) bulunur.

Aylık değerler

Tablo olarak göster

Aylık değerler

Tablo olarak göster

AçıkKoyu

Kodu kopyala

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

const months = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran'];
const first = [12, 18, 15, 24, 30, 28];
const second = [8, 11, 17, 14, 19, 26];
const third = [5, 9, 7, 12, 10, 15];

const toPoints = (values: number[]) => values.map((y, index) => ({ x: months[index] ?? '', y }));

export default function Bar() {
  return (
    <div className="grid w-full gap-3xl md:grid-cols-2">
      <Chart
        kind="bar"
        title="Aylık değerler"
        height="sm"
        series={[
          { id: 'first', label: 'Birinci seri', data: toPoints(first) },
          { id: 'second', label: 'İkinci seri', data: toPoints(second) },
        ]}
      />
      <Chart
        kind="stacked-bar"
        title="Aylık değerler"
        height="sm"
        series={[
          { id: 'first', label: 'Birinci seri', data: toPoints(first) },
          { id: 'second', label: 'İkinci seri', data: toPoints(second) },
          { id: 'third', label: 'Üçüncü seri', data: toPoints(third) },
        ]}
      />
    </div>
  );
}

Halka

donut tek bir serinin paylarını gösterir; en fazla 5 parça kullanın. İlk seri çizilir. Dilimler renk ve desenle ayrışır.

Kategorilerin payı

Tablo olarak göster

AçıkKoyu

Kodu kopyala

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

export default function Donut() {
  return (
    <div className="w-full max-w-sm">
      <Chart
        kind="donut"
        title="Kategorilerin payı"
        series={[
          {
            id: 'share',
            label: 'Kategorilerin payı',
            data: [
              { x: 'Kategori A', y: 40 },
              { x: 'Kategori B', y: 25 },
              { x: 'Kategori C', y: 20 },
              { x: 'Kategori D', y: 15 },
            ],
          },
        ]}
      />
    </div>
  );
}

Küçük eğilim çizgisi

Chart.Sparkline eksensiz, ipucusuz küçük bir çizgidir. StatCard içinde trend alanına konur. label verirseniz ekran okuyucuya adı okunur; vermezseniz süs sayılır ve gizlenir.

Etkin öğeler

3.420

artış 12 %önceki aya göre

AçıkKoyu

Kodu kopyala

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

export default function Sparkline() {
  return (
    <div className="w-full max-w-sm">
      <StatCard
        label="Etkin öğeler"
        value="3.420"
        delta={{ value: '12 %', direction: 'up' }}
        period="önceki aya göre"
        trend={<Chart.Sparkline tone="positive" data={[4, 6, 5, 9, 8, 12, 11]} label="Son altı ayın eğilimi" />}
      />
    </div>
  );
}

Veri tablosu

Her grafiğin anlamsal bir tablosu vardır. Varsayılan table="toggle" bir düğme ekler; düğme grafiğin yerine tabloyu gösterir. table="visible" ikisini birlikte gösterir.

Aylık değerler

Aylık değerler

Kategori	Birinci seri
Ocak	12
Şubat	18
Mart	15
Nisan	24
Mayıs	30
Haziran	28

AçıkKoyu

Kodu kopyala

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

const months = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran'];
const first = [12, 18, 15, 24, 30, 28];

const toPoints = (values: number[]) => values.map((y, index) => ({ x: months[index] ?? '', y }));

export default function Table() {
  return (
    <div className="w-full max-w-2xl">
      <Chart
        kind="area"
        title="Aylık değerler"
        height="sm"
        table="visible"
        series={[{ id: 'first', label: 'Birinci seri', data: toPoints(first) }]}
      />
    </div>
  );
}

Açık ve koyu mod

Grafik renklerini çalışma anında seçili markanın ve modun token’larından okur; mod ya da marka değişince yeniden çizer.

Açık

Aylık değerler

Tablo olarak göster

İki serinin ocak ile haziran arasındaki değerleri.

Koyu

Aylık değerler

Tablo olarak göster

İki serinin ocak ile haziran arasındaki değerleri.

Kodu kopyala

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

const months = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran'];
const first = [12, 18, 15, 24, 30, 28];
const second = [8, 11, 17, 14, 19, 26];

const toPoints = (values: number[]) => values.map((y, index) => ({ x: months[index] ?? '', y }));

export default function Line() {
  return (
    <div className="w-full max-w-2xl">
      <Chart
        kind="line"
        title="Aylık değerler"
        description="İki serinin ocak ile haziran arasındaki değerleri."
        series={[
          { id: 'first', label: 'Birinci seri', data: toPoints(first) },
          { id: 'second', label: 'İkinci seri', data: toPoints(second) },
        ]}
      />
    </div>
  );
}