table-overview.component.ts 3.01 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
22
23
  }

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

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
51
52
53
  averagePlot(average): object {
    return {
      data: [{
        x: [...Array(average.length).keys()],
        y: average,
        type: 'line',
      }],
      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,
      }
    };
  }

  async createPlots() {
54
    this.subplots = [];
55
56
    this.averages = [];
    const listOfWindows = [];
57
58
    for (const tableIndex in this.tables) {
      const table = this.tables[tableIndex];
59
60
61
62
      if (this.service.query) {
        const queryEntry = Object.keys(table.entries).filter((hash: string) => {
          return table.entries[hash].indexOf(this.service.query) > -1;
        })[0];
63
        console.log(queryEntry);
64
65
        listOfWindows.push(table.entries[queryEntry]);
      }
66
67
68
69
      this.subplots.push(
        {
          data: [{
            x: Object.keys(table.entries).map((hash: string) => {
70
              return Number('0b' + hash);
71
72
              }
            ),
73
74
75
76
77
78
79
80
81
82
            y: Object.values(table.entries).map((values: number[]) => values.length / (this.service.rawValues.length - this.service.windowSize)),
            type: 'bar',
            marker: {
              color: Object.values(table.entries).map((values: number[]) => {
                if (values.indexOf(this.service.query) > -1) {
                  return 'red';
                }
                return 'blue';
              })
            }
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
          }],
          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,
          }
        }
      );
    }
106
    if (this.service.query) {
107
108
      console.log(listOfWindows);
      const temp = await this.service.getAverageTableWindows(listOfWindows);
109
110
      this.averages = temp.map(x => this.averagePlot(x));
    }
111
  }
112
113
114
115

  public setQuery(data) {
    this.service.queryWindow = data.y;
  }
116
}