From bc11f872faa525d86a617159863a79cb63da5537 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Fri, 12 Oct 2018 15:23:21 +0300 Subject: [PATCH] Replace the main Statistics graph with 4 blocks instead --- client/src/components/Dashboard/Statistics.js | 148 ++++++++++++------ client/src/components/ui/Line.css | 9 ++ client/src/components/ui/Line.js | 62 ++++++++ client/src/helpers/constants.js | 16 ++ client/src/helpers/helpers.js | 13 +- 5 files changed, 190 insertions(+), 58 deletions(-) create mode 100644 client/src/components/ui/Line.css create mode 100644 client/src/components/ui/Line.js diff --git a/client/src/components/Dashboard/Statistics.js b/client/src/components/Dashboard/Statistics.js index e36c5c5a..434c21fd 100644 --- a/client/src/components/Dashboard/Statistics.js +++ b/client/src/components/Dashboard/Statistics.js @@ -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 => ( - - {props.history ? - - : -

Empty data

- } - -); +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 ( +
+
+ +
+
+ {dnsQueries} +
+
+ DNS Queries +
+
+
+ +
+ +
+
+ +
+
+ {blockedFiltering} +
+
+ {getPercent(dnsQueries, blockedFiltering)} +
+
+ Blocked by Filters +
+
+
+ +
+ +
+
+ +
+
+ {replacedSafebrowsing} +
+
+ {getPercent(dnsQueries, replacedSafebrowsing)} +
+
+ Blocked malware/phishing +
+
+
+ +
+ +
+
+ +
+
+ {replacedParental} +
+
+ {getPercent(dnsQueries, replacedParental)} +
+
+ Blocked adult websites +
+
+
+ +
+ +
+
+ ); + } +} 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; diff --git a/client/src/components/ui/Line.css b/client/src/components/ui/Line.css new file mode 100644 index 00000000..4e77647e --- /dev/null +++ b/client/src/components/ui/Line.css @@ -0,0 +1,9 @@ +.line__tooltip { + padding: 2px 10px 7px; + line-height: 1.1; + color: #fff; +} + +.line__tooltip-text { + font-size: 0.7rem; +} diff --git a/client/src/components/ui/Line.js b/client/src/components/ui/Line.js new file mode 100644 index 00000000..9fb805c0 --- /dev/null +++ b/client/src/components/ui/Line.js @@ -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 && + (props.color)} + tooltip={slice => ( +
+ {slice.data.map(d => ( +
+ + {d.data.y} + +
+ ))} +
+ )} + theme={{ + tooltip: { + container: { + padding: '0', + background: '#333', + borderRadius: '4px', + }, + }, + }} + /> +); + +Line.propTypes = { + data: PropTypes.array.isRequired, + color: PropTypes.string.isRequired, +}; + +export default Line; diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js index 3ad4f6d5..1af6c276 100644 --- a/client/src/helpers/constants.js +++ b/client/src/helpers/constants.js @@ -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', +}; diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 9aea6a11..7013c9c0 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -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));