Add ability to view yearly consumption

src/app/Graph/DataBoxes.tsx

@@ -120,6 +120,12 @@ const Consumed = function (props: { consumption: number; totalCost: number; dayC
 
   const renderPeriod = (p: config.PeriodTypes) => {
     switch (p) {
+      case 'last-year':
+        return <span>förra året</span>
+      case 'this-year':
+        return <span>sedan 1a Januari i år</span>
+      case 'running-year':
+        return <span>sedan dagens datum förra året</span>
       case 'last-month':
         return <span>förra månaden</span>
       case 'this-month':
@@ -136,6 +142,15 @@ const Consumed = function (props: { consumption: number; totalCost: number; dayC
       onClick={() => {
         let p: config.PeriodTypes
         switch (configState.periodType) {
+          case 'last-year':
+            p = 'this-year'
+            break
+          case 'this-year':
+            p = 'running-year'
+            break
+          case 'running-year':
+            p = 'last-month'
+            break
           case 'last-month':
             p = 'rolling'
             if (new Date().getDate() === 1) {
@@ -148,7 +163,7 @@ const Consumed = function (props: { consumption: number; totalCost: number; dayC
             p = 'rolling'
             break
           case 'rolling':
-            p = 'last-month'
+            p = 'last-year'
             break
         }
         dispatch(config.setPeriod(p))

src/app/Graph/GraphLoader.lib.ts

@@ -25,3 +25,25 @@ export function getMonthIntervalFor(month: number): Period {
 
   return { from, to, hours }
 }
+
+export function getYearIntervalFor(year: number): Period {
+  const now = new Date()
+  now.setHours(0)
+  now.setMinutes(0)
+  now.setSeconds(0)
+  now.setMilliseconds(0)
+
+  const from = new Date(year, 0, 1)
+
+  let to: Date;
+  if (year < now.getFullYear()) {
+    to = new Date(year+1, 12, 31)  // if year is last year, stop on New Year's eve
+  } else {
+    to = now  // if year is this year, stop today
+  }
+
+  const ms = to.getTime() - from.getTime()
+  const hours = Math.floor(ms / 1000 / 60 / 60)
+
+  return { from, to, hours }
+}

src/app/Graph/GraphLoader.tsx

@@ -15,7 +15,7 @@ import { useDispatch, useSelector } from 'src/lib/hooks'
 import { push } from 'connected-react-router'
 
 import { DataSourceContext } from './Graphs'
-import { getMonthIntervalFor } from './GraphLoader.lib'
+import { getYearIntervalFor, getMonthIntervalFor } from './GraphLoader.lib'
 
 type Params = {
   id: string
@@ -49,6 +49,24 @@ export default function GraphLoader(props: Props) {
     let after: Date | undefined = undefined
     const now = new Date()
     switch (configState.periodType) {
+      case 'last-year': {
+        let prevYear = now.getFullYear() - 1
+        const period = getYearIntervalFor(prevYear)
+        after = period.from
+        first = period.hours
+        break
+      }
+      case 'this-year': {
+        let year = now.getFullYear()
+        const period = getYearIntervalFor(year)
+        after = period.from
+        first = period.hours
+        break
+      }
+      case 'running-year': {
+        last = last = 365 * 24
+        break
+      }
       case 'last-month': {
         let prevMonth = now.getMonth() - 1
         if (prevMonth < 0) prevMonth = 11

src/lib/config.ts

@@ -1,7 +1,7 @@
 import { createAction, createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { RootState } from './store'
 
-export type PeriodTypes = 'last-month' | 'this-month' | 'rolling'
+export type PeriodTypes = 'last-year' | 'this-year' | 'running-year' | 'last-month' | 'this-month' | 'rolling'
 export interface State {
   periodType: PeriodTypes
   beta: boolean
@@ -14,6 +14,9 @@ const getInitialState = (): State => {
     const savedPeriod = localStorage.getItem('period')
 
     switch (savedPeriod) {
+      case 'last-year':
+      case 'this-year':
+      case 'running-year':
       case 'last-month':
       case 'this-month':
       case 'rolling':

src/lib/svk/thunks.ts

@@ -13,6 +13,31 @@ export const getProfile = createAsyncThunk<string, { area: Types.Area; period: P
     const { from, to } = ((): { from: string; to: string } => {
       const YYMMDD = 'YYYY-MM-DD'
       switch (args.period) {
+        case 'last-year': {
+          const startLastYear = moment().startOf('year').subtract(1, 'year').date(1).hour(0).minute(0).second(0)
+          const endLastYear = moment(startLastYear)
+            .add(1, 'year')
+            .subtract(1, 'day')
+            .hour(0)
+            .minute(0)
+            .second(0)
+          return {
+            from: startLastYear.format(YYMMDD),
+            to: endLastYear.format(YYMMDD),
+          }
+        }
+        case 'this-year':
+          return {
+            from: moment().startOf('year').format(YYMMDD),
+            to: moment().format(YYMMDD),
+          }
+        case 'running-year':
+          return {
+            from: moment()
+              .subtract(365 * 24, 'hours')
+              .format(YYMMDD),
+            to: moment().format(YYMMDD),
+          }
         case 'last-month': {
           const startLastMonth = moment().subtract(1, 'month').date(1).hour(0).minute(0).second(0)
           const endLastMonth = moment(startLastMonth)