Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
visualize-one all set
- Loading branch information
Showing
7 changed files
with
291 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
select#gen_select { | ||
width: 200px; | ||
margin: 20px; | ||
} | ||
|
||
select#func_select { | ||
width: 200px; | ||
margin: 20px; | ||
} | ||
|
||
select#data_select { | ||
width: 200px; | ||
margin: 20px; | ||
} | ||
|
||
p#visMessage { | ||
color: white; | ||
} | ||
|
||
p#graphInfo { | ||
color: grey; | ||
font-size: 12px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,52 @@ | ||
<p> | ||
visualize-one works! | ||
</p> | ||
<div class="container "> | ||
<div class="row"> | ||
<div class="col-md-12 mx-auto mt-4"> | ||
<h4 class="text-center mb-3">Visualization for {{genName$}}</h4> | ||
<h5 class="text-center" *ngIf="!dataSig$">Data Type: {{dataType$}}</h5> | ||
<p class="text-center" *ngIf="dataSig$">{{laymanDataVal$}} Graph</p> | ||
<canvas id="canvas">{{chart}}</canvas> | ||
|
||
<p id="graphInfo" class="text-left"> | ||
Dates: {{startTime$}} - {{endTime$}}<br> | ||
Units: {{unit$}}<br> | ||
Function: {{function$}}<br> | ||
</p> | ||
<form id="visToolbar"> | ||
<h4 class="text-center mb3" style="color:red" *ngIf="signal">Invalid Entry</h4> | ||
<div class="text-center mb3" style="background-color: black;"> | ||
<br> | ||
<!-- <br><br> --> | ||
<select id="func_select" name="functionSelect"> | ||
<option value="" disabled selected>Select Function</option> | ||
<option value="sum">Summation</option> | ||
<option value="min">Minimum</option> | ||
<option value="avg">Average</option> | ||
<option value="max">Maximum</option> | ||
<option value="count">Count</option> | ||
<option value="dev">Deviation</option> | ||
</select> | ||
<br> | ||
<div *ngIf="dataSig$"> | ||
<select id="data_select" name="dataSelect"> | ||
<option value="" disabled selected>Select Data</option> | ||
<option *ngFor="let names of dataNames$" value="{{names}}">{{names}}</option> | ||
</select> | ||
<br><br> | ||
</div> | ||
<form style="color:white" action="/action_page.php"> | ||
Start Time: | ||
<input #start_time type="date" name="exampleStartTime"> | ||
<br><br> | ||
End Time: | ||
<input #end_time type="date" name="exampleEndTime"> | ||
</form> | ||
<br><br> | ||
<a class="btn btn-primary" style="color:white" (click)="resetAndRemakeChart()">Visualize</a> | ||
<br> | ||
<br> | ||
</div> | ||
<br><br> | ||
</form> | ||
</div> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,220 @@ | ||
import { Component, OnInit } from '@angular/core'; | ||
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; | ||
import { GeneratorService } from '../services/generator.service'; | ||
import { DataService } from '../services/data.service'; | ||
import { VisualizeService } from '../services/visualize.service'; | ||
import { Router } from '@angular/router'; | ||
import { Chart } from 'chart.js'; | ||
import { Injectable } from '@angular/core'; | ||
import { HttpClient, HttpHeaders } from '@angular/common/http'; | ||
import 'rxjs/add/operator/map'; | ||
import { $ } from 'protractor'; | ||
import * as moment from 'moment'; | ||
import { MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker'; | ||
|
||
@Component({ | ||
selector: 'app-visualize-one', | ||
templateUrl: './visualize-one.component.html', | ||
styleUrls: ['./visualize-one.component.css'] | ||
}) | ||
export class VisualizeOneComponent implements OnInit { | ||
public generators$: Object; | ||
public chart$: Object; | ||
public genName$: any = null; | ||
public dataType$: any = null; | ||
public dataSig$: any = null; | ||
public unit$: any = null; | ||
public function$: any = null; | ||
public startTime$: any = null; | ||
public endTime$: any = null; | ||
public dataNames$; | ||
public laymanDataVal$: any = null; | ||
public chart: any = null; | ||
public signal = false; | ||
events: string[] = []; | ||
@ViewChild('time_span') timeSpan: ElementRef; | ||
@ViewChild('start_time') startTime: ElementRef; | ||
@ViewChild('end_time') endTime: ElementRef; | ||
|
||
constructor() { } | ||
constructor(public data: DataService, public graphData: VisualizeService, public genData: GeneratorService, | ||
private router: Router, private http: HttpClient) { } | ||
|
||
resetAndRemakeChart() { | ||
const genVal = localStorage.getItem('gen_id'); | ||
const genCount = 1; | ||
|
||
const funcVals = Array.prototype.slice.call(document.querySelectorAll('#func_select option:checked'), 0).map(function (v, i, a) { | ||
return v.value; | ||
}); | ||
let funcVal = ''; | ||
if (funcVals[0] !== '') { | ||
funcVal = funcVals[0] + ''; | ||
} else { | ||
funcVal = 'invalid'; | ||
this.signal = true; | ||
} | ||
|
||
const dataType = localStorage.getItem('data_type'); | ||
let dataVal; | ||
if (dataType === null) { | ||
const dataVals = Array.prototype.slice.call(document.querySelectorAll('#data_select option:checked'), 0).map(function (v, i, a) { | ||
return v.value; | ||
}); | ||
if (dataVals[0] !== null) { | ||
this.laymanDataVal$ = dataVal = dataVals[0] + ''; | ||
dataVal = this.data.convertNames(dataVal, 'metric'); | ||
} else { | ||
dataVal = 'invalid'; | ||
this.signal = true; | ||
} | ||
} else { | ||
dataVal = dataType; | ||
} | ||
|
||
const startTime = this.startTime.nativeElement.value; | ||
const endTime = this.endTime.nativeElement.value; | ||
|
||
let timeStart; | ||
let timeEnd; | ||
if (startTime === '') { | ||
timeStart = 'invalid'; | ||
this.signal = true; | ||
} else if (endTime === '') { | ||
timeEnd = 'invalid'; | ||
this.signal = true; | ||
} | ||
const startArray = startTime.split('-'); | ||
const endArray = endTime.split('-'); | ||
let startNumArray; | ||
let endNumArray; | ||
if (startArray.length === 3 && endArray.length === 3) { | ||
startNumArray = [parseInt(startArray[0], 10), parseInt(startArray[1], 10), parseInt(startArray[2], 10)]; | ||
endNumArray = [parseInt(endArray[0], 10), parseInt(endArray[1], 10), parseInt(endArray[2], 10)]; | ||
if (startNumArray[0] === endNumArray[0]) { // if years are equal | ||
if (startNumArray[1] === endNumArray[1]) { // if months are equal | ||
if (startNumArray[2] <= endNumArray[2]) { // if start days are less than or equal | ||
timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2] + '-00:00:00'; | ||
timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2] + '-23:59:59'; | ||
} else { | ||
timeStart = 'invalid'; | ||
this.signal = true; | ||
} | ||
} else if (startNumArray[1] < endNumArray[1]) { // if start month is less | ||
timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2]; | ||
timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2]; | ||
} else { | ||
timeStart = 'invalid'; | ||
this.signal = true; | ||
} | ||
} else if (startNumArray[0] < endNumArray[0]) { // if start year is less | ||
timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2]; | ||
timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2]; | ||
} else { | ||
timeStart = 'invalid'; | ||
this.signal = true; | ||
} | ||
} else { | ||
timeStart = 'invalid'; | ||
this.signal = true; | ||
} | ||
|
||
if (this.signal === false) { | ||
const jsonToken = localStorage.getItem('auth_token'); | ||
const labels = []; | ||
const data = []; | ||
try { | ||
// create chart based on user input | ||
this.graphData.getDataForVis(jsonToken, timeStart, timeEnd, funcVal, localStorage.getItem('gen_id'), dataVal) | ||
.subscribe((graphData) => { | ||
this.chart$ = graphData; | ||
let sig; | ||
let count = 0; | ||
let realCount; | ||
for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) { | ||
labels.push(this.chart$['outputs'][0]['dps'][n][0]); | ||
if (n === 0) { | ||
sig = this.chart$['outputs'][0]['dps'][n][0]; | ||
count = 1; | ||
} else if (sig === this.chart$['outputs'][0]['dps'][n][0]) { | ||
realCount = count; | ||
} else { | ||
count++; | ||
} | ||
} | ||
for (let c = 0; c < genCount; c++) { | ||
const genData = []; | ||
for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) { | ||
genData.push(this.chart$['outputs'][0]['dps'][n][c + 1]); | ||
} | ||
data.push(genData); | ||
} | ||
this.chart.destroy(); | ||
this.chart = this.graphData.createChart(labels, data, [localStorage.getItem('gen_name')]); | ||
this.unit$ = this.data.getUnits(dataVal); | ||
this.startTime$ = startArray[1] + '/' + startArray[2] + '/' + startArray[0]; | ||
this.endTime$ = endArray[1] + '/' + endArray[2] + '/' + endArray[0]; | ||
this.function$ = funcVal; | ||
}); | ||
} catch (err) { | ||
return err; | ||
} | ||
} else if (this.signal === true) { | ||
console.log('invalid entry'); | ||
} | ||
} | ||
ngOnInit() { | ||
this.dataNames$ = this.data.getAllNames('layman'); | ||
|
||
const jsonToken = localStorage.getItem('auth_token'); | ||
try { | ||
this.genData.getGenerators(jsonToken).subscribe((genData) => { | ||
this.generators$ = genData; | ||
return this.generators$; | ||
}); | ||
} catch (err) { | ||
return err; | ||
} | ||
|
||
const labels = []; | ||
const data = []; | ||
|
||
try { | ||
|
||
// create example chart | ||
let dataType = localStorage.getItem('data_type'); | ||
if (dataType === null) { | ||
this.dataSig$ = true; | ||
dataType = 'oil.temp'; | ||
} else { | ||
this.dataSig$ = false; | ||
this.dataType$ = this.data.convertNames(dataType, 'layman'); | ||
} | ||
this.graphData.getDataForVis(jsonToken, '2019/03/13', '2019/03/14', 'sum', localStorage.getItem('gen_id'), dataType) | ||
.subscribe((graphData) => { | ||
this.chart$ = graphData; | ||
let count; | ||
for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) { | ||
labels.push(this.chart$['outputs'][0]['dps'][n][0]); | ||
count = n; | ||
} | ||
for (let c = 0; c < 1; c++) { | ||
const genData = []; | ||
for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) { | ||
genData.push(this.chart$['outputs'][0]['dps'][n][c + 1]); | ||
} | ||
data.push(genData); | ||
} | ||
this.laymanDataVal$ = 'Example Lube Oil Temperature'; | ||
this.chart = this.graphData.createChart(labels, data, [localStorage.getItem('gen_name')]); | ||
this.unit$ = this.data.getUnits('oil.temp'); | ||
this.startTime$ = '03/13/2019'; | ||
this.endTime$ = '03/14/2019'; | ||
this.function$ = 'sum'; | ||
this.genName$ = localStorage.getItem('gen_name'); | ||
}); | ||
|
||
} catch (err) { | ||
return err; | ||
} | ||
} | ||
|
||
} | ||
} |