forked from cemaden-educacao/WPD-MobileApp
analuizaff
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