Change date filter format.

components/DateFilter.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { getDateRange } from 'lib/date';
 
-const filterOptions = ['24h', '7d', '30d'];
+const filterOptions = ['24hour', '7day', '30day', '60day', '90day'];
 
 export default function DateFilter({ onChange }) {
-  const [selected, setSelected] = useState('7d');
+  const [selected, setSelected] = useState('7day');
 
   function handleChange(e) {
     const value = e.target.value;
@@ -15,7 +15,7 @@ export default function DateFilter({ onChange }) {
   return (
     <select value={selected} onChange={handleChange}>
       {filterOptions.map(option => (
-        <option key={option} name={option}>
+        <option key={option} value={option}>
           {option}
         </option>
       ))}

components/PageviewsChart.js

@@ -11,10 +11,11 @@ export default function PageviewsChart({ data, unit }) {
   const renderLabel = useCallback(
     (label, index, values) => {
       const d = new Date(values[index].value);
+      const n = data.pageviews.length;
       switch (unit) {
         case 'day':
-          if (data.pageviews.length > 7) {
-            return index % 2 !== 0 ? format(d, 'MMM d') : '';
+          if (n > 7) {
+            return index % (n / 15) === 0 ? format(d, 'MMM d') : '';
           }
           return format(d, 'EEE M/d');
         default:

components/WebsiteList.js

@@ -2,11 +2,12 @@ import React, { useState, useEffect } from 'react';
 import { get } from 'lib/web';
 import WebsiteStats from './WebsiteStats';
 import DateFilter from './DateFilter';
-import { getDateRange } from '../lib/date';
+import { getDateRange } from 'lib/date';
+import styles from './WebsiteList.module.css';
 
 export default function WebsiteList() {
   const [data, setData] = useState();
-  const [dateRange, setDateRange] = useState(getDateRange('7d'));
+  const [dateRange, setDateRange] = useState(getDateRange('7day'));
   const { startDate, endDate, unit } = dateRange;
 
   async function loadData() {
@@ -22,19 +23,18 @@ export default function WebsiteList() {
   }, []);
 
   return (
-    <div>
+    <div className={styles.container}>
       <DateFilter onChange={handleDateChange} />
       {data &&
         data.websites.map(({ website_id, label }) => (
-          <div key={website_id}>
-            <h2>{label}</h2>
-            <WebsiteStats
-              websiteId={website_id}
-              startDate={startDate}
-              endDate={endDate}
-              unit={unit}
-            />
-          </div>
+          <WebsiteStats
+            key={website_id}
+            title={label}
+            websiteId={website_id}
+            startDate={startDate}
+            endDate={endDate}
+            unit={unit}
+          />
         ))}
     </div>
   );

components/WebsiteList.module.css

@@ -0,0 +1,3 @@
+.container > div {
+  margin-bottom: 30px;
+}

components/WebsiteStats.js

@@ -3,8 +3,9 @@ import PageviewsChart from './PageviewsChart';
 import { get } from 'lib/web';
 import { getDateArray, getTimezone } from 'lib/date';
 import WebsiteSummary from './WebsiteSummary';
+import styles from './WebsiteStats.module.css';
 
-export default function WebsiteStats({ websiteId, startDate, endDate, unit }) {
+export default function WebsiteStats({ title, websiteId, startDate, endDate, unit }) {
   const [data, setData] = useState();
   const [pageviews, uniques] = useMemo(() => {
     if (data) {
@@ -32,7 +33,8 @@ export default function WebsiteStats({ websiteId, startDate, endDate, unit }) {
   }, [websiteId, startDate, endDate, unit]);
 
   return (
-    <div>
+    <div className={styles.container}>
+      <div className={styles.title}>{title}</div>
       <WebsiteSummary websiteId={websiteId} startDate={startDate} endDate={endDate} />
       <PageviewsChart data={{ pageviews, uniques }} unit={unit} />
     </div>

components/WebsiteStats.module.css

@@ -0,0 +1,10 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 24px;
+  line-height: 60px;
+  font-weight: 600;
+}

lib/date.js

@@ -30,24 +30,20 @@ export function getDateRange(value) {
   const hour = endOfHour(now);
   const day = endOfDay(now);
 
-  switch (value) {
-    case '7d':
+  const { num, unit } = value.match(/^(?<num>[0-9]+)(?<unit>hour|day)$/).groups;
+
+  switch (unit) {
+    case 'day':
       return {
-        startDate: subDays(day, 7),
+        startDate: subDays(day, num),
         endDate: day,
-        unit: 'day',
+        unit,
       };
-    case '30d':
+    case 'hour':
       return {
-        startDate: subDays(day, 30),
-        endDate: day,
-        unit: 'day',
-      };
-    default:
-      return {
-        startDate: subHours(hour, 24),
+        startDate: subHours(hour, num),
         endDate: hour,
-        unit: 'hour',
+        unit,
       };
   }
 }