Architecture Decision Record

Active theme: Light

← Karar kaydı örnekleri

Mimari Karar Kaydı: TypeScript ve JSON kullanarak veri görselleştirme için grafik kitaplığı araç seti

Birincil Amaç: TypeScript ve JSON kullanarak finansal veriler, bilimsel veriler ve hükümet verilerine odaklanan etkileşimli görselleştirmeler oluşturmak için gelişmiş bir grafik araç takımı seçmek. Kitaplık, sağlam özellikler, esneklik sağlamalı ve açık kaynaklı olmalıdır.

Bağlam ve Gereksinimler:

  1. Çevik Geliştirme (Yüksek Öncelik): Bir başlangıç ​​olarak, hızlı yineleme, prototip oluşturma ve geliştirmede esneklik esastır. Grafik kitaplığı, hızlı geliştirme döngülerine izin vermelidir.

  2. Grafik Türleri (Yüksek Öncelik):

    • Halka Grafik
    • Radar Grafik
    • Kümeleme Süreci Grafiği
    • Zaman Eksenli Alan Grafiği
    • Mum Grafiği
    • Bülbül Grafiği
    • Coğrafi SVG Haritası

    Bu grafik türleri, finansal eğilimler, bilimsel metrikler ve coğrafi bilgiler gibi karmaşık veri kümelerini görselleştirmek için özellikle önemlidir.

  3. Ücretsiz ve Açık Kaynak (Yüksek Öncelik): Araç takımı, lisans maliyetlerinden kaçınmak, şeffaflık sağlamak ve özelleştirme için esneklik sunmak için açık kaynaklı olmalıdır.

  4. Düşük Önem Kriterleri:

    • Çalışma Zamanı Hızı: Performans önemli olsa da, bu karar için en önemli öncelik değildir.
    • Ölçeklenebilirlik: Ölçeklenebilirlik genel olarak önemli olsa da, acil ihtiyaç zamanla büyüyebilecek bir MVP oluşturmaktır. Ölçeklenebilirlik endişeleri daha sonra ele alınabilir.
    • Geriye Dönük Uyumluluk: Kitaplık modern ve aktif olarak sürdürüldüğü sürece, ilk yapı için birincil bir endişe değildir.

Değerlendirilen Kütüphaneler:

  1. Apache ECharts
  2. Chart.js
  3. ApexCharts
  4. AG Charts
  5. Highcharts
  6. Carbon Charts
  7. Layer Cake
  8. D3.js

1. Apache ECharts

Genel Bakış: Apache ECharts, etkileşimli, özelleştirilebilir görselleştirmeler için güçlü, esnek bir grafik kitaplığıdır. Çok çeşitli grafikleri destekler ve özellikle karmaşık, dinamik görselleştirmelerde güçlüdür.

Güçlü Yönleri:

  • Gelişmiş Etkileşim: ECharts, yakınlaştırma, kaydırma ve dinamik veri güncellemeleri gibi özellikler sunan etkileşimli grafikler sağlamada mükemmeldir.
  • Halka, Radar, Mum, Coğrafi SVG Haritaları: ECharts, halka, radar, mum ve coğrafi harita görselleştirmeleri de dahil olmak üzere gerekli grafik türlerinin çoğunu destekler.
  • Ücretsiz ve Açık Kaynak: ECharts, bir girişimin bütçeye duyarlı doğasına uyan ve kodu değiştirme özgürlüğü sağlayan açık kaynaklı bir kitaplıktır.
  • Esneklik ve Genişletilebilirlik: Animasyonlar, özel görselleştirmeler ve gelişmiş grafik teknikleri için kapsamlı destekle son derece özelleştirilebilir.

Zayıf Yönleri:

  • Öğrenme Eğrisi: ECharts, güçlü olmasına rağmen, esnekliği ve kapsamlı API'si nedeniyle daha dik bir öğrenme eğrisine sahip olabilir.
  • Belgelendirme Karmaşıklığı: Belgeler kapsamlıdır ancak yeni başlayan geliştiriciler için bunaltıcı olabilir.

Karar: ECharts, mum grafikleri, radar grafikleri ve coğrafi haritalar gibi gerekli tüm türleri içeren etkileşimli grafikler desteği nedeniyle proje için son derece uygundur. Açık kaynaklı yapısı, projenin esneklik ve maliyet etkinliği ihtiyacıyla uyumludur.


2. Chart.js

Genel Bakış: Chart.js, yaygın grafik türleri oluşturmak için basit, kullanımı kolay bir grafik kitaplığıdır. Sadeliği ve entegrasyon kolaylığı ile bilinir.

Güçlü Yönleri:

  • Kullanım Kolaylığı: Chart.js, minimum öğrenme eğrisi ile kurulumu ve kullanımı çok basittir.
  • Açık Kaynak: Chart.js, maliyetleri düşürmek için kritik olan ücretsiz ve açık kaynaklıdır.
  • Yaygın Grafik Türleri: Birincil ihtiyaçların çoğunu kapsayan halka, alan, radar ve çizgi grafikleri gibi temel grafikleri destekler.

Zayıf Yönleri:

  • Sınırlı Gelişmiş Grafikler: Chart.js, mum grafikleri, coğrafi SVG haritaları veya kümeleme süreci grafikleri gibi karmaşık grafik türlerini yerel olarak desteklemez. Bu özellikler eklentiler veya özelleştirme yoluyla eklenebilse de, diğer kitaplıklarda olduğu kadar basit değildir.
  • Etkileşim: Chart.js temel etkileşimi (örneğin, araç ipuçları ve üzerine gelme efektleri) desteklese de, ECharts veya D3.js kadar gelişmiş özellikler sunmaz.

Karar: Chart.js, basit ve hızlı projeler için harikadır, ancak karmaşık grafik türleri desteğinin olmaması, mum grafikleri ve coğrafi haritalar gibi gelişmiş ihtiyaçları olan veri ağırlıklı bir uygulama için uygun değildir. Prototip oluşturmak için iyi bir seçimdir, ancak gerekli grafik türleri için daha gelişmiş araçlar önerilir.


3. ApexCharts

Genel Bakış: ApexCharts, çeşitli grafik türleri sağlayan ve kullanımı kolay bir API ile etkileşimli görselleştirmelere odaklanan modern bir grafik kitaplığıdır.

Güçlü Yönleri:

  • Etkileşimli Özellikler: ApexCharts, araç ipuçları, yakınlaştırma, kaydırma ve güncellemeler içeren etkileşimli grafikler sunar.
  • Finansal ve Bilimsel Grafikler Desteği: Mum grafikleri, radar grafikleri ve alan grafikleri de dahil olmak üzere çok çeşitli grafik türlerini destekler.
  • Kullanım Kolaylığı: Basit bir API'ye sahiptir ve bir projeye entegre edilmesi basittir.
  • Ücretsiz ve Açık Kaynak: ApexCharts, birçok kullanım durumu için uygun olan ücretsiz bir açık kaynak sürümü sunar.

Zayıf Yönleri:

  • Karmaşık Özelleştirme: Birçok özellik sağlarken, özelleştirme seçenekleri son derece karmaşık veya özel grafik ihtiyaçları için ECharts veya D3.js kadar esnek değildir.
  • Coğrafi Haritalar: ApexCharts, bu proje için gerekli olan coğrafi haritaları veya kümeleme süreci grafiklerini yerel olarak desteklemez.

Karar: ApexCharts, kullanım kolaylığı ve etkileşimi nedeniyle güçlü bir rakiptir, ancak özellikle coğrafi haritalar ve kümeleme grafikleri ihtiyacı olmak üzere belirli gelişmiş grafik türlerinde yetersiz kalmaktadır. Daha basit grafikler için iyi bir seçenektir, ancak bazı gerekli özelliklerden yoksundur.


4. AG Charts

Genel Bakış: AG Charts, performans ve hassasiyet için tasarlanmış ticari sınıf bir grafik kitaplığıdır. Finansal, bilimsel ve iş panoları oluşturmak için son derece uygundur.

Güçlü Yönleri:

  • Gelişmiş Grafik Türleri: AG Charts, mum grafikleri, alan grafikleri, radar grafikleri ve daha fazlası dahil olmak üzere birçok gelişmiş grafik türünü destekler. Ayrıca diğer AG-Grid ürünleriyle derin entegrasyon sunar.
  • Yüksek Performans: Özellikle büyük veri kümeleriyle uğraşırken mükemmel performans sunar.
  • Etkileşim: AG Charts, yakınlaştırma, araç ipuçları ve dinamik güncellemeler gibi çeşitli etkileşimli özellikleri destekler.

Zayıf Yönleri:

  • Tamamen Ücretsiz Değil: AG Charts ücretsiz bir sürüm sunarken, tam özellikli sürüm ücretlidir ve bu da maliyetleri en aza indirmek isteyen yeni başlayanlar için bir engel olabilir.
  • Karmaşıklık: Kitaplık zengin özelliklere sahip olsa da, daha basit projeler için aşırı olabilir ve diğer seçeneklere kıyasla daha fazla kurulum ve yapılandırma gerektirebilir.

Karar: AG Charts güçlü ve zengin özelliklere sahiptir, ancak ticari yapısı ve maliyet yapısı nedeniyle en uygun olmayabilir. Uygunluğu, bütçenin ücretli sürümleri karşılayıp karşılayamayacağına veya açık kaynaklı alternatiflerin tercih edilip edilmediğine bağlıdır.


5. Highcharts

Genel Bakış: Highcharts, geniş grafik türü yelpazesi ve güçlü özelleştirme seçenekleriyle bilinen popüler bir grafik kitaplığıdır.

Güçlü Yönleri:

  • Kapsamlı Grafik Türleri: Highcharts, mum, radar, alan ve coğrafi haritalar da dahil olmak üzere çok çeşitli grafikleri destekler.
  • Etkileşimli ve Dinamik: Highcharts, ayrıntıya inme, yakınlaştırma ve kaydırma gibi zengin etkileşimli özellikler sunar.
  • Kullanım Kolaylığı: Kullanıcı dostu bir API'ye ve iyi bir belgelemeye sahiptir, bu da başlamayı kolaylaştırır.

Zayıf Yönleri:

  • Ticari Lisans: Highcharts ticari olmayan kullanım için ücretsiz bir sürüm sunarken, ticari lisans pahalıdır ve bu da yeni başlayanlar için önemli bir dezavantaj olabilir.
  • Öğrenme Eğrisi: ECharts kadar dik olmasa da, Highcharts için öğrenme eğrisi yeni başlayanlar için hala zorlayıcı olabilir.

Karar: Highcharts zengin özelliklere sahip bir kitaplıktır, ancak ticari lisansı onu açık kaynaklı, maliyete duyarlı projeler için daha az uygun hale getirir. Kapsamlı grafik seçenekleri bir artıdır, ancak lisans sorunu bu kullanım durumu için çekiciliğini sınırlar.


6. Carbon Charts

Genel Bakış: Carbon Charts, görsel olarak çekici ve son derece özelleştirilebilir grafikler oluşturmak için tasarlanmış, IBM tarafından geliştirilmiş bir grafik kitaplığıdır.

Güçlü Yönleri:

  • Özelleştirilebilirlik: Carbon Charts, grafik görünümünün ve davranışının kapsamlı bir şekilde özelleştirilmesine olanak tanır.
  • Açık Kaynak: Projenin bütçe dostu çözümler gereksinimiyle uyumlu olan ücretsiz ve açık kaynaklıdır.
  • Yaygın Grafikler Desteği: Coğrafi haritalar veya mum grafikleri gibi daha gelişmiş türler için destekten yoksun olmasına rağmen, halka, radar ve alan grafikleri gibi yaygın grafik türlerini destekler.

Zayıf Yönleri:

  • Sınırlı Gelişmiş Grafik Türleri: Proje için gerekli olan coğrafi haritaları, kümeleme süreci grafiklerini veya mum grafiklerini desteklemez.
  • Daha Küçük Ekosistem: Carbon Charts, ECharts veya Highcharts gibi daha büyük grafik kitaplıklarına kıyasla daha küçük bir topluluğa ve ekosisteme sahiptir.

Karar: Carbon Charts açık kaynaklı ve özelleştirilebilir, ancak bu proje için gereken daha karmaşık grafik türleri için destekten yoksundur. Daha basit grafik ihtiyaçları için daha uygundur.


7. Layer Cake

Genel Bakış: Layer Cake, esnek, katmanlı görselleştirmeler oluşturmak için tasarlanmış bir veri görselleştirme kitaplığıdır.

Güçlü Yönleri:

  • Özelleştirilebilir Katmanlar: Karmaşık görselleştirmeler için güçlü katmanlama seçenekleri sunar.
  • Açık Kaynak: Bütçeye duyarlı projeler için uygun bir seçenek haline getiren ücretsiz ve açık kaynaklıdır.

Zayıf Yönleri:

  • Sınırlı Belgeler: Layer Cake, kapsamlı belgelere ve topluluk desteğine sahip değildir, bu da daha yerleşik kitaplıklara kıyasla çalışmayı daha zorlaştırır.
  • Grafikler İçin Oluşturulmadı: Layer Cake, grafik olmayan görselleştirmeler için daha uygundur, bu nedenle kullanıma hazır grafik seçenekleri sınırlıdır.

Karar: Benzersiz görselleştirmeler için ilginç olsa da, Layer Cake mum grafikleri veya radar grafikleri gibi geleneksel grafik gereksinimleri için ideal değildir. Standart grafiklerin kapsamı dışındaki özel görselleştirmeler için daha uygundur.


8. D3.js

Genel Bakış: D3.js, HTML, SVG ve CSS aracılığıyla veriye dayalı görselleştirmeler oluşturmak için güçlü bir JavaScript kitaplığıdır.

Güçlü Yönleri:

  • Eşsiz Esneklik: D3.js, neredeyse her tür özel görselleştirme oluşturmaya olanak tanır, bu da onu gelişmiş ve etkileşimli grafikler için son derece güçlü kılar.
  • Kapsamlı Özellikler: Coğrafi haritalar, kümeleme grafikleri ve daha fazlası dahil olmak üzere gerekli tüm grafik türlerini destekler.
  • Özelleştirilebilir: D3.js'deki özelleştirme düzeyi eşsizdir ve geliştiricilerin son derece özel görselleştirmeler oluşturmasına olanak tanır.

Zayıf Yönleri:

  • Dik Öğrenme Eğrisi: D3.js'nin dik bir öğrenme eğrisi vardır ve diğer kitaplıklara kıyasla entegre edilmesi daha karmaşıktır.
  • Zaman Alıcı: D3.js'de grafikler oluşturmak, özellikle mum veya halka grafikleri gibi yaygın grafikler için zaman alıcı olabilir.

Karar: D3.js, gelişmiş, özelleştirilmiş grafikler için inanılmaz derecede güçlüdür, ancak dik öğrenme eğrisi ve geliştirme süresi nedeniyle birçok tipik kullanım durumu için aşırıdır. Diğer grafik kitaplıklarının gerekli özelleştirme düzeyini sağlamadığı durumlar için en iyisidir.


Sonuç

Kitaplıkları projenin ihtiyaçlarına göre değerlendirdikten sonra, Apache ECharts en iyi seçenek olarak öne çıkıyor. Coğrafi haritalar, mum grafikleri ve kümeleme grafikleri de dahil olmak üzere gerekli tüm grafikleri destekler. Açık kaynaklı, zengin özelliklere sahip ve son derece etkileşimlidir, bu da projenin hedefleriyle mükemmel bir şekilde uyumludur. D3.js en fazla esnekliği sunarken, karmaşıklığı ve zaman yatırımı, hızlı bir şekilde yineleme yapmak isteyen bir başlangıç ​​için daha az ideal hale getirir. ApexCharts ve Chart.js, daha basit projeler için iyi alternatiflerdir, ancak gelişmiş grafik türleri için destekten yoksundurlar.