From 5d06d2910cb3f7f225eefbe57f74c081747b1400 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hendrik=20Stjernstro=CC=88m?= Date: Thu, 15 Dec 2022 16:00:08 +0100 Subject: [PATCH 1/3] Added more time periods. --- src/app/Graph/DataBoxes.tsx | 39 ++++++++++++++++++++++++++--------- src/app/Graph/GraphLoader.tsx | 14 +++++++++++++ src/lib/config.ts | 6 +++--- src/lib/svk/thunks.ts | 16 ++++++++++++++ 4 files changed, 62 insertions(+), 13 deletions(-) diff --git a/src/app/Graph/DataBoxes.tsx b/src/app/Graph/DataBoxes.tsx index 9f7b865..160940c 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,13 @@ 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 () { + return moment().subtract(1, 'month').format('MMMM') +} const Consumed = function (props: { consumption: number; totalCost: number; dayCount: number }) { const dispatch = useDispatch() const configState = useSelector(config.selector) @@ -120,8 +134,12 @@ 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 case 'rolling': @@ -136,16 +154,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..bef5763 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) 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) From c48ca1a0c9111c6f94eb09fbe855ee8ef6f7be07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hendrik=20Stjernstro=CC=88m?= Date: Thu, 15 Dec 2022 16:00:27 +0100 Subject: [PATCH 2/3] Fixed an issue when you would get stuck if no data was returned from API --- src/app/Graph/GraphLoader.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/Graph/GraphLoader.tsx b/src/app/Graph/GraphLoader.tsx index bef5763..04db026 100644 --- a/src/app/Graph/GraphLoader.tsx +++ b/src/app/Graph/GraphLoader.tsx @@ -143,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 ( From 176ddf64f611959329da567ade784a79a449f0ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hendrik=20Stjernstr=C3=B6m?= Date: Thu, 15 Dec 2022 16:54:58 +0100 Subject: [PATCH 3/3] More dynamic naming of time periods --- src/app/Graph/DataBoxes.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/app/Graph/DataBoxes.tsx b/src/app/Graph/DataBoxes.tsx index 160940c..d1c8b95 100644 --- a/src/app/Graph/DataBoxes.tsx +++ b/src/app/Graph/DataBoxes.tsx @@ -125,7 +125,12 @@ const getYear = function () { return `Januari - ${end}` } const getLastMonth = function () { - return moment().subtract(1, 'month').format('MMMM') + 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() @@ -141,7 +146,7 @@ const Consumed = function (props: { consumption: number; totalCost: number; dayC case 'last-month': return getLastMonth() case 'this-month': - return sedan den 1e i månaden + return getMonth() case 'rolling': return senaste {props.dayCount} dagarna }