Skip to main content

RankProgressAdvanced

Updated

The RankProgressAdvanced component displays the user's progress based on specified metrics, shows the current achieved rank, and supports JavaScript expressions for dynamic calculations.

Metric Object Scheme

The metric object defines how each metric is calculated and displayed:

interface AdvancedMetricDefinition {
    /** Metric identifier, e.g., 'm.PV' */
    metric: string;

    /** Expression to calculate the current value of the metric */
    value: string;

    /** Expression for the maximum value (optional) */
    max?: string;

    /** Metric title */
    title?: string;

    /** Progress bar color */
    color?: string;

    /** Background color */
    bgColor?: string;

    /** Color of completed progress */
    colorDone?: string;

    /** Striped progress bar */
    striped?: boolean;

    /** Label as percentage */
    labelIsPercent?: boolean;

    /** Rounded corners */
    rounded?: boolean;

    /** Size of the progress bar */
    size?: number;

    /** CSS class for the title */
    titleClass?: string;

    /** CSS class for the label */
    labelClass?: string;

    /** Metric type - percent, percent-outside */
    type?: string;
}

Examples of Expressions (for the value property)

The value property supports JavaScript expressions:

// Simple value
value: 'm.QV'

// Upper limit
value: 'Math.min(m.PV, 5000)'

// Conditional logic
value: 'm.PV  1000 ? m.PV * 1.2 : m.PV'

// Combining metrics
value: 'm.LeftVol + m.RightVol'

// Using mathematical functions
value: 'Math.sqrt(m.Sales) * 100'

Rank Object Scheme

The rank object defines the conditions for achieving each rank:

interface AdvancedRankLevel {
  id: number;           // Unique identifier
  title: string;        // Rank title
  levels: {             // Conditions for achievement
    [metricKey: string]: string; // Levels (see example below)
  };
  nextRank?: number;    // ID of the next rank
  description?: string; // HTML description
}

Example of a Rank Object

[
  { id: 0, title: 'No Rank', levels: { 'm.QV': '0', 'm.CommissionBase': '0' }, nextRank: 1 },
  { id: 1, title: '1-Star Manager', levels: { 'm.QV': '600', 'm.CommissionBase': '0' }, nextRank: 2 },
  { id: 2, title: '2-Star Manager', levels: { 'm.QV': '1000', 'm.CommissionBase': '0' }, nextRank: 3 },
  { id: 3, title: '3-Star Manager', levels: { 'm.QV': '2000', 'm.CommissionBase': '0' }, nextRank: 4 },
  { id: 4, title: '4-Star Manager', levels: { 'm.QV': '3000', 'm.CommissionBase': '0' }, nextRank: 5 },
  { id: 5, title: '5-Star Manager', levels: { 'm.QV': '5000', 'm.CommissionBase': '0' }, nextRank: 6 },
  { id: 6, title: '1-Star Supervisor', levels: { 'm.QV': '10000', 'm.CommissionBase': '1000' }, nextRank: 7 },
  { id: 7, title: '2-Star Supervisor', levels: { 'm.QV': '15000', 'm.CommissionBase': '2000' }, nextRank: 8 },
  { id: 8, title: '3-Star Supervisor', levels: { 'm.QV': '20000', 'm.CommissionBase': '3000' }, nextRank: 9 },
  { id: 9, title: '4-Star Supervisor', levels: { 'm.QV': '30000', 'm.CommissionBase': '4000' }, nextRank: 10 },
  { id: 10, title: '5-Star Supervisor', levels: { 'm.QV': '50000', 'm.CommissionBase': '5000' }, nextRank: 11 },
  { id: 11, title: '1-Star Director', levels: { 'm.QV': '100000', 'm.CommissionBase': '10000' }, nextRank: 12 },
  { id: 12, title: '2-Star Director', levels: { 'm.QV': '200000', 'm.CommissionBase': '20000' }, nextRank: 13 },
  { id: 13, title: '3-Star Director', levels: { 'm.QV': '300000', 'm.CommissionBase': '30000' }, nextRank: 14 },
  { id: 14, title: '4-Star Director', levels: { 'm.QV': '500000', 'm.CommissionBase': '50000' }, nextRank: 15 },
  { id: 15, title: '5-Star Director', levels: { 'm.QV': '750000', 'm.CommissionBase': '75000' }, nextRank: 16 },
  { id: 16, title: 'Ambassador', levels: { 'm.QV': '1000000', 'm.CommissionBase': '100000' }, nextRank: 17 },
  { id: 17, title: 'Vice President', levels: { 'm.QV': '2000000', 'm.CommissionBase': '200000' }, nextRank: 18 },
  { id: 18, title: 'President', levels: { 'm.QV': '4000000', 'm.CommissionBase': '400000' }, nextRank: 19 },
  { id: 19, title: 'Founder', levels: { 'm.QV': '6000000', 'm.CommissionBase': '600000' } }
]

Usage Examples Scenario 1: Simple Rank System

<ui-rank-progress-advanced
  :metrics="[
    { metric: 'm.Sales', title: 'Sales', value: 'm.Sales' }
  ]"
  :ranks="[
    { id: 1, title: 'Junior Manager', levels: { 'm.Sales': '1000' }, nextRank: 2},
    { id: 2, title: 'Senior Manager', levels: { 'm.Sales': '5000' }}
  ]"
></ui-rank-progress-advanced>

Scenario 2: Complex Conditions

<ui-rank-progress-advanced
  :metrics="[
    {
      metric: 'm.QV',
      title: 'Qualification Volume',
      value: 'm.QV + m.CommissionBase',
      color: '#64E479',
      bgColor: 'lightgrey',
    },
    {
      metric: 'm.CommissionBase',
      title: 'Commission Volume',
      value: 'Math.min(m.RightVol + m.rCO, m.LeftVol + m.lCO)',
      color: '#0AE9F0',
      bgColor: 'lightgrey',
    },
  ]"
  :ranks="[
    { id: 0, title: 'No Rank', levels: { 'm.QV': '0', 'm.CommissionBase': '0' }, nextRank: 1 },
    { id: 1, title: '1-Star Manager', levels: { 'm.QV': '600', 'm.CommissionBase': '0' }, nextRank: 2 },
    { id: 2, title: '2-Star Manager', levels: { 'm.QV': '1000', 'm.CommissionBase': '0' }, nextRank: 3 },
    { id: 3, title: '3-Star Manager', levels: { 'm.QV': '2000', 'm.CommissionBase': '0' }, nextRank: 4 },
    { id: 4, title: '4-Star Manager', levels: { 'm.QV': '3000', 'm.CommissionBase': '0' }, nextRank: 5 },
    { id: 5, title: '5-Star Manager', levels: { 'm.QV': '5000', 'm.CommissionBase': '0' }, nextRank: 6 },
    { id: 6, title: '1-Star Supervisor', levels: { 'm.QV': '10000', 'm.CommissionBase': '1000' }, nextRank: 7 },
    { id: 7, title: '2-Star Supervisor', levels: { 'm.QV': '15000', 'm.CommissionBase': '2000' }, nextRank: 8 },
    { id: 8, title: '3-Star Supervisor', levels: { 'm.QV': '20000', 'm.CommissionBase': '3000' }, nextRank: 9 },
    { id: 9, title: '4-Star Supervisor', levels: { 'm.QV': '30000', 'm.CommissionBase': '4000' }, nextRank: 10 },
    { id: 10, title: '5-Star Supervisor', levels: { 'm.QV': '50000', 'm.CommissionBase': '5000' }, nextRank: 11 },
    { id: 11, title: '1-Star Director', levels: { 'm.QV': '100000', 'm.CommissionBase': '10000' }, nextRank: 12 },
    { id: 12, title: '2-Star Director', levels: { 'm.QV': '200000', 'm.CommissionBase': '20000' }, nextRank: 13 },
    { id: 13, title: '3-Star Director', levels: { 'm.QV': '300000', 'm.CommissionBase': '30000' }, nextRank: 14 },
    { id: 14, title: '4-Star Director', levels: { 'm.QV': '500000', 'm.CommissionBase': '50000' }, nextRank: 15 },
    { id: 15, title: '5-Star Director', levels: { 'm.QV': '750000', 'm.CommissionBase': '75000' }, nextRank: 16 },
    { id: 16, title: 'Ambassador', levels: { 'm.QV': '1000000', 'm.CommissionBase': '100000' }, nextRank: 17 },
    { id: 17, title: 'Vice President', levels: { 'm.QV': '2000000', 'm.CommissionBase': '200000' }, nextRank: 18 },
    { id: 18, title: 'President', levels: { 'm.QV': '4000000', 'm.CommissionBase': '400000' }, nextRank: 19 },
    { id: 19, title: 'Founder', levels: { 'm.QV': '6000000', 'm.CommissionBase': '600000' } }
  ]"
></ui-rank-progress-advanced>

Additional Parameters

<ui-rank-progress-advanced
  :ranks="ranks"
  :metrics="metrics"
  next-rank-template="Next rank {{title}}"
  earned-rank-template="Earned rank {{title}}"
  title="Dynamic Rank Progress"
></ui-rank-progress-advanced>

Title and Templates

The title is the header of the window (card) displayed at the top of the rank progress component. It is set via the title input parameter. If not provided, the component automatically displays the default title — "Rank Progress".

The component displays titles for the current achieved rank and the next rank. To make titles flexible, the component uses templates with the placeholder {{title}}, which is replaced with the actual rank title.

nextRankTemplate and earnedRankTemplate allow you to customize the text for the next and earned ranks. For example:

next-rank-template='Your next level: {{title}}'
earned-rank-template='Earned rank: {{title}}'

If no template is specified, the default text is displayed: "Next Rank: [title]" and "Earned Rank: [title]".

PropertyDefaultTypeDescription
metrics—ArrayList of metric objects
ranks—ArrayList of rank objects
next-rank-template"Next rank {{title}}"StringTemplate for the next rank title
earned-rank-template"Earned rank {{title}}"StringTemplate for the earned rank title
title"Rank Progress"StringTitle of the component
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