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
            }
          }]
        }
      }
    });
    return chart;
  }

  getDataForVis(token, time, func, gens, data): Observable<Object> {
    const body = {
      'time': {
        'start': time,
        'aggregator': func
      },
      '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'
        }
      ]
    };
    return this.http.post('http://sd5-backend.engr.uconn.edu/data/query/exp', body, {
      headers: {
        Authorization: 'Bearer ' + token
      }
    });
  }
}