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);
+};