diff --git a/explorer-nextjs/app/components/AccountStatsCard.tsx b/explorer-nextjs/app/components/AccountStatsCard.tsx index e376a61b86..0e1ea9b4af 100644 --- a/explorer-nextjs/app/components/AccountStatsCard.tsx +++ b/explorer-nextjs/app/components/AccountStatsCard.tsx @@ -1,6 +1,5 @@ import * as React from "react"; import Box from "@mui/material/Box"; -import Collapse from "@mui/material/Collapse"; import IconButton from "@mui/material/IconButton"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; @@ -9,11 +8,15 @@ import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import Typography from "@mui/material/Typography"; -import Paper from "@mui/material/Paper"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; import { Card, CardContent } from "@mui/material"; import { ExplorerStaticProgressBar } from "./ExplorerStaticProgressBar"; +import { + MultiSegmentProgressBar, + MultiSegmentProgressBarProps, +} from "./ExplorerMultiSegmentProgressBar"; +import useMediaQuery from "@mui/material/useMediaQuery"; export interface IAccontStatsRowProps { type: string; @@ -22,7 +25,7 @@ export interface IAccontStatsRowProps { value: number; history?: { type: string; amount: number }[]; isLastRow?: boolean; - progressBarColor: string; + progressBarColor?: string; } const progressBarColours = [ @@ -34,6 +37,8 @@ const progressBarColours = [ ]; const Row = (props: IAccontStatsRowProps) => { + const tablet = useMediaQuery("(min-width:700px)"); + const { type, allocation, @@ -49,70 +54,129 @@ const Row = (props: IAccontStatsRowProps) => { {/* Main Row */} - - - {type} - - - - {allocation}% - - - - - {amount} NYM - - - $ {value} - - - {history && ( - setOpen(!open)} - > - {open ? : } - - )} - - + {tablet ? ( + + + {type} + + + + {allocation}% + + + + + {amount} NYM + + + $ {value} + + + {history && ( + setOpen(!open)} + > + {open ? : } + + )} + + + ) : ( + + + {type} + + {/* + + {allocation}% + + + */} + + {amount} NYM + $ {value} + + + + {history && ( + setOpen(!open)} + > + {open ? : } + + )} + + + )} {/* History Rows */} {history && @@ -130,14 +194,7 @@ const Row = (props: IAccontStatsRowProps) => { • {historyRow.type} - - {/* Empty cell for alignment */} - + { > {historyRow.amount} - - {/* Empty cell for alignment */} - + ; } +// const progressValues = [ +// { percentage: 25, color: "#4caf50" }, // Green +// { percentage: 35, color: "#2196f3" }, // Blue +// { percentage: 40, color: "#ff9800" }, // Orange +// ]; + export const AccountStatsCard = (props: IAccountStatsCardProps) => { const { rows } = props; + const tablet = useMediaQuery("(min-width:700px)"); + const progressBarPercentages = () => { + return rows.map((row, i) => row.allocation); + }; + const getProgressValues = () => { + const percentages = progressBarPercentages(); + const result: Array<{ percentage: number; color: string }> = []; + percentages.map((value, i) => { + result.push({ + percentage: value, + color: progressBarColours[i], + }); + }); + return result; + }; + + const progressValues = getProgressValues(); + return ( + {!tablet && } - - Type - Allocation - Amount - Value - - + {tablet ? ( + + Type + Allocation + Amount + Value + + + ) : ( + + Type + Amount / Value + + + )} {rows.map((row, i) => ( diff --git a/explorer-nextjs/app/components/ExplorerMultiSegmentProgressBar.tsx b/explorer-nextjs/app/components/ExplorerMultiSegmentProgressBar.tsx new file mode 100644 index 0000000000..827106eee0 --- /dev/null +++ b/explorer-nextjs/app/components/ExplorerMultiSegmentProgressBar.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { Box } from "@mui/material"; + +export interface MultiSegmentProgressBarProps { + values: { percentage: number; color: string }[]; // Array of percentage and color pairs + height?: number; // Optional height, default is 8 + borderRadius?: number; // Optional border radius, default is 4 + backgroundColor?: string; // Optional background color for the bar, default is light gray +} + +export const MultiSegmentProgressBar: React.FC< + MultiSegmentProgressBarProps +> = ({ values, height = 8, borderRadius = 4, backgroundColor = "#CAD6D7" }) => { + return ( + + {values.map((value, index) => ( + + ))} + + ); +}; diff --git a/explorer-nextjs/app/components/ExplorerStaticProgressBar.tsx b/explorer-nextjs/app/components/ExplorerStaticProgressBar.tsx index 257d27185a..69409857ae 100644 --- a/explorer-nextjs/app/components/ExplorerStaticProgressBar.tsx +++ b/explorer-nextjs/app/components/ExplorerStaticProgressBar.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import Box from "@mui/material/Box"; import LinearProgress from "@mui/material/LinearProgress"; -import { Typography } from "@mui/material"; export interface IExplorerStaticProgressBarProps { color: string; diff --git a/explorer-nextjs/app/page.tsx b/explorer-nextjs/app/page.tsx index 1b42dde8b3..2e37759747 100644 --- a/explorer-nextjs/app/page.tsx +++ b/explorer-nextjs/app/page.tsx @@ -18,7 +18,6 @@ import { formatNumber } from "@/app/utils"; import { useMainContext } from "./context/main"; import { useRouter } from "next/navigation"; import { ContentCardProps, ExplorerCard } from "./components/ExplorerCard"; -import type { GetStaticProps, InferGetStaticPropsType } from "next"; import { ExplorerData, getCacheExplorerData } from "./api/explorer"; import { IExplorerLineChartData } from "./components/ExplorerLineChart"; import { @@ -136,8 +135,6 @@ export default function PageOverview() { const theme = useTheme(); const router = useRouter(); - console.log("explorerData :>> ", explorerData); - // CURRENT EPOCH const currentEpochStart = explorerData?.currentEpochData.current_epoch_start || "";