mihenk.js Bubble Chart Eklendi

Ara ara geliştirmeye devam ettiğim ilk açık kaynak çalışmam mihenk.js e aşağıdaki linklerden ulaşabilir ve kullanabilirsiniz;

http://guvenir.github.io/Mihenk/
https://github.com/Guvenir/mihenkjs

Şuan itibariyle Mihenk projesi içerisinde 6 adet grafik mevcut. Bunlardan sonuncusu başlıktan da anlaşılacağı gibi Bubble Chart. Bubble Chart önceki grafiklerde de mevcut olduğu gibi zoom ve drag özellikleri mevcuttur. Veri formatı ise aşağıdaki gibidir;


Öncekilerden farklı olarak veri formatı içerisinde "r" bulunmaktadır. Bu da bubble ların yarıçapını temsil eder.

mihenk.js nin kullanımı için önceki yazılarıma göz atabilirsiniz. Herhangi bir sorunuz olursa bana ulaşabilirsiniz. Şimdilik bu kadar , size iyi çalışmalar!

Devamı

Spring Boot Banner Değiştirme

Spring Boot ilk çalıştığı andaki banner aşağıdaki gibidir , mutlaka dikkatinizi çekmiştir.

Buradaki Spring yazısını kendimiz kolay bir şekilde özelleştirebiliriz. Bu açılış yazısını değiştirmenin çok bir önemi yok ancak yine de istediğimiz gibi özelleştirebileceğiimiz için böyle bir yazı yazmak istedim.

Bunu yapabileceğimiz bir çok generator olabilir , aşağıdaki ise benim faydalandığım site;

http://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type%20Something%20

Örnek;

                                   _      
  ___   __ _ _   ___   _____ _ __ (_)_ __ 
 / _ \ / _` | | | \ \ / / _ \ '_ \| | '__|
| (_) | (_| | |_| |\ V /  __/ | | | | |   
 \___/ \__, |\__,_| \_/ \___|_| |_|_|_|   
       |___/                              
                                        

Bu linkten farklı yazı tiplerine göre istediğimiz yazıyı oluşturabiliriz , ancak buradan renkli banner oluşturamayız.

Renkli banner içinde aşağıdaki linke göz atabilirsiniz ;

http://toedter.com/2015/12/13/creating-colorful-banners-for-spring-boot-applications/

Kendimize ait yazıyı oluşturduktan sonra yazıyı banner.txt olarak kaydedelim ve bu txt dosyasını resources klasörünün içine ekleyelim. Projeyi çalıştırdığımız zaman  otomatik banner ımızı görecektir.

Şimdilik bu kadar , size iyi çalışmalar!

Devamı

AngularJS Routing

AngularJS ile tek sayfa biçiminde yönlendirme yapabiliriz. Bunu bir örnekle açıklamaya çalışayım ;
Örneğin bir blog sitemiz var ve ana sayfa da üstte navbar solda da sırası ile yazıların linki var. Her bir yazı ayrı bir HTML dosyası içerinde tutuluyor olsun. Linklere tıkladığımda da anasayfa da sadece içeriğin gösterileceği content kısmı değişsin istiyorum. İşte böyle bir yapıyı AngularJS route (ng-Route) ile kolay bir şekilde yapabiliriz. Böyle bir yapının özel bir adı var mı bilmiyorum ancak bu şekilde açıklayabildim. : )

Yukarıda yaptığım açıklamadaki yapıya ihtiyacım vardı ve biraz araştırarak çok basit bir örnek yaptım. Bu çalışır haldeki örneğe aşağıdaki linkten erişebilirsiniz;

https://github.com/Guvenir/AngularOrnekler

Kodlara göz atmaya geçmeden önce hatırlatmak istediğim bir husus var. AngularJS bazen sunucu gerektirmeden de çalışabiliyor , yani kodları ekleyip html dosyasına çift tıkladığımızda çalışıyor hata almıyoruz ancak bu durum her zaman böyle değildir , bir sunucu üzerinde çalıştırmakta fayda var. Yukarıdaki linkten projeyi indirip index.html yi direk tarayıcı da açarsak hata alırız. Bunun için AngularJS projemizi bir sunucuda çalışacak şekilde ayarlamalıyız.

Proje son derece basit , aşağıdaki gibi;

Öncelikle angularjs cdn yi ekledikten sonra birde angular-route cdn yi projemize dahil ediyoruz aşağıda olduğu gibi;


Angular kodlarında module içerisine ['ngRoute'] ekliyoruz , daha sonrasında ise $routeProvider ile yönlendirmeleri yapıyoruz. 'otherwise' ise rastgele girilen url ler için yönlendirilecek sayfayı belirtiyor.  $locationProvider.html5Mode(true) ise linkler açıldığında url de çıkan '#' silmek için. Her bir when içerisinde yönlendirilecek sayfa ve bu sayfa için kullanılacak controller belirtiliyor. Böylece her sayfa için farklı controller kullanmamız sağlanıyor.

Şimdilik bu kadar , size iyi eğlenceler!

Devamı

Spring Boot deploy war

Bildiğimiz gibi Spring Boot içerisinde Tomcat gömülü olarak geliyor ve projeyi çalıştırdığımız zaman bu sunucuyu kullanarak çalışıyor. Ancak biz yaptığımız herhangi bir çalışmayı bu şekilde sunuculara aktaramayız. Öncelikle web e taşıyabilmek için war şeklinde deploy etmeli ve içerisindeki Tomcat i pasif hale getirmeliyiz. Bu yazının konusu da tam olarak bu , öncelikle bu yazının kaynağını vererek başlayayım ;

http://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#howto-create-a-deployable-war-file

İlk olarak projemizin başlatıldığı class a SpringBootServletInitializer extend edip class ın içerisine override  SpringApplicationBuilder methodunu ekleyerek sunucunun main sınıfımızı bulmasını sağlıyoruz.


Sonrasında ise pom.xml içerisinde deploy türünü war olarak belirtiyoruz.

<packaging>war</packaging>

Son olarak pom.xml içerisine aşağıdaki gibi dependency ekleyerek projemizi sunucuda çalışabilir hale getiriyoruz.

Şimdilik bu kadar , size iyi eğlenceler!

Devamı

mihenk.js Uygulamaları 1

Bundan önceki yazımda Mikenk in ne olduğundan bahsetmiştim. Bu yazımın temel konusu ise mihenk.js i kendi projemize nasıl dahil ederiz ve grafikleri nasıl kullanabiliriz olacak. Öncelikle geliştirmekte olduğum açık kaynak mihenk.js projesine aşağıdaki linkten erişebilirsiniz;

guvenir.github.io/Mihenk/

Kodları indirmek için ;

https://github.com/Guvenir/mihenkjs

Javascript ve css kodlarımızı indirdikten sonra html sayfamıza önce d3.js linkini sonra da mihenk.css ve mihenk.js yi ekleyelim. Aşağıdaki gibi ;


Grafiğin png çıktısını alabilmek için saveSvgAsPng yi de indirip koda eklememiz gerekiyor.  Sonrasında da html içerisine grafiğin çizdirileceği div i tanımlıyoruz. Bu div içerisini de boş bir svg tag ı açıp kapatıyoruz.

Html tarafı hazır olduğuna göre artık Javascript tarafında verimizi uygun formatta hazırlayıp grafiğimizi çizdirebiliriz.

Veri formatını inceleyecek olursak xdata  x ekseni için gerekli değerler , ydata y ekseni için gerekli verilerdir. Opt ise grafikle ilgili değişiklik yapabileceğimiz yerdir. x_labels ve y_label ilgili eksenler için farklı şekilde label eklemek istiyrosak (örneğin x ekseninde grafik oluşturulurken sayısal veri girildi ancak ben orada tarih yazmasını istiyorsam x_labels dizisi içerisine tek tek x verisine karşılık gelecek tarih bilgilerini ekleyebilirim) bu diziler sayesinde kolayca ekleyebiliriz.

Oluşturulan grafiklere hem çift tıklayarak hem de farenin tekerini çevirerek yakınlaşabilir , sürükleyerek grafiğin konumunu değiştirebiliriz. Bunu yapabilmemiz için ise opt içerisindeki zoom özelliği true olmalı ve x_label , y_labels içerisinde etiket olmamalıdır. Bunun sebebi ise x ve y eksenleri için sayısal veri girildiğinde grafiğe yakınlaştığımızda değerleri kendisi hesaplayabilir ancak etiket koyarsak yakınlaşma durumunda yeni etiket bilgilerini kendisi ekleyemeyeceği için grafik bozuluyor. Bundan dolayı zoom özelliği true olsa bile x veya y ekseni için ya da her ikisi için etiket belirlenmişse zoom özelliği devre dışı kalıyor.

xlab ve ylab ise grafik eksenlerinin adlandırılması için kullanılmaktadır. Örneğin hız/zaman grafiği için ylab hız , xlab zaman şeklinde düzenleyebiliriz.

color bir dizidir ve içerisine eklediğimiz renkleri sırası ile grafikte kullanır. "#456" şeklinde renk kodlarımızı ekleyebiliriz. Örneğin ["#987","#123456"] renklerini eklediğimiz zaman grafikte diyelim ki 6 adet bar var  ise sırası ile renklendirir ve 3 adet ilk renk için 3 adette ikinci renk için bar olur. Bir nevi gruplandırma yapmış oluruz.

div_id içerisine ise html tarafında oluşturduğumuz ve grafiğin çizileceği div in id sini yazıyoruz. Doğru yazmadığımız zaman grafik çizilmeyecektir.

mihenk.barchart(mihenkdata);

Veriyi uygun formatta hazırladıktan sonra yukarıdaki gibi çağırmamız yeterli olacaktır.

Şimdilik bu kadar , eğer bir sorunuz olursa bana ulaşabilir veya yorum bırakabilirsiniz.

Devamı

Mihenk

Bugüne kadar bir çok çalışmam oldu ancak bir çoğu çeşitli nedenlerden dolayı gün yüzüne çıkamadı , yer altında kaldı. Gün yüzüne çıkabilen nadir çalışmalarımdan birisi de Mihenk'tir. Mihenk d3.js tabanlı bir grafik kütüphanesidir. Bilmeyenler için d3.js  büyük verilerin görselleştirilmesi için kullanılan açık kaynak bir kütüphanedir , günümüzde kullanılan gelişmiş grafik kütüphanelerinin bir çoğu d3.js ile geliştirilmiştir. Svg tabanlı grafikler elde etmemizi sağlar. Mihenk'te benim kendimce d3.js ve özelliklerini kullanarak geliştirmeye başladığım açık kaynaklı bir grafik kütüphanesidir. 

http://guvenir.github.io/Mihenk/

https://github.com/Guvenir/mihenkjs

Yukarıdaki ilk linkten kütüphanenin sayfasına erişebilir ve grafikleri görebilirsiniz. Hemen altındaki linkte ise mihenk.js erişebilir ve kodları inceleyebilirsiniz.

Temel özellikleri ;

1. GPLv3 lisansı altındadır (Kodları istediğiniz gibi kullanıp , değiştirebilir ve yeniden yayınlayabilirsiniz)
2. Responsive tasarım (Mobil , tablet ve pc üzerinde sorunsuz çalışmaktadır)
3. Kolay kullanım (Sade veri formatı sayesinde grafiği kolay bir şekilde kişiselleştirebiliriz)
4. Chrome ve Firefox üzerinde sorunsuz çalışıyor
5. Ek kütüphaneler kullanarak PNG ve SVG formatında çıktı alabiliyoruz
6. Zoom ve Drag özelliği mevcut (Grafiğin üzerine gelip çift tıklayarak ya da farenin tekerini çevirerek yakınlaşabilir yine fare ile sürükleyip grafiğin konumunu değiştirebiliriz)

Başlangıç aşamasında 5 adet kullanılabilir grafik mevcut ;

1. Bar  Chart (Horizontal)
2. Bar Chart (Vertical)
3. Box Chart
4. Error Chart
5. Line Chart

Sonraki süreçte yeni grafikler eklemeyi , mevcut grafiklerin üzerinde düzeltmeler ve yeni özellikler eklemeyi planlıyorum ama zaman ne getirir ne götürür bilinmez.

Ayrıca Mihenk ilk açık kaynaklı projem olması sebebiyle benim için özel bir yere sahip.

Bu yazı kısaca bir tanıtım olsun , sonraki yazılarımda mihenk.js i nasıl kendi projemize dahil edebilir ve kullanabiliriz ona değinmek istiyorum.

Şimdilik bu kadar ,  size iyi eğlenceler : ) 

Devamı