JSON to Chart

Modern ve kullanıcı dostu bir React uygulaması ile JSON verilerinizi dinamik grafiklere dönüştürün. Sürükle-bırak özelliği, gerçek zamanlı önizleme ve çoklu grafik türü desteği ile verilerinizi görselleştirin.

🚀 Özellikler

• 🎯 Kolay JSON Girişi: Metin alanına yazın veya dosya sürükle-bırak
• 📊 Çoklu Grafik Türleri: Bar, Line, Pie, Area, Scatter Plot
• 🎨 Renk Özelleştirme: Her seri için özel renk seçimi
• ⚡ Gerçek Zamanlı Önizleme: Değişiklikler anında yansır
• 💾 Grafik İndirme: PNG formatında yüksek kaliteli indirme
• 📱 Duyarlı Tasarım: Mobil ve masaüstü uyumlu
• 🔧 Dinamik Konfigürasyon: X/Y ekseni seçimi ve çoklu veri serisi

🛠️ Teknolojiler

• Next.js 15 - React framework
• TypeScript - Tip güvenliği
• Tailwind CSS - Modern styling
• Recharts - Grafik kütüphanesi
• React Dropzone - Dosya yükleme
• Lucide React - İkonlar
• html2canvas - Grafik indirme

📦 Kurulum

1. Depoyu klonlayın:

   git clone <repo-url>
   cd json-to-chart

2. Bağımlılıkları yükleyin:

   npm install

3. Geliştirme sunucusunu başlatın:

   npm run dev

4. Tarayıcıda açın: http://localhost:3000

📝 Kullanım

1. JSON Verisi Girme

Metin Alanı ile:

[
  {"month": "Ocak", "sales": 1200, "profit": 400},
  {"month": "Şubat", "sales": 1900, "profit": 600},
  {"month": "Mart", "sales": 1500, "profit": 500}
]

Dosya Sürükle-Bırak ile:

• JSON dosyasını sürükleyip bırakma alanına bırakın
• .json ve .txt dosyaları desteklenir

2. Grafik Konfigürasyonu

• Grafik Türü: Bar, Line, Pie, Area, Scatter seçin
• X Ekseni: Kategori alanını seçin (örn: "month")
• Y Ekseni: Sayısal veri alanlarını seçin (örn: "sales", "profit")
• Renkler: Her seri için özel renk seçimi
• Başlık: Grafik başlığını özelleştirin

3. Grafik İndirme

• Sağ üstteki "İndir" butonuna tıklayın
• Grafik PNG formatında indirilir

📊 Desteklenen Veri Formatları

JSON verileriniz şu formatta olmalıdır:

[
  {
    "category_field": "string_value",
    "numeric_field1": 123,
    "numeric_field2": 456,
    "optional_field": "any_value"
  }
]

Örnek veri tipleri:

• String alanlar: X ekseni için kullanılır
• Numeric alanlar: Y ekseni serileri için kullanılır
• Boolean/null alanlar: Desteklenir ama grafik için kullanılmaz

🎨 Grafik Türleri

Bar Chart

• Kategorik verilerin karşılaştırılması
• Çoklu seri desteği
• Renk özelleştirme

Line Chart

• Zaman serisi verileri
• Trend analizi
• Çoklu hat desteği

Pie Chart

• Yüzdesel dağılım
• Tek seri kullanımı
• Otomatik etiketleme

Area Chart

• Kümülatif veri görünümü
• Çoklu alan desteği
• Dolgulu grafik

Scatter Plot

• İki değişken ilişkisi
• Korelasyon analizi
• Nokta bazlı görünüm

🎯 Proje Yapısı

src/
├── app/
│   ├── page.tsx          # Ana sayfa
│   ├── layout.tsx        # Layout wrapper
│   └── globals.css       # Global stiller
├── components/
│   ├── JsonInput.tsx     # JSON giriş komponenti
│   ├── ChartConfigurator.tsx # Grafik ayarları
│   └── ChartDisplay.tsx  # Grafik görüntüleme
└── types/
    └── index.ts          # TypeScript tip tanımları

🚦 Geliştirme

Yeni Grafik Türü Ekleme

1. ChartConfig type'ına yeni türü ekleyin
2. ChartConfigurator.tsx'da seçenek olarak ekleyin
3. ChartDisplay.tsx'da render fonksiyonu yazın

Yeni Özellik Ekleme

1. İlgili komponenti güncelleyin
2. Tip tanımlarını güncelleyin
3. State yönetimini ayarlayın

📱 Responsive Tasarım

• Desktop: 3 sütunlu layout (JSON - Config - Chart)
• Tablet: Dikey stack layout
• Mobile: Optimize edilmiş tek sütun

🔧 Yapılandırma

Ortam Değişkenleri

Şu anda özel ortam değişkeni gerektirmez.

Build Konfigürasyonu

Next.js varsayılan konfigürasyonu kullanır.

🤝 Katkı Sağlama

1. Fork edin
2. Feature branch oluşturun (git checkout -b feature/amazing-feature)
3. Commit edin (git commit -m 'Add amazing feature')
4. Push edin (git push origin feature/amazing-feature)
5. Pull Request açın

📄 Lisans

Bu proje MIT lisansı altında lisanslanmıştır.

🙏 Teşekkürler

• Recharts - Güçlü grafik kütüphanesi
• Tailwind CSS - Utility-first CSS framework
• Next.js - React production framework