Skip to content

Commit 9047c13

Browse files
digi-julesdigi-jules
committed
Run prettier
1 parent 45c052b commit 9047c13

File tree

9 files changed

+189
-170
lines changed

9 files changed

+189
-170
lines changed

‎frontend/src/components/CorrelationGraphs/YearlyTemperatureNdviCorrelation.vue‎

Lines changed: 53 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,26 @@
1111
</template>
1212

1313
<script>
14-
import axios from "axios";
15-
import Plotly from "plotly.js-dist-min";
16-
import { onMounted, ref, watch } from "vue";
14+
import axios from "axios"
15+
import Plotly from "plotly.js-dist-min"
16+
import { onMounted, ref, watch } from "vue"
1717
1818
export default {
1919
name: "YearlyNdviTemperaturePlot",
2020
setup() {
2121
// Constants for location and data configuration
22-
const location = ref("TEMPELHOFER_FELD");
23-
const temporalResolution = ref("MONTHLY");
24-
const aggregation = ref("MEAN");
25-
const startDate = ref(1514764800); // 2018-01-01 as Unix timestamp
26-
const endDate = ref(1733007599); // 2024-11-30 as Unix timestamp
27-
const temperatureData = ref(null);
28-
const ndviData = ref(null);
29-
const plotContainer = ref(null); // Reference to the container for the Plotly chart
22+
const location = ref("TEMPELHOFER_FELD")
23+
const temporalResolution = ref("MONTHLY")
24+
const aggregation = ref("MEAN")
25+
const startDate = ref(1514764800) // 2018-01-01 as Unix timestamp
26+
const endDate = ref(1733007599) // 2024-11-30 as Unix timestamp
27+
const temperatureData = ref(null)
28+
const ndviData = ref(null)
29+
const plotContainer = ref(null) // Reference to the container for the Plotly chart
3030
3131
const fetchTemperatureData = async () => {
32-
const apiUrl = "https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index";
32+
const apiUrl =
33+
"https://thf-climate-run-1020174331409.europe-west3.run.app/weather/index"
3334
3435
// Query parameters for the temperature API
3536
const params = {
@@ -39,19 +40,19 @@ export default {
3940
location: location.value,
4041
temporalResolution: temporalResolution.value,
4142
aggregation: aggregation.value,
42-
};
43+
}
4344
4445
try {
45-
const response = await axios.get(apiUrl, { params });
46-
temperatureData.value = response.data; // Store the response in a reactive variable
46+
const response = await axios.get(apiUrl, { params })
47+
temperatureData.value = response.data // Store the response in a reactive variable
4748
} catch (error) {
48-
console.error("Error fetching temperature data:", error);
49+
console.error("Error fetching temperature data:", error)
4950
}
50-
};
51+
}
5152
52-
5353
const fetchNdviData = async () => {
54-
const apiUrl = "https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi";
54+
const apiUrl =
55+
"https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi"
5556
5657
// Query parameters for the NDVI API
5758
const params = {
@@ -60,100 +61,97 @@ export default {
6061
location: location.value,
6162
temporalResolution: temporalResolution.value,
6263
aggregation: aggregation.value,
63-
};
64+
}
6465
6566
try {
66-
const response = await axios.get(apiUrl, { params });
67-
ndviData.value = response.data; // Store the response in a reactive variable
67+
const response = await axios.get(apiUrl, { params })
68+
ndviData.value = response.data // Store the response in a reactive variable
6869
} catch (error) {
69-
console.error("Error fetching NDVI data:", error);
70+
console.error("Error fetching NDVI data:", error)
7071
}
71-
};
72+
}
7273
73-
74-
// Calculates yearly averages from time-series data.
74+
// Calculates yearly averages from time-series data.
7575
const calculateYearlyAverages = (data) => {
76-
const yearlyData = {};
76+
const yearlyData = {}
7777
7878
// Group data by year, summing values and counting occurrences
7979
data.forEach(({ timestamp, value }) => {
80-
const year = new Date(timestamp * 1000).getFullYear(); // Convert Unix timestamp to year
81-
if (!yearlyData[year]) yearlyData[year] = { sum: 0, count: 0 };
82-
yearlyData[year].sum += value;
83-
yearlyData[year].count += 1;
84-
});
80+
const year = new Date(timestamp * 1000).getFullYear() // Convert Unix timestamp to year
81+
if (!yearlyData[year]) yearlyData[year] = { sum: 0, count: 0 }
82+
yearlyData[year].sum += value
83+
yearlyData[year].count += 1
84+
})
8585
8686
// Calculate average for each year and return as an array
8787
return Object.entries(yearlyData).map(([year, { sum, count }]) => ({
8888
year: parseInt(year, 10),
8989
average: sum / count,
90-
}));
91-
};
90+
}))
91+
}
9292
93-
9493
const renderPlot = () => {
9594
if (temperatureData.value?.data && ndviData.value?.data) {
9695
// Calculate yearly averages for temperature and NDVI
9796
const yearlyTemperature = calculateYearlyAverages(
98-
temperatureData.value.data
99-
);
100-
const yearlyNdvi = calculateYearlyAverages(ndviData.value.data);
97+
temperatureData.value.data,
98+
)
99+
const yearlyNdvi = calculateYearlyAverages(ndviData.value.data)
101100
102101
// Define trace for temperature data
103102
const tempTrace = {
104-
x: yearlyTemperature.map((e) => e.year),
105-
y: yearlyTemperature.map((e) => e.average),
103+
x: yearlyTemperature.map((e) => e.year),
104+
y: yearlyTemperature.map((e) => e.average),
106105
mode: "lines+markers",
107106
name: "Temperature (°C)",
108107
marker: { color: "red", size: 7, symbol: "square" },
109108
hoverinfo: "text",
110109
text: yearlyTemperature.map((e) => `${e.average.toFixed(2)}°C`),
111-
};
110+
}
112111
113112
// Define trace for NDVI data
114113
const ndviTrace = {
115-
x: yearlyNdvi.map((e) => e.year),
114+
x: yearlyNdvi.map((e) => e.year),
116115
y: yearlyNdvi.map((e) => e.average),
117116
mode: "lines+markers",
118117
name: "NDVI",
119118
line: { color: "blue" },
120119
yaxis: "y2", // Use secondary y-axis for NDVI values
121120
hoverinfo: "text",
122121
text: yearlyNdvi.map((e) => `${e.average.toFixed(2)}`),
123-
};
122+
}
124123
125124
// Layout configuration for the dual y-axis plot
126125
const layout = {
127126
title: "Yearly NDVI vs. Temperature (2018-2024)",
128127
xaxis: { title: "Year", type: "category" },
129128
yaxis: { title: "Temperature (°C)" },
130129
yaxis2: { title: "NDVI", overlaying: "y", side: "right" },
131-
template: "plotly_white",
132-
};
130+
template: "plotly_white",
131+
}
133132
134133
// Render the chart using Plotly
135-
Plotly.newPlot(plotContainer.value, [tempTrace, ndviTrace], layout);
134+
Plotly.newPlot(plotContainer.value, [tempTrace, ndviTrace], layout)
136135
}
137-
};
136+
}
138137
139138
// Fetch data when the component is mounted
140139
onMounted(() => {
141-
fetchTemperatureData();
142-
fetchNdviData();
143-
});
140+
fetchTemperatureData()
141+
fetchNdviData()
142+
})
144143
145144
// Watch for updates to temperatureData and ndviData, and render the chart
146145
watch([temperatureData, ndviData], ([temp, ndvi]) => {
147-
if (temp && ndvi) renderPlot();
148-
});
146+
if (temp && ndvi) renderPlot()
147+
})
149148
150-
return { plotContainer }; // Return the reference to the plot container
149+
return { plotContainer } // Return the reference to the plot container
151150
},
152-
};
151+
}
153152
</script>
154153
155154
<style scoped>
156-
157155
.plot-container {
158156
width: 100%;
159157
height: 400px;

‎frontend/src/components/IntroSection.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,16 +112,16 @@ export default {
112112
)
113113
114114
const temperatureSection = document.getElementById("temperature-section")
115-
if (temperatureSection) {
116-
observer.observe(temperatureSection)
117-
}
115+
if (temperatureSection) {
116+
observer.observe(temperatureSection)
117+
}
118118
})
119119
120120
return {
121121
isNavigationOpen,
122122
toggleNavigation,
123123
}
124-
}
124+
},
125125
}
126126
</script>
127127

‎frontend/src/components/MainSection.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -288,11 +288,12 @@ export default {
288288
const startTimestamp = ref(1514761200) // 2018-01-01
289289
const endTimestamp = ref(1733007599) // 2024-11-30
290290
const location = ref("TEMPELHOFER_FELD")
291-
291+
292292
const activeSection = ref(null)
293293
const isExpanded = ref(false)
294294
295-
const apiUrl = "https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi"
295+
const apiUrl =
296+
"https://thf-climate-run-1020174331409.europe-west3.run.app/index/ndvi"
296297
297298
const fetchNdviData = async () => {
298299
try {
@@ -324,10 +325,10 @@ export default {
324325
}
325326
})
326327
},
327-
{ threshold: 0.5 }
328+
{ threshold: 0.5 },
328329
)
329330
330-
const sections = document.querySelectorAll('.section')
331+
const sections = document.querySelectorAll(".section")
331332
sections.forEach((section) => observer.observe(section))
332333
}
333334

‎frontend/src/components/NdviGraphs/NdviOverlayGraph.vue‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,14 @@ export default {
2525
2626
const getFilteredDataByYear = (data, year) => {
2727
return data.filter(
28-
(d) => new Date(d.timestamp * 1000).getFullYear() === year
28+
(d) => new Date(d.timestamp * 1000).getFullYear() === year,
2929
)
3030
}
3131
3232
const getMonthsAndValues = (filteredData) => {
33-
const months = filteredData.map((d) => new Date(d.timestamp * 1000).getMonth() + 1)
33+
const months = filteredData.map(
34+
(d) => new Date(d.timestamp * 1000).getMonth() + 1,
35+
)
3436
const values = filteredData.map((d) => d.value)
3537
return { months, values }
3638
}
@@ -58,8 +60,18 @@ export default {
5860
tickmode: "array",
5961
tickvals: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
6062
ticktext: [
61-
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
62-
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
63+
"Jan",
64+
"Feb",
65+
"Mar",
66+
"Apr",
67+
"May",
68+
"Jun",
69+
"Jul",
70+
"Aug",
71+
"Sep",
72+
"Oct",
73+
"Nov",
74+
"Dec",
6375
],
6476
},
6577
yaxis: { title: "NDVI Value" },
@@ -69,7 +81,6 @@ export default {
6981
}
7082
}
7183
72-
7384
watch(() => props.ndviData, renderPlot)
7485
7586
return {

‎frontend/src/components/NdviGraphs/NdviSelectMonthGraph.vue‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -49,49 +49,51 @@ export default {
4949
"December",
5050
]
5151
52-
const getFilteredDataByMonth = (data, monthValue) => {
53-
const monthIndex = monthOptions.indexOf(monthValue) + 1
54-
return data.filter(
55-
(d) => new Date(d.timestamp * 1000).getMonth() + 1 === monthIndex
56-
)
57-
}
58-
59-
const getYearsAndValues = (filteredData) => {
60-
const years = filteredData.map((d) =>
61-
new Date(d.timestamp * 1000).getFullYear()
62-
)
63-
const values = filteredData.map((d) => d.value)
64-
return { years, values }
65-
}
66-
67-
const renderPlot = () => {
68-
if (props.ndviData && props.ndviData.data) {
69-
const filteredData = getFilteredDataByMonth(props.ndviData.data, month.value)
70-
const { years, values } = getYearsAndValues(filteredData)
71-
72-
const trace = {
73-
x: years,
74-
y: values,
75-
mode: "lines+markers",
76-
type: "bar",
77-
name: "",
78-
marker: { color: "green" },
52+
const getFilteredDataByMonth = (data, monthValue) => {
53+
const monthIndex = monthOptions.indexOf(monthValue) + 1
54+
return data.filter(
55+
(d) => new Date(d.timestamp * 1000).getMonth() + 1 === monthIndex,
56+
)
7957
}
8058
81-
const layout = {
82-
title: `NDVI in ${month.value}`,
83-
xaxis: { title: "" },
84-
yaxis: { title: "NDVI Value" },
59+
const getYearsAndValues = (filteredData) => {
60+
const years = filteredData.map((d) =>
61+
new Date(d.timestamp * 1000).getFullYear(),
62+
)
63+
const values = filteredData.map((d) => d.value)
64+
return { years, values }
8565
}
8666
87-
Plotly.newPlot("plotlyGraphNdviMonthly", [trace], layout)
88-
}
89-
}
67+
const renderPlot = () => {
68+
if (props.ndviData && props.ndviData.data) {
69+
const filteredData = getFilteredDataByMonth(
70+
props.ndviData.data,
71+
month.value,
72+
)
73+
const { years, values } = getYearsAndValues(filteredData)
74+
75+
const trace = {
76+
x: years,
77+
y: values,
78+
mode: "lines+markers",
79+
type: "bar",
80+
name: "",
81+
marker: { color: "green" },
82+
}
9083
84+
const layout = {
85+
title: `NDVI in ${month.value}`,
86+
xaxis: { title: "" },
87+
yaxis: { title: "NDVI Value" },
88+
}
89+
90+
Plotly.newPlot("plotlyGraphNdviMonthly", [trace], layout)
91+
}
92+
}
9193
9294
watch(month, renderPlot)
9395
watch(() => props.ndviData, renderPlot)
94-
96+
9597
return {
9698
monthOptions,
9799
month,

0 commit comments

Comments
 (0)