diff --git a/src/app/config/colors.js b/src/app/config/colors.js index 76945a1..22fcddb 100644 --- a/src/app/config/colors.js +++ b/src/app/config/colors.js @@ -11,4 +11,6 @@ export default { gray: "#999999", lightestGray: "#F0F0F0", lightBlue: "#1976D2", + gold: "#ffd700", + }; diff --git a/src/app/screens/PluviometerDiaryScreen.js b/src/app/screens/PluviometerDiaryScreen.js index ebc4107..0c9585d 100644 --- a/src/app/screens/PluviometerDiaryScreen.js +++ b/src/app/screens/PluviometerDiaryScreen.js @@ -4,27 +4,68 @@ import { StyleSheet, Text, View } from "react-native"; import Screen from "../components/Screen"; import { dimensions, scaleDimsFromWidth } from "../config/dimensions"; import colors from "../config/colors/"; +import { + LineChart, + BarChart, + PieChart, + ProgressChart, + ContributionGraph, + StackedBarChart +} from "react-native-chart-kit"; import { FontAwesome5 } from '@expo/vector-icons'; import { MaterialIcons } from "@expo/vector-icons"; +import { Dimensions } from "react-native"; + const dims = scaleDimsFromWidth(85, 85, 25); + function PluviometerDiaryScreen(props) { //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 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 ( - - Gráfico do pluviometro - - + {/* Endereço */} < View style={{ flex: 1 }}> - - - - - - - {local} - - - + + + + + + + {local} + + + {/* Escola */} @@ -68,8 +109,8 @@ function PluviometerDiaryScreen(props) { - { school } - + {school} + @@ -90,8 +131,8 @@ function PluviometerDiaryScreen(props) { - { profile } - + {profile} +