Merge pull request #486 from gnarlex/unknown-count

Add 'Unknown' label to metrics tables

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]}</div>;
+    return (
+      <div className={locale}>
+        {countryNames[x] ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />}
+      </div>
+    );
   }
 
   return (

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}
+        label={
+          renderLabel
+            ? renderLabel(row)
+            : label ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />
+        }
         value={value}
         percent={percent}
         animate={animate && !virtualize}

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

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

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