FDITeam / visualisation-maritime2

Download as
Browse Code ยป

Commit 8c0f5138ea6e8711b974d01dcc313e7c73e3519b

Authored by lsagona
1 parent 9bbae24093
Exists in master

plot arbitrary data from selected vessel.

Showing 6 changed files with 84 additions and 5 deletions Side-by-side Diff

package-lock.json View file @ 8c0f513
... ... @@ -2364,6 +2364,14 @@
2364 2364 "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
2365 2365 "dev": true
2366 2366 },
  2367 + "angular-plotly.js": {
  2368 + "version": "3.0.0",
  2369 + "resolved": "https://registry.npmjs.org/angular-plotly.js/-/angular-plotly.js-3.0.0.tgz",
  2370 + "integrity": "sha512-xN82jUgJ/43+1a90k6uomr7gpbHK2SuuhhSfMKKKVAL6hDJFptjdQZzradg6qvHA3icV5uVe9FQHtaQJh3RMhQ==",
  2371 + "requires": {
  2372 + "tslib": "^2.0.0"
  2373 + }
  2374 + },
2367 2375 "angular-split": {
2368 2376 "version": "4.0.0",
2369 2377 "resolved": "https://registry.npmjs.org/angular-split/-/angular-split-4.0.0.tgz",
package.json View file @ 8c0f513
... ... @@ -21,6 +21,7 @@
21 21 "@angular/router": "~10.2.0",
22 22 "@types/jquery": "^3.5.3",
23 23 "@types/leaflet": "^1.5.19",
  24 + "angular-plotly.js": "^3.0.0",
24 25 "angular-split": "^4.0.0",
25 26 "bootstrap": "^4.5.3",
26 27 "jquery": "^3.5.1",
src/app/component/app.component.html View file @ 8c0f513
... ... @@ -7,10 +7,10 @@
7 7 </as-split-area>
8 8 <as-split-area size="80">
9 9 <as-split direction="vertical">
10   - <as-split-area size="100">
  10 + <as-split-area size="100">
11 11 <app-map></app-map>
12 12 </as-split-area>
13   - <as-split-area size="100">
  13 + <as-split-area size="100">
14 14 <app-graph></app-graph>
15 15 </as-split-area>
16 16 </as-split>
src/app/component/app.module.ts View file @ 8c0f513
... ... @@ -12,7 +12,11 @@
12 12 import {ImportVesselsDirective} from './import-vessels/import-vessels.directive';
13 13 import {ListVesselComponent} from './list-vessel/list-vessel.component';
14 14 import {AngularSplitModule} from 'angular-split';
  15 +import {PlotlyModule} from 'angular-plotly.js';
  16 +import * as PlotlyJS from 'plotly.js/dist/plotly.js';
15 17  
  18 +PlotlyModule.plotlyjs = PlotlyJS;
  19 +
16 20 @NgModule({
17 21 declarations: [
18 22 AppComponent,
... ... @@ -29,6 +33,7 @@
29 33 AppRoutingModule,
30 34 NgxBootstrapIconsModule.pick(allIcons),
31 35 AngularSplitModule,
  36 + PlotlyModule
32 37 ],
33 38 providers: [],
34 39 bootstrap: [AppComponent]
src/app/component/graph/graph.component.html View file @ 8c0f513
1   -<div id="graph" style="width:600px;height:250px;"></div>
  1 +<plotly-plot [data]="graph.data" [layout]="graph.layout" [style]="{position: 'relative', width: '100%' , height:'100%'}">
  2 +
  3 +</plotly-plot>
src/app/component/graph/graph.component.ts View file @ 8c0f513
1   -import { Component, OnInit } from '@angular/core';
  1 +import {Component, OnInit} from '@angular/core';
  2 +import {SelectedVesselService} from '../../service/selected-vessel.service';
  3 +import {Vessel} from '../../model/vessel';
2 4  
3 5 @Component({
4 6 selector: 'app-graph',
5 7  
6 8  
7 9  
... ... @@ -6,10 +8,70 @@
6 8 styleUrls: ['./graph.component.scss']
7 9 })
8 10 export class GraphComponent implements OnInit {
  11 + selectedVessel: Vessel;
9 12  
10   - constructor() { }
  13 + constructor(private selectedVesselService: SelectedVesselService) {
  14 + }
11 15  
  16 + // var trace1 = {
  17 + // x: [1, 2, 3, 4, 5],
  18 + // y: [1, 6, 3, 6, 1],
  19 + // mode: 'markers+text',
  20 + // type: 'scatter',
  21 + // name: 'Team A',
  22 + // text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'],
  23 + // textposition: 'top center',
  24 + // textfont: {
  25 + // family: 'Raleway, sans-serif'
  26 + // },
  27 + // marker: { size: 12 }
  28 + // };
  29 +
  30 + public graph = {
  31 + data: [],
  32 + layout: {
  33 + xaxis: {
  34 + title: ''
  35 + },
  36 + yaxis: {
  37 + title: ''
  38 + }
  39 + }
  40 + };
  41 +
12 42 ngOnInit(): void {
  43 + this.connectSelectVesselObservable();
  44 + }
  45 +
  46 + connectSelectVesselObservable(): void {
  47 + this.selectedVesselService.currentVessel.subscribe(vessels => {
  48 + this.selectedVessel = vessels;
  49 + this.updateGraph();
  50 + });
  51 + }
  52 +
  53 + cleanGraph(): void {
  54 + this.graph.data = [];
  55 + this.graph.layout.xaxis.title = '';
  56 + this.graph.layout.yaxis.title = '';
  57 + }
  58 +
  59 + updateGraph(): void {
  60 +
  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';
13 75 }
14 76  
15 77 }