Chart

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Chart.tsx

Storybook

Chart · Playground

Chart, @bigbang/ui paketindedir ve ECharts 6’yı kullanır (paketle birlikte gelir). Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

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

<Chart
  kind="line"
  title="Aylık değerler"
  series={[
    {
      id: 'first',
      label: 'Birinci seri',
      data: [
        { x: 'Ocak', y: 12 },
        { x: 'Şubat', y: 18 },
      ],
    },
  ]}
/>;

Özellikler

kind

Açıklama

Verinin nasıl çizileceği. line ve area sıralı bir eksendeki değişimi, bar kategorilerin karşılaştırmasını, stacked-bar bir bütünün parçalarını, donut tek serinin paylarını gösterir (en fazla 5 parça).

Tür

ChartKind

Varsayılan

'line'

titleZorunlu

Açıklama

Grafiği adlandırır. Görünen başlık (figcaption), tablo başlığı ve erişilebilir adın başıdır.

Tür

string

titleHidden

Açıklama

Başlığı görsel olarak gizler, ekran okuyucu için bırakır. Başlığı sayfada zaten olan grafikler için.

Tür

boolean

Varsayılan

false

description

Açıklama

Grafiğin ne gösterdiğini anlatan bir iki cümle. aria-describedby ile bağlanır.

Tür

string

seriesZorunlu

Açıklama

Veri. Her serinin kararlı bir id'si, bir label'ı ve { x, y } noktaları vardır. donut yalnızca ilk seriyi çizer.

Tür

ChartSeries[]

formatValue

Açıklama

Eksenlerde, ipuçlarında, özette ve tabloda değerleri biçimlendirir. Varsayılan: Provider dilinde Intl.NumberFormat.

Tür

(value: number) => string

formatCategory

Açıklama

Ay ya da tarih gibi kategori etiketlerini biçimlendirir. Varsayılan: değerin metni.

Tür

(category: string | number) => string

height

Açıklama

Çizim yüksekliği: 160, 240 ya da 320 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

legend

Açıklama

Göstergeyi açar. Birden çok seri ve halka grafikte varsayılan olarak açıktır.

Tür

boolean

loading

Açıklama

Grafik yerine yer tutucu blok gösterir ve şekli aria-busy yapar.

Tür

boolean

Varsayılan

false

emptyLabel

Açıklama

Veri yokken gösterilen metin. Varsayılan: "Bu dönem için veri yok" ya da "No data for this period".

Tür

string

hideValues

Açıklama

Gizlilik modu: eksen değerleri kalkar; ipuçları, özet ve tablo •••• gösterir.

Tür

boolean

Varsayılan

false

table

Açıklama

Çizimi kullanamayanlar için veri tablosu. toggle grafiği tabloyla değiştiren bir düğme ekler, visible ikisini birlikte gösterir, hidden tabloyu çıkarır (veriyi başka yolla sunun).

Tür

'toggle' | 'visible' | 'hidden'

Varsayılan

'toggle'

className

Açıklama

Yalnızca yerleşim için: dış boşluk, genişlik, ızgara yerleşimi.

Tür

string

Parçalar ve veri

Parça	Öğe	Özellikler
Chart.Sparkline	<div>	data (number[]), label, tone (neutral, positive, negative, brand), className. Yükseklik chart-sparkline-height token’ıdır.

Seri biçimi: { id: string; label: string; data: { x: string | number; y: number }[] }. id kararlı olmalıdır: aynı id ile gelen yeni veri yerinde güncellenir ve giriş hareketi yeniden oynamaz.

Veri öznitelikleri

• data-component="chart", data-kind: şekilde. Küçük eğilim çizgisi data-component="sparkline" ve data-tone taşır.
• data-part: plot, table, empty.

Biçimlendirme

formatValue verilmezse sayılar Provider diliyle Intl.NumberFormat ile biçimlenir (Türkçede 1.234,5). Para birimi, yüzde ya da birim için kendi biçimlendiricinizi verin.

<Chart
  title="Aylık değerler"
  series={series}
  formatValue={(value) => new Intl.NumberFormat('tr-TR', { style: 'percent' }).format(value / 100)}
  formatCategory={(month) => String(month).slice(0, 3)}
/>

İçerik güvenlik politikası (CSP)

Grafikler SVG ile çizilir; ECharts SVG öğelerine satır içi style öznitelikleri yazar. Bu yüzden grafik kullanan sayfalarda style-src-attr 'unsafe-inline' gerekir. unsafe-eval gerekmez, ağ isteği yapılmaz ve yazı tipi ya da görsel indirilmez.

Chart yalnızca şu ECharts modüllerini içe aktarır; paketleyici gerisini ayıklar:

• echarts/core
• echarts/charts: LineChart, BarChart, PieChart
• echarts/components: GridComponent, TooltipComponent, LegendComponent, AriaComponent, DatasetComponent
• echarts/renderers: SVGRenderer

Tüm echarts paketini içe aktarmayın.

Sunucu tarafı çizim

Sunucuda şekil, başlık, özet ve tablo çizilir; ECharts yalnızca tarayıcıda, bileşen bağlandıktan sonra başlar. Renkler çalışma anında okunur; marka ya da mod (data-theme, data-brand) değişince grafik yeniden çizilir.