-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
fbcbeff
commit cb9cb89
Showing
2 changed files
with
176 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
<svelte:head> | ||
<script src="https://code.highcharts.com/highcharts.js"></script> | ||
</svelte:head> | ||
<script> | ||
import axios from 'axios'; | ||
import { onMount } from 'svelte'; | ||
import { Container, Button, Input} from '@sveltestrap/sveltestrap'; | ||
let targetCurrency; | ||
async function fetchMetalData() { | ||
const options = { | ||
method: 'GET', | ||
url: `https://live-metal-prices.p.rapidapi.com/v1/latest/XAU,XAG,PA,PL,GBP,USD,EUR/${targetCurrency}/gram`, | ||
headers: { | ||
'X-RapidAPI-Key': '88a523cd96msh3544e0ee37800ebp1845b1jsnf31a7971dadb', | ||
'X-RapidAPI-Host': 'live-metal-prices.p.rapidapi.com' | ||
} | ||
}; | ||
try { | ||
const response = await axios.request(options); | ||
console.log(response.data); | ||
createChart(response.data.rates); | ||
console.log(response.data.rates); | ||
} catch (error) { | ||
console.error(error); | ||
} | ||
} | ||
async function createChart(metalData) { | ||
const currencies = Object.keys(metalData); // Obtener las claves del objeto | ||
console.log(currencies); | ||
const seriesData = currencies.map(currency => { | ||
return { | ||
name: currency, | ||
data: [metalData[currency]] // Obtener el precio asociado a la moneda | ||
}; | ||
}); | ||
const chartOptions = { | ||
chart: { | ||
type: 'column' | ||
}, | ||
title: { | ||
text: `Precios de metales en ${targetCurrency}` | ||
}, | ||
xAxis: { | ||
title: { | ||
text: `Monedas/Metales` | ||
} | ||
}, | ||
yAxis: { | ||
title: { | ||
text: `Precio (en ${targetCurrency})` | ||
} | ||
}, | ||
series: seriesData | ||
}; | ||
Highcharts.chart('metal-chart', chartOptions); // Crear gráfica en el contenedor 'metal-chart' | ||
} | ||
</script> | ||
|
||
<Container> | ||
<h2>Precios de metales</h2> | ||
<Input type="text" bind:value={targetCurrency} placeholder="USD/EUR/GBP" /> | ||
<Button on:click={fetchMetalData}>Buscar</Button> | ||
<div id="metal-chart"></div> | ||
</Container> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
<script> | ||
import axios from 'axios'; | ||
import { Container, Button, Input, ListGroup, ListGroupItem, Row, Col} from '@sveltestrap/sveltestrap'; | ||
let inputSeason; | ||
let inputTeam; | ||
let games = []; | ||
async function fetchNBAGamesData() { | ||
const options = { | ||
method: 'GET', | ||
url: 'https://api-nba-v1.p.rapidapi.com/games', | ||
params: { | ||
season: inputSeason, | ||
team: inputTeam | ||
}, | ||
headers: { | ||
'X-RapidAPI-Key': '88a523cd96msh3544e0ee37800ebp1845b1jsnf31a7971dadb', | ||
'X-RapidAPI-Host': 'api-nba-v1.p.rapidapi.com' | ||
} | ||
}; | ||
try { | ||
const response = await axios.request(options); | ||
console.log(response.data); | ||
games = response.data.response; | ||
console.log(response.data.response); | ||
console.log(games.length); | ||
} catch (error) { | ||
console.error(error); | ||
} | ||
} | ||
function convertirFecha(fecha) { | ||
const fechaObj = new Date(fecha); | ||
const dia = fechaObj.getDate().toString().padStart(2, '0'); | ||
const mes = (fechaObj.getMonth() + 1).toString().padStart(2, '0'); | ||
const año = fechaObj.getFullYear(); | ||
const hora = fechaObj.getHours().toString().padStart(2, '0'); | ||
const minutos = fechaObj.getMinutes().toString().padStart(2, '0'); | ||
return `${dia}-${mes}-${año};${hora}:${minutos}`; | ||
} | ||
</script> | ||
|
||
<style> | ||
.search-container { | ||
border-radius: 20px; | ||
border:solid; | ||
width: 50%; | ||
background-color: #f2f2f2; | ||
padding-left: 20px; | ||
padding-right: 20px; | ||
padding-top: 20px; | ||
margin-top: 40px; | ||
} | ||
.games-container { | ||
overflow-y: auto; | ||
height: 50%; | ||
padding-top: 2px; /* Ajusta el espacio para el buscador fijo */ | ||
} | ||
</style> | ||
<Container style="align-items: center;"> | ||
<div class="search-container" style="width: 50%; margin: auto;"> | ||
<Container class="d-flex flex-column align-items-center"> | ||
<Input class="mb-2" type="text" bind:value={inputSeason} placeholder="Temporada" /> | ||
<Input class="mb-2" type="text" bind:value={inputTeam} placeholder="Equipo" /> | ||
<Button on:click={fetchNBAGamesData}>Buscar</Button> | ||
</Container> | ||
</div> | ||
|
||
<div class="games-container"> | ||
{#if games.length > 0} | ||
<ListGroup> | ||
{#each games as game} | ||
<ListGroupItem class="gameItem"> | ||
<Row > | ||
<Col xs="8" style="justify-content: center;"> | ||
<span><b>{game.teams.home.name} vs {game.teams.visitors.name}</b></span><br> | ||
<span>{game.scores.home.points} - {game.scores.visitors.points}</span> | ||
</Col> | ||
<Col xs="4"> | ||
<span>Fecha: {convertirFecha(game.date.start)}</span><br> | ||
<span>Estadio: {game.arena.name}</span> | ||
</Col> | ||
</Row> | ||
</ListGroupItem> | ||
{/each} | ||
</ListGroup> | ||
{:else} | ||
<p>No se encontraron juegos para la temporada y equipo especificados.</p> | ||
{/if} | ||
</div> | ||
</Container> |