React Libraries
React Chart Kütüphaneleri
React için kullanılabilecek bir çok açık kaynaklı Chart kütüphanesi bulunuyor. Bunlardan bazıları Rechart, Nivo, Victory, React-vis, VisX gibi kütüphaneler. Bu yazıda kütüphanelerin yeteneklerini bir seri yazı halinde açıklamaya çalışacağım.
Görselleştirme denince herkesin aklına D3.js kütüphanesi gelir. JQuery DOM ve tarayıcıyı soyutlamak için nasıl defacto olmuş ise, React, bileşen ile UI tasarlamak, D3.js Görselleştirme(Visualization) konusunda defacto olmuştur.
Geliştiriciler ne zaman D3.js ile geliştirme yapmak isteseler bir öğrenme zorluğu ile karşılaşıyorlar, Her geliştirici önce aradığı örneği D3.js Mike Bostock örneklerden buluyor, bu örneklere bakıp etkileniyor. Sonrasında bu işe kendileri giriştiklerinde bu işin çok da kolay olmadıklarını fark ediyor.
D3.js öğrenme eğrisi gerçekten zor olan bir kütüphane. Bir diğer konuda React ile birleştirip kullanmak ayrıca bir zorluk içeriyoru. React Virtual DOM üzerinden DOM yönetmeye çalışırken. D3.js data ile gerçek DOM güncelleyerek bu işlemi yapıyor. Sonuçta 2 farklı yaklaşım bir takım karışıklıklara neden oluyor.
React ekosisteminde geliştiricileri bu zorluktan kurtaracak soyutlamaya sahip, çok kaliteli, açık kaynaklı chart kütüphaneleri bulunuyor. Bu kütüphaneler D3 + React üzerine kendi bileşen ve altlıklarını sunarak biz geliştiricilere hızlı ve güvenilir Dashboard oluşturmamızı sağlıyorlar. Bunlardan bazıları;
Bu kütüphaneleri kullanmadan önce Layout ve Chart bileşenlerinin ne amaçla kullanıldığını bilmeniz önemli. Bu konuda aşağıda linkte yer alan yazıya göz gezdirerek bilgi sahibi olabilirsiniz.
Genel olarak yukarıdaki kütüphaneler ile ilgili bilgi vermem gerekirse, Rechart uzun süredir projemizde aktif olarak kullandığımız için Composable (Genişletilebilir) ve Reusable(Tekrar Kullanılabilir) bir yapıya sahip. Üzerinde çok rahat bir şekilde kendi bileşen yapınızı oluşturup, görsellikleri değiştirebilirsiniz.
Visx yeni duyduğum bir kütüphane Airbnb sadece bu kütüphaneyi Chart kütüphanesi olarak konumlandırmıyor. D3.js üzerinde daha kolay geliştirme yapılabilen bir görselleştirme kütüphanesi olarak sunuyor. Bu kütüphane Rechart göre biraz daha low-level olduğunu düşünebilirsiniz.
Nivo.rocks StateOfJs sayfasındaki görsellerde kullanıldığını biliyordum. Biraz araştırınca Server Side Generation kütüphaneleri ile rahatlıkla kullanılabildiğini farkettim. Örneğin Gatsby kullanarak geliştirdiğim Web Sayfamda Nivo kullandığımda direk çalıştığını gördüm. Diğer kütüphanelerde bu yapılar düzgün bir şekilde işlemiyordu çünkü Server Side Rendering yönelik geliştirilmemiştir.
Ama Nivo için bir eksik Zoom ve Brush yeteneklerinin olmaması, çok fazla etkileşim ihtiyacı olan projelerde biraz bu ürünü geri plana attığını söyleyebiliriz.
Victory ve React-vis bu blog yazısını araştırırken bulduğum Chart kütüphaneleri. Yeteneklerini ve kullanım detaylarını bilmesemde aldıkları Github star (yıldızları) doğrultusunda bu kütüphaneleri de incelemeye karar verdim.
Chart Kütüphaneleri Kapsam
Mevcut chart örneklerini karşılaştırmak aslında bize kütüphanenin nasıl hazırlandığı konusunda da bize bilgi verecektir.
Bazıları daha parça parça low-level chart bileşen parçaları ile Chart oluşturmamızı sağlarken, bazıları daha high-level chart’lar sağlayarak sadece property değişikliği ile Chart oluşturmanızı sağlar.
İki durumunda birbirine göre avantajları ve dezavantajları içerisinde barındırır.
- High Level API Tasarımı: Hızlı Öğrenme ve Geliştirme ama Değişime Kapalı
- Low Level API Tasarımı : Daha Zor bir öğrenme eğrisi ama Değişime Açık
Kendi kullanım senaryo ve ihtiyaçlarınız doğrultusunda Chart kütüphanesini seçmenizde size çok büyük faydalar kazandırır. Aşağıda bu Chart kütüphanelerinde kullanılan temel bileşenler verilmektedir. Diğer yazacağım yazılarda bu özellikleri analiz etmeye çalışacağım.
A.1 Rechart Chart Component Türleri
LineChart, AreaChart, BarChart, ComposedChart, ScatterChart, PieChart, RadarChart, RadialBarChart, Treemap,
A.2 Visx Layout Türleri
xychart, threshold, geo, heatmap, hierarchy, network, react-spring, stats,
A.3 Victory Chart içerisine Render Edilebilen Bileşenler
VictoryBoxPlot, VictoryArea, VictoryBar, VictoryCandlestick, VictoryLine, VictoryPie, VictoryPolarAxis, VictoryScatter,VictoryArea, VictoryHistogram, VictoryVoronoi, VictoryGroup,VictoryErrorBar, VictoryAxis
A.4 Nivo Chart Bileşenleri
AreaBump, Bar, Bubble, Bump, Bullet, Calendar, Choropleth, Chord, Funnel, GeoMap, HeatMap, Line, Marimekko, Network, ParallelCoordinates, Pie, Radar, Sankey, ScatterPlot, Stream, Sunburst, SwarmPlot, TreeMap, Voronoi, Waffle
A.5 React-vis Bileşenleri
XYPlot: (Line, Area, LineMark, Mark, VerticalBar , HorizontalBar , VerticalRect ,Heatmap , Hexbin , DecorativeAxis) ve Voronoi
Ekstra
Yorumlardan gelen bir kaç tane daha Chart’ı yazıya eklemem istendi. Bunlar hakkında detaylı bilgim olmadığı için sadece isimlerini link olarak ekleyeceğim ileride detaylandırırım.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
