import { Component, OnInit } from '@angular/core';
import {CacheService} from '../cache.service';

@Component({
  selector: 'app-query-window',
  templateUrl: './query-window.component.html',
  styleUrls: ['./query-window.component.css']
})
export class QueryWindowComponent implements OnInit {

  public plot;

  constructor(private service: CacheService) { }

  ngOnInit(): void {
    this.service.onNewQuery.subscribe(() => {
      if (this.service.query) {
        this.initializePlot();
      }
    });
  }

  initializePlot(): void {
    this.plot =
      {
        index: this.service.query,
        data: [{
          x: this.service.rawIndices.slice(this.service.query, this.service.query + this.service.windowSize),
          y: this.service.rawValues.slice(this.service.query, this.service.query + this.service.windowSize),
          type: 'line'
        }],
        layout: {
          title: `Index: ${this.service.query.toString()}`,
          hovermode: 'closest',
          autosize: true,
          margin: {
            l: 50,
            r: 30,
            t: 30,
            pad: 4
          },
          height: 200,
          width: 150,
          titlefont: {
            size: 9
          },
        }
      };
  }

  get query(): number {
    return this.service.query;
  }
}