update chart
This commit is contained in:
11
package-lock.json
generated
11
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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 (
|
||||
<>
|
||||
<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} />
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
mb={4}
|
||||
>
|
||||
<Heading fontSize={"md"} fontWeight={500}>Transaction History</Heading>
|
||||
<ChartsTabs setSelectedValue={setSelectedValue} selectedValue={selectedValue} />
|
||||
</Box>
|
||||
<Line data={data} options={options} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LineChart;
|
||||
|
||||
Reference in New Issue
Block a user