AdguardTeam/AdGuardHome
1
1
Fork 0
mirror of https://github.com/AdguardTeam/AdGuardHome.git synced 2024-12-15 03:02:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

Replace the main Statistics graph with 4 blocks instead

Browse Source
This commit is contained in:
Ildar Kamalov 2018-10-12 15:23:21 +03:00
parent 599426a1f9
commit bc11f872fa
5 changed files with 190 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,59 +1,109 @@
import React from 'react';
import { ResponsiveLine } from '@nivo/line';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Card from '../ui/Card';
import Line from '../ui/Line';
const Statistics = props => (
<Card title="Statistics" subtitle="for the last 24 hours" bodyType="card-graph" refresh={props.refreshButton}>
{props.history ?
<ResponsiveLine
data={props.history}
margin={{
top: 50,
right: 40,
bottom: 80,
left: 80,
}}
minY="auto"
stacked={false}
curve='monotoneX'
axisBottom={{
orient: 'bottom',
tickSize: 5,
tickPadding: 5,
tickRotation: -45,
legendOffset: 50,
legendPosition: 'center',
}}
axisLeft={{
orient: 'left',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legendOffset: -40,
legendPosition: 'center',
}}
enableArea={true}
dotSize={10}
dotColor="inherit:darker(0.3)"
dotBorderWidth={2}
dotBorderColor="#ffffff"
dotLabel="y"
dotLabelYOffset={-12}
animate={true}
motionStiffness={90}
motionDamping={15}
/>
:
<h2 className="text-muted">Empty data</h2>
}
</Card>
);
import { getPercent } from '../../helpers/helpers';
import { STATUS_COLORS } from '../../helpers/constants';
class Statistics extends Component {
render() {
const {
dnsQueries,
blockedFiltering,
replacedSafebrowsing,
replacedParental,
} = 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 bodyType="card-wrap">
<div className="card-body-stats">
<div className="card-value card-value-stats text-blue">
{dnsQueries}
</div>
<div className="card-title-stats">
DNS Queries
</div>
</div>
<div className="card-chart-bg">
<Line data={queriesData} color={STATUS_COLORS.blue}/>
</div>
</Card>
</div>
<div className="col-sm-6 col-lg-3">
<Card bodyType="card-wrap">
<div className="card-body-stats">
<div className="card-value card-value-stats text-red">
{blockedFiltering}
</div>
<div className="card-value card-value-percent text-red">
{getPercent(dnsQueries, blockedFiltering)}
</div>
<div className="card-title-stats">
Blocked by Filters
</div>
</div>
<div className="card-chart-bg">
<Line data={filteringData} color={STATUS_COLORS.red}/>
</div>
</Card>
</div>
<div className="col-sm-6 col-lg-3">
<Card bodyType="card-wrap">
<div className="card-body-stats">
<div className="card-value card-value-stats text-green">
{replacedSafebrowsing}
</div>
<div className="card-value card-value-percent text-green">
{getPercent(dnsQueries, replacedSafebrowsing)}
</div>
<div className="card-title-stats">
Blocked malware/phishing
</div>
</div>
<div className="card-chart-bg">
<Line data={safebrowsingData} color={STATUS_COLORS.green}/>
</div>
</Card>
</div>
<div className="col-sm-6 col-lg-3">
<Card bodyType="card-wrap">
<div className="card-body-stats">
<div className="card-value card-value-stats text-yellow">
{replacedParental}
</div>
<div className="card-value card-value-percent text-yellow">
{getPercent(dnsQueries, replacedParental)}
</div>
<div className="card-title-stats">
Blocked adult websites
</div>
</div>
<div className="card-chart-bg">
<Line data={parentalData} color={STATUS_COLORS.yellow}/>
</div>
</Card>
</div>
</div>
);
}
}
Statistics.propTypes = {
history: PropTypes.array.isRequired,
refreshButton: PropTypes.node,
dnsQueries: PropTypes.number.isRequired,
blockedFiltering: PropTypes.number.isRequired,
replacedSafebrowsing: PropTypes.number.isRequired,
replacedParental: PropTypes.number.isRequired,
refreshButton: PropTypes.node.isRequired,
};
export default Statistics;

9
client/src/components/ui/Line.css Normal file
View File

@ -0,0 +1,9 @@
.line__tooltip {
padding: 2px 10px 7px;
line-height: 1.1;
color: #fff;
}
.line__tooltip-text {
font-size: 0.7rem;
}

62
client/src/components/ui/Line.js Normal file
View File

@ -0,0 +1,62 @@
import React from 'react';
import PropTypes from 'prop-types';
import { ResponsiveLine } from '@nivo/line';
import './Line.css';
const Line = props => (
props.data &&
<ResponsiveLine
data={props.data}
margin={{
top: 15,
right: 0,
bottom: 1,
left: 0,
}}
minY="auto"
stacked={false}
curve='linear'
axisBottom={{
tickSize: 0,
tickPadding: 0,
}}
axisLeft={{
tickSize: 0,
tickPadding: 0,
}}
enableGridX={false}
enableGridY={false}
enableDots={false}
enableArea={true}
animate={false}
colorBy={() => (props.color)}
tooltip={slice => (
<div>
{slice.data.map(d => (
<div key={d.serie.id} className="line__tooltip">
<span className="line__tooltip-text">
{d.data.y}
</span>
</div>
))}
</div>
)}
theme={{
tooltip: {
container: {
padding: '0',
background: '#333',
borderRadius: '4px',
},
},
}}
/>
);
Line.propTypes = {
data: PropTypes.array.isRequired,
color: PropTypes.string.isRequired,
};
export default Line;

16
client/src/helpers/constants.js
View File

@ -1 +1,17 @@
export const R_URL_REQUIRES_PROTOCOL = /^https?:\/\/\w[\w_\-.]*\.[a-z]{2,8}[^\s]*$/;
export const STATS_NAMES = {
avg_processing_time: 'Average processing time',
blocked_filtering: 'Blocked by filters',
dns_queries: 'DNS queries',
replaced_parental: 'Blocked adult websites',
replaced_safebrowsing: 'Blocked malware/phishing',
replaced_safesearch: 'Enforced safe search',
};
export const STATUS_COLORS = {
blue: '#467fcf',
red: '#cd201f',
green: '#5eba00',
yellow: '#f1c40f',
};

13
client/src/helpers/helpers.js
View File

@ -4,6 +4,8 @@ import subHours from 'date-fns/sub_hours';
import addHours from 'date-fns/add_hours';
import round from 'lodash/round';
import { STATS_NAMES } from './constants';
const formatTime = (time) => {
const parsedTime = dateParse(time);
return dateFormat(parsedTime, 'HH:mm:ss');
@ -34,15 +36,6 @@ export const normalizeLogs = logs => logs.map((log) => {
};
});
const STATS_NAMES = {
avg_processing_time: 'Average processing time',
blocked_filtering: 'Blocked by filters',
dns_queries: 'DNS queries',
replaced_parental: 'Blocked adult websites',
replaced_safebrowsing: 'Blocked malware/phishing',
replaced_safesearch: 'Enforced safe search',
};
export const normalizeHistory = history => Object.keys(history).map((key) => {
let id = STATS_NAMES[key];
if (!id) {
@ -81,3 +74,5 @@ export const normalizeFilteringStatus = (filteringStatus) => {
const newUserRules = Array.isArray(userRules) ? userRules.join('\n') : '';
return { enabled, userRules: newUserRules, filters: newFilters };
};
export const getPercent = (amount, number) => round(100 / (amount / number));