visualize-all.component.ts

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';

@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;
  @ViewChild('time_span') timeSpan: 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;
    }

    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] === 'day') {
      timeTypeVal = 'd-ago';
    } else if (timeTypeVals[0] === 'hour') {
      timeTypeVal = 'h-ago';
    } else if (timeTypeVals[0] === 'minute') {
      timeTypeVal = 'm-ago';
    } else {
      timeTypeVal = '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, this.timeSpan.nativeElement.value
          + timeTypeVal, 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);
              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, 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);
            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);
          }
          // 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');
        });

    } catch (err) {
      return err;
    }


  }

}