Meter Group

Partition one exact shared capacity into ordered named measurements.

Usage

Grouped capacity

Partition one shared capacity into ordered named measurements and explicit remaining space.

Storage capacityPartition one shared capacity into ordered named measurements and explicit remaining space.80 / 100 GB

<!-- Meter Group / Grouped Capacity -->
<script setup lang="ts">
import { MeterGroupIndicator, MeterGroupItem, MeterGroupItemIndicator, MeterGroupItemLabel, MeterGroupItemValue, MeterGroupList, MeterGroupRoot, MeterGroupSegment, MeterGroupTrack, MeterGroupValueText } from '@sectile/vue/meter-group-indicator'
const items = [
  { id: 'documents', label: 'Documents', value: '42' },
  { id: 'media', label: 'Media', value: '31' },
  { id: 'archives', label: 'Archives', value: '7' },
] as const

</script>

<template>
  <MeterGroupRoot :items="items" max="100" label="Storage capacity">
    <MeterGroupValueText />
    <MeterGroupTrack>
      <MeterGroupSegment v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupIndicator />
      </MeterGroupSegment>
    </MeterGroupTrack>
    <MeterGroupList>
      <MeterGroupItem v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupItemIndicator />
        <MeterGroupItemLabel />
        <MeterGroupItemValue />
      </MeterGroupItem>
    </MeterGroupList>
  </MeterGroupRoot>
</template>

Zero values

Keep zero-valued categories in order without assigning them visual capacity.

Storage capacityKeep zero-valued categories in order without assigning them visual capacity.42 / 100 GB

<!-- Meter Group / Zero Values -->
<script setup lang="ts">
import { MeterGroupIndicator, MeterGroupItem, MeterGroupItemIndicator, MeterGroupItemLabel, MeterGroupItemValue, MeterGroupList, MeterGroupRoot, MeterGroupSegment, MeterGroupTrack, MeterGroupValueText } from '@sectile/vue/meter-group-indicator'
const items = [
  { id: 'documents', label: 'Documents', value: '42' },
  { id: 'archives', label: 'Archives', value: '0' },
] as const

</script>

<template>
  <MeterGroupRoot :items="items" max="100" label="Storage capacity">
    <MeterGroupValueText />
    <MeterGroupTrack>
      <MeterGroupSegment v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupIndicator />
      </MeterGroupSegment>
    </MeterGroupTrack>
    <MeterGroupList>
      <MeterGroupItem v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupItemIndicator />
        <MeterGroupItemLabel />
        <MeterGroupItemValue />
      </MeterGroupItem>
    </MeterGroupList>
  </MeterGroupRoot>
</template>

Exact decimal

Enter 0.1 as decimal text and preserve it without binary floating-point coercion.

Storage capacityEnter 0.1 as decimal text and preserve it without binary floating-point coercion.0.3 / 0.6 GB

<!-- Meter Group / Exact Decimal -->
<script setup lang="ts">
import { MeterGroupIndicator, MeterGroupItem, MeterGroupItemIndicator, MeterGroupItemLabel, MeterGroupItemValue, MeterGroupList, MeterGroupRoot, MeterGroupSegment, MeterGroupTrack, MeterGroupValueText } from '@sectile/vue/meter-group-indicator'
const items = [
  { id: 'documents', label: 'Documents', value: '0.1' },
  { id: 'media', label: 'Media', value: '0.2' },
] as const

</script>

<template>
  <MeterGroupRoot :items="items" max="0.6" label="Storage capacity">
    <MeterGroupValueText />
    <MeterGroupTrack>
      <MeterGroupSegment v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupIndicator />
      </MeterGroupSegment>
    </MeterGroupTrack>
    <MeterGroupList>
      <MeterGroupItem v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupItemIndicator />
        <MeterGroupItemLabel />
        <MeterGroupItemValue />
      </MeterGroupItem>
    </MeterGroupList>
  </MeterGroupRoot>
</template>

Invalid input

Reject a partition whose exact total exceeds the shared capacity.

Storage capacityReject a partition whose exact total exceeds the shared capacity.80 / 100 GB

Rejected input: meter-group-total-exceeds-maximum

<!-- Meter Group / Invalid Input -->
<script setup lang="ts">
import { tryCreateMeterGroupState } from '@sectile/core/meter-group'

const result = tryCreateMeterGroupState({
  max: '100',
  items: [
    { id: 'documents', value: '70' },
    { id: 'media', value: '40' },
  ],
})
</script>

<template>
  <p v-if="!result.ok">Rejected input: {{ result.error.code }}</p>
</template>

API

Vue package: @sectile/vue/meter-group

Components

MeterGroupRoot
MeterGroupTrack
MeterGroupSegment
MeterGroupIndicator
MeterGroupValueText
MeterGroupList
MeterGroupItem
MeterGroupItemIndicator
MeterGroupItemLabel
MeterGroupItemValue

Props

`MeterGroupRootProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
formatTotal: TypeMeterGroupTotalFormatterDefaultundefined
Formats the aggregate value and maximum for visible text.
formatValue: TypeMeterGroupValueFormatterDefaultundefined
Formats a value for visible text.
high: Typenumber | stringDefaultundefined
Lower boundary of the high-value region.
items: Typereadonly MeterGroupEntry[]DefaultRequired
Ordered item values managed by the component.
label: TypestringDefaultundefined
Accessible name announced for the control.
low: Typenumber | stringDefaultundefined
Upper boundary of the low-value region.
max: Typenumber | stringDefault100
Largest value accepted by the component.
optimum: Typenumber | stringDefaultundefined
Value that determines which threshold region is optimal.

`MeterGroupSegmentProps`

as: TypePrimitiveAsDefaultundefined
Element or component rendered for this part.
asChild: TypebooleanDefaultundefined
Whether to merge this part into its single child instead of rendering a wrapper.
id: TypestringDefaultRequired
Stable ID used to connect related parts.

`MeterGroupItemProps`

as: TypePrimitiveAsDefault'li'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
id: TypestringDefaultRequired
Stable ID used to connect related parts.

`MeterGroupPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

Slots

`MeterGroupSegmentSlotProps`

end: Typestring
Segment end value within the shared range.
endPercentage: Typenumber
Segment end expressed as a percentage of the shared range.
id: Typestring
Stable ID for this field or item.
label: Typestring
Accessible name announced for the control.
percentage: Typenumber
Current value expressed as a percentage of its range.
start: Typestring
Segment start value within the shared range.
startPercentage: Typenumber
Segment start expressed as a percentage of the shared range.
value: Typestring
Current value exposed by this contract.
valueText: Typestring
Formatted text for the current range value when available.

`MeterGroupRootSlotProps`

max: Typestring
Maximum of the numeric range.
percentage: Typenumber
Current value expressed as a percentage of its range.
remaining: Typestring
Unallocated value remaining before the shared maximum.
segments: Typereadonly MeterGroupSegmentSlotProps[]
Ordered segments projected from the shared range.
total: Typestring
Sum of all segment values.
valueText: Typestring
Formatted text for the current range value when available.
zone: Type'optimum' | 'suboptimal' | 'even-less-good'
Quality region derived from the thresholds and optimum value.

`MeterGroupItemSlotProps`

end: Typestring
Segment end value within the shared range.
endPercentage: Typenumber
Segment end expressed as a percentage of the shared range.
id: Typestring
Stable ID for this field or item.
label: Typestring
Accessible name announced for the control.
percentage: Typenumber
Current value expressed as a percentage of its range.
start: Typestring
Segment start value within the shared range.
startPercentage: Typenumber
Segment start expressed as a percentage of the shared range.
value: Typestring
Current value exposed by this contract.
valueText: Typestring
Formatted text for the current range value when available.

Other types

`MeterGroupEntry`

Name	Type	Required
`id`	`string`	Yes
`value`	`number \| string`	Yes
`label`	`string`	Yes

`MeterGroupValueFormatter`

type MeterGroupValueFormatter = (value: string, entry: MeterGroupEntry) => string

`MeterGroupTotalFormatter`

type MeterGroupTotalFormatter = (total: string, max: string) => string

Parts

Shared scope: [data-scope="meter-group"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Names the related set without adding a duplicate aggregate meter.	`role="group"` `data-zone="<zone>"` `data-percentage="<percentage>"`
`track`	`[data-part="track"]`	Preserves the ordered visual track while its meter children retain semantics.	`role="presentation"`
`segment`	`[data-part="segment"]`	Exposes one named measurement and its exact cumulative offsets.	`role="meter"` `data-id="<id>"` `data-start-percentage="<percentage>"` `data-end-percentage="<percentage>"`
`indicator`	`[data-part="indicator"]`	Draws the current segment without adding another accessible value.	`aria-hidden="true"` `data-percentage="<percentage>"`
`value-text`	`[data-part="value-text"]`	Displays the formatted value as text.	—
`list`	`[data-part="list"]`	Groups the visual legend without repeating the named meter announcements.	`aria-hidden="true"`
`item`	`[data-part="item"]`	Keeps one legend row keyed to the same Core segment.	`data-id="<id>"` `aria-hidden="true"`
`item-indicator`	`[data-part="item-indicator"]`	Shows the item selection state.	—
`item-label`	`[data-part="item-label"]`	Exposes the item label styling region.	—
`item-value`	`[data-part="item-value"]`	Exposes the item value styling region.	—

Keyboard interaction

Key	Behavior
`None`	The range display is read-only and defines no keyboard interaction.

Accessibility

One named group contains ordered, individually named read-only meters; visual track and legend parts add no duplicate aggregate announcement.

Meter Group ​

Usage ​

Grouped capacity ​

Zero values ​

Exact decimal ​

Invalid input ​

API ​

Props ​

MeterGroupRootProps ​

MeterGroupSegmentProps ​

MeterGroupItemProps ​

MeterGroupPartProps ​

Slots ​

MeterGroupSegmentSlotProps ​

MeterGroupRootSlotProps ​

MeterGroupItemSlotProps ​

Other types ​

MeterGroupEntry ​

MeterGroupValueFormatter ​

MeterGroupTotalFormatter ​

Parts ​

Keyboard interaction ​

Accessibility ​