SolidJS ve ApexCharts: Neden Birlikte Harika?

Veri görselleştirme, modern web uygulamalarının vazgeçilmez bir parçasıdır. Kullanıcıların karmaşık veri setlerini hızlı ve anlaşılır bir şekilde yorumlamasını sağlayan grafikler, bu sürecin merkezindedir. SolidJS gibi reaktif ve performans odaklı bir JavaScript kütüphanesi ile ApexCharts gibi zengin özelliklere sahip bir grafik kütüphanesini birleştirmek, hem hızlı hem de etkileşimli veri görselleştirmeleri oluşturmak için mükemmel bir kombinasyon sunar.

Bu rehberde, SolidJS uygulamalarınıza ApexCharts’ı nasıl entegre edeceğinizi adım adım öğreneceksiniz. Kendi SolidJS bileşeninizi oluşturarak farklı grafik türlerini nasıl kullanacağınızı, verileri nasıl dinamik olarak güncelleyeceğinizi ve uygulamanızın performansını nasıl optimize edeceğinizi detaylı kod örnekleriyle keşfedeceğiz.

SolidJS ve ApexCharts: Neden Birlikte Harika?

SolidJS, React, Vue veya Angular gibi diğer popüler kütüphanelere benzer bir sözdizimi sunsa da, çalışma prensibi açısından önemli farklılıklar barındırır. Derleme zamanında DOM güncellemelerini optimize ederek son derece hızlı ve verimli uygulamalar geliştirmeye olanak tanır. Reaktif primitifleri (createSignal, createEffect vb.) sayesinde, durum değişiklikleri sadece ilgili DOM parçalarını günceller, bu da gereksiz yeniden renderlamaların önüne geçer.

ApexCharts ise, modern ve etkileşimli grafikler oluşturmak için tasarlanmış açık kaynaklı bir JavaScript grafik kütüphanesidir. Çizgi, çubuk, pasta, alan, dağılım ve daha birçok grafik türünü destekler. Kullanımı kolay API’si, esnek özelleştirme seçenekleri ve duyarlı yapısı sayesinde her türlü veri görselleştirme ihtiyacına cevap verebilir. Özellikle animasyonları ve etkileşimli araç ipuçları (tooltips) ile kullanıcı deneyimini zenginleştirir.

SolidJS’in reaktif doğası ve ApexCharts’ın güçlü görselleştirme yetenekleri bir araya geldiğinde, ortaya çıkan sinerji oldukça etkileyicidir. SolidJS’in hassas reaktivite sistemi sayesinde, grafik verilerinizdeki veya seçeneklerinizdeki herhangi bir değişiklik ApexCharts tarafından anında ve verimli bir şekilde güncellenebilir. Bu, özellikle gerçek zamanlı veri akışları veya sık veri güncellemeleri gerektiren panolar gibi uygulamalar için kritik öneme sahiptir.

Proje Kurulumu ve Gerekli Bağımlılıklar

SolidJS projemizi oluşturarak ve ApexCharts kütüphanesini kurarak başlayacağız. Bu adımlar oldukça basittir ve kısa sürede bir geliştirme ortamı kurmanızı sağlar.

SolidJS Projesi Oluşturma

Öncelikle SolidJS projemizi oluşturmak için SolidJS’in resmi CLI aracını kullanacağız. Terminalinizde aşağıdaki komutu çalıştırın:

npm create solid-app my-solid-charts --template javascript

Bu komut, my-solid-charts adında yeni bir SolidJS projesi oluşturacak ve JavaScript şablonunu kullanacaktır. TypeScript kullanmak isterseniz --template typescript olarak değiştirebilirsiniz. Proje oluştuktan sonra, proje dizinine girin:

cd my-solid-charts

ApexCharts Bağımlılığını Kurma

Şimdi ApexCharts kütüphanesini projemize eklememiz gerekiyor. Aşağıdaki komutu çalıştırarak ApexCharts’ı kurun:

npm install apexcharts

Bu kurulumla birlikte, ApexCharts’ın tüm işlevselliği projenizde kullanılabilir hale gelecektir. ApexCharts’ın kendi CSS stilleri genellikle otomatik olarak yüklenir, ancak özel temalar veya daha derin özelleştirmeler için ApexCharts’ın tema dokümantasyonuna bakabilirsiniz.

SolidJS İçin Özel Bir ApexChart Bileşeni Oluşturma

ApexCharts’ı SolidJS ile kullanmanın en etkili yolu, ApexCharts örneğini yöneten ve SolidJS’in reaktivite sistemine entegre olan özel bir bileşen oluşturmaktır. Bu bileşen, grafik seçeneklerini ve verilerini prop olarak alacak ve SolidJS’in yaşam döngüsü kancalarını (onMount, createEffect) kullanarak grafiği oluşturacak ve güncelleyecektir.

src/components/ dizini altında ApexChart.jsx adında yeni bir dosya oluşturalım ve içeriğini aşağıdaki gibi düzenleyelim:

// src/components/ApexChart.jsx
import { onMount, createEffect, onCleanup } from 'solid-js';
import ApexCharts from 'apexcharts';

function ApexChart(props) {
  let chartRef; // Grafiğin render edileceği DOM elemanına referans
  let chartInstance; // ApexCharts örneği

  // Bileşen ilk kez DOM'a bağlandığında çalışır
  onMount(() => {
    // ApexCharts örneğini oluştur
    chartInstance = new ApexCharts(chartRef, {
      ...props.options,
      series: props.series,
    });
    chartInstance.render();
  });

  // Props'lar (options veya series) değiştiğinde çalışır
  createEffect(() => {
    if (chartInstance) {
      // Grafiği yeni seçenekler ve verilerle güncelle
      chartInstance.updateOptions(props.options);
      chartInstance.updateSeries(props.series);
    }
  });

  // Bileşen DOM'dan kaldırıldığında çalışır
  onCleanup(() => {
    if (chartInstance) {
      chartInstance.destroy(); // Bellek sızıntılarını önlemek için grafiği yok et
    }
  });

  // Grafiğin render edileceği div elemanı
  return 
;
}

export default ApexChart;

Bileşenin Açıklaması:

• chartRef: Bu değişken, ApexCharts’ın grafiği çizeceği HTML div elemanına bir referans tutar. SolidJS’in ref özelliği ile bu elemana erişiriz.
• chartInstance: Bu değişken, oluşturulan ApexCharts örneğini tutar. Bu sayede grafiği daha sonra güncelleyebilir veya yok edebiliriz.
• onMount(() => { ... }): Bu SolidJS yaşam döngüsü kancası, bileşen DOM’a ilk kez bağlandığında çalışır. Burada, new ApexCharts() kullanarak grafiğin ilk örneğini oluşturur ve chartInstance.render() ile ekrana çizeriz. İlk seçenekler ve seri, props üzerinden alınır.
• createEffect(() => { ... }): Bu kanca, props.options veya props.series gibi bağımlılıkları değiştiğinde yeniden çalışır. SolidJS’in reaktivite sistemi sayesinde, bu prop’lar değiştiğinde createEffect otomatik olarak tetiklenir. İçeride, chartInstance.updateOptions() ve chartInstance.updateSeries() metotlarını kullanarak mevcut grafiği yeni verilerle güncelleriz. Bu, grafiğin yeniden çizilmeden verimli bir şekilde güncellenmesini sağlar.
• onCleanup(() => { ... }): Bu kanca, bileşen DOM’dan kaldırıldığında (örneğin, bir sayfa değişikliğinde) çalışır. chartInstance.destroy() metodunu çağırarak ApexCharts örneğini yok ederiz. Bu, bellek sızıntılarını önlemek ve kaynakları serbest bırakmak için önemli bir adımdır.

Bu özel bileşen sayesinde, ApexCharts’ın tüm gücünü SolidJS’in reaktif ve performanslı yapısıyla sorunsuz bir şekilde kullanabiliriz.

Farklı Grafik Türlerini Kullanma ve Veri Güncelleme

Artık özel ApexChart bileşenimiz hazır olduğuna göre, onu App.jsx dosyamızda farklı grafik türleriyle nasıl kullanacağımızı ve verileri nasıl dinamik olarak güncelleyeceğimizi görelim.

src/App.jsx dosyanızı aşağıdaki gibi güncelleyelim:

// src/App.jsx
import { createSignal } from 'solid-js';
import ApexChart from './components/ApexChart';
import './App.css'; // Global stilleriniz için

function App() {
  // Çubuk grafik için sinyal
  const [barChartSeries, setBarChartSeries] = createSignal([
    {
      name: 'Satışlar',
      data: [30, 40, 45, 50, 49, 60, 70, 91, 125],
    },
  ]);

  const barChartOptions = {
    chart: {
      type: 'bar',
      height: 350,
      toolbar: {
        show: false,
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '55%',
        endingShape: 'rounded',
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 2,
      colors: ['transparent'],
    },
    xaxis: {
      categories: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl'],
    },
    yaxis: {
      title: {
        text: 'Adet',
      },
    },
    fill: {
      opacity: 1,
    },
    tooltip: {
      y: {
        formatter: function (val) {
          return val + ' Adet';
        },
      },
    },
    title: {
      text: 'Aylık Satış Performansı',
      align: 'left',
    },
  };

  // Pasta grafik için sinyal
  const [pieChartSeries, setPieChartSeries] = createSignal([44, 55, 13, 43, 22]);
  const pieChartOptions = {
    chart: {
      type: 'pie',
      height: 350,
    },
    labels: ['Apple', 'Mango', 'Orange', 'Watermelon', 'Banana'],
    responsive: [
      {
        breakpoint: 480,
        options: {
          chart: {
            width: 200,
          },
          legend: {
            position: 'bottom',
          },
        },
      },
    ],
    title: {
      text: 'Meyve Dağılımı',
      align: 'left',
    },
  };

  // Dinamik veri güncelleme fonksiyonu
  const updateBarChartData = () => {
    setBarChartSeries([
      {
        name: 'Satışlar',
        data: barChartSeries()[0].data.map((value) => value + Math.floor(Math.random() * 20) - 10),
      },
    ]);
  };

  const updatePieChartData = () => {
    setPieChartSeries(pieChartSeries().map((value) => value + Math.floor(Math.random() * 10) - 5));
  };

  return (
    

      
SolidJS ve ApexCharts Entegrasyonu

      

        
Çubuk Grafik Örneği
        
        
          Çubuk Verilerini Güncelle
        
      

      

        
Pasta Grafik Örneği
        
        
          Pasta Verilerini Güncelle
        
      
    
  );
}

export default App;

Bu kodda:

• createSignal kullanılarak her grafik türü için ayrı ayrı veri (series) ve seçenekler (options) tanımlanmıştır.
• ApexChart bileşeni, options ve series prop’larını alarak kullanılır. SolidJS’in reaktif yapısı sayesinde, barChartSeries() veya pieChartSeries() sinyallerinin değeri her değiştiğinde, ApexChart bileşeni içindeki createEffect kancası tetiklenecek ve grafik otomatik olarak güncellenecektir.
• updateBarChartData ve updatePieChartData fonksiyonları, rastgele değerler ekleyerek grafik verilerini dinamik olarak günceller. Bu fonksiyonlar bir butona tıklanarak çağrılır ve grafiklerin anında güncellendiğini gösterir.
• ApexCharts’ın sunduğu geniş seçenek yelpazesini kullanarak (chart.type, xaxis, yaxis, plotOptions, dataLabels, title vb.) grafiklerinizi tamamen özelleştirebilirsiniz. Daha fazla seçenek için ApexCharts dokümantasyonunu inceleyebilirsiniz.

Uygulamanızı başlatmak için terminalinizde npm run dev komutunu çalıştırın. Tarayıcınızda açılan sayfada çubuk ve pasta grafiklerinizi görecek ve “Verileri Güncelle” butonlarına tıklayarak grafiklerin dinamik olarak nasıl değiştiğini gözlemleyebileceksiniz.

Sonuç ve Sıkça Sorulan Sorular (SSS)

Bu rehberde, SolidJS uygulamalarınıza ApexCharts’ı nasıl entegre edeceğinizi, özel bir SolidJS bileşeni oluşturarak farklı grafik türlerini nasıl kullanacağınızı ve verileri dinamik olarak nasıl güncelleyeceğinizi öğrendiniz. SolidJS’in performans odaklı reaktif yapısı ile ApexCharts’ın zengin görselleştirme yeteneklerini birleştirmek, modern ve etkileşimli veri görselleştirme çözümleri geliştirmek için güçlü bir yol sunar.

Kendi ApexChart bileşeninizi oluşturarak, SolidJS’in onMount, createEffect ve onCleanup gibi yaşam döngüsü kancalarını etkin bir şekilde kullandık. Bu yaklaşım, gereksiz yeniden renderlamaları önlerken, grafiklerin prop değişikliklerine verimli bir şekilde tepki vermesini sağlar. Uygulamanız büyüdükçe veya daha karmaşık grafikler ekledikçe, bu yapı size sağlam bir temel sağlayacaktır.

Sıkça Sorulan Sorular (SSS)

1. ApexCharts’ın SolidJS ile kullanımı için özel bir SolidJS kütüphanesi var mı?

Hayır, ApexCharts’ın SolidJS için resmi olarak yayınlanmış özel bir sarıcı (wrapper) kütüphanesi bulunmamaktadır. Ancak yukarıda gösterdiğimiz gibi, ApexCharts’ın JavaScript kütüphanesini doğrudan SolidJS’in reaktif primitifleri (onMount, createEffect) ile sararak kendi özel bileşeninizi kolayca oluşturabilirsiniz. Bu yaklaşım oldukça yaygın ve etkilidir.

2. Grafik boyutunu nasıl ayarlarım?

Grafiğin boyutunu ApexCharts seçenekleri içinde chart.height ve chart.width özelliklerini kullanarak ayarlayabilirsiniz. Örneğin: chart: { height: 350, width: '100%' }. Ayrıca, grafiği çevreleyen div elemanına CSS ile de boyut verebilirsiniz. ApexCharts genellikle duyarlıdır ve kapsayıcısının boyutlarına göre kendini ayarlar.

3. Verilerimi dinamik olarak nasıl güncellerim?

Verilerinizi dinamik olarak güncellemek için SolidJS’in createSignal mekanizmasını kullanın. Grafik verilerini tutan sinyali güncellediğinizde (örneğin setBarChartSeries([...yeniVeri])), ApexChart bileşeninizdeki createEffect kancası otomatik olarak tetiklenecek ve ApexCharts’ın updateSeries() ve/veya updateOptions() metotları ile grafik güncellenecektir.

4. Birden fazla grafik kullanabilir miyim?

Evet, uygulamanızda istediğiniz kadar ApexChart bileşeni kullanabilirsiniz. Her bir bileşen kendi options ve series prop’larını alacak ve bağımsız bir ApexCharts örneğini yönetecek şekilde tasarlanmıştır. Her grafik için farklı sinyaller ve seçenekler tanımlayarak birden fazla grafiği aynı anda gösterebilirsiniz.

5. ApexCharts’ın temalarını nasıl değiştiririm?

ApexCharts, çeşitli tema seçenekleri sunar. options nesnesi içinde theme özelliğini kullanarak temayı değiştirebilirsiniz. Örneğin: theme: { mode: 'dark', palette: 'palette1' }. Ayrıca, ApexCharts’ın CSS değişkenlerini kullanarak veya kendi özel CSS’inizi yazarak da grafikleri stilize edebilirsiniz. Detaylı bilgi için ApexCharts tema dokümantasyonuna bakabilirsiniz.