From fb85d576a2c81134e81c1546ccfdf88665087d9e Mon Sep 17 00:00:00 2001
From: Alexander Klein <alexander.klein@logmein.com>
Date: Fri, 19 Feb 2021 09:55:11 +0100
Subject: [PATCH 1/5] feature(DataTable): render nullish labels as 'Unknown'

---
 components/metrics/DataTable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/metrics/DataTable.js b/components/metrics/DataTable.js
index 5cf9ddb4..2eff5519 100644
--- a/components/metrics/DataTable.js
+++ b/components/metrics/DataTable.js
@@ -27,7 +27,7 @@ export default function DataTable({
     return (
       <AnimatedRow
         key={label}
-        label={renderLabel ? renderLabel(row) : label}
+        label={renderLabel ? renderLabel(row) : label ?? 'Unknown'}
         value={value}
         percent={percent}
         animate={animate && !virtualize}

From 14e1366fe4ebd109275113bffd32eada37ed0c5a Mon Sep 17 00:00:00 2001
From: Alexander Klein <alexander.klein@logmein.com>
Date: Fri, 19 Feb 2021 09:56:40 +0100
Subject: [PATCH 2/5] feature(CountriesTable): default nullish labels to
 'Unknown'

---
 components/metrics/CountriesTable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/metrics/CountriesTable.js b/components/metrics/CountriesTable.js
index 59d17dfb..43ca374e 100644
--- a/components/metrics/CountriesTable.js
+++ b/components/metrics/CountriesTable.js
@@ -10,7 +10,7 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
   const countryNames = useCountryNames(locale);
 
   function renderLabel({ x }) {
-    return <div className={locale}>{countryNames[x]}</div>;
+    return <div className={locale}>{countryNames[x] ?? 'Unknown'}</div>;
   }
 
   return (

From ba4272c878ce765d1c3a3041e3c989c380af8342 Mon Sep 17 00:00:00 2001
From: Alexander Klein <alexander.klein@logmein.com>
Date: Fri, 19 Feb 2021 09:58:20 +0100
Subject: [PATCH 3/5] fix: remove devices/OS filter from table components

---
 components/metrics/DevicesTable.js | 2 --
 components/metrics/OSTable.js      | 2 --
 2 files changed, 4 deletions(-)

diff --git a/components/metrics/DevicesTable.js b/components/metrics/DevicesTable.js
index 52b6b5fc..3073cf8b 100644
--- a/components/metrics/DevicesTable.js
+++ b/components/metrics/DevicesTable.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import MetricsTable from './MetricsTable';
-import { deviceFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
 import { getDeviceMessage } from 'components/messages';
 
@@ -12,7 +11,6 @@ export default function DevicesTable({ websiteId, ...props }) {
       type="device"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
-      dataFilter={deviceFilter}
       renderLabel={({ x }) => getDeviceMessage(x)}
     />
   );
diff --git a/components/metrics/OSTable.js b/components/metrics/OSTable.js
index c1790e17..c77ae074 100644
--- a/components/metrics/OSTable.js
+++ b/components/metrics/OSTable.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import MetricsTable from './MetricsTable';
-import { osFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
 
 export default function OSTable({ websiteId, ...props }) {
@@ -11,7 +10,6 @@ export default function OSTable({ websiteId, ...props }) {
       type="os"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
-      dataFilter={osFilter}
     />
   );
 }

From 06f24b0c90b0f62ab65635cc8b11caebefba8d6c Mon Sep 17 00:00:00 2001
From: Alexander Klein <alexander.klein@logmein.com>
Date: Fri, 19 Feb 2021 09:58:58 +0100
Subject: [PATCH 4/5] refactor(filter): remove now obsolete filters

---
 lib/filters.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/lib/filters.js b/lib/filters.js
index d4853618..5797ba3f 100644
--- a/lib/filters.js
+++ b/lib/filters.js
@@ -113,12 +113,7 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
   return Object.keys(map).map(key => ({ x: key, y: map[key], w: links[key] }));
 };
 
-export const browserFilter = data =>
-  data.map(({ x, y }) => ({ x: BROWSERS[x] || x, y })).filter(({ x }) => x);
-
-export const osFilter = data => data.filter(({ x }) => x);
-
-export const deviceFilter = data => data.filter(({ x }) => x);
+export const browserFilter = data => data.map(({ x, y }) => ({ x: BROWSERS[x] ?? x, y }));
 
 export const percentFilter = data => {
   const total = data.reduce((n, { y }) => n + y, 0);

From 306b555b96ad15daa61688a46cdfa24222d8d51f Mon Sep 17 00:00:00 2001
From: Alexander Klein <alexander.klein@logmein.com>
Date: Sat, 20 Feb 2021 08:28:52 +0100
Subject: [PATCH 5/5] fix(metrics): localize 'Unknown' label in tables

---
 components/metrics/CountriesTable.js | 6 +++++-
 components/metrics/DataTable.js      | 7 ++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/metrics/CountriesTable.js b/components/metrics/CountriesTable.js
index 43ca374e..a5c9c801 100644
--- a/components/metrics/CountriesTable.js
+++ b/components/metrics/CountriesTable.js
@@ -10,7 +10,11 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
   const countryNames = useCountryNames(locale);
 
   function renderLabel({ x }) {
-    return <div className={locale}>{countryNames[x] ?? 'Unknown'}</div>;
+    return (
+      <div className={locale}>
+        {countryNames[x] ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />}
+      </div>
+    );
   }
 
   return (
diff --git a/components/metrics/DataTable.js b/components/metrics/DataTable.js
index 2eff5519..d7e58cf7 100644
--- a/components/metrics/DataTable.js
+++ b/components/metrics/DataTable.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
 import NoData from 'components/common/NoData';
 import { formatNumber, formatLongNumber } from 'lib/format';
 import styles from './DataTable.module.css';
@@ -27,7 +28,11 @@ export default function DataTable({
     return (
       <AnimatedRow
         key={label}
-        label={renderLabel ? renderLabel(row) : label ?? 'Unknown'}
+        label={
+          renderLabel
+            ? renderLabel(row)
+            : label ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />
+        }
         value={value}
         percent={percent}
         animate={animate && !virtualize}