query-window.component.ts 1.86 KB
Newer Older
1
import { Component, OnInit } from '@angular/core';
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
2
import {StateService} from '../state.service';
3
4
5
6
7
8
9
10
11
12

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

  public plot;

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
13
  constructor(private state: StateService) { }
14
15

  ngOnInit(): void {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
16
17
    this.state.onNewQuery.subscribe(() => {
      if (this.state.queryWindow) {
18
19
20
21
22
23
        this.initializePlot();
      }
    });
  }

  initializePlot(): void {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
24
    const data = [{
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
25
26
        x: [...Array(this.state.queryWindow[0].length).keys()],
        y: this.state.queryWindow[0],
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
27
28
        type: 'line'
      }];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
29
30
31
32
33
34
35
36
37
38
39
40
41
    // if (this.service.distances.length !== 0) {
    //   const max = this.service.queryWindow.map((num, idx) => {
    //     return num + this.service.distances[idx];
    //   });
    //   const min = this.service.queryWindow.map((num, idx) => {
    //     return num - this.service.distances[idx];
    //   });
    //   data.push({
    //     x: [...Array(this.service.queryWindow.length).keys()],
    //     y: this.service.distances,
    //     type: 'bar'
    //   });
    // }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
42
    this.plot =
43
      {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
44
        data,
45
46
47
48
        layout: {
          hovermode: 'closest',
          autosize: true,
          margin: {
49
            l: 50,
50
51
            r: 30,
            t: 30,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
52
            b: 5,
53
54
            pad: 4
          },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
55
          height: 150,
56
          width: 350,
57
58
59
          titlefont: {
            size: 9
          },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
60
          xaxis: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
61
62
            showgrid: false,
            zeroline: false,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
63
            showticklabels: false,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
64
65
66
67
          },
          yaxis: {
            zeroline: false,
            showticklabels: false,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
68
          }
69
70
71
72
        }
      };
  }

73
  get isQuerySet(): boolean {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
74
    return !!this.state.queryWindow;
75
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
76
77

  public newQuery() {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
78
    this.state.querySelectionMode = true;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
79
  }
80
}