diff --git a/package.json b/package.json index da907f3..ad54f96 100644 --- a/package.json +++ b/package.json @@ -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" + } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 09d20e3..45f82bb 100644 --- a/pnpm-lock.yaml +++ b/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==} diff --git a/src/components/graph.svelte b/src/components/graph.svelte new file mode 100644 index 0000000..d3c7d72 --- /dev/null +++ b/src/components/graph.svelte @@ -0,0 +1,8 @@ + + diff --git a/src/routes/openmeteo/+page.server.ts b/src/routes/openmeteo/+page.server.ts index c2c2326..27fd9ce 100644 --- a/src/routes/openmeteo/+page.server.ts +++ b/src/routes/openmeteo/+page.server.ts @@ -4,12 +4,37 @@ let location: string = "L'Hospitalet de Llobregat"; let previousLocation: string = ''; export function load(): object { + let ubicacio: Promise = getFromOpenMeteo(location).then( (res) => res.results[0].name ); + let temps: Promise = 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 } = { 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 = openMeteoData.then((data) => data.results[0].latitude).catch((_e) => 41.35967); let longitude: Promise = 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 { } 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() } diff --git a/src/routes/openmeteo/+page.svelte b/src/routes/openmeteo/+page.svelte index d27e089..98223ca 100644 --- a/src/routes/openmeteo/+page.svelte +++ b/src/routes/openmeteo/+page.svelte @@ -1,5 +1,6 @@