Meter
A graphical display of a numeric value that varies within a defined range. For example, a meter could be used to depict a device's current battery percentage or a car's fuel level.
Anatomy
import { Meter } from "@lualtek/react-components";
export default () => {
return <Meter value={2} low={3} high={5} optimum={6} />;
};API Reference
export type MeterProps = {
/**
* The value of the meter. Between 0 and 6
*/
value?: number;
/**
* The low value of the meter below which the value is considered bad. (red)
*/
low?: number;
/**
* The low value of the meter below which the value is considered sub-optimal. (green)
*/
high?: number;
/**
* The low value of the meter below which the value is considered optimal. (deep green)
*/
optimum?: number;
/**
* Set the dimension of the meter.
*/
dimension?: 'small' | 'regular';
/**
* Show the label next to the meter.
*
* @defaultValue true
*/
showLabel?: boolean;
/**
* Position of the label next to the meter.
*
* @defaultValue 'end'
*/
labelPosition?: 'start' | 'end';
/**
* Custom label to show next to the meter. This replace the default label.
*/
label?: ReactNode;
};