FDITeam / visualisation-maritime2

Download as
Browse Code ยป

Commit 76ed49493a89877f4a6dc84b574b5b9e9b04c23e

Authored by lsagona
1 parent 0331a197d7
Exists in master

select X and Y value

Showing 2 changed files with 226 additions and 21 deletions Inline Diff

src/app/component/graph/graph.component.html View file @ 76ed494
<div class="sticky-top" style=" margin-top: -80px;margin-left: 50px;"> 1 1 <div class="sticky-top" style=" margin-top: -80px;margin-left: 50px;">
<div class="form-row"> 2 2 <div class="form-row">
<div class="form-group col-md-2 "> 3 3 <div class="form-group col-md-2 ">
<label for="xaxis"></label> 4 4 <label for="xaxis"></label>
<select id="xaxis" class="form-control"> 5 5 <select #xaxis (change)='updateXaxis(xaxis.value)' id="xaxis" class="form-control">
<option selected>Choose x axis</option> 6 6 <option selected>Choose x axis</option>
<option>...</option> 7 7 <option [value]="'mmsi'">mmsi</option>
8 <option [value]="'time'">time</option>
9 <option [value]="'latitude'">latitude</option>
10 <option [value]="'longitude'">longitude</option>
11 <option [value]="'speedOverGround'">speedOverGround</option>
12 <option [value]="'courseOverGround'">courseOverGround</option>
13 <option [value]="'heading'">heading</option>
14 <option [value]="'vesselName'">vesselName</option>
15 <option [value]="'imo'">imo</option>
16 <option [value]="'callSign'">callSign</option>
17 <option [value]="'vesselType'">vesselType</option>
18 <option [value]="'status'">status</option>
19 <option [value]="'length'">length</option>
20 <option [value]="'width'">width</option>
21 <option [value]="'draft'">draft</option>
22 <option [value]="'cargo'">cargo</option>
</select> 8 23 </select>
</div> 9 24 </div>
<div class="form-group col-md-2 "> 10 25 <div class="form-group col-md-2 ">
<label for="yaxis"></label> 11 26 <label for="yaxis"></label>
<select id="yaxis" class="form-control"> 12 27 <select #yaxis (change)='updateYaxis(yaxis.value)' id="yaxis" class="form-control">
<option selected>Choose y axis</option> 13 28 <option selected>Choose y axis</option>
<option>...</option> 14 29 <option [value]="'mmsi'">mmsi</option>
30 <option [value]="'time'">time</option>
31 <option [value]="'latitude'">latitude</option>
32 <option [value]="'longitude'">longitude</option>
33 <option [value]="'speedOverGround'">speedOverGround</option>
34 <option [value]="'courseOverGround'">courseOverGround</option>
35 <option [value]="'heading'">heading</option>
36 <option [value]="'vesselName'">vesselName</option>
37 <option [value]="'imo'">imo</option>
38 <option [value]="'callSign'">callSign</option>
39 <option [value]="'vesselType'">vesselType</option>
40 <option [value]="'status'">status</option>
41 <option [value]="'length'">length</option>
42 <option [value]="'width'">width</option>
43 <option [value]="'draft'">draft</option>
44 <option [value]="'cargo'">cargo</option>
</select> 15 45 </select>
</div> 16 46 </div>
</div> 17 47 </div>
</div> 18 48 </div>
<plotly-plot [data]="graph.data" [layout]="graph.layout" 19 49 <plotly-plot [data]="graph.data" [layout]="graph.layout"
[style]="{position: 'relative', width: '100%' , height:'100%'}"></plotly-plot> 20 50 [style]="{position: 'relative', width: '100%' , height:'100%'}"></plotly-plot>
21 51
22 52
23 53
24 54
src/app/component/graph/graph.component.ts View file @ 76ed494
import {Component, OnInit} from '@angular/core'; 1 1 import {Component, OnInit} from '@angular/core';
import {SelectedVesselService} from '../../service/selected-vessel.service'; 2 2 import {SelectedVesselService} from '../../service/selected-vessel.service';
import {Vessel} from '../../model/vessel'; 3 3 import {Vessel} from '../../model/vessel';
4 4
@Component({ 5 5 @Component({
selector: 'app-graph', 6 6 selector: 'app-graph',
templateUrl: './graph.component.html', 7 7 templateUrl: './graph.component.html',
styleUrls: ['./graph.component.scss'] 8 8 styleUrls: ['./graph.component.scss']
}) 9 9 })
export class GraphComponent implements OnInit { 10 10 export class GraphComponent implements OnInit {
selectedVessel: Vessel; 11 11 selectedVessel: Vessel;
12 12
13 trace = {
14 x: [],
15 y: [],
16 mode: 'markers',
17 type: 'scatter',
18 name: '',
19 };
20
constructor(private selectedVesselService: SelectedVesselService) { 13 21 constructor(private selectedVesselService: SelectedVesselService) {
} 14 22 }
15 23
// var trace1 = { 16 24 // var trace1 = {
// x: [1, 2, 3, 4, 5], 17 25 // x: [1, 2, 3, 4, 5],
// y: [1, 6, 3, 6, 1], 18 26 // y: [1, 6, 3, 6, 1],
// mode: 'markers+text', 19 27 // mode: 'markers+text',
// type: 'scatter', 20 28 // type: 'scatter',
// name: 'Team A', 21 29 // name: 'Team A',
// text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'], 22 30 // text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'],
// textposition: 'top center', 23 31 // textposition: 'top center',
// textfont: { 24 32 // textfont: {
// family: 'Raleway, sans-serif' 25 33 // family: 'Raleway, sans-serif'
// }, 26 34 // },
// marker: { size: 12 } 27 35 // marker: { size: 12 }
// }; 28 36 // };
29 37
public graph = { 30 38 public graph = {
data: [], 31 39 data: [],
layout: { 32 40 layout: {
xaxis: { 33 41 xaxis: {
title: '' 34 42 title: ''
}, 35 43 },
yaxis: { 36 44 yaxis: {
title: '' 37 45 title: ''
} 38 46 }
} 39 47 }
}; 40 48 };
41 49
ngOnInit(): void { 42 50 ngOnInit(): void {
this.connectSelectVesselObservable(); 43 51 this.connectSelectVesselObservable();
} 44 52 }
45 53
connectSelectVesselObservable(): void { 46 54 connectSelectVesselObservable(): void {
this.selectedVesselService.currentVessel.subscribe(vessels => { 47 55 this.selectedVesselService.currentVessel.subscribe(vessels => {
this.selectedVessel = vessels; 48 56 this.selectedVessel = vessels;
this.updateGraph(); 49 57 this.initGraph();
}); 50 58 });
} 51 59 }
52 60
cleanGraph(): void { 53 61 cleanGraph(): void {
this.graph.data = []; 54 62 this.graph.data = [];
this.graph.layout.xaxis.title = ''; 55 63 this.graph.layout.xaxis.title = '';
this.graph.layout.yaxis.title = ''; 56 64 this.graph.layout.yaxis.title = '';
} 57 65 }
58 66
updateGraph(): void { 59 67 updateXaxis(valueType: string): void {
68 this.trace.x = [];
69 switch (valueType) {
70 case 'mmsi':
71 this.selectedVessel.messages.forEach(value => {
72 this.trace.x.push(value.mmsi);
73 });
74 break;
75 case 'time':
76 this.selectedVessel.messages.forEach(value => {
77 this.trace.x.push(Date.parse(value.time) / 1000);
78 });
79 break;
80 case 'latitude':
81 this.selectedVessel.messages.forEach(value => {
82 this.trace.x.push(value.latitude);
83 });
84 break;
85 case 'longitude':
86 this.selectedVessel.messages.forEach(value => {
87 this.trace.x.push(value.longitude);
88 });
89 break;
90 case 'speedOverGround':
91 this.selectedVessel.messages.forEach(value => {
92 this.trace.x.push(value.speedOverGround);
93 });
94 break;
95 case 'courseOverGround':
96 this.selectedVessel.messages.forEach(value => {
97 this.trace.x.push(value.courseOverGround);
98 });
99 break;
100 case 'heading':
101 this.selectedVessel.messages.forEach(value => {
102 this.trace.x.push(value.heading);
103 });
104 break;
105 case 'vesselName':
106 this.selectedVessel.messages.forEach(value => {
107 this.trace.x.push(value.vesselName);
108 });
109 break;
110 case 'imo':
111 this.selectedVessel.messages.forEach(value => {
112 this.trace.x.push(value.imo);
113 });
114 break;
115 case 'callSign':
116 this.selectedVessel.messages.forEach(value => {
117 this.trace.x.push(value.callSign);
118 });
119 break;
120 case 'vesselType':
121 this.selectedVessel.messages.forEach(value => {
122 this.trace.x.push(value.vesselType);
123 });
124 break;
125 case 'status':
126 this.selectedVessel.messages.forEach(value => {
127 this.trace.x.push(value.status);
128 });
129 break;
130 case 'length':
131 this.selectedVessel.messages.forEach(value => {
132 this.trace.x.push(value.length);
133 });
134 break;
135 case 'width':
136 this.selectedVessel.messages.forEach(value => {
137 this.trace.x.push(value.width);
138 });
139 break;
140 case 'draft':
141 this.selectedVessel.messages.forEach(value => {
142 this.trace.x.push(value.draft);
143 });
144 break;
145 case 'cargo':
146 this.selectedVessel.messages.forEach(value => {
147 this.trace.x.push(value.cargo);
148 });
149 break;
150 }
151 this.graph.data = [];
152 this.graph.layout.xaxis.title = valueType;
153 this.graph.data.push(this.trace);
154 }
60 155
const trace1 = { 61 156 updateYaxis(valueType: string): void {
x: [], 62 157 this.trace.y = [];
y: [], 63 158 switch (valueType) {
mode: 'markers', 64 159 case 'mmsi':
type: 'scatter', 65 160 this.selectedVessel.messages.forEach(value => {
name: '', 66 161 this.trace.y.push(value.mmsi);
}; 67 162 });
this.selectedVessel.messages.forEach(value => { 68 163 break;
trace1.x.push(value.longitude); 69 164 case 'time':
trace1.y.push(value.time); 70 165 this.selectedVessel.messages.forEach(value => {
}); 71 166 this.trace.y.push(Date.parse(value.time) / 1000);
this.graph.data.push(trace1); 72 167 });
this.graph.layout.xaxis.title = 'longitude'; 73 168 break;
this.graph.layout.yaxis.title = 'time'; 74 169 case 'latitude':
170 this.selectedVessel.messages.forEach(value => {
171 this.trace.y.push(value.latitude);
172 });
173 break;
174 case 'longitude':
175 this.selectedVessel.messages.forEach(value => {
176 this.trace.y.push(value.longitude);
177 });
178 break;
179 case 'speedOverGround':
180 this.selectedVessel.messages.forEach(value => {
181 this.trace.y.push(value.speedOverGround);
182 });
183 break;
184 case 'courseOverGround':
185 this.selectedVessel.messages.forEach(value => {
186 this.trace.y.push(value.courseOverGround);
187 });
188 break;
189 case 'heading':
190 this.selectedVessel.messages.forEach(value => {
191 this.trace.y.push(value.heading);
192 });
193 break;
194 case 'vesselName':
195 this.selectedVessel.messages.forEach(value => {
196 this.trace.y.push(value.vesselName);
197 });
198 break;
199 case 'imo':
200 this.selectedVessel.messages.forEach(value => {
201 this.trace.y.push(value.imo);
202 });
203 break;
204 case 'callSign':
205 this.selectedVessel.messages.forEach(value => {
206 this.trace.y.push(value.callSign);
207 });
208 break;
209 case 'vesselType':
210 this.selectedVessel.messages.forEach(value => {
211 this.trace.y.push(value.vesselType);
212 });
213 break;
214 case 'status':
215 this.selectedVessel.messages.forEach(value => {
216 this.trace.y.push(value.status);
217 });
218 break;
219 case 'length':
220 this.selectedVessel.messages.forEach(value => {
221 this.trace.y.push(value.length);
222 });
223 break;
224 case 'width':
225 this.selectedVessel.messages.forEach(value => {
226 this.trace.y.push(value.width);
227 });
228 break;
229 case 'draft':
230 this.selectedVessel.messages.forEach(value => {
231 this.trace.y.push(value.draft);
232 });
233 break;
234 case 'cargo':
235 this.selectedVessel.messages.forEach(value => {
236 this.trace.y.push(value.cargo);
237 });
238 break;
239 }
240 this.graph.data = [];
241 this.graph.layout.yaxis.title = valueType;
242 this.graph.data.push(this.trace);
243 }
244
245
246 initGraph(): void {
247 this.graph.data.push(this.trace);
248 this.graph.layout.xaxis.title = '';
249 this.graph.layout.yaxis.title = '';
} 75 250 }
76 251
} 77 252 }
78 253