Browse Source

Adding chart to pluviometer diary screen

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

2
src/app/config/colors.js

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

53
src/app/screens/PluviometerDiaryScreen.js

@ -4,24 +4,65 @@ 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 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"],
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 (
<Screen style={styles.container}>
<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
style={{
@ -68,7 +109,7 @@ function PluviometerDiaryScreen(props) {
<Text style={{
fontSize: dimensions.text.default,
}}>
{ school }
{school}
</Text>
</View>
</View>
@ -90,7 +131,7 @@ function PluviometerDiaryScreen(props) {
<Text style={{
fontSize: dimensions.text.default,
}}>
{ profile }
{profile}
</Text>
</View>
</View>

Loading…
Cancel
Save