Skip to main content

RankProgress

Updated

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:

propsdefaulttypedescription
:metrics"['m.PV', 'm.Downline']"ArrayArray of metrics that will be displayed in the widget.
:ranks—ArrayArray 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—StringProperty name that contains the current rank (read from backend data by this field).
:tree-id0NumberTree ID used to request account metrics from the server (only if :data-item is not used).
:data-item—ObjectCurrent account metrics object. If not provided, the widget requests the data from the server. (Mostly used for debugging.)
:no-skip-levelfalseBooleanIf true, prevents the earned rank for the next period from being more than 1 level above the current rank.
:no-rank-dropfalseBooleanIf true, prevents earnedRank from being lower than currentRank.
title—StringWidget window title. Templates are supported: {{yourCurrentRank}}, {{yourNextRank}}, {{currentRankTitle}}, {{earnedRankTitle}}, {{nextGoalRankTitle}}.
header-class—StringHeader CSS class.
:metric-titles—ObjectOverrides 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).