From 2e08af97fa0120df552c097f959f01054e651f10 Mon Sep 17 00:00:00 2001
From: Alessandro Barzanti <a.barzanti@gmail.com>
Date: Thu, 26 May 2022 16:01:25 +0100
Subject: [PATCH 1/2] Dates in realtime behind one minute.

---
 ui/src/hooks/chart/useChartPeriod.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/hooks/chart/useChartPeriod.ts b/ui/src/hooks/chart/useChartPeriod.ts
index ac83b3f..12a8de8 100644
--- a/ui/src/hooks/chart/useChartPeriod.ts
+++ b/ui/src/hooks/chart/useChartPeriod.ts
@@ -143,7 +143,7 @@ export const datesFromChartPeriod = (
         case 'realtime':
             return Array(31)
                 .fill(from)
-                .map((_, i) => addMinutesUTC(_, i));
+                .map((_, i) => addMinutesUTC(_, i + 1));
         case '7d':
             return Array(7)
                 .fill(from)

From ec5f57790312fba82b5b4994c5d07e2577da425b Mon Sep 17 00:00:00 2001
From: Alessandro Barzanti <a.barzanti@gmail.com>
Date: Thu, 26 May 2022 16:23:36 +0100
Subject: [PATCH 2/2] Calculate range as from/to difference

---
 ui/src/hooks/chart/useChartPeriod.ts | 13 ++++++++-----
 ui/src/utils/DateTimeUtils.ts        |  8 ++++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/ui/src/hooks/chart/useChartPeriod.ts b/ui/src/hooks/chart/useChartPeriod.ts
index 12a8de8..faeb4f7 100644
--- a/ui/src/hooks/chart/useChartPeriod.ts
+++ b/ui/src/hooks/chart/useChartPeriod.ts
@@ -6,6 +6,8 @@ import {
     addMinutesUTC,
     addMonthsUTC,
     differenceDaysUTC,
+    differenceHoursUTC,
+    differenceMinutesUTC,
     displayDayDetails,
     displayFullMonth,
     displayHourDetails,
@@ -19,6 +21,7 @@ import {
     stringToUTCTimestamp,
     subDaysUTC,
     subMonthsUTC,
+    timestampDisplay,
     UTCNow,
     UTCTimestamp,
 } from '../../utils/DateTimeUtils';
@@ -137,19 +140,19 @@ export const datesFromChartPeriod = (
 ): UTCTimestamp[] => {
     switch (period) {
         case 'day':
-            return Array(24)
+            return Array(differenceHoursUTC(to, from) + 1)
                 .fill(from)
                 .map((_, i) => addHoursUTC(_, i));
         case 'realtime':
-            return Array(31)
+            return Array(differenceMinutesUTC(to, from) + 1)
                 .fill(from)
-                .map((_, i) => addMinutesUTC(_, i + 1));
+                .map((_, i) => addMinutesUTC(_, i));
         case '7d':
-            return Array(7)
+            return Array(differenceDaysUTC(to, from) + 1)
                 .fill(from)
                 .map((_, i) => addDaysUTC(_, i));
         case '30d':
-            return Array(30)
+            return Array(differenceDaysUTC(to, from) + 1)
                 .fill(from)
                 .map((_, i) => addDaysUTC(_, i));
         case 'month':
diff --git a/ui/src/utils/DateTimeUtils.ts b/ui/src/utils/DateTimeUtils.ts
index bb2896f..fdc1695 100644
--- a/ui/src/utils/DateTimeUtils.ts
+++ b/ui/src/utils/DateTimeUtils.ts
@@ -4,6 +4,8 @@ import {
     addMinutes,
     addMonths,
     differenceInCalendarDays,
+    differenceInHours,
+    differenceInMinutes,
     getDaysInMonth,
     isSameMinute,
     isToday,
@@ -191,6 +193,12 @@ export const getDaysInMonthFromTimestamp = (value: UTCTimestamp): UTCTimestamp =
 export const differenceDaysUTC = (left: UTCTimestamp, right: UTCTimestamp): number =>
     differenceInCalendarDays(new Date(left), new Date(right));
 
+export const differenceMinutesUTC = (left: UTCTimestamp, right: UTCTimestamp): number =>
+    differenceInMinutes(new Date(left), new Date(right));
+
+export const differenceHoursUTC = (left: UTCTimestamp, right: UTCTimestamp): number =>
+    differenceInHours(new Date(left), new Date(right));
+
 export const getMinutesUTC = (value: UTCTimestamp): UTCTimestamp => {
     const elements = dateToUTCElements(new Date(value));