New page and referrer url filters.

components/metrics/ReferrersTable.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import MetricsTable from './MetricsTable';
 import { refFilter } from 'lib/filters';
+import ButtonGroup from '../common/ButtonGroup';
 
 export default function Referrers({
   websiteId,
@@ -10,19 +11,36 @@ export default function Referrers({
   limit,
   onExpand = () => {},
 }) {
+  const [filter, setFilter] = useState('Combined');
+
   return (
     <MetricsTable
       title="Referrers"
       type="referrer"
       metric="Views"
-      headerComponent={null}
+      headerComponent={limit ? null : <FilterButtons selected={filter} onClick={setFilter} />}
       websiteId={websiteId}
       startDate={startDate}
       endDate={endDate}
       limit={limit}
       dataFilter={refFilter}
-      filterOptions={{ domain: websiteDomain }}
+      filterOptions={{
+        domain: websiteDomain,
+        domainOnly: filter === 'Domain only',
+        raw: filter === 'Raw',
+      }}
       onExpand={onExpand}
     />
   );
 }
+
+const FilterButtons = ({ selected, onClick }) => {
+  return (
+    <ButtonGroup
+      size="xsmall"
+      items={['Domain only', 'Combined', 'Raw']}
+      selectedItem={selected}
+      onClick={onClick}
+    />
+  );
+};