Volar formatting

src/App.vue

@@ -60,7 +60,8 @@ export default {
     </div>
     <div class="bottom-section">
       <MultiLineChart alt="NPK data line graph" v-if="npkData" :chart-data="npkData" :x-axis-data=pastSevenDaysData />
-      <MultiAxisChart alt="Temperature Humidity Moisture data line multi-axis graph" v-if="thmData" :chart-data="thmData" :x-axis-data=pastSevenDaysData />
+      <MultiAxisChart alt="Temperature Humidity Moisture data line multi-axis graph" v-if="thmData" :chart-data="thmData"
+        :x-axis-data=pastSevenDaysData />
     </div>
   </div>
 </template>
@@ -101,23 +102,26 @@ export default {
   justify-content: center;
   align-items: center;
   flex: 0.5;
-  gap: 10px; /* Adds a gap between the Graph components */
+  gap: 10px;
+  /* Adds a gap between the Graph components */
 }
 
 /* Responsive adjustments for mobile screens */
 @media (max-width: 768px) {
   .bottom-section {
-    flex-direction: column; /* Stack the Graph components */
-    gap: 0; /* Removes the gap when stacked vertically */
+    flex-direction: column;
+    /* Stack the Graph components */
+    gap: 0;
+    /* Removes the gap when stacked vertically */
   }
 
   .logo-container img {
-    width: 50vw; /* Adjust logo size for smaller screens */
+    width: 50vw;
+    /* Adjust logo size for smaller screens */
   }
 
   .value-tabs-container {
     right: 10%;
     width: 80%;
   }
-}
-</style>
+}</style>

src/components/ValueTabs.vue

 <script>
-  import axios from 'axios'
-  import * as bootstrap from 'bootstrap/dist/js/bootstrap'
+import axios from 'axios'
+import * as bootstrap from 'bootstrap/dist/js/bootstrap'
 
 export default {
   data() {
@@ -45,45 +45,51 @@ export default {
       <div class="valueBox">
         Nitrogen (N):&nbsp;
         <li class="list-group-item"
-        v-bind:class="getClass(values[0].N, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])"
-        data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{ values[0].N }} ppm</li>
+          v-bind:class="getClass(values[0].N, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])"
+          data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{
+            values[0].N }} ppm</li>
       </div>
       <div class="valueBox">
         Phosphorus (P):&nbsp;
         <li class="list-group-item"
-        v-bind:class="getClass(values[1].P, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])"
-        data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{ values[1].P }} ppm</li>
+          v-bind:class="getClass(values[1].P, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])"
+          data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{
+            values[1].P }} ppm</li>
       </div>
       <div class="valueBox">
         Potassium (K):&nbsp;
         <li class="list-group-item"
-        v-bind:class="getClass(values[2].K, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])"
-        data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{ values[2].K }} ppm</li>
+          v-bind:class="getClass(values[2].K, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])"
+          data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{
+            values[2].K }} ppm</li>
       </div>
       <div class="valueBox">
         Temperature:&nbsp;
         <li class="list-group-item"
-        v-bind:class="getClass(values[3].T, this.rangeT[0], this.rangeT[1], this.rangeT[2], this.rangeT[3])"
-        data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeT[1] + '-' + this.rangeT[2]">{{ values[3].T }} °C</li>
+          v-bind:class="getClass(values[3].T, this.rangeT[0], this.rangeT[1], this.rangeT[2], this.rangeT[3])"
+          data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeT[1] + '-' + this.rangeT[2]">{{
+            values[3].T }} °C</li>
       </div>
       <div class="valueBox">
         Humidity:&nbsp;
         <li class="list-group-item"
-        v-bind:class="getClass(values[4].H, this.rangeHM[0], this.rangeHM[1], this.rangeHM[2], this.rangeHM[3])"
-        data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeHM[1] + '-' + this.rangeHM[2]">{{ values[4].H }} %</li>
+          v-bind:class="getClass(values[4].H, this.rangeHM[0], this.rangeHM[1], this.rangeHM[2], this.rangeHM[3])"
+          data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeHM[1] + '-' + this.rangeHM[2]">{{
+            values[4].H }} %</li>
       </div>
       <div class="valueBox">
         Moisture:&nbsp;
         <li class="list-group-item"
-        v-bind:class="getClass(values[5].M, this.rangeHM[0], this.rangeHM[1], this.rangeHM[2], this.rangeHM[3])"
-        data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeHM[1] + '-' + this.rangeHM[2]">{{ values[5].M }} %</li>
+          v-bind:class="getClass(values[5].M, this.rangeHM[0], this.rangeHM[1], this.rangeHM[2], this.rangeHM[3])"
+          data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeHM[1] + '-' + this.rangeHM[2]">{{
+            values[5].M }} %</li>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.allBoxes{
+.allBoxes {
   /* font-size: 40px; */
   font-size: 2vw;
   width: fit-content;
@@ -97,8 +103,7 @@ export default {
 
 /* Responsive adjustments for mobile screens */
 @media (max-width: 768px) {
-  .allBoxes{
+  .allBoxes {
     font-size: 1.6vh;
   }
-}
-</style>
+}</style>