Api url builder fn, format data for chart.js. [WIP] Make chart work
This commit is contained in:
Pau Figueras
pare
8363fd950a
commit
dcf8babc00
|
|
@ -18,5 +18,10 @@
|
|||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0"
|
||||
},
|
||||
"type": "module"
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"chart.js": "^4.2.0",
|
||||
"layercake": "^7.2.2",
|
||||
"svelte-chartjs": "^3.1.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
104
pnpm-lock.yaml
104
pnpm-lock.yaml
|
|
@ -3,12 +3,20 @@ lockfileVersion: 5.4
|
|||
specifiers:
|
||||
'@sveltejs/adapter-auto': ^1.0.0
|
||||
'@sveltejs/kit': ^1.0.0
|
||||
chart.js: ^4.2.0
|
||||
layercake: ^7.2.2
|
||||
svelte: ^3.54.0
|
||||
svelte-chartjs: ^3.1.2
|
||||
svelte-check: ^3.0.1
|
||||
tslib: ^2.4.1
|
||||
typescript: ^4.9.3
|
||||
vite: ^4.0.0
|
||||
|
||||
dependencies:
|
||||
chart.js: 4.2.0
|
||||
layercake: 7.2.2
|
||||
svelte-chartjs: 3.1.2_sb7g7nvzgbbexijgaje6yhompe
|
||||
|
||||
devDependencies:
|
||||
'@sveltejs/adapter-auto': 1.0.2_@sveltejs+kit@1.3.10
|
||||
'@sveltejs/kit': 1.3.10_svelte@3.55.1+vite@4.1.1
|
||||
|
|
@ -234,6 +242,10 @@ packages:
|
|||
'@jridgewell/sourcemap-codec': 1.4.14
|
||||
dev: true
|
||||
|
||||
/@kurkle/color/0.3.2:
|
||||
resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
|
||||
dev: false
|
||||
|
||||
/@nodelib/fs.scandir/2.1.5:
|
||||
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
|
||||
engines: {node: '>= 8'}
|
||||
|
|
@ -380,6 +392,13 @@ packages:
|
|||
engines: {node: '>=6'}
|
||||
dev: true
|
||||
|
||||
/chart.js/4.2.0:
|
||||
resolution: {integrity: sha512-wbtcV+QKeH0F7gQZaCJEIpsNriFheacouJQTVIjITi3eQA8bTlIBoknz0+dgV79aeKLNMAX+nDslIVE/nJ3rzA==}
|
||||
engines: {pnpm: ^7.0.0}
|
||||
dependencies:
|
||||
'@kurkle/color': 0.3.2
|
||||
dev: false
|
||||
|
||||
/chokidar/3.5.3:
|
||||
resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
|
||||
engines: {node: '>= 8.10.0'}
|
||||
|
|
@ -404,6 +423,67 @@ packages:
|
|||
engines: {node: '>= 0.6'}
|
||||
dev: true
|
||||
|
||||
/d3-array/3.2.2:
|
||||
resolution: {integrity: sha512-yEEyEAbDrF8C6Ob2myOBLjwBLck1Z89jMGFee0oPsn95GqjerpaOA4ch+vc2l0FNFFwMD5N7OCSEN5eAlsUbgQ==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
internmap: 2.0.3
|
||||
dev: false
|
||||
|
||||
/d3-color/3.1.0:
|
||||
resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/d3-format/3.1.0:
|
||||
resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/d3-interpolate/3.0.1:
|
||||
resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
d3-color: 3.1.0
|
||||
dev: false
|
||||
|
||||
/d3-path/3.1.0:
|
||||
resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/d3-scale/4.0.2:
|
||||
resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
d3-array: 3.2.2
|
||||
d3-format: 3.1.0
|
||||
d3-interpolate: 3.0.1
|
||||
d3-time: 3.1.0
|
||||
d3-time-format: 4.1.0
|
||||
dev: false
|
||||
|
||||
/d3-shape/3.2.0:
|
||||
resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
d3-path: 3.1.0
|
||||
dev: false
|
||||
|
||||
/d3-time-format/4.1.0:
|
||||
resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
d3-time: 3.1.0
|
||||
dev: false
|
||||
|
||||
/d3-time/3.1.0:
|
||||
resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
d3-array: 3.2.2
|
||||
dev: false
|
||||
|
||||
/debug/4.3.4:
|
||||
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
|
||||
engines: {node: '>=6.0'}
|
||||
|
|
@ -568,6 +648,11 @@ packages:
|
|||
resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
|
||||
dev: true
|
||||
|
||||
/internmap/2.0.3:
|
||||
resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/is-binary-path/2.1.0:
|
||||
resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
|
||||
engines: {node: '>=8'}
|
||||
|
|
@ -603,6 +688,14 @@ packages:
|
|||
engines: {node: '>=6'}
|
||||
dev: true
|
||||
|
||||
/layercake/7.2.2:
|
||||
resolution: {integrity: sha512-8T5XJfJvWto7DdOAxSHRYdKd0F7smloYnOUTrCDnQ2rdRJnQlZZl9dhMU4zdeNtXfkY49Q1LUI6wAbIgduTYdw==}
|
||||
dependencies:
|
||||
d3-array: 3.2.2
|
||||
d3-scale: 4.0.2
|
||||
d3-shape: 3.2.0
|
||||
dev: false
|
||||
|
||||
/magic-string/0.27.0:
|
||||
resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
|
||||
engines: {node: '>=12'}
|
||||
|
|
@ -828,6 +921,16 @@ packages:
|
|||
engines: {node: '>= 0.4'}
|
||||
dev: true
|
||||
|
||||
/svelte-chartjs/3.1.2_sb7g7nvzgbbexijgaje6yhompe:
|
||||
resolution: {integrity: sha512-3+6gY2IJ9Ua8R9pk3iS1ypa7Z9OoXCJb9oPwIfTp7caJM+X+RrWnH2CTkGAq7FeSxc2nnmW08tYN88Q8Y+5M+w==}
|
||||
peerDependencies:
|
||||
chart.js: ^3.5.0 || ^4.0.0
|
||||
svelte: ^3.45.0
|
||||
dependencies:
|
||||
chart.js: 4.2.0
|
||||
svelte: 3.55.1
|
||||
dev: false
|
||||
|
||||
/svelte-check/3.0.3_svelte@3.55.1:
|
||||
resolution: {integrity: sha512-ByBFXo3bfHRGIsYEasHkdMhLkNleVfszX/Ns1oip58tPJlKdo5Ssr8kgVIuo5oq00hss8AIcdesuy0Xt0BcTvg==}
|
||||
hasBin: true
|
||||
|
|
@ -915,7 +1018,6 @@ packages:
|
|||
/svelte/3.55.1:
|
||||
resolution: {integrity: sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==}
|
||||
engines: {node: '>= 8'}
|
||||
dev: true
|
||||
|
||||
/tiny-glob/0.2.9:
|
||||
resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
|
||||
|
|
|
|||
8
src/components/graph.svelte
Normal file
8
src/components/graph.svelte
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { Line } from 'svelte-chartjs'
|
||||
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale } from 'chart.js';
|
||||
|
||||
ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);
|
||||
export let graphData: object = [];
|
||||
</script>
|
||||
<Line data={graphData} options={{ responsive: true }}></Line>
|
||||
|
|
@ -4,12 +4,37 @@ let location: string = "L'Hospitalet de Llobregat";
|
|||
let previousLocation: string = '';
|
||||
|
||||
export function load(): object {
|
||||
let ubicacio: Promise<string> = getFromOpenMeteo(location).then( (res) => res.results[0].name );
|
||||
let temps: Promise<any> = getFromOpenMeteo(location)
|
||||
.then( (res) => {
|
||||
return { latitude: res.results[0].latitude, longitude: res.results[0].longitude };
|
||||
})
|
||||
.then( (latlon) => {
|
||||
return getWeatherFromOpenMeteo(latlon.latitude, latlon.longitude);
|
||||
// return [ latlon.longitude, latlon.latitude ];
|
||||
})
|
||||
.then( (res) => {
|
||||
let forecastData: object = res.hourly;
|
||||
let fmtForecastData: { labels: string[], datasets: Array<object> } = { labels: forecastData.time, datasets: [] };
|
||||
let noTimeForecastData: object = Object.fromEntries(Object.entries(forecastData).filter( ([k]) => k !== 'time' ));
|
||||
for (const label in noTimeForecastData) {
|
||||
if (noTimeForecastData.hasOwnProperty(label)) {
|
||||
const data = noTimeForecastData[label];
|
||||
fmtForecastData.datasets.push({label, data})
|
||||
}
|
||||
}
|
||||
return fmtForecastData;
|
||||
} )
|
||||
|
||||
return { ubicacio, temps }
|
||||
/**
|
||||
let openMeteoData = getFromOpenMeteo(location);
|
||||
let latitude: Promise<number> = openMeteoData.then((data) => data.results[0].latitude).catch((_e) => 41.35967);
|
||||
let longitude: Promise<number> = openMeteoData.then((data) => data.results[0].longitude).catch((_e) => 2.10028 );
|
||||
let openMeteoWeather = getWeatherFromOpenMeteo(latitude, longitude);
|
||||
let openMeteoFetchUrl: string = openMeteoApiBase + '?latitude=' + latitude + '&logitude=' + longitude;
|
||||
return { location: openMeteoData.then( (data) => data.results[0].name ).catch( (_e) => previousLocation ), weatherData: openMeteoWeather, latitude, longitude, openMeteoFetchUrl }
|
||||
*/
|
||||
};
|
||||
|
||||
function changeLocation(newLoc: string): void {
|
||||
|
|
@ -17,6 +42,13 @@ function changeLocation(newLoc: string): void {
|
|||
location = newLoc;
|
||||
}
|
||||
|
||||
function apiUrlBuilder(apiBaseUrl: string, vars: Array<[string, string | number]>): string {
|
||||
let jointVars: string[] = [];
|
||||
vars.forEach( (val) => jointVars.push(`${val[0]}=${val[1]}`) );
|
||||
let jointParams: string = jointVars.join('&');
|
||||
return `${apiBaseUrl}?${jointParams}`;
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
changeLoc: async ({ request }) => {
|
||||
const data: FormData = await request.formData();
|
||||
|
|
@ -30,6 +62,7 @@ async function getFromOpenMeteo(ubicacio: string): Promise<any> {
|
|||
}
|
||||
|
||||
async function getWeatherFromOpenMeteo(latitude: any, longitude: any) {
|
||||
let openMeteoResponse: Response = await fetch(openMeteoApiBase + '?latitude=' + latitude.toString() + '&logitude=' + longitude.toString());
|
||||
// let openMeteoResponse: Response = await fetch(openMeteoApiBase + '?latitude=' + latitude + '&longitude=' + longitude);
|
||||
let openMeteoResponse: Response = await fetch(apiUrlBuilder(openMeteoApiBase, [['latitude', latitude], ['longitude', longitude], ['hourly', 'temperature_2m,rain,showers,snowfall']]));
|
||||
return openMeteoResponse.json()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { enhance } from "$app/forms";
|
||||
import Graph from "../../components/graph.svelte";
|
||||
|
||||
let display: string = 'none';
|
||||
let loading: boolean = false;
|
||||
|
|
@ -17,8 +18,10 @@
|
|||
<button type="submit" disabled={loading}>Canviar</button>
|
||||
</form>
|
||||
</div>
|
||||
<h2>Ubicació actual: { data.ubicacio }</h2>
|
||||
<button type="button" on:click={toggleDisplay}>Canviar ubicació</button>
|
||||
<pre>{ JSON.stringify(data) }</pre>
|
||||
<!-- <pre>{ JSON.stringify(data) }</pre> -->
|
||||
<Graph graphData={data.temps} />
|
||||
<footer>
|
||||
<p>Dades provinents de:</p>
|
||||
<ul>
|
||||
|
|
|
|||
Loading…
Referencia en una nova incidència