added responsivity, improved error handling, improved styling
parent
83e4dfca72
commit
c24db0def7
|
|
@ -23,20 +23,6 @@ dist-ssr
|
|||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Created by https://www.toptal.com/developers/gitignore/api/linux
|
||||
# Edit at https://www.toptal.com/developers/gitignore?templates=linux
|
||||
|
||||
### Linux ###
|
||||
*~
|
||||
|
||||
# temporary files which can be created if a process still has a handle open of a deleted file
|
||||
.fuse_hidden*
|
||||
|
||||
# KDE directory preferences
|
||||
.directory
|
||||
|
||||
# Linux trash folder which might appear on any partition or disk
|
||||
.Trash-*
|
||||
|
||||
# .nfs files are created when an open file is removed but is still being accessed
|
||||
.nfs*
|
||||
# Ignore environment variables
|
||||
.env
|
||||
.env.*
|
||||
|
|
@ -8,3 +8,9 @@ import Weather from './components/Weather.vue';
|
|||
<Weather />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,21 +4,34 @@ import {
|
|||
onMounted,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
computed
|
||||
computed,
|
||||
nextTick
|
||||
} from 'vue';
|
||||
import axios from 'axios';
|
||||
|
||||
const apiKey = '226ab4dffe77ceefbbd0ba1309ec62b3';
|
||||
const apiKey = import.meta.env.VITE_OPENWEATHER_KEY;
|
||||
const city = ref('Köthen');
|
||||
const numPoints = 12;
|
||||
const forecast = ref(null);
|
||||
const loading = ref(true);
|
||||
const error = ref(null);
|
||||
|
||||
const numPoints = computed(() => {
|
||||
const w = chartWidth.value;
|
||||
if (w < 400) return 5; // Very narrow
|
||||
if (w < 466) return 6;
|
||||
if (w < 533) return 7;
|
||||
if (w < 600) return 8; // Medium narrow
|
||||
if (w < 666) return 9;
|
||||
if (w < 733) return 10;
|
||||
if (w < 800) return 11;
|
||||
return 12; // Default is 12
|
||||
});
|
||||
|
||||
let intervalId;
|
||||
|
||||
const chartHeight = 500; // Height of the graph in pixels
|
||||
const chartWidth = 800; // Width of the graph in pixels
|
||||
const chartWidth = ref(0);
|
||||
const chartHeight = ref(0);
|
||||
const chartContainer = ref(null);
|
||||
|
||||
// cities for dropdown
|
||||
const cities = ['Köthen', 'Magdeburg', 'Halle', 'Leipzig', 'New York'];
|
||||
|
|
@ -42,10 +55,25 @@ const fetchWeather = async () => {
|
|||
onMounted(() => {
|
||||
fetchWeather();
|
||||
|
||||
// Refresh every 60 seconds (60000 ms)
|
||||
// Refresh every 30m
|
||||
intervalId = setInterval(() => {
|
||||
fetchWeather();
|
||||
}, 60000);
|
||||
}, 1800000);
|
||||
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (let entry of entries) {
|
||||
chartWidth.value = entry.contentRect.width;
|
||||
chartHeight.value = entry.contentRect.height;
|
||||
}
|
||||
});
|
||||
|
||||
// Wait for DOM render
|
||||
nextTick(() => {
|
||||
if (chartContainer.value) {
|
||||
resizeObserver.observe(chartContainer.value);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
|
|
@ -60,27 +88,30 @@ watch(city, () => {
|
|||
|
||||
// computed values
|
||||
const minTemp = computed(() => {
|
||||
if (!forecast.value) return null;
|
||||
const temps = forecast.value.list.slice(0, numPoints).map(item => item.main.temp);
|
||||
if (!forecast.value || !Array.isArray(forecast.value.list)) return null;
|
||||
const temps = forecast.value.list.slice(0, numPoints.value).map(item => item.main.temp);
|
||||
|
||||
return Math.min(...temps);
|
||||
});
|
||||
const maxTemp = computed(() => {
|
||||
if (!forecast.value) return null;
|
||||
const temps = forecast.value.list.slice(0, numPoints).map(item => item.main.temp);
|
||||
if (!forecast.value || !Array.isArray(forecast.value.list)) return null;
|
||||
const temps = forecast.value.list.slice(0, numPoints.value).map(item => item.main.temp);
|
||||
|
||||
return Math.max(...temps);
|
||||
});
|
||||
// raw numeric positions
|
||||
|
||||
// raw numeric values
|
||||
const numericValues = computed(() => {
|
||||
if (!forecast.value) return [];
|
||||
const temps = forecast.value.list.slice(0, numPoints).map(item => item.main.temp);
|
||||
if (!forecast.value || !Array.isArray(forecast.value.list)) return [];
|
||||
const temps = forecast.value.list.slice(0, numPoints.value).map(item => item.main.temp);
|
||||
const min = minTemp.value;
|
||||
const max = maxTemp.value;
|
||||
const tempRange = max - min || 1; // Prevent division by zero
|
||||
const spacing = chartWidth / (numPoints - 1); // Horizontal spacing
|
||||
const spacing = chartWidth.value / (numPoints.value - 1); // Horizontal spacing
|
||||
|
||||
return temps.map((temp, index) => {
|
||||
const normalizedTemp = (temp - min) / tempRange; // Normalize between 0 and 1
|
||||
const bottom = normalizedTemp * chartHeight; // Scale to chart height
|
||||
const bottom = normalizedTemp * chartHeight.value; // Scale to chart height
|
||||
const left = index * spacing; // Evenly space points
|
||||
const temperature = temp;
|
||||
|
||||
|
|
@ -88,13 +119,33 @@ const numericValues = computed(() => {
|
|||
});
|
||||
});
|
||||
|
||||
// raw positions to string values with "px"
|
||||
// enriched values needed in the application
|
||||
const applicationValues = computed(() => {
|
||||
return numericValues.value.map(vals => ({
|
||||
bottom: `${vals.bottom}px`,
|
||||
left: `${vals.left}px`,
|
||||
temperature: `<span class="short-temp">${Math.round(vals.temperature)}</span><span class="full-temp">${vals.temperature.toFixed(1)}</span> ºC`
|
||||
}));
|
||||
if (!forecast.value || !Array.isArray(forecast.value.list)) return [];
|
||||
|
||||
let currentDayIndex = 0;
|
||||
let lastHour = null;
|
||||
|
||||
return numericValues.value.map((vals, index) => {
|
||||
const hour = new Date(forecast.value.list[index].dt * 1000).getHours();
|
||||
|
||||
if (lastHour !== null && hour < lastHour) {
|
||||
currentDayIndex++;
|
||||
}
|
||||
lastHour = hour;
|
||||
|
||||
return {
|
||||
bottom: `${vals.bottom}px`,
|
||||
left: `${vals.left}px`,
|
||||
temperature: `
|
||||
<span class="short-temp">${Math.round(vals.temperature)}</span>
|
||||
<span class="full-temp">${vals.temperature.toFixed(1)}</span>
|
||||
ºC
|
||||
`,
|
||||
dayIndex: currentDayIndex,
|
||||
hour
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// line properties (hypotenuse, angle)
|
||||
|
|
@ -112,6 +163,7 @@ const pointLines = computed(() => {
|
|||
angle: `${angleDeg}deg`
|
||||
});
|
||||
}
|
||||
|
||||
return lines;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -132,40 +184,31 @@ const pointLines = computed(() => {
|
|||
<div v-if="loading" class="loading">Loading …</div>
|
||||
<div v-else-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<div v-else>
|
||||
<figure class="forecast-chart">
|
||||
<ul class="forecast-line-chart">
|
||||
<li class="line-chart-element"
|
||||
v-for="(item, index) in forecast.list.slice(0, numPoints)"
|
||||
:key="index"
|
||||
:style="{
|
||||
'--y': applicationValues[index]?.bottom,
|
||||
'--x': applicationValues[index]?.left,
|
||||
'--hypotenuse': index < pointLines.length ? pointLines[index].hypotenuse : '0px',
|
||||
'--angle': index < pointLines.length ? pointLines[index].angle : '0deg'
|
||||
}"
|
||||
>
|
||||
<div class="data-points">
|
||||
<div class="line-segment"></div>
|
||||
<div class="data-point">
|
||||
<div class="data-point-dot"></div>
|
||||
<div class="data-point-temperature" v-html="applicationValues[index]?.temperature"></div>
|
||||
<div>
|
||||
<figure ref="chartContainer" class="forecast-chart">
|
||||
<ul class="forecast-line-chart" v-if="forecast">
|
||||
<li class="line-chart-element"
|
||||
v-for="(item, index) in forecast.list.slice(0, numPoints)"
|
||||
:key="index"
|
||||
:style="{
|
||||
'--y': applicationValues[index]?.bottom,
|
||||
'--x': applicationValues[index]?.left,
|
||||
'--hypotenuse': index < pointLines.length ? pointLines[index].hypotenuse : '0px',
|
||||
'--angle': index < pointLines.length ? pointLines[index].angle : '0deg'
|
||||
}"
|
||||
>
|
||||
<div class="data-points">
|
||||
<div class="line-segment"></div>
|
||||
<div class="data-point">
|
||||
<div class="data-point-dot"></div>
|
||||
<div class="data-point-temperature" v-html="applicationValues[index]?.temperature"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-label">
|
||||
{{ new Date(item.dt * 1000).getHours() }}:00
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</figure>
|
||||
|
||||
<!--
|
||||
<ul class="forecast-list">
|
||||
<li v-for="(item, index) in forecast.list.slice(0, numPoints)" :key="index" class="forecast-item">
|
||||
{{ new Date(item.dt * 1000).toLocaleString("de-DE") }}: {{ item.main.temp }}°C
|
||||
</li>
|
||||
</ul>
|
||||
-->
|
||||
<div class="time-label" :class="'day-'+applicationValues[index]?.dayIndex" v-html="applicationValues[index]?.hour+'h'">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -179,7 +222,7 @@ const pointLines = computed(() => {
|
|||
padding: 2rem;
|
||||
background: #f0f4f8;
|
||||
border-radius: 10px;
|
||||
// max-width: 600px;
|
||||
width: 100%;
|
||||
margin: 2rem auto;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
|
|
@ -242,9 +285,9 @@ const pointLines = computed(() => {
|
|||
.forecast-chart {
|
||||
border-bottom: 1px solid black;
|
||||
border-left: 1px solid black;
|
||||
height: 600px;
|
||||
width: 900px;
|
||||
margin: 0;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
margin: 3rem 0 0 0;
|
||||
padding: 1rem 4rem;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -258,7 +301,6 @@ const pointLines = computed(() => {
|
|||
.line-chart-element {
|
||||
position: absolute;
|
||||
left: var(--x);
|
||||
//bottom: var(--y);
|
||||
transform: translate(-50%, 0);
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
|
|
@ -333,8 +375,17 @@ const pointLines = computed(() => {
|
|||
color: black;
|
||||
position: absolute;
|
||||
bottom: -2.5em;
|
||||
font-weight: bold;
|
||||
left: -1em;
|
||||
left: -0.6em;
|
||||
&.day-0 {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.day-1 {
|
||||
color: grey;
|
||||
}
|
||||
&.day-2 {
|
||||
color: lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue