Recharts

Recharts, React ile oluşturulmuş, yeniden tanımlanmış (redefined) bir grafik kütüphanesidir. Özellikle React uygulamaları için tasarlanmış olup, D3.js'nin güçlü veri görselleştirme yeteneklerini React'ın bileşen tabanlı ve deklaratif yapısıyla birleştirir. Bu kütüphane, geliştiricilere kolayca ve hızlıca etkileşimli, özelleştirilebilir ve duyarlı grafikler oluşturma imkanı sunar.

Temel Özellikleri:

* Bileşen Tabanlı ve Deklaratif: Her grafik elemanı (çizgi, çubuk, eksen, ipucu vb.) bir React bileşeni olarak temsil edilir. Bu sayede grafiklerin yapısını deklaratif bir şekilde tanımlayabilir ve React'ın sunduğu bileşen tekrar kullanılabilirliğini ve yönetim kolaylığını kullanabilirsiniz.
* Modüler Yapı: Sadece ihtiyacınız olan grafik ve bileşenleri içe aktararak bundle boyutunu optimize edebilirsiniz. Bu, uygulamaların daha hızlı yüklenmesine yardımcı olur.
* Duyarlılık (Responsiveness): `ResponsiveContainer` bileşeni sayesinde grafikler otomatik olarak kapsayıcılarının boyutuna uyum sağlayabilir, böylece farklı ekran boyutlarında sorunsuz bir görüntüleme deneyimi sunar.
* Özelleştirilebilirlik: Grafiklerin görünümünü ve davranışlarını geniş bir prop yelpazesi aracılığıyla veya özel React bileşenleri ekleyerek derinlemesine özelleştirebilirsiniz. Özel etiketler, ipuçları (tooltips), şekiller ve renkler kolayca tanımlanabilir.
* Hafif ve Hızlı: Minimal bağımlılıklarla tasarlanmıştır ve performansı optimize etmek için SVG tabanlı çizim kullanır.
* Erişilebilirlik: Ekran okuyucular ve diğer yardımcı teknolojilerle uyumluluğu artırmak için SVG öğelerine ARIA nitelikleri eklemeyi destekler.

Yaygın Kullanım Alanları:

Recharts, veri görselleştirme panoları, analitik platformlar, finansal raporlama araçları ve her türlü veri odaklı web uygulaması gibi senaryolarda tercih edilir. Zaman serisi verileri, kategori bazlı karşılaştırmalar, oran dağılımları ve daha fazlasını görselleştirmek için çeşitli grafik türleri (çizgi grafikleri, çubuk grafikleri, pasta grafikleri, alan grafikleri, bileşik grafikler vb.) sunar.

Nasıl Çalışır?

Recharts, React bileşen modelini kullanarak grafiğin yapısını tanımlamanıza olanak tanır ve alt katmanda D3.js'nin güçlü görselleştirme motorunu kullanarak SVG (Scalable Vector Graphics) elemanlarını çizer. Bu, hem React geliştiricileri için tanıdık bir geliştirme deneyimi sunar hem de D3'ün sunduğu yüksek performanslı ve karmaşık grafikler oluşturma kabiliyetinden faydalanır.

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  { name: 'Ocak', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Şubat', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Mart', uv: 2000, pv: 9800, amt: 2290 },
  { name: 'Nisan', uv: 2780, pv: 3908, amt: 2000 },
  { name: 'Mayıs', uv: 1890, pv: 4800, amt: 2181 },
  { name: 'Haziran', uv: 2390, pv: 3800, amt: 2500 },
  { name: 'Temmuz', uv: 3490, pv: 4300, amt: 2100 },
];

const SimpleLineChart = () => {
  return (
    <div style={{ width: '100%', height: 300 }}>
      <h2>Aylık Satış Trendi</h2>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          data={data}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} name="Önceki Yıl" />
          <Line type="monotone" dataKey="uv" stroke="#82ca9d" name="Mevcut Yıl" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};

export default SimpleLineChart;