mango-ui-v3/components/account_page/LongShortChart.tsx

120 lines
3.5 KiB
TypeScript

import { PieChart, Pie, Cell, Tooltip } from 'recharts'
import { formatUsdValue, tokenPrecision } from 'utils'
import * as MonoIcons from '../icons'
import { QuestionMarkCircleIcon } from '@heroicons/react/solid'
import { useTheme } from 'next-themes'
export const CHART_COLORS = (theme) => {
return {
All: '#ff7c43',
spacer: theme === 'Light' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)',
ADA: '#404C5E',
AVAX: '#E84142',
BNB: '#F3BA2F',
BTC: '#F7931A',
ETH: '#627EEA',
FTT: '#02A6C2',
GMT: '#CBA74A',
MNGO: '#FBB31F',
MSOL: '#C8ECE1',
RAY: '#4CA2DA',
SOL: '#916CE0',
SRM: '#58D4E3',
USDC: '#2775CA',
USDT: '#50AF95',
}
}
const LongShortChart = ({ chartData }: { chartData: any[] }) => {
const { theme } = useTheme()
const CustomToolTip = () => {
const renderIcon = (symbol) => {
const iconName = `${symbol.slice(0, 1)}${symbol
.slice(1, 4)
.toLowerCase()}MonoIcon`
const SymbolIcon = MonoIcons[iconName] || QuestionMarkCircleIcon
return (
<div style={{ color: CHART_COLORS(theme)[symbol] }}>
<SymbolIcon className={`mr-1.5 h-3.5 w-auto`} />
</div>
)
}
const showTooltip = chartData.find((d) => d.symbol !== 'spacer')
return chartData.length && showTooltip ? (
<div className="space-y-1.5 rounded-md bg-th-bkg-2 p-3 pb-2">
{chartData
.filter((d) => d.symbol !== 'spacer')
.sort((a, b) => b.value - a.value)
.map((entry, index) => {
const { amount, asset, symbol, value } = entry
return (
<div
className="flex w-48 items-center justify-between border-b border-th-bkg-4 pb-1 text-xs last:border-b-0 last:pb-0"
key={`item-${index}-${symbol}`}
>
<div className="mb-0.5 flex items-center">
{renderIcon(symbol)}
<p
className="mb-0 text-xs leading-none"
style={{ color: CHART_COLORS(theme)[symbol] }}
>
{asset}
</p>
</div>
<div className="text-right">
<p
className="mb-0 text-xs leading-none"
style={{ color: CHART_COLORS(theme)[symbol] }}
>
{amount.toLocaleString(undefined, {
maximumFractionDigits: tokenPrecision[symbol],
})}
</p>
<p className="mb-0 text-xxs text-th-fgd-4">
{formatUsdValue(value)}
</p>
</div>
</div>
)
})}
</div>
) : null
}
return chartData.length ? (
<PieChart width={40} height={40}>
<Pie
cursor="pointer"
data={chartData}
dataKey="value"
cx="50%"
cy="50%"
outerRadius={20}
innerRadius={10}
minAngle={2}
startAngle={90}
endAngle={450}
>
{chartData
.sort((a, b) => a.symbol.localeCompare(b.symbol))
.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={CHART_COLORS(theme)[entry.symbol]}
stroke="rgba(0,0,0,0.1)"
/>
))}
</Pie>
<Tooltip
content={<CustomToolTip />}
position={{ x: 48, y: 0 }}
wrapperStyle={{ zIndex: 10 }}
/>
</PieChart>
) : null
}
export default LongShortChart