Feature/correlation-plots

frontend/src/components/CorrelationGraphs/TemperatureNdviBarAndLine.vue

@@ -0,0 +1,119 @@
+<template>
+<v-container>
+  <h2 class="pb-10">Temperature vs. NDVI</h2>
+  <v-row justify="center">
+    <div
+      id="plotlyGraphTemperatureNdvi"
+      style="width: 100%; height: 400px"
+      class="d-flex justify-center"
+    ></div>
+  </v-row>
+</v-container>
+</template>
+
+<script>
+import axios from 'axios'
+import Plotly from 'plotly.js-dist-min'
+import { onMounted, ref, render } from 'vue'
+
+export default {
+  name: 'TemperatureNdviBarAndLine',
+  setup() {
+    const temperatureData = ref(null)
+    const ndviData = ref(null)
+    const startDate = ref(1514761200) // 2018-01-01
+    const endDate = ref(1704063599) // 2023-12-31
+    const temporalResolution = ref("Monthly") // options: "Daily", "Monthly"
+    const aggregation = ref("Mean") // options: "Mean", "Median", "Max", "Min"
+
+    const fetchTemperatureData = async () => {
+      const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index'
+      const params = {
+        weatherVariable: "temperature_2m",
+        startDate: startDate.value,
+        endDate: endDate.value,
+        location: "TEMPELHOFER_FELD",
+        temporalResolution: temporalResolution.value.toUpperCase(),
+        aggregation: aggregation.value.toUpperCase()
+      }
+
+      try {
+        const response = await axios.get(apiUrl, { params })
+        temperatureData.value = response.data
+        renderPlot()
+      } catch (error) {
+        console.error("Error fetching temperature data:", error)
+      }
+    }
+
+    const fetchNdviData = async () => {
+      const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi'
+      const params = {
+        startDate: startDate.value,
+        endDate: endDate.value,
+        location: "TEMPELHOFER_FELD",
+        temporalResolution: temporalResolution.value.toUpperCase(),
+        aggregation: aggregation.value.toUpperCase()
+      }
+
+      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 (temperatureData.value && ndviData.value) {
+        const tempTimestamps = temperatureData.value.data.map(entry =>
+          new Date(entry.timestamp * 1000).toISOString().split('T')[0]
+        )
+        const tempValues = temperatureData.value.data.map(entry => entry.value)
+        const ndviTimestamps = ndviData.value.data.map(entry => new Date(entry.timestamp * 1000))
+        const ndviValues = ndviData.value.data.map(entry => entry.value)
+
+        const tempTrace = {
+          x: tempTimestamps,
+          y: tempValues,
+          type: 'bar', // can change to lines+markers
+          name: 'Temperature (°C)',
+          marker: { color: 'red' }
+        };
+
+        const ndviTrace = {
+          x: ndviTimestamps,
+          y: ndviValues,
+          mode: 'lines+markers',
+          name: 'NDVI',
+          line: { color: 'blue' },
+          yaxis: 'y2',
+        };
+
+        const layout = {
+          title: 'NDVI vs. Monthly Temperature for Tempelhofer Feld (2018-2023)',
+          xaxis: { title: 'Date', type: 'date', rangeslider: { visible: true } },
+          yaxis: { title: 'Temperature (°C)' },
+          yaxis2: {
+            title: 'NDVI',
+            overlaying: 'y',
+            side: 'right',
+          },
+          legend: { x: 1.1, y: 0.5 },
+          template: 'plotly_white'
+        };
+
+        Plotly.newPlot('plotlyGraphTemperatureNdvi', [tempTrace, ndviTrace], layout);
+      }
+    }
+
+    onMounted(() => {
+      fetchTemperatureData()
+      fetchNdviData()
+    })
+  }
+}
+</script>
+
+<style scoped></style>

frontend/src/components/CorrelationGraphs/TemperatureNdviScatter.vue

@@ -0,0 +1,128 @@
+<template>
+    <v-container>
+      <v-row justify="center" class="pb-16">
+        <div
+          id="plotlyScatterTemperatureNdvi"
+          style="width: 100%; height: 400px"
+          class="d-flex justify-center"
+        ></div>
+      </v-row>
+    </v-container>
+    </template>
+
+    <script>
+    import axios from 'axios'
+    import Plotly from 'plotly.js-dist-min'
+    import { onMounted, ref, render } from 'vue'
+
+    export default {
+      name: 'TemperatureNdviScatter',
+      setup() {
+        const temperatureData = ref(null)
+        const ndviData = ref(null)
+        const startDate = ref(1514761200) // 2018-01-01
+        const endDate = ref(1704063599) // 2023-12-31
+        const temporalResolution = ref("Monthly") // options: "Daily", "Monthly"
+        const aggregation = ref("Mean") // options: "Mean", "Median", "Max", "Min"
+
+        const fetchTemperatureData = async () => {
+          const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index'
+          const params = {
+            weatherVariable: "temperature_2m",
+            startDate: startDate.value,
+            endDate: endDate.value,
+            location: "TEMPELHOFER_FELD",
+            temporalResolution: temporalResolution.value.toUpperCase(),
+            aggregation: aggregation.value.toUpperCase()
+          }
+
+          try {
+            const response = await axios.get(apiUrl, { params })
+            temperatureData.value = response.data
+            renderPlot()
+          } catch (error) {
+            console.error("Error fetching temperature data:", error)
+          }
+        }
+
+        const fetchNdviData = async () => {
+          const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi'
+          const params = {
+            startDate: startDate.value,
+            endDate: endDate.value,
+            location: "TEMPELHOFER_FELD",
+            temporalResolution: temporalResolution.value.toUpperCase(),
+            aggregation: aggregation.value.toUpperCase()
+          }
+
+          try {
+            const response = await axios.get(apiUrl, { params })
+            ndviData.value = response.data
+            renderPlot()
+          } catch (error) {
+            console.error("Error fetching NDVI data:", error)
+          }
+        }
+
+        const calculateRegression = (xValues, yValues) => {
+          const n = xValues.length
+          const sumX = xValues.reduce((acc, val) => acc + val, 0)
+          const sumY = yValues.reduce((acc, val) => acc + val, 0)
+          const sumXY = xValues.reduce((acc, val, index) => acc + val * yValues[index], 0)
+          const sumX2 = xValues.reduce((acc, val) => acc + val * val, 0)
+
+          const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX)
+          const intercept = (sumY - slope * sumX) / n
+
+          return { slope, intercept }
+        }
+
+        const renderPlot = () => {
+          if (temperatureData.value && ndviData.value) {
+            const tempValues = temperatureData.value.data.map(entry => entry.value)
+            const ndviValues = ndviData.value.data.map(entry => entry.value)
+
+            const { slope, intercept } = calculateRegression(tempValues, ndviValues)
+            const trendLineValues = tempValues.map(x => slope * x + intercept)
+            const trendlineEquation = `y = ${slope.toFixed(2)}x + ${intercept.toFixed(2)}`;
+
+            const scatterTrace = {
+              x: tempValues,
+              y: ndviValues,
+              mode: 'markers',
+              marker: { color: 'green' },
+              type: 'scatter',
+              name: 'Temperature vs NDVI'
+            }
+
+            const trendLineTrace = {
+              x: tempValues,
+              y: trendLineValues,
+              mode: 'lines',
+              line: { color: 'grey', dash: 'dash' },
+              type: 'scatter',
+              name: `Trend Line: ${trendlineEquation}`
+            }
+
+            const layout = {
+              title: 'Scatter Plot of Temperature vs. NDVI',
+              xaxis: { title: 'Temperature (°C)' },
+              yaxis: { title: 'NDVI' },
+              template: 'plotly_white',
+              legend: { x: 1.02, y: 0.5 },
+            }
+
+            Plotly.newPlot('plotlyScatterTemperatureNdvi', [scatterTrace, trendLineTrace], layout)
+          }
+        }
+
+        onMounted(() => {
+          fetchTemperatureData()
+          fetchNdviData()
+        })
+      }
+    }
+    </script>
+
+    <style scoped></style>
+

frontend/src/components/MainSection.vue

@@ -1,5 +1,7 @@
 <template>
   <v-container class="main-section" fluid>
+    <TemperatureNdviBarAndLine />
+    <TemperatureNdviScatter />
     <Images />
     <NdviComparisonGraph />
     <NdviSelectMonthGraph />
@@ -22,6 +24,8 @@ import MeanSoilTempGraph from "./WeatherGraphs/SoilTempGraph.vue"
 import MeanSoilMoistureGraph from "./WeatherGraphs/SoilMoistureGraph.vue"
 import AugustMeanSoilTempGraph from "./WeatherGraphs/AugustSoilTempGraph.vue"
 import SelectMonthMeanSoilTempGraph from "./WeatherGraphs/SelectMonthSoilTempGraph.vue"
+import TemperatureNdviBarAndLine from "./CorrelationGraphs/TemperatureNdviBarAndLine.vue"
+import TemperatureNdviScatter from "./CorrelationGraphs/TemperatureNdviScatter.vue"
 
 export default {
   name: 'MainSection',
@@ -34,7 +38,9 @@ export default {
     MeanSoilTempGraph,
     MeanSoilMoistureGraph,
     AugustMeanSoilTempGraph,
-    SelectMonthMeanSoilTempGraph
+    SelectMonthMeanSoilTempGraph,
+    TemperatureNdviBarAndLine,
+    TemperatureNdviScatter
   }
 }
 </script>

frontend/src/components/NdviGraphs/NdviComparisonGraph.vue

@@ -54,7 +54,7 @@ export default {
     const aggregationOptions = ["Mean", "Median", "Max", "Min"]
 
     const fetchNdviData = async (params) => {
-      const apiUrl = 'http://localhost:8000/index/ndvi'
+      const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi'
       try {
         const response = await axios.get(apiUrl, { params })
         ndviData.value = response.data

frontend/src/components/NdviGraphs/NdviOverlayGraph.vue

@@ -25,7 +25,7 @@
       const years = [2018, 2019, 2020, 2021, 2022, 2023]
 
       const fetchNdviData = async (params) => {
-        const apiUrl = 'http://localhost:8000/index/ndvi'
+        const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi'
         try {
           const response = await axios.get(apiUrl, { params })
           ndviData.value = response.data

frontend/src/components/NdviGraphs/NdviSelectMonthGraph.vue

@@ -42,7 +42,7 @@ export default {
     const endDate = ref(1704063599) // 2023-12-31
 
     const fetchNdviData = async () => {
-      const apiUrl = 'http://localhost:8000/index/ndvi'
+      const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi'
       try {
         const response = await axios.get(apiUrl, { 
           params: { 

frontend/src/components/WeatherGraphs/AugustSoilTempGraph.vue

@@ -20,7 +20,7 @@ export default {
     const plotlyChart = ref(null);
 
     const fetchData = async () => {
-      const apiUrl = 'http://localhost:8000/weather/index';
+      const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index';
 
       const params = {
         weatherVariable: "soil_temperature_0_to_7cm",

frontend/src/components/WeatherGraphs/MedianTempGraph.vue

@@ -36,7 +36,7 @@ export default {
     const plotlyChart = ref(null);
 
     const fetchTemperatureData = async () => {
-      const apiUrl = 'http://localhost:8000/weather/index';
+      const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index';
 
       const params = {
         weatherVariable: "temperature_2m",

frontend/src/components/WeatherGraphs/SelectMonthSoilTempGraph.vue

@@ -41,7 +41,7 @@ export default {
     const plotlyChart = ref(null);
 
     const fetchData = async () => {
-      const apiUrl = 'http://localhost:8000/weather/index';
+      const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index';
 
       const params = {
         weatherVariable: "soil_temperature_0_to_7cm",

frontend/src/components/WeatherGraphs/SoilMoistureGraph.vue

@@ -36,7 +36,7 @@
       const plotlyChart = ref(null);
 
       const fetchData = async () => {
-        const apiUrl = 'http://localhost:8000/weather/index';
+        const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index';
 
         const params = {
           weatherVariable: "soil_temperature_0_to_7cm",

frontend/src/components/WeatherGraphs/SoilTempGraph.vue

@@ -36,7 +36,7 @@
       const plotlyChart = ref(null);
 
       const fetchTemperatureData = async () => {
-        const apiUrl = 'http://localhost:8000/weather/index';
+        const apiUrl = 'https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index';
 
         const params = {
           weatherVariable: "soil_temperature_0_to_7cm",