charts update👨‍⚕️

2024-10-14 17:56:53 +05:30
parent 8843cde46d
commit f320ce21ee
6 changed files with 131 additions and 46 deletions
--- a/src/components/ChartsTabs.jsx
+++ b/src/components/ChartsTabs.jsx
@@ -0,0 +1,61 @@
+import { Box, HStack, useRadio, useRadioGroup } from '@chakra-ui/react';
+
+function ChartsTabs() {
+  // This function represents the RadioCard part
+  function RadioCard(props) {
+    const { getInputProps, getRadioProps } = useRadio(props);
+    const input = getInputProps();
+    const checkbox = getRadioProps();
+
+    return (
+      <Box as='label'>
+        <input {...input} />
+        <Box 
+          {...checkbox}
+          cursor='pointer'
+          borderWidth='1px'
+          borderRadius='md'
+          boxShadow='md'
+          _checked={{
+            bg: '#4023A6',
+            color: 'white',
+            borderColor: '#4023A6',
+          }}
+          _focus={{
+            boxShadow: 'outline',
+          }}
+          px={4}
+          py={1}
+        >
+          {props.children}
+        </Box>
+      </Box>
+    );
+  }
+
+  // Setting defaultValue to 'Daily'
+  const options = ['Daily', 'Monthly', 'Yearly'];
+
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    name: 'framework',
+    defaultValue: 'Daily', // Default tab is set to 'Daily'
+    onChange: console.log,
+  });
+
+  const group = getRootProps();
+
+  return (
+    <HStack {...group}>
+      {options.map((value) => {
+        const radio = getRadioProps({ value });
+        return (
+          <RadioCard key={value} {...radio}>
+            {value}
+          </RadioCard>
+        );
+      })}
+    </HStack>
+  );
+}
+
+export default ChartsTabs;
--- a/src/components/Doughnut/LineChart.jsx
+++ b/src/components/Doughnut/LineChart.jsx
@@ -1,12 +1,17 @@
 // LineChart.js
-import React from 'react';
+import React, { useState } from 'react';
 import { Line } from 'react-chartjs-2';
 import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
+import { BsBorderWidth } from 'react-icons/bs';
+import { border, Box, Heading, Radio, RadioGroup, Stack } from '@chakra-ui/react';
+import ChartsTabs from '../ChartsTabs';

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

 const LineChart = () => {
+
+
    const data = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [
@@ -14,14 +19,16 @@ const LineChart = () => {
                label: 'Transaction Data',
                data: [1000, 3000, 2000, 3500, 4000, 3000, 5000, 6000, 5000, 4500, 4800, 5200],
                borderColor: '#978FED',
-                backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                fill: true,
-                // tension: 0.4,
+                // backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                // fill: true,
+                tension: 0.3,
                pointRadius: 4,
-                pointBackgroundColor: 'white',
-                pointBorderColor: 'blue',
-                pointHoverRadius: 7,
+                pointBackgroundColor: '#232127',
+                pointBorderColor: '#978FED',
+                pointHoverRadius: 5,
                pointHoverBackgroundColor: '#978FED',
+                borderWidth: 2,
+                pointBorder:0
            },
        ],
    };
@@ -29,31 +36,35 @@ const LineChart = () => {
    const options = {
        responsive: true,
        plugins: {
+          legend: {
+            display:false
+          },
            tooltip: {
-                callbacks: {
-                  enabled: true, // Enable/disable tooltip
-                mode: 'index', // Display all items at the same index (can use 'nearest' or other modes)
-                intersect: false, 
-                    label: function (tooltipItem) {
-                        return `Price: $${tooltipItem.raw}`;
-                    },
-                    afterLabel: function (tooltipItem) {
-                        return `Gas Fee: $${Math.round(tooltipItem.raw * 0.05)}`;
-                    },
-                },
-                backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                titleColor: '#fff',
-                bodyColor: '#fff',
+              callbacks: {
+                 enabled: true, // Enable/disable tooltip
+                  mode: 'index', // Display all items at the same index (can use 'nearest' or other modes)
+                  intersect: false, 
+                  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,
+                boxShadow:"3px 3px 3px #000",
+
            },
        },
        scales: {
            y: {
                beginAtZero: true,
-                title: {
-                    display: true,
-                    text: 'Transactions (k)',
-                },
                ticks: {
                    callback: function (value) {
                        return value / 1000 + 'k';
@@ -64,9 +75,18 @@ const LineChart = () => {
    };

    return (
-        <div>
+        <>
+          <Box
+              display={"flex"}
+              justifyContent={"space-between"}
+              alignItems={"center"}
+              mb={4}
+            >
+              <Heading fontSize={"md"} fontWeight={500}>Transaction History</Heading>
+              <ChartsTabs />
+            </Box>
            <Line data={data} options={options} />
-        </div>
+        </>
    );
 };

--- a/src/components/Pagination.jsx
+++ b/src/components/Pagination.jsx
@@ -62,6 +62,12 @@ const Pagination = ({
          aria-label="Previous Page"
          bg={colorMode === "light" ? "light.100" : "#232127"}
          border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
+          _hover={{
+            bg: colorMode === "light" ? "inherit" : "#312F35",
+          }}
+          _focus={{
+            outline:"none"
+          }}
        >
          Previous
        </Button>
@@ -89,6 +95,12 @@ const Pagination = ({
          aria-label="Previous Page"
          bg={colorMode === "light" ? "light.100" : "#232127"}
          border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
+          _hover={{
+            bg: colorMode === "light" ? "inherit" : "#312F35",
+          }}
+          _focus={{
+            outline:"none"
+          }}
        >
          Next
        </Button>
--- a/src/components/SwitchBtn/SwitchCharts.jsx
+++ b/src/components/SwitchBtn/SwitchCharts.jsx
@@ -24,8 +24,8 @@ const SwitchCharts = ({ isSwitchOn, setIsSwitchOn }) => {
          display="flex"
          justifyContent="normal"
          alignItems="center"
-          width="130px"
-          height="40px"
+          width="110px"
+          height="32px"
          borderRadius="10px"
          // backgroundColor={"#27262B"}
          onClick={switch_onChange_handle}
@@ -34,15 +34,15 @@ const SwitchCharts = ({ isSwitchOn, setIsSwitchOn }) => {
          _before={{
            content: '""',
            position: "absolute",
-            width: "40px",
-            height: "25px",
-            borderRadius: "10px",
+            width: "30px",
+            height: "20px",
+            borderRadius: "5px",
            backgroundColor: colorMode === "light" ? "#DEDBEB" : "#fff", // Correct usage of backgroundColor
            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
-            transform: isSwitchOn ? "translateX(80px)" : "translateX(0)",
+            transform: isSwitchOn ? "translateX(70px)" : "translateX(0)",
            transition: "transform 0.2s",
-            left: "4px",
-            top: "7px",
+            left: "5px",
+            top: "5px",
          }}
          
        >
@@ -55,6 +55,7 @@ const SwitchCharts = ({ isSwitchOn, setIsSwitchOn }) => {
            // color={isSwitchOn ? "#A9A9A9" : "#A9A9A9"}
            left={isSwitchOn ? "10px" : "auto"}
            right={isSwitchOn ? "auto" : "10px"}
+            fontSize={"14px"}
          >
            {isSwitchOn ? "Monthly" : "Daily"}
          </Text>
--- a/src/index.css
+++ b/src/index.css
@@ -76,3 +76,5 @@ a:hover {
    background-color: #f9f9f9;
  }
 }
+
+
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -172,17 +172,6 @@ const Home = () => {
            rounded={10}
            bg={colorMode === "light" ? "#DEDBEB47" : "#232127"}
          >
-            <Box
-              display={"flex"}
-              justifyContent={"space-between"}
-              alignItems={"center"}
-            >
-              <Heading fontSize={"md"} fontWeight={500}>Transaction History</Heading>
-              <SwitchCharts
-                isSwitchOn={isSwitchOn}
-                setIsSwitchOn={setIsSwitchOn}
-              />
-            </Box>
            <LineChart />
          </Box>
        </Container>