forked from cemaden-educacao/WPD-MobileApp
GabrielTrettel
4 years ago
2 changed files with 89 additions and 3 deletions
@ -0,0 +1,63 @@ |
|||||
|
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 } from "react-native-chart-kit"; |
||||
|
|
||||
|
import { Dimensions } from "react-native"; |
||||
|
|
||||
|
const screenWidth = Dimensions.get("window").width * 0.95; |
||||
|
const screenHeight = Dimensions.get("window").height * 0.3; |
||||
|
|
||||
|
const data = { |
||||
|
//substituir por dados da API
|
||||
|
labels: ["01/01", "01/02", "01/03", "01/04", "01/05"], |
||||
|
datasets: [ |
||||
|
{ |
||||
|
data: [0, 10, 20, 25, 5], |
||||
|
color: () => colors.gold, |
||||
|
strokeWidth: 2, |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
legend: ["Registros pluviométricos"], |
||||
|
}; |
||||
|
const chartConfig = { |
||||
|
backgroundGradientFrom: 0, |
||||
|
backgroundGradientFromOpacity: 0, |
||||
|
backgroundGradientTo: "#08130D", |
||||
|
backgroundGradientToOpacity: 0, |
||||
|
color: () => colors.primary, |
||||
|
strokeWidth: 2, // optional, default 3
|
||||
|
useShadowColorFromDataset: true, |
||||
|
propsForLabels: { |
||||
|
fontSize: 12, |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
function PluviometerGraphics({ chartHeight = screenHeight }) { |
||||
|
return ( |
||||
|
<View |
||||
|
style={{ |
||||
|
padding: 10, |
||||
|
flex: 1, |
||||
|
alignItems: "center", |
||||
|
flexDirection: "column", |
||||
|
}} |
||||
|
> |
||||
|
<LineChart |
||||
|
data={data} |
||||
|
width={screenWidth} |
||||
|
height={chartHeight} |
||||
|
chartConfig={chartConfig} |
||||
|
withVerticalLines={false} |
||||
|
yAxisSuffix="mm" |
||||
|
/> |
||||
|
<Text style={{ textAlign: "center" }}>Data</Text> |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default PluviometerGraphics; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue