PageAnalytics Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Analytics page. Slots: period, kpis, trend, breakdown, table.

Jump to API reference

Import

Vue
import { UiPageAnalytics } from '@ziyarago/ui-pro/vue'

Default

Analytics

Section

Period slot
KPI strip slot
Trend chart slot
Breakdown slot
Detail table slot
Vue
<UiPageAnalytics title="Analytics" subtitle="Section">
  <template #period>Period slot</template>
  <template #kpis>KPI strip slot</template>
  <template #trend>Trend chart slot</template>
  <template #breakdown>Breakdown slot</template>
  <template #table>Detail table slot</template>
</UiPageAnalytics>

API reference

Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.

Props

PropType and valuesDefaultDescription
titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.
subtitlestring—Caption under the heading.
crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

Vue: named slots. React: a prop with the same name; default is children.

headerCustom page header; replaces the built-in title/subtitle/crumbs header.
actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
periodPeriod presets and compare toggle; SegmentedControl, Select, Switch.
kpisHeadline numbers with deltas; KpiTile, StatLine.
trendMain time series; ChartCard with MiniChart.
breakdownSplit by channel or country; ChartCard with SegBar and CountryRow.
tableRows behind the numbers; DataTable.

Notes

  • Place inside AppShell; fill only the slots you need.
  • Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot.