From 976df36795414359f4a65532caebbcd5bbd9b879 Mon Sep 17 00:00:00 2001 From: antoncoding Date: Fri, 6 Feb 2026 13:14:53 +0800 Subject: [PATCH] fix: double color --- .../yield-analysis-distribution.tsx | 6 ++--- .../yield-analysis-yield-breakdown.tsx | 6 ++--- .../components/user-positions-chart.tsx | 22 ++++++++++--------- src/features/positions/utils/colors.ts | 18 +++++---------- 4 files changed, 24 insertions(+), 28 deletions(-) diff --git a/src/features/position-detail/components/yield-analysis-distribution.tsx b/src/features/position-detail/components/yield-analysis-distribution.tsx index eef794a2..ba191a91 100644 --- a/src/features/position-detail/components/yield-analysis-distribution.tsx +++ b/src/features/position-detail/components/yield-analysis-distribution.tsx @@ -4,7 +4,7 @@ import { useMemo } from 'react'; import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip as RechartsTooltip } from 'recharts'; import { Card } from '@/components/ui/card'; import { useChartColors } from '@/constants/chartColors'; -import { getCollateralColorFromPalette, OTHER_COLOR } from '@/features/positions/utils/colors'; +import { getColorByIndex, OTHER_COLOR } from '@/features/positions/utils/colors'; import { formatBalance, formatReadable } from '@/utils/balance'; import type { MarketPositionWithEarnings } from '@/utils/types'; @@ -67,7 +67,7 @@ export function YieldAnalysisDistribution({ markets, periodLabel }: YieldAnalysi const toPercent = (value: bigint) => Number((value * 10_000n) / totalWeighted) / 100; - const entries: PieEntry[] = weighted.map(({ position, avgCapital, weightedCapital }) => { + const entries: PieEntry[] = weighted.map(({ position, avgCapital, weightedCapital }, i) => { const decimals = position.market.loanAsset.decimals; const avgBalance = formatReadable(Number(formatBalance(avgCapital, decimals))); return { @@ -75,7 +75,7 @@ export function YieldAnalysisDistribution({ markets, periodLabel }: YieldAnalysi label: marketDisplayNames[position.market.uniqueKey] ?? position.market.collateralAsset?.symbol ?? 'Unknown', value: toPercent(weightedCapital), percentage: toPercent(weightedCapital), - color: getCollateralColorFromPalette(position.market.uniqueKey.toLowerCase(), chartColors.pie), + color: getColorByIndex(i, chartColors.pie), avgBalance: `${avgBalance} ${position.market.loanAsset.symbol ?? ''}`.trim(), }; }); diff --git a/src/features/position-detail/components/yield-analysis-yield-breakdown.tsx b/src/features/position-detail/components/yield-analysis-yield-breakdown.tsx index 9e6269aa..74c0cb01 100644 --- a/src/features/position-detail/components/yield-analysis-yield-breakdown.tsx +++ b/src/features/position-detail/components/yield-analysis-yield-breakdown.tsx @@ -4,7 +4,7 @@ import { useMemo } from 'react'; import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip as RechartsTooltip } from 'recharts'; import { Card } from '@/components/ui/card'; import { useChartColors } from '@/constants/chartColors'; -import { getCollateralColorFromPalette, OTHER_COLOR } from '@/features/positions/utils/colors'; +import { getColorByIndex, OTHER_COLOR } from '@/features/positions/utils/colors'; import { formatBalance, formatReadable } from '@/utils/balance'; import type { MarketPositionWithEarnings } from '@/utils/types'; @@ -67,11 +67,11 @@ export function YieldAnalysisYieldBreakdown({ markets, periodLabel }: YieldAnaly key: position.market.uniqueKey, label: marketDisplayNames[position.market.uniqueKey] ?? position.market.collateralAsset?.symbol ?? 'Unknown', percentage: toPercent(earned), - color: getCollateralColorFromPalette(position.market.uniqueKey.toLowerCase(), chartColors.pie), earnedAmount: `${earnedAmount} ${position.market.loanAsset.symbol ?? ''}`.trim(), }; }) - .sort((a, b) => b.percentage - a.percentage); + .sort((a, b) => b.percentage - a.percentage) + .map((entry, i) => ({ ...entry, color: getColorByIndex(i, chartColors.pie) })); if (formattedEntries.length <= MAX_PIE_ITEMS) return formattedEntries; diff --git a/src/features/positions/components/user-positions-chart.tsx b/src/features/positions/components/user-positions-chart.tsx index 9001b320..97b26ae6 100644 --- a/src/features/positions/components/user-positions-chart.tsx +++ b/src/features/positions/components/user-positions-chart.tsx @@ -1,11 +1,10 @@ 'use client'; -import { useState, useMemo, useCallback } from 'react'; +import { useState, useMemo } from 'react'; import type { Address } from 'viem'; import { Card } from '@/components/ui/card'; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts'; import { useChartColors } from '@/constants/chartColors'; -import { getCollateralColorFromPalette } from '@/features/positions/utils/colors'; import { formatReadable } from '@/utils/balance'; import { chartTooltipCursor } from '@/features/market-detail/components/charts/chart-utils'; import { usePositionHistoryChart, type PositionHistoryDataPoint, type MarketInfo } from '@/hooks/usePositionHistoryChart'; @@ -78,11 +77,14 @@ function ChartContent({ // Track which data point is being hovered (for synced pie chart) const [hoveredIndex, setHoveredIndex] = useState(null); - // Get consistent color for a market based on its unique key - const getMarketColor = useCallback( - (marketKey: string): string => getCollateralColorFromPalette(marketKey.toLowerCase(), chartColors.pie), - [chartColors.pie], - ); + // Assign colors by market order to guarantee distinct colors within this chart + const marketColorMap = useMemo(() => { + const map: Record = {}; + for (const [i, market] of markets.entries()) { + map[market.uniqueKey] = chartColors.pie[i % chartColors.pie.length]; + } + return map; + }, [markets, chartColors.pie]); // Detect duplicate collateral symbols and create display names const marketDisplayNames = useMemo(() => { @@ -129,12 +131,12 @@ function ChartContent({ key: market.uniqueKey, name: marketDisplayNames[market.uniqueKey] || market.collateralSymbol, value, - color: getMarketColor(market.uniqueKey), + color: marketColorMap[market.uniqueKey] ?? chartColors.pie[0], percentage: total > 0 && value > 0 ? (value / total) * 100 : 0, }; }) .sort((a, b) => b.value - a.value); - }, [currentDataPoint, markets, getMarketColor, marketDisplayNames]); + }, [currentDataPoint, markets, marketColorMap, chartColors.pie, marketDisplayNames]); // Format date for display const formatDate = (timestamp: number) => { @@ -261,7 +263,7 @@ function ChartContent({ /> {markets.map((market) => { const key = market.uniqueKey; - const color = getMarketColor(key); + const color = marketColorMap[key] ?? chartColors.pie[0]; const displayName = marketDisplayNames[key] || market.collateralSymbol; return (