Browse Source

Upload files to ''

String version + some test
juan.hernandez41 1 year ago
parent
commit
e507720c0e
2 changed files with 278 additions and 376 deletions
  1. 2
    2
      App.js
  2. 276
    374
      Datos.js

+ 2
- 2
App.js View File

@@ -22,7 +22,7 @@ vars = {
22 22
 			<View style = {styles.container}>
23 23
 				
24 24
 				<Text style={styles.sub}>Aquí podra mantenerse al tanto con las 
25
-					últimas noticias relacionadas al Censo y tener acceso a los  
25
+					últimas noticias relacionadas al Censo y tener acceso a   
26 26
 					los Demographic Data Profiles de cada municipio de
27 27
 					Puerto Rico.
28 28
 				</Text>
@@ -129,4 +129,4 @@ vars = {
129 129
 }
130 130
 
131 131
 
132
-export default App
132
+export default App

+ 276
- 374
Datos.js View File

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