From 140d08f61d37866918b58b6dfed7ce9c83edeb77 Mon Sep 17 00:00:00 2001 From: Ghina Al Rashwani Date: Wed, 29 Oct 2025 23:37:19 +0200 Subject: [PATCH 1/2] ginar/issue #665 --- .../balanceHistory/BalanceHistoryChart.tsx | 590 ++++++++++++------ 1 file changed, 400 insertions(+), 190 deletions(-) diff --git a/components/balanceHistory/BalanceHistoryChart.tsx b/components/balanceHistory/BalanceHistoryChart.tsx index c5bbd2a17..205232052 100644 --- a/components/balanceHistory/BalanceHistoryChart.tsx +++ b/components/balanceHistory/BalanceHistoryChart.tsx @@ -23,11 +23,11 @@ import { ArrowDown, ArrowUp, Minus } from "lucide-react"; import { useI18n } from "@/i18n/i18n"; import useDynamicGlobal from "@/hooks/api/homePage/useDynamicGlobal"; import { useHiveChainContext } from "@/contexts/HiveChainContext"; -import { convertVestsToHive, convertVestsToHP } from "@/utils/Calculations"; +import { convertVestsToHive } from "@/utils/Calculations"; import { grabNumericValue } from "@/utils/StringUtils"; import { Switch } from "@/components/ui/switch"; import { Label } from "@/components/ui/label"; -import { useSettings } from "@/contexts/SettingsContext"; +import { Payload } from "recharts/types/component/DefaultLegendContent"; // Import Payload type interface BalanceHistoryChartProps { aggregatedAccountBalanceHistory?: { @@ -63,99 +63,99 @@ const BalanceHistoryChart: React.FC = ({ selectedCoinType, setSelectedCoinType, }) => { - const { t, dir, locale } = useI18n(); + const { t, dir } = useI18n(); const { hiveChain } = useHiveChainContext(); const { dynamicGlobalData } = useDynamicGlobal(); - const { settings } = useSettings(); const isRTL = dir === "rtl"; - const [isMobile, setIsMobile] = useState(window.innerWidth < 480); - const [hiddenDataKeys, setHiddenDataKeys] = useState([]); - const [unit, setUnit] = useState<"vests" | "hp">( - settings.displayVestHpMode === "hp" ? "hp" : "vests" + const [isMobile, setIsMobile] = useState( + typeof window !== "undefined" ? window.innerWidth < 480 : false ); - - useEffect(() => { - setUnit(settings.displayVestHpMode === "hp" ? "hp" : "vests"); - }, [settings.displayVestHpMode]); + const [hiddenDataKeys, setHiddenDataKeys] = useState([]); + const [vestsHpUnit, setVestsHpUnit] = useState<"vests" | "hp">("hp"); const availableCoins = ["HIVE", "VESTS", "HBD"]; - const [zoomedDomain, setZoomedDomain] = useState<[number, number] | null>(null); + const [zoomedDomain, setZoomedDomain] = useState<[number, number] | null>( + null + ); useEffect(() => { + if (typeof window === "undefined") return; + const handleResize = () => { setIsMobile(window.innerWidth < 480); }; + window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); - const processedData = useCallback( - (data: any, type: string) => { - if (!dynamicGlobalData || !hiveChain || !data) return []; - - return data.map((item: any) => { - const hivePrice = parseFloat(item.hivePrice || "0"); - - if (type === "VESTS") { - const vests = item.balance?.toString() || "0"; - - // Convert VESTS to HP or Hive - let convertedHPRaw = unit === "hp" - ? hiveChain.vestsToHp( - vests, - dynamicGlobalData.headBlockDetails.rawTotalVestingFundHive, - dynamicGlobalData.headBlockDetails.rawTotalVestingShares - ) - : hiveChain.vestsToHp( // using vestsToHp also for Hive conversion - vests, - dynamicGlobalData.headBlockDetails.rawTotalVestingFundHive, - dynamicGlobalData.headBlockDetails.rawTotalVestingShares - ); - - // Ensure convertedValue is a number - let convertedValue: number; - if (typeof convertedHPRaw === "number") { - convertedValue = convertedHPRaw; - } else if (convertedHPRaw && typeof convertedHPRaw === "object" && "amount" in convertedHPRaw) { - convertedValue = parseFloat(convertedHPRaw.amount); - } else if (typeof convertedHPRaw === "string") { - convertedValue = parseFloat(convertedHPRaw); - } else { - convertedValue = 0; + const processedData = useCallback( + (data: any, type: string) => { + if (!dynamicGlobalData || !hiveChain || !data) return []; + + return data.map((item: any) => { + const hivePrice = parseFloat(item.hivePrice || "0"); + + if (type === "VESTS") { + const vests = item.balance?.toString() || "0"; + const convertedHP = hiveChain.vestsToHp( + vests, + dynamicGlobalData.headBlockDetails.rawTotalVestingFundHive, + dynamicGlobalData.headBlockDetails.rawTotalVestingShares + ); + + let convertedHPNumeric: number; + if (typeof convertedHP === "number") { + convertedHPNumeric = convertedHP; + } else if ( + convertedHP && + typeof convertedHP === "object" && + "amount" in convertedHP + ) { + convertedHPNumeric = parseFloat(String(convertedHP.amount)); + } else if (typeof convertedHP === "string") { + convertedHPNumeric = parseFloat(convertedHP); + } else { + convertedHPNumeric = 0; + } + + const dollarValueFull = + !isNaN(convertedHPNumeric) && !isNaN(hivePrice) + ? convertedHPNumeric * hivePrice + : 0; + + return { + ...item, + convertedHive: convertedHPNumeric, + dollarValue: dollarValueFull, + }; } - const dollarValueFull = - !isNaN(convertedValue) && !isNaN(hivePrice) - ? convertedValue * hivePrice /100 - : 0; - - return { - ...item, - convertedHive: convertedValue, - dollarValue: dollarValueFull, - }; - } + if (type === "HIVE") { + const dollarValue = + !isNaN(item.balance) && !isNaN(hivePrice) + ? item.balance * hivePrice + : 0; - if (type === "HIVE") { - const dollarValue = - !isNaN(item.balance) && !isNaN(hivePrice) - ? item.balance * hivePrice - : 0; - - return { ...item, dollarValue }; - } - - if (type === "HBD") { - return { ...item, dollarValue: !isNaN(item.balance) ? item.balance : 0 }; - } + return { + ...item, + dollarValue, + }; + } - return item; - }); - }, - [dynamicGlobalData, hiveChain, unit] -); + if (type === "HBD") { + return { + ...item, + dollarValue: !isNaN(item.balance) ? item.balance : 0, + }; + } + return item; + }); + }, + [dynamicGlobalData, hiveChain] + ); const dataMap: Record< string, @@ -180,17 +180,31 @@ const BalanceHistoryChart: React.FC = ({ setSelectedCoinType(coinType); }; - const displayData = useMemo(() => dataMap[selectedCoinType], [selectedCoinType]); - - // ---------------- Tooltip ---------------- - const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: any[]; label?: string; }) => { + const displayData = useMemo(() => { + return dataMap[selectedCoinType]; + //eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedCoinType, vestsHpUnit, dataMap]); + + const CustomTooltip = ({ + active, + payload, + label, + }: { + active?: boolean; + payload?: any[]; + label?: string; + }) => { const { dir: tooltipDir } = useI18n(); if (quickView || !active || !payload || payload.length === 0) return null; const isTooltipRTL = tooltipDir === "rtl"; const selectedData = displayData?.find((item) => item.timestamp === label); if (!selectedData) return null; - const actualBalance = selectedData?.balance ?? 0; + const actualBalance = + selectedCoinType === "VESTS" && vestsHpUnit === "hp" + ? selectedData?.convertedHive ?? 0 + : selectedData?.balance ?? 0; + const balanceChange = selectedData?.balance_change ?? 0; const savingsBalance = selectedData?.savings_balance ?? undefined; const savingsBalanceChange = selectedData?.savings_balance_change ?? 0; @@ -207,121 +221,230 @@ const BalanceHistoryChart: React.FC = ({

{`${t("common.date")}: ${label}`}

-
+
{isPositiveChange ? ( ) : isZeroChange ? ( - + ) : ( )} - {` ${formatNumber(balanceChange, selectedCoinType === "VESTS" ? unit === "vests" : false)}`} + {` ${formatNumber( + balanceChange, + selectedCoinType === "VESTS" && vestsHpUnit === "vests" + )}`}
-
{`${t("common.balance")}: ${formatNumber(actualBalance, selectedCoinType === "VESTS" ? unit === "vests" : false)}`}
- {dollarValue ? ( +
{`${t( + "common.balance" + )}: ${formatNumber( + actualBalance, + selectedCoinType === "VESTS" && vestsHpUnit === "vests" + )}`}
+ + {dollarValue || dollarValue === 0 ? (
- Dollar Value: ${formatNumber(dollarValue, false, selectedCoinType === "VESTS")} + Dollar Value: $ + {formatNumber(dollarValue, false, selectedCoinType === "VESTS")}
) : null}
- {showSavingsBalance === "yes" && savingsBalance !== undefined && selectedCoinType !== "VESTS" && ( -
-
- {isSavingsPositiveChange ? ( - - ) : isSavingsZeroChange ? ( - - ) : ( - - )} - {` ${formatNumber(savingsBalanceChange, selectedCoinType === "VESTS" ? unit === "vests" : false)}`} + {showSavingsBalance === "yes" && + savingsBalance !== undefined && + selectedCoinType !== "VESTS" && ( +
+
+ {isSavingsPositiveChange ? ( + + ) : isSavingsZeroChange ? ( + + ) : ( + + )} + {` ${formatNumber( + savingsBalanceChange, + selectedCoinType === "VESTS" && vestsHpUnit === "vests" + )}`} +
+
+ {`${t("balanceHistoryChart.savingsBalance")}: ${formatNumber( + savingsBalance, + selectedCoinType === "VESTS" && vestsHpUnit === "vests" + )}`} +
-
- {`${t("balanceHistoryChart.savingsBalance")}: ${formatNumber(savingsBalance, selectedCoinType === "VESTS" ? unit === "vests" : false)}`} -
-
- )} + )}
); }; - // ---------------- Coin toggle buttons ---------------- -const renderCoinButtons = () => ( -
- {/* Toggle on the far left */} - {selectedCoinType === "VESTS" && ( -
- - setUnit(checked ? "hp" : "vests")} - /> - -
- )} - - {/* Coin buttons always on the right */} - {availableCoins.map((coinType) => ( - - ))} -
- -); - - + const renderCoinButtons = () => { + return ( +
+ {availableCoins.map((coinType) => ( + + ))} +
+ ); + }; - // ---------------- Min/Max for Y-axis ---------------- - const getMinMax = (data: any[]): [number, number] => { - if (!data || data.length === 0) return [0, 1]; + const getMinMax = ( + data: { + balance: number; + savings_balance?: number; + dollarValue?: number; + convertedHive?: number; + }[] + ): [number, number] => { + if (!data || data.length === 0) { + return [0, 1]; + } let allValues: number[] = []; 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)); + allValues = data.map((item) => + vestsHpUnit === "hp" ? item.convertedHive || 0 : item.balance + ); + + 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); } } - return [Math.min(...allValues), Math.max(...allValues)]; + const minValue = Math.min(...allValues); + const maxValue = Math.max(...allValues); + + return [minValue, maxValue]; }; - const [fullDataMin, fullDataMax] = getMinMax(displayData); + // Move useMemo calls outside of any conditional returns + const [fullDataMin, fullDataMax] = useMemo( + () => getMinMax(displayData), + [displayData, selectedCoinType, vestsHpUnit, showSavingsBalance] + ); const [minValue, maxValue] = zoomedDomain || [fullDataMin, fullDataMax]; - const handleBrushAreaChange = (domain: { startIndex?: number; endIndex?: number; }) => { - if (!domain || domain.startIndex === undefined || domain.endIndex === undefined) { + const chartBottomMargin = useMemo(() => { + let margin = 60; + margin += 50; + if (isMobile) { + margin += 30; + } + return margin; + }, [isMobile]); + + // Construct the payload for the Legend component + const legendPayload: Payload[] = useMemo(() => { + const payloadItems: Payload[] = [ + { + value: + selectedCoinType === "VESTS" && vestsHpUnit === "hp" + ? "HP" + : selectedCoinType, + id: + selectedCoinType === "VESTS" && vestsHpUnit === "hp" + ? "convertedHive" + : "balance", // Use the actual dataKey as the id for toggling + type: "line", // Shape for the legend item + color: colorMap[selectedCoinType], + }, + { + value: "DOLLAR", + id: "dollarValue", // Use the actual dataKey as the id for toggling + type: "line", + color: colorMap.DOLLAR, + }, + ]; + + if (showSavingsBalance === "yes" && selectedCoinType !== "VESTS") { + payloadItems.push({ + value: t("balanceHistoryChart.savingsBalance"), + id: "savings_balance", // Use the actual dataKey as the id for toggling + type: "line", + color: colorMap.SAVINGS, + }); + } + + // Filter based on hiddenDataKeys using the 'id' of the payload + return payloadItems.filter((item) => !hiddenDataKeys.includes(item.id as string)); + }, [selectedCoinType, vestsHpUnit, showSavingsBalance, hiddenDataKeys, t]); + + + const handleBrushAreaChange = (domain: { + startIndex?: number; + endIndex?: number; + }) => { + if ( + !domain || + domain.startIndex === undefined || + domain.endIndex === undefined + ) { setZoomedDomain([fullDataMin, fullDataMax]); return; } - const visibleData = (displayData || []).slice(domain.startIndex, domain.endIndex + 1); + + const { startIndex, endIndex } = domain; + const visibleData = (displayData || []).slice(startIndex, endIndex + 1); + if (visibleData.length > 0) { const [min, max] = getMinMax(visibleData); setZoomedDomain([min, max]); + } else { + setZoomedDomain([fullDataMin, fullDataMax]); // Reset if no data visible } }; @@ -331,25 +454,36 @@ const renderCoinButtons = () => ( const primaryAxisId = isRTL ? "right" : "left"; const secondaryAxisId = isRTL ? "left" : "right"; - const leftMargin = isMobile - ? 10 - : selectedCoinType === "VESTS" - ? 50 - : 30; + const secondaryAxisDomain = + selectedCoinType === "HBD" ? [minValue, maxValue] : undefined; + return ( -
- {renderCoinButtons()} - +
+ {quickView && ( +
+ {renderCoinButtons()} +
+ )} + + + ( dx={isMobile ? -8 : 0} dy={isMobile ? 20 : 10} reversed={isRTL} + interval="preserveStartEnd" /> ( tickCount={6} tickFormatter={(tick) => { if (selectedCoinType === "VESTS") { - if (unit === "hp") return `${formatNumber(tick, false, false)}`; + if (vestsHpUnit === "hp") { + return formatNumber(tick, false, false); + } const valueInK = tick / 1_000; return `${formatNumber(valueInK, true, false).split(".")[0]} K`; } return formatNumber(tick, false, false); }} /> - {isDualAxis && ( - `$${Math.round(tick)}`} - /> - )} + + `$${formatNumber(tick, false, false)}`} + /> + } /> + ( dot={false} hide={hiddenDataKeys.includes("dollarValue")} /> + {showSavingsBalance === "yes" && selectedCoinType !== "VESTS" && ( ( hide={hiddenDataKeys.includes("savings_balance")} /> )} + {!quickView && ( ( fill="var(--color-background)" travellerWidth={10} tickFormatter={(value) => moment(value).format("MMM D")} - y={380} + y={350} x={50} className="text-xs" onChange={handleBrushAreaChange} /> )} - { - const dataKey = event.dataKey as string; - const isHidden = hiddenDataKeys.includes(dataKey); - if (isHidden) setHiddenDataKeys(hiddenDataKeys.filter((key) => key !== dataKey)); - else setHiddenDataKeys([...hiddenDataKeys, dataKey]); - }} - /> + + {/* Container for Legend and VESTS/HP toggle */} +
+ { + // The event.payload.id contains the dataKey we manually assigned + const clickedId = event.payload?.id; + if (clickedId) { + const isHidden = hiddenDataKeys.includes(clickedId as string); + if (isHidden) { + setHiddenDataKeys( + hiddenDataKeys.filter((key) => key !== clickedId) + ); + } else { + setHiddenDataKeys([...hiddenDataKeys, clickedId]); + } + } + }} + /> + + {selectedCoinType === "VESTS" && ( +
+ + + setVestsHpUnit(checked ? "hp" : "vests") + } + /> + +
+ )} +
); }; -export default BalanceHistoryChart; +export default BalanceHistoryChart; \ No newline at end of file -- GitLab From f34f0dd9bb23140a9a4a85e1f3449968054caf1f Mon Sep 17 00:00:00 2001 From: Ghina Al Rashwani Date: Sat, 1 Nov 2025 00:12:54 +0200 Subject: [PATCH 2/2] fixing brush and size --- .../balanceHistory/BalanceHistoryChart.tsx | 74 +++++++++++++------ 1 file changed, 50 insertions(+), 24 deletions(-) diff --git a/components/balanceHistory/BalanceHistoryChart.tsx b/components/balanceHistory/BalanceHistoryChart.tsx index 205232052..b57efba0f 100644 --- a/components/balanceHistory/BalanceHistoryChart.tsx +++ b/components/balanceHistory/BalanceHistoryChart.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useMemo, useCallback, + useRef, SetStateAction, Dispatch, } from "react"; @@ -99,12 +100,23 @@ const BalanceHistoryChart: React.FC = ({ if (type === "VESTS") { const vests = item.balance?.toString() || "0"; + + console.log("--- VESTS Processing ---"); + console.log("Item Timestamp:", item.timestamp); + console.log("Raw Vests:", vests); + console.log("Hive Price (from item.hivePrice):", item.hivePrice); + console.log("Dynamic Global Data (for vestsToHp):", dynamicGlobalData); + + const convertedHP = hiveChain.vestsToHp( vests, dynamicGlobalData.headBlockDetails.rawTotalVestingFundHive, dynamicGlobalData.headBlockDetails.rawTotalVestingShares ); + console.log("Raw convertedHP (from hiveChain.vestsToHp):", convertedHP); + + let convertedHPNumeric: number; if (typeof convertedHP === "number") { convertedHPNumeric = convertedHP; @@ -120,10 +132,17 @@ const BalanceHistoryChart: React.FC = ({ convertedHPNumeric = 0; } + console.log("Parsed convertedHPNumeric:", convertedHPNumeric); + + const dollarValueFull = !isNaN(convertedHPNumeric) && !isNaN(hivePrice) ? convertedHPNumeric * hivePrice : 0; + + console.log("Calculated dollarValueFull (HP * Hive Price):", dollarValueFull); + console.log("--- End VESTS Processing ---"); + return { ...item, @@ -157,6 +176,20 @@ const BalanceHistoryChart: React.FC = ({ [dynamicGlobalData, hiveChain] ); + const rawTimestampsRef = useRef( + (aggregatedAccountBalanceHistory || []).map((d) => d?.timestamp).join("|") + ); + const stableRawDataRef = useRef(aggregatedAccountBalanceHistory || []); + + useEffect(() => { + const incoming = aggregatedAccountBalanceHistory || []; + const serial = incoming.map((d) => d?.timestamp).join("|"); + if (serial !== rawTimestampsRef.current) { + rawTimestampsRef.current = serial; + stableRawDataRef.current = incoming; + } + }, [aggregatedAccountBalanceHistory]); + const dataMap: Record< string, { @@ -172,9 +205,9 @@ const BalanceHistoryChart: React.FC = ({ > = useMemo(() => { return { [selectedCoinType]: - processedData(aggregatedAccountBalanceHistory, selectedCoinType) || [], + processedData(stableRawDataRef.current, selectedCoinType) || [], }; - }, [processedData, aggregatedAccountBalanceHistory, selectedCoinType]); + }, [processedData, selectedCoinType]); const handleCoinTypeChange = (coinType: string) => { setSelectedCoinType(coinType); @@ -182,7 +215,6 @@ const BalanceHistoryChart: React.FC = ({ const displayData = useMemo(() => { return dataMap[selectedCoinType]; - //eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedCoinType, vestsHpUnit, dataMap]); const CustomTooltip = ({ @@ -210,6 +242,9 @@ const BalanceHistoryChart: React.FC = ({ const savingsBalanceChange = selectedData?.savings_balance_change ?? 0; const dollarValue = selectedData?.dollarValue ?? 0; + + + const isPositiveChange = balanceChange > 0; const isZeroChange = balanceChange === 0; const isSavingsPositiveChange = savingsBalanceChange > 0; @@ -257,7 +292,7 @@ const BalanceHistoryChart: React.FC = ({ {dollarValue || dollarValue === 0 ? (
Dollar Value: $ - {formatNumber(dollarValue, false, selectedCoinType === "VESTS")} + {formatNumber(dollarValue, false, false)}
) : null}
@@ -371,7 +406,6 @@ const BalanceHistoryChart: React.FC = ({ return [minValue, maxValue]; }; - // Move useMemo calls outside of any conditional returns const [fullDataMin, fullDataMax] = useMemo( () => getMinMax(displayData), [displayData, selectedCoinType, vestsHpUnit, showSavingsBalance] @@ -379,15 +413,14 @@ const BalanceHistoryChart: React.FC = ({ const [minValue, maxValue] = zoomedDomain || [fullDataMin, fullDataMax]; const chartBottomMargin = useMemo(() => { - let margin = 60; + let margin = 40; margin += 50; if (isMobile) { margin += 30; } return margin; - }, [isMobile]); + }, [isMobile,quickView]); - // Construct the payload for the Legend component const legendPayload: Payload[] = useMemo(() => { const payloadItems: Payload[] = [ { @@ -398,13 +431,13 @@ const BalanceHistoryChart: React.FC = ({ id: selectedCoinType === "VESTS" && vestsHpUnit === "hp" ? "convertedHive" - : "balance", // Use the actual dataKey as the id for toggling - type: "line", // Shape for the legend item + : "balance", + type: "line", color: colorMap[selectedCoinType], }, { value: "DOLLAR", - id: "dollarValue", // Use the actual dataKey as the id for toggling + id: "dollarValue", type: "line", color: colorMap.DOLLAR, }, @@ -413,13 +446,12 @@ const BalanceHistoryChart: React.FC = ({ if (showSavingsBalance === "yes" && selectedCoinType !== "VESTS") { payloadItems.push({ value: t("balanceHistoryChart.savingsBalance"), - id: "savings_balance", // Use the actual dataKey as the id for toggling + id: "savings_balance", type: "line", color: colorMap.SAVINGS, }); } - // Filter based on hiddenDataKeys using the 'id' of the payload return payloadItems.filter((item) => !hiddenDataKeys.includes(item.id as string)); }, [selectedCoinType, vestsHpUnit, showSavingsBalance, hiddenDataKeys, t]); @@ -428,12 +460,7 @@ const BalanceHistoryChart: React.FC = ({ startIndex?: number; endIndex?: number; }) => { - if ( - !domain || - domain.startIndex === undefined || - domain.endIndex === undefined - ) { - setZoomedDomain([fullDataMin, fullDataMax]); + if (!domain || domain.startIndex === undefined || domain.endIndex === undefined) { return; } @@ -444,7 +471,7 @@ const BalanceHistoryChart: React.FC = ({ const [min, max] = getMinMax(visibleData); setZoomedDomain([min, max]); } else { - setZoomedDomain([fullDataMin, fullDataMax]); // Reset if no data visible + setZoomedDomain([fullDataMin, fullDataMax]); } }; @@ -477,8 +504,8 @@ const BalanceHistoryChart: React.FC = ({ data={displayData || []} margin={{ top: 20, - right: isMobile ? 75 : 52, - left: isMobile ? 20 : 12, + right: isMobile ? 5 : 25, + left: isMobile ? 5 : 5, bottom: chartBottomMargin, }} @@ -613,7 +640,6 @@ const BalanceHistoryChart: React.FC = ({ maxWidth: selectedCoinType === "VESTS" ? "calc(100% - 150px)" : "100%", }} onClick={(event) => { - // The event.payload.id contains the dataKey we manually assigned const clickedId = event.payload?.id; if (clickedId) { const isHidden = hiddenDataKeys.includes(clickedId as string); @@ -659,4 +685,4 @@ const BalanceHistoryChart: React.FC = ({ ); }; -export default BalanceHistoryChart; \ No newline at end of file +export default BalanceHistoryChart; -- GitLab