table-overview.component.ts 2.93 KB
Newer Older
1
2
import { Component, OnInit } from '@angular/core';
import {CacheService} from '../cache.service';
3
import {element} from 'protractor';
4
5
6
7
8
9
10
11

@Component({
  selector: 'app-table-overview',
  templateUrl: './table-overview.component.html',
  styleUrls: ['./table-overview.component.css']
})
export class TableOverviewComponent implements OnInit {
  public subplots;
12
  public averages;
13
14
15
16
  constructor(private service: CacheService) { }

  ngOnInit(): void {
    this.service.onNewTables.subscribe(() => this.createPlots());
17
    this.service.onNewSimilarity.subscribe(() => this.createPlots());
18
19
  }

20
21
  averagePlot(average): object {
    return {
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
      data: [
        {
          x: [...Array(average.average.length).keys()],
          y: average.average,
          type: 'line',
        },
        {
          x: [...Array(average.average.length).keys()],
          y: average.max,
          type: 'scatter',
          fill: null,
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
        },
        {
          x: [...Array(average.average.length).keys()],
          y: average.min,
          type: 'scatter',
          fill: 'tonexty',
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
        }
      ],
51
      layout: {
52
        showlegend: false,
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
        hovermode: 'closest',
        autosize: true,
        margin: {
          l: 10,
          r: 10,
          t: 10,
          b: 10,
          pad: 4
        },
        xaxis: {
          showticklabels: false
        },
        yaxis: {
          showticklabels: false
        },
        height: 100,
        width: screen.width * 0.1,
      }
    };
  }

  async createPlots() {
75
    this.subplots = [];
76
    this.averages = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
77
    const table = this.service.tables;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
    this.subplots.push(
      {
        data: [{
          x: Object.keys(table),
          y: Object.values(table).map((values: number[]) => values.length), // / (this.service.rawValues.length - this.service.windowSize)),
          type: 'bar'
        }],
        layout: {
          hovermode: 'closest',
          autosize: true,
          margin: {
            l: 10,
            r: 10,
            t: 10,
            b: 10,
            pad: 4
          },
          xaxis: {
            showticklabels: false
          },
          yaxis: {
            showticklabels: false
          },
          height: 100,
          width: screen.width * 0.1,
103
        }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
104
105
      }
    );
106
    if (this.service.queryWindow) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
107
      const temp = (await this.service.getAverageWindows(Object.values(table))).averages;
108
109
      this.averages = temp.map(x => this.averagePlot(x));
    }
110
  }
111

112
  async setQuery(data) {
113
    this.service.queryWindow = await this.service.getQueryWindow(data[0].y);
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
114
    await this.service.update();
115
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
116
117
118
119
120
121
122
123

  public get tables() {
    return this.service.tables;
  }

  public get visible() {
    return !this.service.querySelectionMode;
  }
124
}