63 lines
1.5 KiB
63 lines
1.5 KiB
import React from "react";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
|
|
import colors from "../config/colors/";
|
|
import { LineChart } from "react-native-chart-kit";
|
|
import requestPluviometerData from "../api/pluviometer";
|
|
import { Dimensions } from "react-native";
|
|
|
|
const screenWidth = Dimensions.get("window").width * 0.95;
|
|
const screenHeight = Dimensions.get("window").height * 0.3;
|
|
|
|
function figure_config(labels, values) {
|
|
return {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
data: values,
|
|
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, labels, values }) {
|
|
return (
|
|
<View
|
|
style={{
|
|
padding: 10,
|
|
flex: 1,
|
|
alignItems: "center",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<LineChart
|
|
data={figure_config(labels, values)}
|
|
width={screenWidth}
|
|
height={chartHeight}
|
|
chartConfig={chartConfig}
|
|
withVerticalLines={false}
|
|
yAxisSuffix="mm"
|
|
/>
|
|
<Text style={{ textAlign: "center" }}>Data</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default PluviometerGraphics;
|