diff --git a/components/metrics/CountriesTable.js b/components/metrics/CountriesTable.js
index 59d17dfb..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
{countryNames[x]}
;
+ return (
+
+ {countryNames[x] ?? }
+
+ );
}
return (
diff --git a/components/metrics/DataTable.js b/components/metrics/DataTable.js
index 5cf9ddb4..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 (
+ }
value={value}
percent={percent}
animate={animate && !virtualize}
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={}
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={}
websiteId={websiteId}
- dataFilter={osFilter}
/>
);
}
diff --git a/lib/filters.js b/lib/filters.js
index 8adeb13e..6d8b11a3 100644
--- a/lib/filters.js
+++ b/lib/filters.js
@@ -113,6 +113,8 @@ 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 }));
+
export const eventTypeFilter = (data, types) => {
if (!types || types.length === 0) {
return data;
@@ -124,13 +126,6 @@ export const eventTypeFilter = (data, types) => {
});
};
-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 percentFilter = data => {
const total = data.reduce((n, { y }) => n + y, 0);
return data.map(({ x, y, ...props }) => ({ x, y, z: total ? (y / total) * 100 : 0, ...props }));