UsageMeters

Lays out a group of usage meters.

SourcePackage @weft-js/warp

Preview

tsx

import { UsageMeter, UsageMeters } from '@weft-js/warp'export function ThisMonth() {  return (    <UsageMeters>      <UsageMeter label="Build minutes" value={1240} limit={3000} format={n => n.toLocaleString('en-US')} />      <UsageMeter label="Bandwidth" value={412} limit={500} format={gigabytes} note="Slows down past the limit, never stops." />      <UsageMeter label="Seats" value={8} limit={10} />      <UsageMeter label="Log storage" value={11.2} limit={10} format={gigabytes} overage="+ $12.40 overage" />    </UsageMeters>  )}const gigabytes = (n: number) => `${n} GB`

Installation

npm install @weft-js/warp

Usage

tsx

import { UsageMeters } from '@weft-js/warp'<UsageMeters>  <UsageMeter label="Build minutes" value={1240} limit={3000} format={n => n.toLocaleString('en-US')} />  <UsageMeter label="Bandwidth" value={412} limit={500} format={gigabytes} note="Slows down past the limit, never stops." />  <UsageMeter label="Seats" value={8} limit={10} />  <UsageMeter label="Log storage" value={11.2} limit={10} format={gigabytes} overage="+ $12.40 overage" /></UsageMeters>

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`children`	`unknown`	—	What it contains.

RelatedUsage meter