From cf5168a4e6e13c14d2c8553077f285dadcee0320 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Wed, 18 Aug 2021 12:21:16 +0800
Subject: [PATCH 1/2] Fix: Resize chart on screen breakpoints

---
 src/components/PingChart.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 596ca004..53a83799 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -1,5 +1,5 @@
 <template>
-    <LineChart :chart-data="chartData" :height="100" :options="chartOptions" />
+    <LineChart :chart-data="chartData" :options="chartOptions" />
 </template>
 
 <script>
@@ -31,6 +31,19 @@ export default {
         chartOptions() {
             return {
                 responsive: true,
+                maintainAspectRatio: false,
+                onResize: (chart) => {
+                    chart.canvas.parentNode.style.position = "relative";
+                    if (screen.width < 576) {
+                        chart.canvas.parentNode.style.height = "275px";
+                    } else if (screen.width < 768) {
+                        chart.canvas.parentNode.style.height = "320px";
+                    } else if (screen.width < 992) {
+                        chart.canvas.parentNode.style.height = "300px";
+                    } else {
+                        chart.canvas.parentNode.style.height = "250px";
+                    }
+                },
                 layout: {
                     padding: {
                         left: 10,

From d8bcfcaaa292185384efa9f2f90a45b32949f8a7 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Wed, 18 Aug 2021 12:22:45 +0800
Subject: [PATCH 2/2] Fix: Reduce chart padding on mobile

---
 src/pages/Details.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 9f910183..fca03e3c 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -74,7 +74,7 @@
         </div>
     </div>
 
-    <div v-if="showPingChartBox" class="shadow-box big-padding text-center">
+    <div v-if="showPingChartBox" class="shadow-box big-padding text-center ping-chart-wrapper">
         <div class="row">
             <div class="col">
                 <PingChart :monitor-id="monitor.id" />
@@ -322,13 +322,13 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
-@media (max-width: 767px) { 
+@media (max-width: 767px) {
     .badge {
         margin-top: 14px;
     }
 }
 
-@media (max-width: 550px) { 
+@media (max-width: 550px) {
     .functions {
         text-align: center;
     }
@@ -337,9 +337,13 @@ export default {
         margin-left: 10px !important;
         margin-right: 10px !important;
     }
+
+    .ping-chart-wrapper {
+        padding: 10px !important;
+    }
 }
 
-@media (max-width: 400px) { 
+@media (max-width: 400px) {
     .btn {
         display: inline-flex;
         flex-direction: column;