restore repo

components/ui/Grafico.tsx

@@ -0,0 +1,112 @@
+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;