# LivaCircularGauge
Package: @dataliva/livalib
Description: @dataliva/livalib dairesel gösterge (circular gauge) bileşeni.

DevExtreme'in CircularGauge bileşenini saran ince bir katman. Tek bir değeri
dairesel bir ölçek üzerinde gösterir; hız, doluluk, gerçekleşme oranı gibi
göstergeler için kullanılır.

Sık kullanılan alt bileşenler `Gauge` ön ekiyle doğrudan
`@dataliva/livalib`'den dışa aktarılmıştır.

```tsx
import {
  LivaCircularGauge,
  GaugeScale,
  GaugeRangeContainer,
  GaugeRange,
  GaugeValueIndicator,
  GaugeTitle,
  GaugeTooltip,
} from "@dataliva/livalib";
```

## Hız göstergesi

`GaugeScale` ölçeği tanımlar; `GaugeRangeContainer` içindeki her `GaugeRange`
ölçeğin bir bölümünü renklendirir. Aralıklar konumla birlikte açıktan koyuya
sıralanan renkler taşıdığı için durum yalnızca renge bağlı kalmaz.

**Örnek — Hız göstergesi — renkli aralıklar:**

```tsx
<LivaCircularGauge value={72} height={320}>
  <GaugeScale startValue={0} endValue={180} tickInterval={20} />
  <GaugeRangeContainer>
    <GaugeRange startValue={0} endValue={90} color="#8bc34a" />
    <GaugeRange startValue={90} endValue={130} color="#ffb300" />
    <GaugeRange startValue={130} endValue={180} color="#e64a19" />
  </GaugeRangeContainer>
  <GaugeTitle text="Hız Göstergesi (km/s)" />
  <GaugeTooltip enabled />
</LivaCircularGauge>
```

## RangeBar göstergesi

`GaugeValueIndicator` ibrenin biçimini belirler; `type="rangeBar"` değeri
iğne yerine ölçek boyunca dolan bir yay ile gösterir.

**Örnek — RangeBar göstergesi — hedef gerçekleşme:**

```tsx
<LivaCircularGauge value={68} height={320}>
  <GaugeScale startValue={0} endValue={100} tickInterval={10} />
  <GaugeValueIndicator type="rangeBar" color="#4682b4" />
  <GaugeTitle text="Hedef Gerçekleşme (%)" />
  <GaugeTooltip enabled />
</LivaCircularGauge>
```

## Prop'lar

| Prop | Tip | Açıklama |
|------|------|---------|
| `value` | `number` | Gösterilen ana değer |
| `subvalues` | `number[]` | Ek işaretçi değerleri |
| `height` / `width` | `number \| string` | Gösterge boyutları |
| `className` | `string` | livalib'e özgü ek prop |
| `style` | `React.CSSProperties` | livalib'e özgü ek prop |

`GaugeValueIndicator` tipleri:
`'rectangleNeedle' \| 'triangleNeedle' \| 'twoColorNeedle' \| 'rangeBar' \| 'triangleMarker' \| 'textCloud'`.
Geri kalan tüm prop'lar DevExtreme `CircularGauge`'dan miras alınır.