progress-view.component.ts 7.2 KB
Newer Older
1
import {Component, OnInit, ViewChild} from '@angular/core';
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
2
import {StateService} from '../state.service';
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
3
import * as d3 from 'd3';
4
5
6
7
8
9
10

@Component({
  selector: 'app-progress-view',
  templateUrl: './progress-view.component.html',
  styleUrls: ['./progress-view.component.css']
})
export class ProgressViewComponent implements OnInit {
11
  @ViewChild('chart') chart;
12
  public plot;
13
14
  public data;
  public layout;
15
  public hist;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
16
  public amountOfCandidates;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
17
  public hover = 0;
18

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
19
  private _sliderValue = 0;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
20

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
21
  constructor(private state: StateService) { }
22
23

  ngOnInit(): void {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
24
    this.state.onNewTableInfo.subscribe(() => { this.showgraph(); });
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
54
55
56
57
58
59
60
61
62
63
64
65
66
    this.state.onNewTableInfo.subscribe(() => { this.showHistogram(); });
  }

  showHistogram() {
    const table = this.state._averageTable;
    this.hist = {
      data: [{
        x: Object.keys(table),
        y: Object.values(table).map((values: number[]) => values.length), // / (this.service.rawValues.length - this.service.windowSize)),
        type: 'bar',
        opacity: 0.5,
        marker: {
          color: Object.keys(table).map((key) => {
            return this.getColor(Number(key) / Number(Object.keys(table)[Object.keys(table).length - 1]));
          })
        }
      }],
      layout: {
        hovermode: 'closest',
        autosize: true,
        margin: {
          l: 10,
          r: 10,
          t: 10,
          b: 10,
          pad: 4
        },
        xaxis: {
          showticklabels: false
        },
        yaxis: {
          showticklabels: false
        },
        height: 200,
        width: 400,
      }
    };
  }

  onHover(data) {
    console.log(data);
    this.setSliderValue({value: data.points[0].x});
67
68
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
69
  hoverPlot(averages) {
70
    const subplots = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
71
    this.data = averages.map((prototype) => {
72
73
74
75
76
77
78
      const channelData = [];
      prototype.max.forEach((channel, index) => {
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
79
80
81
82
83
84
85
          type: 'scatter',
          fill: null,
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
86
87
88
89
90
91
92
93
        });
      });
      prototype.min.forEach((channel, index) => {
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
94
95
96
97
98
99
100
          type: 'scatter',
          fill: 'tonexty',
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
        });
      });
      prototype.average.forEach((channel, index) => {
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
          type: 'line',
          line: {
            color: 'red',
            width: 3
          }
        });
      });
      return channelData;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
117
    });
118
119
120
    for (let index = 0; index < this.state.queryWindow.length; index++) {
      subplots.push([`xy${index + 2}`]);
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
121
    this.layout = {
122
123
124
125
126
      grid: {
        rows: this.state.queryWindow.length,
        columns: 1,
        subplots: subplots,
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
      showlegend: false,
      hovermode: 'closest',
      autosize: true,
      margin: {
        l: 50,
        r: 30,
        t: 30,
        pad: 4
      },
      xaxis: {
        showgrid: false,
        zeroline: false,
        showticklabels: false,
      },
      yaxis: {
        zeroline: false,
        showticklabels: false,
      },
145
146
      height: 400,
      width: 400,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
147
    };
148
149
150
151
152
153
    this.state.queryWindow.forEach((channel: number[], index: number) => {
      this.layout[`yaxis${index + 2}`] = {
        zeroline: false,
        showticklabels: false,
      };
    });
154
155
  }

156
157
  public setSliderValue(v) {
    this._sliderValue = v.value;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
158
    d3.selectAll('circle').transition().style('stroke', undefined);
159
    d3.select('#node-' + v.value).transition().style('stroke', 'black').style('stroke-width', 20);
160
  }
161

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
162
163
  public get sliderValue(): number {
    return this._sliderValue;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
164
165
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
166
  public get maxLength(): number {
167
    return Object.keys(this.table).length - 1;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
168
169
}

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
170
  public get table() {
171
    return this.state._averageTable;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
172
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
173

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
174
175
176
  async showgraph() {
    const nodes = [];
    const links = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
177
178
179
180
    const keys = Object.keys(this.table);
    this.hoverPlot(this.state.tableInfo.prototypes);
    const distances = this.state.tableInfo.distances;

181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
    // for (const key in this.table) {
    //   const size = this.table[key].length;
    //   nodes.push({id: key, group: Number(key), size: size});
    // }
    // for (const key in this.table) {
    //   for (const key2 in this.table) {
    //     if (key === key2) {
    //       continue;
    //     }
    //     links.push({source: key, target: key2, value: 0.001 * (100 - 5 * distances[keys.indexOf(key)][keys.indexOf(key2)])});
    //   }
    // }
    // const graph = {nodes, links};
    //
    // const svg = d3.select('#visual');
    // const width = +svg.attr('width');
    // const height = +svg.attr('height');
    //
    // svg.selectAll('*').remove();
    //
    // const simulation = d3.forceSimulation()
    //   .force('link', d3.forceLink().id((d: any) => d.id))
    //   .force('charge', d3.forceManyBody().strength(100)) // Gravity force
    //   .force('collide', d3.forceCollide().radius(25).iterations(3)) // Repulsion force
    //   .force('center', d3.forceCenter(width / 2, height / 2)); // Position force
    //
    // const link = svg.append('g')
    //   .selectAll('line')
    //   .data(graph.links)
    //   .enter().append('line')
    //   .attr('stroke', 'grey')
    //   .attr('stroke-width', (d: any) => d.value);
    //
    // const node = svg.append('g')
    //   .selectAll('circle')
    //   .data(graph.nodes)
    //   .enter().append('circle')
    //   .attr('r', (d: any) => 5 * Math.log(d.size) / Math.log(10))
    //   .attr('fill', (d: any) => this.getColor(d.group / graph.nodes.length))
    //   .attr('id', (d: any) => 'node-' + d.group)
    //   .on('mouseover', (d: any) => {this.sliderValue = d.group; })
    //   .call(d3.drag()
    //     .on('start', dragstarted)
    //     .on('drag', dragged)
    //     .on('end', dragended));
    //
    // simulation
    //   .nodes(graph.nodes as any)
    //   .on('tick', ticked);
    //
    // simulation.force<any>('link')
    //   .links(graph.links);
    //
    // function ticked() {
    //   link
    //     .attr('x1', (d: any) => d.source.x)
    //     .attr('y1', (d: any) => d.source.y)
    //     .attr('x2', (d: any) => d.target.x)
    //     .attr('y2', (d: any) => d.target.y);
    //
    //   node
    //     .attr('cx', (d: any) => d.x)
    //     .attr('cy', (d: any) => d.y);
    // }
    //
    // function dragstarted(d) {
    //   if (!d3.event.active) {
    //     simulation.alphaTarget(0.1).restart();
    //   }
    //   d.fx = d.x;
    //   d.fy = d.y;
    // }
    //
    // function dragged(d) {
    //   d.fx = d3.event.x;
    //   d.fy = d3.event.y;
    // }
    //
    // function dragended(d) {
    //   if (!d3.event.active) {
    //     simulation.alphaTarget(0);
    //   }
    //   d.fx = null;
    //   d.fy = null;
    // }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
266
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
267
268
269
270
  getColor(value) {
    const hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
  }
271
}