More refactoring and clean-up.

components/metrics/PagesTable.js

@@ -1,31 +1,25 @@
 import { useState } from 'react';
-import { useIntl, defineMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
 import FilterLink from 'components/common/FilterLink';
 import FilterButtons from 'components/common/FilterButtons';
 import { urlFilter } from 'lib/filters';
+import { labels } from 'components/messages';
 import MetricsTable from './MetricsTable';
 
 export const FILTER_COMBINED = 0;
 export const FILTER_RAW = 1;
 
-const messages = defineMessage({
-  combined: { id: 'metrics.filter.combined', defaultMessage: 'Combined' },
-  raw: { id: 'metrics.filter.raw', defaultMessage: 'Raw' },
-  pages: { id: 'metrics.pages', defaultMessage: 'Pages' },
-  views: { id: 'metrics.views', defaultMessage: 'View' },
-});
-
 export default function PagesTable({ websiteId, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
   const { formatMessage } = useIntl();
 
   const buttons = [
     {
-      label: formatMessage(messages.combined),
+      label: formatMessage(labels.filterCombined),
       value: FILTER_COMBINED,
     },
     {
-      label: formatMessage(messages.raw),
+      label: formatMessage(labels.filterRaw),
       value: FILTER_RAW,
     },
   ];
@@ -38,9 +32,9 @@ export default function PagesTable({ websiteId, showFilters, ...props }) {
     <>
       {showFilters && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
       <MetricsTable
-        title={formatMessage(messages.pages)}
+        title={formatMessage(labels.pages)}
         type="url"
-        metric={formatMessage(messages.views)}
+        metric={formatMessage(labels.views)}
         websiteId={websiteId}
         dataFilter={filter !== FILTER_RAW ? urlFilter : null}
         renderLabel={renderLink}

components/metrics/ReferrersTable.js

@@ -1,50 +1,42 @@
 import { useState } from 'react';
-import { useIntl, defineMessages } from 'react-intl';
+import { useIntl } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import FilterButtons from 'components/common/FilterButtons';
 import FilterLink from 'components/common/FilterLink';
 import { refFilter } from 'lib/filters';
+import { labels } from 'components/messages';
 
 const FILTER_COMBINED = 0;
 const FILTER_RAW = 1;
 
-const messages = defineMessages({
-  combined: { id: 'metrics.filter.combined', defaultMessage: 'Combined' },
-  raw: { id: 'metrics.filter.raw', defaultMessage: 'Raw' },
-  referrers: { id: 'metrics.referrers', defaultMessage: 'Referrers' },
-  views: { id: 'metrics.views', defaultMessage: 'Views' },
-  none: { id: 'label.none', defaultMessage: 'None' },
-});
-
 export default function ReferrersTable({ websiteId, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
   const { formatMessage } = useIntl();
-  const none = formatMessage(messages.none);
 
-  const buttons = [
+  const items = [
     {
-      label: formatMessage(messages.combined),
+      label: formatMessage(labels.filterCombined),
       value: FILTER_COMBINED,
     },
-    { label: formatMessage(messages.raw), value: FILTER_RAW },
+    { label: formatMessage(labels.filterRaw), value: FILTER_RAW },
   ];
 
   const renderLink = ({ w: link, x: referrer }) => {
     return referrer ? (
       <FilterLink id="referrer" value={referrer} externalUrl={link} />
     ) : (
-      `(${none})`
+      `(${formatMessage(labels.none)})`
     );
   };
 
   return (
     <>
-      {showFilters && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
+      {showFilters && <FilterButtons items={items} selected={filter} onSelect={setFilter} />}
       <MetricsTable
         {...props}
-        title={formatMessage(messages.referrers)}
+        title={formatMessage(labels.referrers)}
         type="referrer"
-        metric={formatMessage(messages.views)}
+        metric={formatMessage(labels.views)}
         websiteId={websiteId}
         dataFilter={filter !== FILTER_RAW ? refFilter : null}
         renderLabel={renderLink}

components/metrics/WebsiteChart.js

@@ -97,16 +97,12 @@ export default function WebsiteChart({
             </a>
           </Link>
         )}
-      </WebsiteHeader>
-      <StickyHeader
-        className={styles.metrics}
-        stickyClassName={styles.sticky}
-        enabled={stickyHeader}
-      >
         <FilterTags
           params={{ url, referrer, os, browser, device, country }}
           onClick={handleCloseFilter}
         />
+      </WebsiteHeader>
+      <StickyHeader stickyClassName={styles.sticky} enabled={stickyHeader}>
         <Row className={styles.header}>
           <Column xs={12} sm={12} md={12} defaultSize={10}>
             <MetricsBar websiteId={websiteId} />

components/metrics/WebsiteChart.module.css

@@ -17,15 +17,12 @@
 }
 
 .header {
-  min-height: 90px;
-  margin-bottom: 20px;
-}
-
-.metrics {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  min-height: 90px;
+  margin-bottom: 20px;
 }
 
 .sticky {
@@ -35,6 +32,7 @@
   border-bottom: 1px solid var(--base300);
   z-index: 3;
   width: inherit;
+  padding-top: 20px;
 }
 
 .filter {