Нет описания

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  1. import React, {useState} from 'react';
  2. import { View, Text, Pressable, StyleSheet, Alert} from 'react-native';
  3. import DropDownPicker from 'react-native-dropdown-picker';
  4. import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
  5. import { parse } from 'json2csv'
  6. //import {styles} from "./styles"
  7. var allData
  8. var allTitle
  9. const styles = StyleSheet.create({
  10. buttons: {
  11. flexDirection: 'row',
  12. justifyContent: 'center',
  13. marginTop: 40,
  14. marginBottom: 30,
  15. margin: 30,
  16. borderColor: "grey",
  17. borderRadius: 8,
  18. padding: (30, 16),
  19. backgroundColor: "black",
  20. marginTop: 0,
  21. },
  22. navContainer: {
  23. flexDirection: 'row',
  24. justifyContent: "space-evenly",
  25. borderColor: "black",
  26. borderWidth: 5,
  27. borderRadius: 8,
  28. paddingTop: 20,
  29. backgroundColor: "gray",
  30. marginTop: 5,
  31. },
  32. buttonContainer: {
  33. flexDirection: 'column',
  34. backgroundColor: '#f0f8ff',
  35. alignItems: 'center',
  36. justifyContent: 'center',
  37. paddingTop:100,
  38. marginTop: 40,
  39. },
  40. container: {
  41. flexDirection: 'column',
  42. justifyContent: 'center',
  43. backgroundColor: '#f0f8ff',
  44. alignItems: 'center',
  45. justifyContent: 'center',
  46. paddingTop:20,
  47. marginTop: 20,
  48. },
  49. containerbackground:{
  50. backgroundColor: '#f0f8ff'
  51. },
  52. intro: {
  53. fontWeight: "bold",
  54. color:"#black",
  55. fontSize: 30,
  56. },
  57. sub: {
  58. color:"#black",
  59. fontWeight: "bold",
  60. fontSize: 15,
  61. paddingBottom:10,
  62. },
  63. Navsub: {
  64. color:"#black",
  65. fontWeight: "bold",
  66. fontSize: 30,
  67. paddingBottom:10,
  68. },
  69. scrollView:{
  70. marginHorizontal: 20
  71. },
  72. listItem:{
  73. fontSize: 30,
  74. color: "white",
  75. textDecorationLines: "underline"
  76. },
  77. listButtons:{
  78. fontSize: 15,
  79. color: "white",
  80. textDecorationLines: "underline"
  81. },
  82. buttonsVer: {
  83. flexDirection: 'column',
  84. justifyContent: 'center',
  85. marginTop: 40,
  86. marginBottom: 30,
  87. margin: 30,
  88. borderColor: "grey",
  89. },
  90. bottom: {
  91. flex: 0.3,
  92. backgroundColor: "gray",
  93. borderWidth: 5,
  94. alignItems: 'center',
  95. borderBottomLeftRadius: 20,
  96. borderBottomRightRadius: 20,
  97. },text: {
  98. fontSize: 16,
  99. lineHeight: 21,
  100. fontWeight: 'bold',
  101. letterSpacing: 0.25,
  102. color: 'white',
  103. },
  104. tablecontainer: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  105. head: { height: 40, backgroundColor: '#f1f8ff' },
  106. wrapper: { flexDirection: 'row' },
  107. title: { flex: 1, backgroundColor: '#f6f8fa' },
  108. row: { height: 28 },
  109. tabletext: { textAlign: 'center' }
  110. });
  111. var table = ""
  112. var pueblo = ""
  113. //where data will be stored
  114. var information
  115. function Picker() {
  116. //table to pick from
  117. const [openTable, setOpenTable] = useState(false);
  118. const [valueTable, setValueTable] = useState(null);
  119. const [table, setTable] = useState([
  120. {label:'DP02PR', value: 'DP02PR'},
  121. {label:'DP03', value: 'DP03'},
  122. {label:'DP04', value: 'DP04'},
  123. {label:'DP05', value: 'DP05'},
  124. ]);
  125. //cambiar pueblo
  126. //pueblo
  127. const [openPueblo, setOpenPueblo] = useState(false);
  128. const [valuePueblo, setValuePueblo] = useState(null);
  129. const [pueblo, setPueblo] = useState([
  130. {label: 'Adjuntas', value: '001'},
  131. {label: 'Aguada', value: '003'},
  132. {label: 'Aguadillas', value: '005'},
  133. {label: 'Aguas Buenas', value: '007'},
  134. {label: 'Aibonito', value: '009'},
  135. {label: 'Añasco', value: '011'},
  136. {label: 'Arecibo', value: '013'},
  137. {label: 'Arroyo', value: '015'},
  138. {label: 'Barceloneta', value: '017'},
  139. {label: 'Barranquitas', value: '019'},
  140. {label: 'Bayamón', value: '021'},
  141. {label: 'Cabo Rojo', value: '023'},
  142. {label: 'Caguas', value: '025'},
  143. {label: 'Camuy', value: '027'},
  144. {label: 'Canóvanas', value: '029'},
  145. {label: 'Carolina', value: '031'},
  146. {label: 'Cataño', value: '033'},
  147. {label: 'Cayey', value: '035'},
  148. {label: 'Ceiba', value: '037'},
  149. {label: 'Ciales', value: '039'},
  150. {label: 'Cidra', value: '041'},
  151. {label: 'Coamo', value: '043'},
  152. {label: 'Comerío', value: '045'},
  153. {label: 'Corozal', value: '047'},
  154. {label: 'Culebra', value: '049'},
  155. {label: 'Dorado', value: '051'},
  156. {label: 'Fajardo', value: '053'},
  157. {label: 'Florida', value: '054'},
  158. {label: 'Guánica', value: '055'},
  159. {label: 'Guayama', value: '057'},
  160. {label: 'Guayanilla', value: '059'},
  161. {label: 'Guaynabo', value: '061'},
  162. {label: 'Gurabo', value: '063'},
  163. {label: 'Hatillo', value: '065'},
  164. {label: 'Hormigueros', value: '067'},
  165. {label: 'Humacao', value: '069'},
  166. {label: 'Isabela', value: '071'},
  167. {label: 'Jayuya', value: '073'},
  168. {label: 'Juana Díaz', value: '075'},
  169. {label: 'Juncos', value: '077'},
  170. {label: 'Lajas', value: '079'},
  171. {label: 'Lares', value: '081'},
  172. {label: 'Las Marías', value: '083'},
  173. {label: 'Las Piedras', value: '085'},
  174. {label: 'Loíza', value: '087'},
  175. {label: 'Luquillo', value: '089'},
  176. {label: 'Manatí', value: '091'},
  177. {label: 'Maricao', value: '093'},
  178. {label: 'Maunabo', value: '095'},
  179. {label: 'Mayagüez', value: '097'},
  180. {label: 'Moca', value: '099'},
  181. {label: 'Morovis', value: '101'},
  182. {label: 'Naguabo', value: '103'},
  183. {label: 'Naranjito', value: '105'},
  184. {label: 'Orocovis', value: '107'},
  185. {label: 'Patillas', value: '109'},
  186. {label: 'Peñuelas', value: '111'},
  187. {label: 'Ponce', value: '113'},
  188. {label: 'Quebradillas', value: '115'},
  189. {label: 'Rincón', value: '117'},
  190. {label: 'Río Grande', value: '119'},
  191. {label: 'Sabana Grande', value: '121'},
  192. {label: 'Salinas', value: '123'},
  193. {label: 'San Germán', value: '125'},
  194. {label: 'San Juan', value: '127'},
  195. {label: 'San Lorenzo', value: '129'},
  196. {label: 'San Sebastián', value: '131'},
  197. {label: 'Santa Isabel', value: '133'},
  198. {label: 'Toa Alta', value: '135'},
  199. {label: 'Toa Baja', value: '137'},
  200. {label: 'Trujillo Alto', value: '139'},
  201. {label: 'Utuado', value: '141'},
  202. {label: 'Vega Alta', value: '143'},
  203. {label: 'Vega Baja', value: '145'},
  204. {label: 'Vieques', value: '147'},
  205. {label: 'Villalba', value: '149'},
  206. {label: 'Yabucoa', value: '151'},
  207. {label: 'Yauco', value: '153'}
  208. ]);
  209. return (
  210. <View>
  211. <DropDownPicker
  212. open={openTable}
  213. value={valueTable}
  214. items={table}
  215. setOpen={setOpenTable}
  216. setValue={setValueTable}
  217. setItems={setTable}
  218. onChangeValue = {(valueTable) => {
  219. updateTable(valueTable);
  220. }}
  221. onOpen = {() => {setOpenPueblo(false)}}
  222. zIndex={3000}
  223. zIndexInverse={1000}
  224. placeholder="Tabla de Datos"
  225. />
  226. <DropDownPicker
  227. searchable={true}
  228. open={openPueblo}
  229. value={valuePueblo}
  230. items={pueblo}
  231. setOpen={setOpenPueblo}
  232. setValue={setValuePueblo}
  233. setItems={setPueblo}
  234. onChangeValue = {(valuePueblo) => {
  235. updatePueblo(valuePueblo);
  236. }}
  237. onOpen = {() => {setOpenTable(false)}}
  238. zIndex={1000}
  239. zIndexInverse={3000}
  240. placeholder="Pueblo"
  241. searchPlaceholder="Busqueda..."
  242. />
  243. </View>
  244. );
  245. }
  246. function updateTable(value){
  247. table = value
  248. }
  249. function updatePueblo(value){
  250. pueblo = value
  251. }
  252. //calls data query
  253. function loadDoc(query) {
  254. console.log("load")
  255. var xhttp = new XMLHttpRequest();
  256. xhttp.onreadystatechange = function() {
  257. if (this.readyState == 4) {
  258. information = this.responseText;
  259. if(this.status == 200){console.log("received response");organize()}
  260. }
  261. }
  262. xhttp.open("GET", query, true);
  263. xhttp.send(null);
  264. }
  265. function fetchData() {
  266. var query = "https://api.census.gov/data/2020/acs/acs5/profile?get=group" + "(" + table + ")&for=county:" + pueblo + "&in=state:72"
  267. if(pueblo && table)
  268. {loadDoc(query)}
  269. else
  270. {Alert.alert("Please fill every parameter before calling!")}
  271. }
  272. function DataTable() {
  273. let tableHead = ['Variable', 'Estimate', 'MoE']
  274. let tableTitle = allTitle
  275. let tableData = allData
  276. return (
  277. <View style={styles.tablecontainer}>
  278. <Table borderStyle={{borderWidth: 1}}>
  279. <Row data={tableHead} flexArr={[1, 2, 1, 1]} style={styles.head} textStyle={styles.tabletext}/>
  280. <TableWrapper style={styles.wrapper}>
  281. <Col data={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.tabletext}/>
  282. <Rows data={tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.tabletext}/>
  283. </TableWrapper>
  284. </Table>
  285. </View>
  286. )
  287. }
  288. //organize data make it pretty
  289. //add loading thing while this organizes all the data !!!
  290. function organize(){
  291. let bigData = JSON.parse(information)
  292. bigData = parse(bigData)
  293. var variables = []
  294. var estimates = []
  295. var moe = []
  296. let divData = bigData.split(",")
  297. let num = Math.floor(divData.length/3) + 1
  298. for(let i = num; i < Math.floor(divData.length/3*2); i++){
  299. variables.push(divData[i])
  300. estimates.push(divData[i+num])
  301. moe.push(divData[i+num*1.5])
  302. }
  303. //console.log(variables)
  304. //console.log(estimates)
  305. //console.log(moe)
  306. let tableContents = []
  307. for(let i = 0; i < estimates.length; i++)
  308. {
  309. tableContents.push([estimates[i],moe[i]])
  310. }
  311. allTitle = variables
  312. allData = tableContents
  313. information = <DataTable />
  314. /*
  315. var stringDiv = JSON.stringify(information)
  316. stringDiv = stringDiv.replace('[[', '');
  317. stringDiv = stringDiv.replace(']]', '');
  318. stringDiv = stringDiv.split(',')
  319. //create smaller array variables
  320. let variables = []
  321. let value = []
  322. let est = []
  323. //theres a better way to do this but im not fixing it rn
  324. for(let i = 0; i<stringDiv.length; i++){
  325. if(i<stringDiv.length/3)
  326. {variables.push(stringDiv[i])}
  327. else if(i<stringDiv.length/3*2)
  328. {value.push(stringDiv[i])}
  329. else
  330. {est.push(stringDiv[i])}
  331. }
  332. //anyways this to format it
  333. console.log("vars:",variables)
  334. console.log("val:",value)
  335. console.log("est:",est)
  336. */
  337. }
  338. function json_2_csv(information){
  339. const csv = parse(obj);
  340. console.log(csv);
  341. }
  342. //fix
  343. DropDownPicker.setListMode("SCROLLVIEW")
  344. //data parsing goes here
  345. function getInfo(){
  346. return information
  347. }
  348. //data display
  349. class DataButton extends React.Component{
  350. state = {
  351. updated: 1,
  352. notUpdated: 0
  353. }
  354. pullData = () => {fetchData(); this.setState({current: 1})}
  355. //the reason you need to press the button twice is bc the http request doesnt finish in time
  356. //for information to be updated before its rerendered
  357. componentDidUpdate(){
  358. if(this.state.current == 1){
  359. this.setState({current: 0})
  360. }
  361. }
  362. state = {current: 0}
  363. render() {
  364. return(
  365. <View style = {styles.container}>
  366. <Pressable style={styles.buttons} onPress = {this.pullData}>
  367. <Text style={styles.text}> Fetch Data</Text>
  368. </Pressable>
  369. <Text style={styles.sub}>{information}</Text>
  370. </View>
  371. );
  372. }
  373. }
  374. export { Picker, updateTable, updatePueblo,loadDoc,fetchData,DataButton};