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,24 +4,65 @@ 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 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"],
+    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={{
@@ -68,7 +109,7 @@ function PluviometerDiaryScreen(props) {
                             <Text style={{
                                 fontSize: dimensions.text.default,
                             }}>
-                                { school }
+                                {school}
                             </Text>
                         </View>
                     </View>
@@ -90,7 +131,7 @@ function PluviometerDiaryScreen(props) {
                             <Text style={{
                                 fontSize: dimensions.text.default,
                             }}>
-                                { profile }
+                                {profile}
                             </Text>
                         </View>
                     </View>