112 lines
3.7 KiB
TypeScript
112 lines
3.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, Dimensions, Pressable, StyleSheet, ScrollView } from "react-native";
|
|
import { LineChart } from 'react-native-chart-kit';
|
|
|
|
const screenWidth = Dimensions.get("window").width;
|
|
|
|
const Grafico = () => {
|
|
const [timeFrame, setTimeFrame] = useState("1D");
|
|
|
|
const data = {
|
|
labels: ["Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"],
|
|
datasets: [
|
|
{
|
|
data: [20, 45, 28, 80, 70, 43, 100, 100],
|
|
color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`,
|
|
strokeWidth: 2
|
|
}
|
|
],
|
|
legend: ["Money"]
|
|
};
|
|
|
|
const handleTimeFrameChange = (newTimeFrame: React.SetStateAction<string>) => {
|
|
setTimeFrame(newTimeFrame);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* Contenitore con bordo per il grafico */}
|
|
<View style={styles.chartContainer}>
|
|
<LineChart
|
|
data={data}
|
|
width={screenWidth - 40}
|
|
height={180}
|
|
verticalLabelRotation={0}
|
|
chartConfig={chartConfig}
|
|
bezier
|
|
/>
|
|
</View>
|
|
|
|
{/* ScrollView per bottoni */}
|
|
<ScrollView horizontal contentContainerStyle={styles.scrollContainer}>
|
|
<View style={styles.buttonRow}>
|
|
<Pressable onPress={() => handleTimeFrameChange("1D")}>
|
|
<Text style={[styles.buttonText, timeFrame === "1D" && styles.activeButton]}>1D</Text>
|
|
</Pressable>
|
|
<Pressable onPress={() => handleTimeFrameChange("1W")}>
|
|
<Text style={[styles.buttonText, timeFrame === "1W" && styles.activeButton]}>1W</Text>
|
|
</Pressable>
|
|
<Pressable onPress={() => handleTimeFrameChange("1M")}>
|
|
<Text style={[styles.buttonText, timeFrame === "1M" && styles.activeButton]}>1M</Text>
|
|
</Pressable>
|
|
<Pressable onPress={() => handleTimeFrameChange("July")}>
|
|
<Text style={[styles.buttonText, timeFrame === "July" && styles.activeButton]}>July</Text>
|
|
</Pressable>
|
|
<Pressable onPress={() => handleTimeFrameChange("June")}>
|
|
<Text style={[styles.buttonText, timeFrame === "June" && styles.activeButton]}>June</Text>
|
|
</Pressable>
|
|
<Pressable onPress={() => handleTimeFrameChange("May")}>
|
|
<Text style={[styles.buttonText, timeFrame === "May" && styles.activeButton]}>May</Text>
|
|
</Pressable>
|
|
<Pressable onPress={() => handleTimeFrameChange("All")}>
|
|
<Text style={[styles.buttonText, timeFrame === "All" && styles.activeButton]}>All</Text>
|
|
</Pressable>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const chartConfig = {
|
|
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
|
|
strokeWidth: 1,
|
|
barPercentage: 0.5,
|
|
useShadowColorFromDataset: false
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 20,
|
|
},
|
|
chartContainer: {
|
|
borderWidth: 2,
|
|
borderColor: 'black',
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
marginBottom: 20,
|
|
alignItems: 'center',
|
|
},
|
|
scrollContainer: {
|
|
paddingVertical: 10,
|
|
alignItems: 'center',
|
|
},
|
|
buttonRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
},
|
|
buttonText: {
|
|
fontSize: 16,
|
|
color: 'white', // Cambia il colore del testo per contrasto
|
|
backgroundColor: '#1a1a1a', // Aggiungi un background color per i bottoni
|
|
padding: 10, // Rendi il bottone più compatto
|
|
marginHorizontal: 5, // Spaziatura laterale più piccola
|
|
borderRadius: 5, // Arrotonda i bordi
|
|
},
|
|
activeButton: {
|
|
color: 'purple',
|
|
fontWeight: 'bold',
|
|
backgroundColor: 'lightgray', // Cambia il colore di sfondo per il bottone attivo
|
|
}
|
|
});
|
|
|
|
export default Grafico;
|