MetricWidget is a compact visual widget designed to display a single metric (property) from the marketing plan. It is commonly used for dashboards and summary blocks, providing a clean and visually appealing way to present key numbers.
Basic configuration example:
<ui-metric-widget property-alias="PV" :offset="1" :tree-id="0" :account-id="2" :number-periods-back="0" icon-class="mdi-home" background-class="bg-green" :total-round="true" title="Personal Hub" postfix="CV" :plain-type="false" > </ui-metric-widget>
The widget fetches the specified property from the backend and renders it with optional formatting, postfixes, icons, and background styles.
Main parameters:
- property-alias — alias of the property to be displayed in the widget
- icon-class — icon name (e.g. Material Design Icons)
- background-class — CSS class for the widget background
- :total-round — whether the final value should be rounded
- :number-periods-back — how many periods back to fetch data from
- :offset — period offset
- title — widget title
- postfix — postfix displayed after the value
- :plain-type — if
true, disables formatting and postfixes, rendering only the raw value
Additional visual settings:
- header-color — background color of the widget header
- :font-size — font size of the displayed value
New parameters:
force-value="100"
link-template="/{{site_language}}/network/view-network/?nodeId={{s.id.raw}}"
hint="Monthly Total Sales of Subscriptions include your own subscription and
the subscriptions of your direct referrals."- force-value — forces a static value and disables backend fetching (in this case
property-aliasis not required) - link-template — if specified, the widget becomes a clickable link
- hint — tooltip text displayed on hover
Slot parameters
The widget exposes a default slot that provides access to internal values:
- accountId — user account ID
- rawValue — raw property value returned from the backend
- wMM —
wearMoneyMaskfunction that formats numeric values
Slot usage example:
<ui-metric-widget
class="v-col-md-3"
property-alias="PV"
icon-class="mdi-account"
background-class="bg-green"
:number-periods-back="0"
:tree-id="0"
id="mw0"
:font-size="30"
:offset="1"
postfix=""
:plain-type="false"
:total-round="false"
>
<template #default="props">
z = {{ props.wMM(10000) }}
rv = {{ props.rawValue }}
id = {{ props.accountId }}
</template>
</ui-metric-widget>This allows you to fully override or extend the widget’s rendering logic while still using its data-fetching and formatting capabilities.
Note: All of the settings can be customized either from admin panel by manually editing code or from within the back office by pressing on a cog icon in a left upper corner of the page (only accessible when "Online office admin" flag is presented).