Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
PowerPanel-Frontend/src/app/visualize-all/visualize-all.component.ts
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
224 lines (206 sloc)
7.5 KB
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
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-all', | |
templateUrl: './visualize-all.component.html', | |
styleUrls: ['./visualize-all.component.css'] | |
}) | |
export class VisualizeAllComponent implements OnInit { | |
public generators$: Object; | |
public chart$: Object; | |
public unit$: 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(public data: DataService, public graphData: VisualizeService, public genData: GeneratorService, | |
private router: Router, private http: HttpClient) { } | |
// create real chart based off of user data | |
resetAndRemakeChart() { | |
const genVals = Array.prototype.slice.call(document.querySelectorAll('#gen_select option:checked'), 0).map(function (v, i, a) { | |
return v.value; | |
}); | |
let genVal = ''; | |
const genName = []; | |
const genValArray = []; | |
const genCount = genVals.length; | |
this.signal = false; | |
if (genVals[0] !== '') { | |
for (let i = 0; i < genVals.length; i++) { | |
const array = genVals[i].split(','); | |
const n = 0; | |
if (genVal === '') { | |
genVal = array[n]; | |
genValArray.push(array[n]); | |
genName.push(array[n + 1]); | |
} else { | |
genVal = genVal + '|' + array[n]; | |
genValArray.push(array[n]); | |
genName.push(array[n + 1]); | |
} | |
} | |
} else if (genCount > 5) { | |
genVal = 'invalid'; | |
} else { | |
genVal = 'invalid'; | |
this.signal = true; | |
} | |
const funcVals = Array.prototype.slice.call(document.querySelectorAll('#func_select option:checked'), 0).map(function (v, i, a) { | |
return v.value; | |
}); | |
let funcVal = ''; | |
if (funcVal[0] !== '') { | |
funcVal = funcVals[0] + ''; | |
} else { | |
funcVal = 'invalid'; | |
this.signal = true; | |
} | |
const dataVals = Array.prototype.slice.call(document.querySelectorAll('#data_select option:checked'), 0).map(function (v, i, a) { | |
return v.value; | |
}); | |
let dataVal = ''; | |
if (dataVals[0] !== '') { | |
this.laymanDataVal$ = dataVal = dataVals[0] + ''; | |
dataVal = this.data.convertNames(dataVal, 'metric'); | |
} else { | |
dataVal = 'invalid'; | |
this.signal = true; | |
} | |
let startTime = this.startTime.nativeElement.value; | |
let 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 (startNumArray[1] === endNumArray[0]) { | |
if (startNumArray[2] < endNumArray[0]) { | |
timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2]; | |
timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2]; | |
} else { | |
timeStart = 'invalid'; | |
this.signal = true; | |
} | |
} else if (startNumArray[1] < endNumArray[0]) { | |
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]) { | |
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, genVal, 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, genName); | |
this.unit$ = this.data.getUnits(dataVal); | |
}); | |
} 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 | |
this.graphData.getDataForVis(jsonToken, '2019/03/13', '2019/03/14', 'sum', '1', 'oil.temp').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, ['South Garage Generator']); | |
this.unit$ = this.data.getUnits('oil.temp'); | |
}); | |
} catch (err) { | |
return err; | |
} | |
} | |
} |