Adding chart to pluviometer diary screen

src/app/config/colors.js

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

src/app/screens/PluviometerDiaryScreen.js

@@ -4,27 +4,68 @@ 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 school = "Escola registrada do pluviômetro";
     const profile = "Tipo de perfil do usuário";
-    const local   = "Endereço registrado do pluviômetro"
+    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={{                    
+                style={{
                     flex: 1,
                     flexDirection: "column",
                     alignContent: "flex-start",
@@ -32,24 +73,24 @@ function PluviometerDiaryScreen(props) {
                 }}>
                 {/* Endereço */}
                 < View style={{ flex: 1 }}>
-                <View style={styles.location}>
-                <View style={styles.mapIcon}>
-                    <MaterialIcons
-                        name="location-on"
-                        size={28}
-                        color="white"
-                        alignItems="center"
-                        alignContent="center"
-                    />
-                </View>
-                <View style={styles.adressText}>
-                    <Text style={{
-                        fontSize: dimensions.text.default,
-                    }}>
-                        {local}
-                    </Text>
-                </View>
-                </View>
+                    <View style={styles.location}>
+                        <View style={styles.mapIcon}>
+                            <MaterialIcons
+                                name="location-on"
+                                size={28}
+                                color="white"
+                                alignItems="center"
+                                alignContent="center"
+                            />
+                        </View>
+                        <View style={styles.adressText}>
+                            <Text style={{
+                                fontSize: dimensions.text.default,
+                            }}>
+                                {local}
+                            </Text>
+                        </View>
+                    </View>
                 </View>
 
                 {/* Escola */}
@@ -68,8 +109,8 @@ function PluviometerDiaryScreen(props) {
                             <Text style={{
                                 fontSize: dimensions.text.default,
                             }}>
-                                { school }
-                        </Text>
+                                {school}
+                            </Text>
                         </View>
                     </View>
                 </View>
@@ -90,8 +131,8 @@ function PluviometerDiaryScreen(props) {
                             <Text style={{
                                 fontSize: dimensions.text.default,
                             }}>
-                                { profile }
-                        </Text>
+                                {profile}
+                            </Text>
                         </View>
                     </View>
                 </View>