Feature/more time periods

src/app/Graph/DataBoxes.tsx

@@ -8,6 +8,7 @@ import { useDispatch, useSelector } from 'src/lib/hooks'
 
 import { DataSourceContext } from './Graphs'
 import { useContext } from 'react'
+import moment from 'moment'
 
 type Props = {
   days: dataprep.Day[]
@@ -20,6 +21,13 @@ const dayIsComplete = (day: dataprep.Day) => {
   )
 }
 
+moment.updateLocale('en', {
+  months : [
+      "Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli",
+      "Augusti", "September", "Oktober", "November", "December"
+  ]
+});
+
 const DataBoxes = function (props: Props) {
   // clear out the incomplete days
   const completeDays = props.days.filter(dayIsComplete)
@@ -112,18 +120,33 @@ const CostInfo = function (props: { totalCost: number; potentialCost: number })
     </div>
   )
 }
-
+const getYear = function () {
+  const end = moment().subtract(1 ,'month').endOf('month').format('MMMM') //
+  return `Januari - ${end}`
+}
+const getLastMonth = function () {
+  const month = moment().subtract(1, 'month').format('MMMM')
+  return `i ${month}`
+}
+const getMonth = function () {
+  const month = moment().format('MMMM')
+  return `i ${month}`
+}
 const Consumed = function (props: { consumption: number; totalCost: number; dayCount: number }) {
   const dispatch = useDispatch()
   const configState = useSelector(config.selector)
   const dataSource = useContext(DataSourceContext)
 
   const renderPeriod = (p: config.PeriodTypes) => {
     switch (p) {
-      // case 'last-month':
-      //   return <span>förra månaden</span>
+      case 'last-year':
+        return 'Förra året'
+      case 'this-year':
+        return getYear()
+      case 'last-month':
+        return getLastMonth()
       case 'this-month':
-        return <span>sedan den 1e i månaden</span>
+        return getMonth()
       case 'rolling':
         return <span>senaste {props.dayCount} dagarna</span>
     }
@@ -136,16 +159,17 @@ const Consumed = function (props: { consumption: number; totalCost: number; dayC
       onClick={() => {
         let p: config.PeriodTypes
         switch (configState.periodType) {
-          case 'last-month':
+          case 'last-year':
             p = 'rolling'
-            //   if (new Date().getDate() === 1) {
-            //     p = 'rolling'
-            //   } else {
-            //     p = 'this-month'
-            //   }
+            break
+          case 'this-year':
+            p = 'last-year'
+            break
+          case 'last-month':
+            p = 'this-year'
             break
           case 'this-month':
-            p = 'rolling'
+            p = 'last-month'
             break
           case 'rolling':
             p = 'this-month'

src/app/Graph/GraphLoader.tsx

@@ -41,6 +41,20 @@ export default function GraphLoader(props: Props) {
 
   let period: number
   switch (configState.periodType) {
+    case 'last-year': {
+      const now = moment().subtract(1, 'year');
+      const start = moment(now.format('YYYY')).date(1).hour(0).minute(0).second(0)
+      const diff = moment.duration(now.diff(start))
+      period = Math.ceil(diff.as('hours'))
+      break
+    }
+    case 'this-year': {
+      const now = moment()
+      const start = moment(now.format('YYYY')).date(1).hour(0).minute(0).second(0)
+      const diff = moment.duration(now.diff(start))
+      period = Math.ceil(diff.as('hours'))
+      break
+    }
     case 'last-month': {
       const now = moment()
       const start = moment().subtract(1, 'month').date(1).hour(0).minute(0).second(0)
@@ -129,7 +143,11 @@ export default function GraphLoader(props: Props) {
   )
 
   if (!firstLoad && days.length === 0) {
-    return <Alert type="oh-no">Hämtningsfel, data saknas</Alert>
+    localStorage.removeItem('period');
+    setTimeout(() =>  
+      dispatch(config.setPeriod('rolling'))
+    , 2500);
+    return <Alert type="oh-no">Data saknas för vald period, laddar tidigare data.</Alert> 
   }
 
   return (

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-month' | 'this-month' | 'rolling' | 'this-year' | 'last-year'
 export interface State {
   periodType: PeriodTypes
   beta: boolean
@@ -14,9 +14,9 @@ const getInitialState = (): State => {
     const savedPeriod = localStorage.getItem('period')
 
     switch (savedPeriod) {
+      case 'last-year':
+      case 'this-year':
       case 'last-month':
-        periodType = 'rolling'
-        break
       case 'this-month':
       case 'rolling':
         periodType = savedPeriod

src/lib/svk/thunks.ts

@@ -13,6 +13,22 @@ 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 now = moment().subtract(1, 'year').endOf('year');
+          const startThisYear = moment(now.format('YYYY')).date(1).month(0).hour(0).minute(0).second(0)
+          return {
+            from: startThisYear.format(YYMMDD),
+            to: now.format(YYMMDD),
+          }
+        }
+        case 'this-year': {
+          const now = moment().subtract(1, 'month').endOf('month');
+          const startThisYear = moment(now.format('YYYY')).date(1).month(0).hour(0).minute(0).second(0)
+          return {
+            from: startThisYear.format(YYMMDD),
+            to: now.format(YYMMDD),
+          }
+        }
         case 'last-month': {
           const startLastMonth = moment().subtract(1, 'month').date(1).hour(0).minute(0).second(0)
           const endLastMonth = moment(startLastMonth)