Browse Source

adjuting pluviometer diary's screen

master
analuizaff 4 years ago
parent
commit
2c621a53cc
  1. 53
      src/app/screens/PluviometerDiaryScreen.js
  2. 8
      src/package-lock.json

53
src/app/screens/PluviometerDiaryScreen.js

@ -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={{

8
src/package-lock.json

@ -16819,6 +16819,14 @@
}
}
},
"react-navigation-header-buttons": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/react-navigation-header-buttons/-/react-navigation-header-buttons-7.0.1.tgz",
"integrity": "sha512-ggIXhshnRv3Kaqw1ZlZLqMPtBOsLY4FLxxEOCHKe/XuWVfZGPmMqZBC/S4H8cQgIGRyFNOrypXF69Hb7fXMWNg==",
"requires": {
"invariant": ">=2"
}
},
"react-navigation-tabs": {
"version": "2.10.1",
"resolved": "https://registry.npmjs.org/react-navigation-tabs/-/react-navigation-tabs-2.10.1.tgz",

Loading…
Cancel
Save