rubix-explore/src/components/Doughnut/LineChart.jsx

import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Box, Heading, useColorMode } from "@chakra-ui/react";
import ChartsTabs from "../ChartsTabs";
import dayjs from "dayjs"; // Import for date handling
import { useGetDailyDataQuery, useGetDateWiseDataQuery, useGetMonthlyDataQuery } from "../../Services/api.service";
import { timeZone } from "../../Constants/Constants";

// Register the components of Chart.js you need
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);



function formatAndSortDataByDayName(data=[]) {
  console.log("======", data);

  // Create a shallow copy of the data array before sorting
  const sortedData = [...data]?.sort((a, b) => a.dayId - b.dayId);

  return sortedData?.map(item => {
    return {
      dayName: item.dayName,
      year: item.year,
      transactionCount: item.transactionCount,
      totalPrice: item.totalPrice,
      totalGasFee: item.totalGasFee,
    };
  });
}


const LineChart = () => {
  const { colorMode } = useColorMode();
  const [selectedValue, setSelectedValue] = useState("24 Hrs");
  const [labels, setLabels] = useState([]);
  const [dataset, setDataset] = useState([]);

  const {
    data: monthlyData,
    isLoading: monthlyDataLoading,
    refetch
  } = useGetMonthlyDataQuery(timeZone)
  const dataSetMonthly = monthlyData?.map((data)=>data?.transactionCount)
  const dataLableMonthly = monthlyData?.map((data) => data?.monthName)

  const {
    data: dailyData,
    isLoading: dailyDataLoading,
  } = useGetDailyDataQuery(timeZone)
  const dataSetDaily = dailyData?.map((data)=>data?.transactionCount)
  const dataLableDaily = dailyData?.map((data) => data?.hour)
  
  const {
    data: dateData,
    isLoading: dateDataLoading,
  } = useGetDateWiseDataQuery(timeZone)

  console.log(formatAndSortDataByDayName(dateData?.data));
  // console.log(formatAndSortDataByDayName(dateData?.data));

  const dataSetDate = dateData?.data?.map((data)=>data?.transactionCount)
  const dataLableDate = dateData?.data?.map((data) => data?.dayName)
  // const dataSetDate = [...(dateData?.data || [])].reverse().map((data) => data?.transactionCount);
  // const dataLableDate = [...(dateData?.data || [])].reverse().map((data) => data?.dayName);
 


  useEffect(() => {
    if (selectedValue === "24 Hrs") {
      // Create hourly labels for 24 hours
      setLabels(dataLableDaily);
      // Generate random data for each day
      setDataset(dataSetDaily);
    } else if (selectedValue === `${dayjs().daysInMonth()} Days`) {
      // Create labels for the current month (days)
      setLabels(dataLableDate);
      // Generate random data for each day
      setDataset(dataSetDate);
    } else if (selectedValue === "12 Months") {
      // Labels for months (already set up)
      setLabels(dataLableMonthly);
      setDataset(dataSetMonthly);
    }
  }, [selectedValue]);

  const data = {
    labels: labels,
    datasets: [
      {
        label: "Transaction Data",
        data: dataset,
        borderColor: "#978FED",
        tension: 0.3,
        pointRadius: 4,
        pointBackgroundColor: colorMode === "light" ? "#fff" : "#232127",
        pointBorderColor: "#978FED",
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#978FED",
        borderWidth: 2,
        pointBorder: 0,
      },
    ],
  };

  const options = {
    // animation: {
    //   // Animate the lines progressively
    //   duration: 2000, // Duration of the animation (in milliseconds)
    //   easing: 'easeInOutQuad', // Easing function for smooth animation
    //   x: {
    //     duration: 2000, // Animating x-axis progressively
    //     from: 0,
    //   },
    //   y: {
    //     duration: 2000, // Animating y-axis progressively
    //     from: 0,
    //   },
    // },
    responsive: true,
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        callbacks: {
          beforeLabel: function (tooltipItem) {
            return `Transactions: $${tooltipItem.raw}`;
          },
          label: function (tooltipItem) {
            return `Price: $${tooltipItem.raw}`;
          },
          afterLabel: function (tooltipItem) {
            return `Gas Fee: $${Math.round(tooltipItem.raw * 0.05)}`;
          },
        },
        backgroundColor: "#fff",
        titleColor: "#4B4B4B",
        bodyColor: "#4B4B4B",
        displayColors: false,
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: function (value) {
            return value / 1000 + "k";
          },
        },
        grid: {
          drawBorder: false,
          borderColor: 'transparent' // Remove the border on the Y-axis
        },
      },
      x: {
        grid: {
          drawBorder: false,
          borderColor: 'transparent' // Optionally remove the border on the X-axis
        },
      },
    },
  };

  console.log(data);

  return (
    <>
      <Box
        display={{ base: "block", md: "flex" }}
        justifyContent={"space-between"}
        alignItems={"center"}
        mb={{ base: 4, md: 4 }}
        // px={{base : "20px"md, : ""}}
      >
        <Heading
          mt={{ base: 2, md: 0 }}
          fontSize={{ base: "sm", md: "md" }}
          fontWeight={500}
          mb={{ base: "0px", md: "0px" }}
          px={{ base: "8px", md: "0px" }}
        >
          Transaction History
        </Heading>
        <ChartsTabs 
          setSelectedValue={setSelectedValue}
          selectedValue={selectedValue}
          days={dayjs().daysInMonth()}
        />
      </Box>
      <Line data={data} options={options} />
    </>
  );
};

export default LineChart;