From 5b45301178758133abc9b1cec96b8687e07f7223 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 30 Jul 2020 23:08:33 -0700
Subject: [PATCH] Added year option.

---
 components/DateFilter.js            |  1 +
 components/PageviewsChart.js        |  3 +++
 lib/date.js                         | 14 +++++++++++++-
 pages/api/website/[id]/pageviews.js |  2 +-
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/components/DateFilter.js b/components/DateFilter.js
index 25647db1..2889dde3 100644
--- a/components/DateFilter.js
+++ b/components/DateFilter.js
@@ -10,6 +10,7 @@ const filterOptions = [
   { label: 'Today', value: '1day' },
   { label: 'This week', value: '1week' },
   { label: 'This month', value: '1month' },
+  { label: 'This year', value: '1year' },
 ];
 
 export default function DateFilter({ value, onChange }) {
diff --git a/components/PageviewsChart.js b/components/PageviewsChart.js
index d3d6c444..0f65640e 100644
--- a/components/PageviewsChart.js
+++ b/components/PageviewsChart.js
@@ -12,12 +12,15 @@ export default function PageviewsChart({ data, unit, children }) {
     (label, index, values) => {
       const d = new Date(values[index].value);
       const n = data.pageviews.length;
+
       switch (unit) {
         case 'day':
           if (n >= 15) {
             return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
           }
           return format(d, 'EEE M/d');
+        case 'month':
+          return format(d, 'MMMM');
         default:
           return label;
       }
diff --git a/lib/date.js b/lib/date.js
index 0ea3b4e0..978ede6a 100644
--- a/lib/date.js
+++ b/lib/date.js
@@ -3,18 +3,22 @@ import {
   addMinutes,
   addHours,
   addDays,
+  addMonths,
   subHours,
   subDays,
   startOfHour,
   startOfDay,
   startOfWeek,
   startOfMonth,
+  startOfYear,
   endOfHour,
   endOfDay,
   endOfWeek,
   endOfMonth,
+  endOfYear,
   differenceInHours,
   differenceInCalendarDays,
+  differenceInMonths,
 } from 'date-fns';
 
 export function getTimezone() {
@@ -28,7 +32,7 @@ export function getLocalTime(t) {
 export function getDateRange(value) {
   const now = new Date();
 
-  const { num, unit } = value.match(/^(?<num>[0-9]+)(?<unit>hour|day|week|month)$/).groups;
+  const { num, unit } = value.match(/^(?<num>[0-9]+)(?<unit>hour|day|week|month|year)$/).groups;
 
   if (+num === 1) {
     switch (unit) {
@@ -53,6 +57,13 @@ export function getDateRange(value) {
           unit: 'day',
           value,
         };
+      case 'year':
+        return {
+          startDate: startOfYear(now),
+          endDate: endOfYear(now),
+          unit: 'month',
+          value,
+        };
     }
   }
 
@@ -77,6 +88,7 @@ export function getDateRange(value) {
 const dateFuncs = {
   hour: [differenceInHours, addHours, startOfHour],
   day: [differenceInCalendarDays, addDays, startOfDay],
+  month: [differenceInMonths, addMonths, startOfMonth],
 };
 
 export function getDateArray(data, startDate, endDate, unit) {
diff --git a/pages/api/website/[id]/pageviews.js b/pages/api/website/[id]/pageviews.js
index 578fbcbf..1987f72f 100644
--- a/pages/api/website/[id]/pageviews.js
+++ b/pages/api/website/[id]/pageviews.js
@@ -7,7 +7,7 @@ export default async (req, res) => {
 
   const { id, start_at, end_at, unit, tz } = req.query;
 
-  if (!moment.tz.zone(tz) || !['hour', 'day'].includes(unit)) {
+  if (!moment.tz.zone(tz) || !['month', 'hour', 'day'].includes(unit)) {
     return res.status(400).end();
   }