Browse Source

datafetch

andrea.nieves7 1 year ago
parent
commit
9ba5d91bea
11 changed files with 587 additions and 518 deletions
  1. 79
    461
      App.js
  2. 393
    0
      Datos.js
  3. 0
    0
      Home.js
  4. 4
    0
      Noticias.js
  5. 10
    9
      R.R
  6. 1
    3
      fetchData.js
  7. BIN
      logonoback.png
  8. BIN
      logosmall.jpg
  9. 65
    0
      sorting.py
  10. 35
    20
      styles.js
  11. 0
    25
      yarn.lock

+ 79
- 461
App.js View File

@@ -1,387 +1,7 @@
1
-import { StatusBar } from 'expo-status-bar';
2 1
 import React, {useState, useEffect} from 'react';
3
-import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable} from 'react-native';
4
-import DropDownPicker from 'react-native-dropdown-picker';
5
-
6
-
7
-//import JSON;
8
-//import { Dataframe, readJSON } from "danfojs";
9
-
10
-//where data will be put
11
-var organizedData
12
-
13
-//where data will be stored
14
-var information = "data goes here"
15
-
16
-//organize data make it pretty
17
-
18
-//add loading thing while this organizes all the data !!!
19
-
20
-function organize(){
21
-	
22
-	var stringDiv = JSON.stringify(information)
23
-	stringDiv = stringDiv.replace('[[', '');
24
-	stringDiv = stringDiv.replace(']]', '');
25
-	stringDiv = stringDiv.split(',')
26
-	//create smaller array variables
27
-	let variables = []
28
-	let value = []
29
-	let est = []
30
-	
31
-	
32
-	//theres a better way to do this but im not fixing it rn
33
-	for(let i = 0; i<stringDiv.length; i++){
34
-		if(i<stringDiv.length/3)
35
-		{variables.push(stringDiv[i])}
36
-		else if(i<stringDiv.length/3*2)
37
-		{value.push(stringDiv[i])}
38
-		else{est.push(stringDiv[i])}
39
-	}
40
-	
41
-	//anyways this to format it
42
-	
43
-	console.log("vars:",variables)
44
-	console.log("val:",value)
45
-	console.log("est:",est)
46
-	//organizedData = JSON.parse(information)
47
-	//console.log(stringDiv)
48
-	
49
-}
50
-
51
-function json_2_csv(information){
52
-	const csv = parse(obj);
53
-
54
-	console.log(csv);
55
-}
56
-
57
-//fix
58
-
59
-DropDownPicker.setListMode("SCROLLVIEW")
60
-
61
-//data query variables (global)
62
-
63
-const queryBase = "http://127.0.0.1:5378/table?table=DP03&municipality=Ceiba"
64
-const queryEnd = "&in=state:72"
65
-var table = ""
66
-var pueblo = ""
67
-
68
-
69
-function updateTable(value){
70
-	table = value
71
-}
72
-
73
-function updatePueblo(value){
74
-	pueblo = value
75
-}
76
-
77
-//calls data query
78
-function loadDoc(query) {
79
-  var xhttp = new XMLHttpRequest();
80
-  xhttp.onreadystatechange = function() {
81
-    if (this.readyState == 4 && this.status == 200) {
82
-         information = this.responseText;
83
-		 organize()
84
-  }
85
-  };
86
-  xhttp.open("GET", query, true);
87
-  xhttp.send();
88
-  
89
-}
90
-
91
-
92
-//"https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72"
93
-
94
-
95
-
96
-function fetchData() {
97
-	
98
-	console.log("fetching data")
99
-	
100
-	var query = queryBase + "(" + table + ")&for=county:" + pueblo + queryEnd 
101
-	
102
-	if(pueblo && table)
103
-	{loadDoc(query)}
104
-	else
105
-	{Alert.alert("Please fill every parameter before calling!")}
106
-	
107
-}
108
-
109
-//change this to an external css file later
110
-const styles = StyleSheet.create({
111
-	
112
-  buttons: {
113
-	  flexDirection: 'row',
114
-	  justifyContent: 'center',
115
-	  marginTop: 40,
116
-	  marginBottom: 30,
117
-	  margin: 30,
118
-	  borderColor: "grey",
119
-	  borderRadius: 8,
120
-	  padding: (30, 16),
121
-	  backgroundColor: "black",
122
-	  marginTop: 0
123
-  }, 
124
-  buttonContainer: {
125
-    flexDirection: 'column',
126
-    backgroundColor: '#f0f8ff',
127
-    // alignItems: 'center',
128
-    // justifyContent: 'center',
129
-	paddingTop:40,
130
-	marginTop: 15,
131
-  },
132
-  bottom: {
133
-    flex: 0.3,
134
-    backgroundColor: "gray",
135
-    borderWidth: 5,
136
-    borderBottomLeftRadius: 20,
137
-    borderBottomRightRadius: 20,
138
-	alignItems:'center',
139
-
140
-  },
141
-  container: {
142
-    flexDirection: 'column',
143
-	justifyContent: 'center',
144
-    backgroundColor: '#f0f8ff',
145
-    alignItems: 'center',
146
-    justifyContent: 'center',
147
-	paddingTop:20,
148
-	marginTop: 15,
149
-  },
150
-
151
-
152
-  containerbackground:{
153
-	
154
-    backgroundColor: '#f0f8ff'
155
-  },
156
-  intro: {
157
-	  fontWeight: "bold",
158
-      color:"#black",
159
-	  fontSize: 30,
160
-  },
161
-
162
-  sub: {
163
-	color:"#black",  
164
-	fontWeight: "bold",
165
-	fontSize: 15,
166
-	paddingBottom:10,
167
-},
168
-
169
-  Navsub: {
170
-      color:"#black",  
171
-	  fontWeight: "bold",
172
-	  fontSize: 30,
173
-	  paddingBottom:10,
174
-  },
175
-  scrollView:{
176
-	  marginHorizontal: 20
177
-  },
178
-  listItem:{
179
-	  fontSize: 30,
180
-	  color: "white",
181
-	  textDecorationLines: "underline"
182
-  },
183
-  listButtons:{
184
-	  fontSize: 15,
185
-	  color: "white",
186
-	  textDecorationLines: "underline"  
187
-  },
188
-  buttonsVer: {
189
-	  flexDirection: 'column',
190
-	  justifyContent: 'center',
191
-	  marginTop: 40,
192
-	  marginBottom: 30,
193
-	  margin: 30,
194
-	  borderColor: "grey",
195
-  }
196
-});
197
-
198
-
199
-
200
-//default button press
201
-
202
-const handlePress = () => false
203
-
204
-
205
-//data parsing goes here
206
-function getInfo(){
207
-	//console.log(information[6])
208
-	if(!information)
209
-	{Alert.alert("Please try again later! Error retriving data")}
210
-	else
211
-	{return information}
212
-
213
-	
214
-}
215
-
216
-//data display
217
-
218
-class DataButton extends React.Component{
219
-	
220
-	state = {
221
-		click: false
222
-	}
223
-	
224
-	pullData = () => {fetchData(); this.setState({click: true})}
225
-	
226
-	
227
-	render() {
228
-		return(
229
-		<View>
230
-			<Button
231
-			onPress = {this.pullData}
232
-			title = "Fetch Data"
233
-			color = "black"
234
-			/>
235
-			<Text style={styles.sub}>{getInfo()}</Text> 
236
-		</View>
237
-	);}	
238
-}
239
-
240
-
241
-//picker test
242
-
243
-function Picker() {
244
-	
245
-	//table to pick from
246
-  
247
-  
248
-  const [openTable, setOpenTable] = useState(false);
249
-  const [valueTable, setValueTable] = useState(null);
250
-  const [table, setTable] = useState([
251
-    {label:'DP02PR', value: 'DP02PR'},
252
-    {label:'DP03', value: 'DP03'},
253
-	{label:'DP04', value: 'DP04'},
254
-    {label:'DP05', value: 'DP05'},
255
-  ]);
256
-    
257
-  //cambiar pueblo
258
-  
259
-  
260
-  //pueblo
261
-  const [openPueblo, setOpenPueblo] = useState(false);
262
-  const [valuePueblo, setValuePueblo] = useState(null);
263
-  const [pueblo, setPueblo] = useState([
264
-    {label: 'Adjuntas', value: '001'},
265
-    {label: 'Aguada', value: '003'},
266
-	{label: 'Aguadillas', value: '005'},
267
-    {label: 'Aguas Buenas', value: '007'},
268
-	{label: 'Aibonito', value: '009'},
269
-    {label: 'Añasco', value: '011'},
270
-	{label: 'Arecibo', value: '013'},
271
-    {label: 'Arroyo', value: '015'},
272
-	{label: 'Barceloneta', value: '017'},
273
-    {label: 'Barranquitas', value: '019'},
274
-	{label: 'Bayamón', value: '021'},
275
-    {label: 'Cabo Rojo', value: '023'},
276
-	{label: 'Caguas', value: '025'},
277
-    {label: 'Camuy', value: '027'},
278
-	{label: 'Canóvanas', value: '029'},
279
-	{label: 'Carolina', value: '031'},
280
-	{label: 'Cataño', value: '033'},
281
-	{label: 'Cayey', value: '035'},
282
-	{label: 'Ceiba', value: '037'},
283
-	{label: 'Ciales', value: '039'},
284
-	{label: 'Cidra', value: '041'},
285
-	{label: 'Coamo', value: '043'},
286
-	{label: 'Comerío', value: '045'},
287
-	{label: 'Corozal', value: '047'},
288
-	{label: 'Culebra', value: '049'},
289
-	{label: 'Dorado', value: '051'},
290
-	{label: 'Fajardo', value: '053'},
291
-	{label: 'Florida', value: '054'},
292
-	{label: 'Guánica', value: '055'},
293
-	{label: 'Guayama', value: '057'},
294
-	{label: 'Guayanilla', value: '059'},
295
-	{label: 'Guaynabo', value: '061'},	
296
-	{label: 'Gurabo', value: '063'},
297
-	{label: 'Hatillo', value: '065'},
298
-	{label: 'Hormigueros', value: '067'},
299
-	{label: 'Humacao', value: '069'},
300
-	{label: 'Isabela', value: '071'},
301
-	{label: 'Jayuya', value: '073'},
302
-	{label: 'Juana Díaz', value: '075'},
303
-	{label: 'Juncos', value: '077'},
304
-	{label: 'Lajas', value: '079'},
305
-	{label: 'Lares', value: '081'},
306
-	{label: 'Las Marías', value: '083'},
307
-	{label: 'Las Piedras', value: '085'},
308
-	{label: 'Loíza', value: '087'},
309
-	{label: 'Luquillo', value: '089'},
310
-	{label: 'Manatí', value: '091'},
311
-	{label: 'Maricao', value: '093'},
312
-	{label: 'Maunabo', value: '095'},
313
-	{label: 'Mayagüez', value: '097'},
314
-	{label: 'Moca', value: '099'},
315
-	{label: 'Morovis', value: '101'},
316
-	{label: 'Naguabo', value: '103'},
317
-	{label: 'Naranjito', value: '105'},
318
-	{label: 'Orocovis', value: '107'},
319
-	{label: 'Patillas', value: '109'},
320
-	{label: 'Peñuelas', value: '111'},
321
-	{label: 'Ponce', value: '113'},
322
-	{label: 'Quebradillas', value: '115'},
323
-	{label: 'Rincón', value: '117'},
324
-	{label: 'Río Grande', value: '119'},
325
-	{label: 'Sabana Grande', value: '121'},
326
-	{label: 'Salinas', value: '123'},
327
-	{label: 'San Germán', value: '125'},
328
-	{label: 'San Juan', value: '127'},
329
-	{label: 'San Lorenzo', value: '129'},
330
-	{label: 'San Sebastián', value: '131'},
331
-	{label: 'Santa Isabel', value: '133'},
332
-	{label: 'Toa Alta', value: '135'},
333
-	{label: 'Toa Baja', value: '137'},
334
-	{label: 'Trujillo Alto', value: '139'},
335
-	{label: 'Utuado', value: '141'},
336
-	{label: 'Vega Alta', value: '143'},
337
-	{label: 'Vega Baja', value: '145'},
338
-	{label: 'Vieques', value: '147'},
339
-	{label: 'Villalba', value: '149'},
340
-	{label: 'Yabucoa', value: '151'},
341
-	{label: 'Yauco', value: '153'}
342
-  ]);
343
-  
344
-  
345
-
346
-  return (
347
-  <View>
348
-    <DropDownPicker
349
-      open={openTable}
350
-      value={valueTable}
351
-      items={table}
352
-      setOpen={setOpenTable}
353
-      setValue={setValueTable}
354
-      setItems={setTable}
355
-	  onChangeValue = {(valueTable) => {
356
-		updateTable(valueTable);
357
-		}}
358
-	  onOpen = {() => {setOpenPueblo(false)}}
359
-	  zIndex={3000}
360
-	  zIndexInverse={1000}
361
-	  placeholder="Tabla de Datos"
362
-    />
363
-	
364
-	<DropDownPicker
365
-      searchable={true}
366
-      open={openPueblo}
367
-      value={valuePueblo}
368
-      items={pueblo}
369
-      setOpen={setOpenPueblo}
370
-      setValue={setValuePueblo}
371
-      setItems={setPueblo}
372
-	  onChangeValue = {(valuePueblo) => {
373
-		updatePueblo(valuePueblo);
374
-		}}
375
-	  onOpen = {() => {setOpenTable(false)}}
376
-	  zIndex={1000}
377
-      zIndexInverse={3000}
378
-	  placeholder="Pueblo"
379
-	  searchPlaceholder="Busqueda..."
380
-    />
381
-	
382
-	</View>
383
-  );
384
-}
2
+import { View, Image, Text, Button, ScrollView, Pressable, Linking,StyleSheet} from 'react-native';
3
+import {Picker, DataButton} from "./Datos"
4
+import { styles } from './styles';
385 5
 
386 6
 
387 7
 
@@ -391,122 +11,120 @@ class App extends React.Component {
391 11
 
392 12
 //the text at the end of a page gets cut off if anyone knows how to fix that?
393 13
 vars = {
394
-		welcome:
395
-<ScrollView style={styles.scrollView}>
396
-		<View style = {styles.containerbackground}>
397
-		
398
-		  	<View style = {styles.container}>
14
+	welcome:
15
+
16
+	<View style = {styles.containerbackground}>
17
+		<ScrollView style={styles.scrollView}>
18
+			<View style = {styles.container}>
399 19
 				<Text style={styles.intro}>Bienvenido!</Text>
400
-				<Image source={require('./smallLogo.jpeg')} />
401 20
 			</View>
21
+
402 22
 			<View style = {styles.container}>
23
+				
403 24
 				<Text style={styles.sub}>Aquí podra mantenerse al tanto con las 
404 25
 					últimas noticias relacionadas al Censo y tener acceso a los  
405 26
 					los Demographic Data Profiles de cada municipio de
406
-					Puerto Rico.</Text>
407
-		   </View>
27
+					Puerto Rico.
28
+				</Text>
29
+			</View>
408 30
 
409
-		   <View style = {styles.bottom}>
31
+			<View style = {styles.bottom}>
410 32
 				<Text style={styles.intro2}>Contactenos:</Text>
411 33
 				<Text style={styles.sub}>Prof: Hernando Mattei Torres
412 34
 				<Button onPress={() => Linking.openURL('mailto:hernando.mattei@upr.edu') }
413
-      			title="e-mail" /></Text>
35
+				title="e-mail" /></Text>
414 36
 				<Text style={styles.sub}>Angelica Rosario Santos
415 37
 				<Button onPress={() => Linking.openURL('mailto:angelica.rosario2@upr.edu') }
416
-      			title="e-mail" /></Text>
38
+				title="e-mail" /></Text>
417 39
 				<Text style={styles.sub}>Data from:</Text>
418 40
 				<Image source={require('./census-logos.png')} />
419 41
 				<Button onPress={() => Linking.openURL('https://data.census.gov/profile?q=United+States&g=0100000US') }
420
-      			title="United States Census page" />
421
-		   </View>
422
-		  
423
-		</View>
424
-		</ScrollView>,
425
-		 
426
-		newsView:
42
+				title="United States Census page" />
43
+			</View>
44
+		</ScrollView>
45
+	</View>,
46
+
47
+						
48
+	newsView:
427 49
 		<View style = {styles.containerbackground}>
428
-		<ScrollView style={styles.scrollView}>
429
-		 <View style = {styles.container}>
430
-		 	
431
-			<Text style={styles.intro}>Noticias</Text>
432
-			
433
-			<Image source={require('./Logo.jpeg')} />
434
-			
435
-		 </View>
436
-		</ScrollView></View>,
50
+			<ScrollView style={styles.scrollView}>
51
+				<View style = {styles.container}>
52
+					
53
+					<Text style={styles.intro}>Noticias</Text>
54
+					
55
+					<Image source={require('./Logo.jpeg')} />
56
+					
57
+				</View>
58
+			</ScrollView>
59
+		</View>,
437 60
 		
438
-		dataOp:
61
+	dataOp:
439 62
 		<View style = {styles.containerbackground}>
440
-		<ScrollView nestedScrollEnabled = {true} style={styles.scrollView}>
441
-		 <View style = {styles.container}>
442
-			
443
-			<Text style={styles.intro}>DATA VIEWING PROJECT</Text>		
444
-				
445
-			<Picker />
63
+			<ScrollView nestedScrollEnabled = {true} style={styles.scrollView}>
64
+				<View style = {styles.container}>
65
+					<Text style={styles.intro}>DATA VIEWING PROJECT</Text>		
66
+				</View>	
446 67
 
68
+				 
69
+					<Picker />
447 70
 				
448
-			<DataButton />
449
-			
450
-			<Text style={styles.sub}>blehhhhhh bleh bleh bleh bleh bleh blehhhhhhhhhhhhhhhhh </Text>
71
+					<DataButton />
72
+				
73
+
74
+			</ScrollView>	
451 75
 			
452
-		 </View>
453
-		</ScrollView></View>
454
-		
455
-		
76
+		</View>
456 77
 
457 78
 		
458
-	}
459
-//current state
460
-state = {current: this.vars.welcome}
79
+}
80
+
461 81
 
462
-//state changing functions
463
-setHome = () => this.setState({ current: this.vars.welcome })
82
+	//current state
83
+	state = {current: this.vars.welcome}
464 84
 
85
+	//state changing functions
86
+	setHome = () => this.setState({ current: this.vars.welcome })
465 87
 
466
-setData = () => this.setState({current: this.vars.dataOp})
467 88
 
89
+	setData = () => this.setState({current: this.vars.dataOp})
468 90
 
469
-setNews = () => this.setState({ current: this.vars.newsView })
91
+
92
+	setNews = () => this.setState({ current: this.vars.newsView })
470 93
 
471 94
 	
472 95
 
473 96
 	//render app
474 97
    render() {
475
-      return (
476
-	  <View>
477
-		
478
-		<View style = {styles.containerbackground}>
479
-				<ScrollView style={styles.scrollView}>
480
-				<View style = {styles.buttonContainer}>
481
-					<Text style={styles.Navsub}> Demographic Data Viewer</Text>
482
-						<Text style={styles.sub}> Navegador</Text>
483
-							<Pressable style = {styles.buttons} onPress={this.setNews}>
98
+		return (
99
+			<View>
100
+				<View style = {styles.containerbackground}>
101
+					<View style = {styles.buttonContainer}>
102
+						
103
+						<Text style={styles.Navsub}> Demographic Data Viewer</Text>
484 104
 							
485
-			 		 			<Button
486
-								title = "Noticias"
487
-				 				color = "white"
488
-			  					/>
489
-			  
490
-			  					
105
+						<View style = {styles.navContainer}>
106
+							<Pressable style={styles.buttons} onPress = {this.setNews}>
107
+								<Text style={styles.text}> Noticias</Text>
491 108
 							</Pressable>
492
-								
493
-							<Pressable style = {styles.buttons} onPress={this.setData}>
494
-							
495
-			 		 			<Button
496
-								title = "Datos"
497
-				 				color = "white"
498
-			  					/>
499
-			  
500
-			  					
109
+
110
+							<Pressable style={styles.buttons} onPress = {this.setHome}>
111
+								<Text style={styles.text}> Hogar</Text>
501 112
 							</Pressable>
502
-						
503
-						
504
-		  				{this.state.current}
113
+
114
+							<Pressable style={styles.buttons} onPress = {this.setData}>
115
+								<Text style={styles.text}> Datos</Text>
116
+							</Pressable>
117
+
118
+						</View>
119
+								
120
+						{this.state.current}
121
+
505 122
 					</View>
506
-					</ScrollView>
123
+
124
+				</View>
125
+
507 126
 			</View>
508
-		</View>
509
-      );
127
+		);
510 128
    }
511 129
 }
512 130
 

+ 393
- 0
Datos.js View File

@@ -0,0 +1,393 @@
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 {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
+var table = ""
108
+var pueblo = ""
109
+
110
+//where data will be stored
111
+var information
112
+
113
+function Picker() {    
114
+
115
+    //table to pick from
116
+  
117
+  
118
+  const [openTable, setOpenTable] = useState(false);
119
+  const [valueTable, setValueTable] = useState(null);
120
+  const [table, setTable] = useState([
121
+    {label:'DP02PR', value: 'DP02PR'},
122
+    {label:'DP03', value: 'DP03'},
123
+	{label:'DP04', value: 'DP04'},
124
+    {label:'DP05', value: 'DP05'},
125
+  ]);
126
+    
127
+  //cambiar pueblo
128
+  
129
+  
130
+  //pueblo
131
+  const [openPueblo, setOpenPueblo] = useState(false);
132
+  const [valuePueblo, setValuePueblo] = useState(null);
133
+  const [pueblo, setPueblo] = useState([
134
+    {label: 'Adjuntas', value: '001'},
135
+    {label: 'Aguada', value: '003'},
136
+	{label: 'Aguadillas', value: '005'},
137
+    {label: 'Aguas Buenas', value: '007'},
138
+	{label: 'Aibonito', value: '009'},
139
+    {label: 'Añasco', value: '011'},
140
+	{label: 'Arecibo', value: '013'},
141
+    {label: 'Arroyo', value: '015'},
142
+	{label: 'Barceloneta', value: '017'},
143
+    {label: 'Barranquitas', value: '019'},
144
+	{label: 'Bayamón', value: '021'},
145
+    {label: 'Cabo Rojo', value: '023'},
146
+	{label: 'Caguas', value: '025'},
147
+    {label: 'Camuy', value: '027'},
148
+	{label: 'Canóvanas', value: '029'},
149
+	{label: 'Carolina', value: '031'},
150
+	{label: 'Cataño', value: '033'},
151
+	{label: 'Cayey', value: '035'},
152
+	{label: 'Ceiba', value: '037'},
153
+	{label: 'Ciales', value: '039'},
154
+	{label: 'Cidra', value: '041'},
155
+	{label: 'Coamo', value: '043'},
156
+	{label: 'Comerío', value: '045'},
157
+	{label: 'Corozal', value: '047'},
158
+	{label: 'Culebra', value: '049'},
159
+	{label: 'Dorado', value: '051'},
160
+	{label: 'Fajardo', value: '053'},
161
+	{label: 'Florida', value: '054'},
162
+	{label: 'Guánica', value: '055'},
163
+	{label: 'Guayama', value: '057'},
164
+	{label: 'Guayanilla', value: '059'},
165
+	{label: 'Guaynabo', value: '061'},	
166
+	{label: 'Gurabo', value: '063'},
167
+	{label: 'Hatillo', value: '065'},
168
+	{label: 'Hormigueros', value: '067'},
169
+	{label: 'Humacao', value: '069'},
170
+	{label: 'Isabela', value: '071'},
171
+	{label: 'Jayuya', value: '073'},
172
+	{label: 'Juana Díaz', value: '075'},
173
+	{label: 'Juncos', value: '077'},
174
+	{label: 'Lajas', value: '079'},
175
+	{label: 'Lares', value: '081'},
176
+	{label: 'Las Marías', value: '083'},
177
+	{label: 'Las Piedras', value: '085'},
178
+	{label: 'Loíza', value: '087'},
179
+	{label: 'Luquillo', value: '089'},
180
+	{label: 'Manatí', value: '091'},
181
+	{label: 'Maricao', value: '093'},
182
+	{label: 'Maunabo', value: '095'},
183
+	{label: 'Mayagüez', value: '097'},
184
+	{label: 'Moca', value: '099'},
185
+	{label: 'Morovis', value: '101'},
186
+	{label: 'Naguabo', value: '103'},
187
+	{label: 'Naranjito', value: '105'},
188
+	{label: 'Orocovis', value: '107'},
189
+	{label: 'Patillas', value: '109'},
190
+	{label: 'Peñuelas', value: '111'},
191
+	{label: 'Ponce', value: '113'},
192
+	{label: 'Quebradillas', value: '115'},
193
+	{label: 'Rincón', value: '117'},
194
+	{label: 'Río Grande', value: '119'},
195
+	{label: 'Sabana Grande', value: '121'},
196
+	{label: 'Salinas', value: '123'},
197
+	{label: 'San Germán', value: '125'},
198
+	{label: 'San Juan', value: '127'},
199
+	{label: 'San Lorenzo', value: '129'},
200
+	{label: 'San Sebastián', value: '131'},
201
+	{label: 'Santa Isabel', value: '133'},
202
+	{label: 'Toa Alta', value: '135'},
203
+	{label: 'Toa Baja', value: '137'},
204
+	{label: 'Trujillo Alto', value: '139'},
205
+	{label: 'Utuado', value: '141'},
206
+	{label: 'Vega Alta', value: '143'},
207
+	{label: 'Vega Baja', value: '145'},
208
+	{label: 'Vieques', value: '147'},
209
+	{label: 'Villalba', value: '149'},
210
+	{label: 'Yabucoa', value: '151'},
211
+	{label: 'Yauco', value: '153'}
212
+  ]);
213
+  
214
+
215
+    return (
216
+        <View>
217
+            <DropDownPicker
218
+                open={openTable}
219
+                value={valueTable}
220
+                items={table}
221
+                setOpen={setOpenTable}
222
+                setValue={setValueTable}
223
+                setItems={setTable}
224
+                onChangeValue = {(valueTable) => {
225
+                    updateTable(valueTable);
226
+                }}
227
+                onOpen = {() => {setOpenPueblo(false)}}
228
+                zIndex={3000}
229
+                zIndexInverse={1000}
230
+                placeholder="Tabla de Datos"
231
+            />
232
+
233
+                
234
+            <DropDownPicker
235
+                searchable={true}
236
+                open={openPueblo}
237
+                value={valuePueblo}
238
+                items={pueblo}
239
+                setOpen={setOpenPueblo}
240
+                setValue={setValuePueblo}
241
+                setItems={setPueblo}
242
+                onChangeValue = {(valuePueblo) => {
243
+                    updatePueblo(valuePueblo);
244
+                }}
245
+                onOpen = {() => {setOpenTable(false)}}
246
+                zIndex={1000}
247
+                zIndexInverse={3000}
248
+                placeholder="Pueblo"
249
+                searchPlaceholder="Busqueda..."
250
+            />
251
+                
252
+        </View>
253
+
254
+    );
255
+}
256
+
257
+
258
+        
259
+function updateTable(value){
260
+    table = value
261
+}
262
+        
263
+function updatePueblo(value){
264
+    pueblo = value
265
+}
266
+        
267
+//calls data query
268
+function loadDoc(query) {
269
+	console.log("load")
270
+    var xhttp = new XMLHttpRequest();
271
+    xhttp.onreadystatechange = function() {
272
+        if (this.readyState == 4) {
273
+            information = this.responseText;
274
+			
275
+			if(this.status == 200){console.log("received response");organize()}
276
+            }
277
+        }
278
+        xhttp.open("GET", query, true);
279
+        xhttp.send(null);  
280
+        }
281
+        
282
+		
283
+function fetchData() {
284
+            
285
+        var query = "http://127.0.0.1:5378/table?table=" + table + "&municipality=" + pueblo 
286
+        if(pueblo && table)
287
+        {loadDoc(query)}
288
+
289
+        else
290
+        {Alert.alert("Please fill every parameter before calling!")}
291
+            
292
+    }
293
+
294
+
295
+
296
+//organize data make it pretty
297
+//add loading thing while this organizes all the data !!!
298
+
299
+function organize(){
300
+	
301
+	console.log(information)
302
+	
303
+	let bigData = JSON.parse(information)
304
+	
305
+	/*
306
+	var stringDiv = JSON.stringify(information)
307
+	stringDiv = stringDiv.replace('[[', '');
308
+	stringDiv = stringDiv.replace(']]', '');
309
+	stringDiv = stringDiv.split(',')
310
+	//create smaller array variables
311
+	let variables = []
312
+	let value = []
313
+	let est = []
314
+	
315
+	
316
+	//theres a better way to do this but im not fixing it rn
317
+	for(let i = 0; i<stringDiv.length; i++){
318
+
319
+		if(i<stringDiv.length/3)
320
+		    {variables.push(stringDiv[i])}
321
+		else if(i<stringDiv.length/3*2)
322
+		    {value.push(stringDiv[i])}
323
+		else
324
+            {est.push(stringDiv[i])}
325
+	}
326
+	
327
+	//anyways this to format it
328
+	
329
+	console.log("vars:",variables)
330
+	console.log("val:",value)
331
+	console.log("est:",est)
332
+	*/
333
+
334
+	
335
+}
336
+
337
+function json_2_csv(information){
338
+
339
+	const csv = parse(obj);
340
+	console.log(csv);
341
+}
342
+
343
+//fix
344
+
345
+DropDownPicker.setListMode("SCROLLVIEW")
346
+
347
+
348
+//data parsing goes here
349
+function getInfo(){
350
+	return information
351
+}
352
+
353
+//data display
354
+
355
+class DataButton extends React.Component{
356
+	
357
+	
358
+	state = {
359
+		updated: 1,
360
+		notUpdated: 0
361
+	}
362
+	
363
+	pullData = () => {fetchData(); this.setState({current: 1})}
364
+	
365
+	
366
+	//the reason you need to press the button twice is bc the http request doesnt finish in time
367
+	//for information to be updated before its rerendered
368
+	componentDidUpdate(){
369
+		console.log(this.state)
370
+		if(this.state.current == 1){
371
+			console.log("updating")
372
+			this.setState({current: 0})
373
+		}
374
+	}
375
+	
376
+	state = {current: 0}
377
+	
378
+	render() {
379
+		return(
380
+            <View style = {styles.container}>
381
+                    
382
+                    <Pressable style={styles.buttons} onPress = {this.pullData}>
383
+                        <Text style={styles.text}> Fetch Data</Text>
384
+                    </Pressable>
385
+                   
386
+                        <Text style={styles.sub}>{information}</Text> 
387
+                    
388
+            </View>
389
+	    );
390
+    }	
391
+}
392
+
393
+export { Picker, updateTable, updatePueblo,loadDoc,fetchData,DataButton};

+ 0
- 0
Home.js View File


+ 4
- 0
Noticias.js View File

@@ -0,0 +1,4 @@
1
+import React, {useState, useEffect} from 'react';
2
+import { View, Image, Text, Button, ScrollView, Pressable, Linking} from 'react-native';
3
+import {Picker, DataButton} from "./Datos"
4
+import { styles } from './styles';

+ 10
- 9
R.R View File

@@ -1,19 +1,19 @@
1 1
 library(tidycensus)
2 2
 library(tidyverse)
3
+library(plumber)
3 4
 
4 5
 
5
-#log on with API
6
-census_api_key("7a853acf81fd5758228680556ac831138c40b83e")
7
-
8
-
9
-
10
-callData = function(year,table,municipality) {
6
+#* Call table
7
+#* @get /table
8
+#* @serializer json
9
+callData = function(table,municipality) {
11 10
   
11
+  census_api_key("7a853acf81fd5758228680556ac831138c40b83e")
12 12
   #year is between 2000 and 2020
13 13
   #table is dp02pr, dp03, dp04, dp05
14 14
   
15 15
   #load variables
16
-  variables = load_variables(year,"acs5/profile")
16
+  variables = load_variables(2020,"acs5/profile")
17 17
   #load variable vectors
18 18
   codes = variables$name
19 19
   codesBool = startsWith(codes,table)
@@ -24,8 +24,9 @@ callData = function(year,table,municipality) {
24 24
   #pull table
25 25
   bigTable = get_acs(geography = "county",
26 26
                  state = "PR",
27
-                 year = year,
27
+                 year = 2020,
28 28
                  county = municipality,
29
+                 survey = "acs5",
29 30
                  variables = codes)
30 31
   
31 32
   bigTable$Label = labels
@@ -33,5 +34,5 @@ callData = function(year,table,municipality) {
33 34
   return(bigTable)
34 35
 }
35 36
 
36
-table = callData(2020,"DP05","Aguada")
37
+
37 38
 

+ 1
- 3
fetchData.js View File

@@ -46,11 +46,9 @@ class DataButton extends React.Component{
46 46
 
47 47
 function createQuery(pueblo, table) {
48 48
 	
49
-	const queryBase = "https://api.census.gov/data/2020/acs/acs5/profile?get=group"
50
-	const queryEnd = "&in=state:72"
51 49
 	console.log("fetching data")
52 50
 	
53
-	var query = queryBase + "(" + table + ")&for=county:" + pueblo + queryEnd 
51
+	var query = "http://127.0.0.1:5378/table?table=" table + "&municipality=" + pueblo 
54 52
 	
55 53
 	if(pueblo && table)
56 54
 	{return query}

BIN
logonoback.png View File


BIN
logosmall.jpg View File


+ 65
- 0
sorting.py View File

@@ -0,0 +1,65 @@
1
+"""
2
+Carlos J Corrada Bravo
3
+Este programa calcula el promedio de tiempo de ejecucion de cuatro algoritmos de ordenamiento
4
+La variable maxValor define el valor maximo de los elementos de la lista
5
+La variable largoLista define el largo de las listas a ordenar
6
+La variable veces define las veces que se va a hacer el ordenamiento 
7
+Al final se imprimen los promedios de cada algortimo
8
+"""
9
+from random import randint
10
+import time
11
+
12
+def mergeSort(lista):
13
+	#definan el algoritmo de ordenamiento mergesort
14
+	return lista
15
+
16
+def heapSort(lista):
17
+	#definan el algoritmo de ordenamiento heapsort
18
+	return lista
19
+
20
+def quickSort(lista):
21
+	#definan el algoritmo de ordenamiento quicksort
22
+	return lista
23
+
24
+def shellSort(lista):
25
+	#definan el algoritmo de ordenamiento shellsort
26
+	return lista
27
+
28
+maxValor=1000 	#define el valor maximo de los elementos de la lista
29
+largoLista=1000 #define el largo de las listas a ordenar
30
+veces=100 		#define las veces que se va a hacer el ordenamiento 
31
+
32
+acumulaMerge=0 	#variable para acumular el tiempo de ejecucion del mergesort
33
+acumulaHeap=0 	#variable para acumular el tiempo de ejecucion del heapsort
34
+acumulaQuick=0 	#variable para acumular el tiempo de ejecucion del quicksort
35
+acumulaShell=0 	#variable para acumular el tiempo de ejecucion del shellsort
36
+
37
+for i in range(veces):
38
+	mergelista = [randint(0,maxValor) for r in range(largoLista)] #creamos una lista con valores al azar
39
+	heaplista=list(mergelista)
40
+	quicklista=list(mergelista)
41
+	searchlista=list(mergelista)
42
+
43
+	t1 = time.clock() 				#seteamos el tiempo al empezar
44
+	mergeSort(mergelista) 				#ejecutamos el algoritmo mergeSort
45
+	acumulaMerge+=time.clock()-t1 	#acumulamos el tiempo de ejecucion
46
+	
47
+	t1 = time.clock()				#seteamos el tiempo al empezar
48
+	heapSort(heaplista)					#ejecutamos el algoritmo heapSort
49
+	acumulaHeap+=time.clock()-t1 	#acumulamos el tiempo de ejecucion
50
+	
51
+	t1 = time.clock()				#seteamos el tiempo al empezar
52
+	quickSort(quicklista)				#ejecutamos el algoritmo quickSort
53
+	acumulaQuick+=time.clock()-t1 	#acumulamos el tiempo de ejecucion
54
+	
55
+	t1 = time.clock()				#seteamos el tiempo al empezar
56
+	shellSort(searchlista)				#ejecutamos el algoritmo shellSort
57
+	acumulaShell+=time.clock()-t1 	#acumulamos el tiempo de ejecucion
58
+
59
+#imprimos los resultados
60
+print "Promedio de tiempo de ejecucion de "+ str(veces) +" listas de largo " + str(largoLista)
61
+print "MergeSort " + str(acumulaMerge/veces) + " segundos"
62
+print "HeapSort " + str(acumulaHeap/veces) + " segundos"
63
+print "QuickSort " + str(acumulaQuick/veces) + " segundos"
64
+print "ShellSort " + str(acumulaShell/veces) + " segundos"
65
+

+ 35
- 20
styles.js View File

@@ -1,5 +1,4 @@
1
-//styles
2
-
1
+import { StyleSheet} from 'react-native';
3 2
 const styles = StyleSheet.create({
4 3
 	
5 4
   buttons: {
@@ -12,24 +11,25 @@ const styles = StyleSheet.create({
12 11
 	  borderRadius: 8,
13 12
 	  padding: (30, 16),
14 13
 	  backgroundColor: "black",
15
-	  marginTop: 0
14
+	  marginTop: 0,
16 15
   }, 
16
+  navContainer: {
17
+	flexDirection: 'row',
18
+	justifyContent: "space-evenly",
19
+	borderColor: "black",
20
+	borderWidth: 5,
21
+	borderRadius: 8,
22
+	paddingTop: 20,
23
+	backgroundColor: "gray",
24
+	marginTop: 5,
25
+}, 
17 26
   buttonContainer: {
18 27
     flexDirection: 'column',
19 28
     backgroundColor: '#f0f8ff',
20
-    // alignItems: 'center',
21
-    // justifyContent: 'center',
22
-	paddingTop:40,
23
-	marginTop: 15,
24
-  },
25
-  bottom: {
26
-    flex: 0.3,
27
-    backgroundColor: "gray",
28
-    borderWidth: 5,
29
-    borderBottomLeftRadius: 20,
30
-    borderBottomRightRadius: 20,
31
-	alignItems:'center',
32
-
29
+    alignItems: 'center',
30
+    justifyContent: 'center',
31
+	paddingTop:100,
32
+	marginTop: 40,
33 33
   },
34 34
   container: {
35 35
     flexDirection: 'column',
@@ -38,10 +38,8 @@ const styles = StyleSheet.create({
38 38
     alignItems: 'center',
39 39
     justifyContent: 'center',
40 40
 	paddingTop:20,
41
-	marginTop: 15,
41
+	marginTop: 20,
42 42
   },
43
-
44
-
45 43
   containerbackground:{
46 44
 	
47 45
     backgroundColor: '#f0f8ff'
@@ -85,5 +83,22 @@ const styles = StyleSheet.create({
85 83
 	  marginBottom: 30,
86 84
 	  margin: 30,
87 85
 	  borderColor: "grey",
88
-  }
86
+  },
87
+  bottom: {
88
+    flex: 0.3,
89
+    backgroundColor: "gray",
90
+    borderWidth: 5,
91
+	alignItems: 'center',
92
+    borderBottomLeftRadius: 20,
93
+    borderBottomRightRadius: 20,
94
+  
95
+},text: {
96
+    fontSize: 16,
97
+    lineHeight: 21,
98
+    fontWeight: 'bold',
99
+    letterSpacing: 0.25,
100
+    color: 'white',
101
+  },
89 102
 });
103
+
104
+export {styles};

+ 0
- 25
yarn.lock View File

@@ -2799,13 +2799,6 @@
2799 2799
   "resolved" "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
2800 2800
   "version" "2.2.0"
2801 2801
 
2802
-"bindings@^1.5.0":
2803
-  "integrity" "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="
2804
-  "resolved" "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz"
2805
-  "version" "1.5.0"
2806
-  dependencies:
2807
-    "file-uri-to-path" "1.0.0"
2808
-
2809 2802
 "bl@^4.1.0":
2810 2803
   "integrity" "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w=="
2811 2804
   "resolved" "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz"
@@ -5401,19 +5394,6 @@
5401 5394
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
5402 5395
   "version" "1.0.0"
5403 5396
 
5404
-"fsevents@^1.2.7":
5405
-  "integrity" "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw=="
5406
-  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz"
5407
-  "version" "1.2.13"
5408
-  dependencies:
5409
-    "bindings" "^1.5.0"
5410
-    "nan" "^2.12.1"
5411
-
5412
-"fsevents@^2.1.2", "fsevents@~2.3.2":
5413
-  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
5414
-  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
5415
-  "version" "2.3.2"
5416
-
5417 5397
 "function-bind@^1.1.1":
5418 5398
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
5419 5399
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -7663,11 +7643,6 @@
7663 7643
     "object-assign" "^4.0.1"
7664 7644
     "thenify-all" "^1.0.0"
7665 7645
 
7666
-"nan@^2.12.1":
7667
-  "integrity" "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ=="
7668
-  "resolved" "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz"
7669
-  "version" "2.17.0"
7670
-
7671 7646
 "nanomatch@^1.2.9":
7672 7647
   "integrity" "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA=="
7673 7648
   "resolved" "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"