Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
created start and end date for visualization
  • Loading branch information
@rrc12004
rrc12004 committed Apr 2, 2019
1 parent 807d711 commit b6b5dda
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 69 deletions.
2 changes: 2 additions & 0 deletions src/app/app.module.ts
View file
Expand Up @@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { MaterialModule } from './material.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderComponent } from './header/header.component';
Expand Down Expand Up @@ -31,6 +32,7 @@ import { HttpErrorInterceptor } from './http-error.interceptor';
],
imports: [
BrowserModule,
MaterialModule,
BrowserAnimationsModule,
HttpClientModule,
RouterModule.forRoot([
Expand Down
28 changes: 28 additions & 0 deletions src/app/material.module.ts
View file
@@ -0,0 +1,28 @@
// material.module.ts

import { NgModule } from '@angular/core';
import { MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
imports: [
MatDatepickerModule,
MatFormFieldModule,
MatNativeDateModule,
MatInputModule,
BrowserAnimationsModule
],
exports: [
MatDatepickerModule,
MatFormFieldModule,
MatNativeDateModule,
MatInputModule,
BrowserAnimationsModule
],
providers: [ MatDatepickerModule ],
})

export class MaterialModule {}
9 changes: 7 additions & 2 deletions src/app/services/visualize.service.ts
View file
Expand Up @@ -39,17 +39,22 @@ export class VisualizeService {
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
distribution: 'linear'
}]
}
}
});
return chart;
}

getDataForVis(token, time, func, gens, data): Observable<Object> {
getDataForVis(token, timeStart, timeEnd, func, gens, data): Observable<Object> {
const body = {
'time': {
'start': time,
'start': timeStart,
'end': timeEnd,
'aggregator': func
},
'filters': [
Expand Down
14 changes: 2 additions & 12 deletions src/app/visualize-all/visualize-all.component.css
View file
Expand Up @@ -4,23 +4,13 @@ select#gen_select {
}

select#func_select {
width: 180px;
width: 200px;
margin: 20px;
}

select#data_select {
width: 180px;
margin: 20px;
}

select#time_type_select {
width: 180px;
margin: 20px;
}
select#time_span_select {
width: 200px;
padding: 20px

margin: 20px;
}

p#visMessage {
Expand Down
27 changes: 12 additions & 15 deletions src/app/visualize-all/visualize-all.component.html
View file
Expand Up @@ -22,27 +22,24 @@
<option value="count">Count</option>
<option value="dev">Deviation</option>
</select>
<!-- <br><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="month">Months</option>
<option value="day">Days</option>
<option value="hour">Hours</option>
<option value="minute">Minutes</option>
</select>
<br>
<br><br>
<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>
<select id="gen_select" name="generatorSelect" multiple>
<option *ngFor="let generator of generators$" value="{{generator.gen_id}},{{generator.gen_name}}">{{generator.gen_name}}</option>
<option *ngFor="let generator of generators$" value="{{generator.gen_id}},{{generator.gen_name}}">
{{generator.gen_name}}</option>
</select>
<div id="time-span-select">
<input #time_span type="number" id="exampleInputTimeSpan" placeholder="Select Time Span">
</div>
<br>
<a class="btn btn-primary" style="color:white" (click)="resetAndRemakeChart()">Visualize</a>
<br>
Expand Down
106 changes: 66 additions & 40 deletions src/app/visualize-all/visualize-all.component.ts
View file
Expand Up @@ -9,6 +9,7 @@ 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',
Expand All @@ -23,7 +24,10 @@ export class VisualizeAllComponent implements OnInit {
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) { }
Expand Down Expand Up @@ -82,23 +86,50 @@ export class VisualizeAllComponent implements OnInit {
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;
});
let timeTypeVal = '';
if (timeTypeVals[0] === 'year') {
timeTypeVal = 'y-ago';
} else if (timeTypeVals[0] === 'month') {
timeTypeVal = 'n-ago';
} else if (timeTypeVals[0] === 'day') {
timeTypeVal = 'd-ago';
} else if (timeTypeVals[0] === 'hour') {
timeTypeVal = 'h-ago';
} else if (timeTypeVals[0] === 'minute') {
timeTypeVal = 'm-ago';
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 {
timeTypeVal = 'invalid';
timeStart = 'invalid';
this.signal = true;
}

Expand All @@ -108,15 +139,14 @@ export class VisualizeAllComponent implements OnInit {
const data = [];
try {
// create chart based on user input
this.graphData.getDataForVis(jsonToken, this.timeSpan.nativeElement.value
+ timeTypeVal, funcVal, genVal, dataVal).subscribe((graphData) => {
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++) {
const time = moment(this.chart$['outputs'][0]['dps'][n][0]).format('MM-DD-YY hh:mm:ss');
labels.push(time);
labels.push(this.chart$['outputs'][0]['dps'][n][0]);
if (n === 0) {
sig = this.chart$['outputs'][0]['dps'][n][0];
count = 1;
Expand Down Expand Up @@ -165,28 +195,24 @@ export class VisualizeAllComponent implements OnInit {
try {

// create example chart
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']);
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++) {
const time = moment(this.chart$['outputs'][0]['dps'][n][0]).format('MM-DD-YY hh:mm:ss');
labels.push(time);
count = n;
genData.push(this.chart$['outputs'][0]['dps'][n][c + 1]);
}
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');
});
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;
Expand Down

0 comments on commit b6b5dda

Please sign in to comment.