Bladeren bron

unit: hide agg & load only observ data

kunickyd 3 jaren geleden
bovenliggende
commit
5b0fde1f92
2 gewijzigde bestanden met toevoegingen van 36 en 142 verwijderingen
  1. 3 4
      src/app/unit/components/unit.component.html
  2. 33 138
      src/app/unit/components/unit.component.ts

+ 3 - 4
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,9 +25,8 @@
         <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>

+ 33 - 138
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 } 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({
@@ -28,24 +26,18 @@ export class UnitComponent implements OnInit, OnDestroy {
   time = [];
   from: Date = moment().hour(0).minutes(0).subtract(7, 'days').toDate();
   to: Date = moment().toDate();
-  today: Date = moment().toDate();
-  analyticsData: any[] = [];
+  today: Date = moment().toDate();  
   observationsData: any[] = [];
   sensorGroups = [];
   selectedSensors: string[] = [];
-  sensors: Sensor[];
-  showAggregation = false;
-  aggregationFunction: AggregationModel[];
-  selectedAggregationFunction = 'DAY';
-  useAnalyticsData = false;
+  sensors: Sensor[];  
   dateChanged = false;
   sensorTypes: SensorType[];
   unitDescription: string;
   subscription: Subscription[] = [];
 
   constructor(
-    private activatedRoute: ActivatedRoute,
-    private analyticsService: AnalyticsService,
+    private activatedRoute: ActivatedRoute,    
     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,102 +78,31 @@ 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'}
-    ];
+    this.unitId = parseInt(this.activatedRoute.snapshot.paramMap.get('unitId'), 10);  
   }
 
   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);
+  } 
 
   /**
    * Check button handler.
@@ -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
    */