ExKPI

<!-- 01 · Compact -->
<Toolbar design="Transparent">
  <Title text="01 · Compact" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L3 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI variant="compact" color="green" icon="💰" title="MTD Revenue" value="€4.82M" prevValue="€4.29M" subtitle="vs previous" clickable="true" />
  <ux7:ExKPI variant="compact" color="blue" icon="👥" title="New customers" value="412" prevValue="381" subtitle="bu ay" clickable="true" />
  <ux7:ExKPI variant="compact" color="purple" icon="🌐" title="Active users" value="8240" trend="+3.2%" trendDir="up" subtitle="last 24h" clickable="true" />
  <ux7:ExKPI variant="compact" color="magenta" icon="⚡" title="Churn rate" value="2.4" unit="%" trend="-0.6%" trendDir="down" subtitle="target ≤ 3%" />
</l:Grid>

<!-- 02 · Sparkline -->
<Toolbar design="Transparent">
  <Title text="02 · Sparkline" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L3 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI id="spk1" variant="spark" color="green" title="MTD Revenue" value="€4.82M" trend="+12.4%" trendDir="up" subtitle="son 30 gün" />
  <ux7:ExKPI id="spk2" variant="spark" color="blue" title="New customers" value="412" trend="+8.1%" trendDir="up" subtitle="son 30 gün" />
  <ux7:ExKPI id="spk3" variant="spark" color="purple" title="Active users" value="8,240" trend="+3.2%" trendDir="up" subtitle="son 30 gün" />
  <ux7:ExKPI id="spk4" variant="spark" color="magenta" title="Churn rate" value="2.4%" trend="-0.6%" trendDir="down" subtitle="son 30 gün" />
</l:Grid>

<!-- 03 · Hero -->
<Toolbar design="Transparent">
  <Title text="03 · Hero" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L6 M12 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI id="hero1" variant="hero" color="green" title="Net Annual Revenue" value="€48.2M" trend="+14.2%" trendDir="up" subtitle="YTD · €6.3M hedef ötesinde · Q3 kapanış" />
  <ux7:ExKPI id="hero2" variant="hero" color="purple" title="Monthly Active Users" value="82,401" trend="+9.4%" trendDir="up" subtitle="son 30 gün · 7.4K yeni aktif" />
</l:Grid>

<!-- 04 · Progress -->
<Toolbar design="Transparent">
  <Title text="04 · Target progress" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L4 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI variant="progress" color="green" title="Sales quota" value="4500000" target="6000000" subtitle="Q3 sonuna 18 gün" />
  <ux7:ExKPI variant="progress" color="blue" title="Onboarding" value="184" target="200" subtitle="bu hafta" />
  <ux7:ExKPI variant="progress" color="amber" title="Bug closure" value="62" target="115" subtitle="2 high-priority açık" />
</l:Grid>

<!-- 05 · Ring -->
<Toolbar design="Transparent">
  <Title text="05 · Goal ring" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L4 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI variant="ring" color="green" title="Customer satisfaction" value="62" unit="NPS" progress="78" subtitle="target ≥ 60" />
  <ux7:ExKPI variant="ring" color="blue" title="Time to value" value="3.2" unit="gün" progress="64" subtitle="target ≤ 5 gün" />
  <ux7:ExKPI variant="ring" color="magenta" title="Feature adoption" value="AI Studio" progress="41" subtitle="3,420 / 8,240 aktif" />
</l:Grid>

<!-- 06 · Compare -->
<Toolbar design="Transparent">
  <Title text="06 · Comparison" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L4 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI variant="compare" color="green" title="Page load time" value="1.4" unit="s" prevValue="2.1s" valueLabel="Bu hafta" prevValueLabel="Geçen hafta" subtitle="P90 latency · CDN migration sonrası" />
  <ux7:ExKPI variant="compare" color="amber" title="Avg deal size" value="38" unit="K€" prevValue="32K€" valueLabel="Q3" prevValueLabel="Q2" subtitle="+19% büyüme" />
  <ux7:ExKPI variant="compare" color="magenta" title="Sales cycle" value="42" unit="gün" prevValue="38 gün" valueLabel="Bu çeyrek" prevValueLabel="Geçen çeyrek" trendDir="down" trend="-10%" subtitle="verim düştü" />
</l:Grid>

<!-- 07 · Stat list -->
<Toolbar design="Transparent">
  <Title text="07 · Stat list" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L6 M12 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI id="list1" variant="list" color="green" title="Customer health" value="8,240" trend="+3.2%" trendDir="up" subtitle="aktif müşteri · son 30 gün" />
  <ux7:ExKPI id="list2" variant="list" color="blue" title="Pipeline coverage" value="€12.4M" trend="+18%" trendDir="up" subtitle="3.4× quota · enterprise weighted" />
</l:Grid>

<!-- 08 · Breakdown -->
<Toolbar design="Transparent">
  <Title text="08 · Breakdown" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L6 M12 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI id="bd1" variant="breakdown" color="blue" title="Revenue by channel" value="€4.82M" />
  <ux7:ExKPI id="bd2" variant="breakdown" color="green" title="Time spent — user session" value="14m 22s" trend="+18%" trendDir="up" />
</l:Grid>

<!-- 09 · Status -->
<Toolbar design="Transparent">
  <Title text="09 · Status (live)" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L3 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI variant="status" color="green" title="API uptime" value="99.98" unit="%" statusLevel="ok" statusText="Operational" subtitle="son 30 gün · 12 dk kesinti" />
  <ux7:ExKPI variant="status" color="amber" title="Queue depth" value="12,402" statusLevel="warn" statusText="Elevated" subtitle="eşik 10K · auto-scale tetiklendi" />
  <ux7:ExKPI variant="status" color="magenta" title="Failed payments" value="38" statusLevel="danger" statusText="Action required" subtitle="son 1 saat · gateway timeout" />
  <ux7:ExKPI variant="status" color="blue" title="P95 latency" value="124" unit="ms" statusLevel="ok" statusText="Healthy" subtitle="target ≤ 200ms" />
</l:Grid>

<!-- 10 · Accent -->
<Toolbar design="Transparent">
  <Title text="10 · Accent bar" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L4 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI variant="accent" color="green" title="Revenue · Q3" value="€4.82M" trend="+12.4%" trendDir="up" subtitle="vs Q2" />
  <ux7:ExKPI variant="accent" color="amber" title="Cost · Q3" value="€2.31M" trend="+4.8%" trendDir="up" subtitle="within budget" />
  <ux7:ExKPI variant="accent" color="purple" title="Margin · Q3" value="52.0" unit="%" trend="+340 bp" trendDir="up" subtitle="vs Q2" />
</l:Grid>

<!-- 11 · Gradient -->
<Toolbar design="Transparent">
  <Title text="11 · Gradient hero" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L4 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI id="grd1" variant="gradient" color="blue" title="Cash on hand" value="€18.4M" trend="+24%" trendDir="up" subtitle="runway 28 ay" />
  <ux7:ExKPI id="grd2" variant="gradient" color="green" title="ARR" value="€56.2M" trend="+38%" trendDir="up" subtitle="net retention 124%" />
  <ux7:ExKPI id="grd3" variant="gradient" color="magenta" title="NPS" value="62" trend="+8" trendDir="up" subtitle="son 90 gün · 1,420 yanıt" />
</l:Grid>

<!-- 12 · Glass -->
<Toolbar design="Transparent">
  <Title text="12 · Glass on dark" level="H3" />
</Toolbar>
<Panel class="ex-kpi-bg-dark sapUiSmallMarginBottom" backgroundDesign="Transparent">
  <l:Grid defaultSpan="L3 M6 S12" hSpacing="1" vSpacing="1">
    <ux7:ExKPI id="gl1" variant="glass" color="cyan" title="Throughput" value="12.4" unit="K/s" subtitle="peak 14.8K/s" />
    <ux7:ExKPI id="gl2" variant="glass" color="green" title="Error rate" value="0.02" unit="%" subtitle="SLO 99.95% met" />
    <ux7:ExKPI id="gl3" variant="glass" color="purple" title="Concurrent" value="4,820" subtitle="+340 son 5 dk" />
    <ux7:ExKPI id="gl4" variant="glass" color="amber" title="Avg session" value="8m 14s" subtitle="+22% bu hafta" />
  </l:Grid>
</Panel>

<!-- 13 · Legacy (solid / outline) -->
<Toolbar design="Transparent">
  <Title text="13 · Legacy variants (geriye uyum)" level="H3" />
</Toolbar>
<l:Grid defaultSpan="L4 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExKPI variant="solid" color="green" icon="💰" title="Toplam Gelir" value="48,250" unit="₺" trend="+12.5%" trendDir="up" subtitle="Geçen aya kıyasla" clickable="true" />
  <ux7:ExKPI variant="outline" color="blue" icon="👁" title="Ziyaretçi" value="24500" prevValue="21000" subtitle="Bu hafta" />
  <ux7:ExKPI variant="outline" color="red" icon="⏱" title="Yükleme Süresi" value="1.8" prevValue="1.5" unit="s" subtitle="Yavaşladı" />
</l:Grid>