Browse Source

Adding chart to pluviometer diary screen

master
analuizaff 4 years ago
parent
commit
947bf0548a
  1. 2
      src/app/config/colors.js
  2. 97
      src/app/screens/PluviometerDiaryScreen.js

2
src/app/config/colors.js

@ -11,4 +11,6 @@ export default {
gray: "#999999", gray: "#999999",
lightestGray: "#F0F0F0", lightestGray: "#F0F0F0",
lightBlue: "#1976D2", lightBlue: "#1976D2",
gold: "#ffd700",
}; };

97
src/app/screens/PluviometerDiaryScreen.js

@ -4,24 +4,65 @@ import { StyleSheet, Text, View } from "react-native";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import { dimensions, scaleDimsFromWidth } from "../config/dimensions"; import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
import colors from "../config/colors/"; import colors from "../config/colors/";
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart
} from "react-native-chart-kit";
import { FontAwesome5 } from '@expo/vector-icons'; import { FontAwesome5 } from '@expo/vector-icons';
import { MaterialIcons } from "@expo/vector-icons"; import { MaterialIcons } from "@expo/vector-icons";
import { Dimensions } from "react-native";
const dims = scaleDimsFromWidth(85, 85, 25); const dims = scaleDimsFromWidth(85, 85, 25);
function PluviometerDiaryScreen(props) { function PluviometerDiaryScreen(props) {
//Substituir por dados vindos da API //Substituir por dados vindos da API
const school = "Escola registrada do pluviômetro";
const school = "Escola registrada do pluviômetro";
const profile = "Tipo de perfil do usuário"; const profile = "Tipo de perfil do usuário";
const local = "Endereço registrado do pluviômetro"
const local = "Endereço registrado do pluviômetro"
const screenWidth = Dimensions.get("window").width;
const data = {
labels: ["January", "February", "March", "April", "May"],
datasets: [
{
data: [0, 10, 20, 35, 40, 60],
color: () => colors.gold, // optional
strokeWidth: 2 // optional
}
],
legend: ["Registros pluviometricos"] // optional
};
const chartConfig = {
backgroundGradientFrom: 0,
backgroundGradientFromOpacity: 0,
backgroundGradientTo: "#08130D",
backgroundGradientToOpacity: 0,
color: () => colors.primary,
strokeWidth: 2, // optional, default 3
barPercentage: 0.5,
useShadowColorFromDataset: false // optional
};
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={{ textAlign: "center" }}>
Gráfico do pluviometro
</Text>
<LineChart
data={data}
width={screenWidth}
height={200}
chartConfig={chartConfig}
withVerticalLines={false}
/>
</View> </View>
<View <View
style={{ style={{
@ -32,24 +73,24 @@ function PluviometerDiaryScreen(props) {
}}> }}>
{/* Endereço */} {/* Endereço */}
< View style={{ flex: 1 }}> < View style={{ flex: 1 }}>
<View style={styles.location}>
<View style={styles.mapIcon}>
<MaterialIcons
name="location-on"
size={28}
color="white"
alignItems="center"
alignContent="center"
/>
</View>
<View style={styles.adressText}>
<Text style={{
fontSize: dimensions.text.default,
}}>
{local}
</Text>
</View>
</View>
<View style={styles.location}>
<View style={styles.mapIcon}>
<MaterialIcons
name="location-on"
size={28}
color="white"
alignItems="center"
alignContent="center"
/>
</View>
<View style={styles.adressText}>
<Text style={{
fontSize: dimensions.text.default,
}}>
{local}
</Text>
</View>
</View>
</View> </View>
{/* Escola */} {/* Escola */}
@ -68,8 +109,8 @@ function PluviometerDiaryScreen(props) {
<Text style={{ <Text style={{
fontSize: dimensions.text.default, fontSize: dimensions.text.default,
}}> }}>
{ school }
</Text>
{school}
</Text>
</View> </View>
</View> </View>
</View> </View>
@ -90,8 +131,8 @@ function PluviometerDiaryScreen(props) {
<Text style={{ <Text style={{
fontSize: dimensions.text.default, fontSize: dimensions.text.default,
}}> }}>
{ profile }
</Text>
{profile}
</Text>
</View> </View>
</View> </View>
</View> </View>

Loading…
Cancel
Save