src/app/dashboard/components/map/map.component.ts

@@ -110,7 +110,9 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
       //    multiWorld: false,
           //zoom: 6
       })
-    });
+    },
+      null
+    );
   }
 
   ngOnInit(): void {
@@ -121,13 +123,14 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
       //this.dataReady = true;
 
       //if (this.mapReady)
-      this.HsMapService.loaded().then((map) => {
+      this.HsMapService.loaded(null).then((map) => {
         this.initMap();
+        let mapObj = this.HsMapService.getMap(null);
 
         let unitsExtent: Extent = this.unitsLayer.getSource().getExtent();
-        this.HsMapService.map.getView().fit(unitsExtent, { size: this.HsMapService.map.getSize() });
+        mapObj.getView().fit(unitsExtent, { size: mapObj.getSize() });
 
-        this.HsMapService.map.on("pointermove", function (evt) {
+        mapObj.on("pointermove", function (evt) {
           var hit = this.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
             return true;
           });
@@ -148,8 +151,10 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   initMap(): void {
-    this.unitsLayer = this.initUnitsLayer(this.HsMapService.map);
-    this.HsMapService.map.addLayer(this.unitsLayer);
+    let mapObj = this.HsMapService.getMap(null);
+
+    this.unitsLayer = this.initUnitsLayer(mapObj);
+    mapObj.addLayer(this.unitsLayer);
 
   //  this.HsMapService.map.on('click', function (evt) {
   //    var feature = this.HsMapService.map.forEachFeatureAtPixel(evt.pixel,

src/app/sensor/components/sensor.component.html

@@ -32,7 +32,7 @@
         <div class="input-group-prepend">
           <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
         </div>
-        <p-calendar id="from" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
+        <p-calendar id="from" [(ngModel)]="from" [showTime]="true" (onSelect)="onDateChanged()" [maxDate]="today" showButtonBar="true"></p-calendar>
       </div>
       <div class="graph-range-dates-separator">
         <div></div>
@@ -41,9 +41,9 @@
         <div class="input-group-prepend">
           <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
         </div>
-        <p-calendar id="to" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
+        <p-calendar id="to" [(ngModel)]="to" [showTime]="true" (onSelect)="onDateChanged()" [maxDate]="today" showButtonBar="true"></p-calendar>
       </div>
-      <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
+      <!-- <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox> -->
       <div>
         <button pButton label="Load data" *ngIf="dateChanged" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
       </div>

src/app/sensor/components/sensor.component.ts

@@ -1,16 +1,14 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import * as moment from 'moment-timezone';
-import {AnalyticsService} from '../../shared/api/endpoints/services/analytics.service';
-import {AggregationModel} from '../../shared/models/aggregationModel';
-import {GraphLoader} from '../../shared/graph-loading/graphloader';
-import {ObservationService} from '../../shared/api/endpoints/services/observation.service';
-import {HttpResponse} from '@angular/common/http';
-import {map} from 'rxjs/operators';
-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 { GraphLoader } from '../../shared/graph-loading/graphloader';
+import { ObservationService } from '../../shared/api/endpoints/services/observation.service';
+import { HttpResponse } from '@angular/common/http';
+import { map } from 'rxjs/operators';
+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';
 
 @Component({
   selector: 'app-sensor',
@@ -24,10 +22,7 @@ export class SensorComponent implements OnInit, OnDestroy {
   data = [];
   time = [];
   from: Date = moment().hour(0).minutes(0).subtract(7, 'days').toDate();
-  to: Date = moment().toDate();
-  showAggregation = false;
-  aggregationFunction: AggregationModel[];
-  selectedAggregationFunction = 'HOUR';
+  to: Date = moment().toDate(); 
   sensor: Sensor;
   dateChanged = false;
   unitDescription: string;
@@ -35,15 +30,14 @@ export class SensorComponent implements OnInit, OnDestroy {
   subscription: Subscription[] = [];
 
   constructor(
-    private activatedRoute: ActivatedRoute,
-    private analyticsService: AnalyticsService,
+    private activatedRoute: ActivatedRoute,    
     private observationService: ObservationService,
     private toastService: ToastService,
     private sensorsService: SensorsService,
     private route: ActivatedRoute,
   ) {
     this.getInitData();
-    this.sensorsService.getUnitSensors({unit_id: this.unitId}).subscribe(sensors => {
+    this.sensorsService.getUnitSensors({ unit_id: this.unitId }).subscribe(sensors => {
       if (sensors) {
         this.sensor = sensors.filter(value => value.sensorId === this.sensorId)[0];
         this.showGraph(); // show default graph
@@ -56,18 +50,12 @@ export class SensorComponent implements OnInit, OnDestroy {
    */
   getInitData() {
     this.route.queryParams.subscribe(params => {
-      if(params.unitName)  {
+      if (params.unitName) {
         this.unitDescription = params.unitName;
       }
     });
     this.sensorId = parseInt(this.activatedRoute.snapshot.paramMap.get('sensorId'), 10);
-    this.unitId = parseInt(this.activatedRoute.snapshot.paramMap.get('unitId'), 10);
-    this.aggregationFunction = [
-      {name: 'Hour', code: 'HOUR'},
-      {name: 'Day', code: 'DAY'},
-      {name: 'Month', code: 'MONTH'},
-      {name: 'Year', code: 'YEAR'}
-    ];
+    this.unitId = parseInt(this.activatedRoute.snapshot.paramMap.get('unitId'), 10);   
   }
 
   /**
@@ -81,57 +69,19 @@ export class SensorComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Shows aggregation select box and get data button
+   * Shows get data button
    */
-  aggregationShow() {
+  onDateChanged(): void {
     this.dateChanged = true;
-    this.showAggregation = moment(this.to).diff(moment(this.from), 'days') > 7;
   }
 
   /**
    * Gets data based on selected time range
    */
-  showGraph() {
-    if (moment(this.to).diff(moment(this.from), 'days') > 7) {
-      this.showAggregation = true;
-      const range: Date[] = [this.from, this.to];
-      this.getAnalytics(range);
-    } else {
-      this.showAggregation = false;
-      const range: Date[] = [this.from, this.to];
-      this.getObservations(range);
-    }
-  }
-
-  /**
-   * Get data from analytics endpoint
-   * @param range from and to interval
-   */
-  getAnalytics(range: Date[]) {
-    this.analyticsService.getAnalytics$Response({
-      unit_id: this.unitId, sensor_id: this.sensorId,
-      from: moment(range[0]).format('yyyy-MM-DD HH:mm:ssZ').slice(0, -3),
-      to: moment(range[1]).format('yyyy-MM-DD HH:mm:ssZ').slice(0, -3), interval: this.selectedAggregationFunction
-    }).pipe(
-      map((response: HttpResponse<any>) => {
-        if (response.status === 200) {
-          return response.body;
-        } else if (response.status === 204) {
-          this.toastService.showWarningNoData();
-          return response.body;
-        } else {
-          return false;
-        }
-      })
-    ).subscribe(
-      observations => {
-        if (observations) {
-          GraphLoader.getGraphWithInterval(this.sensorId, observations[this.sensorId].data, observations[this.sensorId].interval * 1000, this.sensor, '#view', true);
-        } else {
-          GraphLoader.getGraph(null, null, null, '#view', null);
-        }
-      }, err => this.toastService.showError(err.error.message));
-  }
+  showGraph() {   
+    const range: Date[] = [this.from, this.to];
+    this.getObservations(range);
+  }  
 
   /**
    * Get data from observation endpoint
@@ -159,7 +109,7 @@ export class SensorComponent implements OnInit, OnDestroy {
         if (observations) {
           GraphLoader.getGraph(this.sensorId, observations, this.sensor, '#view', false);
         } else {
-          GraphLoader.getGraph(null, null, null,'#view', null);
+          GraphLoader.getGraph(null, null, null, '#view', null);
         }
       }, err => this.toastService.showError(err.error.message));
   }

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

@@ -16,7 +16,7 @@
         <div class="input-group-prepend">
           <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
         </div>
-        <p-calendar id="from" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
+        <p-calendar id="from" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="onDateChanged()" [maxDate]="today" showButtonBar="true"></p-calendar>
       </div>
       <div class="graph-range-dates-separator">
         <div></div>
@@ -25,34 +25,44 @@
         <div class="input-group-prepend">
           <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
         </div>
-        <p-calendar id="to" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
-      </div>
-      <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
+        <p-calendar id="to" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="onDateChanged()" [maxDate]="today" showButtonBar="true"></p-calendar>
+      </div>      
       <div>
         <button pButton type="button" *ngIf="dateChanged" label="Load data" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
       </div>
     </div>
   </div>
-  <div class="graph-view-wrapper">
-    <ng-container *ngFor="let group of sensorGroups">
-      <div class="row">
-        <div class="graph-group-heading">
-          Group of
+
+  <p-accordion [multiple]="true" class="graph-view-wrapper">
+    <p-accordionTab *ngFor="let group of sensorGroups">
+
+      <ng-template pTemplate="header">        
+        <div class="graph-group-heading">          
           <ng-container *ngFor="let sensorType of sensorTypes">
             <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">
               {{sensorType.sensorType}}
             </ng-container>
           </ng-container>
-          sensors:
+          sensors
         </div>
-        <ng-container *ngFor="let sensor of sensors">
-          <div *ngIf="sensor.sensorId.toString().slice(0, 5) === group" class="p-field-checkbox">
-            <p-checkbox [id]="sensor.sensorId" name="{{group}}" [value]="sensor.sensorId.toString()" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId.toString(), $event)"></p-checkbox>
-            <label>{{sensor.sensorName}}</label>
-          </div>
-        </ng-container>
-      </div>
-      <div id="vega_container_{{group}}"></div>
-    </ng-container>
-  </div>
+      </ng-template>
+      
+      <ng-template pTemplate="content">
+
+        <div class="row">
+          <ng-container *ngFor="let sensor of sensors">
+            <div *ngIf="sensor.sensorId.toString().slice(0, 5) === group" class="p-field-checkbox">
+              <p-checkbox [id]="sensor.sensorId" name="{{group}}" [value]="sensor.sensorId.toString()" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId.toString(), $event)"></p-checkbox>
+              <label>{{sensor.sensorName}}</label>
+            </div>
+          </ng-container>
+        </div>
+        
+        
+        <div id="vega_container_{{group}}"></div>
+      </ng-template>
+
+    </p-accordionTab>
+  </p-accordion>
+
 </div>

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

@@ -0,0 +1,9 @@
+::ng-deep .p-accordion-header-link{
+    background-color: #F2F2F2 !important;
+    color: black !important;    
+}
+
+::ng-deep .p-accordion-content{
+    background-color: white !important;
+    color: black !important;    
+}

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

@@ -1,17 +1,15 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {AnalyticsService} from '../../shared/api/endpoints/services/analytics.service';
-import {map, tap} from 'rxjs/operators';
-import {AggregationModel} from '../../shared/models/aggregationModel';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } 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 { 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';
 
 
 @Component({
@@ -29,15 +27,10 @@ export class UnitComponent implements OnInit, OnDestroy {
   from: Date = moment().hour(0).minutes(0).subtract(7, 'days').toDate();
   to: Date = moment().toDate();
   today: Date = moment().toDate();
-  analyticsData: any[] = [];
   observationsData: any[] = [];
   sensorGroups = [];
   selectedSensors: string[] = [];
   sensors: Sensor[];
-  showAggregation = false;
-  aggregationFunction: AggregationModel[];
-  selectedAggregationFunction = 'DAY';
-  useAnalyticsData = false;
   dateChanged = false;
   sensorTypes: SensorType[];
   unitDescription: string;
@@ -45,7 +38,6 @@ export class UnitComponent implements OnInit, OnDestroy {
 
   constructor(
     private activatedRoute: ActivatedRoute,
-    private analyticsService: AnalyticsService,
     private sensorService: SensorsService,
     private toastService: ToastService,
     private observationService: ObservationService,
@@ -53,10 +45,10 @@ export class UnitComponent implements OnInit, OnDestroy {
   ) {
     this.getInitData();
     // get unit sensors and prepare them for view
-    this.sensorService.getUnitSensors({unit_id: this.unitId}).pipe(
+    this.sensorService.getUnitSensors({ unit_id: this.unitId }).pipe(
       tap(sens => {
         this.sensors = sens;
-        this.sensors.sort((a, b)  => a.sensorId - b.sensorId);
+        this.sensors.sort((a, b) => a.sensorId - b.sensorId);
       }),
       tap(() => {
         if (this.sensors && this.sensors.length > 0) {
@@ -65,7 +57,7 @@ export class UnitComponent implements OnInit, OnDestroy {
             if (!this.sensorGroups.some(group => group === sensorType)) { // create sensor groups only for unit sensors
               this.sensorGroups.push(sensorType);
               setTimeout(() => {
-                GraphLoader.getGraph(null, null, null, '#vega_container_' + sensor.sensorId.toString().slice(0, 5),null);
+                GraphLoader.getGraph(null, null, null, '#vega_container_' + sensor.sensorId.toString().slice(0, 5), null);
               }, 0);
             }
           });
@@ -86,101 +78,30 @@ export class UnitComponent implements OnInit, OnDestroy {
    */
   getInitData() {
     this.route.queryParams.subscribe(params => {
-      if(params.unitDescription)  {
+      if (params.unitDescription) {
         this.unitDescription = params.unitDescription;
       }
     });
     this.sensorService.getSensorTypes().toPromise().then(types => this.sensorTypes = types);
     this.unitId = parseInt(this.activatedRoute.snapshot.paramMap.get('unitId'), 10);
-    this.aggregationFunction = [
-      {name: 'Hour', code: 'HOUR'},
-      {name: 'Day', code: 'DAY'},
-      {name: 'Month', code: 'MONTH'},
-      {name: 'Year', code: 'YEAR'}
-    ];
   }
 
   ngOnInit(): void {
   }
 
   /**
-   * Shows aggregation select box and get data button
+   * Shows get data button
    */
-  aggregationShow() {
+  onDateChanged() {
     this.dateChanged = true;
-    this.showAggregation = moment(this.to).diff(moment(this.from), 'days') > 7;
   }
 
   /**
    * Gets data based on selected time range
    */
   showGraph(changedDate: boolean = true, changedSensor: string = null) {
-    if (moment(this.to).diff(moment(this.from), 'days') > 7) {
-      this.useAnalyticsData = true;
-      this.showAggregation = true;
-      const range: Date[] = [this.from, this.to];
-      this.getAnalytics(range, changedDate, changedSensor);
-    } else {
-      this.useAnalyticsData = false;
-      this.showAggregation = false;
-      const range: Date[] = [this.from, this.to];
-      this.getObservations(range, changedDate, changedSensor);
-    }
-  }
-
-  /**
-   * Gets data from analytics endpoint
-   * @param range from and to interval
-   * @param changedDate determines if dates changed so we need refresh all data
-   * @param changedSensorId if selecting sensor only fetch data for this server
-   */
-  getAnalytics(range: Date[], changedDate: boolean, changedSensorId: string) {
-    if (changedDate) { // if changed date we need new data for all sensors
-      this.selectedSensors.forEach(selectSens => {
-        this.analyticsData = []; //empty analytics data
-        this.analyticsEndpointRequest(selectSens, range);
-      });
-    } else  { // add data for selected sensor
-      this.analyticsEndpointRequest(changedSensorId, range);
-    }
-  }
-
-  /**
-   * Endpoint request to get analytics data for sensor
-   * @param sensorId sensor id to get data
-   * @param range from and to interval
-   */
-  analyticsEndpointRequest(sensorId: string, range: Date[]) {
-    this.analyticsService.getAnalytics$Response({unit_id: this.unitId, sensor_id: parseInt(sensorId, 10),
-      from: moment(range[0]).format('yyyy-MM-DD HH:mm:ssZ').slice(0, -3),
-      to: moment(range[1]).format('yyyy-MM-DD HH:mm:ssZ').slice(0, -3), interval: this.selectedAggregationFunction}).pipe(
-      map((response: HttpResponse<any>) => {
-        if (response.status === 200) {
-          return response.body;
-        } else if (response.status === 204) {
-          this.toastService.showWarningNoData();
-          return response.body;
-        } else {
-          return false;
-        }
-      })
-    ).subscribe(data => {
-      if (data) {
-        this.analyticsData.push({sensorId, data: data[sensorId].data, interval: data[sensorId].interval,
-          sensor: this.sensors.find(sens => sens.sensorId.toString() === sensorId.toString())});
-        if (data[sensorId].data) {
-          const groupId = sensorId.slice(0, 5);
-          const view = '#vega_container_' + groupId;
-          if (this.selectedSensors.some(sens => sens.toString() === sensorId)) {
-            // GraphLoader.getAnalyticsGraph(key, data[key].data, data[key].interval, view);
-            GraphLoader.getGraphWithInterval(this.filteredSelectedSensors(groupId), this.filteredAnalyticsData(groupId), this.filteredAnalyticsData(groupId)[0]['interval'] * 1000, this.filteredSensorsInfos(groupId)[0], view, true);
-          } else {
-            // GraphLoader.getAnalyticsGraph(null, null, null, view);
-            GraphLoader.getGraph(null, null, null, view, null);
-          }
-        }
-      }
-    }, err => this.toastService.showError(err.error.message));
+    const range: Date[] = [this.from, this.to];
+    this.getObservations(range, changedDate, changedSensor);
   }
 
   /**
@@ -195,35 +116,17 @@ export class UnitComponent implements OnInit, OnDestroy {
       // GraphLoader.getAnalyticsGraph(null, null, null, sensorGroupElement);
       GraphLoader.getGraph(null, null, null, sensorGroupElement, null);
     } else {
-      if (this.useAnalyticsData) { // use analytics data
-        if (event.checked) { // if checked > add to graph
-          if (this.analyticsData.some(sens => sens.sensorId === sensorId)) { // if already data for selected sensor in memory
-            // GraphLoader.getAnalyticsGraph(sensorId, this.analyticsData.find(sens => sens.sensorId === sensorId).data,
-            // this.analyticsData.find((sens => sens.sensorId === sensorId).interval, sensorGroupElement);
-            //GraphLoader.getGraph(this.selectedSensors, this.analyticsData, this.filteredSensorsInfos(groupId), sensorGroupElement, true);
-            GraphLoader.getGraphWithInterval(this.filteredSelectedSensors(groupId), this.filteredAnalyticsData(groupId), this.filteredAnalyticsData(groupId)[0]['interval'] * 1000, this.filteredSensorsInfos(groupId)[0], sensorGroupElement, true);
-
-          } else { // get data from server for added sensor and show graph for selected sensors
-            this.showGraph(false, sensorId);
-          }
-        } else { // remove sensor from graph
-          // GraphLoader.getAnalyticsGraph(sensorId, this.analyticsData.find(sens => sens.sensorId === sensorId).data,
-          // this.analyticsData.find(sens => sens.sensorId === sensorId).interval, sensorGroupElement);
-          GraphLoader.getGraphWithInterval(this.filteredSelectedSensors(groupId), this.filteredAnalyticsData(groupId), this.filteredAnalyticsData(groupId)[0]['interval'] * 1000, this.filteredSensorsInfos(groupId)[0], sensorGroupElement, true);
-
-        }
-      } 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);
-          } 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),
+      // 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);
+        } 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);
       }
     }
   }
@@ -238,14 +141,6 @@ export class UnitComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Filter analytics data only fro selected sensors.
-   */
-  filteredAnalyticsData(sensorGroupId: string): any {
-    return this.analyticsData.filter(sen => this.selectedSensors.includes(sen.sensorId.toString()) &&
-      sen.sensorId.toString().slice(0, 5) === sensorGroupId);
-  }
-
-  /**
    * Filter only selected sensors for group of sensors
    * @param sensorGroupId group of sensors
    */

src/app/unit/unit.module.ts

@@ -1,25 +1,27 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { UnitComponent } from './components/unit.component';
-import {NavBarModule} from '../shared/nav-bar/nav-bar.module';
-import {CalendarModule} from 'primeng/calendar';
-import {FormsModule} from '@angular/forms';
-import {ListboxModule} from 'primeng/listbox';
-import {CheckboxModule} from 'primeng/checkbox';
+import { NavBarModule } from '../shared/nav-bar/nav-bar.module';
+import { CalendarModule } from 'primeng/calendar';
+import { FormsModule } from '@angular/forms';
+import { ListboxModule } from 'primeng/listbox';
+import { CheckboxModule } from 'primeng/checkbox';
 import { RouterModule } from '@angular/router';
+import { AccordionModule } from 'primeng/accordion';
 
 
 
 @NgModule({
   declarations: [UnitComponent],
-    imports: [
-      CommonModule,
-      NavBarModule,
-      RouterModule,
-      CalendarModule,
-      FormsModule,
-      ListboxModule,
-      CheckboxModule
-    ]
+  imports: [
+    CommonModule,
+    NavBarModule,
+    RouterModule,
+    CalendarModule,
+    FormsModule,
+    ListboxModule,
+    CheckboxModule,
+    AccordionModule
+  ]
 })
 export class UnitModule { }