app

App.js

@@ -1,8 +1,9 @@
 import { StatusBar } from 'expo-status-bar';
 import React, {useState, useEffect} from 'react';
 import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable} from 'react-native';
-import data from './transfer.json' 
 import DropDownPicker from 'react-native-dropdown-picker';
+//import JSON;
+//import { Dataframe, readJSON } from "danfojs";
 
 //where data will be put
 var organizedData
@@ -11,10 +12,37 @@ var organizedData
 var information = "data goes here"
 
 //organize data make it pretty
+
+//add loading thing while this organizes all the data !!!
+
 function organize(){
 	
+	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<stringDiv.length; i++){
+		if(i<stringDiv.length/3)
+		{variables.push(stringDiv[i])}
+		else if(i<stringDiv.length/3*2)
+		{value.push(stringDiv[i])}
+		else{est.push(stringDiv[i])}
+	}
 	
+	//anyways this to format it
 	
+	console.log("vars:",variables)
+	console.log("val:",value)
+	console.log("est:",est)
+	//organizedData = JSON.parse(information)
+	//console.log(stringDiv)
 	
 }
 
@@ -44,7 +72,7 @@ function loadDoc(query) {
   xhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
          information = this.responseText;
-		 //organize()
+		 organize()
   }
   };
   xhttp.open("GET", query, true);
@@ -63,9 +91,10 @@ function fetchData() {
 	
 	var query = queryBase + "(" + table + ")&for=county:" + pueblo + queryEnd 
 	
-	console.log(query)
-	
-	loadDoc(query)
+	if(pueblo && table)
+	{loadDoc(query)}
+	else
+	{Alert.alert("Please fill every parameter before calling!")}
 	
 }
 
@@ -154,78 +183,34 @@ const handlePress = () => false
 
 
 //data parsing goes here
-
-function importJSON() {
-	var stuff = JSON.stringify(data)
-	return stuff
+function getInfo(){
+	//console.log(information[6])
+	return information
 }
 
-
 //data display
 
-function DataDisplay({valueTable, valuePueblo}) {
-  const [tableValue, setTableValue] = useState(null);
-  const [puebloValue, setPuebloValue] = useState(null);
-  
-  console.log("tableOption:",valueTable)
-  console.log("puebloOption:",valuePueblo)
+class DataButton extends React.Component{
 	
-//theres something wrong with this, its applying the previous value of valueTable and valuePueblo instead of the actual value
-
-  useEffect(() => {
-    setTableValue(valueTable);
-	console.log("tableValue:",tableValue)
-	//if not undefined
-	if(tableValue){updateTable(tableValue);}   
-  }, [valueTable]); // add props as dependencies
-  
-  useEffect(() => {
-    setPuebloValue(valuePueblo);
-	console.log("puebloValue:",puebloValue)
-    if(puebloValue){updatePueblo(puebloValue)};
-  }, [valuePueblo]); // add props as dependencies
+	state = {
+		click: false
+	}
 	
-
-  return (
-  <View>
-    <Text style={styles.sub}>{information}</Text>
-	<Button
-		onPress = {fetchData()}
-		title = "Fetch Data"
-		color = "black"
-		/>
-   </View>	  
-  );
-}
-
-//data pick
-/*
-function Parent() {
-  const [parentOption, setParentOption] = useState(0);
-
-  return (
-    <View>
-		<Pressable onPress = {() => setParentOption(current => 1)}>
-			<Text style = {styles.listItem}> DP02PR </Text>
-		</Pressable>
-			
-		<Pressable onPress = {() => setParentOption(current => 2)}>
-			<Text style = {styles.listItem}> DP03PR </Text>
-		</Pressable>
-			
-		<Pressable onPress = {() => setParentOption(current => 3)}>
-			<Text style = {styles.listItem}> DP04PR </Text>
-		</Pressable>
-			
-		<Pressable onPress = {() => setParentOption(current => 4)}>
-			<Text style = {styles.listItem}> DP05PR </Text>
-		</Pressable>
-
-		<DataDisplay parentOption={parentOption} />
-    </View>
-  );
+	pullData = () => {fetchData(); this.setState({click: true})}
+	
+	
+	render() {
+		return(
+		<View>
+			<Button
+			onPress = {this.pullData}
+			title = "Fetch Data"
+			color = "black"
+			/>
+			<Text style={styles.sub}>{getInfo()}</Text> 
+		</View>
+	);}	
 }
-*/
 
 
 //picker test
@@ -236,7 +221,6 @@ function Picker() {
   
   
   const [openTable, setOpenTable] = useState(false);
-  //const [tableOption, setTableOption] = useState(0);
   const [valueTable, setValueTable] = useState(null);
   const [table, setTable] = useState([
     {label:'DP02PR', value: 'DP02PR'},
@@ -250,7 +234,6 @@ function Picker() {
   
   //pueblo
   const [openPueblo, setOpenPueblo] = useState(false);
-  //const [puebloOption, setPuebloOption] = useState(0);
   const [valuePueblo, setValuePueblo] = useState(null);
   const [pueblo, setPueblo] = useState([
     {label: 'Adjuntas', value: '001'},
@@ -333,9 +316,6 @@ function Picker() {
 	{label: 'Yauco', value: '153'}
   ]);
   
-  
-  //make sure pickers are closed when another opens
-  
 
   return (
   <View>
@@ -346,9 +326,9 @@ function Picker() {
       setOpen={setOpenTable}
       setValue={setValueTable}
       setItems={setTable}
-	  //onChangeValue={(valueTable) => {
-	//	setTableOption(current => valueTable);
-	//	}}
+	  onChangeValue = {(valueTable) => {
+		updateTable(valueTable);
+		}}
 	  onOpen = {() => {setOpenPueblo(false)}}
 	  zIndex={3000}
 	  zIndexInverse={1000}
@@ -363,9 +343,9 @@ function Picker() {
       setOpen={setOpenPueblo}
       setValue={setValuePueblo}
       setItems={setPueblo}
-	  //onChangeValue={(valuePueblo) => {
-	//	setPuebloOption(current => valuePueblo);
-	//	}}
+	  onChangeValue = {(valuePueblo) => {
+		updatePueblo(valuePueblo);
+		}}
 	  onOpen = {() => {setOpenTable(false)}}
 	  zIndex={1000}
       zIndexInverse={3000}
@@ -373,8 +353,6 @@ function Picker() {
 	  searchPlaceholder="Busqueda..."
     />
 	
-	<DataDisplay valueTable={valueTable} valuePueblo={valuePueblo} />
-	
 	</View>
   );
 }
@@ -385,7 +363,7 @@ function Picker() {
 
 class App extends React.Component {
 
-
+//the text at the end of a page gets cut off if anyone knows how to fix that?
 vars = {
 		welcome:
 		  
@@ -428,11 +406,15 @@ vars = {
 		 <View style = {styles.container}>
 			
 		  
-			<Text style={styles.intro}>DATA VIEWING</Text>		
-			
+			<Text style={styles.intro}>DATA VIEWING PROJECT</Text>		
+				
 			<Picker />
 			
 			<Image source={require('./testimg.gif')} />
+				
+			<DataButton />
+			
+			<Text style={styles.sub}>blehhhhhh bleh bleh bleh bleh bleh blehhhhhhhhhhhhhhhhh </Text>
 			
 		 </View>
 		</ScrollView></View>
@@ -469,13 +451,13 @@ setNews = () => this.setState({ current: this.vars.newsView })
 			 		 			<Button
 								onPress = {this.setNews}
 				 				title = "Noticias"
-				 				color = "white"
+				 				color = "rgba(255, 0, 0, 0)"
 			  					/>
 			  
 			  					<Button
 								 onPress = {this.setData}
 								 title = "Datos"
-								 color = "white"
+								 color = "rgba(255, 0, 0, 0)"
 			  					/>
 							</View>
 						

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@expo/webpack-config": "^0.17.2",
     "@react-native-picker/picker": "^2.4.8",
+    "danfojs": "^1.1.2",
     "expo": "^47.0.6",
     "expo-font": "~11.0.1",
     "expo-splash-screen": "~0.17.5",