e5db33705d
Closes #1423 Squashed commit of the following: commit 6e5de427c48577ebbe4d963f817b66fed9b29bb4 Author: Ildar Kamalov <i.kamalov@adguard.com> Date: Wed Mar 11 17:56:39 2020 +0300 + client: add digit grouping for numbers on the dashboard
31 lines
824 B
JavaScript
31 lines
824 B
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { formatNumber } from '../../helpers/helpers';
|
|
|
|
const Cell = ({ value, percent, color }) => (
|
|
<div className="stats__row">
|
|
<div className="stats__row-value mb-1">
|
|
<strong>{formatNumber(value)}</strong>
|
|
<small className="ml-3 text-muted">{percent}%</small>
|
|
</div>
|
|
<div className="progress progress-xs">
|
|
<div
|
|
className="progress-bar"
|
|
style={{
|
|
width: `${percent}%`,
|
|
backgroundColor: color,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
Cell.propTypes = {
|
|
value: PropTypes.number.isRequired,
|
|
percent: PropTypes.number.isRequired,
|
|
color: PropTypes.string.isRequired,
|
|
};
|
|
|
|
export default Cell;
|