The ProgressMetric component is a helper for rendering various types of progress bars. It is used in other components, such as RankProgress, but is also available for standalone use in page code.
Configuration Examples:
<ui-progress-metric class="pa-4" type="grid" :value="778" :max="1000" title="Downline" ></ui-progress-metric>
<ui-progress-metric class="pa-4" type="grid" :value="12300" :max="15000" :label-is-percent="true" title="CommissionBase" ></ui-progress-metric>
<ui-progress-metric class="pa-4" type="percent" :value="77" :max="100" color="light-blue" bg-color="grey" :size="30" title-class="ml-6 text-white" label-class="mr-6 text-black" title="Frontline" :rounded="true" :striped="true" ></ui-progress-metric>
<ui-progress-metric class="pa-4" type="percent" :value="100" :max="100" color="light-blue" bg-color="grey" :size="30" title-class="ml-6 text-white" label-class="mr-6 text-black" title="Frontline" :rounded="false" :striped="true" ></ui-progress-metric>
<ui-progress-metric class="pa-4" type="percent" :value="62" :max="100" color="amber" bg-color="grey" :size="60" label-class="mr-6 text-black" :rounded="true" :striped="true" :only-centered-label="true" ></ui-progress-metric>
<ui-progress-metric
class="pa-4"
type="stackable"
:size="100"
:rounded="true"
bg-color="rgba(0,0,0,0.1)"
:stacked-values="[
{
percent: 11,
bgColor: 'red',
},
{
percent: 22,
bgColor: 'blue',
showLabel: true,
labelClass: 'text-white text-h2',
},
{
percent: 33,
bgColor: 'green',
striped: true,
}]"
></ui-progress-metric>
<ui-progress-metric
class="pa-4"
type="stackable"
:size="100"
:rounded="true"
bg-color="rgba(0,0,0,0.1)"
:stacked-values="[
{
percent: 33.33,
bgColor: 'red',
showLabel: true,
rounded: true,
striped: true,
labelClass: 'text-white text-h2',
label: 'Benim',
},
{
percent: 33.33,
bgColor: 'purple',
showLabel: true,
rounded: true,
striped: true,
labelClass: 'text-white text-h2',
label: 'Guzel',
},
{
percent: 33.33,
bgColor: 'blue',
showLabel: true,
rounded: true,
striped: true,
labelClass: 'text-white text-h2',
label: 'Mutfak!',
}]"
></ui-progress-metric>
| Property | Default | Type | Description |
|---|---|---|---|
| type | 'grid' | String | Type of progress bar: 'grid', 'percent', or 'stackable'. |
| value | — | Number | Current progress value. |
| max | — | Number | Maximum progress value. |
| label-is-percent | false | Boolean | If true, the label is displayed as a percentage. |
| color | — | String | Color of the progress bar. |
| bg-color | — | String | Background color of the progress bar. |
| size | — | Number | Size of the progress bar in pixels. |
| title-class | — | String | CSS class for the title. |
| label-class | — | String | CSS class for the label. |
| title | — | String | Title of the progress bar. |
| rounded | false | Boolean | If true, the progress bar has rounded corners. |
| striped | false | Boolean | If true, the progress bar has stripes. |
| only-centered-label | false | Boolean | If true, the label is centered. |
| stacked-values | — | Array | Array of objects for stackable progress bars, each with percent, bgColor, showLabel, labelClass, rounded, striped, and label. |