Meter

Meter is used to represent an available quantity or allotment of a measurable unit.

Overview

Meter should be used when displaying the amount of a resource remaining, or yet to be used. It can represent the quantity of resource consumed as a value, in relation to min and max limits, and optionally display low and high quantity thresholds to a user.

Meter can also be used to display a count or quantity anytime max is a known value. For instance, Meter is an appropriate way of displaying the number of days in a year that precipitation has been recorded.

Usage

  • Display the remaining number of credits or other resource available
  • Display the amount of storage used on a hard drive
  • Communicate significant quantity thresholds that could impact a user's experience
  • Display a count or quantity accrued towards a max

Sample

5 samples
1
<calcite-meter label="Example meter" value="15"></calcite-meter>
v3.0.3

Best Practices

While visually similar to Progress, Meter has distinct capabilities and intended use cases.

Progress represents advancement towards the completion of a single task or system process - only the value can be set. The value is always a percentage between zero and one hundred. Progress should be used to represent system-initiated tasks or processes.
Distinctly, Meter represents an allotment available or quantity of resource used. It accepts min values of less than zero and may have max values of greater or less than one hundred. The value may fluctuate and, when fillType is "range", may convey meaning to the user through use of low and high properties.

Recommendations

It is recommended to use low and/or high when they represent quantities of significance. For instance, if the value exceeds high, it may be useful to display corresponding messaging in a Notice, or send an email to the user with further communication.

Fill types

Use the appropriate fillType. The default, "range", is useful for providing context about the importance of the current value, for example if a user is approaching the limit of their available storage. Use "single" when there is no inherent benefit or detriment to the current value.

Do use fillType of "range" when the quantity or allotment could become scarce and negatively impact a user.
Do use fillType of "single" when the current quantity or allotment is strictly informative and has no positive or negative bearing on the user.
Avoid populating low or high if there is no significance to the range.
Avoid using fillType of "range" when conveying a quantity that has no positive or negative bearing on the user.

Label types

The valueLabelType and rangeLabelType properties can be configured as "units" or "percent". The former can be useful when displaying explicit quantities to a user. The latter is often used to simplify complex or lengthy numbers. It can be valid to use a combination of values, for example setting rangeLabelType as "percent" and the valueLabelType as "units".

When using valueLabelType or rangeLabelType as "units", it may be useful to use the unitType property to provide additional context to a user.

Do use valueLabelType or valueLabelType of "units", when knowing the explicit number may benefit a user.
Do use valueLabelType or valueLabelType of "percent" when the numbers are long, or the exact numeric value is not important to a user.
Do prefer brevity when populating unitType.
Avoid using long, confusing, or complex strings for unitType.
Avoid using "percent" for valueLabelType when the exact numeric value may be of importance to a user.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
appearanceappearanceSpecifies the appearance style of the component."outline" | "outline-fill" | "solid""outline-fill"
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
fillTypefill-typeSpecifies the component's display, where "single" displays a single color and "range" displays a range of colors based on provided low, high, min or max values."range" | "single""range"
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
groupSeparatorgroup-separatorWhen true, number values are displayed with a group separator corresponding to the language and country format.booleanfalse
highhighSpecifies a high value. When fillType is "range", displays a different color when above the specified threshold.number
labelrequiredlabelAccessible name for the component.string
lowlowSpecifies a low value. When fillType is "range", displays a different color when above the specified threshold.number
maxmaxSpecifies the highest allowed value of the component.number100
minminSpecifies the lowest allowed value of the component.number0
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"
rangeLabelsrange-labelsWhen true, displays the values of high, low, min, and max.booleanfalse
rangeLabelTyperange-label-typeWhen rangeLabels is true, specifies the format of displayed labels."percent" | "units""percent"
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
unitLabelunit-labelWhen rangeLabelType is "units" and either valueLabel or rangeLabels are true, displays beside the value and/or min values.string""
valuevalueSpecifies the current value of the component.number
valueLabelvalue-labelWhen true, displays the current value.booleanfalse
valueLabelTypevalue-label-typeWhen valueLabel is true, specifies the format of displayed label."percent" | "units""percent"

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close