Created
March 27, 2020 03:38
-
-
Save porfidev/426906afc050435a1d549aa26a034964 to your computer and use it in GitHub Desktop.
Gráfica con Datos del Coronavirus COVID-19 en México - #Javacript #Plotly #API
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
| export const STATUS = { | |
| CONFIRMED: 'confirmed', | |
| DEATHS: 'deaths', | |
| RECOVERED: 'recovered', | |
| }; | |
| class CovidApi { | |
| constructor() { | |
| this.baseUrl = 'https://api.covid19api.com'; | |
| this.country = { | |
| Country: 'Mexico', | |
| Slug: 'mexico' | |
| } | |
| } | |
| doRequest(url){ | |
| const requestOptions = { | |
| method: 'GET', | |
| redirect: 'follow' | |
| }; | |
| return fetch(url, requestOptions) | |
| .then(response => response.json()) | |
| .then(result => result) | |
| .catch(error => console.log('error', error)); | |
| } | |
| requestByStatus(status) { | |
| const requestUrl = `${this.baseUrl}/country/${this.country.Slug}/status/${status}` | |
| return this.doRequest(requestUrl); | |
| } | |
| } | |
| export default CovidApi; |
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
| import CovidApi, { STATUS } from "./covid-api.js"; | |
| export function init() { | |
| const api = new CovidApi(); | |
| const request = Promise.all([ | |
| api.requestByStatus(STATUS.CONFIRMED), | |
| api.requestByStatus(STATUS.DEATHS), | |
| api.requestByStatus(STATUS.RECOVERED) | |
| ]); | |
| request.then(data => { | |
| const [confirmed, deaths, recovered] = data; | |
| const dataConfirmed = createGraphicData(confirmed, 'Confirmados', 'rgb(255,131,16)'); | |
| const dataDeaths = createGraphicData(deaths, 'Fallecidos', 'rgb(191,12,17)'); | |
| const dataRecovered = createGraphicData(recovered, 'Curados', 'rgb(9,200,16)'); | |
| const event = new CustomEvent("dataReady", { | |
| detail: [dataConfirmed, dataDeaths, dataRecovered] | |
| }); | |
| document.dispatchEvent(event); | |
| }); | |
| } | |
| function createGraphicData(cases, name, color) { | |
| const dates = cases.map(registeredCase => registeredCase.Date); | |
| const patients = cases.map(registeredCase => registeredCase.Cases); | |
| return { | |
| x: dates, | |
| y: patients, | |
| name, | |
| type: "scatter", | |
| line: { | |
| color: color, | |
| width: 1 | |
| } | |
| }; | |
| } | |
| // ADD EVENT LISTENERS | |
| document.addEventListener("DOMContentLoaded", () => { | |
| document.addEventListener("dataReady", e => { | |
| // const { dataConfirmed, dataDeaths, dataRecovered } = e.detail; | |
| const data = e.detail; | |
| console.log(e.detail); | |
| const TESTER = document.getElementById("tester"); | |
| Plotly.newPlot(TESTER, data); | |
| }); | |
| init(); | |
| }); |
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
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>COVID-19 México</title> | |
| </head> | |
| <body> | |
| <div id="tester" style="width: 100%; height:400px;"></div> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <script type="module" src="app/main.js"></script> | |
| </body> | |
| </html> |
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
| { | |
| "name": "covid-19-mexico", | |
| "version": "0.0.1", | |
| "description": "This is a webpage for display COVID-19 cases in México", | |
| "main": "app/main.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "keywords": [ | |
| "covid-19", | |
| "coronavirus", | |
| "mexico" | |
| ], | |
| "author": "Porfirio Chávez <[email protected]>", | |
| "license": "ISC", | |
| "devDependencies": { | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment