|
|
@ -1,17 +1,10 @@ |
|
|
|
import React, { useState, useContext, useEffect } from "react"; |
|
|
|
import React from "react"; |
|
|
|
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 { LineChart } from "react-native-chart-kit"; |
|
|
|
|
|
|
|
import { FontAwesome5 } from '@expo/vector-icons'; |
|
|
|
import { MaterialIcons } from "@expo/vector-icons"; |
|
|
@ -19,26 +12,20 @@ import { Dimensions } from "react-native"; |
|
|
|
|
|
|
|
|
|
|
|
const dims = scaleDimsFromWidth(85, 85, 25); |
|
|
|
const screenWidth = (Dimensions.get("window").width) * 0.95; |
|
|
|
const screenHeight = Dimensions.get('window').height * 0.30; |
|
|
|
|
|
|
|
|
|
|
|
function PluviometerDiaryScreen(props) { |
|
|
|
//Substituir por dados vindos da API
|
|
|
|
const school = "Escola registrada do pluviômetro"; |
|
|
|
const profile = "Tipo de perfil do usuário"; |
|
|
|
const local = "Endereço registrado do pluviômetro" |
|
|
|
|
|
|
|
const screenWidth = Dimensions.get("window").width; |
|
|
|
|
|
|
|
const data = { |
|
|
|
labels: ["January", "February", "March", "April", "May"], |
|
|
|
const data = { //substituir por dados da API
|
|
|
|
labels: ["01/01", "01/02", "01/03", "01/04", "01/05"], |
|
|
|
datasets: [ |
|
|
|
{ |
|
|
|
data: [0, 10, 20, 35, 40, 60], |
|
|
|
color: () => colors.gold, // optional
|
|
|
|
strokeWidth: 2 // optional
|
|
|
|
data: [0, 10, 20, 25, 5 ], |
|
|
|
color: () => colors.gold, |
|
|
|
strokeWidth: 2, |
|
|
|
} |
|
|
|
], |
|
|
|
legend: ["Registros pluviometricos"] // optional
|
|
|
|
|
|
|
|
legend: ["Registros pluviométricos"] |
|
|
|
}; |
|
|
|
const chartConfig = { |
|
|
|
backgroundGradientFrom: 0, |
|
|
@ -47,22 +34,32 @@ const chartConfig = { |
|
|
|
backgroundGradientToOpacity: 0, |
|
|
|
color: () => colors.primary, |
|
|
|
strokeWidth: 2, // optional, default 3
|
|
|
|
barPercentage: 0.5, |
|
|
|
useShadowColorFromDataset: false // optional
|
|
|
|
useShadowColorFromDataset: true, |
|
|
|
propsForLabels: { |
|
|
|
fontSize: 12, |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
function PluviometerDiaryScreen(props) { |
|
|
|
//Substituir por dados vindos da API
|
|
|
|
const school = "Escola registrada do pluviômetro"; |
|
|
|
const profile = "Tipo de perfil do usuário"; |
|
|
|
const local = "Endereço registrado do pluviômetro"; |
|
|
|
|
|
|
|
return ( |
|
|
|
<Screen style={styles.container}> |
|
|
|
<View style={{ flex: 1 }}> |
|
|
|
<View style={{ flex: 1, alignItems: "center", flexDirection: "row"}}> |
|
|
|
<LineChart |
|
|
|
data={data} |
|
|
|
width={screenWidth} |
|
|
|
height={200} |
|
|
|
height={screenHeight} |
|
|
|
chartConfig={chartConfig} |
|
|
|
withVerticalLines={false} |
|
|
|
yAxisSuffix="mm" |
|
|
|
/> |
|
|
|
<Text style={{ textAlign:"center" }}>Data</Text> |
|
|
|
</View> |
|
|
|
<View |
|
|
|
style={{ |
|
|
|