Browse Source

Adding pluviometer chart in map modal

master
GabrielTrettel 4 years ago
parent
commit
200411c1f0
  1. 29
      src/app/components/MapModal.js
  2. 63
      src/app/components/PluviometerGraphics.js

29
src/app/components/MapModal.js

@ -4,8 +4,12 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
import SelfClosingModal from "../components/SelfClosingModal"; import SelfClosingModal from "../components/SelfClosingModal";
import colors from "../config/colors"; import colors from "../config/colors";
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import { dimensions } from "../config/dimensions";
import { dimensions, screen_height } from "../config/dimensions";
import { Svg, Image as ImageSvg } from "react-native-svg"; import { Svg, Image as ImageSvg } from "react-native-svg";
import { ScrollView } from "react-native-gesture-handler";
import PluviometerGraphics from "./PluviometerGraphics";
const chartHeight = screen_height * 0.3;
/* NOTE: `Edit` and `Delete` icons behavior not implemented yet. /* NOTE: `Edit` and `Delete` icons behavior not implemented yet.
* *
@ -151,11 +155,19 @@ function reviews(props) {
); );
} }
function moreInfo() {
return (
<View style={styles.pluviometer_diary}>
<PluviometerGraphics chartHeight={chartHeight} />
</View>
);
}
function componentBody(props) { function componentBody(props) {
// NOTE: This code is refered to our local SQLite solution. Revise this when implement rest API. // NOTE: This code is refered to our local SQLite solution. Revise this when implement rest API.
const pictures = JSON.parse(props.pictures); const pictures = JSON.parse(props.pictures);
const date = props.date ? props.date : "implementando..."; const date = props.date ? props.date : "implementando...";
const address = props.address ? props.address : "Erro ao carregar endereço"
const address = props.address ? props.address : "Erro ao carregar endereço";
return ( return (
<View style={styles.bodyRow}> <View style={styles.bodyRow}>
@ -187,7 +199,8 @@ function MapModal(props) {
> >
{topBar(props)} {topBar(props)}
{componentBody(props)} {componentBody(props)}
{reviews(props)}
{props.name === "pluviometer" ? moreInfo(props) : null}
{props.name !== "pluviometer" ? reviews(props) : null}
</SelfClosingModal> </SelfClosingModal>
); );
} }
@ -235,6 +248,16 @@ const styles = StyleSheet.create({
fontWeight: "500", fontWeight: "500",
fontSize: dimensions.text.default, fontSize: dimensions.text.default,
}, },
link: {
alignSelf: "center",
color: colors.lightBlue,
fontWeight: "500",
fontSize: dimensions.text.default,
},
pluviometer_diary: {
height: chartHeight * 1.4,
paddingVertical: 20,
},
}); });
export default MapModal; export default MapModal;

63
src/app/components/PluviometerGraphics.js

@ -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;
Loading…
Cancel
Save