Updated pages and referrer filters to merge urls.

components/metrics/BrowsersTable.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { browserFilter } from 'lib/filters';
+
+export default function BrowsersTable({ websiteId, startDate, endDate, limit, onExpand }) {
+  return (
+    <MetricsTable
+      title="Browsers"
+      type="browser"
+      metric="Visitors"
+      websiteId={websiteId}
+      startDate={startDate}
+      endDate={endDate}
+      limit={limit}
+      dataFilter={browserFilter}
+      onExpand={onExpand}
+    />
+  );
+}

components/metrics/CountriesTable.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { countryFilter, percentFilter } from 'lib/filters';
+
+export default function CountriesTable({
+  websiteId,
+  startDate,
+  endDate,
+  limit,
+  onDataLoad,
+  onExpand,
+}) {
+  return (
+    <MetricsTable
+      title="Countries"
+      type="country"
+      metric="Visitors"
+      websiteId={websiteId}
+      startDate={startDate}
+      endDate={endDate}
+      limit={limit}
+      dataFilter={countryFilter}
+      onDataLoad={data => onDataLoad(percentFilter(data))}
+      onExpand={onExpand}
+    />
+  );
+}

components/metrics/DevicesTable.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { deviceFilter } from 'lib/filters';
+
+export default function DevicesTable({ websiteId, startDate, endDate, limit, onExpand }) {
+  return (
+    <MetricsTable
+      title="Devices"
+      type="device"
+      metric="Visitors"
+      websiteId={websiteId}
+      startDate={startDate}
+      endDate={endDate}
+      limit={limit}
+      dataFilter={deviceFilter}
+      onExpand={onExpand}
+    />
+  );
+}

components/metrics/MetricsTable.js

@@ -7,18 +7,20 @@ import Arrow from 'assets/arrow-right.svg';
 import { get } from 'lib/web';
 import { percentFilter } from 'lib/filters';
 import { formatNumber, formatLongNumber } from 'lib/format';
-import styles from './RankingsChart.module.css';
+import styles from './MetricsTable.module.css';
 
-export default function RankingsChart({
+export default function MetricsTable({
   title,
+  metric,
   websiteId,
   startDate,
   endDate,
   type,
-  heading,
   className,
   dataFilter,
+  filterOptions,
   limit,
+  headerComponent,
   onDataLoad = () => {},
   onExpand = () => {},
 }) {
@@ -29,7 +31,7 @@ export default function RankingsChart({
 
   const rankings = useMemo(() => {
     if (data) {
-      const items = dataFilter ? dataFilter(data) : data;
+      const items = percentFilter(dataFilter ? dataFilter(data, filterOptions) : data);
       if (limit) {
         return items.filter((e, i) => i < limit);
       }
@@ -45,10 +47,8 @@ export default function RankingsChart({
       type,
     });
 
-    const updated = percentFilter(data);
-
-    setData(updated);
-    onDataLoad(updated);
+    setData(data);
+    onDataLoad(data);
   }
 
   function handleSetFormat() {
@@ -88,8 +88,9 @@ export default function RankingsChart({
     <div className={classNames(styles.container, className)}>
       <div className={styles.header}>
         <div className={styles.title}>{title}</div>
-        <div className={styles.heading} onClick={handleSetFormat}>
-          {heading}
+        {headerComponent}
+        <div className={styles.metric} onClick={handleSetFormat}>
+          {metric}
         </div>
       </div>
       <div className={styles.body}>
@@ -121,9 +122,11 @@ const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) =>
   });
 
   return (
-    <div className={styles.row} onClick={onClick}>
-      <div className={styles.label}>{label}</div>
-      <animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
+    <div className={styles.row}>
+      <div className={styles.label}>{decodeURI(label)}</div>
+      <div className={styles.value} onClick={onClick}>
+        <animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
+      </div>
       <div className={styles.percent}>
         <animated.div
           className={styles.bar}

components/metrics/MetricsTable.module.css

@@ -9,16 +9,18 @@
 
 .header {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   line-height: 40px;
 }
 
 .title {
-  flex: 1;
+  display: flex;
   font-weight: 600;
   font-size: var(--font-size-normal);
 }
 
-.heading {
+.metric {
   font-size: var(--font-size-small);
   text-align: center;
   width: 100px;

components/metrics/OSTable.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+
+export default function OSTable({ websiteId, startDate, endDate, limit, onExpand }) {
+  return (
+    <MetricsTable
+      title="Operating System"
+      type="os"
+      metric="Visitors"
+      websiteId={websiteId}
+      startDate={startDate}
+      endDate={endDate}
+      limit={limit}
+      onExpand={onExpand}
+    />
+  );
+}

components/metrics/PagesTable.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { urlFilter } from 'lib/filters';
+
+export default function PagesTable({
+  websiteId,
+  websiteDomain,
+  startDate,
+  endDate,
+  limit,
+  onExpand,
+}) {
+  return (
+    <MetricsTable
+      title="Pages"
+      type="url"
+      metric="Views"
+      headerComponent={null}
+      websiteId={websiteId}
+      startDate={startDate}
+      endDate={endDate}
+      limit={limit}
+      dataFilter={urlFilter}
+      filterOptions={{ domain: websiteDomain }}
+      onExpand={onExpand}
+    />
+  );
+}

components/metrics/ReferrersTable.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { refFilter } from 'lib/filters';
+
+export default function Referrers({
+  websiteId,
+  websiteDomain,
+  startDate,
+  endDate,
+  limit,
+  onExpand = () => {},
+}) {
+  return (
+    <MetricsTable
+      title="Referrers"
+      type="referrer"
+      metric="Views"
+      headerComponent={null}
+      websiteId={websiteId}
+      startDate={startDate}
+      endDate={endDate}
+      limit={limit}
+      dataFilter={refFilter}
+      filterOptions={{ domain: websiteDomain }}
+      onExpand={onExpand}
+    />
+  );
+}