Create NDVI plots

frontend/src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <h1 id="app">
-    <TestComponent />
+    <NdviComparisonGraph />
+    <NdviSelectMonthGraph />
+    <NdviOverlayGraph />
     <MedianTempGraph />
     <MeanSoilTempGraph />
     <MeanSoilMoistureGraph />
@@ -10,8 +12,10 @@
 </template>
 
 <script>
-  import TestComponent from "./components/TestComponent.vue"
-  import MedianTempGraph from "./components/TestGraphOne.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"
   import AugustMeanSoilTempGraph from "./components/AugustSoilTempGraph.vue"
@@ -20,14 +24,16 @@
   export default {
     name: 'App',
     components: {
-      //TestComponent,
+      NdviComparisonGraph,
+      NdviSelectMonthGraph,
+      NdviOverlayGraph,
       MedianTempGraph,
       MeanSoilTempGraph,
       MeanSoilMoistureGraph,
       AugustMeanSoilTempGraph,
       SelectMonthMeanSoilTempGraph
     }
-  };
+  }
 </script>
 
 <style scoped></style>

frontend/src/components/NdviGraphs/NdviComparisonGraph.vue

@@ -0,0 +1,129 @@
+<template>
+  <v-container>
+    <h2 class="pb-10">NDVI (2018-2023)</h2>
+    <v-row justify="center">
+      <v-col class="py-0" style="max-width: 350px">
+        <v-select 
+          v-model="temporalResolution" 
+          :items="temporalResolutionOptions" 
+          label="Temporal Resolution" 
+          variant="outlined"
+          density="compact"
+          required 
+        />
+      </v-col>
+      <v-col 
+        v-if="temporalResolution !== 'Daily'" 
+        class="py-0" 
+        style="max-width: 350px"
+      >
+        <v-select 
+          v-model="aggregation" 
+          :items="aggregationOptions" 
+          label="Aggregation"
+          variant="outlined"
+          density="compact"
+          required 
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <div 
+        id="plotlyGraphNdviComparison" 
+        style="width: 100%; height: 400px"
+        class="d-flex justify-center"
+      ></div>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { ref, watch, onMounted } from 'vue'
+import axios from 'axios'
+import Plotly from 'plotly.js-dist-min'
+
+export default {
+  name: 'NdviComparisonGraph',
+  setup() {
+    const ndviData = ref(null)
+    const startDate = ref(1514761200) // 2018-01-01
+    const endDate = ref(1704063599) // 2023-12-31
+    const temporalResolution = ref("Monthly")
+    const aggregation = ref("Mean")
+    const temporalResolutionOptions = ["Monthly", "Daily"]
+    const aggregationOptions = ["Mean", "Median", "Max", "Min"]
+
+    const fetchNdviData = async (params) => {
+      const apiUrl = 'http://localhost:8000/index/ndvi'
+      try {
+        const response = await axios.get(apiUrl, { params })
+        ndviData.value = response.data
+        renderPlot()
+      } catch (error) {
+        console.error("Error fetching NDVI data:", error)
+      }
+    }
+
+    const renderPlot = () => {
+      if (ndviData.value && ndviData.value.data) {
+        const timestamps = ndviData.value.data.map(d => new Date(d.timestamp * 1000))
+        const values = ndviData.value.data.map(d => d.value)
+        const trace = {
+          x: timestamps,
+          y: values,
+          mode: 'lines+markers',
+          type: 'scatter',
+          name: '',
+          line: { color: 'blue' }
+        }
+        const layout = {
+          title: 'NDVI of Tempelhofer Feld',
+          xaxis: { title: '', type: 'date', rangeslider: { visible: true } },
+          yaxis: { title: 'NDVI Value' },
+        }
+        Plotly.newPlot('plotlyGraphNdviComparison', [trace], layout)
+      }
+    }
+
+    const updateGraph = () => {
+      const params = {
+        startDate: startDate.value,
+        endDate: endDate.value,
+        location: "TEMPELHOFER_FELD",
+        temporalResolution: temporalResolution.value.toUpperCase(),
+        aggregation: aggregation.value.toUpperCase(),
+      }
+      fetchNdviData(params)
+    }
+
+    watch([temporalResolution, aggregation], updateGraph)
+
+    onMounted(() => {
+      const defaultParams = {
+        startDate: startDate.value,
+        endDate: endDate.value,
+        location: "TEMPELHOFER_FELD",
+        temporalResolution: temporalResolution.value.toUpperCase(),
+        aggregation: aggregation.value.toUpperCase(),
+      }
+      fetchNdviData(defaultParams)
+    })
+
+    return {
+      ndviData,
+      startDate,
+      endDate,
+      temporalResolution,
+      aggregation,
+      temporalResolutionOptions,
+      aggregationOptions
+    }
+  }
+}
+</script>
+
+<style scoped>
+h2 {
+  text-align: center;
+}
+</style>

frontend/src/components/NdviGraphs/NdviOverlayGraph.vue

@@ -0,0 +1,95 @@
+<template>
+    <v-container>
+      <h2 class="pb-4">NDVI Year Overlay (2018-2023)</h2>
+      <v-row>
+        <div 
+          id="plotlyGraphNdviOverlay" 
+          style="width: 100%; height: 400px"
+          class="d-flex justify-center"
+        ></div>
+      </v-row>
+    </v-container>
+  </template>
+
+  <script>
+  import { ref, onMounted } from 'vue'
+  import axios from 'axios'
+  import Plotly from 'plotly.js-dist-min'
+
+  export default {
+    name: 'NdviComparisonOverlay',
+    setup() {
+      const ndviData = ref(null)
+      const startDate = ref(1514761200) // 2018-01-01
+      const endDate = ref(1704063599) // 2023-12-31
+      const years = [2018, 2019, 2020, 2021, 2022, 2023]
+
+      const fetchNdviData = async (params) => {
+        const apiUrl = 'http://localhost:8000/index/ndvi'
+        try {
+          const response = await axios.get(apiUrl, { params })
+          ndviData.value = response.data
+          renderPlot()
+        } catch (error) {
+          console.error("Error fetching NDVI data:", error)
+        }
+      }
+
+      const renderPlot = () => {
+        if (ndviData.value && ndviData.value.data) {
+          const traces = years.map(year => {
+            const filteredData = ndviData.value.data.filter(d => new Date(d.timestamp * 1000).getFullYear() === year)
+
+            const months = filteredData.map(d => new Date(d.timestamp * 1000).getMonth() + 1)
+            const values = filteredData.map(d => d.value)
+
+            return {
+              x: months,
+              y: values,
+              mode: 'lines+markers',
+              type: 'scatter',
+              name: `NDVI ${year}`,
+              line: { width: 2 },
+            }
+          })
+
+          const layout = {
+            title: 'NDVI of Tempelhofer Feld',
+            xaxis: { 
+              title: '', 
+              tickmode: 'array', 
+              tickvals: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], 
+              ticktext: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+            },
+            yaxis: { title: 'NDVI Value' },
+          }
+
+          Plotly.newPlot('plotlyGraphNdviOverlay', traces, layout)
+        }
+      }
+
+      onMounted(() => {
+        const params = {
+          startDate: startDate.value,
+          endDate: endDate.value,
+          location: "TEMPELHOFER_FELD",
+          temporalResolution: "MONTHLY",
+          aggregation: "MEAN",
+        }
+        fetchNdviData(params)
+      })
+
+      return {
+        ndviData,
+        years
+      }
+    }
+  }
+  </script>
+
+  <style scoped>
+  h2 {
+    text-align: center;
+  }
+  </style>
+

frontend/src/components/NdviGraphs/NdviSelectMonthGraph.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-container>
+    <h2 class="pb-10">NDVI Monthly Means (2018-2023)</h2>
+    <v-row justify="center">
+      <v-col class="py-0" style="max-width: 350px">
+        <v-select 
+          v-model="month" 
+          :items="monthOptions" 
+          label="Month" 
+          variant="outlined"
+          density="compact"
+          required 
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <div 
+        id="plotlyGraphNdviMonthly" 
+        style="width: 100%; height: 400px"
+        class="d-flex justify-center"
+      ></div>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+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("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 fetchNdviData = async () => {
+      const apiUrl = 'http://localhost:8000/index/ndvi'
+      try {
+        const response = await axios.get(apiUrl, { 
+          params: { 
+            startDate: startDate.value,
+            endDate: endDate.value,
+            location: "TEMPELHOFER_FELD",
+            temporalResolution: "MONTHLY",
+            aggregation: "MEAN" 
+          }
+        })
+        ndviData.value = response.data
+        renderPlot()
+      } catch (error) {
+        console.error("Error fetching NDVI data:", error)
+      }
+    }
+
+    const renderPlot = () => {
+      if (ndviData.value && ndviData.value.data) {
+        const monthIndex = monthOptions.indexOf(month.value) + 1
+        const filteredData = ndviData.value.data.filter(d => new Date(d.timestamp * 1000).getMonth() + 1 === monthIndex)
+
+        const years = filteredData.map(d => new Date(d.timestamp * 1000).getFullYear())
+        const values = filteredData.map(d => d.value)
+
+        const trace = {
+          x: years,
+          y: values,
+          mode: 'lines+markers',
+          type: 'bar',
+          name: '',
+          marker: { color: 'green' }
+        }
+
+        const layout = {
+          title: `NDVI of Tempelhofer Feld (${month.value})`,
+          xaxis: { title: '' },
+          yaxis: { title: 'NDVI Value' }
+        }
+
+        Plotly.newPlot('plotlyGraphNdviMonthly', [trace], layout)
+      }
+    }
+
+    watch(month, renderPlot)
+
+    onMounted(() => {
+      fetchNdviData()
+    })
+
+    return {
+      ndviData,
+      monthOptions,
+      month
+    }
+  }
+}
+</script>
+
+<style scoped>
+h2 {
+  text-align: center;
+}
+</style>