FDITeam / visualisation-maritime2

Download as
Browse Code ยป

Commit 34e0f9db42ceb13c83c6efab4d0a909dfa5d0515

Authored by lsagona
1 parent 76ed49493a
Exists in master

actualise map on vessel change

Showing 1 changed file with 7 additions and 19 deletions Inline Diff

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