diff --git a/client/src/components/Dashboard/Counters.js b/client/src/components/Dashboard/Counters.js index 95687d64..8364ffb6 100644 --- a/client/src/components/Dashboard/Counters.js +++ b/client/src/components/Dashboard/Counters.js @@ -5,6 +5,7 @@ import round from 'lodash/round'; import Card from '../ui/Card'; import Tooltip from '../ui/Tooltip'; +import { formatNumber } from '../../helpers/helpers'; const tooltipType = 'tooltip-custom--narrow'; @@ -42,7 +43,9 @@ const Counters = (props) => { - {dnsQueries} + + {formatNumber(dnsQueries)} + @@ -56,7 +59,9 @@ const Counters = (props) => { /> - {blockedFiltering} + + {formatNumber(blockedFiltering)} + @@ -68,7 +73,9 @@ const Counters = (props) => { /> - {replacedSafebrowsing} + + {formatNumber(replacedSafebrowsing)} + @@ -80,7 +87,9 @@ const Counters = (props) => { /> - {replacedParental} + + {formatNumber(replacedParental)} + @@ -92,7 +101,9 @@ const Counters = (props) => { /> - {replacedSafesearch} + + {formatNumber(replacedSafesearch)} + diff --git a/client/src/components/Dashboard/StatsCard.js b/client/src/components/Dashboard/StatsCard.js index 4d99d9b5..7e5fe9ef 100644 --- a/client/src/components/Dashboard/StatsCard.js +++ b/client/src/components/Dashboard/StatsCard.js @@ -2,6 +2,7 @@ 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'; @@ -10,10 +11,16 @@ const StatsCard = ({ }) => (
-
{total}
+
+ {formatNumber(total)} +
{title}
- {percent >= 0 && (
{percent}
)} + {percent >= 0 && ( +
+ {percent} +
+ )}
diff --git a/client/src/components/ui/Cell.js b/client/src/components/ui/Cell.js index 93a7845f..b2d4730c 100644 --- a/client/src/components/ui/Cell.js +++ b/client/src/components/ui/Cell.js @@ -1,18 +1,20 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Cell = props => ( +import { formatNumber } from '../../helpers/helpers'; + +const Cell = ({ value, percent, color }) => (
- {props.value} - {props.percent}% + {formatNumber(value)} + {percent}%
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 87cf85d6..e32ec9a2 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -449,3 +449,12 @@ export const getCurrentFilter = (url, filters) => { return { name: '', url: '' }; }; + +/** + * @param number Number to format + * @returns string Returns a string with a language-sensitive representation of this number + */ +export const formatNumber = (num) => { + const currentLanguage = i18n.languages[0] || DEFAULT_LANGUAGE; + return num.toLocaleString(currentLanguage); +};