> 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/liquid-gauge-sivi-olcek.md).

# Liquid Gauge: Sıvı Ölçek

Sıvı Ölçek (Liquid Fill Gauge) bileşeni, bir hedefin (veya toplam kapasitenin) yüzde kaçına ulaşıldığını, içi sıvı ile dolan animasyonlu bir daire (veya küre) formatında görselleştiren oldukça estetik ve dikkat çekici bir KPI aracıdır.

Bu bileşen; depolama alanlarındaki doluluk oranları (sunucu kapasitesi, fiziksel stoklar), aylık/yıllık satış hedeflerinin gerçekleşme yüzdeleri, anket memnuniyet skorları veya bağış/fon toplama kampanyalarındaki ilerleme durumu gibi 'Bardağın ne kadarı dolu?' mantığıyla çalışan senaryolar için özel olarak tasarlanmıştır.

Bileşenin en büyük avantajı, statik çubuklara (bar) veya standart göstergelere kıyasla, içerisindeki dinamik dalgalanma efekti (sıvı animasyonu) sayesinde yöneticilerin ve kullanıcıların dikkatini anında üzerine çekmesi ve okumayı çok daha keyifli hale getirmesidir.

{% hint style="info" %}
Sıvı Ölçek grafiği, doğası gereği 0 ile 100 (veya 0.0 - 1.0) arasındaki yüzdelik verileri (oranları) görselleştirmek için kullanılır. 5.000 veya 1.000.000 gibi mutlak (ham) sayıları doğrudan göstermek için uygun değildir; bu tür sayıların arka planda veya veri tabanında bir yüzdeye çevrilerek panele aktarılması gerekir.
{% endhint %}

## Sıvı Ölçek Grafiğinin Eklenmesi

Sıvı Ölçek Grafiği eklemek için **Plugin Listesi** içerisinden Sıvı Ölçek bileşeni seçilir ve kumanda tablosuna eklenir.

<figure><img src="https://3143653407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0vZHisAf5833eglFw2GE%2Fuploads%2FEukMhimiepMdgqIlo2BD%2Fimage.png?alt=media&amp;token=6eeef557-b00b-4048-88aa-395eed5bb481" alt=""><figcaption></figcaption></figure>

Bileşen eklendikten sonra dairenin içindeki sıvı seviyesini belirleyecek olan Ölçü Değeri, Maksimum, Minimum ve Hedef Değer alanları eşleştirilerek yapılandırma tamamlanır.

## Güneş Işını Grafiği Araçları

Sıvı Ölçek bileşeni seçildiğinde üst menüde aşşağıdaki araçlar görüntülenir.

<figure><img src="https://3143653407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0vZHisAf5833eglFw2GE%2Fuploads%2FMGaZnmh3XkwKMrqaIM6P%2FVispeahen%20User%20Manual%20(49).png?alt=media&amp;token=0d468d4a-7360-44e2-b3a2-0c703f474bee" alt="" width="330"><figcaption></figcaption></figure>

1. **Araçları Aç/Kapat:** Görsel ile ilgili düzenleme yapılan ikonların açıp kapatıldığı ikondur.
2. **Veri:** Kullanıcının kendi verileriyle görseli şekillendireceği alandır.
3. **Ayarlar:** Görselin renk/başlık gibi biçimsel özelliklerinin değiştirildiği alandır.
4. **Yenile:** Veri alanı ile grafiğin çalışması ve grafiğin yenilenmesini sağlar.
5. **Kaldır:** Görseli silmek için kullanılan alandır. “Kaldır” ikonuna tıklandığında “Bu plugini silmek istiyor musunuz?” şeklinde uyarı çıkmaktadır.

## Veri Yapılandırması

Sıvı Ölçek Grafiğinin oluşturulabilmesi için kullanılacak veri alanlarının tanımlanması gerekmektedir. Bu işlem **Veri** ekranı üzerinden gerçekleştirilir.

<figure><img src="https://3143653407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0vZHisAf5833eglFw2GE%2Fuploads%2FpE4D0U7Pr13Eoi16hekb%2Fimage.png?alt=media&amp;token=b54a837d-4860-464f-9eef-f247633a4047" alt=""><figcaption></figcaption></figure>

<mark style="color:green;">**Tablolar & Kolonlar**</mark>
: Seçili modelde var olan tablo ve kolonların bulunduğu alandır.
&#x20;**Tablolar & Kolonlar** bölümünde yer alan kolonlar, sağ tarafta bulunan bölümlere sürükle-bırak ile eklenir.

<mark style="color:green;">**Kolon Eşleştirmeleri**</mark>

* **Sıralama ve Limit:** Kolon verisinin artan/azalan şekilde sıralamasının yapıldığı alandır.&#x20;
* **Ölçü Değeri:** Grafiği şekillendirmek için kullanılacak sayısal verinin eklendiği alandır.&#x20;
* **Maksimum:** Grafiğin oranının hesaplanabilmesi için ulaşabileceği en üst sınırı belirlemek amacıyla kullanılan sayısal verinin eklendiği alandır.
* **Minimum:** Grafiğin alt sınırını, başlangıç noktasını veya taban değerini belirlemek için kullanılan sayısal verinin eklendiği alandır.
* **Hedef Değer:** Ölçü değerinin ulaşması beklenen amacı veya mevcut durumun kıyaslanacağı referans noktasını (kota, bütçe hedefi, başarı kriteri vb.) belirlemek için kullanılan verinin eklendiği alandır.
* **Saklı Alan:** Grafikte görüntülenmeyecek ancak sıralama veya hesaplama işlemlerinde kullanılacak kolonların eklenmesini sağlar.

## Yapılandırma Ayarları

Sıvı Ölçek Grafiğine ait görünüm ve davranış ayarları Ayarlar ekranı üzerinden yönetilir.

<figure><img src="https://3143653407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0vZHisAf5833eglFw2GE%2Fuploads%2Fu7Ms048ijO7ecaLCU9st%2Fimage.png?alt=media&amp;token=a54fe586-3258-49ce-a7d1-e4e431261ffb" alt=""><figcaption></figcaption></figure>

<mark style="color:green;">**Genel Görünüm**</mark>

<figure><img src="https://3143653407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0vZHisAf5833eglFw2GE%2Fuploads%2F9sFMORuoXqCU1ZXqhEjS%2Fimage.png?alt=media&amp;token=098bf65e-af46-4521-9e87-25fae74966ba" alt=""><figcaption></figcaption></figure>

* **Çember Kalınlığı:** Grafiği çevreleyen dış çemberin kalınlığını belirler.
* **Yazı Pozisyonu (Dikey):** Grafiğin içindeki ölçüm değerinin dikey konumunu belirler. (En üst = 1, En alt = 0, Orta Konum = 0.5)
* **Minimum Değer:** Grafikte gösterilecek minimum değeri belirler. Bu değer, sıvı yüksekliğinin hesaplanmasında referans alınır.
* **Dalga Yüksekliği:** Sıvının dalga formundaki yüksekliğini belirler. Daha yüksek bir değer, daha belirgin dalga hareketi oluşturur.
* **Çember Doldurma Boşluğu:** Sıvının çember kenarına ne kadar yakın dolacağını belirler. Daha düşük değer, sıvının çembere daha yakın görünmesini sağlar.
* **Dalga Sayısı:** Grafikte aynı anda görünecek dalga tepe sayısını belirler. Artan dalga sayısı, görsel hareketliliği artırır.

<mark style="color:green;">**Başlık Ayarlar**</mark>

<figure><img src="https://3143653407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0vZHisAf5833eglFw2GE%2Fuploads%2F0vrosumMkRc0JLpMasdT%2Fimage.png?alt=media&amp;token=74855d4c-cd32-485b-8727-e4fb54c322c6" alt=""><figcaption></figcaption></figure>

* **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ı Boyutu:** Grafik başlığının boyutunu ayarlamanızı 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.

<mark style="color:green;">**Diğer**</mark>

<figure><img src="https://3143653407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0vZHisAf5833eglFw2GE%2Fuploads%2FetT7H79SrWMz9tvnplek%2Fimage.png?alt=media&amp;token=0305b863-84c3-4377-8aa2-4838a939d77e" alt=""><figcaption></figcaption></figure>

* **Dalga Yükselme Süresi:** Grafikteki dalganın (sıvı dolgu efektinin) başlangıç seviyesinden (minimum), asıl değere (ölçü değeri) kadar yükselmesi için geçecek olan animasyon süresini belirleyen alandır.
* **Dalga Animasyon Süresi:** Dalganın kendi etrafında yaptığı sürekli salınım veya dalgalanma hareketinin hızını (bir tam döngünün ne kadar süreceğini) belirleyen alandır. Değer küçüldükçe dalgalanma hızlanır.
* **Dalga Yükseklik Boyutlandırması:** Dalga genliğinin (dalganın tepe ve çukur noktaları arasındaki yükseklik farkının), grafiğin genel boyutuna veya doluluk oranına göre orantılı olarak otomatik ayarlanıp ayarlanmayacağını (aktif/pasif) belirleyen seçenektir.
* **Çember Doldurma Boşluğu:** Grafiğin en dış sınırı (çember çizgisi) ile içeride hareket eden sıvı dolgu alanı arasında estetik bir boşluk bırakılıp bırakılmayacağını belirleyen seçenektir.
* **Yüzdeli Göster:** Grafiğin merkezinde yazacak olan metnin, ham sayısal ölçü değeri yerine kapasiteye oranlanmış bir yüzde (%) formatında gösterilip gösterilmeyeceğini kontrol eden seçenektir.

<mark style="color:green;">**Veri Yok Ayarları**</mark>

<figure><img src="https://3143653407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0vZHisAf5833eglFw2GE%2Fuploads%2FjIMJjcDio3RF265zDWjb%2Fimage.png?alt=media&amp;token=da7c3a42-ede5-47d7-99ee-0387fe028eed" alt=""><figcaption></figcaption></figure>

* **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.&#x20;
* **Veri Yok Yazı Boyutu:** Mesajın font büyüklüğünü belirler.&#x20;
* **Veri Yok Yazı Rengi:** Mesajın hangi renkte gösterileceğini belirler.

## Kullanım Örneği

<figure><img src="https://3143653407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0vZHisAf5833eglFw2GE%2Fuploads%2F9uyc1yUL6ufBtzidc5qe%2Fimage.png?alt=media&amp;token=1fa4c3b9-05da-457a-af36-e5f04ef61a81" alt=""><figcaption></figcaption></figure>

Örnekte Satış Hedefi Gerçekleşme Yüzdesi verisi gösterilmektedir. Grafiğin dış sınırları belirlenen maksimum satış hedefini (tam kapasiteyi), içerideki sıvı dolgusu ise bu hedefin ne kadarının başarıldığını temsil eder. Sıvının yüksekliği ve doluluk seviyesi, gerçekleşen satış başarısına (örnekteki %79 değerine) göre belirlenmektedir.

Grafiğin merkezinde yer alan %79 ibaresi, dönemsel satış kotasının ulaşılan mevcut hacminin toplam hedef içerisindeki yüzdelik payını net ve dikkat çekici bir şekilde gösterir.

Sıvı ölçek grafiği özellikle aşağıdaki durumlarda kullanılabilir:

* Belirlenen bir hedefe (satış kotası, bütçe hedefi, üretim kapasitesi) ne kadar yaklaşıldığının anlık olarak takip edilmesi,
* Toplam kapasite içerisindeki doluluk veya kullanım oranlarının (örneğin depo veya sunucu doluluğu) analiz edilmesi,
* Performans metriklerinin ilerleme yüzdesinin görsel bir animasyonla vurgulanması.

Bu örnekte kullanılan alanlar:

* **Ölçü Değeri:** Aylık Satış Hedefi Gerçekleşme... (Sıvının yüksekliğini ve merkezdeki yüzde değerini belirleyen ana gerçekleşen metrik)
* **Maksimum / Hedef Değer:** Memnuniyet Puanı (1-5) (Görseldeki veri setinde üst sınırı veya %100'lük hedef kapasiteyi belirlemek için eşleştirilen alan)

Bu yapı sayesinde kullanıcı, mevcut satış performansının belirlenen hedefe ne ölçüde ulaştığını ve geriye kalan potansiyeli tek bir görsel üzerinden hızlıca inceleyebilir.


---

# 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/liquid-gauge-sivi-olcek.md?ask=<question>&goal=<endgoal>
```

`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.