FDITeam / visualisation-maritime2

Compare View

switch
from
...
to
 
Commits (5)

Diff

Showing 3 changed files Inline Diff

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