Revize 086f94e9

Re #8851 - Unit page - implementace

• live data in multiselect graph

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

@@ -37 +37 @@
       <ng-container *ngFor="let sensor of sensors">
         <ng-container *ngIf="sensor.sensorId.toString().slice(0, 5) === group">
           <div class="p-field-checkbox">
-            <p-checkbox name="group1" value="{{sensor.sensorId}}" [value]="sensor.sensorId" inputId="{{sensor.sensorId}}" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId)"></p-checkbox>
-            <label>{{sensor.sensorName}}</label>
+            <p-checkbox name="group1" value="{{sensor.sensorId}}" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId, $event)"></p-checkbox>
+            <label>{{sensor.sensorId}}</label>
           </div>
         </ng-container>
       </ng-container>

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

@@ -66 +66 @@
                 GraphLoader.getGraph(null, null, null, '#vega_container_' + sensor.sensorId.toString().slice(0, 5));
               }, 0);
             }
-            if (!this.selectedSensors.some(sens => sens.toString().slice(0, 5) === sensorType)) {
-              this.selectedSensors.push(sensor.sensorId);
-            }
-          })
-          this.showGraph();
+          });
         }
       })
     ).toPromise().then();
@@ -169 +165 @@
     }
   }
 
-  addSensorToGraph(sensorId: number) {
-    if (!this.selectedSensors.some(sensId => sensId.toString().slice(0, 5) === sensorId.toString().slice(0, 5))) {
-      GraphLoader.getGraph(null, null, null, '#vega_container_' + sensorId.toString().slice(0, 5));
+  /**
+   * Check button handler.
+   * @param sensorId checked sensorId
+   * @param event event for getting if checked or unchecked
+   */
+  addSensorToGraph(sensorId: number, event) {
+    const groupId = sensorId.toString().slice(0, 5);
+    const sensorGroupElement = '#vega_container_' + groupId;
+    if (!this.selectedSensors.find(sensId => sensId.toString().slice(0, 5) === groupId)) { // if group of sensors is empty show empty graph
+      GraphLoader.getGraph(null, null, null, sensorGroupElement);
     } else {
-      if (this.useAnalyticsData) {
-        if (this.analyticsData.some(sens => sens.sensorId === sensorId)) {
+      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.getGraph(sensorId, this.analyticsData.find(sens => sens.sensorId === sensorId).data,
+              this.analyticsData.find(sens => sens.sensorId === sensorId).interval, sensorGroupElement);
+          } 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(sensorId, this.analyticsData.find(sens => sens.sensorId === sensorId).data,
-            this.analyticsData.find(sens => sens.sensorId === sensorId).interval, '#vega_container_' + sensorId.toString().slice(0, 5));
-        } else {
-          this.showGraph(false, sensorId);
+            this.analyticsData.find(sens => sens.sensorId === sensorId).interval, sensorGroupElement);
         }
-      } else {
-        if (this.observationsData.some(sens => sens.sensorId === sensorId)) {
-          //GraphLoader.getObservationGraph(sensorId,
-           // this.observationsData.find(sens => sens.sensorId === sensorId).data, '#vega_container_' + sensorId.toString().slice(0, 5));
-          GraphLoader.getMultilineGraph(this.selectedSensors, this.observationsData, '#vega_container_' + sensorId.toString().slice(0, 5))
-        } else {
-          this.showGraph(false, sensorId);
+      } else { // use observations data
+        if (event.checked) { // if checked > add to graph
+          if (this.observationsData.some(sens => sens.sensorId === sensorId)) { // if already data for selected sensor in memory
+            GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(groupId), sensorGroupElement)
+          } else { // get data from server for added sensor and show graph for selected sensors
+            this.showGraph(false, sensorId);
+          }
+        } else { // remove sensor from graph
+          GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(groupId), sensorGroupElement)
         }
       }
     }
   }
 
-  private getObservations(range: Date[], changedDate: boolean, changedSensor: number) {
-    if (changedDate) {
+  /**
+   * Filter observations data only fro selected sensors.
+   * @param sensorGroupId id of changed sensor group
+   */
+  filteredObservationData(sensorGroupId: string): any {
+    return this.observationsData.filter(sen => this.selectedSensors.includes(sen.sensorId.toString()) &&
+      sen.sensorId.toString().slice(0, 5) === sensorGroupId);
+  }
+
+  /**
+   * Filter analytics data only fro selected sensors.
+   */
+  filteredAnalyticsData(): any {
+    return this.analyticsData.filter(sen => this.selectedSensors.includes(sen.sensorId.toString()));
+  }
+
+  private getObservations(range: Date[], changedDate: boolean, changedSensorId: number) {
+    if (changedDate) { // if changed date we need new data for all sensors
+      this.observationsData = []; // empty observation data
       this.selectedSensors.forEach(selectSens => {
         this.observationService.getObservation$Response({
           unit_id: this.unitId,
@@ -210 +237 @@
             } else {
               return false;
             }
-          })
-        ).subscribe(
-          observations => {
-            this.observationsData.push({sensorId: selectSens, data: observations});
-            const view = '#vega_container_' + selectSens.toString().slice(0, 5);
+          }),
+          tap((observations) => {
             if (observations) {
-              GraphLoader.getObservationGraph(selectSens, observations, view);
-            } else {
-              GraphLoader.getObservationGraph(null, null, null);
+              this.observationsData.push({sensorId: selectSens, sensor:
+                this.sensors.find(sens => sens.sensorId.toString() === selectSens.toString()), data: observations});
             }
-          }, err => this.toastService.showError(err.error.message));
+          }),
+          tap(() => {
+            if (this.observationsData && this.observationsData.length > 1) {
+              const view = '#vega_container_' + selectSens.toString().slice(0, 5);
+              setTimeout(() => {
+                console.log(this.selectedSensors);
+                GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(selectSens.toString().slice(0, 5)), view);
+              }, 0);
+            }
+          })
+        ).toPromise().then().catch(err => this.toastService.showError(err));
       });
     } else {
       this.observationService.getObservation$Response({
         unit_id: this.unitId,
-        sensor_id: changedSensor,
+        sensor_id: changedSensorId,
         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)
       }).pipe(
@@ -241 +274 @@
         })
       ).subscribe(
         observations => {
-          this.observationsData.push({sensorId: this.selectedSensors[0], data: observations});
-          const view = '#vega_container_' + changedSensor.toString().slice(0, 5);
+          this.observationsData.push({sensorId: changedSensorId, sensor:
+              this.sensors.find(sens => sens.sensorId.toString() === changedSensorId.toString()), data: observations});
+          const view = '#vega_container_' + changedSensorId.toString().slice(0, 5);
           if (observations) {
-            //GraphLoader.getObservationGraph(changedSensor, observations, view);
-            GraphLoader.getMultilineGraph(this.selectedSensors, this.observationsData, view);
+            GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(changedSensorId.toString().slice(0, 5)), view);
           } else {
-            GraphLoader.getObservationGraph(null, null, null);
+            GraphLoader.getMultilineGraph(null, null, null);
           }
         }, err => this.toastService.showError(err.error.message));
     }