graph.component.html
2.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
<div class="sticky-top" style=" margin-top: -80px;margin-left: 50px; margin-right: 400px;">
<div class="form-row">
<div class="form-group col-md-2 ">
<label for="xaxis"></label>
<select #xaxis (change)='updateXaxis(xaxis.value)' id="xaxis" class="form-control" style="width: 180px">
<option selected>Choose x axis</option>
<option [value]="'mmsi'">mmsi</option>
<option [value]="'time'">time</option>
<option [value]="'latitude'">latitude</option>
<option [value]="'longitude'">longitude</option>
<option [value]="'speedOverGround'">speedOverGround</option>
<option [value]="'courseOverGround'">courseOverGround</option>
<option [value]="'heading'">heading</option>
<option [value]="'vesselName'">vesselName</option>
<option [value]="'imo'">imo</option>
<option [value]="'callSign'">callSign</option>
<option [value]="'vesselType'">vesselType</option>
<option [value]="'status'">status</option>
<option [value]="'length'">length</option>
<option [value]="'width'">width</option>
<option [value]="'draft'">draft</option>
<option [value]="'cargo'">cargo</option>
</select>
</div>
<div class="form-group col-md-2 ">
<label for="yaxis"></label>
<select #yaxis (change)='updateYaxis(yaxis.value)' id="yaxis" class="form-control" style="width: 180px; margin-left: 60px">
<option selected>Choose y axis</option>
<option [value]="'mmsi'">mmsi</option>
<option [value]="'time'">time</option>
<option [value]="'latitude'">latitude</option>
<option [value]="'longitude'">longitude</option>
<option [value]="'speedOverGround'">speedOverGround</option>
<option [value]="'courseOverGround'">courseOverGround</option>
<option [value]="'heading'">heading</option>
<option [value]="'vesselName'">vesselName</option>
<option [value]="'imo'">imo</option>
<option [value]="'callSign'">callSign</option>
<option [value]="'vesselType'">vesselType</option>
<option [value]="'status'">status</option>
<option [value]="'length'">length</option>
<option [value]="'width'">width</option>
<option [value]="'draft'">draft</option>
<option [value]="'cargo'">cargo</option>
</select>
</div>
</div>
</div>
<plotly-plot [data]="graph.data" [layout]="graph.layout"
[style]="{position: 'relative', width: '100%' , height:'100%'}"></plotly-plot>