Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
added support for multiple generators
  • Loading branch information
@rrc12004
rrc12004 committed Apr 1, 2019
1 parent 6be5d9f commit 0c2ff01
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 74 deletions.
33 changes: 20 additions & 13 deletions src/app/services/visualize.service.ts
View file
Expand Up @@ -10,22 +10,28 @@ export class VisualizeService {

constructor(private http: HttpClient) { }

createChart(labels, data, laymanDataVal) {
return new Chart('canvas', {
createChart(labels, data, genNames) {
const colors = ['blue', 'red', 'yellow', 'green', 'purple'];
const datasets = [];
for (let i = 0; i < genNames.length; i++) {
const currentGraphData = {
label: genNames[i],
fill: false,
data: data[i],
backgroundColor: [
colors[i],
'rgba(255, 159, 64, 0.2)'
],
borderColor: colors[i],
borderWidth: 1
};
datasets[i] = currentGraphData;
}
const chart = new Chart('canvas', {
type: 'line',
data: {
labels: labels,
datasets: [{
label: laymanDataVal,
fill: false,
data: data,
backgroundColor: [
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: 'blue',
borderWidth: 1
}]
datasets: datasets
},
options: {
scales: {
Expand All @@ -37,6 +43,7 @@ export class VisualizeService {
}
}
});
return chart;
}

getDataForVis(token, time, func, gens, data): Observable<Object> {
Expand Down
85 changes: 41 additions & 44 deletions src/app/visualize-all/visualize-all.component.html
View file
Expand Up @@ -2,54 +2,51 @@
<div class="row">
<div class="col-md-12 mx-auto mt-4">
<h4 class="text-center mb-3">Visualization</h4>
<p class="text-center">{{laymanDataVal$}} Graph</p>
<canvas id="canvas">{{chart}}</canvas>
<p>{{unit$}}</p>
<form id="visToolbar">


<h4 class="text-center mb3" style="color:red" *ngIf = "signal">Invalid Entry</h4>
<p class="text-center">Units: {{unit$}}</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;">
<!-- <ul class="navbar-nav mr-auto"> -->

<!-- <form action="/action_page.php"> -->
<br>
<p id="visMessage">Ctrl/Comm+Click to select multiple generators <br> Please select a maximum of 5 generators</p>
<select id="gen_select" name="generatorSelect" multiple>
<option *ngFor="let generator of generators$" value="{{generator.gen_id}}">{{generator.gen_name}}</option>
</select>
<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><br>
<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>
<select id="time_type_select" name="timeTypeSelect">
<option value="" disabled selected>Select Time Type</option>
<option value="year">Years</option>
<option value="day">Days</option>
<option value="hour">Hours</option>
<option value="minute">Minutes</option>
</select>
<br><br>
<div id="time-span-select">
<input #time_span type="number" id="exampleInputTimeSpan" placeholder="Select Time Span">
</div>
<!-- </form> -->
<a class="btn btn-primary" (click)="resetAndRemakeChart()">Visualize</a>
<br>
<!-- </ul> -->
<br>
<p id="visMessage">Ctrl/Comm+Click to select multiple generators <br> Please select a maximum of 5 generators
</p>
<select id="gen_select" name="generatorSelect" multiple>
<option *ngFor="let generator of generators$" value="{{generator.gen_id}},{{generator.gen_name}}">{{generator.gen_name}}</option>
</select>
<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><br>
<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>
<select id="time_type_select" name="timeTypeSelect">
<option value="" disabled selected>Select Time Type</option>
<option value="year">Years</option>
<option value="day">Days</option>
<option value="hour">Hours</option>
<option value="minute">Minutes</option>
</select>
<br><br>
<div id="time-span-select">
<input #time_span type="number" id="exampleInputTimeSpan" placeholder="Select Time Span">
</div>
<br>
<a class="btn btn-primary" (click)="resetAndRemakeChart()">Visualize</a>
<br>
<br>
</div>

</form>
</div>
</div>
Expand Down
64 changes: 47 additions & 17 deletions src/app/visualize-all/visualize-all.component.ts
View file
Expand Up @@ -20,6 +20,7 @@ export class VisualizeAllComponent implements OnInit {
public chart$: Object;
public unit$: any = null;
public dataNames$;
public laymanDataVal$: any = null;
public chart: any = null;
public signal = false;
@ViewChild('time_span') timeSpan: ElementRef;
Expand All @@ -33,22 +34,33 @@ export class VisualizeAllComponent implements OnInit {
return v.value;
});
let genVal = '';
const genName = [];
const genValArray = [];
const genCount = genVals.length;
console.log(genVals);
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 = genVals[i];
genVal = array[n];
genValArray.push(array[n]);
genName.push(array[n + 1]);
} else {
genVal = genVal + '|' + genVals[i];
genVal = genVal + '|' + array[n];
genValArray.push(array[n]);
genName.push(array[n + 1]);
}
}
} else if (genCount > 4 ) {
} else if (genCount > 5) {
genVal = 'invalid';
} else {
genVal = 'invalid';
this.signal = true;
}
console.log(genVal);
console.log(genName);

const funcVals = Array.prototype.slice.call(document.querySelectorAll('#func_select option:checked'), 0).map(function (v, i, a) {
return v.value;
Expand All @@ -61,20 +73,18 @@ export class VisualizeAllComponent implements OnInit {
this.signal = true;
}

let laymanDataVal;
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] !== '') {
laymanDataVal = dataVal = dataVals[0] + '';
this.laymanDataVal$ = dataVal = dataVals[0] + '';
dataVal = this.data.convertNames(dataVal, 'metric');
} else {
dataVal = 'invalid';
this.signal = true;
}


const timeTypeVals = Array.prototype.slice.call(document.querySelectorAll('#time_type_select option:checked'), 0)
.map(function (v, i, a) {
return v.value;
Expand All @@ -94,27 +104,38 @@ export class VisualizeAllComponent implements OnInit {
}

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, this.timeSpan.nativeElement.value
+ timeTypeVal, funcVal, genVal, dataVal).subscribe((graphData) => {
this.chart$ = graphData;
const meta = Object.values(this.chart$['outputs'][0]['dpsMeta']);
let sig;
let count = 0;
let realCount;
for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) {
const time = moment(this.chart$['outputs'][0]['dps'][n][0]).format('MM-DD-YY hh:mm:ss');
labels.push(time);
data.push(this.chart$['outputs'][0]['dps'][n][1]);
console.log(this.chart$['outputs'][0]['dps'][n][1]);
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, laymanDataVal);
this.chart = this.graphData.createChart(labels, data, genName);
this.unit$ = this.data.getUnits(dataVal);
});
} catch (err) {
Expand Down Expand Up @@ -148,14 +169,23 @@ export class VisualizeAllComponent implements OnInit {
this.graphData.getDataForVis(jsonToken, this.timeSpan.nativeElement.value
+ '1y-ago', 'sum', '1', 'oil.temp').subscribe((graphData) => {
this.chart$ = graphData;
let count;
const meta = Object.values(this.chart$['outputs'][0]['dpsMeta']);
for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) {
const time = moment(this.chart$['outputs'][0]['dps'][n][0]).format('MM-DD-YY hh:mm:ss');
labels.push(time);
data.push(this.chart$['outputs'][0]['dps'][n][1]);
count = n;
}

this.chart = this.graphData.createChart(labels, data, 'Lube Oil Temperature');
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);
}
// console.log(data);
this.laymanDataVal$ = 'Example Lube Oil Temperature';
this.chart = this.graphData.createChart(labels, data, ['South Garage Generator']);
this.unit$ = this.data.getUnits('oil.temp');
});

Expand Down

0 comments on commit 0c2ff01

Please sign in to comment.