From 1db53eaffd164726d7503b89b52ee53c3a303ecf Mon Sep 17 00:00:00 2001 From: "Siddhesh.More" Date: Wed, 23 Oct 2024 12:03:14 +0530 Subject: [PATCH] update --- dev-dist/sw.js | 2 +- src/components/AmountCard/AmountCard.jsx | 17 +++++--- src/components/ChartsTabs.jsx | 4 +- src/components/Doughnut/LineChart.jsx | 54 +++++++++++++++++++++--- 4 files changed, 61 insertions(+), 16 deletions(-) diff --git a/dev-dist/sw.js b/dev-dist/sw.js index 4976af6..0958a25 100644 --- a/dev-dist/sw.js +++ b/dev-dist/sw.js @@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict'; "revision": "3ca0b8505b4bec776b69afdba2768812" }, { "url": "index.html", - "revision": "0.5tjbmcd5mug" + "revision": "0.r1a5oko6jr" }], {}); workbox.cleanupOutdatedCaches(); workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), { diff --git a/src/components/AmountCard/AmountCard.jsx b/src/components/AmountCard/AmountCard.jsx index e051f56..db3e511 100644 --- a/src/components/AmountCard/AmountCard.jsx +++ b/src/components/AmountCard/AmountCard.jsx @@ -9,9 +9,12 @@ import { VStack, } from "@chakra-ui/react"; import React from "react"; -import { FaFileAlt, FaShoppingCart } from "react-icons/fa"; +import { FaFileAlt, FaFileContract, FaMoneyCheckAlt, FaShoppingCart } from "react-icons/fa"; import { FaClipboard, FaGlobe, FaWallet } from "react-icons/fa6"; -import { PiWalletFill } from "react-icons/pi"; +import { PiCircuitryFill, PiWalletFill } from "react-icons/pi"; +import { LiaFileContractSolid } from "react-icons/lia"; +import { TbTransactionDollar } from "react-icons/tb"; +import { BsRCircleFill } from "react-icons/bs"; const AmountCard = () => { @@ -40,7 +43,7 @@ const AmountCard = () => { { label: "Transaction", value: kpDetails?.data?.transactionCount, - icon: , + icon: , }, { label: "DID count", @@ -53,22 +56,22 @@ const AmountCard = () => { { label: "Total Supply", value: kpDetails?.data?.totalSupply, - icon: , + icon: , }, { label: "Circulating Supply", value: kpDetails?.data?.circulatingSupply, - icon: , + icon: , }, { label: "Pledged RBT", value: kpDetails?.data?.pledgedRBT, - icon: , + icon: , }, { label: "Number of smart contracts", value: kpDetails?.data?.numberContracts, - icon: , + icon: , }, ]; diff --git a/src/components/ChartsTabs.jsx b/src/components/ChartsTabs.jsx index 4fe6edf..96a46ec 100644 --- a/src/components/ChartsTabs.jsx +++ b/src/components/ChartsTabs.jsx @@ -50,11 +50,11 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) { } // Setting defaultValue to '24 DayusHrs' - const options = ["24 Hrs", `${days} Days`, "12 Months"]; + const options = ["24 Hrs", `30 Days`, "12 Months"]; const { getRootProps, getRadioProps } = useRadioGroup({ name: "framework", - defaultValue: "24 Hrs", // Default tab is set to '24 Hrs' + defaultValue: "12 Months", // Default tab is set to '24 Hrs' onChange: (value) => setSelectedValue(value), }); diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx index 14d3d9a..495bca7 100644 --- a/src/components/Doughnut/LineChart.jsx +++ b/src/components/Doughnut/LineChart.jsx @@ -30,7 +30,6 @@ ChartJS.register( function formatAndSortDataByDayName(data=[]) { - console.log("======", data); // Create a shallow copy of the data array before sorting const sortedData = [...data]?.sort((a, b) => a.dayId - b.dayId); @@ -49,7 +48,7 @@ function formatAndSortDataByDayName(data=[]) { const LineChart = () => { const { colorMode } = useColorMode(); - const [selectedValue, setSelectedValue] = useState("24 Hrs"); + const [selectedValue, setSelectedValue] = useState("12 Months"); const [labels, setLabels] = useState([]); const [dataset, setDataset] = useState([]); @@ -89,7 +88,7 @@ const LineChart = () => { setLabels(dataLableDaily); // Generate random data for each day setDataset(dataSetDaily); - } else if (selectedValue === `${dayjs().daysInMonth()} Days`) { + } else if (selectedValue === `30 Days`) { // Create labels for the current month (days) setLabels(dataLableDate); // Generate random data for each day @@ -141,14 +140,57 @@ const LineChart = () => { }, tooltip: { callbacks: { + // Tooltip title: show the day or month name (depending on data) + title: function(tooltipItems) { + const index = tooltipItems[0]?.dataIndex; + let data; + if (selectedValue === "24 Hrs") { + data = dailyData[index]; + } else if (selectedValue === "30 Days") { + data = dateData?.data[index]; + } else if (selectedValue === "12 Months") { + data = monthlyData[index]; + } + return data?.dayName || data?.monthName || ''; + }, + // Show transaction count in the tooltip beforeLabel: function (tooltipItem) { - return `Transactions: $${tooltipItem.raw}`; + const index = tooltipItem.dataIndex; + let data; + if (selectedValue === "24 Hrs") { + data = dailyData[index]; + } else if (selectedValue === "30 Days") { + data = dateData?.data[index]; + } else if (selectedValue === "12 Months") { + data = monthlyData[index]; + } + return `Transactions: ${data?.transactionCount}`; }, + // Show total price in the tooltip label: function (tooltipItem) { - return `Price: $${tooltipItem.raw}`; + const index = tooltipItem.dataIndex; + let data; + if (selectedValue === "24 Hrs") { + data = dailyData[index]; + } else if (selectedValue === "30 Days") { + data = dateData?.data[index]; + } else if (selectedValue === "12 Months") { + data = monthlyData[index]; + } + return `Price: $${data?.totalPrice}`; }, + // Show gas fee in the tooltip afterLabel: function (tooltipItem) { - return `Gas Fee: $${Math.round(tooltipItem.raw * 0.05)}`; + const index = tooltipItem.dataIndex; + let data; + if (selectedValue === "24 Hrs") { + data = dailyData[index]; + } else if (selectedValue === "30 Days") { + data = dateData?.data[index]; + } else if (selectedValue === "12 Months") { + data = monthlyData[index]; + } + return `Gas Fee: ${data?.totalGasFee}`; }, }, backgroundColor: "#fff",