PrimeFaces Extensions Showcase

MeterGroup

Basic usage examples of MeterGroup component demonstrating horizontal, vertical layouts and icon labels.

Basic

Apps (16%)
Messages (8%)
Media (24%)
System (10%)

Vertical

Apps (16%)
Messages (8%)
Media (24%)
System (10%)

Labels at Start

Apps (16%)
Messages (8%)
Media (24%)
System (10%)

Vertical Labels

Apps (16%)
Messages (8%)
Media (24%)
System (10%)

Source

XHTML page
Managed bean


                <ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pe="http://primefaces.org/ui/extensions">

    <p:growl id="growl" showDetail="true" showSummary="true"/>

    <div class="card">
        <h3>Basic</h3>
        <pe:meterGroup value="#{meterGroupController.meters}" />
    </div>

    <div class="card">
        <h3>Vertical</h3>
        <pe:meterGroup value="#{meterGroupController.meters}" orientation="vertical" style="height: 300px" />
    </div>

    <div class="card">
        <h3>Labels at Start</h3>
        <pe:meterGroup value="#{meterGroupController.meters}" labelPosition="start" />
    </div>

    <div class="card">
        <h3>Vertical Labels</h3>
        <pe:meterGroup value="#{meterGroupController.meters}" labelOrientation="vertical" />
    </div>

</ui:composition>


                @Named
@ViewScoped
public class MeterGroupController implements Serializable {

    private static final long serialVersionUID = 1L;

    private List<MeterGroupItem> meters;

    @PostConstruct
    public void init() {
        meters = new ArrayList<>();
        meters.add(new MeterGroupItem("Apps", 16, "#34d399", "pi pi-cog"));
        meters.add(new MeterGroupItem("Messages", 8, "#fbbf24", "pi pi-inbox"));
        meters.add(new MeterGroupItem("Media", 24, "#60a5fa", "pi pi-image"));
        meters.add(new MeterGroupItem("System", 10, "#c084fc", "pi pi-desktop"));
    }

    public List<MeterGroupItem> getMeters() {
        return meters;
    }
}

Use Cases

Documentation pe:meterGroup

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a namingContainer.
value	A list of MeterGroupItem objects to display.
min	Min value of the meter. Default is 0.0.
max	Max value of the meter. If 0, defaults to 100 or sum of values. Default is 0.0.
orientation	Orientation of the meter. Valid values: horizontal, vertical. Default is horizontal.
labelPosition	Position of the labels relative to the meters. Valid values: start, end. Default is end.
labelOrientation	Orientation of the labels. Valid values: horizontal, vertical. Default is horizontal.
showLabels	Whether to show the labels. Default is true.
style	Inline style of the component. Default value is null.
styleClass	Style class of the component. Default value is null.