From b5bde8f5ac6b4460f0e9e8878b5901038c8f2d54 Mon Sep 17 00:00:00 2001
From: Toni Vicente <sparkticus20@hotmail.com>
Date: Wed, 9 Apr 2025 17:31:06 +0200
Subject: [PATCH 1/2] Chart blade Fixed representation issue

Quoting to Disposable in discord:
"when I assigned a new axis for speeds and disabled altitudes while viewing the chart, that terrain height messed up the speeds axis. Thus I removed it  When you switch to v2, we can check your solution, if we can somehow fix the new axis to only speeds then we can add them back"

I'm investigating seems that when a serie is deactivated, chart lost the yaxis array index, there are a option to asociate yaxis by nameseries yaxis.seriesName https://apexcharts.com/docs/chart-types/multiple-yaxis-scales/
---
 .../Disposable_v3/pireps/chart.blade.php      | 219 ++++++++++--------
 1 file changed, 121 insertions(+), 98 deletions(-)

diff --git a/resources/views/layouts/Disposable_v3/pireps/chart.blade.php b/resources/views/layouts/Disposable_v3/pireps/chart.blade.php
index fc3ae3e..3dc00c8 100644
--- a/resources/views/layouts/Disposable_v3/pireps/chart.blade.php
+++ b/resources/views/layouts/Disposable_v3/pireps/chart.blade.php
@@ -9,116 +9,139 @@
     $terr[] = ($a->altitude_msl - $a->altitude_agl) > 0 ? $a->altitude_msl - $a->altitude_agl : 0;
   }
 @endphp
-<div name="chart" class="p-1"></div>
+<div id="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: []
-        }
-      },
+<script>	
+var options = {
+  chart: {
+    fontFamily: 'Helvetica, Arial, sans-serif',
+    height: 'auto',
+    width: '100%',
+    redrawOnParentResize: true,
+    zoom: {
+      enabled: true
     },
-    title: {
-      text: '{!! $pirep->ident !!} Altitude and Speed Records',
-      align: 'left',
-      style: {
-        fontWeight: 'bold'
-      },
-    },
-    legend: {
+    toolbar: {
       show: true,
-      horizontalAlign: 'center',
-      position: 'top',
+      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: []
+      }
     },
-    tooltip: {
-      x: {
-        show: false,
+  },
+  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
       },
-      fixed: {
-        enabled: false,
-        position: 'topLeft',
-        offsetX: 60,
-        offsetY: 80,
-      }
+      data: {!! json_encode($terr) !!},
+    }
+  ],
+  stroke: {
+    width: 3,
+    curve: 'monotoneCubic'
+  },
+  xaxis: {
+    labels: {
+      show: false,
     },
-    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'
+    tooltip: {
+      enabled: false,
     },
-    xaxis: {
-      labels: {
-        show: false,
+    decimalsInFloat: 0
+  },
+  yaxis: [
+    {
+      title: {
+        text: 'Altitude (MSL and AGL)',
       },
-      tooltip: {
-        enabled: false,
+      forceNiceScale: true,
+      decimalsInFloat: 0,
+      seriesName: ['Altitude (MSL)', 'Altitude (AGL)']
+    },
+    {
+      title: {
+        text: 'Speed (IAS and GS)',
       },
-      decimalsInFloat: 0
+      forceNiceScale: true,
+      decimalsInFloat: 0,
+      opposite: true,
+      seriesName: ['Speed (GS)', 'Speed (IAS)']
     },
-    yaxis: {
+    {
+      title: {
+        text: 'Terrain Elevation',
+      },
       forceNiceScale: true,
       decimalsInFloat: 0,
+      seriesName: 'Terrain Elevation'
     }
-  }
+  ]
+}
 
-  var chart = new ApexCharts(document.querySelector("#chart"), options);
-  chart.render();
+var chart = new ApexCharts(document.querySelector("#chart"), options);
+chart.render();
 </script>
\ No newline at end of file

From 6fdfa4fef68553b1328c710dcbfa29a6c435a169 Mon Sep 17 00:00:00 2001
From: Toni Vicente <sparkticus20@hotmail.com>
Date: Wed, 9 Apr 2025 17:49:00 +0200
Subject: [PATCH 2/2] Joined Terrain Elevation with Altitude

Separate yaxis to Terrain Elevation was weird
---
 .../views/layouts/Disposable_v3/pireps/chart.blade.php | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/resources/views/layouts/Disposable_v3/pireps/chart.blade.php b/resources/views/layouts/Disposable_v3/pireps/chart.blade.php
index 3dc00c8..a86fc4c 100644
--- a/resources/views/layouts/Disposable_v3/pireps/chart.blade.php
+++ b/resources/views/layouts/Disposable_v3/pireps/chart.blade.php
@@ -120,7 +120,7 @@
       },
       forceNiceScale: true,
       decimalsInFloat: 0,
-      seriesName: ['Altitude (MSL)', 'Altitude (AGL)']
+      seriesName: ['Altitude (MSL)', 'Altitude (AGL)', 'Terrain Elevation']
     },
     {
       title: {
@@ -130,14 +130,6 @@
       decimalsInFloat: 0,
       opposite: true,
       seriesName: ['Speed (GS)', 'Speed (IAS)']
-    },
-    {
-      title: {
-        text: 'Terrain Elevation',
-      },
-      forceNiceScale: true,
-      decimalsInFloat: 0,
-      seriesName: 'Terrain Elevation'
     }
   ]
 }