Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Standard

Description

Purpose: The Standard Progress Meter is usually the tool of choice. The Progress Meter informs users about their Progress compared to a the required maximum.
Composition: The Standard Progress Meter is composed of one bar representing a value achieved in relation to a maximum and a required value indicated by some pointer. The comparison value is represented by a second bar below the first one. Also the percentage values of main and required are shown as text.
Effect: On changing screen size they decrease their size including font size in various steps.

Rules

Composition

Standard Progress Meters MAY contain a comparison value. If there is a comparison value it MUST be a numeric value between 0 and the maximum. It is represented as the second bar.
Standard Progress Meters MAY contain a main value text.
Standard Progress Meters MAY contain a required value text.

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Chart\ProgressMeter\Standard;
 
/**
 * Example for rendering a standard Progress Meter with minimum configuration
 */
function base()
{
    //Loading factories
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Generating and rendering the standard progressmeter
    $progressmeter = $f->chart()->progressMeter()->standard(100, 75);
 
    // render
    return $renderer->render($progressmeter);
}

Example 2: Maximum configuration

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Chart\ProgressMeter\Standard;
 
/**
 * Example for rendering a standard Progress Meter with maximum configuration
 */
function maximum_configuration()
{
    //Loading factories
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Generating and rendering the standard progressmeter
    $progressmeter = $f->chart()->progressMeter()->standard(100, 75, 80, 50);
 
    // add score text
    $progressmeter = $progressmeter->withMainText('Your Score');
 
    // add required text
    $progressmeter = $progressmeter->withRequiredText('Required Score');
 
    // render
    return $renderer->render($progressmeter);
}

Example 3: Only comparison value

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Chart\ProgressMeter\Standard;
 
/**
 * Example for rendering a standard Progress Meter with an comparison value only
 */
function only_comparison_value()
{
    //Loading factories
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Generating and rendering the standard progressmeter
    $progressmeter = $f->chart()->progressMeter()->standard(100, 0, 75, 50);
 
    // render
    return $renderer->render($progressmeter);
}

Example 4: User reached required

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Chart\ProgressMeter\Standard;
 
/**
 * Example for rendering a standard Progress Meter when the required value was reached
 */
function user_reached_required()
{
    //Loading factories
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Generating and rendering the standard progressmeter
    $progressmeter = $f->chart()->progressMeter()->standard(100, 80, 75);
 
    // render
    return $renderer->render($progressmeter);
}

Relations

Parents

UIComponent
Chart
Progress Meter