RankProgress — The Road to Success
RankProgress is a widget that helps users track their rank growth in a clear, goal-oriented way. It compares your current results against the requirements for each rank and shows what you have already earned for the next period, as well as what you can still reach in the current period.
Configuration:
<ui-rank-progress
:metrics="['m.PV', 'm.Downline']"
:ranks="[
{ title: 'Level 1', levels: { 'm.PV': 1000, 'm.Downline': 2 }, vars: { 'paid': '1k' } },
{ title: 'Level 2', levels: { 'm.PV': 1500, 'm.Downline': 3 }, vars: { 'paid': '1.5k' } },
{ title: 'Level 3', levels: { 'm.PV': 2000, 'm.Downline': 4 }, vars: { 'paid': '2k' } },
{ title: 'Level 4', levels: { 'm.PV': 2500, 'm.Downline': 5 }, vars: { 'paid': '3k' } },
{ title: 'Level 5', levels: { 'm.PV': 3000, 'm.Downline': 6 }, vars: { 'paid': '4k' } },
{ title: 'Level 6', levels: { 'm.PV': 3500, 'm.Downline': 7 }, vars: { 'paid': '5k' } },
{ title: 'Level 7', levels: { 'm.PV': 4000, 'm.Downline': 8 }, vars: { 'paid': '8k' } },
{ title: 'Level 8', levels: { 'm.PV': 4500, 'm.Downline': 9 }, vars: { 'paid': '13k' } },
{ title: 'Level 9', levels: { 'm.PV': 5000, 'm.Downline': 10 }, vars: { 'paid': '15k' } },
]"
:tree-id="0"
title="{{currentRank}} {{currentRankTitle}}, {{nextRank}} {{nextRankTitle}}"
header-class="bg-primary text-on-primary"
:metric-titles="{
'm.PV': 'Personal Volume',
'm.Downline': 'Your personal army',
}"
:data-item="{ // This is for debugging only
'm.PV': { raw: 2600, presentable: '2000 CV' },
'm.Downline': { raw: 4, presentable: '5' },
'm.AR': { raw: 1, presentable: 'Level 5' },
}"
rank-field="m.AR"
:no-skip-level="false"
:no-rank-drop="false"
>
<template #default="sp">
<ui-rank-progress-metric
metric-type="custom"
title="You will receive:"
:label="sp.earnedRank?.vars?.paid || '-'"
:no-checkbox="true"
></ui-rank-progress-metric>
<ui-rank-progress-metric
class="mb-4"
metric-type="custom"
title="Next Rank:"
:label="sp.earnedRankTitle"
:no-checkbox="true"
></ui-rank-progress-metric>
</template>
<template #after="sp">
<p>Presentable PV = {{ sp.p('m.PV') }}</p>
<p>Raw Downline = {{ sp.r('m.Downline') }}</p>
<p v-if="sp.notReachedFirstRank">You have not earned any rank in current period!</p>
<p v-if="sp.reachedMaxRank">You have reached the top rank for the next period!</p>
<p>Current Effective Rank = {{ sp.currentRankTitle }}</p>
<p>Earned Rank for next Period = {{ sp.earnedRankTitle }}</p>
<p>Next Goal Rank = {{ sp.nextGoalRankTitle }}</p>
<p>Currently your receiving <b>{{ sp.currentRank?.vars?.paid || '-' }}</b> (custom rank variable)</p>
<p>Next period you will receive <b>{{ sp.earnedRank?.vars?.paid || '-' }}</b> (custom rank variable)</p>
<p>If you push a little more, you will receive <b>{{ sp.nextGoalRank?.vars?.paid || '-' }}</b> (custom rank variable)</p>
<p>Current Metric State = {{ sp.metricData }}</p>
</template>
</ui-rank-progress>Props overview:
| props | default | type | description |
| :metrics | "['m.PV', 'm.Downline']" | Array | Array of metrics that will be displayed in the widget. |
| :ranks | — | Array | Array of ranks used to determine the current / earned / next goal rank. The vars field allows you to pass custom rank values into templates (as shown in the example). |
| rank-field | — | String | Property name that contains the current rank (read from backend data by this field). |
| :tree-id | 0 | Number | Tree ID used to request account metrics from the server (only if :data-item is not used). |
| :data-item | — | Object | Current account metrics object. If not provided, the widget requests the data from the server. (Mostly used for debugging.) |
| :no-skip-level | false | Boolean | If true, prevents the earned rank for the next period from being more than 1 level above the current rank. |
| :no-rank-drop | false | Boolean | If true, prevents earnedRank from being lower than currentRank. |
| title | — | String | Widget window title. Templates are supported: {{yourCurrentRank}}, {{yourNextRank}}, {{currentRankTitle}}, {{earnedRankTitle}}, {{nextGoalRankTitle}}. |
| header-class | — | String | Header CSS class. |
| :metric-titles | — | Object | Overrides metric titles displayed in the widget. |
Templates:
Templates are available for each metric, plus the global default template (content displayed above the metrics list) and the after template (content displayed below the metrics list). Inside templates, many helper parameters are available (as demonstrated in the full example).
You can also use the helper component ui-rank-progress-metric to render either a metric or arbitrary text inside the metrics layout while keeping the same table-like visual style.
Simple usage example:
<ui-rank-progress
:metrics="['m.PV', 'm.Downline']"
:ranks="[
{ title: 'Level 1', levels: { 'm.PV': 1000, 'm.Downline': 2 }, vars: { 'paid': '1k' } },
{ title: 'Level 2', levels: { 'm.PV': 1500, 'm.Downline': 3 }, vars: { 'paid': '1.5k' } },
{ title: 'Level 3', levels: { 'm.PV': 2000, 'm.Downline': 4 }, vars: { 'paid': '2k' } },
]"
:tree-id="0"
>
<template #default="sp">
<h4>Next rank: {{ sp.earnedRankTitle }}</h4>
<p>You will be paid: <b>{{ sp.earnedRank?.vars.paid || '-' }}</b></p>
</template>
</ui-rank-progress>New metrics format:
<ui-rank-progress title="TEAM AFFILIATE RANK PROGRESS"
:metrics="[
{metric: 'm.FrontlineBuyers', type: 'percent', striped: true},
{metric: 'm.DV_NFT', type: 'percent', labelIsPercent: true},
{metric: 'm.FrontlineSubscribers', type: 'percent', titleClass: 'ml-6 text-white', color: '#3A66DD', colorDone: '#0A43F1', labelIsPercent: true},
{metric: 'm.DV_Subscription', type: 'percent'}
]"
:tree-id="2"
:ranks="[{title: 'S10', levels: {'m.FrontlineBuyers': 1, 'm.DV_NFT': 28, 'm.FrontlineSubscribers': 1, 'm.DV_Subscription': 33}}, {title: 'S9', levels: {'m.FrontlineBuyers': 2, 'm.DV_NFT': 56, 'm.FrontlineSubscribers': 2, 'm.DV_Subscription': 66}}, {title: 'S8', levels: {'m.FrontlineBuyers': 3, 'm.DV_NFT': 84, 'm.FrontlineSubscribers': 3, 'm.DV_Subscription': 99}}, {title: 'S7', levels: {'m.FrontlineBuyers': 4, 'm.DV_NFT': 112, 'm.FrontlineSubscribers': 4, 'm.DV_Subscription': 132}}, {title: 'S6', levels: {'m.FrontlineBuyers': 5, 'm.DV_NFT': 140, 'm.FrontlineSubscribers': 5, 'm.DV_Subscription': 165}}, {title: 'S5', levels: {'m.FrontlineBuyers': 1, 'm.DV_NFT': 280, 'm.FrontlineSubscribers': 1, 'm.DV_Subscription': 99}}, {title: 'S4', levels: {'m.FrontlineBuyers': 2, 'm.DV_NFT': 560, 'm.FrontlineSubscribers': 2, 'm.DV_Subscription': 198}}, {title: 'S3', levels: {'m.FrontlineBuyers': 3, 'm.DV_NFT': 840, 'm.FrontlineSubscribers': 3, 'm.DV_Subscription': 297}}, {title: 'S2', levels: {'m.FrontlineBuyers': 4, 'm.DV_NFT': 1120, 'm.FrontlineSubscribers': 4, 'm.DV_Subscription': 396}}, {title: 'S1', levels: {'m.FrontlineBuyers': 5, 'm.DV_NFT': 1400, 'm.FrontlineSubscribers': 5, 'm.DV_Subscription': 495}}]"
:metric-titles="{}"
rank-field="m.Downline"
:no-skip-level="false"
:style-defaults="{
type: 'percent',
color: 'amber',
bgColor: 'gray',
colorDone: 'green',
striped: false,
labelIsPercent: false,
rounded: true,
size: 30,
titleClass: 'ml-6',
labelClass: 'mr-6'
}"
>
</ui-rank-progress>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).