diff --git a/package-lock.json b/package-lock.json
index 03fb94e..326e4f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
"@emotion/styled": "^11.13.0",
"@reduxjs/toolkit": "^2.2.7",
"chart.js": "^4.4.4",
+ "dayjs": "^1.11.13",
"framer-motion": "^11.5.6",
"js-cookie": "^3.0.5",
"react": "^18.3.1",
@@ -2830,14 +2831,14 @@
"version": "15.7.13",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
"integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
- "devOptional": true,
+ "dev": true,
"license": "MIT"
},
"node_modules/@types/react": {
"version": "18.3.8",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.8.tgz",
"integrity": "sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==",
- "devOptional": true,
+ "dev": true,
"license": "MIT",
"dependencies": {
"@types/prop-types": "*",
@@ -3393,6 +3394,12 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/dayjs": {
+ "version": "1.11.13",
+ "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+ "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+ "license": "MIT"
+ },
"node_modules/debug": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
diff --git a/package.json b/package.json
index 66fb0bf..bf74a04 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"@emotion/styled": "^11.13.0",
"@reduxjs/toolkit": "^2.2.7",
"chart.js": "^4.4.4",
+ "dayjs": "^1.11.13",
"framer-motion": "^11.5.6",
"js-cookie": "^3.0.5",
"react": "^18.3.1",
diff --git a/src/components/ChartsTabs.jsx b/src/components/ChartsTabs.jsx
index 26587d2..3a24db1 100644
--- a/src/components/ChartsTabs.jsx
+++ b/src/components/ChartsTabs.jsx
@@ -1,6 +1,6 @@
import { Box, HStack, useRadio, useRadioGroup } from '@chakra-ui/react';
-function ChartsTabs() {
+function ChartsTabs({selectedValue, setSelectedValue}) {
// This function represents the RadioCard part
function RadioCard(props) {
const { getInputProps, getRadioProps } = useRadio(props);
@@ -40,7 +40,7 @@ function ChartsTabs() {
const { getRootProps, getRadioProps } = useRadioGroup({
name: 'framework',
defaultValue: 'Daily', // Default tab is set to 'Daily'
- onChange: console.log,
+ onChange: (value) => setSelectedValue(value),
});
const group = getRootProps();
diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx
index f1bf4be..31e2091 100644
--- a/src/components/Doughnut/LineChart.jsx
+++ b/src/components/Doughnut/LineChart.jsx
@@ -1,93 +1,113 @@
-// LineChart.js
-import React, { useState } from 'react';
+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 { BsBorderWidth } from 'react-icons/bs';
-import { border, Box, Heading, Radio, RadioGroup, Stack, useColorMode } from '@chakra-ui/react';
+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);
const LineChart = () => {
-
- const { colorMode} = useColorMode();
+ const { colorMode } = useColorMode();
+ const [selectedValue, setSelectedValue] = useState('Daily');
+ const [labels, setLabels] = useState([]);
+ const [dataset, setDataset] = useState([]);
- const data = {
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
- datasets: [
- {
- 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.3,
- pointRadius: 4,
- pointBackgroundColor:colorMode === "light"? "#fff" :'#232127',
- pointBorderColor: '#978FED',
- pointHoverRadius: 5,
- pointHoverBackgroundColor: '#978FED',
- borderWidth: 2,
- pointBorder:0
- },
- ],
- };
+ useEffect(() => {
+ if (selectedValue === 'Daily') {
+ // 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));
+ setDataset(dailyData);
+ } else if (selectedValue === 'Monthly') {
+ // Create labels for the current month (days)
+ const daysInMonth = dayjs().daysInMonth();
+ 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));
+ setDataset(monthlyData);
+ } else if (selectedValue === 'Yearly') {
+ // Labels for months (already set up)
+ 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));
+ setDataset(yearlyData);
+ }
+ }, [selectedValue]);
- const options = {
- responsive: true,
- plugins: {
- legend: {
- display:false
+ 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 = {
+ 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)}`;
},
- tooltip: {
- 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,
-
- },
},
- scales: {
- y: {
- beginAtZero: true,
- ticks: {
- callback: function (value) {
- return value / 1000 + 'k';
- },
- },
- },
+ backgroundColor: '#fff',
+ titleColor: '#4B4B4B',
+ bodyColor: '#4B4B4B',
+ displayColors: false,
+ },
+ },
+ scales: {
+ y: {
+ beginAtZero: true,
+ ticks: {
+ callback: function (value) {
+ return value / 1000 + 'k';
+ },
},
- };
+ },
+ },
+ };
- return (
- <>
-
- Transaction History
-
-
-
-
- );
+ return (
+ <>
+
+ Transaction History
+
+
+
+
+ );
};
export default LineChart;