progress-view.component.ts 6.18 KB
Newer Older
1
2
import { Component, OnInit } from '@angular/core';
import {CacheService} from '../cache.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
  public plot;
12
13
  public data;
  public layout;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
14
  public amountOfCandidates;
15

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
16
17
  private _sliderValue;

18
19
20
  constructor(private cache: CacheService) { }

  ngOnInit(): void {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
21
    this.showgraph();
22
    this.cache.onNewSimilarity.subscribe(() => { this.initializeInfo(); });
23
24
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
25
  averagePlot(averages) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
26
27
28
29
    console.log(averages);
    let highest = 0;
    averages.map((average, i) => {
      if (average.average.length !== 0 && i > highest) {
30
31
        highest = i;
      }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
32
33
    });
    let data = averages.map((average, i) => {
34
35
36
37
38
39
      return [
        {
          x: [...Array(average.average.length).keys()],
          y: average.average,
          type: 'line',
          visible: i === highest,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
40
41
42
43
          line: {
            color: 'red',
            width: 3
          }
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
        },
        {
          x: [...Array(average.average.length).keys()],
          y: average.max,
          type: 'scatter',
          visible: i === highest,
          fill: null,
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
          },
        {
          x: [...Array(average.average.length).keys()],
          y: average.min,
          type: 'scatter',
          visible: i === highest,
          fill: 'tonexty',
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
          },
      ];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
70
    });
71
72
    data = [].concat(...data);
    const visibility = Array(averages.length * 3).fill(false);
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
73
    const steps = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
74
    for (let i = 0; i < this.cache.nrOfTables; i++) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
75
      const v = visibility.slice();
76
77
78
      v[i * 3 + 2] = true;
      v[i * 3 + 1] = true;
      v[i * 3] = true;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
79
      steps.push({
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
80
        label: (100 * (i + 1) / this.cache.nrOfTables).toString() + '%',
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
81
82
83
84
        method: 'restyle',
        args: ['visible', v]
      });
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
85
    this._sliderValue = highest;
86
87
88
89
90
91
92
93
94
95
    this.data = data;
    this.layout = {
      showlegend: false,
      hovermode: 'closest',
      autosize: true,
      margin: {
        l: 50,
        r: 30,
        t: 30,
        pad: 4
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
96
      },
97
      xaxis: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
98
99
100
        showgrid: false,
        zeroline: false,
        showticklabels: false,
101
102
      },
      yaxis: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
103
104
        zeroline: false,
        showticklabels: false,
105
106
      },
      height: 300,
107
      width: 300,
108
      sliders: [{
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
109
        active: highest,
110
111
112
113
114
115
116
117
118
119
120
        pad: {t: 30},
        currentvalue: {
          xanchor: 'right',
          prefix: 'Similarity: ',
          font: {
            color: '#888',
            size: 10
          }
        },
        steps
      }]
121
122
123
124
    };
  }

  async initializeInfo(): Promise<void> {
125
    console.log('Updating progress view');
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
126
    console.log(this.similarity);
127
    const allWindows = [];
128
129
130
131
132
133
134
    const keys = Object.keys(this.similarity);
    for (let i = this.cache.nrOfTables; i >= 1; i--) {
      if (keys.indexOf(i.toString()) === -1) {
        allWindows.push([]);
      } else {
        allWindows.push(this.similarity[i.toString()]);
      }
135
    }
136
    const averages = await this.cache.getAverageProgressWindows(allWindows);
137
    this.plot = this.averagePlot(averages);
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
138
139
140
141
142
    let candidates = [];
    for (let i = this._sliderValue; i < this.cache.nrOfTables; i++) {
      candidates = candidates.concat(this.cache.windowSimilarity[i.toString()]);
    }
    this.amountOfCandidates = candidates.length;
143
144
145
146
147
  }

  public get similarity() {
    return this.cache.windowSimilarity;
  }
148
149

  public setSliderValue(v) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
150
    this._sliderValue = v.slider.active;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
151
152
153
154
155
    let candidates = [];
    for (let i = this._sliderValue; i < this.cache.nrOfTables; i++) {
      candidates = candidates.concat(this.cache.windowSimilarity[i.toString()]);
    }
    this.amountOfCandidates = candidates.length;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
156
157
158
159
160
  }

  public showCandidates() {
    this.cache.sliderValue = this._sliderValue;
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
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

  public showgraph() {
    console.log('building');
    const svg = d3.select('svg');
    const width = +svg.attr('width');
    const height = +svg.attr('height');

    const color = d3.scaleOrdinal(d3.schemeCategory10);

    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

    d3.json('assets/miserables.json')
      .catch((error) => {
        throw error;
      })
      .then((graph) => {
        const link = svg.append('g')
          .selectAll('line')
          .data(graph.links)
          .enter().append('line')
          .attr('stroke', 'blue')
          .attr('fill', 'purple')
          .attr('stroke-width', (d: any) => d.value * .08);

        const node = svg.append('g')
          .selectAll('circle')
          .data(graph.nodes)
          .enter().append('circle')
          .attr('r', 5)
          .attr('fill', (d: any) => color(d.group))
          .call(d3.drag()
            .on('start', dragstarted)
            .on('drag', dragged)
            .on('end', dragended));

        simulation
          .nodes(graph.nodes)
          .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;
    }
  }
242
}