From 8c10d3ab75c05499375aa856cd040fc038bb6d44 Mon Sep 17 00:00:00 2001 From: Ghina Al Rashwani Date: Wed, 15 Oct 2025 11:12:12 +0300 Subject: [PATCH 1/5] ginar/ issue #665 fixing mobile --- .../balanceHistory/BalanceHistoryChart.tsx | 69 ++++++++++--------- components/ui/AnimatedStripedProgress.tsx | 33 +++++++++ 2 files changed, 68 insertions(+), 34 deletions(-) create mode 100644 components/ui/AnimatedStripedProgress.tsx diff --git a/components/balanceHistory/BalanceHistoryChart.tsx b/components/balanceHistory/BalanceHistoryChart.tsx index c5bbd2a17..c265c7a06 100644 --- a/components/balanceHistory/BalanceHistoryChart.tsx +++ b/components/balanceHistory/BalanceHistoryChart.tsx @@ -248,41 +248,42 @@ const BalanceHistoryChart: React.FC = ({ // ---------------- Coin toggle buttons ---------------- const renderCoinButtons = () => ( -
- {/* Toggle on the far left */} - {selectedCoinType === "VESTS" && ( -
- - setUnit(checked ? "hp" : "vests")} - /> - +
+ {/* Toggle switch container (bottom on mobile, left on desktop) */} + {selectedCoinType === "VESTS" && ( +
+ + setUnit(checked ? "hp" : "vests")} + /> + +
+ )} + + {/* Coin buttons container (top on mobile, right on desktop) */} +
+ {availableCoins.map((coinType) => ( + + ))}
- )} - - {/* Coin buttons always on the right */} - {availableCoins.map((coinType) => ( - - ))} -
- +
); diff --git a/components/ui/AnimatedStripedProgress.tsx b/components/ui/AnimatedStripedProgress.tsx new file mode 100644 index 000000000..b7a7b701f --- /dev/null +++ b/components/ui/AnimatedStripedProgress.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { cn } from "@/lib/utils"; + +interface AnimatedStripedProgressProps { + children: React.ReactNode; + className?: string; + speed?: "slow" | "medium" | "fast"; +} + +const AnimatedStripedProgress: React.FC = ({ + children, + className, + speed = "medium", +}) => { + return ( +
+ {/* Ensure Progress bar is transparent */} +
{children}
+
+ ); +}; + +export default AnimatedStripedProgress; -- GitLab From 1375370e7c6eb4e8bc1bdfe2e66de4314e0ebd6a Mon Sep 17 00:00:00 2001 From: Ghina Al Rashwani Date: Wed, 15 Oct 2025 11:13:11 +0300 Subject: [PATCH 2/5] ginar/ #665 fixing mobile --- components/ui/AnimatedStripedProgress.tsx | 33 ----------------------- 1 file changed, 33 deletions(-) delete mode 100644 components/ui/AnimatedStripedProgress.tsx diff --git a/components/ui/AnimatedStripedProgress.tsx b/components/ui/AnimatedStripedProgress.tsx deleted file mode 100644 index b7a7b701f..000000000 --- a/components/ui/AnimatedStripedProgress.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import { cn } from "@/lib/utils"; - -interface AnimatedStripedProgressProps { - children: React.ReactNode; - className?: string; - speed?: "slow" | "medium" | "fast"; -} - -const AnimatedStripedProgress: React.FC = ({ - children, - className, - speed = "medium", -}) => { - return ( -
- {/* Ensure Progress bar is transparent */} -
{children}
-
- ); -}; - -export default AnimatedStripedProgress; -- GitLab From 5ff4fb1438d773b33202904bae91c349af0e8b65 Mon Sep 17 00:00:00 2001 From: Ghina Al Rashwani Date: Wed, 15 Oct 2025 11:20:13 +0300 Subject: [PATCH 3/5] fixing mobile --- components/balanceHistory/BalanceHistoryChart.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/components/balanceHistory/BalanceHistoryChart.tsx b/components/balanceHistory/BalanceHistoryChart.tsx index c265c7a06..25acf6bde 100644 --- a/components/balanceHistory/BalanceHistoryChart.tsx +++ b/components/balanceHistory/BalanceHistoryChart.tsx @@ -248,10 +248,11 @@ const BalanceHistoryChart: React.FC = ({ // ---------------- Coin toggle buttons ---------------- const renderCoinButtons = () => ( -
- {/* Toggle switch container (bottom on mobile, left on desktop) */} +
+ + {/* Toggle switch — visible only when VESTS is selected */} {selectedCoinType === "VESTS" && ( -
+
@@ -266,14 +267,14 @@ const renderCoinButtons = () => (
)} - {/* Coin buttons container (top on mobile, right on desktop) */} -
+ {/* Coin buttons container — always on the right */} +
{availableCoins.map((coinType) => ( + ))}
- )} - - {/* Coin buttons container — always on the right */} -
- {availableCoins.map((coinType) => ( - - ))}
-
-); - - + ); // ---------------- Min/Max for Y-axis ---------------- const getMinMax = (data: any[]): [number, number] => { @@ -297,14 +339,20 @@ const renderCoinButtons = () => ( if (selectedCoinType === "VESTS") { allValues = data.map((item) => item.convertedHive || 0); - const dollarValues = data.map((item) => item.dollarValue).filter((v): v is number => typeof v === "number" && !Number.isNaN(v)); + const dollarValues = data + .map((item) => item.dollarValue) + .filter((v): v is number => typeof v === "number" && !Number.isNaN(v)); allValues = allValues.concat(dollarValues); } else { allValues = data.map((item) => item.balance); - const dollarValues = data.map((item) => item.dollarValue).filter((v): v is number => typeof v === "number" && !Number.isNaN(v)); + const dollarValues = data + .map((item) => item.dollarValue) + .filter((v): v is number => typeof v === "number" && !Number.isNaN(v)); allValues = allValues.concat(dollarValues); if (showSavingsBalance === "yes") { - const savingsValues = data.map((item) => item.savings_balance).filter((v): v is number => typeof v === "number"); + const savingsValues = data + .map((item) => item.savings_balance) + .filter((v): v is number => typeof v === "number"); allValues = allValues.concat(savingsValues); } } @@ -315,7 +363,7 @@ const renderCoinButtons = () => ( const [fullDataMin, fullDataMax] = getMinMax(displayData); const [minValue, maxValue] = zoomedDomain || [fullDataMin, fullDataMax]; - const handleBrushAreaChange = (domain: { startIndex?: number; endIndex?: number; }) => { + const handleBrushAreaChange = (domain: { startIndex?: number; endIndex?: number }) => { if (!domain || domain.startIndex === undefined || domain.endIndex === undefined) { setZoomedDomain([fullDataMin, fullDataMax]); return; @@ -329,15 +377,12 @@ const renderCoinButtons = () => ( if (!displayData || !displayData.length) return null; - const isDualAxis = selectedCoinType === "VESTS"; + // Show secondary axis whenever there is dollarValue data + const isDualAxis = displayData.some((d) => d.dollarValue !== undefined); const primaryAxisId = isRTL ? "right" : "left"; const secondaryAxisId = isRTL ? "left" : "right"; - const leftMargin = isMobile - ? 10 - : selectedCoinType === "VESTS" - ? 50 - : 30; + const leftMargin = isMobile ? 10 : selectedCoinType === "VESTS" ? 50 : 30; return (
@@ -397,17 +442,19 @@ const renderCoinButtons = () => ( dot={false} hide={hiddenDataKeys.includes("balance")} /> - + {displayData.some((d) => d.dollarValue !== undefined) && ( + + )} {showSavingsBalance === "yes" && selectedCoinType !== "VESTS" && ( ( onClick={(event) => { const dataKey = event.dataKey as string; const isHidden = hiddenDataKeys.includes(dataKey); - if (isHidden) setHiddenDataKeys(hiddenDataKeys.filter((key) => key !== dataKey)); + if (isHidden) + setHiddenDataKeys(hiddenDataKeys.filter((key) => key !== dataKey)); else setHiddenDataKeys([...hiddenDataKeys, dataKey]); }} /> -- GitLab From d2bd7c3120db1dbeb7b2b039bc2a67cf7ae89d32 Mon Sep 17 00:00:00 2001 From: Ghina Al Rashwani Date: Thu, 16 Oct 2025 12:03:48 +0300 Subject: [PATCH 5/5] fixing position of toggle --- .../balanceHistory/BalanceHistoryChart.tsx | 78 ++++++++++++------- 1 file changed, 52 insertions(+), 26 deletions(-) diff --git a/components/balanceHistory/BalanceHistoryChart.tsx b/components/balanceHistory/BalanceHistoryChart.tsx index 4addebdf8..85be1f861 100644 --- a/components/balanceHistory/BalanceHistoryChart.tsx +++ b/components/balanceHistory/BalanceHistoryChart.tsx @@ -100,7 +100,6 @@ const BalanceHistoryChart: React.FC = ({ if (type === "VESTS") { const vests = item.balance?.toString() || "0"; - // Convert VESTS to HP or Hive let convertedHPRaw = unit === "hp" ? hiveChain.vestsToHp( @@ -114,7 +113,6 @@ const BalanceHistoryChart: React.FC = ({ dynamicGlobalData.headBlockDetails.rawTotalVestingShares ); - // Ensure convertedValue is a number let convertedValue: number; if (typeof convertedHPRaw === "number") { convertedValue = convertedHPRaw; @@ -294,23 +292,6 @@ const BalanceHistoryChart: React.FC = ({ // ---------------- Coin toggle buttons ---------------- const renderCoinButtons = () => (
- {/* Desktop: toggle switch — appears left of coin buttons */} - {selectedCoinType === "VESTS" && ( -
- - setUnit(checked ? "hp" : "vests")} - /> - -
- )} - {/* Coin buttons container — right of toggle */}
{availableCoins.map((coinType) => ( @@ -482,17 +463,62 @@ const BalanceHistoryChart: React.FC = ({ onChange={handleBrushAreaChange} /> )} + + {/* ---------- LEGEND with inline toggle ---------- */} { - const dataKey = event.dataKey as string; - const isHidden = hiddenDataKeys.includes(dataKey); - if (isHidden) - setHiddenDataKeys(hiddenDataKeys.filter((key) => key !== dataKey)); - else setHiddenDataKeys([...hiddenDataKeys, dataKey]); + verticalAlign="bottom" + wrapperStyle={{ + display: "flex", + justifyContent: isRTL ? "flex-end" : "flex-start", + flexWrap: "wrap", // allow wrapping on small screens + gap: "12px", // space between legend items + paddingTop: "0px", // keep legend in same vertical position + }} + content={(props) => { + const { payload } = props; + return ( +
    + {payload?.map((entry, index) => { + const dataKey = (entry as any).dataKey; + const isHidden = hiddenDataKeys.includes(dataKey); + return ( +
  • { + if (isHidden) + setHiddenDataKeys(hiddenDataKeys.filter((key) => key !== dataKey)); + else + setHiddenDataKeys([...hiddenDataKeys, dataKey]); + }} + > +
    + {(entry as any).value} +
    • + ); + })} + + {selectedCoinType === "VESTS" && ( +
  • + + setUnit(checked ? "hp" : "vests")} + className="w-10 h-5" // slightly bigger toggle + /> + +
    • + )} +
+ ); }} /> +
-- GitLab