From e5db33705d39af68e55696a2f72d07cac7b823c5 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Tue, 17 Mar 2020 15:15:19 +0300
Subject: [PATCH] Merge: + client: add digit grouping for numbers on the
 dashboard

Closes #1423

Squashed commit of the following:

commit 6e5de427c48577ebbe4d963f817b66fed9b29bb4
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Wed Mar 11 17:56:39 2020 +0300

    + client: add digit grouping for numbers on the dashboard
---
 client/src/components/Dashboard/Counters.js  | 21 +++++++++++++++-----
 client/src/components/Dashboard/StatsCard.js | 11 ++++++++--
 client/src/components/ui/Cell.js             | 12 ++++++-----
 client/src/helpers/helpers.js                |  9 +++++++++
 4 files changed, 41 insertions(+), 12 deletions(-)

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) => {
                             <Tooltip text={tooltipTitle} type={tooltipType} />
                         </td>
                         <td className="text-right">
-                            <span className="text-muted">{dnsQueries}</span>
+                            <span className="text-muted">
+                                {formatNumber(dnsQueries)}
+                            </span>
                         </td>
                     </tr>
                     <tr>
@@ -56,7 +59,9 @@ const Counters = (props) => {
                             />
                         </td>
                         <td className="text-right">
-                            <span className="text-muted">{blockedFiltering}</span>
+                            <span className="text-muted">
+                                {formatNumber(blockedFiltering)}
+                            </span>
                         </td>
                     </tr>
                     <tr>
@@ -68,7 +73,9 @@ const Counters = (props) => {
                             />
                         </td>
                         <td className="text-right">
-                            <span className="text-muted">{replacedSafebrowsing}</span>
+                            <span className="text-muted">
+                                {formatNumber(replacedSafebrowsing)}
+                            </span>
                         </td>
                     </tr>
                     <tr>
@@ -80,7 +87,9 @@ const Counters = (props) => {
                             />
                         </td>
                         <td className="text-right">
-                            <span className="text-muted">{replacedParental}</span>
+                            <span className="text-muted">
+                                {formatNumber(replacedParental)}
+                            </span>
                         </td>
                     </tr>
                     <tr>
@@ -92,7 +101,9 @@ const Counters = (props) => {
                             />
                         </td>
                         <td className="text-right">
-                            <span className="text-muted">{replacedSafesearch}</span>
+                            <span className="text-muted">
+                                {formatNumber(replacedSafesearch)}
+                            </span>
                         </td>
                     </tr>
                     <tr>
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 = ({
 }) => (
     <Card type="card--full" bodyType="card-wrap">
         <div className="card-body-stats">
-            <div className={`card-value card-value-stats text-${color}`}>{total}</div>
+            <div className={`card-value card-value-stats text-${color}`}>
+                {formatNumber(total)}
+            </div>
             <div className="card-title-stats">{title}</div>
         </div>
-        {percent >= 0 && (<div className={`card-value card-value-percent text-${color}`}>{percent}</div>)}
+        {percent >= 0 && (
+            <div className={`card-value card-value-percent text-${color}`}>
+                {percent}
+            </div>
+        )}
         <div className="card-chart-bg">
             <Line data={lineData} color={STATUS_COLORS[color]} />
         </div>
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 }) => (
     <div className="stats__row">
         <div className="stats__row-value mb-1">
-            <strong>{props.value}</strong>
-            <small className="ml-3 text-muted">{props.percent}%</small>
+            <strong>{formatNumber(value)}</strong>
+            <small className="ml-3 text-muted">{percent}%</small>
         </div>
         <div className="progress progress-xs">
             <div
                 className="progress-bar"
                 style={{
-                    width: `${props.percent}%`,
-                    backgroundColor: props.color,
+                    width: `${percent}%`,
+                    backgroundColor: color,
                 }}
             />
         </div>
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);
+};