From 60f93a908745767e73057b038294a063f610118b Mon Sep 17 00:00:00 2001 From: "Siddhesh.More" Date: Tue, 15 Oct 2024 11:13:55 +0530 Subject: [PATCH] update chart --- package-lock.json | 11 +- package.json | 1 + src/components/ChartsTabs.jsx | 4 +- src/components/Doughnut/LineChart.jsx | 172 ++++++++++++++------------ 4 files changed, 108 insertions(+), 80 deletions(-) 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;