Bu bölüm, daha önceden anlatmaya çalıştığım, kısaca; dataları grafikleştirme konulu, bölüm bir ve bölüm iki makalelerinin devamı olarak; renklendirme aşamalarına geçtiğimiz bölüm olacak.
Bidiğiniz üzere; yazdığınız kod ne kadar kaliteli de olsa, ne kadar arkada dağları bile devirse genelde; ön yüzde göz ardı edilen, kullanıcıya son dokunan alanların görsel eksiklikleri yüzünden kullanıcıların ilgili ürünü/alanı kullanma isteği/oranı düşebilir.
bkz: UI/UX
Bu nedenle, kodlamış olduğumuz grafiklerde ufak değişiklikler yaparak kullandığımız Chart.js kütüphanesinin sadece varsayılan olarak atanmış renk paletlerini override* edip, kendi ürettiğimiz renk paletlerini bu grafikler üzerinde kullanmaya çalışacağız.
🤘
Projede, frontend dizinine gelip,
src > app altına;
color-helper.ts dosyası oluşturuyorum.
color-helper.ts dosyası, tek bir yerden renk paletlerini üretmek için yardım alacağımız ts dosyası.
İçeriğini şimdilik şu şekilde düzenleyelim:
Daha sonra, hangi componentte kullanacaksak o componente gidip dosyayı tanıtma işlemini gerçekleştirelim.
Ben bu işlemleri Pie Chart üzerinde gerçekleştireceğim.
pie-chart.component.ts dosyasında;
import { ColorHelper } from '../color-helper';Import işlemi sonrasında,
providers alanına provider’ı ekleyip, constructor alanına ColorHelper sınıfını inject etmemiz gerekiyor.
Bu adımları da tamamladığımıza göre, artık ColorHelper sınıfında renklendirme için yardımcı metodumuzu oluşturabiliriz.
color-helper.ts dosyasına geçip içeriğini aşağıdaki gibi düzenleyelim:
Tek metod oluşturup; iki tane parametre ekleyerek, metodların içeriğindeki rgba ve hex değerlerini rastgele verdim.
dataCount: kaç tane data varsa o kadar renk üretmek için,
isRandom:
istediğimiz bir renk paleti oluşturup, onu mu verelim?
yoksa,
rastgele renk değerleri oluşturup renklendirmeyi ona göre mi yapsın?
demek için bu parametreye ihtiyaç duydum.
Peki, bu parametreyi pie-chart componentinde nasıl kullanırım?
Global bir değişken olarak tanımlayıp,
backgroundColor propertysi oluşturup ilgili metodun dönüş değerini bu propertye atarak.
dataCount değerini 10 olarak,
isRandom değerini false olarak metoda gönderiyorum.
ve global olarak tanımladığımız chartColor değişkenini canvasın tanıması için HTML tarafına;
[colors]=”chartColor” attribute’unu ekleyip projeyi çalıştırıp son duruma bakalım.
***
😏 isRandom parametresine false olarak gönderdiğimiz değerin sonucu:
😢 isRandom parametresine true olarak göndermiş olsaydık, şu şekilde her sayfa yenilendiğinde farklı renklerde bir grafik elde edecektik:
Böylece, renklendirme işlemini Pie Chart üzerinde tamamlamış olduk.
Projenin güncel kodlarına, buradan ulaşabilirsiniz.
Benim için çok keyifli, üç bölümlük bir seri oldu.
Güzel bir dünya dileğiyle, sevgiler 🙏
