From 4887cbbd48f3374ebf2453af1a9e7efcab6eeded Mon Sep 17 00:00:00 2001 From: Yana Date: Wed, 27 Nov 2024 22:34:49 +0700 Subject: [PATCH] WIP --- .../app/components/ExplorerCard.tsx | 20 +++- .../app/components/ExplorerLineChart.tsx | 49 +++++----- explorer-nextjs/app/page.tsx | 98 ++++++++++++------- 3 files changed, 107 insertions(+), 60 deletions(-) diff --git a/explorer-nextjs/app/components/ExplorerCard.tsx b/explorer-nextjs/app/components/ExplorerCard.tsx index 7bc1b0ed18..f8edfcfaee 100644 --- a/explorer-nextjs/app/components/ExplorerCard.tsx +++ b/explorer-nextjs/app/components/ExplorerCard.tsx @@ -1,4 +1,11 @@ -import { Card, CardHeader, CardContent, Typography, Box } from "@mui/material"; +import { + Card, + CardHeader, + CardContent, + Typography, + Box, + useTheme, +} from "@mui/material"; import React, { FC, ReactElement, ReactEventHandler } from "react"; import { ExplorerLineChart, IExplorerLineChartData } from "./ExplorerLineChart"; import { @@ -56,6 +63,7 @@ interface ICardDataRowsProps { } const CardDataRows = (props: ICardDataRowsProps): React.ReactNode => { const { rows } = props; + return ( {rows.map((row, i) => { @@ -66,7 +74,7 @@ const CardDataRows = (props: ICardDataRowsProps): React.ReactNode => { paddingBottom={2} display={"flex"} justifyContent={"space-between"} - borderBottom={i === 0 ? "1px solid #fff" : "none"} + borderBottom={i === 0 ? "1px solid #CAD6D7" : "none"} > {row.key} {row.value} @@ -83,7 +91,7 @@ type ContentCardProps = { upDownLine?: ICardUpDownPriceLineProps; titlePrice?: ICardTitlePriceProps; dataRows?: ICardDataRowsProps; - graph?: Array; + graph?: { data: Array; color: string; label: string }; progressBar?: IExplorerProgressBarProps; paragraph?: string; onClick?: ReactEventHandler; @@ -117,7 +125,11 @@ export const ExplorerCard: FC = ({ {dataRows && } {graph && ( - + )} {progressBar && ( diff --git a/explorer-nextjs/app/components/ExplorerLineChart.tsx b/explorer-nextjs/app/components/ExplorerLineChart.tsx index 11c7d6686e..31e0979db4 100644 --- a/explorer-nextjs/app/components/ExplorerLineChart.tsx +++ b/explorer-nextjs/app/components/ExplorerLineChart.tsx @@ -13,10 +13,8 @@ const LineChart = dynamic( export interface IExplorerLineChartData { date_utc: string; - greenLineNumericData: number; - purpleLineNumericData: number; - // total_packets_dropped: number; - // total_stake: number; + numericData?: number; + // purpleLineNumericData?: number; } interface IAxes { @@ -31,8 +29,12 @@ interface ILineAxes { export const ExplorerLineChart = ({ data, + color, + label, }: { data: Array; + color: string; + label: string; }) => { const theme = useTheme(); const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); @@ -44,35 +46,35 @@ export const ExplorerLineChart = ({ if (resultData.length > 0) { setChartData(resultData); } - }, []); + }, [data]); const transformData = (data: Array) => { - const greenLineData: ILineAxes = { - id: "Numeric Data 1", + const lineData: ILineAxes = { + id: label, data: [], }; - const purpleLineData: ILineAxes = { - id: "Numeric Data 2", - data: [], - }; + // const purpleLineData: ILineAxes = { + // id: "Numeric Data 2", + // data: [], + // }; data.map((item: any) => { const axesGreenLineData: IAxes = { x: new Date(item.date_utc), - y: item.greenLineNumericData, + y: item.numericData, }; - greenLineData.data.push(axesGreenLineData); + lineData.data.push(axesGreenLineData); - const axesPurpleLineData: IAxes = { - x: new Date(item.date_utc), - y: item.purpleLineNumericData, - }; + // const axesPurpleLineData: IAxes = { + // x: new Date(item.date_utc), + // y: item.purpleLineNumericData, + // }; - purpleLineData.data.push(axesPurpleLineData); + // purpleLineData.data.push(axesPurpleLineData); }); - return [{ ...purpleLineData }, { ...greenLineData }]; + return [{ ...lineData }]; }; const yformat = (num: number | string | Date) => { @@ -91,18 +93,20 @@ export const ExplorerLineChart = ({ throw new Error("Unexpected value"); } }; + + console.log("chartData.length :>> ", chartData); return ( {chartData && ( 7 ? "every 4 days" : "every day", }} /> )} diff --git a/explorer-nextjs/app/page.tsx b/explorer-nextjs/app/page.tsx index da0d787972..ddbc092c9f 100644 --- a/explorer-nextjs/app/page.tsx +++ b/explorer-nextjs/app/page.tsx @@ -20,6 +20,7 @@ import { useRouter } from "next/navigation"; import { ExplorerCard } from "./components/ExplorerCard"; import type { GetStaticProps, InferGetStaticPropsType } from "next"; import { ExplorerData, getCacheExplorerData } from "./api/explorer"; +import { IExplorerLineChartData } from "./components/ExplorerLineChart"; // type ContentCardProps = { // overTitle?: string; @@ -53,28 +54,28 @@ const explorerCard = { { key: "24H VOL", value: "$ 1000000" }, ], }, - graph: [ - { - date_utc: "2024-11-20", - greenLineNumericData: 10, - purpleLineNumericData: 5, - }, - { - date_utc: "2024-11-21", - greenLineNumericData: 12, - purpleLineNumericData: 6, - }, - { - date_utc: "2024-11-22", - greenLineNumericData: 9, - purpleLineNumericData: 5, - }, - { - date_utc: "2024-11-23", - greenLineNumericData: 11, - purpleLineNumericData: 4, - }, - ], + graph: { + data: [ + { + date_utc: "2024-11-20", + numericData: 10, + }, + { + date_utc: "2024-11-21", + numericData: 12, + }, + { + date_utc: "2024-11-22", + numericData: 9, + }, + { + date_utc: "2024-11-23", + numericData: 11, + }, + ], + color: "#00CA33", + label: "Label", + }, paragraph: "Additional line", }; @@ -82,6 +83,13 @@ export const DATA_REVALIDATE = 60; export default function PageOverview() { const [explorerData, setExplorerData] = useState(null); + const [noiseLineGraphData, setNoiseLineGraphData] = useState<{ + color: string; + label: string; + data: IExplorerLineChartData[]; + }>(); + + console.log("noiseLineGraphData :>> ", noiseLineGraphData); useEffect(() => { async function fetchData() { @@ -118,15 +126,21 @@ export default function PageOverview() { } }; - const packetsSentLast24H = + const noiseLast24H = explorerData?.packetsAndStakingData[ explorerData.packetsAndStakingData.length - 1 - ].total_packets_sent; + ].total_packets_sent + + explorerData?.packetsAndStakingData[ + explorerData.packetsAndStakingData.length - 1 + ].total_packets_received; - const packetsSentPrevious24H = + const noisePrevious24H = explorerData?.packetsAndStakingData[ explorerData.packetsAndStakingData.length - 2 - ].total_packets_sent; + ].total_packets_sent + + explorerData?.packetsAndStakingData[ + explorerData.packetsAndStakingData.length - 2 + ].total_packets_received; const calculatePercentageChange = (last24H: number, previous24H: number) => { if (previous24H === 0) { @@ -140,14 +154,31 @@ export default function PageOverview() { return parseFloat(change.toFixed(2)); }; - const percentage = calculatePercentageChange( - packetsSentLast24H, - packetsSentPrevious24H - ); + const percentage = calculatePercentageChange(noiseLast24H, noisePrevious24H); + + const getPacketsData = () => { + const data: Array = []; + explorerData?.packetsAndStakingData.map((item: any) => { + data.push({ + date_utc: item.date_utc, + numericData: item.total_packets_sent + item.total_packets_received, + }); + }); + return data; + }; + + useEffect(() => { + const noiseLineGraphData = { + color: "#8482FD", + label: "Total packets sent and received", + data: getPacketsData(), + }; + setNoiseLineGraphData(noiseLineGraphData); + }, [explorerData]); const noiseCard = { overTitle: "Noise generated last 24h", - title: formatBigNum(packetsSentLast24H) || "", + title: formatBigNum(noiseLast24H) || "", upDownLine: { percentage: Math.abs(percentage) || 0, numberWentUp: percentage > 0, @@ -156,10 +187,9 @@ export default function PageOverview() { const currentStake = Number(explorerData?.currentEpochRewardsData.interval.staking_supply) || 0; - console.log("currentStake :>> ", currentStake); const stakeCard = { overTitle: "Current network stake", - title: formatBigNum(currentStake) + " NYM" || "", + title: currentStake + " NYM" || "", }; const { @@ -187,7 +217,7 @@ export default function PageOverview() { - +