Adding pluviometer chart in map modal

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 (
+    <View style={styles.pluviometer_diary}>
+      <PluviometerGraphics chartHeight={chartHeight} />
+    </View>
+  );
+}
+
 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 (
     <View style={styles.bodyRow}>
@@ -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}
     </SelfClosingModal>
   );
 }
@@ -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;

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;