diff --git a/src/app/Graph/DataBoxes.tsx b/src/app/Graph/DataBoxes.tsx index 9f7b865..d1c8b95 100644 --- a/src/app/Graph/DataBoxes.tsx +++ b/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,7 +120,18 @@ const CostInfo = function (props: { totalCost: number; potentialCost: number }) ) } - +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) @@ -120,10 +139,14 @@ const Consumed = function (props: { consumption: number; totalCost: number; dayC const renderPeriod = (p: config.PeriodTypes) => { switch (p) { - // case 'last-month': - // return förra månaden + case 'last-year': + return 'Förra året' + case 'this-year': + return getYear() + case 'last-month': + return getLastMonth() case 'this-month': - return sedan den 1e i månaden + return getMonth() case 'rolling': return senaste {props.dayCount} dagarna } @@ -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' diff --git a/src/app/Graph/GraphLoader.tsx b/src/app/Graph/GraphLoader.tsx index 955dac9..04db026 100644 --- a/src/app/Graph/GraphLoader.tsx +++ b/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 Hämtningsfel, data saknas + localStorage.removeItem('period'); + setTimeout(() => + dispatch(config.setPeriod('rolling')) + , 2500); + return Data saknas för vald period, laddar tidigare data. } return ( diff --git a/src/lib/config.ts b/src/lib/config.ts index 02dcba1..485183b 100644 --- a/src/lib/config.ts +++ b/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 diff --git a/src/lib/svk/thunks.ts b/src/lib/svk/thunks.ts index db2437e..6072cbb 100644 --- a/src/lib/svk/thunks.ts +++ b/src/lib/svk/thunks.ts @@ -13,6 +13,22 @@ export const getProfile = createAsyncThunk { 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)