Mobile/components/ActivitiesComponent.tsx

import React, { useRef, useState } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import { CurveType, LineChart } from "react-native-gifted-charts";

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 h-full">
      <View className=" m-2 flex-row justify-center  rounded-2xl bg-white">
        {months.map((item, index) => {
          return (
            <TouchableOpacity
              key={item}
              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>
  );
}