Realtime graph issue

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));
         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':

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));