REACT UI MECHANICS
React ile Admin Tool Geliştirelim — Dashboard Sayfası
React UI Mekanikleri konusunda önceki yazı serisini içerikleri kapsayacak bir senaryo geliştirmeye karar verdim. Bu konuda bir eTicaret sitesinin yönetiminde kullanılacak bir araç tasarlamaya çalışacağız.
Öncesinde Yaptıklarımız;
Admin Tool ilgili aşağıdaki önceki yazılarda Login, CRUD ve Pagination mekanizmalarına bakmıştık.
- React ile Admin Tool Geliştirelim-Login Ekranı
- React ile Admin Tool Geliştirelim-CRUD İşlemleri
- React ile Admin Tool Geliştirelim — Table Pagination Ekleyelim.
Table işlevlerini biraz daha geliştirerek bu Tabloda arama, sıralama ve çoklu satır seçerek aksiyon gerçekleştirme işlemlerine bakmıştık.
- React ile Admin Tool Geliştirelim — Table Search ve Sorting
- React ile Admin Tool Geliştirelim — Table Multi-Row Selection and Operation
SideMenu yapısını oluşturarak birden fazla iç sayfa yapısı arasında geçiş yapabileceğimiz altyapıyı oluşturmuştuk.
Product sayfasında kullanıcının yapmış olduğu güncelleme, silme ve yeni kayıt oluşturma işlemlerini, product/ürünün altında history listesi olarak gösterilmesini gerçekleştirdik.
Bu Yazıda Yapacağımız;
Çalıştığım projelerde görselleştirme ve chart gösterimi ile sıkça uğraştığımdan bu konunun ne kadar zor ve derin bir konu olduğunu bildiğimi düşünüyorum.
Görselleştirme gerçekten çok zor bir konu aynı zamanda birçok yönetimsel kararlar bu dashboard ve chart üzerinden alındığı için bir o kadar da önemli.
Bu konu üzerine yazılmış bir çok kitap, görselleştirme kütüphaneleri bulunuyor. Konunun gözükmeyen kısmı veri (verinin toplanması, sadeleştirilmesi, diğer veri grupları ile ilişkilendirilmesi vb.. aşamaları) ise ayrı derya deniz konular.
Bu konuyu kendim UI açısından irdelediğim yazı serisine Visualization & Chart başlığı altından erişebilirsiniz.
Bu konu çok detaylı bir konu olduğu için, bu yazımızda oldukça sınırlı bir kapsamda bu konuya değineceğiz. Aşağıdaki UI konuları ile ilgilenMEyeceğiz özetle.
- AdHoc Query veya DSL ile kendi Query Mekanizmanızı Oluşturma
- Sunucudan Veri Çekme
- Zamanın Değiştirilebilir Olması
- Zoom Yaparak Belli Bir Aralığa Odaklanma
- Parent — Child Chart ilişkileri (Chart içerisindeki etkileşimin diğer Chartları etkilemesi
- Custom Dashboard Oluşturma (Chart Büyüklüklerini , yerlerini ve İçeriklerini değiştirme
Bu yazıda statik kodları olan bazı chartları ekranın içerisine farklı büyüklüklerde dizme işlemini gerçekleştireceğiz. Kafamda şöyle bir yapı oluşturdum.
Adım 1. Öncelikle uygulamamızda Dashboard sayfamızı oluşturup, SideMenu’den erişebilecek hale getirelim.
Bu kısmı eklediğimizde ekranımızın sol kısmındaki SideMenu Dashboard ikonu görebilirsiniz.
Adım 2. SideMenu’de Seçili Path Göre Icon ve Yazıyı Selected Hale Getirme
Bunun için yapmamız gereken URL path alıp, bunu ListItem path ile karşılaştırıp eğer , birbiriyle eşleşiyorsa bu değeri ListItem selected hale getirmek için kullanmamız gerekiyor. Bu sayede Dahsboard sayfasına gidince bu icon otomatik selected hale gelmiş olacak.
Bunu sağlayacak yapı ise aşağıdaki fonksiyon ile sağlıyoruz. ListItem render edilirken selected değerinin true/false olmasını aşağıdaki fonksiyona soruyor.
isSideMenuSelected = (expectedPath) => {
const result = this.props.match.path === expectedPath;
return result;
Adım 3. Metarial UI Hazır sağlamış olduğu Layout Grid Layout sayfamızın içerisine yerleştiriyoruz. (Grid Referans)
Adım 4. Bir tane Chart kütüphanesi seçmemiz gerekiyor. Ben daha önceden React için çok tercih edilen kütüphaneler konusunda bir çalışma yapmıştım. React Chart Kütüphaneleri’nden veya kendi bulacağınız bir kütüphaneyi projeye ekleyelim. Ben bu projede Nivo Rocks kütüphanesini kullanacağım.
yarn add @nivo/core @nivo/bar
- Calendar: https://nivo.rocks/calendar/
- LineChart: https://nivo.rocks/line/
- BarChart : https://nivo.rocks/bar/
Yukarıdaki adresten örnekleri ve data yapılarını BarChart.js, Calendar.js ve LineChart.js benzeri dosyalara kopyalayıp bunları Layout dosyası içerisinden kullanın, Dashboard’unuz kullanılmaya hazır. 😃
GitHub Kod Örneği
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.