> For the complete documentation index, see [llms.txt](https://learn.vispeahen.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.vispeahen.com/kumanda-tablosu/plugin-listesi/gorsel-bilesenler/custom-ozel.md). # Custom: Özel **Custom** bileşeni, Vispeahen içerisinde standart grafik bileşenleriyle sunulan görselleştirmelerin ötesine geçerek daha esnek ve özelleştirilebilir grafiklerin oluşturulmasını sağlar. Bileşen, Vega-Lite tabanlı bir yapı kullanır. Bu sayede kullanıcılar; veri alanlarını, eksenleri, renkleri, gösterim biçimlerini ve grafik yapısını ihtiyaçlarına göre özelleştirerek farklı görselleştirmeler oluşturabilir. Custom bileşeni özellikle aşağıdaki durumlarda kullanılabilir: * Standart grafik bileşenleri arasında bulunmayan görselleştirmelerin oluşturulması, * Isı haritası (Heatmap), kutu grafiği (Box Plot), dağılım grafiği (Scatter Plot) ve benzeri özel grafiklerin kullanılması, * Birden fazla grafik türünün aynı görünüm içerisinde birlikte gösterilmesi, * Veri alanlarının renk, boyut, konum veya benzeri görsel özelliklerle farklı şekillerde ilişkilendirilmesi, * Mevcut grafiklerin ihtiyaca göre daha detaylı biçimde özelleştirilmesi. Custom bileşeninde kullanılacak veri alanları, diğer grafiklerde olduğu gibi **Veri** ekranından seçilir. Görselleştirmenin yapısı ise **Ayarlar** ekranında belirlenir. Burada Vega-Lite tarafından sunulan hazır grafik örneklerinden yararlanılabilir ve seçilen örnek, Vispeahen içerisindeki veri alanlarına göre uyarlanabilir. Bu yapı sayesinde kullanıcıların her görselleştirmeyi sıfırdan oluşturması gerekmez. İhtiyaca uygun hazır bir Vega-Lite örneği seçilerek veri alanlarının eşleştirilmesi ve gerekli görsel düzenlemelerin yapılmasıyla farklı grafik türleri Vispeahen içerisinde kullanılabilir. {% hint style="info" %} **Not:** Custom bileşeninin kullanılabilmesi için ileri seviyede yazılım geliştirme bilgisi zorunlu değildir; ancak Vega-Lite'ın JSON tabanlı spesifikasyon yapısına ilişkin temel bilgi gereklidir. Vega-Lite örnek galerisindeki hazır görselleştirmeler başlangıç noktası olarak kullanılabilir ve ilgili tanımlar Vispeahen'deki veri alanlarına göre uyarlanabilir. {% endhint %} ## Custom Bileşeninin Eklenmesi Custom grafik eklemek için **Plugin Listesi** içerisinden **Özel** bileşeni seçilir ve kumanda tablosuna eklenir.
Bileşenin kullanımı temel olarak iki aşamadan oluşur: 1. **Veri** ekranından görselleştirmede kullanılacak kolonların belirlenmesi, 2. **Ayarlar** ekranından Vega-Lite JSON tanımının oluşturulması veya mevcut bir tanımın uyarlanması. Veri alanları ile Vega-Lite kodunda kullanılan alanlar eşleştirildikten sonra bileşen yenilenerek görselleştirme oluşturulur. ## Custom Bileşeni Araçları Custom bileşeni seçildiğinde bileşen üzerinde kullanılabilecek düzenleme araçları görüntülenir.
1. **Araçları Aç/Kapat:** Bileşene ait düzenleme araçlarının görüntülenmesini veya gizlenmesini sağlar. 2. **Veri:** Custom görselleştirmesinde kullanılacak veri alanlarının tanımlandığı ekrandır. 3. **Ayarlar:** Vega-Lite JSON tanımının oluşturulduğu ve bileşene ait diğer görünüm özelliklerinin yapılandırıldığı ekrandır. 4. **Yenile:** Veri ve yapılandırma üzerinde yapılan değişikliklerin uygulanarak görselleştirmenin yeniden oluşturulmasını sağlar. 5. **Kaldır:** Custom bileşeninin kumanda tablosundan kaldırılmasını sağlar. ## Veri Yapılandırması Custom bileşeninde kullanılacak veri alanlarının öncelikle **Veri** ekranı üzerinden tanımlanması gerekir.
**Tablolar & Kolonlar** : Seçili modelde var olan tablo ve kolonların bulunduğu alandır. **Tablolar & Kolonlar** bölümünde yer alan kolonlar, sağ tarafta bulunan bölümlere sürükle-bırak ile eklenir. **Kolon Eşleştirmeleri** * **Sıralama ve Limit:** Sorgu sonucunda dönecek verilerin sıralamasının ve gerekirse kayıt limitinin belirlenmesini sağlar. * **Columns:** Custom görselleştirmesinde kullanılacak veri alanlarının eklendiği temel alandır. Kategorik, tarihsel veya sayısal kolonlar bu alana eklenebilir. Eklenen kolonların adları, Vega-Lite kodunda bulunan `field` tanımları ile eşleştirilerek görselleştirmede kullanılır. * **Saklı Alan:** Görsel üzerinde doğrudan kullanılmayan ancak filtreleme, formül veya diğer arka plan işlemlerinde ihtiyaç duyulan kolonların eklenmesini sağlar. {% hint style="warning" %} **Önemli:** `Columns` alanına eklenen kolonlar, Vega-Lite kodunda kullanılabilir hale gelir. Bir kolonun X ekseninde, Y ekseninde, renkte, boyutta veya başka bir görsel özellikte kullanılacağı ise JSON içerisinde bulunan `encoding` tanımları ile belirlenir. {% endhint %} ## Yapılandırma Ayarları Custom bileşeninde görselleştirmenin temel yapısı **Ayarlar** ekranı üzerinden yönetilir.
{% hint style="info" %} Standart grafik bileşenlerinde grafik tipi, eksenler ve görsel özellikler arayüz seçenekleri üzerinden yapılandırılırken, Custom bileşeninde bu tanımların büyük bölümü doğrudan **Vega-Lite spesifikasyonu** içerisinde yapılır. {% endhint %} **Vega Lite Plugin Özelleştirme**
Bu bölümde Custom görselleştirmesinin Vega-Lite JSON tanımının girildiği kod editörü bulunur. Vega-Lite tanımında grafiğin türü, kullanılacak veri alanları, eksenler, renkler, tooltip bilgileri, katmanlar ve diğer görsel özellikler tanımlanabilir. Örneğin temel bir Vega-Lite tanımında: * `mark`, kullanılacak görsel işaretin veya grafik yapısının türünü, * `encoding`, veri alanlarının görsel özelliklerle nasıl eşleştirileceğini, * `field`, Vispeahen'den gelen hangi kolonun kullanılacağını, * `type`, ilgili alanın veri tipini, * `x` ve `y`, eksenlerde kullanılacak alanları, * `color`, verinin renkle nasıl temsil edileceğini, * `tooltip`, kullanıcı grafik üzerinde ilgili noktaya geldiğinde gösterilecek bilgileri tanımlamak için kullanılabilir. Örneğin Veri ekranındaki **Tarih** kolonu X ekseninde kullanılacaksa Vega-Lite tanımında ilgili alan: `"field": "Tarih"` şeklinde eşleştirilir. Benzer şekilde **Maksimum\_Sicaklik** kolonu görselin renk yoğunluğunu belirleyecekse `color` tanımı içerisinde bu kolon kullanılabilir. {% hint style="info" %} #### Hazır Vega-Lite Örneklerinin Kullanılması Vega-Lite tarafından sunulan hazır örnekler Custom bileşeninde oluşturulacak grafikler için başlangıç noktası olarak kullanılabilir. Kullanıcı, ihtiyacına uygun bir Vega-Lite örneğinin JSON tanımını alarak Custom bileşenindeki kod editörüne uyarlayabilir. Bu işlem sırasında özellikle; * Örneğin kendi veri kaynağını tanımlayan `data` alanları, * `field` içerisinde kullanılan kolon isimleri, * Veri tipleri, * Eksen tanımları, * Başlıklar, * Renk ve diğer görsel özellikler Vispeahen içerisinde kullanılacak veri yapısına göre kontrol edilmelidir. Vispeahen veriyi kendi veri modeli üzerinden sağladığı için, harici bir CSV veya URL kullanan Vega-Lite örneklerinde bulunan veri kaynağı tanımlarının doğrudan kullanılmasına çoğu durumda ihtiyaç duyulmaz. {% endhint %} **Genel Görünüm**
Custom bileşeni, standart grafiklerin yanı sıra Vega-Lite tarafından desteklenen harita tabanlı görselleştirmelerin oluşturulmasında da kullanılabilir. Harita özelliği etkinleştirildiğinde, kullanılacak coğrafi yapı **Topojson** alanı üzerinden belirlenir. * **Mevcut plugin bir haritadır:** Etkinleştirildiğinde Custom bileşeninin harita tabanlı bir görselleştirme olarak kullanılacağını belirtir. Bu seçenek, bölge veya alan bazlı coğrafi görünümler oluşturulacağı durumlarda kullanılır. * **Topojson:** Haritada kullanılacak coğrafi sınır yapısını belirler. Seçilen TopoJSON tanımı, görselleştirmede kullanılacak ülke, bölge veya idari alanların geometrisini sağlar. Örneğin **UK - NUTS 1** seçildiğinde, Birleşik Krallık'ın NUTS 1 seviyesindeki bölgesel sınırları harita üzerinde kullanılabilir. Harita kullanımlarında, veri içerisindeki bölge veya konum bilgisinin seçilen TopoJSON yapısındaki ilgili alanlarla uyumlu olması gerekir. Böylece veriler doğru coğrafi alanlarla eşleştirilerek harita üzerinde görselleştirilebilir.
**Başlık Ayarları**
* **Başlık:** Grafiğe verilecek başlığın tanımlandığı alandır. * **Başlık Hizası:** Grafik başlığının sola, ortaya veya sağa hizalanmasını sağlar. * **Başlık Yazı Stilleri:** Grafik başlığının kalın, italik veya altı çizili gibi yazı stilleriyle biçimlendirilmesini sağlar. * **Başlık Yazı Stili:** Grafik başlığında kullanılacak yazı tipini (font) belirlemenizi sağlar. * **Başlık Yazı Rengi:** Grafik başlığının metin renginin değiştirilmesini sağlar. * **Başlık özelliklerini rapordaki diğer pluginlere uygula:** Tanımlanan başlık ayarlarının (stil, renk, hizalama vb.) aynı dashboard içindeki diğer grafik bileşenlerinin başlıklarına da otomatik olarak uygulanmasını sağlar. **Veri Yok Ayarları**
* **Veri Yok Açıklaması:** Veri gelmediğinde kullanıcıya gösterilecek mesajı belirler. Default olarak *“Seçilen kriterlerde veri bulunamadı. Plugin görselleştirilemedi.” mesajı görünür.* * **Veri Yok Yazı Stilleri:** Mesajı **kalın** , *italik* veya altı çizili yapmanı sağlar. * **Veri Yok Yazı Stili:** Yazı tipini/fontunu belirler. * **Veri Yok Yazı Boyutu:** Mesajın font büyüklüğünü belirler. * **Veri Yok Yazı Rengi:** Mesajın hangi renkte gösterileceğini belirler. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://learn.vispeahen.com/kumanda-tablosu/plugin-listesi/gorsel-bilesenler/custom-ozel.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.