React/ReactJS: Multi-Color Progress Bar
In this tutorial, we will learn how to create a multi-color progress bar as a ReactJS component.
Creating the Component
We first create a kind of template for the component which we will
call MultiColorProgressBar. It consists
of the wrapper
<div className="multicolor-bar">
which contains four child
<div> elements. The values (in
percentages) will go inside
<div className="values">, the
vertical graduations inside
<div className="scale">, the
coloured bars inside
<div className="bars"> and the
legends inside
<div className="legends">.
class MultiColorProgressBar extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="multicolor-bar">
<div className="values">
</div>
<div className="scale">
</div>
<div className="bars">
</div>
<div className="legends">
</div>
</div>
);
}
}
export default MultiColorProgressBar;
This component will be passed the following data (props),
let readings = [
{
name: 'Apples',
value: 60,
color: '#eb4d4b'
},
{
name: 'Blueberries',
value: 7,
color: '#22a6b3'
},
{
name: 'Guavas',
value: 23,
color: '#6ab04c'
},
{
name: 'Grapes',
value: 10,
color: '#e056fd'
}
]
with which we will be forming our multi-color progress bar. The
passed data, which is within this.props,
is assigned to the const named
parent inside the
render() function. Below, we show how to
generate an array of divs using the
map() function, which will display the
percentages on the top row.
render() {
const parent = this.props;
let values = parent.readings && parent.readings.length && parent.readings.map(function(item, i) {
if(item.value > 0) {
return (
<div className="value" style={{'color': item.color, 'width': item.value + '%'}} key={i}>
<span>{item.value}%</span>
</div>
)
}
}, this);
}
These generated divs are assigned to the variable
values which will be rendered inside the
<div className="values">, enclosed
as the expression {values}.
return (
<div className="multicolor-bar">
<div className="values">
{values}
</div>
</div>
);
To avoid displaying 0 while fetching values asynchronously, we modify our expression above to display nothing till the values are available.
return (
<div className="multicolor-bar">
<div className="values">
{values == ''?'':values}
</div>
</div>
);
We do the same for the scale, the colored bars and the legends as shown below —
class MultiColorProgressBar extends Component {
constructor(props) {
super(props);
}
render() {
const parent = this.props;
let values = parent.readings && parent.readings.length && parent.readings.map(function(item, i) {
if(item.value > 0) {
return (
<div className="value" style={{'color': item.color, 'width': item.value + '%'}} key={i}>
<span>{item.value}%</span>
</div>
)
}
}, this);
let calibrations = parent.readings && parent.readings.length && parent.readings.map(function(item, i) {
if(item.value > 0) {
return (
<div className="graduation" style={{'color': item.color, 'width': item.value + '%'}} key={i}>
<span>|</span>
</div>
)
}
}, this);
let bars = parent.readings && parent.readings.length && parent.readings.map(function(item, i) {
if(item.value > 0) {
return (
<div className="bar" style={{'backgroundColor': item.color, 'width': item.value + '%'}} key={i}>
</div>
)
}
}, this);
let legends = parent.readings && parent.readings.length && parent.readings.map(function(item, i) {
if(item.value > 0) {
return (
<div className="legend" key={i}>
<span className="dot" style={{'color': item.color}}>●</span>
<span className="label">{item.name}</span>
</div>
)
}
}, this);
return (
<div className="multicolor-bar">
<div className="values">
{values == ''?'':values}
</div>
<div className="scale">
{calibrations == ''?'':calibrations}
</div>
<div className="bars">
{bars == ''?'':bars}
</div>
<div className="legends">
{legends == ''?'':legends}
</div>
</div>
);
}
}
export default MultiColorProgressBar;
The style for our
MultiColorProgressBar component is as
below:
.multicolor-bar {
margin: 20px 20%;
}
.multicolor-bar .values .value {
float: left;
text-align: center;
}
.multicolor-bar .scale .graduation {
float: left;
text-align: center;
}
.multicolor-bar .bars .bar {
float: left;
height: 10px;
}
.multicolor-bar .bars div.bar:first-of-type {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.multicolor-bar .bars div.bar:last-of-type {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.multicolor-bar .legends {
text-align: center;
}
.multicolor-bar .legends .legend {
display: inline-block;
margin: 0 5px;
text-align: center;
}
.multicolor-bar .legends .legend .dot {
font-size: 25px;
vertical-align: middle;
}
.multicolor-bar .legends .legend .label {
margin-left: 2px;
vertical-align: middle;
}
We import and load our component inside
index.js, passing the array
this.readings consisting of data as an
argument (props).
this.readings = [
{
name: 'Apples',
value: 60,
color: '#eb4d4b'
},
{
name: 'Blueberries',
value: 7,
color: '#22a6b3'
},
{
name: 'Guavas',
value: 23,
color: '#6ab04c'
},
{
name: 'Grapes',
value: 10,
color: '#e056fd'
}
];
ReactDOM.render(<MultiColorProgressBar readings={this.readings}/>,
document.getElementById('root'));
The full code is available on CodePen also.
See the Pen Multi-Color Progress Bar in ReactJS by Dennis Gabil (@dennisgabil) on CodePen.
We finally get our progress bar.
