Unit graphs responsivity

src/app/shared/graph-loading/graphloader.ts

@@ -26,7 +26,7 @@ export class GraphLoader {
    * @param element name of html element for graph display
    * @param isAnalytics true/false analytics/observations
    */
-  static async getGraph(sensors, data, legendInfo, element, isAnalytics) {
+  static getGraph(sensors, data, legendInfo, element, isAnalytics) {
     return this.getGraphWithInterval(sensors, data, 1800000, legendInfo, element, isAnalytics);
   }
 
@@ -41,7 +41,7 @@ export class GraphLoader {
    * @param element name of html element for graph display
    * @param isAnalytics true/false analytics/observations
    */
-  static async getGraphWithInterval(sensors, data, interval, legendInfo, element, isAnalytics) {
+  static getGraphWithInterval(sensors, data, interval, legendInfo, element, isAnalytics) {
     // gets uses sensors array to get graph type
     // then gets configuration and specification from corresponding class
     let graph = this.getGraphType(sensors,data, interval, legendInfo, isAnalytics);
@@ -87,7 +87,7 @@ export class GraphLoader {
    * @param config vega configuration
    * @param element name of html element for graph display
    */
-  static async showGraph(spec, config, element) {
+  static showGraph(spec, config, element) {
     const vega = require('vega');
     const vegaTooltip = require('vega-tooltip');
     const handler = new vegaTooltip.Handler();

src/app/unit/components/unit.component.ts

@@ -1,17 +1,16 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation, Renderer2, ViewChildren, QueryList, ElementRef } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { map, tap } from 'rxjs/operators';
+import {Component, ElementRef, HostListener, OnDestroy, OnInit, QueryList, Renderer2, ViewChildren} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {map, tap} from 'rxjs/operators';
 import * as moment from 'moment-timezone';
-import { GraphLoader } from '../../shared/graph-loading/graphloader';
-import { SensorsService } from '../../shared/api/endpoints/services/sensors.service';
-import { HttpResponse } from '@angular/common/http';
-import { ToastService } from '../../shared/services/toast.service';
-import { Sensor } from '../../shared/api/endpoints/models/sensor';
-import { ObservationService } from '../../shared/api/endpoints/services/observation.service';
-import { SensorType } from '../../shared/api/endpoints/models/sensor-type';
-import { Subscription } from 'rxjs';
-import {ConsoleLogger} from '@angular/compiler-cli';
-
+import {GraphLoader} from '../../shared/graph-loading/graphloader';
+import {SensorsService} from '../../shared/api/endpoints/services/sensors.service';
+import {HttpResponse} from '@angular/common/http';
+import {ToastService} from '../../shared/services/toast.service';
+import {Sensor} from '../../shared/api/endpoints/models/sensor';
+import {ObservationService} from '../../shared/api/endpoints/services/observation.service';
+import {SensorType} from '../../shared/api/endpoints/models/sensor-type';
+import {Subscription} from 'rxjs';
+import type {View} from 'vega';
 
 @Component({
   selector: 'app-unit',
@@ -41,6 +40,7 @@ export class UnitComponent implements OnInit, OnDestroy {
   // One flag per group
   showVega: Record<string, boolean> = {};
   showVegaCounter: Record<string, number> = {};
+  graphViews: Record<string, View> = {};
 
   // Grab *all* containers that match the template ref vegaContainer
   @ViewChildren('vegaContainer') vegaContainers!: QueryList<ElementRef>;
@@ -77,6 +77,34 @@ export class UnitComponent implements OnInit, OnDestroy {
   }
 
   /**
+   * Fires on every resize event
+   */
+  @HostListener('window:resize', ['$event'])
+  public onWindowResize(event: UIEvent): void {
+    this.onResize();
+  }
+
+  private onResize(): void {
+    const itemCount = Object.keys(this.graphViews).length;
+    console.log('Number of entries:', itemCount);
+
+    Object.entries(this.graphViews).forEach(([key, view]) => {
+      console.log('Key:', key, 'View:', view);
+      // Process each pair here
+
+      const sensorGroupElement = '#vega_container_' + key;
+      const box = document.getElementById('vega_container_' + key);
+      const boxWidth = box.getBoundingClientRect().width;
+      const boxHeight = box.getBoundingClientRect().height;
+
+      if (view) {
+        const newWidth = box.getBoundingClientRect().width - 50;
+        view.width(newWidth).height(300).runAsync();
+      }
+    });
+  }
+
+  /**
    * Unsubscribe after leaving
    */
   ngOnDestroy(): void {
@@ -131,11 +159,12 @@ export class UnitComponent implements OnInit, OnDestroy {
    * @param sensorId checked sensorId
    * @param event event for getting if checked or unchecked
    */
-  addSensorToGraph(sensorId: string, event) {
+  async addSensorToGraph(sensorId: string, event) {
     const groupId = sensorId.toString().slice(0, 5);
     const sensorGroupElement = '#vega_container_' + groupId;
 
     // if the checkmark is checked then the graph will be displayed
+    this.graphViews[groupId] = null;
     this.showVega[groupId] = false;
     if (event.checked.includes(sensorId.toString()))
       this.showVega[groupId] = true;
@@ -148,19 +177,19 @@ export class UnitComponent implements OnInit, OnDestroy {
 
     if (!this.selectedSensors.find(sensId => sensId.toString().slice(0, 5) === groupId)) { // if group of sensors is empty show empty graph
       // GraphLoader.getAnalyticsGraph(null, null, null, sensorGroupElement);
-      GraphLoader.getGraph(null, null, null, sensorGroupElement, null);
+      this.graphViews[groupId] = await GraphLoader.getGraph(null, null, null, sensorGroupElement, null);
     } else {
       // use observations data
       if (event.checked) { // if checked > add to graph
         if (this.observationsData.some(sens => sens.sensorId.toString() === sensorId)) { // if already data for selected sensor in memory
-          GraphLoader.getGraph(this.filteredSelectedSensors(groupId), this.filteredObservationData(groupId),
-            this.filteredSensorsInfos(groupId), sensorGroupElement, false);
+          this.graphViews[groupId] = await GraphLoader.getGraph(this.filteredSelectedSensors(groupId),
+              this.filteredObservationData(groupId), this.filteredSensorsInfos(groupId), sensorGroupElement, false);
         } else { // get data from server for added sensor and show graph for selected sensors
           this.showGraph(false, sensorId);
         }
       } else { // remove sensor from graph
-        GraphLoader.getGraph(this.filteredSelectedSensors(groupId), this.filteredObservationData(groupId),
-          this.filteredSensorsInfos(groupId), sensorGroupElement, false);
+        this.graphViews[groupId] = await GraphLoader.getGraph(this.filteredSelectedSensors(groupId), this.filteredObservationData(groupId),
+            this.filteredSensorsInfos(groupId), sensorGroupElement, false);
       }
     }
 
@@ -169,6 +198,7 @@ export class UnitComponent implements OnInit, OnDestroy {
       const container = document.getElementById(`vega_container_${groupId}`);
       if (container) {
         container.innerHTML = '';
+        this.graphViews[groupId] = null;
       }
       console.log(`Cleared children of #vega_container_${groupId}`);
       }
@@ -240,7 +270,7 @@ export class UnitComponent implements OnInit, OnDestroy {
         }
       })
     ).subscribe(
-      observations => {
+        async observations => {
         if (observations) {
           const groupId = sensorId.toString().slice(0, 5);
           this.observationsData.push({
@@ -248,8 +278,8 @@ export class UnitComponent implements OnInit, OnDestroy {
               this.sensors.find(sens => sens.sensorId.toString() === sensorId.toString()), data: observations
           });
           const view = '#vega_container_' + sensorId.toString().slice(0, 5);
-          GraphLoader.getGraph(this.filteredSelectedSensors(groupId), this.filteredObservationData(groupId),
-            this.filteredSensorsInfos(groupId), view, false);
+          this.graphViews[groupId] = await GraphLoader.getGraph(this.filteredSelectedSensors(groupId),
+              this.filteredObservationData(groupId), this.filteredSensorsInfos(groupId), view, false);
         }
       }, err => this.toastService.showError(err.error.message));
   }