Konu Başlıkları
Yükleniyor...

Luzmo Flex ile Kod Üzerinden Özel Veri Görselleştirme

Luzmo Flex: React'te Dataset ve Column ID ile Grafik Kurmak

Bir grafiği ekrana getirmenin iki yolu var: veriyi kütüphanenin beklediği şekle sokmak ya da veriyi olduğu yerde bırakıp grafiğe hangi sütunun nereye gideceğini tarif etmek. Luzmo Flex ikincisini yapıyor; Google Analytics ya da PostgreSQL tarafındaki satırları dönüştürmeden, React içinde bir yapılandırma nesnesiyle donut, çizgi veya bar grafiğe bağlıyorsunuz. Aşağıda bu yapının nasıl kurulduğunu, sonra da kolaylığın faturasının nereye yazıldığını anlatıyorum.

Önce dataset, sonra grafik

Luzmo'da her şey dataset denen tablodan başlar. Veri kaynağınızı sisteme tanıtırsınız (GA4 hesabı, bir veritabanı, elle yüklenmiş bir CSV), sistem de o kaynağın sütunlarını tek tek kaydeder. Kaydettiği her sütuna benzersiz bir column ID verir. Kod tarafında bir ölçüyü ya da ekseni gösterirken sütunun görünen adını değil, bu ID'yi yazarsınız.

Mantık şu: grafik bileşeni veriyi tanımaz. Yalnızca "şu ID'deki değeri ölçü olarak al, şu ID'dekini eksene koy" talimatını alır; toplama, gruplama ve filtreleme sunucu tarafında Luzmo'da yapılır, bileşene ulaşan şey çizilmeye hazır sonuçtur (ID'leri kod içine gömmek hoşuma gitmiyor).

Klasik chart kütüphanelerinden farkı

Recharts ya da Chart.js ile sıra genelde şöyle işler: API'den geleni al, kütüphanenin istediği diziye çevir, eksik alanları temizle, tarihleri grupla, sonra çiz. Bu dönüşüm katmanı görünmez ama gerçek bir maliyettir; test edilmesi, veri şekli her değiştiğinde güncellenmesi gereken bir kod parçasıdır.

Flex'te o katman ortadan kalkmıyor, yer değiştiriyor. Dönüşümü siz yazmıyorsunuz, yapılandırma nesnesinde tarif ediyorsunuz. Kazanç, dönüşümün bakımını üstlenmemek. Kayıp, sonucun neden öyle çıktığını anlamak için platformun davranışını bilmek zorunda kalmak.

Kurulum

  1. Luzmo hesabı açın, deneme anahtarını alın.
  2. Projeye @luzmo/react-embed paketini kurun.
  3. API anahtarı ve token'ı .env tarafında tutun.
  4. Kullanacağınız dataset ID'sini ve ihtiyaç duyduğunuz her sütunun column ID'sini panelden kopyalayın.

Token üretimini sunucudan yapın. Anahtar istemciye düşerse dataset'e erişen herkes tarayıcı konsolundan aynı sorguyu çalıştırabilir, üstelik sizin arayüzünüzdeki filtrelerle sınırlı kalmadan.

Grafik tanımı neye benziyor

{ type: 'donut-chart', // 'line-chart', 'bar-chart' options: { ... }, // başlık, renk, gösterim ayarları slots: [ ... ], // ölçü ve eksen atamaları filters: [ ... ] // sorguya giden koşullar }

Tipi değiştirmek tek satır: donut-chart yerine bar-chart yazarsınız, slots aynı kaldığı sürece grafik yeniden çizilir. Cihaz türüne göre kullanıcı dağılımı donut'a yakışır, son yedi günle sınırlarsınız. Günlük ziyaretçi eğrisi çizgi grafiğe gider; tarih sütununu gün seviyesinde gruplamak için slot'a bir seviye değeri geçersiniz, level: 5 gün demektir ve bu sayıların karşılığı yalnızca dokümanda yazılıdır. En çok görüntülenen sayfalar bar grafikte, azalan sıralamayla ilk on satır.

Filtreyi kullanıcıya açmak

Yapılandırma düz bir JavaScript nesnesi olduğu için filters dizisini bir state'e bağlayıp select ya da checkbox ile sürmek doğrudan çalışır. Kullanıcı cihaz seçer, filters güncellenir, bileşen yeni sorguyu atar. Kendi rapor oluşturucunuzu bunun üstüne kurabilirsiniz: kullanıcı grafik tipini ve kırılımı seçsin, siz sadece nesneyi güncelleyin.

Kolaylığın faturası

Bu yaklaşım anlatılırken sık sık "manuel formatlama, ekstra test, hata yönetimi gerekmiyor" deniyor. İlk kısmı doğru, kalanı değil. Column ID'ler opak dizelerdir. Dataset yeniden oluşturulduğunda ya da bir sütun silindiğinde kod derlenmeye devam eder, tip denetimi uyarmaz, grafik sessizce boş gelir. Klasik kütüphanede aynı hatayı en azından dönüşüm fonksiyonunda, çoğu zaman da testte yakalarsınız.

Pratik karşılığı iki madde: ID'leri tek bir sabit dosyasında toplayın ve dataset şemasına dokunan her işlemden sonra o dosyayı gözden geçirin; boş sonuç durumunu bileşenin kendi haline bırakmayın, "veri yok" ile "sorgu başarısız" ayrımını kullanıcıya gösterin.

Gömülü analitik satan bir platforma bağlanmak, raporlama mantığınızın bir kısmını o platformun sözleşmesine taşımak demektir. Ürününüzün asıl işi rapor üretmek değilse iyi bir takas: bir hafta sürecek grafik işini bir güne indirir. Rapor motoru ürünün kendisiyse, dönüşümü kendi kodunuzda tutmak uzun vadede daha rahat eder.

Kaynak