Graph deleting if checkmark unchecked

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

@@ -33,13 +33,13 @@ export class GraphLoader {
    * @param isAnalytics true/false analytics/observations
    */
   static getGraphWithInterval(sensors, data, interval, legendInfo, element, isAnalytics) {
-    //gets uses sensors array to get graph type
-    //then gets configuration and specification from corresponding class
+    // 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);
     let config = graph.getConfig();
     let spec = graph.getSpec();
 
-   //then displays the graph
+   // then displays the graph
     this.showGraph(spec, config, element);
   }
 

src/app/unit/components/unit.component.html

@@ -3,8 +3,8 @@
 <div class="container graph">
 
     <div class="button-row">
-        <button pButton type="button" label="Back to Dashboard" class="p-button-primary" icon="pi pi-backward" [routerLink]="['/dashboard']" style="margin-bottom: 15px;"></button>
-        <button pButton type="button" label="Back to Map" class="p-button-primary" icon="pi pi-backward" [routerLink]="['/dashboard']" [queryParams]="{ tab: 'map' }" style="margin-bottom: 15px;"></button>
+        <button pButton type="button" label="Back to Dashboard" class="p-button-primary top-button" icon="pi pi-backward" [routerLink]="['/dashboard']" style="margin-bottom: 15px;"></button>
+        <button pButton type="button" label="Back to Map" class="p-button-primary top-button" icon="pi pi-backward" [routerLink]="['/dashboard']" [queryParams]="{ tab: 'map' }" style="margin-bottom: 15px;"></button>
     </div>
 
   <div class="graph-information">
@@ -48,8 +48,8 @@
         <button pButton type="button" *ngIf="dateChanged" label="Load data" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
       </div>
     </div>
-    <div *ngIf="showIntervalError" class="alert alert-danger" role="alert">
-      Select data from interval smaller than <b>6 months</b>!
+    <div *ngIf="showIntervalError" class="alert alert-danger interval-alert" role="alert">
+      Select a valid interval - interval should be smaller than <b>6 months</b> and the "from" date has to precede the "to" date!
     </div>
   </div>
 
@@ -79,7 +79,7 @@
         </div>
         
         
-        <div id="vega_container_{{group}}"></div>
+        <div id="vega_container_{{group}}" #vegaContainer style="width:100%; height:auto;"></div>
       </ng-template>
 
     </p-accordionTab>

src/app/unit/components/unit.component.scss

@@ -8,18 +8,20 @@
     color: black !important;    
 }
 
-/* my-calendar.component.scss */
 ::ng-deep .p-button {
     background: #174B97 !important;
     border-color: #174B97 !important;
-    width: 220px;
 }
 
-/* my-calendar.component.scss */
-::ng-deep .p-icon {
+::ng-deep .top-button {
+    width: 220px !important;
+}
+
+::ng-deep .p-calendar .p-datepicker-trigger {
     color: white !important;
 }
 
+
 /* Round only the right side of the calendar button */
 ::ng-deep .p-calendar .p-datepicker-trigger {
     border-top-right-radius: 6px;
@@ -30,4 +32,8 @@
 /* Add space to the right of every button except the last one */
 ::ng-deep .button-row .p-button:not(:last-child) {
     margin-right: 1rem;   /* adjust the value to your liking */
+}
+
+::ng-deep .interval-alert {
+    margin: 5px !important;
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation, Renderer2, ViewChildren, QueryList, ElementRef } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map, tap } from 'rxjs/operators';
 import * as moment from 'moment-timezone';
@@ -10,6 +10,7 @@ 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';
 
 
 @Component({
@@ -37,12 +38,20 @@ export class UnitComponent implements OnInit, OnDestroy {
   subscription: Subscription[] = [];
   showIntervalError = false;
 
+  // One flag per group
+  showVega: Record<string, boolean> = {};
+  showVegaCounter: Record<string, number> = {};
+
+  // Grab *all* containers that match the template ref vegaContainer
+  @ViewChildren('vegaContainer') vegaContainers!: QueryList<ElementRef>;
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private sensorService: SensorsService,
     private toastService: ToastService,
     private observationService: ObservationService,
     private route: ActivatedRoute,
+    private renderer: Renderer2
   ) {
     this.getInitData();
     // get unit sensors and prepare them for view
@@ -98,6 +107,10 @@ export class UnitComponent 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;
@@ -112,6 +125,7 @@ export class UnitComponent implements OnInit, OnDestroy {
     this.getObservations(range, changedDate, changedSensor);
   }
 
+
   /**
    * Check button handler.
    * @param sensorId checked sensorId
@@ -120,6 +134,12 @@ export class UnitComponent implements OnInit, OnDestroy {
   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.showVega[groupId] = false;
+    // if (event.checked.includes(sensorId.toString()))
+      this.showVega[groupId] = true;
+
     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);
@@ -137,6 +157,15 @@ export class UnitComponent implements OnInit, OnDestroy {
           this.filteredSensorsInfos(groupId), sensorGroupElement, false);
       }
     }
+
+    // no data in graph -> the graph element will be destroyed
+    if (!this.showVega[groupId]) {
+      const container = document.getElementById(`vega_container_${groupId}`);
+      if (container) {
+        container.innerHTML = '';
+      }
+      console.log(`Cleared children of #vega_container_${groupId}`);
+      }
   }
 
   /**

src/vega/base/empty.json

@@ -1,5 +1,4 @@
 {
-
   "data":[
     {
       "name": "legend",