data

Datos.js

@@ -1,8 +1,14 @@
 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
+  
 const styles = StyleSheet.create({
 	
 	buttons: {
@@ -103,6 +109,12 @@ const styles = StyleSheet.create({
 	  letterSpacing: 0.25,
 	  color: 'white',
 	},
+	tablecontainer: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
+	head: {  height: 40,  backgroundColor: '#f1f8ff'  },
+	wrapper: { flexDirection: 'row' },
+	title: { flex: 1, backgroundColor: '#f6f8fa' },
+	row: {  height: 28  },
+	tabletext: { textAlign: 'center' }
   });  
 var table = ""
 var pueblo = ""
@@ -282,7 +294,7 @@ function loadDoc(query) {
 		
 function fetchData() {
             
-        var query = "http://127.0.0.1:5378/table?table=" + table + "&municipality=" + pueblo 
+        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)}
 
@@ -293,14 +305,57 @@ function fetchData() {
 
 
 
+function DataTable() {
+    let tableHead = ['Variable', 'Estimate', 'MoE']
+    let tableTitle = allTitle
+    let tableData = allData
+    return (
+      <View style={styles.tablecontainer}>
+        <Table borderStyle={{borderWidth: 1}}>
+          <Row data={tableHead} flexArr={[1, 2, 1, 1]} style={styles.head} textStyle={styles.tabletext}/>
+          <TableWrapper style={styles.wrapper}>
+            <Col data={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.tabletext}/>
+            <Rows data={tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.tabletext}/>
+          </TableWrapper>
+        </Table>
+      </View>
+    )
+}
+
 //organize data make it pretty
 //add loading thing while this organizes all the data !!!
 
 function organize(){
 	
-	console.log(information)
-	
 	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 = <DataTable />
+	
 	
 	/*
 	var stringDiv = JSON.stringify(information)
@@ -334,6 +389,9 @@ function organize(){
 	
 }
 
+
+
+
 function json_2_csv(information){
 
 	const csv = parse(obj);
@@ -366,9 +424,7 @@ class DataButton extends React.Component{
 	//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(){
-		console.log(this.state)
 		if(this.state.current == 1){
-			console.log("updating")
 			this.setState({current: 0})
 		}
 	}