A simple to use, highly customizable gauge meter UI component
npm i @jason1642/react-dashboard-meter
import {GaugeMeter} from '@jason1642/react-dashboard-meter'
// IMPORTANT - The minimum width of this component is 150px, you can change it by using the containerStyles prop
const MyComponent: React.FunctionComponent<IMyComponentProps> = ({ value }) => {
return(
<div>
<GaugeMeter
containerStyles={{
minWidth: '250px'
}}
value={value || 33}
titleOptions={{
appendedText: 'km/h',
toFixedAmount: 0
}}
progressBarOptions={{
fillerTriColors:['#97c4fb', '#5fa7ff', '#60a5fa']
}}
range={[0, 40]}
/>
</div>
)}
| Name | type | Default | Description |
|---|---|---|---|
| value (required) | number | undefined | A number that will calculate the percentage of the progress bar that is filled. As well as provide context to the title label. |
| range | [number, number] | number | [0, 100] | Tuple array or number that will be used to calculate the percentage of the progress bar that should be filled using the value prop. If a single number is provided, the range will be assumed to be 0 - range. You can provide any duo set of numbers as long as the first item in the tuple is smaller than the second. |
| progressBarOptions | object | { fillerTriColors: |
Change the colors of the progress bars filler and empty areas. You can add three colors to get a linear gradient effect on the filler tri colors prop. Options: fillerTriColors: [string, string, string?] | string, emptyAreaColor: string
|
| innerAreaColor | string | 'white' | Change the color of the area that the progress bar covers. |
| containerStyles | object | {} | Styles to pass along to the container of the component. You can change the default min-width value here. |
| innerAreaSize | number | 86 | Change percentage amount that the inner area semi circle takes up, if the entire semi circle including the progress bar is 100%. |
| titleOptions | object | {styles: {color: 'black'}, verticalPosition: 'center' } |
Change the appearance of the title label inside the inner semi circle area. toFixedAmount changes the amount of numbers after the decimal point in the titles value, default 0. Options: {styles:{fontSize: string, color: string, marginBottom: string,fontFamily: string, marginTop: string}, toFixedAmount: number, reactNode: React.ReactElement, appendedText: string, verticalPOsition: string}
|
| labelOptions | object | {size: "default", appendedText: false, labelValueToFixed: 0,labalPosition: 'inward'} |
Styles to pass along to the container of the component. You can change the default min-width value here. Options: {size: 'small'|'default'|'large', appendedTest: string, labelValueToFixed: 0|1|2|3, labelPosition: 'bottom'|'center'|'top', numberOfLables: 3|5 }
|