Small fixes

Author: digi-jules

frontend/src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <h1 id="app">
     <NdviComparisonGraph />
+    <NdviSelectMonthGraph />
+    <NdviOverlayGraph />
     <MedianTempGraph />
     <MeanSoilTempGraph />
     <MeanSoilMoistureGraph />
@@ -10,7 +12,9 @@
 </template>
 
 <script>
-  import NdviComparisonGraph from "./components/NdviComparisonGraph.vue"
+  import NdviComparisonGraph from "./components/NdviGraphs/NdviComparisonGraph.vue"
+  import NdviSelectMonthGraph from "./components/NdviGraphs/NdviSelectMonthGraph.vue"
+  import NdviOverlayGraph from "./components/NdviGraphs/NdviOverlayGraph.vue"
   import MedianTempGraph from "./components/MedianTempGraph.vue"
   import MeanSoilTempGraph from "./components/SoilTempGraph.vue"
   import MeanSoilMoistureGraph from "./components/SoilMoistureGraph.vue"
@@ -21,6 +25,8 @@
     name: 'App',
     components: {
       NdviComparisonGraph,
+      NdviSelectMonthGraph,
+      NdviOverlayGraph,
       MedianTempGraph,
       MeanSoilTempGraph,
       MeanSoilMoistureGraph,

frontend/src/components/NdviGraphs/NdviComparisonGraph.vue

@@ -30,16 +30,15 @@
     <v-row>
       <div 
         id="plotlyGraphNdviComparison" 
-        v-show="ndviData"
-        style="width: 100%"
+        style="width: 100%; height: 400px"
         class="d-flex justify-center"
       ></div>
     </v-row>
   </v-container>
 </template>
 
 <script>
-import { ref, nextTick, watch, onMounted } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import axios from 'axios'
 import Plotly from 'plotly.js-dist-min'
 
@@ -48,7 +47,7 @@ export default {
   setup() {
     const ndviData = ref(null)
     const startDate = ref(1514761200) // 2018-01-01
-      const endDate = ref(1704063599) // 2023-12-31
+    const endDate = ref(1704063599) // 2023-12-31
     const temporalResolution = ref("Monthly")
     const aggregation = ref("Mean")
     const temporalResolutionOptions = ["Monthly", "Daily"]
@@ -59,7 +58,6 @@ export default {
       try {
         const response = await axios.get(apiUrl, { params })
         ndviData.value = response.data
-        await nextTick()
         renderPlot()
       } catch (error) {
         console.error("Error fetching NDVI data:", error)
@@ -76,11 +74,11 @@ export default {
           mode: 'lines+markers',
           type: 'scatter',
           name: '',
-          line: { color: 'green' }
+          line: { color: 'blue' }
         }
         const layout = {
           title: 'NDVI of Tempelhofer Feld',
-          xaxis: { title: '', type: 'date' },
+          xaxis: { title: '', type: 'date', rangeslider: { visible: true } },
           yaxis: { title: 'NDVI Value' },
         }
         Plotly.newPlot('plotlyGraphNdviComparison', [trace], layout)

frontend/src/components/NdviGraphs/NdviOverlayGraph.vue

@@ -1,19 +1,18 @@
 <template>
     <v-container>
-      <h2 class="pb-10">NDVI Year Overlay (2018-2023)</h2>
+      <h2 class="pb-4">NDVI Year Overlay (2018-2023)</h2>
       <v-row>
         <div 
           id="plotlyGraphNdviOverlay" 
-          v-show="ndviData"
-          style="width: 100%"
+          style="width: 100%; height: 400px"
           class="d-flex justify-center"
         ></div>
       </v-row>
     </v-container>
   </template>
 
   <script>
-  import { ref, nextTick, onMounted } from 'vue'
+  import { ref, onMounted } from 'vue'
   import axios from 'axios'
   import Plotly from 'plotly.js-dist-min'
   
@@ -30,7 +29,6 @@
         try {
           const response = await axios.get(apiUrl, { params })
           ndviData.value = response.data
-          await nextTick()
           renderPlot()
         } catch (error) {
           console.error("Error fetching NDVI data:", error)
@@ -83,7 +81,7 @@
   
       return {
         ndviData,
-        years,
+        years
       }
     }
   }

frontend/src/components/NdviGraphs/NdviSelectMonthGraph.vue

@@ -16,31 +16,30 @@
     <v-row>
       <div 
         id="plotlyGraphNdviMonthly" 
-        v-show="ndviData"
-        style="width: 100%"
+        style="width: 100%; height: 400px"
         class="d-flex justify-center"
       ></div>
     </v-row>
   </v-container>
 </template>
 
 <script>
-import { ref, nextTick, watch, onMounted } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import axios from 'axios'
 import Plotly from 'plotly.js-dist-min'
 
 export default {
   name: 'NdviSelectMonthGraph',
   setup() {
     const ndviData = ref(null)
-    const month = ref("August")
+    const month = ref("January")
     const monthOptions = [
       "January", "February", "March", "April",
       "May", "June", "July", "August",
       "September", "October", "November", "December"
     ]
     const startDate = ref(1514761200) // 2018-01-01
-      const endDate = ref(1704063599) // 2023-12-31
+    const endDate = ref(1704063599) // 2023-12-31
 
     const fetchNdviData = async () => {
       const apiUrl = 'http://localhost:8000/index/ndvi'
@@ -55,7 +54,6 @@ export default {
           }
         })
         ndviData.value = response.data
-        await nextTick()
         renderPlot()
       } catch (error) {
         console.error("Error fetching NDVI data:", error)
@@ -89,15 +87,11 @@ export default {
       }
     }
 
-    const updateGraph = () => {
-      if (ndviData.value) {
-        renderPlot()
-      }
-    }
-
-    watch(month, updateGraph)
+    watch(month, renderPlot)
 
-    onMounted(fetchNdviData)
+    onMounted(() => {
+      fetchNdviData()
+    })
 
     return {
       ndviData,