Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/rubix-explore

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.75helcmbjto"
+    "revision": "0.ak3sjq5l2po"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/ChartsTabs.jsx

@@ -1,34 +1,46 @@
-import { Box, HStack, useRadio, useRadioGroup } from '@chakra-ui/react';
+import {
+  Box,
+  HStack,
+  Icon,
+  Text,
+  VStack,
+  useColorMode,
+  useRadio,
+  useRadioGroup,
+} from "@chakra-ui/react";
+import { TbArrowBadgeRightFilled } from "react-icons/tb";
 
-function ChartsTabs({selectedValue, setSelectedValue}) {
+function ChartsTabs({ selectedValue, setSelectedValue }) {
+
+  const { colorMode } = useColorMode();
   // This function represents the RadioCard part
   function RadioCard(props) {
     const { getInputProps, getRadioProps } = useRadio(props);
+
     const input = getInputProps();
     const checkbox = getRadioProps();
 
     return (
-      <Box as='label' px={{base:"8px",md:"0px"}}>
+      <Box as="label" px={{ base: "6px", md: "px" }}>
         <input {...input} />
-        <Box 
-        
+        <Box
           {...checkbox}
-          cursor='pointer'
-          borderWidth='1px'
-          borderRadius='md'
-          boxShadow='md' 
-          fontSize={{base:"sm",md : "xs"}}
+          cursor="pointer"
+          borderWidth="1px"
+          borderRadius="md"
+          boxShadow="md"
+          fontSize={{ base: "xs", md: "sm" }}
           _checked={{
-            bg: '#4023A6',
-            color: 'white',
-            borderColor: '#4023A6',
+            bg: "#4023A6",
+            color: "white",
+            borderColor: "#4023A6",
           }}
           _focus={{
-            boxShadow: 'outline',
+            boxShadow: "outline",
           }}
-          px={{base:4,md : 2}}
+          px={{ base: 2, md: 2 }}
           // px={4}
-          py={{base: 1,md : 0}}
+          py={{ base: 0, md: 0 }}
         >
           {props.children}
         </Box>
@@ -36,27 +48,47 @@ function ChartsTabs({selectedValue, setSelectedValue}) {
     );
   }
 
-  // Setting defaultValue to 'Daily'
-  const options = ['Daily', 'Monthly', 'Yearly'];
+  // Setting defaultValue to '24 DayusHrs'
+  const options = ["24 Hrs", "30 Days", "12 Months"];
 
   const { getRootProps, getRadioProps } = useRadioGroup({
-    name: 'framework',
-    defaultValue: 'Daily', // Default tab is set to 'Daily'
+    name: "framework",
+    defaultValue: "24 Hrs", // Default tab is set to '24 Hrs'
     onChange: (value) => setSelectedValue(value),
   });
 
   const group = getRootProps();
 
   return (
-    <HStack {...group}>
-      {options.map((value) => {
-        const radio = getRadioProps({ value });
-        return (
-          <RadioCard key={value} {...radio}>
-            {value}
-          </RadioCard>
-        );
-      })}
+    <HStack alignItems={"center"}  m={3} gap={1}>
+      <Text
+        fontWeight={500}
+        display={"flex"}
+        alignItems={"center"}
+        fontSize={{ base: "xs", md: "sm" }}
+        color={colorMode === 'light'?'gray.400':"#fff"}
+      >
+        Last
+        <Icon
+          as={TbArrowBadgeRightFilled}
+          ms={1}
+          color={colorMode === "light" ? "gray.400" : "#fff"}
+        />
+      </Text>
+      <HStack
+        justifyContent={{ base: "flex-end" }}
+        gap={{ base: 0, md: 1 }}
+        {...group}
+      >
+        {options.map((value) => {
+          const radio = getRadioProps({ value });
+          return (
+            <RadioCard key={value} {...radio}>
+              {value}
+            </RadioCard>
+          );
+        })}
+      </HStack>
     </HStack>
   );
 }

src/components/Doughnut/LineChart.jsx

@@ -1,40 +1,79 @@
-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 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
 
 // Register the components of Chart.js you need
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
 
 const LineChart = () => {
   const { colorMode } = useColorMode();
-  const [selectedValue, setSelectedValue] = useState('Daily');
+  const [selectedValue, setSelectedValue] = useState("Daily");
   const [labels, setLabels] = useState([]);
   const [dataset, setDataset] = useState([]);
 
   useEffect(() => {
-    if (selectedValue === 'Daily') {
+    if (selectedValue === "24 Hrs") {
       // Create hourly labels for 24 hours
       const hours = Array.from({ length: 24 }, (_, index) => `${index}:00`);
       setLabels(hours);
       // Generate random data for each hour
-      const dailyData = Array.from({ length: 24 }, () => Math.floor(Math.random() * 5000 + 1000));
+      const dailyData = Array.from({ length: 24 }, () =>
+        Math.floor(Math.random() * 5000 + 1000)
+      );
       setDataset(dailyData);
-    } else if (selectedValue === 'Monthly') {
+    } else if (selectedValue === "30 Days") {
       // Create labels for the current month (days)
       const daysInMonth = dayjs().daysInMonth();
-      const days = Array.from({ length: daysInMonth }, (_, index) => `Day ${index + 1}`);
+      const days = Array.from(
+        { length: daysInMonth },
+        (_, index) => `Day ${index + 1}`
+      );
       setLabels(days);
       // Generate random data for each day
-      const monthlyData = Array.from({ length: daysInMonth }, () => Math.floor(Math.random() * 5000 + 1000));
+      const monthlyData = Array.from({ length: daysInMonth }, () =>
+        Math.floor(Math.random() * 5000 + 1000)
+      );
       setDataset(monthlyData);
-    } else if (selectedValue === 'Yearly') {
+    } else if (selectedValue === "12 Months") {
       // Labels for months (already set up)
-      setLabels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+      setLabels([
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ]);
       // Generate random data for each month
-      const yearlyData = Array.from({ length: 12 }, () => Math.floor(Math.random() * 5000 + 1000));
+      const yearlyData = Array.from({ length: 12 }, () =>
+        Math.floor(Math.random() * 5000 + 1000)
+      );
       setDataset(yearlyData);
     }
   }, [selectedValue]);
@@ -43,15 +82,15 @@ const LineChart = () => {
     labels: labels,
     datasets: [
       {
-        label: 'Transaction Data',
+        label: "Transaction Data",
         data: dataset,
-        borderColor: '#978FED',
+        borderColor: "#978FED",
         tension: 0.3,
         pointRadius: 4,
-        pointBackgroundColor: colorMode === "light" ? "#fff" : '#232127',
-        pointBorderColor: '#978FED',
+        pointBackgroundColor: colorMode === "light" ? "#fff" : "#232127",
+        pointBorderColor: "#978FED",
         pointHoverRadius: 5,
-        pointHoverBackgroundColor: '#978FED',
+        pointHoverBackgroundColor: "#978FED",
         borderWidth: 2,
         pointBorder: 0,
       },
@@ -59,6 +98,19 @@ const LineChart = () => {
   };
 
   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: {
@@ -76,9 +128,9 @@ const LineChart = () => {
             return `Gas Fee: $${Math.round(tooltipItem.raw * 0.05)}`;
           },
         },
-        backgroundColor: '#fff',
-        titleColor: '#4B4B4B',
-        bodyColor: '#4B4B4B',
+        backgroundColor: "#fff",
+        titleColor: "#4B4B4B",
+        bodyColor: "#4B4B4B",
         displayColors: false,
       },
     },
@@ -87,7 +139,7 @@ const LineChart = () => {
         beginAtZero: true,
         ticks: {
           callback: function (value) {
-            return value / 1000 + 'k';
+            return value / 1000 + "k";
           },
         },
       },
@@ -97,14 +149,25 @@ const LineChart = () => {
   return (
     <>
       <Box
-        display={{base :"block",md : "flex"}}
+        display={{ base: "block", md: "flex" }}
         justifyContent={"space-between"}
         alignItems={"center"}
-        mb={4}
+        mb={{ base: 4, md: 4 }}
         // px={{base : "20px"md, : ""}}
       >
-        <Heading fontSize={"md"} fontWeight={500} mb={{base:"8px",md:"0px"}} px={{base:"8px",md:"0px"}}>Transaction History</Heading>
-        <ChartsTabs  setSelectedValue={setSelectedValue} selectedValue={selectedValue} />
+        <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}
+        />
       </Box>
       <Line data={data} options={options} />
     </>