Merge pull request #230 from chakflying/patch-3

Fix: Improve chart styling on mobile

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,

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;