Pirep Altitude and Speed Chart

docs/README.md

@@ -223,7 +223,8 @@ If you need more space in footer area, kindly check theme stylesheet to add your
 
 29.SEP.24
 
-* Added Japanese traslation (Thanks to Minnsch, ANA Virtual Group)  
+* Added Japanese traslation (Thanks to Minnsch, ANA Virtual Group)
+* Added Altitude and Speed chart to pirep details page (preparations for vmsAcars v2)  
 
 17.SEP.24
 

resources/views/layouts/Disposable_v3/pireps/chart.blade.php

@@ -0,0 +1,124 @@
+@php
+  $speed_margin = 20;
+  $msl = $pirep->acars->where('gs', '>', $speed_margin)->pluck('altitude_msl');
+  $agl = $pirep->acars->where('gs', '>', $speed_margin)->pluck('altitude_agl');
+  $spd = $pirep->acars->where('gs', '>', $speed_margin)->pluck('gs');
+  $ias = $pirep->acars->where('gs', '>', $speed_margin)->pluck('ias');
+  $terr = [];
+  foreach ($pirep->acars->where('gs', '>', $speed_margin) as $a) {
+    $terr[] = ($a->altitude_msl - $a->altitude_agl) > 0 ? $a->altitude_msl - $a->altitude_agl : 0;
+  }
+@endphp
+<div name="chart" class="p-1"></div>
+<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+<script>
+  var options = {
+    chart: {
+      fontFamily: 'Helvetica, Arial, sans-serif',
+      height: 'auto',
+      width: '100%',
+      redrawOnParentResize: true,
+      zoom: {
+        enabled: true
+      },
+      toolbar: {
+        show: true,
+        offsetX: -10,
+        offsetY: 0,
+        tools: {
+          download: true,
+          selection: false,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: false,
+          reset: true | '<img src="/static/icons/reset.png" width="20">',
+          customIcons: []
+        }
+      },
+    },
+    title: {
+      text: '{!! $pirep->ident !!} Altitude and Speed Records',
+      align: 'left',
+      style: {
+        fontWeight: 'bold'
+      },
+    },
+    legend: {
+      show: true,
+      horizontalAlign: 'center',
+      position: 'top',
+    },
+    tooltip: {
+      x: {
+        show: false,
+      },
+      fixed: {
+        enabled: false,
+        position: 'topLeft',
+        offsetX: 60,
+        offsetY: 80,
+      }
+    },
+    series: [
+      {
+        name: 'Altitude (MSL)',
+        type: 'line',
+        color: '#191970',
+        zIndex: 5,
+        data: {!! json_encode($msl) !!}
+      }, {
+        name: 'Altitude (AGL)',
+        type: 'line',
+        color: '#66CDAA',
+        hidden: true,
+        zIndex: 4,
+        data: {!! json_encode($agl) !!}
+      }, {
+        name: 'Speed (GS)',
+        type: 'line',
+        color: '#F70D1A',
+        hidden: false,
+        zIndex: 3,
+        data: {!! json_encode($spd) !!}
+      }, {
+        name: 'Speed (IAS)',
+        type: 'line',
+        color: '#800080',
+        hidden: false,
+        zIndex: 2,
+        data: {!! json_encode($ias) !!}
+      }, {
+        name: 'Terrain Elevation',
+        type: 'area',
+        color: '#8B4513',
+        zIndex: 1,
+        fill: {
+          colors: ['#A0522D'],
+          opacity: 0.6
+        },
+        data: {!! json_encode($terr) !!}
+      }
+    ],
+    stroke: {
+      width: 3,
+      curve: 'monotoneCubic'
+    },
+    xaxis: {
+      labels: {
+        show: false,
+      },
+      tooltip: {
+        enabled: false,
+      },
+      decimalsInFloat: 0
+    },
+    yaxis: {
+      forceNiceScale: true,
+      decimalsInFloat: 0,
+    }
+  }
+
+  var chart = new ApexCharts(document.querySelector("#chart"), options);
+  chart.render();
+</script>

resources/views/layouts/Disposable_v3/pireps/show.blade.php

@@ -6,6 +6,7 @@
   $DBasic = isset($DBasic) ? $DBasic : check_module('DisposableBasic');
   $DSpecial = isset($DSpecial) ? $DSpecial : check_module('DisposableSpecial');
   $AuthCheck = Auth::check();
+  $pirep->loadMissing('acars');
 @endphp
 @section('content')
   <div class="row">
@@ -24,6 +25,13 @@
                   Route Map
                 </button>
               </li>
+              @if($AuthCheck && $pirep->acars && $pirep->acars->count() > 0)
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link border-0 m-0 mx-1 p-0 px-1" id="chart-tab" data-bs-toggle="tab" data-bs-target="#chart" type="button" role="tab" aria-controls="chart" aria-selected="true">
+                    Altitude & Speed Chart
+                  </button>
+                </li>
+              @endif
               @if($AuthCheck && $pirep->fields && $pirep->fields->count() > 0)
                 <li class="nav-item" role="presentation">
                   <button class="nav-link border-0 m-0 mx-1 p-0 px-1" id="fields-tab" data-bs-toggle="tab" data-bs-target="#fields" type="button" role="tab" aria-controls="details" aria-selected="false">
@@ -55,6 +63,11 @@
             <div class="tab-pane fade show active" id="map" role="tabpanel" aria-labelledby="map-tab">
               @include('pireps.map', ['map_height' => $tab_height])
             </div>
+            @if($AuthCheck && $pirep->acars && $pirep->acars->count() > 0)
+              <div class="tab-pane fade show" id="chart" role="tabpanel" aria-labelledby="chart-tab">
+                @include('pireps.chart')
+              </div>
+            @endif
             @if($AuthCheck && $pirep->fields && $pirep->fields->count() > 0 && $pirep->fields->count() <= 150)
               <div class="tab-pane fade overflow-auto" style="max-height: {{ $tab_height }};" id="fields" role="tabpanel" aria-labelledby="fields-tab">
                 <table class="table table-sm table-borderless table-striped text-nowrap align-middle mb-0">