progress-view.component.html 725 Bytes
Newer Older
1
2
3
4
5
6
7
8
9
<!--<svg id="visual" width='500' height='300'></svg>-->
<div *ngIf="data" class="histogram">
  <div class="container">
    <plotly-plot (hover)="onHover($event)" [data]="hist.data" [layout]="hist.layout"></plotly-plot>
  </div>
  <div class="slider">
    <mat-slider [min]="0" [max]="maxLength" step="1" [value]="sliderValue" (input)="setSliderValue($event)" thumbLabel tickInterval="5"></mat-slider>
  </div>
</div>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
10
<div *ngIf="data" class="container">
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
11
12
  <div class="window">
    <div class="plots">
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
13
      <plotly-plot *ngFor="let data of this.data; index as i;" [class.hide]="i != sliderValue" [data]="data" [layout]="layout"></plotly-plot>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
14
15
    </div>
  </div>
16
</div>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
17
18

<script src='https://d3js.org/d3.v4.min.js'></script>