moex/moex-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate BrokerAllocationChart wrappers to design system

Browse Source
This commit is contained in:
Sergey Krylov 2026-06-21 20:38:01 +03:00
parent 6debf66ac8
commit 1cabe2d71e
1 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
apps/frontend/src/widgets/broker-allocation-chart/ui/BrokerAllocationChart.tsx
View File

@ -1,4 +1,6 @@
import type { BrokerPortfolio } from '@/shared/api/responses'; import type { BrokerPortfolio } from '@/shared/api/responses';
import { Box } from '@mui/material';
import { Text } from '@moex-vibe/design-system';
import { buildBrokerAllocation } from '@/entities/broker-position'; import { buildBrokerAllocation } from '@/entities/broker-position';
import { formatBrokerCurrencyValue } from '@/shared/lib/formatters'; import { formatBrokerCurrencyValue } from '@/shared/lib/formatters';
@ -26,7 +28,7 @@ export function BrokerAllocationChart({ portfolio }: { portfolio: BrokerPortfoli
}); });
return ( return (
<figure className="broker-allocation"> <Box component="figure" sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
<svg role="img" aria-label="Структура брокерского портфеля" viewBox="0 0 120 120"> <svg role="img" aria-label="Структура брокерского портфеля" viewBox="0 0 120 120">
<title>Структура брокерского портфеля</title> <title>Структура брокерского портфеля</title>
{arcs.map((sector) => ( {arcs.map((sector) => (
@ -44,40 +46,50 @@ export function BrokerAllocationChart({ portfolio }: { portfolio: BrokerPortfoli
/> />
))} ))}
</svg> </svg>
<figcaption> <Box component="figcaption" sx={{ display: 'grid', gap: 1.5 }}>
{sectors.length === 0 ? ( {sectors.length === 0 ? (
<p>Нет данных для распределения</p> <Text tone="muted">Нет данных для распределения</Text>
) : ( ) : (
<ul> <Box component="ul" sx={{ listStyle: 'none', display: 'grid', gap: 1 }}>
{sectors.map((sector) => ( {sectors.map((sector) => (
<li key={sector.key}> <Box
<span component="li"
className="broker-allocation__swatch" key={sector.key}
sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
>
<Box
sx={{
width: 2,
height: 2,
borderRadius: 0.25,
background: sector.color,
flexShrink: 0,
}}
aria-hidden="true" aria-hidden="true"
style={{ background: sector.color }}
/> />
<span> <Box component="span">
{sector.label}: {formatBrokerCurrencyValue(currency, sector.value)} ·{' '} {sector.label}: {formatBrokerCurrencyValue(currency, sector.value)} ·{' '}
{sector.percent.toFixed(1)}% {sector.percent.toFixed(1)}%
</span> </Box>
</li> </Box>
))} ))}
</ul> </Box>
)} )}
{negative.length > 0 && ( {negative.length > 0 && (
<ul <Box
className="broker-allocation__negative" component="ul"
aria-label="Отрицательные значения распределения" aria-label="Отрицательные значения распределения"
sx={{ listStyle: 'none', display: 'grid', gap: 1 }}
> >
{negative.map((item) => ( {negative.map((item) => (
<li key={item.key}> <Box component="li" key={item.key}>
{item.label}: отрицательное значение{' '} {item.label}: отрицательное значение{' '}
{formatBrokerCurrencyValue(currency, item.value)} {formatBrokerCurrencyValue(currency, item.value)}
</li> </Box>
))} ))}
</ul> </Box>
)} )}
</figcaption> </Box>
</figure> </Box>
); );
} }