You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.6 KiB
113 lines
3.6 KiB
import {Text, TouchableOpacity, View} from "react-native";
|
|
import {CurveType, LineChart} from "react-native-gifted-charts";
|
|
import React, {useRef, useState} from "react";
|
|
|
|
export default function ActivitiesComponent() {
|
|
const ref = useRef(null)
|
|
const [dateSelected, setDateSelected] = useState('1d');
|
|
const [lineData, setLineData] = useState([
|
|
{value: 4},
|
|
{value: 14},
|
|
{value: 8},
|
|
{value: 38},
|
|
{value: 36},
|
|
{value: 28},
|
|
]);
|
|
|
|
const months = ['1d','1w','1m','1y','All']
|
|
const changeMonthSelected = (ind: number) => {
|
|
const selectedMonth = months[ind];
|
|
setDateSelected(selectedMonth);
|
|
|
|
// Update lineData based on the selected month
|
|
let newData: React.SetStateAction<{ value: number; }[]>;
|
|
switch (selectedMonth) {
|
|
case '1d':
|
|
newData = [
|
|
{value: 4},
|
|
{value: 14},
|
|
{value: 8},
|
|
{value: 38},
|
|
{value: 36},
|
|
{value: 28},
|
|
];
|
|
break;
|
|
case '1w':
|
|
newData = [
|
|
{value: 8},
|
|
{value: 14},
|
|
{value: 8},
|
|
{value: 38},
|
|
{value: 14},
|
|
{value: 28},
|
|
{value: 4},
|
|
];
|
|
break;
|
|
case '1m':
|
|
newData = [
|
|
{value: 10},
|
|
{value: 20},
|
|
{value: 30},
|
|
{value: 40},
|
|
{value: 50},
|
|
{value: 60},
|
|
];
|
|
break;
|
|
case '1y':
|
|
newData = [
|
|
{value: 15},
|
|
{value: 25},
|
|
{value: 35},
|
|
{value: 45},
|
|
{value: 55},
|
|
{value: 65},
|
|
];
|
|
break;
|
|
case 'All':
|
|
newData = [
|
|
{value: 5},
|
|
{value: 15},
|
|
{value: 25},
|
|
{value: 35},
|
|
{value: 45},
|
|
{value: 55},
|
|
];
|
|
break;
|
|
default:
|
|
newData = [];
|
|
}
|
|
setLineData(newData);
|
|
};
|
|
|
|
return (
|
|
<View className="bg-gray-200 rounded-2xl p-1">
|
|
<View className=" m-2 flex-row justify-center rounded-2xl bg-white">
|
|
{months.map((item, index) => {
|
|
return (
|
|
<TouchableOpacity
|
|
key={index}
|
|
className={`w-16 h-10 flex items-center justify-center rounded-xl ${
|
|
dateSelected === item
|
|
? "bg-orange-500 border-2 border-orange-300"
|
|
: "bg-transparent "
|
|
}`}
|
|
onPress={() => changeMonthSelected(index)}>
|
|
<Text className="font-extrabold">{months[index]}</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
<LineChart
|
|
scrollRef={ref}
|
|
data={lineData}
|
|
areaChart
|
|
curved
|
|
initialSpacing={0}
|
|
rotateLabel
|
|
isAnimated={true}
|
|
startFillColor="orange"
|
|
curveType={CurveType.QUADRATIC}
|
|
/>
|
|
</View>
|
|
);
|
|
} |