Fixed date range calculations.

components/DateFilter.js

@@ -7,6 +7,9 @@ const filterOptions = [
   { label: 'Last 7 days', value: '7day' },
   { label: 'Last 30 days', value: '30day' },
   { label: 'Last 90 days', value: '90day' },
+  { label: 'Today', value: '1day' },
+  { label: 'This week', value: '1week' },
+  { label: 'This month', value: '1month' },
 ];
 
 export default function DateFilter({ value, onChange }) {

components/DropDown.js

@@ -9,13 +9,15 @@ export default function DropDown({ value, options = [], onChange }) {
     setShowMenu(state => !state);
   }
 
-  function handleSelect(value) {
+  function handleSelect(value, e) {
+    e.stopPropagation();
+    setShowMenu(false);
     onChange(value);
   }
 
   useEffect(() => {
     function hideMenu(e) {
-      if (ref.current && !ref.current.contains(e.target)) {
+      if (!ref.current.contains(e.target)) {
         setShowMenu(false);
       }
     }

components/Dropdown.module.css

@@ -18,13 +18,13 @@
   margin-top: 4px;
   border: 1px solid #b3b3b3;
   border-radius: 4px;
+  overflow: hidden;
   z-index: 1;
 }
 
 .option {
   background: #fff;
   padding: 4px 8px;
-  border-radius: 4px;
   cursor: pointer;
 }
 

components/PageviewsChart.js

@@ -14,7 +14,7 @@ export default function PageviewsChart({ data, unit, children }) {
       const n = data.pageviews.length;
       switch (unit) {
         case 'day':
-          if (n > 7) {
+          if (n >= 15) {
             return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
           }
           return format(d, 'EEE M/d');

components/WebsiteChart.js

@@ -10,7 +10,7 @@ import DateFilter from './DateFilter';
 export default function WebsiteChart({ title, websiteId }) {
   const [data, setData] = useState();
   const [dateRange, setDateRange] = useState(getDateRange('7day'));
-  const { startDate, endDate, unit } = dateRange;
+  const { startDate, endDate, unit, value } = dateRange;
 
   const [pageviews, uniques] = useMemo(() => {
     if (data) {
@@ -46,10 +46,10 @@ export default function WebsiteChart({ title, websiteId }) {
       <div className={styles.title}>{title}</div>
       <div className={styles.header}>
         <MetricsBar websiteId={websiteId} startDate={startDate} endDate={endDate} />
-        <DateFilter value={dateRange.value} onChange={handleDateChange} />
+        <DateFilter value={value} onChange={handleDateChange} />
       </div>
       <PageviewsChart data={{ pageviews, uniques }} unit={unit}>
-        <QuickButtons value={dateRange.value} onChange={handleDateChange} />
+        <QuickButtons value={value} onChange={handleDateChange} />
       </PageviewsChart>
     </div>
   );

components/WebsiteList.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { get } from 'lib/web';
 import WebsiteChart from './WebsiteChart';
-import DateFilter from './DateFilter';
 import styles from './WebsiteList.module.css';
 
 export default function WebsiteList() {