import React, {useState} from 'react'; import { View, Text, Pressable, StyleSheet, Alert} from 'react-native'; import DropDownPicker from 'react-native-dropdown-picker'; import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component'; import { parse } from 'json2csv' import {styles} from "./styles" var allData var allTitle var table = "" var pueblo = "" //where data will be stored var information function Picker() { //table to pick from const [openTable, setOpenTable] = useState(false); const [valueTable, setValueTable] = useState(null); const [table, setTable] = useState([ {label:'DP02PR', value: 'DP02PR'}, {label:'DP03', value: 'DP03'}, {label:'DP04', value: 'DP04'}, {label:'DP05', value: 'DP05'}, ]); //cambiar pueblo //pueblo const [openPueblo, setOpenPueblo] = useState(false); const [valuePueblo, setValuePueblo] = useState(null); const [pueblo, setPueblo] = useState([ {label: 'Adjuntas', value: '001'}, {label: 'Aguada', value: '003'}, {label: 'Aguadillas', value: '005'}, {label: 'Aguas Buenas', value: '007'}, {label: 'Aibonito', value: '009'}, {label: 'Añasco', value: '011'}, {label: 'Arecibo', value: '013'}, {label: 'Arroyo', value: '015'}, {label: 'Barceloneta', value: '017'}, {label: 'Barranquitas', value: '019'}, {label: 'Bayamón', value: '021'}, {label: 'Cabo Rojo', value: '023'}, {label: 'Caguas', value: '025'}, {label: 'Camuy', value: '027'}, {label: 'Canóvanas', value: '029'}, {label: 'Carolina', value: '031'}, {label: 'Cataño', value: '033'}, {label: 'Cayey', value: '035'}, {label: 'Ceiba', value: '037'}, {label: 'Ciales', value: '039'}, {label: 'Cidra', value: '041'}, {label: 'Coamo', value: '043'}, {label: 'Comerío', value: '045'}, {label: 'Corozal', value: '047'}, {label: 'Culebra', value: '049'}, {label: 'Dorado', value: '051'}, {label: 'Fajardo', value: '053'}, {label: 'Florida', value: '054'}, {label: 'Guánica', value: '055'}, {label: 'Guayama', value: '057'}, {label: 'Guayanilla', value: '059'}, {label: 'Guaynabo', value: '061'}, {label: 'Gurabo', value: '063'}, {label: 'Hatillo', value: '065'}, {label: 'Hormigueros', value: '067'}, {label: 'Humacao', value: '069'}, {label: 'Isabela', value: '071'}, {label: 'Jayuya', value: '073'}, {label: 'Juana Díaz', value: '075'}, {label: 'Juncos', value: '077'}, {label: 'Lajas', value: '079'}, {label: 'Lares', value: '081'}, {label: 'Las Marías', value: '083'}, {label: 'Las Piedras', value: '085'}, {label: 'Loíza', value: '087'}, {label: 'Luquillo', value: '089'}, {label: 'Manatí', value: '091'}, {label: 'Maricao', value: '093'}, {label: 'Maunabo', value: '095'}, {label: 'Mayagüez', value: '097'}, {label: 'Moca', value: '099'}, {label: 'Morovis', value: '101'}, {label: 'Naguabo', value: '103'}, {label: 'Naranjito', value: '105'}, {label: 'Orocovis', value: '107'}, {label: 'Patillas', value: '109'}, {label: 'Peñuelas', value: '111'}, {label: 'Ponce', value: '113'}, {label: 'Quebradillas', value: '115'}, {label: 'Rincón', value: '117'}, {label: 'Río Grande', value: '119'}, {label: 'Sabana Grande', value: '121'}, {label: 'Salinas', value: '123'}, {label: 'San Germán', value: '125'}, {label: 'San Juan', value: '127'}, {label: 'San Lorenzo', value: '129'}, {label: 'San Sebastián', value: '131'}, {label: 'Santa Isabel', value: '133'}, {label: 'Toa Alta', value: '135'}, {label: 'Toa Baja', value: '137'}, {label: 'Trujillo Alto', value: '139'}, {label: 'Utuado', value: '141'}, {label: 'Vega Alta', value: '143'}, {label: 'Vega Baja', value: '145'}, {label: 'Vieques', value: '147'}, {label: 'Villalba', value: '149'}, {label: 'Yabucoa', value: '151'}, {label: 'Yauco', value: '153'} ]); return ( { updateTable(valueTable); }} onOpen = {() => {setOpenPueblo(false)}} zIndex={3000} zIndexInverse={1000} placeholder="Tabla de Datos" /> { updatePueblo(valuePueblo); }} onOpen = {() => {setOpenTable(false)}} zIndex={1000} zIndexInverse={3000} placeholder="Pueblo" searchPlaceholder="Busqueda..." /> ); } function updateTable(value){ table = value } function updatePueblo(value){ pueblo = value } //calls data query function loadDoc(query) { console.log("load") var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { information = this.responseText; if(this.status == 200){console.log("received response");organize()} } } xhttp.open("GET", query, true); xhttp.send(null); } function fetchData() { var query = "https://api.census.gov/data/2020/acs/acs5/profile?get=group" + "(" + table + ")&for=county:" + pueblo + "&in=state:72" if(pueblo && table) {loadDoc(query)} else {Alert.alert("Please fill every parameter before calling!")} } function DataTable() { let tableHead = ['Variable', 'Estimate', 'MoE'] let tableTitle = allTitle let tableData = allData return (
) } //organize data make it pretty //add loading thing while this organizes all the data !!! function organize(){ let bigData = JSON.parse(information) bigData = parse(bigData) var variables = [] var estimates = [] var moe = [] let divData = bigData.split(",") let num = Math.floor(divData.length/3) + 1 for(let i = num; i < Math.floor(divData.length/3*2); i++){ variables.push(divData[i]) estimates.push(divData[i+num]) moe.push(divData[i+num*1.5]) } //console.log(variables) //console.log(estimates) //console.log(moe) let tableContents = [] for(let i = 0; i < estimates.length; i++) { tableContents.push([estimates[i],moe[i]]) } allTitle = variables allData = tableContents information = /* var stringDiv = JSON.stringify(information) stringDiv = stringDiv.replace('[[', ''); stringDiv = stringDiv.replace(']]', ''); stringDiv = stringDiv.split(',') //create smaller array variables let variables = [] let value = [] let est = [] //theres a better way to do this but im not fixing it rn for(let i = 0; i {fetchData(); this.setState({current: 1})} //the reason you need to press the button twice is bc the http request doesnt finish in time //for information to be updated before its rerendered componentDidUpdate(){ if(this.state.current == 1){ this.setState({current: 0}) } } state = {current: 0} render() { return( Fetch Data {information} ); } } export { Picker, updateTable, updatePueblo,loadDoc,fetchData,DataButton};