47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import LogsSearchLink from './LogsSearchLink';
|
|
import { formatNumber } from '../../helpers/helpers';
|
|
|
|
const Cell = ({
|
|
value,
|
|
percent,
|
|
color,
|
|
search,
|
|
}) => (
|
|
<div className="stats__row">
|
|
<div className="stats__row-value mb-1">
|
|
<strong>
|
|
{search ? (
|
|
<LogsSearchLink search={search}>
|
|
{formatNumber(value)}
|
|
</LogsSearchLink>
|
|
) : (
|
|
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,
|
|
search: PropTypes.string,
|
|
onSearchRedirect: PropTypes.func,
|
|
};
|
|
|
|
export default Cell;
|