REACT UI MECHANICS

React ile Admin Tool Geliştirelim — Dashboard Sayfası

Onur Dayıbaşı
Frontend Development With JS
4 min readMay 1, 2021

--

Öncesinde Yaptıklarımız;

Admin Tool ilgili aşağıdaki önceki yazılarda Login, CRUD ve Pagination mekanizmalarına bakmıştık.

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.

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.

Dashboard Wireframe

Adım 1. Öncelikle uygulamamızda Dashboard sayfamızı oluşturup, SideMenu’den erişebilecek hale getirelim.

Dashboard Sayfa Kodunu Ekliyoruz.

Bu kısmı eklediğimizde ekranımızın sol kısmındaki SideMenu Dashboard ikonu görebilirsiniz.

Dashboard Sayfası

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)

Metarial UI Grid yapımız.

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
Dashboard Hazır Statik Chart Ekleyelim

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.

--

--

No responses yet