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 Side-by-side Diff

src/app/component/graph/graph.component.html View file @ 76ed494
... ... @@ -2,16 +2,46 @@
2 2 <div class="form-row">
3 3 <div class="form-group col-md-2 ">
4 4 <label for="xaxis"></label>
5   - <select id="xaxis" class="form-control">
  5 + <select #xaxis (change)='updateXaxis(xaxis.value)' id="xaxis" class="form-control">
6 6 <option selected>Choose x axis</option>
7   - <option>...</option>
  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>
8 23 </select>
9 24 </div>
10 25 <div class="form-group col-md-2 ">
11 26 <label for="yaxis"></label>
12   - <select id="yaxis" class="form-control">
13   - <option selected>Choose y axis</option>
14   - <option>...</option>
  27 + <select #yaxis (change)='updateYaxis(yaxis.value)' id="yaxis" class="form-control">
  28 + <option selected>Choose y axis</option>
  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>
15 45 </select>
16 46 </div>
17 47 </div>
src/app/component/graph/graph.component.ts View file @ 76ed494
... ... @@ -10,6 +10,14 @@
10 10 export class GraphComponent implements OnInit {
11 11 selectedVessel: Vessel;
12 12  
  13 + trace = {
  14 + x: [],
  15 + y: [],
  16 + mode: 'markers',
  17 + type: 'scatter',
  18 + name: '',
  19 + };
  20 +
13 21 constructor(private selectedVesselService: SelectedVesselService) {
14 22 }
15 23  
... ... @@ -46,7 +54,7 @@
46 54 connectSelectVesselObservable(): void {
47 55 this.selectedVesselService.currentVessel.subscribe(vessels => {
48 56 this.selectedVessel = vessels;
49   - this.updateGraph();
  57 + this.initGraph();
50 58 });
51 59 }
52 60  
53 61  
... ... @@ -56,22 +64,189 @@
56 64 this.graph.layout.yaxis.title = '';
57 65 }
58 66  
59   - updateGraph(): void {
  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  
61   - const trace1 = {
62   - x: [],
63   - y: [],
64   - mode: 'markers',
65   - type: 'scatter',
66   - name: '',
67   - };
68   - this.selectedVessel.messages.forEach(value => {
69   - trace1.x.push(value.longitude);
70   - trace1.y.push(value.time);
71   - });
72   - this.graph.data.push(trace1);
73   - this.graph.layout.xaxis.title = 'longitude';
74   - this.graph.layout.yaxis.title = 'time';
  156 + updateYaxis(valueType: string): void {
  157 + this.trace.y = [];
  158 + switch (valueType) {
  159 + case 'mmsi':
  160 + this.selectedVessel.messages.forEach(value => {
  161 + this.trace.y.push(value.mmsi);
  162 + });
  163 + break;
  164 + case 'time':
  165 + this.selectedVessel.messages.forEach(value => {
  166 + this.trace.y.push(Date.parse(value.time) / 1000);
  167 + });
  168 + break;
  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 }