diff --git a/src/app/components/MapModal.js b/src/app/components/MapModal.js
index 50ad8e2..fe06bef 100644
--- a/src/app/components/MapModal.js
+++ b/src/app/components/MapModal.js
@@ -4,8 +4,12 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
import SelfClosingModal from "../components/SelfClosingModal";
import colors from "../config/colors";
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 { 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.
*
@@ -151,11 +155,19 @@ function reviews(props) {
);
}
+function moreInfo() {
+ return (
+
+
+
+ );
+}
+
function componentBody(props) {
// NOTE: This code is refered to our local SQLite solution. Revise this when implement rest API.
const pictures = JSON.parse(props.pictures);
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 (
@@ -187,7 +199,8 @@ function MapModal(props) {
>
{topBar(props)}
{componentBody(props)}
- {reviews(props)}
+ {props.name === "pluviometer" ? moreInfo(props) : null}
+ {props.name !== "pluviometer" ? reviews(props) : null}
);
}
@@ -235,6 +248,16 @@ const styles = StyleSheet.create({
fontWeight: "500",
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;
diff --git a/src/app/components/PluviometerGraphics.js b/src/app/components/PluviometerGraphics.js
new file mode 100644
index 0000000..229bee0
--- /dev/null
+++ b/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 (
+
+
+ Data
+
+ );
+}
+
+export default PluviometerGraphics;