Revize 11efc186

Re #8792 - Sensor page - tweak

+ form and to input fields

• show aggregation input for analytics endpoint

src/app/auth/interceptors/auth.interceptor.ts

@@ -28 +28 @@
       return of(null);
     }
 
-    if (request.url.includes('DataService') || request.url.includes('GroupService')){
+    if (request.url.includes('DataService') || request.url.includes('GroupService') || request.url.includes('SensorService')){
       request = request.clone({
         setParams: {
           user: localStorage.getItem(GlobalVariable.USER_NAME)

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

@@ -5 +5 @@
 Unit ID {{unitId}}
 <br>
 
-<div class="row">
-  <div class="col">
-    <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="rangeDates" selectionMode="range" [showTime]="true" [numberOfMonths]="3" (onSelect)="showGraph()"></p-calendar>
+<div class="col">
+  <div class="input-group form-group">
+    <div class="input-group-prepend">
+      <span class="input-group-text">From</span>
+    </div>
+    <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today"></p-calendar>
   </div>
-  <div class="col">
-    <p-listbox [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code" (onClick)="showGraph()"></p-listbox>
+</div>
+<div class="col">
+  <div class="input-group form-group">
+    <div class="input-group-prepend">
+      <span class="input-group-text">To</span>
+    </div>
+    <p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="showGraph()" [maxDate]="today"></p-calendar>
+  </div>
+</div>
+<div *ngIf="showAggregation" class="col">
+  <div class="input-group form-group">
+    <div class="input-group-prepend">
+      <span class="input-group-text">Aggregation</span>
+    </div>
+    <p-listbox [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code" (onClick)="showGraph()" ></p-listbox>
   </div>
 </div>
 
 <div id="view"></div>
-
-<div *ngFor="let observation of observations">
-  {{ observation | json}}
-  <br>
-</div>

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

@@ -1 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {Observation} from '../../shared/api/endpoints/models/observation';
 import * as moment from 'moment-timezone';
 import {AnalyticsService} from '../../shared/api/endpoints/services/analytics.service';
 import {AggreationModel} from '../../shared/models/aggreation.model';
-import {GraphLoader} from "../../shared/graph-loading/graphloader";
+import {GraphLoader} from '../../shared/graph-loading/graphloader';
+import {ObservationService} from '../../shared/api/endpoints/services/observation.service';
 
-declare var require: any
+declare var require: any;
 
 @Component({
   selector: 'app-sensor',
@@ -20 +21 @@
   observations: Observation[];
   data = [];
   time = [];
-  rangeDates: Date[];
+  from: Date;
+  to: Date;
+  today: Date;
+  showAggregation = false;
   aggregationFunction: AggreationModel[];
-  selectedAggregationFunction: string;
+  selectedAggregationFunction = 'HOUR';
 
   constructor(
     private activatedRoute: ActivatedRoute,
-    private analyticsService: AnalyticsService
+    private analyticsService: AnalyticsService,
+    private observationService: ObservationService
   ) {
     this.sensorId = parseInt(this.activatedRoute.snapshot.paramMap.get('sensorId'), 10);
     this.unitId = parseInt(this.activatedRoute.snapshot.paramMap.get('unitId'), 10);
@@ -36 +41 @@
       {name: 'Month', code: 'MONTH'},
       {name: 'Year', code: 'YEAR'}
     ];
+    this.today = moment().toDate();
   }
 
   ngOnInit(): void {
     this.showGraph();
   }
 
+  showGraph() {
+    let agg = 'HOUR';
+    const range: Date[] = [moment().subtract(7, 'days').toDate(), moment().toDate()];
 
-  /*getGraph(sensorId, data, interval) {
-    let spec = this.getGraphType(sensorId);
-    const vega = require('vega');
-    const vegaTooltip = require('vega-tooltip');
-    const config = require('/src/vega/config.json');
-
-    spec.data[0].values = data;
-    spec.signals[0].value = interval;
-
-
-    const handler = new vegaTooltip.Handler();
-
-    const loc = vega.locale({
-      decimal: ',',
-      thousands: '\u00a0',
-      grouping: [3],
-      currency: ['', '\u00a0Kč']
-    },{
-      dateTime: '%A,%e.%B %Y, %X',
-      date: '%-d.%-m.%Y',
-      time: '%H:%M:%S',
-      periods: ['AM', 'PM'],
-      days: ['neděle', 'pondělí', 'úterý', 'středa', 'čvrtek', 'pátek', 'sobota'],
-      shortDays: ['ne.', 'po.', 'út.', 'st.', 'čt.', 'pá.', 'so.'],
-      months: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen', 'září', 'říjen', 'listopad', 'prosinec'],
-      shortMonths: ['led', 'úno', 'břez', 'dub', 'kvě', 'čer', 'červ', 'srp', 'zář', 'říj', 'list', 'pros']
-    });
-
-    let view = new vega.View(vega.parse(spec, config))
-      .tooltip(handler.call)
-      .initialize('#view')
-      .hover()
-      .locale(loc)
-      .runAsync();
-
-
-
-  }
-
-  getGraphType(sensorId) {
-    const lodash = require('lodash/object');
-
-    if(sensorId >= 480000000 && sensorId < 490000000) {
-
-      let base = require('/src/vega/base/default.json');
-      let chart = require('/src/vega/body/barchart.json');
-      let tooltip = require('/src/vega/tooltip/samm-tooltip.json')
-      return lodash.merge(base, chart, tooltip);
-
-    } else if((sensorId >= 470020000 && sensorId <  470030000) || (sensorId >=470060000 && sensorId < 470090000) ||
-      (sensorId >= 470130000 && sensorId < 470140000) || (sensorId >=470180000 && sensorId < 470190000)) {
-
-      let base = require('/src/vega/base/default.json');
-      let chart = require('/src/vega/body/windchart.json');
-      let tooltip = require('/src/vega/tooltip/samm-tooltip.json')
-      return lodash.merge(base, chart, tooltip);
-
-    } else {
-
-      let base = require('/src/vega/base/default.json');
-      let chart = require('/src/vega/body/linechart.json');
-      let tooltip = require('/src/vega/tooltip/samm-tooltip.json')
-      return lodash.merge(base, chart, tooltip);
+    if (this.from && this.to) {
+      range[0] = this.from;
+      range[1] = this.to;
 
+      if (moment(this.to).diff(moment(this.from), 'days') > 7) {
+        this.showAggregation = true;
+      }
     }
 
-
-  }*/
-
-  showGraph() {
-    let agg = 'HOUR';
-    let range: Date[] = [moment().subtract(9, 'months').toDate(), moment().toDate()];
-   // const vega = require('vega');
-   // const spec = require('/src/vega/data.json');
 /*    this.observationService.getObservation({
       unit_id: this.unitId,
       sensor_id: this.sensorId,
-      from: '2020-01-01 00:00:00+02',
-      to: '2021-01-01 00:00:00+02'
+      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)
     }).subscribe(
       observations => {
-        spec.data[0].values = observations;
-
-        const view = new vega.View(vega.parse(spec), {
-          renderer: 'canvas',
-          container: '#view',
-          hover: 'true'}).runAsync();
-
-      }*/
+        if (observations) {
+          // this.getGraph(this.sensorId, observations, 1800);
+        }
+      });*/
 
     if (this.selectedAggregationFunction) {
       agg = this.selectedAggregationFunction;
     }
 
-    if (this.rangeDates) {
-      range = this.rangeDates;
-    }
-
-    this.analyticsService.getAnalytics({unit_id: this.unitId, sensor_id: this.sensorId,
+    this.analyticsService.getAnalytics({
+      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: agg}).subscribe(
+      to: moment(range[1]).format('yyyy-MM-DD HH:mm:ssZ').slice(0, -3), interval: agg
+    }).subscribe(
       observations => {
-        if (observations){
-          GraphLoader.getGraph(this.sensorId, observations[this.sensorId].data, observations[this.sensorId].interval, "view");
+        if (observations) {
+          GraphLoader.getGraph(this.sensorId, observations[this.sensorId].data, observations[this.sensorId].interval, '#view');
         } else {
-          // TODO observace null
+          GraphLoader.getGraph(null, null, null, null);
         }
-
-
       }
-    )
-
+    );
 
   }
 }

src/app/shared/api/endpoints/api.module.ts

@@ -6 +6 @@
 
 import { LoginService } from './services/login.service';
 import { AdministrationService } from './services/administration.service';
+import { ObservationService } from './services/observation.service';
 import { GroupService } from './services/group.service';
 import { DataService } from './services/data.service';
 import { AnalyticsService } from './services/analytics.service';
@@ -22 +23 @@
   providers: [
     LoginService,
     AdministrationService,
+    ObservationService,
     GroupService,
     DataService,
     AnalyticsService,

src/app/shared/api/endpoints/models.ts

@@ -19 +19 @@
 export { Data } from './models/data';
 export { Observation } from './models/observation';
 export { Statistics } from './models/statistics';
+export { OldObservation } from './models/old-observation';

src/app/shared/api/endpoints/models/old-observation.ts

@@ +1 @@
+/* tslint:disable */
+/* eslint-disable */
+export interface OldObservation {
+  gid?: number;
+  time?: string;
+  value?: number;
+}

src/app/shared/api/endpoints/services.ts

@@ -1 +1 @@
 export { LoginService } from './services/login.service';
 export { AdministrationService } from './services/administration.service';
+export { ObservationService } from './services/observation.service';
 export { GroupService } from './services/group.service';
 export { DataService } from './services/data.service';
 export { AnalyticsService } from './services/analytics.service';

src/app/shared/api/endpoints/services/observation.service.ts

@@ +1 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpResponse } from '@angular/common/http';
+import { BaseService } from '../base-service';
+import { ApiConfiguration } from '../api-configuration';
+import { StrictHttpResponse } from '../strict-http-response';
+import { RequestBuilder } from '../request-builder';
+import { Observable } from 'rxjs';
+import { map, filter } from 'rxjs/operators';
+
+import { OldObservation } from '../models/old-observation';
+
+
+/**
+ * Observations endpoints
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class ObservationService extends BaseService {
+  constructor(
+    config: ApiConfiguration,
+    http: HttpClient
+  ) {
+    super(config, http);
+  }
+
+  /**
+   * Path part for operation getObservation
+   */
+  static readonly GetObservationPath = '/senslog1/SensorService?Operation=GetObservations';
+
+  /**
+   * Get observation.
+   *
+   *
+   *
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `getObservation()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  getObservation$Response(params: {
+    unit_id: number;
+    sensor_id: number;
+    from?: string;
+    to?: string;
+  }): Observable<StrictHttpResponse<Array<OldObservation>>> {
+
+    const rb = new RequestBuilder(this.rootUrl, ObservationService.GetObservationPath, 'get');
+    if (params) {
+      rb.query('unit_id', params.unit_id, {});
+      rb.query('sensor_id', params.sensor_id, {});
+      rb.query('from', params.from, {});
+      rb.query('to', params.to, {});
+    }
+
+    return this.http.request(rb.build({
+      responseType: 'json',
+      accept: 'application/json'
+    })).pipe(
+      filter((r: any) => r instanceof HttpResponse),
+      map((r: HttpResponse<any>) => {
+        return r as StrictHttpResponse<Array<OldObservation>>;
+      })
+    );
+  }
+
+  /**
+   * Get observation.
+   *
+   *
+   *
+   * This method provides access to only to the response body.
+   * To access the full response (for headers, for example), `getObservation$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  getObservation(params: {
+    unit_id: number;
+    sensor_id: number;
+    from?: string;
+    to?: string;
+  }): Observable<Array<OldObservation>> {
+
+    return this.getObservation$Response(params).pipe(
+      map((r: StrictHttpResponse<Array<OldObservation>>) => r.body as Array<OldObservation>)
+    );
+  }
+
+}

src/app/shared/api/openapi.yaml

@@ -82 +82 @@
             schema:
               $ref: '#/components/schemas/UserInfo'
 
+  /senslog1/SensorService?Operation=GetObservations:
+    get:
+      tags:
+        - observation
+      summary: Get observation
+      operationId: getObservation
+      parameters:
+        - in: query
+          name: unit_id
+          required: true
+          schema:
+            type: integer
+        - in: query
+          name: sensor_id
+          required: true
+          schema:
+            type: integer
+        - in: query
+          name: from
+          schema:
+            type: string
+        - in: query
+          name: to
+          schema:
+            type: string
+      responses:
+        200:
+          description: Get observation for unitId and sensorId
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/OldObservation'
+
   /senslog1/GroupService:
     get:
       tags:
@@ -557 +592 @@
         sum:
           type: number
 
-
+    OldObservation:
+      type: object
+      properties:
+        gid:
+          type: integer
+        time:
+          type: string
+          format: date-time
+        value:
+          type: number
 
 
 

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

@@ -8 +8 @@
 
     if (sensorId >= 480000000 && sensorId < 490000000) {
 
-      let rvalue: any = {};
-      let base = require('/src/vega/base/default.json');
-      let chart = require('/src/vega/body/barchart.json');
-      let tooltip = require('/src/vega/tooltip/samm-tooltip.json')
+      const rvalue: any = {};
+      const base = require('/src/vega/base/default.json');
+      const chart = require('/src/vega/body/barchart.json');
+      const tooltip = require('/src/vega/tooltip/samm-tooltip.json')
       lodash.merge(rvalue, base, chart, tooltip);
       return rvalue;
 
     } else if ((sensorId >= 470020000 && sensorId < 470030000) || (sensorId >= 470060000 && sensorId < 470090000) ||
       (sensorId >= 470130000 && sensorId < 470140000) || (sensorId >= 470180000 && sensorId < 470190000)) {
 
-      let rvalue: any = {};
-      let base = require('/src/vega/base/default.json');
-      let chart = require('/src/vega/body/windchart.json');
-      let tooltip = require('/src/vega/tooltip/samm-tooltip.json')
+      const rvalue: any = {};
+      const base = require('/src/vega/base/default.json');
+      const chart = require('/src/vega/body/windchart.json');
+      const tooltip = require('/src/vega/tooltip/samm-tooltip.json')
       lodash.merge(rvalue, base, chart, tooltip);
       return rvalue;
 
     } else {
 
-      let rvalue: any = {};
-      let base = require('/src/vega/base/default.json');
-      let chart = require('/src/vega/body/linechart.json');
-      let tooltip = require('/src/vega/tooltip/samm-tooltip.json')
+      const rvalue: any = {};
+      const base = require('/src/vega/base/default.json');
+      const chart = require('/src/vega/body/linechart.json');
+      const tooltip = require('/src/vega/tooltip/samm-tooltip.json')
       lodash.merge(rvalue, base, chart, tooltip);
       return rvalue;
 
@@ -38 +38 @@
   }
 
   static getGraph(sensorId, data, interval, element) {
-    let spec = this.getGraphType(sensorId);
+    const spec = this.getGraphType(sensorId);
     const vega = require('vega');
     const vegaTooltip = require('vega-tooltip');
     const config = require('/src/vega/config.json');
@@ -47 +47 @@
     spec.signals[0].value = interval;
 
 
-    let handler = new vegaTooltip.Handler();
+    const handler = new vegaTooltip.Handler();
 
     const loc = vega.locale({
-      "decimal": ",",
-      "thousands": "\u00a0",
-      "grouping": [3],
-      "currency": ["", "\u00a0Kč"]
+      decimal: ',',
+      thousands: '\u00a0',
+      grouping: [3],
+      currency: ['', '\u00a0Kč']
     },{
-      "dateTime": "%A,%e.%B %Y, %X",
-      "date": "%-d.%-m.%Y",
-      "time": "%H:%M:%S",
-      "periods": ["AM", "PM"],
-      "days": ["neděle", "pondělí", "úterý", "středa", "čvrtek", "pátek", "sobota"],
-      "shortDays": ["ne.", "po.", "út.", "st.", "čt.", "pá.", "so."],
-      "months": ["leden", "únor", "březen", "duben", "květen", "červen", "červenec", "srpen", "září", "říjen", "listopad", "prosinec"],
-      "shortMonths": ["led", "úno", "břez", "dub", "kvě", "čer", "červ", "srp", "zář", "říj", "list", "pros"]
+      dateTime: '%A,%e.%B %Y, %X',
+      date: '%-d.%-m.%Y',
+      time: '%H:%M:%S',
+      periods: ['AM', 'PM'],
+      days: ['neděle', 'pondělí', 'úterý', 'středa', 'čvrtek', 'pátek', 'sobota'],
+      shortDays: ['ne.', 'po.', 'út.', 'st.', 'čt.', 'pá.', 'so.'],
+      months: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen', 'září', 'říjen', 'listopad', 'prosinec'],
+      shortMonths: ['led', 'úno', 'břez', 'dub', 'kvě', 'čer', 'červ', 'srp', 'zář', 'říj', 'list', 'pros']
     });
 
-    let view = new vega.View(vega.parse(spec, config))
+    const view = new vega.View(vega.parse(spec, config))
       .tooltip(handler.call)
       .initialize(element)
       .hover()

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

@@ -14 +14 @@
   </div>
 </div>
 
-
-<div id="vega_container"></div>
+<div *ngFor="let group of sensorGroups">
+  <div id="vega_container_{{group}}"></div>
+</div>
 
   {{ data | json}}

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

@@ -5 +5 @@
 import {Sensors} from '../../shared/api/endpoints/models/sensors';
 import {AggreationModel} from '../../shared/models/aggreation.model';
 import * as moment from 'moment-timezone';
-import {GraphLoader} from "../../shared/graph-loading/graphloader";
+import {GraphLoader} from '../../shared/graph-loading/graphloader';
 
 declare var require: any
 
@@ -20 +20 @@
   unitId: number;
   viewCount = 0;
   data;
+  sensorGroups = [];
   rangeDates: Date[];
   aggregationFunction: AggreationModel[];
   selectedAggregationFunction: string;
@@ -63 +64 @@
       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: agg}).pipe(
       tap(data => {
-        //this.data = Object.entries(data);
-        //console.log(this.data);
+        // this.data = Object.entries(data);
+        // console.log(this.data);
 
-        //for (const [key, value] of Object.entries(data)) {
+        // for (const [key, value] of Object.entries(data)) {
         //  console.log(key, Object.entries(value));
-        //}
+        // }
 
         var objectKeys = Object.keys(data);
         for(const key of objectKeys ) {
           let element = this.createView();
           GraphLoader.getGraph(key, data[key]["data"], data[key]["interval"], element);
-
         }
       })
     ).subscribe();
   }
 
- /* getGraph(sensorId, data, interval) {
-    let spec = this.getGraphType(sensorId);
-    let elementName = this.createView();
-    const vega = require('vega');
-    const config = require('/src/vega/config.json');
-    const vegaTooltip = require('vega-tooltip');
-
-    spec.data[0].values = data;
-    spec.signals[0].value = interval;
-
-
-    let handler = new vegaTooltip.Handler();
-
-
-    const loc = vega.locale({
-      "decimal": ",",
-      "thousands": "\u00a0",
-      "grouping": [3],
-      "currency": ["", "\u00a0Kč"]
-    },{
-      "dateTime": "%A,%e.%B %Y, %X",
-      "date": "%-d.%-m.%Y",
-      "time": "%H:%M:%S",
-      "periods": ["AM", "PM"],
-      "days": ["neděle", "pondělí", "úterý", "středa", "čvrtek", "pátek", "sobota"],
-      "shortDays": ["ne.", "po.", "út.", "st.", "čt.", "pá.", "so."],
-      "months": ["leden", "únor", "březen", "duben", "květen", "červen", "červenec", "srpen", "září", "říjen", "listopad", "prosinec"],
-      "shortMonths": ["led", "úno", "břez", "dub", "kvě", "čer", "červ", "srp", "zář", "říj", "list", "pros"]
-    });
-
-    let view = new vega.View(vega.parse(spec, config))
-      .tooltip(handler.call)
-      .initialize(elementName)
-      .hover()
-      .locale(loc)
-      .runAsync();
-
-
-
-  }
-
-  getGraphType(sensorId) {
-    const lodash = require('lodash/object');
-
-    if(sensorId >= 480000000 && sensorId < 490000000) {
-
-      let rvalue: any = {};
-      let base = require('/src/vega/base/default.json');
-      let chart = require('/src/vega/body/barchart.json');
-      let tooltip = require('/src/vega/tooltip/samm-tooltip.json')
-      lodash.merge(rvalue, base, chart, tooltip);
-      return rvalue;
-
-    } else if((sensorId >= 470020000 && sensorId <  470030000) || (sensorId >=470060000 && sensorId < 470090000) ||
-      (sensorId >= 470130000 && sensorId < 470140000) || (sensorId >=470180000 && sensorId < 470190000)) {
-
-      let rvalue: any = {};
-      let base = require('/src/vega/base/default.json');
-      let chart = require('/src/vega/body/windchart.json');
-      let tooltip = require('/src/vega/tooltip/samm-tooltip.json')
-      lodash.merge(rvalue, base, chart, tooltip);
-      return rvalue;
-
-    } else {
-
-      let rvalue: any = {};
-      let base = require('/src/vega/base/default.json');
-      let chart = require('/src/vega/body/linechart.json');
-      let tooltip = require('/src/vega/tooltip/samm-tooltip.json')
-      lodash.merge(rvalue, base, chart, tooltip);
-      return rvalue;
-
-    }
-
-
-  }*/
-
   createView() {
     let div = document.createElement("div");
     let name = "view" + this.viewCount;
@@ -167 +90 @@
     container.appendChild(div);
 
     return '#' + name;
-
   }
 }

src/vega/base/default.json

@@ -22 +22 @@
         },
         {
           "type": "formula",
-          "expr": "toDate(datum[\"timestamp\"])",
+          "expr": "utcParse(datum[\"timestamp\"], '%Y-%m-%d %H:%M:%S.%f%Z')",
           "as": "dateTime"
         }
       ]