react-query-meter

A query result visual meter.

Live Demo

Install

npm install --save react-query-meter

Usage

<QueryMeter
    totalHits={totalHits}
    maxHits={maxHits}
    width={200}
    thickness={25}
    slices={6}
    sliceGap={2}
    duration={1000}
    transitionTiming="cubic-bezier(.17,.67,.83,.67)"
    backgroundColor="#fff"
    fillColor="linear-gradient(315deg, #fff000 0%, #ed008c 74%)"
    fillBackgroundColor="#eee"
    containerSpacing={20}
    strengthMode={true}
    showInfo={true}
    showPercentage={true}
    topText="Total Hits:&nbsp;"
    bottomText="Max Hits:&nbsp;"
    percentageStyle={{}}
    infoNumbersStyle={{}}
    infoTextStyle={{}}
/>

Props

name	type	description	default value
totalHits	number	number of results	0
maxHits	number	the maximum number of possible results	0
width	number	the width of the meter (in pixels)	200
thickness	number	the thickness of the meter (in pixels)	25
slices	number	the number of meter slices	6
sliceGap	number	the spacing between slices (in pixels)	2
duration	number	the duration of the animation (in milliseconds)	1000
transitionTiming	string	the the timing function for the animation (details)	"cubic-bezier(.17,.67,.83,.67)"
backgroundColor	string	the background color for the meter's container	"#fff"
fillColor	string	the color of the meter	"linear-gradient(315deg, #fff000 0%, #ed008c 74%)"
fillBackgroundColor	string	the background color of the meter	"#eee"
containerSpacing	number	the space (in pixels) between the container and the meter, this prop is allowed only when showPercentage is true, otherwise it is equal to 0	20
strengthMode	boolean	whether fewer results will be displayed as a stronger search query or not	true
showInfo	boolean	whether to display the maxHits and totalHits information in the center of the meter or not	true
showPercentage	boolean	whether to display the percentage calculation in the outer part of the meter or not	true
topText	string	the label for the total hits information	"Total Hits: "
bottomText	string	the label for the max hits information	"Max Hits: "
percentageStyle	object	styles for the percentage number in the outer ring	---
infoNumbersStyle	object	styles for the number of the max and total hits in the inner ring	---
infoTextStyle	object	styles for the topText and bottomText props	---

License

© MIT