react-npm-horizontal-status-indicator
A React component to display coloured horizontal bar with percentage variations.
Overview
A minimal usage will just display the coloured bar using default percentage colour variation.
let percentage = 75
<HorizontalStatusIndicator>{percentage}</HorizontalStatusIndicator>;
The color of the bar by default would be based on the range of the percentage, so:
Range | Default |
---|---|
0-25 | red |
26-50 | yellow |
51-75 | blue |
76-100 | green |
Other options can be passed in as inverted
like so:
let percentage = 75
<HorizontalStatusIndicator inverted={true}>{percentage}</HorizontalStatusIndicator>;
In this case, the colors would be reversed;
Range | Default |
---|---|
0-25 | green |
26-50 | blue |
51-75 | yellow |
76-100 | red |
final possibility is where the colour of the bar is passed in as a prop:
<HorizontalStatusIndicator colour={'#FFC000'}>75</HorizontalStatusIndicator>
Features
- Display percentage in Horizintal bar.
- Display colured horizontal bar wrt percentage.
- Runs in the browser and Node.js.
- Built on standards.
Example
;;;; { let mystyle = 'width':'200px' return <div> <h2>Horizontal Status Indicator</h2> <Table striped bordered condensed hover> <tbody> <tr> <td>Default</td> <td style=mystyle><HorizontalStatusIndicator>100</HorizontalStatusIndicator></td> <td>100</td> </tr> <tr> <td>Default</td> <td style=mystyle><HorizontalStatusIndicator>70</HorizontalStatusIndicator></td> <td>70</td> </tr> <tr> <td>Default</td> <td style=mystyle><HorizontalStatusIndicator>49</HorizontalStatusIndicator></td> <td>49</td> </tr> <tr> <td>Default</td> <td style=mystyle><HorizontalStatusIndicator>15</HorizontalStatusIndicator></td> <td>15</td> </tr> <tr> <td>Default</td> <td style=mystyle><HorizontalStatusIndicator>1</HorizontalStatusIndicator></td> <td>1</td> </tr> <tr> <td>Inverted</td> <td style=mystyle><HorizontalStatusIndicator inverted=true>100</HorizontalStatusIndicator></td> <td>100</td> </tr> <tr> <td>Colour</td> <td style=mystyle><HorizontalStatusIndicator colour='#FFC000'>100</HorizontalStatusIndicator></td> <td>100</td> </tr> </tbody> </Table> </div> ; } ReactDOM;
Technology Stack:
- react
- mocha
Usage:
Clone the repo as a new project:
git clone https://github.com/lobdev/react-npm-horizontal-status-indicator <react-npm-horizontal-status-indicator>
Start Server:
First you have to replace the lib/component/horizontal_status_indicator.js to server.js in package.json
cd react-npm-horizontal-status-indicator
npm i
npm start
Run App:
npm start command automatically initiate browser at 3000 port
http:://localhost:3000
Run tests:
cd react-npm-horizontal-status-indicator
npm i
npm test
Developer Notes:
Make sure you configure your editor/IDE to use:
.editorconfig
.eslintrc