diff --git a/src/app/services/visualize.service.ts b/src/app/services/visualize.service.ts index d8e2c8b..de87c77 100644 --- a/src/app/services/visualize.service.ts +++ b/src/app/services/visualize.service.ts @@ -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: { @@ -37,6 +43,7 @@ export class VisualizeService { } } }); + return chart; } getDataForVis(token, time, func, gens, data): Observable { diff --git a/src/app/visualize-all/visualize-all.component.html b/src/app/visualize-all/visualize-all.component.html index c62c05f..cfe9010 100644 --- a/src/app/visualize-all/visualize-all.component.html +++ b/src/app/visualize-all/visualize-all.component.html @@ -2,54 +2,51 @@

Visualization

+

{{laymanDataVal$}} Graph

{{chart}} -

{{unit$}}

-
- -

Invalid Entry

+

Units: {{unit$}}

+ +

Invalid Entry

- - - -
-

Ctrl/Comm+Click to select multiple generators
Please select a maximum of 5 generators

- -

- -

- -

- -

-
- -
- - Visualize -
- +
+

Ctrl/Comm+Click to select multiple generators
Please select a maximum of 5 generators +

+ +

+ +

+ +

+ +

+
+ +
+
+ Visualize +
+
-
diff --git a/src/app/visualize-all/visualize-all.component.ts b/src/app/visualize-all/visualize-all.component.ts index d8d0652..69ae235 100644 --- a/src/app/visualize-all/visualize-all.component.ts +++ b/src/app/visualize-all/visualize-all.component.ts @@ -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; @@ -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; @@ -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; @@ -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) { @@ -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'); });