Skip to main content

Metric widget

Updated

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-alias is 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 — wearMoneyMask function 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).

Related articles