diff --git a/explorer-nextjs/app/components/ExplorerLineChart.tsx b/explorer-nextjs/app/components/ExplorerLineChart.tsx index 31e0979db4..cc667b264b 100644 --- a/explorer-nextjs/app/components/ExplorerLineChart.tsx +++ b/explorer-nextjs/app/components/ExplorerLineChart.tsx @@ -94,7 +94,6 @@ export const ExplorerLineChart = ({ } }; - console.log("chartData.length :>> ", chartData); return ( {chartData && ( @@ -106,7 +105,7 @@ export const ExplorerLineChart = ({ enableSlices="x" margin={{ bottom: 24, - left: 26, + left: 36, right: 16, top: 20, }} diff --git a/explorer-nextjs/app/page.tsx b/explorer-nextjs/app/page.tsx index ddbc092c9f..64b2781368 100644 --- a/explorer-nextjs/app/page.tsx +++ b/explorer-nextjs/app/page.tsx @@ -88,8 +88,11 @@ export default function PageOverview() { label: string; data: IExplorerLineChartData[]; }>(); - - console.log("noiseLineGraphData :>> ", noiseLineGraphData); + const [stakeLineGraphData, setStakeLineGraphData] = useState<{ + color: string; + label: string; + data: IExplorerLineChartData[]; + }>(); useEffect(() => { async function fetchData() { @@ -98,10 +101,13 @@ export default function PageOverview() { } fetchData(); }, []); + const theme = useTheme(); const router = useRouter(); console.log("explorerData :>> ", explorerData); + + // CURRENT EPOCH const currentEpochStart = explorerData?.currentEpochData.current_epoch_start || ""; @@ -126,6 +132,8 @@ export default function PageOverview() { } }; + // NOISE + const noiseLast24H = explorerData?.packetsAndStakingData[ explorerData.packetsAndStakingData.length - 1 @@ -183,13 +191,39 @@ export default function PageOverview() { percentage: Math.abs(percentage) || 0, numberWentUp: percentage > 0, }, + graph: noiseLineGraphData, }; + // STAKE + const currentStake = - Number(explorerData?.currentEpochRewardsData.interval.staking_supply) || 0; + Number(explorerData?.currentEpochRewardsData.interval.staking_supply) / + 1000000 || 0; + + const getStakeData = () => { + const data: Array = []; + explorerData?.packetsAndStakingData.map((item: any) => { + data.push({ + date_utc: item.date_utc, + numericData: item.total_stake / 1000000, + }); + }); + return data; + }; + + useEffect(() => { + const stakeLineGraphData = { + color: "#00CA33", + label: "Total stake delegated in NYM", + data: getStakeData(), + }; + setStakeLineGraphData(stakeLineGraphData); + }, [explorerData]); + const stakeCard = { overTitle: "Current network stake", title: currentStake + " NYM" || "", + graph: stakeLineGraphData, }; const { @@ -217,7 +251,7 @@ export default function PageOverview() { - +