New page and referrer url filters.

components/metrics/MetricsTable.js

@@ -38,7 +38,7 @@ export default function MetricsTable({
       return items;
     }
     return [];
-  }, [data]);
+  }, [data, dataFilter, filterOptions]);
 
   async function loadData() {
     const data = await get(`/api/website/${websiteId}/rankings`, {

components/metrics/PagesTable.js

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

components/metrics/QuickButtons.js

@@ -1,31 +1,28 @@
 import React from 'react';
-import classNames from 'classnames';
-import Button from '../common/Button';
+import ButtonGroup from 'components/common/ButtonGroup';
 import { getDateRange } from 'lib/date';
 import styles from './QuickButtons.module.css';
 
 const options = {
-  '24hour': '24h',
-  '7day': '7d',
-  '30day': '30d',
+  '24h': '24hour',
+  '7d': '7day',
+  '30d': '30day',
 };
 
 export default function QuickButtons({ value, onChange }) {
+  const selectedItem = Object.keys(options).find(key => options[key] === value);
+
   function handleClick(value) {
-    onChange(getDateRange(value));
+    onChange(getDateRange(options[value]));
   }
 
   return (
-    <div className={styles.buttons}>
-      {Object.keys(options).map(key => (
-        <Button
-          key={key}
-          className={classNames(styles.button, { [styles.active]: value === key })}
-          onClick={() => handleClick(key)}
-        >
-          {options[key]}
-        </Button>
-      ))}
-    </div>
+    <ButtonGroup
+      size="xsmall"
+      className={styles.buttons}
+      items={Object.keys(options)}
+      selectedItem={selectedItem}
+      onClick={handleClick}
+    />
   );
 }

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