From 2ef69a5e5ee818758710fa656e1d7888b7f4acc4 Mon Sep 17 00:00:00 2001
From: Anurag Vats <anurag.vats@uibk.ac.at>
Date: Fri, 2 Dec 2022 19:09:39 +0100
Subject: [PATCH] Draw one sensor data at a time
---
src/app/dashboard/dashboard.component.html | 24 ++++-
src/app/dashboard/dashboard.component.ts | 102 ++++++++++++++++++---
src/app/shared/api.service.ts | 7 ++
src/app/station/station.model.ts | 2 +-
4 files changed, 120 insertions(+), 15 deletions(-)
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 0752a58..8649f24 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,3 +1,25 @@
<div class="container">
- <canvas id="myChart"></canvas>
+ <div class="col">
+ <form [formGroup]="formDashboard">
+ <div class="col-md-3">
+ <label for="stations">Choose Station</label>
+ <select (change)="onStationChange($event.target)" class="form-control" id="stations" formControlName="stations">
+ <option *ngFor="let station of stationsData" value="{{station.id}}">{{station.name}}</option>
+ </select>
+ </div>
+ <div class="col-md-3">
+ <label for="clients">Choose Client</label>
+ <select (change)="onClientChange($event.target)" class="form-control" id="clients" formControlName="clients">
+ <option *ngFor="let client of activeClientsData" value="{{client.id}}">{{client.name}}</option>
+ </select>
+ </div>
+ <div class="col-md-3">
+ <label for="sensors">Choose Sensor</label>
+ <select (change)="onSensorChange($event.target)" class="form-control" id="sensors" formControlName="sensors">
+ <option *ngFor="let sensor of activeSensorsData" value="{{sensor.name}}">{{sensor.name}}</option>
+ </select>
+ </div>
+ </form>
+ <canvas id="myChart"></canvas>
+ </div>
</div>
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index dd85b22..4e1b371 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -1,5 +1,8 @@
import {Component, OnInit} from '@angular/core';
-import { Chart, registerables } from 'chart.js/auto';
+import {Chart, registerables} from 'chart.js/auto';
+import {ApiService} from "../shared/api.service";
+import {FormBuilder, FormGroup} from "@angular/forms";
+
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
@@ -8,29 +11,102 @@ import { Chart, registerables } from 'chart.js/auto';
export class DashboardComponent implements OnInit {
+ formDashboard! : FormGroup;
+ stationsData: any = [];
+ sensorsData: any = [];
+ activeSensorsData: any = [];
+ clientsData: any = [];
+ activeClientsData: any = [];
+ readings: any = {
+ labels: [],
+ title: '',
+ data: []
+ };
+
+ chart: any;
+ constructor(private api: ApiService, private fb: FormBuilder) {
+ this.getAllStations();
+ this.getAllSensors();
+ this.getAllClients();
+
+ this.formDashboard = fb.group({
+ stations: [''],
+ clients: [''],
+ sensors: [''],
+ });
+ }
+
ngOnInit() {
+ this.drawChart();
+ }
- const myChart: any = new Chart('myChart', {
+ private drawChart() {
+ this.chart = new Chart('myChart', {
type: 'line',
data: {
- labels: ['2022-05-10', '2022-05-11', '2022-05-12', '2022-05-13',
- '2022-05-14', '2022-05-15', '2022-05-16', '2022-05-17',],
+ labels: this.readings.labels,
datasets: [{
- label: "Sales",
- data: ['467', '576', '572', '79', '92',
- '574', '573', '576'],
+ label: this.readings.title,
+ data: this.readings.data,
backgroundColor: 'blue'
},
- {
- label: "Profit",
- data: ['542', '542', '536', '327', '17',
- '0.00', '538', '541'],
- backgroundColor: 'limegreen'
- }]
+ // For two readings at once
+ ]
},
options: {
aspectRatio: 2.5
}
});
}
+
+ getAllStations() {
+ this.api.get('http://localhost:8080/api/v1/station/all')
+ .subscribe(res => {
+ this.stationsData = res;
+ });
+ }
+
+ getAllSensors() {
+ this.api.get('http://localhost:8080/api/v1/sensor/all')
+ .subscribe(res => {
+ this.sensorsData = res;
+ });
+ }
+
+ getAllClients() {
+ this.api.get('http://localhost:8080/api/v1/client/all')
+ .subscribe(res => {
+ this.clientsData = res;
+ });
+ }
+
+ onStationChange(target: any) {
+ const stationId = (target as HTMLInputElement).value;
+ const clientId: string[] = this.stationsData?.find((station: any) => station.id === stationId)?.clients;
+ this.activeClientsData = this.clientsData?.filter((client: any) => clientId.includes(client.id));
+ }
+
+ onClientChange(target: any) {
+ const clientId = (target as HTMLInputElement).value;
+ const sensorId: string[] = this.clientsData?.find((client: any) => client.id === clientId)?.sensors;
+ this.activeSensorsData = this.sensorsData?.filter((sensor: any) => sensorId.includes(sensor.id));
+ }
+
+ onSensorChange(target: any) {
+ const sensorId = (target as HTMLInputElement).value;
+ this.api.getReadingsBySensorId("http://localhost:8080/api/v1/server/get/sensor", sensorId)
+ .subscribe(res => {
+ this.chart.destroy();
+ this.readings = {
+ labels: res.map((reading: any) => this.getReadableDate(reading.timestamp)),
+ title: this.sensorsData?.find((sensor: any) => sensor.name === sensorId)?.name,
+ data: res.map((reading: any) => reading.readings[0].value)
+ };
+ this.drawChart();
+ });
+ }
+
+ getReadableDate(date: string) {
+ return new Date(date).toLocaleString();
+ }
}
diff --git a/src/app/shared/api.service.ts b/src/app/shared/api.service.ts
index 7b8a93e..464e764 100644
--- a/src/app/shared/api.service.ts
+++ b/src/app/shared/api.service.ts
@@ -17,6 +17,13 @@ export class ApiService {
}));
}
+ getReadingsBySensorId(url: string, id: string) {
+ return this.http.get(url + '?sensorId=' + id, {headers: this.getHttpHeader()})
+ .pipe(map((response: any) => {
+ return response;
+ }));
+ }
+
post(url: string, data: any) {
return this.http.post(url, data, {headers: this.getHttpHeader()})
.pipe(map((response: any) => {
diff --git a/src/app/station/station.model.ts b/src/app/station/station.model.ts
index f0bd780..ebeb71f 100644
--- a/src/app/station/station.model.ts
+++ b/src/app/station/station.model.ts
@@ -4,7 +4,7 @@ interface locationDataType {
altitude: number;
}
export class StationModel {
- id: string = '';
+ id!: string;
name: string = '';
diary: string = '';
host: string = '';
--
GitLab