GH-1791 / add locale-appropriate formatting to historical stats numbe…

…rs (#498)

* Add locale-appropriate formatting to historical stat numbers

* small lintfix in Settings/OptIn component

app/panel/components/Settings/OptIn.jsx

@@ -31,7 +31,7 @@ const OptIn = (props) => {
 					<h3>{ t('settings_support_ghostery') }</h3>
 					<h5>
 						{ t('settings_support_ghostery_by') }
-:
+						:
 					</h5>
 					<div className="s-option-group">
 						<div className="s-square-checkbox">

app/panel/components/StatsView.jsx

@@ -147,31 +147,31 @@ const StatsView = (props) => {
 				<div id="trackersSeen" className={tile} onClick={selectView}>
 					<div className="tile-title"><p className={trackersSeenClassNames}>{t('panel_stats_trackers_seen')}</p></div>
 					<div className={trackersSeenValueClassNames}>
-						<p className="tile-value-content">{subscriber ? trackersSeen : ''}</p>
+						<p className="tile-value-content">{subscriber ? trackersSeen.toLocaleString() : ''}</p>
 						<div className="active-underline" />
 					</div>
 				</div>
 				<div className="tile-divider" />
 				<div id="trackersBlocked" className={tile} onClick={selectView}>
 					<div className="tile-title"><p className={trackersBlockedClassNames}>{t('panel_stats_trackers_blocked')}</p></div>
 					<div className={trackersBlockedValueClassNames}>
-						<p className="tile-value-content">{subscriber ? trackersBlocked : ''}</p>
+						<p className="tile-value-content">{subscriber ? trackersBlocked.toLocaleString() : ''}</p>
 						<div className="active-underline" />
 					</div>
 				</div>
 				<div className="tile-divider" />
 				<div id="trackersAnonymized" className={tile} onClick={selectView}>
 					<div className="tile-title"><p className={trackersAnonymizedClassNames}>{t('panel_stats_trackers_anonymized')}</p></div>
 					<div className={trackersAnonymizedValueClassNames}>
-						<p className="tile-value-content">{subscriber ? trackersAnonymized : ''}</p>
+						<p className="tile-value-content">{subscriber ? trackersAnonymized.toLocaleString() : ''}</p>
 						<div className="active-underline" />
 					</div>
 				</div>
 				<div className="tile-divider" />
 				<div id="adsBlocked" className={tile} onClick={selectView}>
 					<div className="tile-title"><p className={adsBlockedClassNames}>{t('panel_stats_ads_blocked')}</p></div>
 					<div className={adsBlockedValueClassNames}>
-						<p className="tile-value-content">{subscriber ? adsBlocked : ''}</p>
+						<p className="tile-value-content">{subscriber ? adsBlocked.toLocaleString() : ''}</p>
 						<div className="active-underline" />
 					</div>
 				</div>