Siddhesh.More/rubix-explore
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Siddhesh More
2024-10-16 13:27:22 +05:30
parent d6415e4098
commit 2465f19727
3 changed files with 154 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dev-dist/sw.js
View File

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

90
src/components/ChartsTabs.jsx
View File

@@ -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>
);
}

121
src/components/Doughnut/LineChart.jsx
View File

@@ -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} />
</>