Skip to content

Commit 0d38c4f

Browse files
wheropwherop
authored
Merge branch 'main' into data-start-date
2 parents fb70725 + d30058b commit 0d38c4f

File tree

11 files changed

+985
-171
lines changed

11 files changed

+985
-171
lines changed

‎frontend/src/App.vue‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,39 @@
11
<template>
22
<h1 id="app">
3-
<TestComponent />
3+
<NdviComparisonGraph />
4+
<NdviSelectMonthGraph />
5+
<NdviOverlayGraph />
46
<MedianTempGraph />
7+
<MeanSoilTempGraph />
8+
<MeanSoilMoistureGraph />
9+
<AugustMeanSoilTempGraph />
10+
<SelectMonthMeanSoilTempGraph />
511
</h1>
612
</template>
713

814
<script>
9-
import TestComponent from "./components/TestComponent.vue"
10-
// import MedianTempGraph from "./components/TestGraphOne.vue"
15+
import NdviComparisonGraph from "./components/NdviGraphs/NdviComparisonGraph.vue"
16+
import NdviSelectMonthGraph from "./components/NdviGraphs/NdviSelectMonthGraph.vue"
17+
import NdviOverlayGraph from "./components/NdviGraphs/NdviOverlayGraph.vue"
18+
import MedianTempGraph from "./components/MedianTempGraph.vue"
19+
import MeanSoilTempGraph from "./components/SoilTempGraph.vue"
20+
import MeanSoilMoistureGraph from "./components/SoilMoistureGraph.vue"
21+
import AugustMeanSoilTempGraph from "./components/AugustSoilTempGraph.vue"
22+
import SelectMonthMeanSoilTempGraph from "./components/SelectMonthSoilTempGraph.vue"
1123
1224
export default {
1325
name: 'App',
1426
components: {
15-
TestComponent,
16-
// MedianTempGraph
27+
NdviComparisonGraph,
28+
NdviSelectMonthGraph,
29+
NdviOverlayGraph,
30+
MedianTempGraph,
31+
MeanSoilTempGraph,
32+
MeanSoilMoistureGraph,
33+
AugustMeanSoilTempGraph,
34+
SelectMonthMeanSoilTempGraph
1735
}
18-
};
36+
}
1937
</script>
2038

2139
<style scoped></style>

‎frontend/src/components/AugustSoilTempGraph.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<div>
3+
<h2>Mean Soil Temperature in August</h2>
4+
5+
<!-- Plotly Chart -->
6+
<div ref="plotlyChart" style="width: 100%; height: 400px;"></div>
7+
</div>
8+
</template>
9+
10+
<script>
11+
import { ref, onMounted } from 'vue';
12+
import axios from 'axios';
13+
import Plotly from 'plotly.js-dist-min';
14+
15+
export default {
16+
name: 'MeanSoilTempGraph',
17+
setup() {
18+
const weatherData = ref(null);
19+
const plotData = ref([]);
20+
const plotlyChart = ref(null);
21+
22+
const fetchData = async () => {
23+
const apiUrl = 'http://localhost:8000/weather/index';
24+
25+
const params = {
26+
weatherVariable: "soil_temperature_0_to_7cm",
27+
startDate: new Date('2015-01-01').getTime() / 1000, // Fixed start date
28+
endDate: new Date('2023-12-31').getTime() / 1000, // Fixed end date
29+
location: "TEMPELHOFER_FELD",
30+
temporalResolution: "MONTHLY",
31+
aggregation: "MEAN",
32+
};
33+
34+
try {
35+
const response = await axios.get(apiUrl, { params });
36+
weatherData.value = response.data;
37+
processData(response.data);
38+
renderPlot();
39+
} catch (error) {
40+
console.error("Error fetching temperature data:", error);
41+
}
42+
};
43+
44+
const processData = (apiResponse) => {
45+
if (!apiResponse.data || !Array.isArray(apiResponse.data)) {
46+
console.log('Unexpected data format:', apiResponse);
47+
return;
48+
}
49+
50+
// Filter for August data (month is 7 since JavaScript months are 0-indexed)
51+
const augustData = apiResponse.data.filter(entry => {
52+
const date = new Date(entry.timestamp * 1000);
53+
return date.getMonth() === 7; // August is month 7
54+
});
55+
56+
// Extract years and temperatures for filtered data
57+
const years = augustData.map(entry =>
58+
new Date(entry.timestamp * 1000).getFullYear().toString()
59+
);
60+
const temperatures = augustData.map(entry => entry.value);
61+
62+
// Update plot data
63+
plotData.value = [
64+
{
65+
x: years,
66+
y: temperatures,
67+
type: 'bar',
68+
name: 'August Soil Temperature',
69+
marker: { color: 'darkgreen' }
70+
}
71+
];
72+
};
73+
74+
const renderPlot = () => {
75+
const layout = {
76+
title: 'Mean Soil Temperature for Tempelhofer Feld (2015 - 2023)',
77+
xaxis: { title: 'Year', type: 'category' },
78+
yaxis: { title: 'Temperature (°C)' },
79+
template: 'plotly_white'
80+
};
81+
82+
Plotly.newPlot(plotlyChart.value, plotData.value, layout);
83+
};
84+
85+
onMounted(() => {
86+
fetchData();
87+
});
88+
89+
return {
90+
weatherData,
91+
plotlyChart
92+
};
93+
}
94+
};
95+
</script>
96+
97+
<style scoped>
98+
h2 {
99+
text-align: center;
100+
margin-bottom: 10px;
101+
}
102+
</style>

‎frontend/src/components/MedianTempGraph.vue‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<template>
2+
<div>
3+
<h2>Median Monthly Temperature</h2>
4+
5+
<!-- Date Range Input Fields -->
6+
<div class="date-picker">
7+
<label>
8+
Start Date:
9+
<input type="date" v-model="startDate" @change="updateDateRange" />
10+
</label>
11+
<label>
12+
End Date:
13+
<input type="date" v-model="endDate" @change="updateDateRange" />
14+
</label>
15+
</div>
16+
17+
<!-- Plotly Chart -->
18+
<div ref="plotlyChart" style="width: 100%; height: 400px;"></div>
19+
20+
21+
</div>
22+
</template>
23+
24+
<script>
25+
import { ref, onMounted } from 'vue';
26+
import axios from 'axios';
27+
import Plotly from 'plotly.js-dist-min';
28+
29+
export default {
30+
name: 'MedianTempGraph',
31+
setup() {
32+
const temperatureData = ref(null);
33+
const startDate = ref('2015-01-01');
34+
const endDate = ref('2023-12-31');
35+
const plotData = ref([]);
36+
const plotlyChart = ref(null);
37+
38+
const fetchTemperatureData = async () => {
39+
const apiUrl = 'http://localhost:8000/weather/index';
40+
41+
const params = {
42+
weatherVariable: "temperature_2m",
43+
startDate: new Date(startDate.value).getTime() / 1000,
44+
endDate: new Date(endDate.value).getTime() / 1000,
45+
location: "TEMPELHOFER_FELD",
46+
temporalResolution: "MONTHLY",
47+
aggregation: "MEDIAN",
48+
};
49+
50+
try {
51+
const response = await axios.get(apiUrl, { params });
52+
temperatureData.value = response.data;
53+
processData(response.data);
54+
renderPlot();
55+
} catch (error) {
56+
console.error("Error fetching temperature data:", error);
57+
}
58+
};
59+
60+
const processData = (apiResponse) => {
61+
if (!apiResponse.data || !Array.isArray(apiResponse.data)) {
62+
console.log('Unexpected data format:', apiResponse);
63+
return;
64+
}
65+
66+
const dates = apiResponse.data.map(entry =>
67+
new Date(entry.timestamp * 1000).toISOString().split('T')[0]
68+
);
69+
const temperatures = apiResponse.data.map(entry => entry.value);
70+
71+
plotData.value = [
72+
{
73+
x: dates,
74+
y: temperatures,
75+
mode: 'lines',
76+
name: 'Temperature',
77+
line: { color: '#FF4136' }
78+
}
79+
];
80+
};
81+
82+
const renderPlot = () => {
83+
const layout = {
84+
title: 'Median Monthly Temperature for Tempelhofer Feld (2015 - 2023)',
85+
xaxis: { title: '', type: 'date', rangeslider: { visible: true } },
86+
yaxis: { title: 'Temperature (°C)' },
87+
template: 'plotly_white'
88+
};
89+
90+
Plotly.newPlot(plotlyChart.value, plotData.value, layout);
91+
};
92+
93+
const updateDateRange = () => {
94+
if (startDate.value && endDate.value) {
95+
fetchTemperatureData();
96+
}
97+
};
98+
99+
onMounted(() => {
100+
fetchTemperatureData();
101+
});
102+
103+
return {
104+
temperatureData,
105+
startDate,
106+
endDate,
107+
updateDateRange,
108+
plotlyChart
109+
};
110+
}
111+
};
112+
</script>
113+
114+
<style scoped>
115+
h2 {
116+
text-align: center;
117+
margin-bottom: 10px;
118+
}
119+
.date-picker {
120+
display: flex;
121+
justify-content: center;
122+
gap: 10px;
123+
margin-bottom: 20px;
124+
}
125+
126+
</style>

0 commit comments

Comments
 (0)