graph.component.html 2.42 KB
<div class="sticky-top" style=" margin-top: -80px;margin-left: 50px;">
  <div class="form-row">
    <div class="form-group col-md-2 ">
      <label for="xaxis"></label>
      <select #xaxis (change)='updateXaxis(xaxis.value)' id="xaxis" class="form-control">
        <option selected>Choose x axis</option>
        <option [value]="'mmsi'">mmsi</option>
        <option [value]="'time'">time</option>
        <option [value]="'latitude'">latitude</option>
        <option [value]="'longitude'">longitude</option>
        <option [value]="'speedOverGround'">speedOverGround</option>
        <option [value]="'courseOverGround'">courseOverGround</option>
        <option [value]="'heading'">heading</option>
        <option [value]="'vesselName'">vesselName</option>
        <option [value]="'imo'">imo</option>
        <option [value]="'callSign'">callSign</option>
        <option [value]="'vesselType'">vesselType</option>
        <option [value]="'status'">status</option>
        <option [value]="'length'">length</option>
        <option [value]="'width'">width</option>
        <option [value]="'draft'">draft</option>
        <option [value]="'cargo'">cargo</option>
      </select>
    </div>
    <div class="form-group col-md-2 ">
      <label for="yaxis"></label>
      <select #yaxis (change)='updateYaxis(yaxis.value)' id="yaxis" class="form-control">
        <option  selected>Choose y axis</option>
        <option [value]="'mmsi'">mmsi</option>
        <option [value]="'time'">time</option>
        <option [value]="'latitude'">latitude</option>
        <option [value]="'longitude'">longitude</option>
        <option [value]="'speedOverGround'">speedOverGround</option>
        <option [value]="'courseOverGround'">courseOverGround</option>
        <option [value]="'heading'">heading</option>
        <option [value]="'vesselName'">vesselName</option>
        <option [value]="'imo'">imo</option>
        <option [value]="'callSign'">callSign</option>
        <option [value]="'vesselType'">vesselType</option>
        <option [value]="'status'">status</option>
        <option [value]="'length'">length</option>
        <option [value]="'width'">width</option>
        <option [value]="'draft'">draft</option>
        <option [value]="'cargo'">cargo</option>
      </select>
    </div>
  </div>
</div>
<plotly-plot [data]="graph.data" [layout]="graph.layout"
             [style]="{position: 'relative', width: '100%' , height:'100%'}"></plotly-plot>