Sergey Krylov
1774c7ffd6
- Remove cross-entity import (broker-position -> broker-operation) - Extract duplicated formatters to shared/lib/formatters.ts - Flatten shared/ui/broker-allocation-bar nesting - Clean up entities/stock/index.ts public API All 111 tests pass, build clean.
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
type AllocationBarItem = {
|
||
key: string;
|
||
label: string;
|
||
percent: number;
|
||
value: number;
|
||
color: string;
|
||
};
|
||
|
||
export function BrokerAllocationBar({
|
||
items,
|
||
title,
|
||
}: {
|
||
items: AllocationBarItem[];
|
||
title: string;
|
||
}) {
|
||
const positiveItems = items.filter((item) => item.value > 0);
|
||
|
||
if (positiveItems.length === 0) {
|
||
return <p className="broker-allocation-bar__empty">Нет данных для распределения</p>;
|
||
}
|
||
|
||
return (
|
||
<div className="broker-allocation-bar">
|
||
<div className="broker-allocation-bar__track" role="img" aria-label={title}>
|
||
{positiveItems.map((item) => (
|
||
<span
|
||
key={item.key}
|
||
className="broker-allocation-bar__segment"
|
||
style={{ width: `${item.percent}%`, background: item.color }}
|
||
aria-hidden="true"
|
||
/>
|
||
))}
|
||
</div>
|
||
<ul className="broker-allocation-bar__legend" aria-label={`${title}: легенда`}>
|
||
{positiveItems.map((item) => (
|
||
<li className="broker-allocation-bar__legend-item" key={item.key}>
|
||
<span
|
||
className="broker-allocation-bar__swatch"
|
||
style={{ background: item.color }}
|
||
aria-hidden="true"
|
||
/>
|
||
<span>{item.label}</span>
|
||
<strong>{item.percent.toFixed(0)}%</strong>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
);
|
||
}
|