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
39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { STATUS_COLORS } from '../../helpers/constants';
|
|
import { formatNumber } from '../../helpers/helpers';
|
|
import Card from '../ui/Card';
|
|
import Line from '../ui/Line';
|
|
|
|
const StatsCard = ({
|
|
total, lineData, percent, title, color,
|
|
}) => (
|
|
<Card type="card--full" bodyType="card-wrap">
|
|
<div className="card-body-stats">
|
|
<div className={`card-value card-value-stats text-${color}`}>
|
|
{formatNumber(total)}
|
|
</div>
|
|
<div className="card-title-stats">{title}</div>
|
|
</div>
|
|
{percent >= 0 && (
|
|
<div className={`card-value card-value-percent text-${color}`}>
|
|
{percent}
|
|
</div>
|
|
)}
|
|
<div className="card-chart-bg">
|
|
<Line data={lineData} color={STATUS_COLORS[color]} />
|
|
</div>
|
|
</Card>
|
|
);
|
|
|
|
StatsCard.propTypes = {
|
|
total: PropTypes.number.isRequired,
|
|
lineData: PropTypes.array.isRequired,
|
|
title: PropTypes.object.isRequired,
|
|
color: PropTypes.string.isRequired,
|
|
percent: PropTypes.number,
|
|
};
|
|
|
|
export default StatsCard;
|