From f8c60278a1ce01bd42426465c717da70c4ec4c6c Mon Sep 17 00:00:00 2001 From: flxdot Date: Sat, 13 Jul 2024 09:18:53 +0200 Subject: [PATCH 1/3] feat: Enforce X limits of axis based on selected timerange --- .../src/components/charts/chart-analog.vue | 4 ++++ .../src/components/charts/chart-base-line.vue | 5 +++++ .../src/components/charts/chart-temp-humi.vue | 4 ++++ .../src/components/charts/timeseries.ts | 15 ++++++++++++++- .../components/driver/driver-timeseries.vue | 18 +++++++++++++----- 5 files changed, 40 insertions(+), 6 deletions(-) diff --git a/services/frontend/src/components/charts/chart-analog.vue b/services/frontend/src/components/charts/chart-analog.vue index d472d60..ffcbdbd 100644 --- a/services/frontend/src/components/charts/chart-analog.vue +++ b/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" /> @@ -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(), { @@ -64,6 +67,7 @@ const props = withDefaults(defineProps(), { tickStepSize: 5, showXTicks: true, xTickUnit: 'day', + dateRange: undefined, }); const lineGradient = ref({ diff --git a/services/frontend/src/components/charts/chart-base-line.vue b/services/frontend/src/components/charts/chart-base-line.vue index 322c697..96f5fe0 100644 --- a/services/frontend/src/components/charts/chart-base-line.vue +++ b/services/frontend/src/components/charts/chart-base-line.vue @@ -40,6 +40,7 @@ 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; @@ -47,6 +48,7 @@ interface IChartBaseLineProps { height?: string; showXTicks?: boolean; xTickUnit?: TimeUnit; + xLimits?: IDatetimeRange; } const props = withDefaults( @@ -55,6 +57,7 @@ const props = withDefaults( height: '10rem', showXTicks: true, xTickUnit: 'day', + xLimits: undefined, }, ); @@ -101,6 +104,8 @@ const chartOptions = computed>(() => { 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 diff --git a/services/frontend/src/components/charts/chart-temp-humi.vue b/services/frontend/src/components/charts/chart-temp-humi.vue index 021eada..26a40c6 100644 --- a/services/frontend/src/components/charts/chart-temp-humi.vue +++ b/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" /> @@ -40,6 +41,7 @@ import { DeepPartial, } from '@/utils/types.ts'; import { + IDatetimeRange, ITimeseries, toChartJsData, } from '@/components/charts/timeseries.ts'; @@ -47,8 +49,10 @@ const props = withDefaults(defineProps<{ temperature: ITimeseries, humidity: ITimeseries, xTickUnit?: TimeUnit; + dateRange?: IDatetimeRange; }>(), { xTickUnit: 'day', + dateRange: undefined, }); const tempGradient = ref({ diff --git a/services/frontend/src/components/charts/timeseries.ts b/services/frontend/src/components/charts/timeseries.ts index f5ea26b..01f95e2 100644 --- a/services/frontend/src/components/charts/timeseries.ts +++ b/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. * diff --git a/services/frontend/src/components/driver/driver-timeseries.vue b/services/frontend/src/components/driver/driver-timeseries.vue index c169631..39ddc0d 100644 --- a/services/frontend/src/components/driver/driver-timeseries.vue +++ b/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" />
@@ -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(); +const dataRange = computed(() => { + const now = dayjs(); + + return { + startAt: now.subtract(props.duration), + endAt: now, + }; +}); type LocalTs = (ITimeseries & {isVisibleOnDashboard: boolean})[]; @@ -129,12 +139,10 @@ const xTickUnit = computed(() => { }); 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; From d50fc030fc99030cdf5bf7b85ccceb1050e3b146 Mon Sep 17 00:00:00 2001 From: flxdot Date: Sat, 13 Jul 2024 09:20:59 +0200 Subject: [PATCH 2/3] add changes for digital as well --- services/frontend/src/components/charts/chart-digital.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/services/frontend/src/components/charts/chart-digital.vue b/services/frontend/src/components/charts/chart-digital.vue index 6a53f28..4f8cf73 100644 --- a/services/frontend/src/components/charts/chart-digital.vue +++ b/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" /> @@ -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(), { height: '10rem', tickStepSize: 5, showXTicks: true, + dateRange: undefined, }); const limits: [number, number] = [ From 12d09ee9bd8aa74b6403a7306aa046a3cb57158a Mon Sep 17 00:00:00 2001 From: flxdot Date: Sat, 13 Jul 2024 09:24:08 +0200 Subject: [PATCH 3/3] format --- services/frontend/src/components/charts/chart-base-line.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/services/frontend/src/components/charts/chart-base-line.vue b/services/frontend/src/components/charts/chart-base-line.vue index 96f5fe0..acfc9bf 100644 --- a/services/frontend/src/components/charts/chart-base-line.vue +++ b/services/frontend/src/components/charts/chart-base-line.vue @@ -40,7 +40,9 @@ import { xTicksGradient, } from '@/components/charts/gradients.ts'; import crosshair from '@/components/charts/crosshair.ts'; -import {IDatetimeRange} from "@/components/charts/timeseries.ts"; +import { + IDatetimeRange, +} from '@/components/charts/timeseries.ts'; interface IChartBaseLineProps { chartData: DeepPartial;