Merge pull request #486 from gnarlex/unknown-count

Add 'Unknown' label to metrics tables
This commit is contained in:
Mike Cao 2021-02-20 02:01:05 -08:00 committed by GitHub
commit 7921893c1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 13 additions and 13 deletions

View File

@ -10,7 +10,11 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
const countryNames = useCountryNames(locale); const countryNames = useCountryNames(locale);
function renderLabel({ x }) { function renderLabel({ x }) {
return <div className={locale}>{countryNames[x]}</div>; return (
<div className={locale}>
{countryNames[x] ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />}
</div>
);
} }
return ( return (

View File

@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { FixedSizeList } from 'react-window'; import { FixedSizeList } from 'react-window';
import { useSpring, animated, config } from 'react-spring'; import { useSpring, animated, config } from 'react-spring';
import classNames from 'classnames'; import classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import NoData from 'components/common/NoData'; import NoData from 'components/common/NoData';
import { formatNumber, formatLongNumber } from 'lib/format'; import { formatNumber, formatLongNumber } from 'lib/format';
import styles from './DataTable.module.css'; import styles from './DataTable.module.css';
@ -27,7 +28,11 @@ export default function DataTable({
return ( return (
<AnimatedRow <AnimatedRow
key={label} key={label}
label={renderLabel ? renderLabel(row) : label} label={
renderLabel
? renderLabel(row)
: label ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />
}
value={value} value={value}
percent={percent} percent={percent}
animate={animate && !virtualize} animate={animate && !virtualize}

View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import MetricsTable from './MetricsTable'; import MetricsTable from './MetricsTable';
import { deviceFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { getDeviceMessage } from 'components/messages'; import { getDeviceMessage } from 'components/messages';
@ -12,7 +11,6 @@ export default function DevicesTable({ websiteId, ...props }) {
type="device" type="device"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />} metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId} websiteId={websiteId}
dataFilter={deviceFilter}
renderLabel={({ x }) => getDeviceMessage(x)} renderLabel={({ x }) => getDeviceMessage(x)}
/> />
); );

View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import MetricsTable from './MetricsTable'; import MetricsTable from './MetricsTable';
import { osFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
export default function OSTable({ websiteId, ...props }) { export default function OSTable({ websiteId, ...props }) {
@ -11,7 +10,6 @@ export default function OSTable({ websiteId, ...props }) {
type="os" type="os"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />} metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId} websiteId={websiteId}
dataFilter={osFilter}
/> />
); );
} }

View File

@ -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] })); 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) => { export const eventTypeFilter = (data, types) => {
if (!types || types.length === 0) { if (!types || types.length === 0) {
return data; 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 => { export const percentFilter = data => {
const total = data.reduce((n, { y }) => n + y, 0); const total = data.reduce((n, { y }) => n + y, 0);
return data.map(({ x, y, ...props }) => ({ x, y, z: total ? (y / total) * 100 : 0, ...props })); return data.map(({ x, y, ...props }) => ({ x, y, z: total ? (y / total) * 100 : 0, ...props }));