Koala logo Design
No matches for “
↑↓ navigate open Esc close
PrimitivesDisplayMetric

Metric

Read-only figure: KPI tile, stat card, progress donut, meter, money and phone.

<koala-kpi-tile>

KPI tile

£64,480

18% vs last month

12

3 vs last month

6%

2 pts vs last month

2 fell through

Linking tile

href makes the tile navigate: hover-lift and a trailing arrow

Stat card

£325,000
Freehold
Awaiting

Leaderboard

Top performers

By instructions

1 Saxton Mee 23
2 Bright Move 17
3 Home Hub 11
4 Castle Estates 6
5 Nest & Co 3

Lowest performers

By instructions

Meadow Lettings 0
Oak & Stone 0
Riverside Homes 1
Park Lane Sales 2
Vale Property 2

Progress donut

0%
60%
100%

Progress bar

Joey's checking each file…0 of 34 checked
Joey's checking each file…12 of 34 checked
Joey's checking each file…34 of 34 checked

Meter

Target progress

Fill runs from zero to the actual as a share of the target, capped at 100% and turning green once the target is met.

Quotes issued

308

of 398

90 to go

Quotes accepted

844

of 900

Target met

Money

Inline
£1,240.50
inc-vat="true"
£1,240.50 (inc. VAT)
original-value
£990.00 (inc. VAT) Original price: £1,240.50
Total panel
£990.00 inc. VAT
£1,240.50
EARLY20 saves £250.50

Phone

07700 900123

API

label string (koala-kpi-tile, koala-stat-card, koala-money total panel)
value string (koala-kpi-tile/koala-stat-card)decimal (koala-money)
subline string? (koala-kpi-tile)
tabular bool (koala-kpi-tile, koala-stat-card)
danger bool (koala-kpi-tile)
percent int 0-100 (koala-progress-donut)
count int? (koala-progress-donut)
tooltip string? (koala-progress-donut)
href URL (koala-kpi-tile makes it navigate, koala-meter)
max int (koala-meter)
bar bool, default true (koala-meter)
target string, default main (koala-meter); decimal, bar hidden when ≤ 0 (koala-target-progress)
original-value decimal? (koala-money)
inc-vat bool (koala-money)
discount-code string? (koala-money)
discount-saves decimal? (koala-money)
discretionary-saves decimal? (koala-money)
actual decimal (koala-target-progress)
format string numeric format, default 0 (koala-target-progress)
number string (koala-phone)
icon-only bool (koala-phone)
size ExtraSmallSmallDefaultLargeExtraLarge (koala-phone)
title string (koala-leaderboard)
caption string? (koala-leaderboard)
numbered bool, default true (koala-leaderboard)
tone NeutralPrimarySuccessDangerWarningInfo (koala-leaderboard)
icon IconName? header graphic (koala-leaderboard)
empty-text string (koala-leaderboard)
model IReadOnlyList<LeaderboardRow(Label, Value)> (koala-leaderboard)