|
|
@@ -1,4 +1,4 @@
|
|
|
-import { Component, OnDestroy, OnInit } from '@angular/core';
|
|
|
+import { Component, OnDestroy, OnInit, HostListener } from '@angular/core';
|
|
|
import { ActivatedRoute } from '@angular/router';
|
|
|
import * as moment from 'moment-timezone';
|
|
|
import { GraphLoader } from '../../shared/graph-loading/graphloader';
|
|
|
@@ -9,6 +9,7 @@ import { ToastService } from '../../shared/services/toast.service';
|
|
|
import { Sensor } from '../../shared/api/endpoints/models/sensor';
|
|
|
import { SensorsService } from '../../shared/api/endpoints/services/sensors.service';
|
|
|
import { Subscription } from 'rxjs';
|
|
|
+import type { View } from 'vega';
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-sensor',
|
|
|
@@ -22,16 +23,18 @@ export class SensorComponent implements OnInit, OnDestroy {
|
|
|
data = [];
|
|
|
time = [];
|
|
|
from: Date = moment().hour(0).minutes(0).subtract(7, 'days').toDate();
|
|
|
- to: Date = moment().toDate();
|
|
|
+ to: Date = moment().toDate();
|
|
|
sensor: Sensor;
|
|
|
dateChanged = false;
|
|
|
unitDescription: string;
|
|
|
today: Date = moment().toDate();
|
|
|
subscription: Subscription[] = [];
|
|
|
- showIntervalError: boolean = false;
|
|
|
+ showIntervalError = false;
|
|
|
+ private resizeObserver!: ResizeObserver; // Will watch the container size
|
|
|
+ graphView;
|
|
|
|
|
|
constructor(
|
|
|
- private activatedRoute: ActivatedRoute,
|
|
|
+ private activatedRoute: ActivatedRoute,
|
|
|
private observationService: ObservationService,
|
|
|
private toastService: ToastService,
|
|
|
private sensorsService: SensorsService,
|
|
|
@@ -46,6 +49,18 @@ export class SensorComponent implements OnInit, OnDestroy {
|
|
|
}, err => this.toastService.showError(err.error.message));
|
|
|
}
|
|
|
|
|
|
+ ngAfterViewInit() {
|
|
|
+ window.addEventListener('resize', () => console.log('raw'))
|
|
|
+ }
|
|
|
+
|
|
|
+ /*
|
|
|
+ Fires on every resize event
|
|
|
+ */
|
|
|
+ @HostListener('window:resize', ['$event'])
|
|
|
+ public onWindowResize(event: UIEvent): void {
|
|
|
+ this.onResize();
|
|
|
+ }
|
|
|
+
|
|
|
/**
|
|
|
* Sets up default data
|
|
|
*/
|
|
|
@@ -77,26 +92,35 @@ export class SensorComponent implements OnInit, OnDestroy {
|
|
|
this.dateChanged = false;
|
|
|
this.showIntervalError = true;
|
|
|
}
|
|
|
+ else if (this.to < this.from) {
|
|
|
+ this.dateChanged = false;
|
|
|
+ this.showIntervalError = true;
|
|
|
+ }
|
|
|
else{
|
|
|
this.dateChanged = true;
|
|
|
this.showIntervalError = false;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* Gets data based on selected time range
|
|
|
*/
|
|
|
- showGraph() {
|
|
|
+ showGraph() {
|
|
|
const range: Date[] = [this.from, this.to];
|
|
|
this.getObservations(range);
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* Get data from observation endpoint
|
|
|
* @param range from and to interval
|
|
|
*/
|
|
|
- getObservations(range: Date[]) {
|
|
|
+ async getObservations(range: Date[]) {
|
|
|
+ const box = document.getElementById('view');
|
|
|
+ const boxWidth = box.getBoundingClientRect().width;
|
|
|
+ const boxHeight = box.getBoundingClientRect().height;
|
|
|
+
|
|
|
+ GraphLoader.setSize(boxWidth - 50, 300);
|
|
|
+
|
|
|
this.observationService.getObservation$Response({
|
|
|
unit_id: this.unitId,
|
|
|
sensor_id: this.sensorId,
|
|
|
@@ -114,12 +138,22 @@ export class SensorComponent implements OnInit, OnDestroy {
|
|
|
}
|
|
|
})
|
|
|
).subscribe(
|
|
|
- observations => {
|
|
|
+ async observations => {
|
|
|
if (observations) {
|
|
|
- GraphLoader.getGraph(this.sensorId, observations, this.sensor, '#view', false);
|
|
|
+ this.graphView = await GraphLoader.getGraph(this.sensorId, observations, this.sensor, '#view', false);
|
|
|
} else {
|
|
|
- GraphLoader.getGraph(null, null, null, '#view', null);
|
|
|
+ this.graphView = await GraphLoader.getGraph(null, null, null, '#view', null);
|
|
|
}
|
|
|
}, err => this.toastService.showError(err.error.message));
|
|
|
}
|
|
|
+
|
|
|
+ private onResize(): void {
|
|
|
+ // resize graph width if window changes size
|
|
|
+ const box = document.getElementById('view');
|
|
|
+
|
|
|
+ if (this.graphView) {
|
|
|
+ const newWidth = box.getBoundingClientRect().width - 50;
|
|
|
+ this.graphView.width(newWidth).height(300).runAsync();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
A-Konig