ExChart

<!-- ════════════════════════════════════════════ -->
<!--  KPI STRIP — chartType="kpi"                  -->
<!-- ════════════════════════════════════════════ -->
<l:Grid defaultSpan="L3 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMargin">
  <ux7:ExChart id="kpiRevenue" chartType="kpi" kpiLabel="MTD Revenue" kpiValue="€4.82M" kpiDelta="+12.4%" colorTheme="vivid" />
  <ux7:ExChart id="kpiNew" chartType="kpi" kpiLabel="New customers" kpiValue="412" kpiDelta="+8.1%" colorTheme="green" />
  <ux7:ExChart id="kpiActive" chartType="kpi" kpiLabel="Active users" kpiValue="8,240" kpiDelta="+3.2%" colorTheme="purple" />
  <ux7:ExChart id="kpiChurn" chartType="kpi" kpiLabel="Churn rate" kpiValue="2.4%" kpiDelta="-0.6%" colorTheme="orange" />
</l:Grid>


<!-- ════════════════════════════════════════════ -->
<!--  01 · TRENDS                                  -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="01 · Trends" level="H3" />
</Toolbar>

<l:Grid defaultSpan="L8 M12 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExChart id="chartRevenue" chartType="area" title="Revenue trend" subtitle="Aylık ciro · gerçekleşen vs forecast" height="300px" colorTheme="vivid" numberFormat="currency" currency="€" showLegend="true" />
  <ux7:ExChart id="chartDonut" chartType="doughnut" title="Channel mix" subtitle="Q3 cirosunun kanal dağılımı" height="300px" colorTheme="mixed" numberFormat="default" cutout="68%" showLegend="true" />
</l:Grid>

<l:Grid defaultSpan="L8 M12 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExChart id="chartStack" chartType="stackedBar" title="Channel revenue by month" subtitle="Stacked breakdown · son 8 ay" height="300px" colorTheme="vivid" numberFormat="currency" />
  <ux7:ExChart id="chartGauge" chartType="gauge" title="Quota attainment" subtitle="€4.5M / €6.0M" height="280px" colorTheme="green" numberFormat="percent" gaugeMin="0" gaugeMax="100" />
</l:Grid>


<!-- ════════════════════════════════════════════ -->
<!--  02 · COMPARISONS                             -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="02 · Comparisons" level="H3" />
</Toolbar>

<l:Grid defaultSpan="L6 M12 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExChart id="chartMixed" chartType="mixed" title="Forecast vs actual" subtitle="Çeyrekler · forecast line" height="280px" colorTheme="vivid" numberFormat="currency" />
  <ux7:ExChart id="chartRegional" chartType="horizontalBar" title="Regional performance" subtitle="Q3 gerçekleşen + hedef çizgisi" height="280px" colorTheme="green" numberFormat="currency" targetValue="3500" targetLabel="Hedef" />
</l:Grid>

<l:Grid defaultSpan="L6 M12 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExChart id="chartBar" chartType="bar" title="Aylık satışlar" subtitle="Bar with data labels" height="280px" colorTheme="blue" numberFormat="compact" dataLabels="true" />
  <ux7:ExChart id="chartLine" chartType="line" title="Ziyaretçi trendi" subtitle="Multi-line · smooth" height="280px" colorTheme="purple" numberFormat="compact" />
</l:Grid>


<!-- ════════════════════════════════════════════ -->
<!--  03 · DISTRIBUTIONS                           -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="03 · Distributions" level="H3" />
</Toolbar>

<l:Grid defaultSpan="L4 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExChart id="chartPie" chartType="pie" title="Bütçe kullanımı" subtitle="Departman bazlı" height="280px" colorTheme="mixed" />
  <ux7:ExChart id="chartPolar" chartType="polarArea" title="Product category mix" subtitle="Toplam katkı oranı" height="280px" colorTheme="vivid" />
  <ux7:ExChart id="chartDoughnut2" chartType="doughnut" title="Pastel donut" subtitle="Theme: pastel" height="280px" colorTheme="pastel" cutout="60%" />
</l:Grid>


<!-- ════════════════════════════════════════════ -->
<!--  04 · MULTI-DIM                               -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="04 · Multi-dimensional" level="H3" />
</Toolbar>

<l:Grid defaultSpan="L6 M12 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExChart id="chartRadar" chartType="radar" title="Performance review" subtitle="Bu çeyrek vs geçen çeyrek" height="320px" colorTheme="vivid" />
  <ux7:ExChart id="chartBubble" chartType="bubble" title="Opportunity matrix" subtitle="Aciliyet × olasılık × büyüklük" height="320px" colorTheme="vivid" />
</l:Grid>

<l:Grid defaultSpan="L6 M12 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExChart id="chartScatter" chartType="scatter" title="Scatter — anomali" subtitle="Tüm noktalar tek seri" height="280px" colorTheme="orange" />
  <ux7:ExChart id="chartMono" chartType="bar" title="Mono theme" subtitle="Theme: mono · gradient yok" height="280px" colorTheme="mono" useGradient="false" />
</l:Grid>


<!-- ════════════════════════════════════════════ -->
<!--  05 · SPARKLINES                              -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="05 · Sparklines (inline)" level="H3" />
</Toolbar>

<l:Grid defaultSpan="L3 M6 S12" hSpacing="1" vSpacing="1" class="sapUiSmallMarginBottom">
  <ux7:ExChart id="sparkA" chartType="sparkline" height="80px" colorTheme="blue" />
  <ux7:ExChart id="sparkB" chartType="sparkline" height="80px" colorTheme="green" />
  <ux7:ExChart id="sparkC" chartType="sparkline" height="80px" colorTheme="purple" />
  <ux7:ExChart id="sparkD" chartType="sparkline" height="80px" colorTheme="orange" />
</l:Grid>


<!-- ════════════════════════════════════════════ -->
<!--  06 · INTERACTIVE CONTROLS                    -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="06 · Interactive controls" level="H3" />
</Toolbar>

<ux7:ExChart id="chartInteractive" chartType="line" title="Tema / tip / data değiştir" subtitle="Aşağıdaki butonlarla canlı kontrol" height="320px" colorTheme="vivid" numberFormat="currency" pointClick="onPointClick" pointHover="onPointHover" />

<FlexBox wrap="Wrap" class="sapUiSmallMarginBottom" gap="0.5rem">
  <ux7:ExButton type="secondary" text="Bar" press="onSetTypeBar" />
  <ux7:ExButton type="secondary" text="Line" press="onSetTypeLine" />
  <ux7:ExButton type="secondary" text="Area" press="onSetTypeArea" />
  <ux7:ExButton type="secondary" text="Stacked bar" press="onSetTypeStacked" />
  <ux7:ExButton type="secondary" text="Horizontal" press="onSetTypeHorizontal" />
  <ux7:ExButton type="secondary" text="Mixed" press="onSetTypeMixed" />
  <ux7:ExButton type="secondary" text="Doughnut" press="onSetTypeDoughnut" />

  <ux7:ExButton type="tertiary" text="Vivid" press="onThemeVivid" />
  <ux7:ExButton type="tertiary" text="Blue" press="onThemeBlue" />
  <ux7:ExButton type="tertiary" text="Pastel" press="onThemePastel" />
  <ux7:ExButton type="tertiary" text="Mono" press="onThemeMono" />

  <ux7:ExButton type="primary" text="Refresh data" press="onRefreshData" />
  <ux7:ExButton type="danger" text="Toggle target" press="onToggleTarget" />
</FlexBox>