Added year option.

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 }) {

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;
       }

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) {

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();
   }