progress-view.component.ts 7.47 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
    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]));
39
40
41
42
43
          }),
          line: {
            color: 'black',
            width: 0,
          }
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
        }
      }],
      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});
71
72
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
73
  hoverPlot(averages) {
74
    const subplots = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
75
    this.data = averages.map((prototype) => {
76
77
78
79
80
81
82
      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
83
84
85
86
87
88
89
          type: 'scatter',
          fill: null,
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
90
91
92
93
94
95
96
97
        });
      });
      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
98
99
100
101
102
103
104
          type: 'scatter',
          fill: 'tonexty',
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
        });
      });
      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
121
    });
122
123
124
    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
125
    this.layout = {
126
127
128
129
130
      grid: {
        rows: this.state.queryWindow.length,
        columns: 1,
        subplots: subplots,
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
      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,
      },
149
      height: 350,
150
      width: 400,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
151
    };
152
153
154
155
156
157
    this.state.queryWindow.forEach((channel: number[], index: number) => {
      this.layout[`yaxis${index + 2}`] = {
        zeroline: false,
        showticklabels: false,
      };
    });
158
159
  }

160
161
  public setSliderValue(v) {
    this._sliderValue = v.value;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
162
    d3.selectAll('circle').transition().style('stroke', undefined);
163
    d3.select('#node-' + v.value).transition().style('stroke', 'black').style('stroke-width', 20);
164
165
166
167
168
    const data = this.hist;
    data.data[0].marker.line.width = Object.keys(this.state._averageTable).map((key) => {
      return Number(key) === v.value ? 4 : 0;
    });
    this.hist = data;
169
  }
170

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
171
172
  public get sliderValue(): number {
    return this._sliderValue;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
173
174
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
175
  public get maxLength(): number {
176
    return Object.keys(this.table).length - 1;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
177
178
}

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
179
  public get table() {
180
    return this.state._averageTable;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
181
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
182

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
183
184
185
  async showgraph() {
    const nodes = [];
    const links = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
186
187
188
189
    const keys = Object.keys(this.table);
    this.hoverPlot(this.state.tableInfo.prototypes);
    const distances = this.state.tableInfo.distances;

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
266
267
268
269
270
271
272
273
274
    // 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
275
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
276
277
278
279
  getColor(value) {
    const hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
  }
280
}