Details page.

components/RankingsChart.js

@@ -0,0 +1,63 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useSpring, animated } from 'react-spring';
+import classNames from 'classnames';
+import { get } from 'lib/web';
+import styles from './RankingsChart.module.css';
+
+export default function RankingsChart({
+  title,
+  websiteId,
+  startDate,
+  endDate,
+  type,
+  className,
+  filterData,
+}) {
+  const [data, setData] = useState();
+
+  const rankings = useMemo(() => (data && filterData ? filterData(data) : data), [data]);
+
+  const total = useMemo(() => rankings?.reduce((n, { y }) => n + y, 0) || 0, [rankings]);
+
+  async function loadData() {
+    setData(
+      await get(`/api/website/${websiteId}/rankings`, {
+        start_at: +startDate,
+        end_at: +endDate,
+        type,
+      }),
+    );
+  }
+
+  useEffect(() => {
+    if (websiteId) {
+      loadData();
+    }
+  }, [websiteId, startDate, endDate, type]);
+
+  if (!data) {
+    return <h1>loading...</h1>;
+  }
+
+  return (
+    <div className={classNames(styles.container, className)}>
+      <div className={styles.title}>{title}</div>
+      {rankings.map(({ x, y }, i) => (i <= 10 ? <Row label={x} value={y} total={total} /> : null))}
+    </div>
+  );
+}
+
+const Row = ({ label, value, total }) => {
+  const props = useSpring({ width: `${(value / total) * 100}%`, from: { width: '0%' } });
+  const valueProps = useSpring({ y: value, from: { y: 0 } });
+
+  return (
+    <div className={styles.row}>
+      <div className={styles.label}>{label}</div>
+      <animated.div className={styles.value}>
+        {valueProps.y.interpolate(y => y.toFixed(0))}
+      </animated.div>
+      <animated.div className={styles.bar} style={{ ...props }} />
+    </div>
+  );
+};

components/RankingsChart.module.css

@@ -0,0 +1,38 @@
+.container {
+  position: relative;
+  min-height: 390px;
+}
+
+.row {
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.title {
+  font-weight: 600;
+  line-height: 40px;
+}
+
+.label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: 1;
+  z-index: 1;
+}
+
+.value {
+  text-align: right;
+}
+
+.bar {
+  position: absolute;
+  height: 30px;
+  opacity: 0.1;
+  background: #2680eb;
+}

components/WebsiteChart.js

@@ -7,9 +7,13 @@ import QuickButtons from './QuickButtons';
 import styles from './WebsiteChart.module.css';
 import DateFilter from './DateFilter';
 
-export default function WebsiteChart({ title, websiteId }) {
+export default function WebsiteChart({
+  websiteId,
+  defaultDateRange = '7day',
+  onDateChange = () => {},
+}) {
   const [data, setData] = useState();
-  const [dateRange, setDateRange] = useState(getDateRange('7day'));
+  const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const { startDate, endDate, unit, value } = dateRange;
 
   const [pageviews, uniques] = useMemo(() => {
@@ -24,6 +28,7 @@ export default function WebsiteChart({ title, websiteId }) {
 
   function handleDateChange(values) {
     setDateRange(values);
+    onDateChange(values);
   }
 
   async function loadData() {
@@ -43,7 +48,6 @@ export default function WebsiteChart({ title, websiteId }) {
 
   return (
     <div className={styles.container}>
-      <div className={styles.title}>{title}</div>
       <div className={styles.header}>
         <MetricsBar websiteId={websiteId} startDate={startDate} endDate={endDate} />
         <DateFilter value={value} onChange={handleDateChange} />

components/WebsiteDetails.js

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { get } from 'lib/web';
+import WebsiteChart from './WebsiteChart';
+import RankingsChart from './RankingsChart';
+import { getDateRange } from '../lib/date';
+import styles from './WebsiteDetails.module.css';
+
+const osFilter = data => data.map(({ x, y }) => ({ x: !x ? 'Unknown' : x, y }));
+
+const urlFilter = data => data.filter(({ x }) => x !== '' && !x.startsWith('#'));
+
+const refFilter = data =>
+  data.filter(({ x }) => x !== '' && !x.startsWith('/') && !x.startsWith('#'));
+
+const deviceFilter = data => {
+  const devices = data.reduce(
+    (obj, { x, y }) => {
+      const [width] = x.split('x');
+      if (width >= 1920) {
+        obj.desktop += +y;
+      } else if (width >= 1024) {
+        obj.laptop += +y;
+      } else if (width >= 767) {
+        obj.tablet += +y;
+      } else {
+        obj.mobile += +y;
+      }
+      return obj;
+    },
+    { desktop: 0, laptop: 0, tablet: 0, mobile: 0 },
+  );
+
+  return Object.keys(devices).map(key => ({ x: key, y: devices[key] }));
+};
+
+export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
+  const [data, setData] = useState();
+  const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
+  const { startDate, endDate } = dateRange;
+
+  async function loadData() {
+    setData(await get(`/api/website/${websiteId}`));
+  }
+
+  function handleDateChange(values) {
+    setDateRange(values);
+  }
+
+  useEffect(() => {
+    if (websiteId) {
+      loadData();
+    }
+  }, [websiteId]);
+
+  if (!data) {
+    return <h1>loading...</h1>;
+  }
+
+  return (
+    <>
+      <div className="row">
+        <div className="col">
+          <h1>{data.label}</h1>
+          <WebsiteChart websiteId={data.website_id} onDateChange={handleDateChange} />
+        </div>
+      </div>
+      <div className={classNames(styles.row, 'row justify-content-between')}>
+        <RankingsChart
+          title="Top URLs"
+          type="url"
+          className="col-12 col-md-8 col-lg-6"
+          websiteId={data.website_id}
+          startDate={startDate}
+          endDate={endDate}
+          filterData={urlFilter}
+        />
+        <RankingsChart
+          title="Top referrers"
+          type="referrer"
+          className="col-12 col-md-8 col-lg-6"
+          websiteId={data.website_id}
+          startDate={startDate}
+          endDate={endDate}
+          filterData={refFilter}
+        />
+      </div>
+      <div className={classNames(styles.row, 'row justify-content-between')}>
+        <RankingsChart
+          title="Browsers"
+          type="browser"
+          className="col-12 col-md-8 col-lg-4"
+          websiteId={data.website_id}
+          startDate={startDate}
+          endDate={endDate}
+        />
+        <RankingsChart
+          title="Operating system"
+          type="os"
+          className="col-12 col-md-8 col-lg-4"
+          websiteId={data.website_id}
+          startDate={startDate}
+          endDate={endDate}
+          filterData={osFilter}
+        />
+        <RankingsChart
+          title="Devices"
+          type="screen"
+          className="col-12 col-md-8 col-lg-4"
+          websiteId={data.website_id}
+          startDate={startDate}
+          endDate={endDate}
+          filterData={deviceFilter}
+        />
+      </div>
+    </>
+  );
+}

components/WebsiteDetails.module.css

@@ -0,0 +1,3 @@
+.row {
+  margin: 20px 0;
+}

components/WebsiteList.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
 import { get } from 'lib/web';
 import WebsiteChart from './WebsiteChart';
 import styles from './WebsiteList.module.css';
@@ -17,8 +18,15 @@ export default function WebsiteList() {
   return (
     <div className={styles.container}>
       {data &&
-        data.websites.map(({ website_id, label }) => (
-          <WebsiteChart key={website_id} title={label} websiteId={website_id} />
+        data.websites.map(({ website_id, website_uuid, label }) => (
+          <>
+            <h2>
+              <Link href={`/${website_uuid}`}>
+                <a>{label}</a>
+              </Link>
+            </h2>
+            <WebsiteChart key={website_id} title={label} websiteId={website_id} />
+          </>
         ))}
     </div>
   );