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

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import HorizontalStatusIndicator from 'react-npm-horizontal-status-indicator';
import {Table} from 'react-bootstrap';
 
class App extends Component {
  render() {
    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.render(<App />,document.querySelector('.container'));
 

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