Fixed metrics display.

components/metrics/CountriesTable.js

@@ -13,11 +13,7 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
   function renderLink({ x: code }) {
     return (
       <div className={locale}>
-        <FilterLink
-          id="country"
-          value={code}
-          label={countryNames[code] ?? formatMessage(labels.unknown)}
-        />
+        <FilterLink id="country" value={countryNames[code] && code} label={countryNames[code]} />
       </div>
     );
   }

components/metrics/DevicesTable.js

@@ -9,7 +9,7 @@ export default function DevicesTable({ websiteId, ...props }) {
     return (
       <FilterLink
         id="device"
-        value={device}
+        value={labels[device] && device}
         label={formatMessage(labels[device] || labels.unknown)}
       />
     );

components/metrics/LanguagesTable.js

@@ -1,27 +1,24 @@
 import MetricsTable from './MetricsTable';
 import { percentFilter } from 'lib/filters';
-import { FormattedMessage } from 'react-intl';
 import useLanguageNames from 'hooks/useLanguageNames';
 import useLocale from 'hooks/useLocale';
+import useMessages from 'hooks/useMessages';
 
 export default function LanguagesTable({ websiteId, onDataLoad, ...props }) {
+  const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const languageNames = useLanguageNames(locale);
 
-  function renderLabel({ x }) {
-    return (
-      <div className={locale}>
-        {languageNames[x] ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />}{' '}
-      </div>
-    );
-  }
+  const renderLabel = ({ x }) => {
+    return <div className={locale}>{languageNames[x?.split('-')[0]] ?? x}</div>;
+  };
 
   return (
     <MetricsTable
       {...props}
-      title={<FormattedMessage id="metrics.languages" defaultMessage="Languages" />}
+      title={formatMessage(labels.languages)}
       type="language"
-      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      metric={formatMessage(labels.visitors)}
       websiteId={websiteId}
       onDataLoad={data => onDataLoad?.(percentFilter(data))}
       renderLabel={renderLabel}

components/metrics/PagesTable.js

@@ -1,19 +1,42 @@
 import FilterLink from 'components/common/FilterLink';
+import FilterButtons from 'components/common/FilterButtons';
 import MetricsTable from './MetricsTable';
 import useMessages from 'hooks/useMessages';
+import usePageQuery from 'hooks/usePageQuery';
 
-export default function PagesTable({ websiteId, ...props }) {
+export default function PagesTable({ websiteId, showFilters, ...props }) {
+  const {
+    router,
+    resolveUrl,
+    query: { view },
+  } = usePageQuery();
   const { formatMessage, labels } = useMessages();
 
-  const renderLink = ({ x: url }) => {
-    return <FilterLink id="url" value={url} />;
+  const handleSelect = key => {
+    router.push(resolveUrl({ view: key }), null, { shallow: true });
+  };
+
+  const buttons = [
+    {
+      label: formatMessage(labels.url),
+      key: 'url',
+    },
+    {
+      label: formatMessage(labels.title),
+      key: 'title',
+    },
+  ];
+
+  const renderLink = ({ x }) => {
+    return <FilterLink id={view} value={x || `(${formatMessage(labels.none)})`} />;
   };
 
   return (
     <>
+      {showFilters && <FilterButtons items={buttons} selectedKey={view} onSelect={handleSelect} />}
       <MetricsTable
         title={formatMessage(labels.pages)}
-        type="url"
+        type={view}
         metric={formatMessage(labels.views)}
         websiteId={websiteId}
         renderLabel={renderLink}

components/metrics/ReferrersTable.js

@@ -6,10 +6,13 @@ export default function ReferrersTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   const renderLink = ({ w: link, x: referrer }) => {
-    return referrer ? (
-      <FilterLink id="referrer" value={referrer} externalUrl={link} />
-    ) : (
-      `(${formatMessage(labels.none)})`
+    return (
+      <FilterLink
+        id="referrer"
+        value={referrer}
+        externalUrl={link}
+        label={!referrer && `(${formatMessage(labels.none)})`}
+      />
     );
   };
 

components/metrics/WebsiteChart.js

@@ -21,7 +21,7 @@ import useMessages from 'hooks/useMessages';
 
 export default function WebsiteChart({
   websiteId,
-  title,
+  name,
   domain,
   stickyHeader = false,
   showChart = true,
@@ -33,7 +33,7 @@ export default function WebsiteChart({
   const { startDate, endDate, unit, value, modified } = dateRange;
   const [timezone] = useTimezone();
   const {
-    query: { url, referrer, os, browser, device, country },
+    query: { url, referrer, os, browser, device, country, title },
   } = usePageQuery();
   const { get, useQuery } = useApi();
   const { ref, isSticky } = useSticky({ enabled: stickyHeader });
@@ -68,7 +68,7 @@ export default function WebsiteChart({
 
   return (
     <>
-      <WebsiteHeader websiteId={websiteId} title={title} domain={domain}>
+      <WebsiteHeader websiteId={websiteId} name={name} domain={domain}>
         {showDetailsButton && (
           <Link href={`/websites/${websiteId}`}>
             <Button variant="primary">
@@ -80,7 +80,10 @@ export default function WebsiteChart({
           </Link>
         )}
       </WebsiteHeader>
-      <FilterTags websiteId={websiteId} params={{ url, referrer, os, browser, device, country }} />
+      <FilterTags
+        websiteId={websiteId}
+        params={{ url, referrer, os, browser, device, country, title }}
+      />
       <Row
         ref={ref}
         className={classNames(styles.header, {

components/metrics/WebsiteHeader.js

@@ -3,12 +3,12 @@ import Favicon from 'components/common/Favicon';
 import ActiveUsers from './ActiveUsers';
 import styles from './WebsiteHeader.module.css';
 
-export default function WebsiteHeader({ websiteId, title, domain, children }) {
+export default function WebsiteHeader({ websiteId, name, domain, children }) {
   return (
     <Row className={styles.header} justifyContent="center">
-      <Column className={styles.title} variant="two">
+      <Column className={styles.name} variant="two">
         <Favicon domain={domain} />
-        <Text>{title}</Text>
+        <Text>{name}</Text>
       </Column>
       <Column className={styles.body} variant="two">
         <ActiveUsers websiteId={websiteId} />

components/metrics/WebsiteHeader.module.css

@@ -2,7 +2,7 @@
   height: 100px;
 }
 
-.title {
+.name {
   display: flex;
   flex-direction: row;
   align-items: center;