visualize.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Chart } from 'chart.js';

@Injectable({
  providedIn: 'root'
})
export class VisualizeService {

  constructor(private http: HttpClient) { }

  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: datasets
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }],
          xAxes: [{
            type: 'time',
            distribution: 'linear'
          }]
        }
      }
    });
    return chart;
  }

  getDataForVis(token, timeStart, timeEnd, func, gens, data, range): Observable<Object> {
    const body = {
      'time': {
        'start': timeStart,
        'end': timeEnd,
        'aggregator': 'last'
      },
      'filters': [
        {
          'tags': [{
            'type': 'literal_or',
            'tagk': 'generator',
            'filter': gens,
            'groupBy': true
          }],
          'id': 'gen'
        }
      ],
      'metrics': [
        {
          'id': 'a',
          'metric': data,
          'filter': 'gen',
          'fillPolicy': { 'policy': 'nan' }
        }
      ],
      'expressions': [
        {
          'id': 'e',
          'expr': 'a'
        }
      ]
    };
    if (range !== 'none' && func !== 'none') {
      body['time']['downsampler'] = {
        'interval': range,
        'aggregator': func
      };
    }
    return this.http.post('http://sd5-backend.engr.uconn.edu/data/query/exp', body, {
      headers: {
        Authorization: 'Bearer ' + token
      }
    });
  }
}