daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ client: handle the new statistics format

Browse Source
This commit is contained in:
Ildar Kamalov
2019-08-22 16:10:47 +03:00
parent 011bc3e36b
commit 6b2496d050
22 changed files with 563 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
client/src/components/Dashboard/Statistics.js
View File

@@ -5,37 +5,42 @@ import { Trans, withNamespaces } from 'react-i18next';
import Card from '../ui/Card';
import Line from '../ui/Line';
import { getPercent } from '../../helpers/helpers';
import { getPercent, normalizeHistory } from '../../helpers/helpers';
import { STATUS_COLORS } from '../../helpers/constants';
class Statistics extends Component {
getNormalizedHistory = (data, interval, id) => [{ data: normalizeHistory(data, interval), id }];
render() {
const {
interval,
dnsQueries,
blockedFiltering,
replacedSafebrowsing,
replacedParental,
numDnsQueries,
numBlockedFiltering,
numReplacedSafebrowsing,
numReplacedParental,
} = this.props;
const filteringData = [this.props.history[1]];
const queriesData = [this.props.history[2]];
const parentalData = [this.props.history[3]];
const safebrowsingData = [this.props.history[4]];
return (
<div className="row">
<div className="col-sm-6 col-lg-3">
<Card type="card--full" bodyType="card-wrap">
<div className="card-body-stats">
<div className="card-value card-value-stats text-blue">
{dnsQueries}
{numDnsQueries}
</div>
<div className="card-title-stats">
<Trans>dns_query</Trans>
</div>
</div>
<div className="card-chart-bg">
<Line data={queriesData} color={STATUS_COLORS.blue}/>
<Line
data={this.getNormalizedHistory(dnsQueries, interval, 'dnsQueries')}
color={STATUS_COLORS.blue}
/>
</div>
</Card>
</div>
@@ -43,10 +48,10 @@ class Statistics extends Component {
<Card type="card--full" bodyType="card-wrap">
<div className="card-body-stats">
<div className="card-value card-value-stats text-red">
{blockedFiltering}
{numBlockedFiltering}
</div>
<div className="card-value card-value-percent text-red">
{getPercent(dnsQueries, blockedFiltering)}
{getPercent(numDnsQueries, numBlockedFiltering)}
</div>
<div className="card-title-stats">
<a href="#filters">
@@ -55,7 +60,14 @@ class Statistics extends Component {
</div>
</div>
<div className="card-chart-bg">
<Line data={filteringData} color={STATUS_COLORS.red}/>
<Line
data={this.getNormalizedHistory(
blockedFiltering,
interval,
'blockedFiltering',
)}
color={STATUS_COLORS.red}
/>
</div>
</Card>
</div>
@@ -63,17 +75,24 @@ class Statistics extends Component {
<Card type="card--full" bodyType="card-wrap">
<div className="card-body-stats">
<div className="card-value card-value-stats text-green">
{replacedSafebrowsing}
{numReplacedSafebrowsing}
</div>
<div className="card-value card-value-percent text-green">
{getPercent(dnsQueries, replacedSafebrowsing)}
{getPercent(numDnsQueries, numReplacedSafebrowsing)}
</div>
<div className="card-title-stats">
<Trans>stats_malware_phishing</Trans>
</div>
</div>
<div className="card-chart-bg">
<Line data={safebrowsingData} color={STATUS_COLORS.green}/>
<Line
data={this.getNormalizedHistory(
replacedSafebrowsing,
interval,
'replacedSafebrowsing',
)}
color={STATUS_COLORS.green}
/>
</div>
</Card>
</div>
@@ -81,17 +100,24 @@ class Statistics extends Component {
<Card type="card--full" bodyType="card-wrap">
<div className="card-body-stats">
<div className="card-value card-value-stats text-yellow">
{replacedParental}
{numReplacedParental}
</div>
<div className="card-value card-value-percent text-yellow">
{getPercent(dnsQueries, replacedParental)}
{getPercent(numDnsQueries, numReplacedParental)}
</div>
<div className="card-title-stats">
<Trans>stats_adult</Trans>
</div>
</div>
<div className="card-chart-bg">
<Line data={parentalData} color={STATUS_COLORS.yellow}/>
<Line
data={this.getNormalizedHistory(
replacedParental,
interval,
'replacedParental',
)}
color={STATUS_COLORS.yellow}
/>
</div>
</Card>
</div>
@@ -101,11 +127,15 @@ class Statistics extends Component {
}
Statistics.propTypes = {
history: PropTypes.array.isRequired,
dnsQueries: PropTypes.number.isRequired,
blockedFiltering: PropTypes.number.isRequired,
replacedSafebrowsing: PropTypes.number.isRequired,
replacedParental: PropTypes.number.isRequired,
interval: PropTypes.number.isRequired,
dnsQueries: PropTypes.array.isRequired,
blockedFiltering: PropTypes.array.isRequired,
replacedSafebrowsing: PropTypes.array.isRequired,
replacedParental: PropTypes.array.isRequired,
numDnsQueries: PropTypes.number.isRequired,
numBlockedFiltering: PropTypes.number.isRequired,
numReplacedSafebrowsing: PropTypes.number.isRequired,
numReplacedParental: PropTypes.number.isRequired,
refreshButton: PropTypes.node.isRequired,
};