Create monthly chart and overlay graph

Author: digi-jules

frontend/src/components/NdviGraphs/NdviOverlayGraph.vue

@@ -0,0 +1,97 @@
+<template>
+    <v-container>
+      <h2 class="pb-10">NDVI Year Overlay (2018-2023)</h2>
+      <v-row>
+        <div 
+          id="plotlyGraphNdviOverlay" 
+          v-show="ndviData"
+          style="width: 100%"
+          class="d-flex justify-center"
+        ></div>
+      </v-row>
+    </v-container>
+  </template>
+  
+  <script>
+  import { ref, nextTick, 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
+          await nextTick()
+          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,115 @@
+<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" 
+        v-show="ndviData"
+        style="width: 100%"
+        class="d-flex justify-center"
+      ></div>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { ref, nextTick, 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 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
+        await nextTick()
+        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)
+      }
+    }
+
+    const updateGraph = () => {
+      if (ndviData.value) {
+        renderPlot()
+      }
+    }
+
+    watch(month, updateGraph)
+
+    onMounted(fetchNdviData)
+
+    return {
+      ndviData,
+      monthOptions,
+      month
+    }
+  }
+}
+</script>
+
+<style scoped>
+h2 {
+  text-align: center;
+}
+</style>