feat: Enforce X limits of axis based on selected timerange

services/frontend/src/components/charts/chart-analog.vue

@@ -5,6 +5,7 @@
     :height="props.height"
     :show-x-ticks="props.showXTicks"
     :x-tick-unit="props.xTickUnit"
+    :x-limits="props.dateRange"
   />
 </template>
 
@@ -40,6 +41,7 @@ import {
   DeepPartial,
 } from '@/utils/types.ts';
 import {
+  IDatetimeRange,
   ITimeseries, toChartJsData,
 } from '@/components/charts/timeseries.ts';
 
@@ -52,6 +54,7 @@ interface IChartAnalogProps {
   tickStepSize?: number;
   showXTicks?: boolean;
   xTickUnit?: TimeUnit;
+  dateRange?: IDatetimeRange;
 }
 
 const props = withDefaults(defineProps<IChartAnalogProps>(), {
@@ -64,6 +67,7 @@ const props = withDefaults(defineProps<IChartAnalogProps>(), {
   tickStepSize: 5,
   showXTicks: true,
   xTickUnit: 'day',
+  dateRange: undefined,
 });
 
 const lineGradient = ref<GradientCache>({

services/frontend/src/components/charts/chart-base-line.vue

@@ -40,13 +40,17 @@ import {
   xTicksGradient,
 } from '@/components/charts/gradients.ts';
 import crosshair from '@/components/charts/crosshair.ts';
+import {
+  IDatetimeRange,
+} from '@/components/charts/timeseries.ts';
 
 interface IChartBaseLineProps {
   chartData: DeepPartial<TLineChartData>;
   yAxes: TLineAxisProps;
   height?: string;
   showXTicks?: boolean;
   xTickUnit?: TimeUnit;
+  xLimits?: IDatetimeRange;
 }
 
 const props = withDefaults(
@@ -55,6 +59,7 @@ const props = withDefaults(
     height: '10rem',
     showXTicks: true,
     xTickUnit: 'day',
+    xLimits: undefined,
   },
 );
 
@@ -101,6 +106,8 @@ const chartOptions = computed<DeepPartial<ChartOptions>>(() => {
         color: tickColor,
         tickColor,
       },
+      min: props.xLimits?.startAt.toISOString(),
+      max: props.xLimits?.endAt.toISOString(),
     },
   };
   // explicitly set the color of the ticks and grid lines if not set in the props

services/frontend/src/components/charts/chart-digital.vue

@@ -4,6 +4,7 @@
     :y-axes="yAxes"
     :height="props.height"
     :show-x-ticks="props.showXTicks"
+    :x-limits="props.dateRange"
   />
 </template>
 
@@ -34,6 +35,7 @@ import {
   DeepPartial,
 } from '@/utils/types.ts';
 import {
+  IDatetimeRange,
   ITimeseries, toChartJsData,
 } from '@/components/charts/timeseries.ts';
 import i18n from '@/plugins/i18n';
@@ -43,12 +45,14 @@ interface IChartAnalogProps {
   color: string | GradientDefinition | DiscreteGradientDefinition;
   height?: string;
   showXTicks?: boolean;
+  dateRange?: IDatetimeRange;
 }
 
 const props = withDefaults(defineProps<IChartAnalogProps>(), {
   height: '10rem',
   tickStepSize: 5,
   showXTicks: true,
+  dateRange: undefined,
 });
 
 const limits: [number, number] = [

services/frontend/src/components/charts/chart-temp-humi.vue

@@ -4,6 +4,7 @@
     :y-axes="yAxes"
     height="20rem"
     :x-tick-unit="xTickUnit"
+    :x-limits="props.dateRange"
   />
 </template>
 
@@ -40,15 +41,18 @@ import {
   DeepPartial,
 } from '@/utils/types.ts';
 import {
+  IDatetimeRange,
   ITimeseries, toChartJsData,
 } from '@/components/charts/timeseries.ts';
 
 const props = withDefaults(defineProps<{
   temperature: ITimeseries,
   humidity: ITimeseries,
   xTickUnit?: TimeUnit;
+  dateRange?: IDatetimeRange;
 }>(), {
   xTickUnit: 'day',
+  dateRange: undefined,
 });
 
 const tempGradient = ref<GradientCache>({

services/frontend/src/components/charts/timeseries.ts

@@ -1,4 +1,6 @@
-import dayjs from 'dayjs';
+import dayjs, {
+  Dayjs,
+} from 'dayjs';
 
 /**
  * Determines the type of values of the timeseries.
@@ -13,6 +15,17 @@ export enum ETimeseriesValueType {
     BOOLEAN = 'boolean',
 }
 
+/**
+ * Defines a timerange
+ *
+ * @property startAt - The first timestamp to be included in the range
+ * @property endAt - The last timestamp to be included in the range
+ */
+export interface IDatetimeRange {
+    startAt: Dayjs,
+    endAt: Dayjs,
+}
+
 /**
  * Defines a timeseries with all information required to render it.
  *

services/frontend/src/components/driver/driver-timeseries.vue

@@ -32,6 +32,7 @@
     :temperature="signalTimeseries.find((ts) => ts.displayName === 'temperature')!"
     :humidity="signalTimeseries.find((ts) => ts.displayName === 'humidity')!"
     :x-tick-unit="xTickUnit"
+    :date-range="dataRange"
   />
   <div
     v-for="ts in signalTimeseries"
@@ -43,6 +44,7 @@
       :timeseries="ts"
       :color="nextColor()"
       :x-tick-unit="xTickUnit"
+      :date-range="dataRange"
     />
   </div>
 </template>
@@ -69,7 +71,7 @@ import {
   TGetTimeseriesResponse,
 } from '@/api/timeseries.ts';
 import {
-  getLastTimestamp,
+  getLastTimestamp, IDatetimeRange,
   ITimeseries,
 } from '@/components/charts/timeseries.ts';
 import {
@@ -94,6 +96,14 @@ const props = withDefaults(defineProps<{
 });
 
 const rawData = ref<TGetTimeseriesResponse | undefined>();
+const dataRange = computed<IDatetimeRange>(() => {
+  const now = dayjs();
+
+  return {
+    startAt: now.subtract(props.duration),
+    endAt: now,
+  };
+});
 
 type LocalTs = (ITimeseries & {isVisibleOnDashboard: boolean})[];
 
@@ -129,12 +139,10 @@ const xTickUnit = computed<TimeUnit>(() => {
 });
 
 function updateData() {
-  const now = dayjs();
-
   const params: TGetTimeseriesQueryParams = {
     timeseriesId: props.signalList.map((signal) => signal.timeseriesId),
-    endAtUtc: now.toISOString(),
-    startAtUtc: now.subtract(props.duration).toISOString(),
+    startAtUtc: dataRange.value.startAt.toISOString(),
+    endAtUtc: dataRange.value.endAt.toISOString(),
   };
   getTimeseries(params).then((response) => {
     rawData.value = response.data;