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