fix: polish accounts portfolio summary (#159)

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.module.css

@@ -65,18 +65,32 @@
 
 .summary {
 	font-variant-numeric: tabular-nums lining-nums;
-	white-space: nowrap;
+	align-items: flex-end;
+}
+
+.currencySummary {
+	min-width: 0;
 }
 
 .total {
 	color: var(--wl-color-text);
 	font-size: var(--mantine-font-size-lg);
 	line-height: var(--mantine-line-height-lg);
+	overflow-wrap: anywhere;
 }
 
 .return,
 .cashValue {
 	font-variant-numeric: tabular-nums lining-nums;
+}
+
+.return {
+	justify-content: flex-end;
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+
+.cashValue {
 	white-space: nowrap;
 }
 
@@ -138,7 +152,11 @@
 		text-align: left;
 	}
 
-	.balance > div {
+	.summary {
+		align-items: flex-start;
+	}
+
+	.return {
 		justify-content: flex-start;
 	}
 }

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.test.tsx

@@ -119,25 +119,26 @@ describe("BrokerageAccountList", () => {
 		expect(within(link).getByText("123 456 789 012 345 678 902,00 ₽"))
 			.toBeInTheDocument();
 		expect(within(link).getByText("Еще 1 валюта")).toBeInTheDocument();
-		expect(within(link).getByText("+12,40 %")).toBeInTheDocument();
+		expect(within(link).getByText("+12,4 %")).toBeInTheDocument();
 		expect(within(link).getByText("+136 900 ₽")).toBeInTheDocument();
-		expect(within(link).getByText("−3,05 %")).toBeInTheDocument();
-		expect(within(link).getByText("−4,2 USD")).toBeInTheDocument();
+		expect(within(link).getByText("−3,1 %")).toBeInTheDocument();
+		expect(within(link).getByText("−4,2 $")).toBeInTheDocument();
 		const nullReturnLink = screen.getByRole("link", { name: /Без доходности/ });
 		expect(within(nullReturnLink).getByText("—")).toBeInTheDocument();
 		expect(within(link).getByText("частично")).toBeInTheDocument();
 		expect(within(link).getByText("82 500,50 ₽")).toBeInTheDocument();
-		expect(within(link).getAllByText("20,00 USD")).not.toHaveLength(0);
+		expect(within(link).getAllByText("20,00 $")).not.toHaveLength(0);
 		expect(within(link).getByText("17 позиций")).toBeInTheDocument();
 		expect(screen.getByRole("img", {
-			name: "Структура в RUB: Акции 50 %; Облигации 30 %; "
-				+ "Другие активы 0 %; Свободные деньги 20 %",
+			name: "Структура в RUB: Акции 50,0 %; Облигации 30,0 %; "
+				+ "Другие активы 0,0 %; Свободные деньги 20,0 %",
 		})).toBeInTheDocument();
-		const stockLegend = within(link).getByText(/Акции 50 %/);
-		expect(stockLegend).toHaveTextContent("● Акции 50 %");
+		const stockLegend = within(link).getByText(/Акции 50,0 %/);
+		expect(stockLegend).toHaveTextContent("● Акции 50,0 %");
 		// eslint-disable-next-line testing-library/no-node-access -- The legend is aria-hidden, so only DOM traversal reaches its container.
 		expect(stockLegend.parentElement).toHaveAttribute("aria-hidden", "true");
-		expect(within(link).queryByText(/Другие активы 0 %/)).not.toBeInTheDocument();
+		expect(within(link).queryByText(/Другие активы 0,0 %/))
+			.not.toBeInTheDocument();
 		expect(link).toHaveTextContent("По данным брокера");
 		expect(link).toHaveTextContent("Структура RUB: Акции 100");
 	});

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx

@@ -15,6 +15,11 @@ import classes from "./BrokerageAccountList.module.css";
 const DECIMAL_PART_COUNT = 2;
 const STRUCTURE_CATEGORY_ORDER = ["STOCK", "BOND", "OTHER", "CASH"] as const;
 
+const percentFormatter = new Intl.NumberFormat("ru-RU", {
+	maximumFractionDigits: 1,
+	minimumFractionDigits: 1,
+});
+
 type AvailableSummary = Extract<
 	BrokerageAccountCard["summary"],
 	{ state: "available" }
@@ -37,20 +42,15 @@ type StructureCurrency = PortfolioSummary["structure"]["currencies"][number];
 function formatPercent(value: null | string) {
 	if (value === null) return "—";
 
-	const formatted = `${value.replace(".", ",")}\u{A0}%`;
-	if (isZero(value))
-		return value.startsWith("-") ? formatted.slice(1) : formatted;
+	const rounded = percentFormatter.format(Math.abs(Number(value)));
+	let sign = "";
+	if (rounded !== "0,0") sign = value.startsWith("-") ? "−" : "+";
 
-	return value.startsWith("-") ? `−${formatted.slice(1)}` : `+${formatted}`;
+	return `${sign}${rounded}\u{A0}%`;
 }
 
 function formatStructurePercent(value: string) {
-	let trimmed = value;
-	while (trimmed.includes(".") && trimmed.endsWith("0"))
-		trimmed = trimmed.slice(0, -1);
-	if (trimmed.endsWith(".")) trimmed = trimmed.slice(0, -1);
-
-	return trimmed.replace(".", ",");
+	return percentFormatter.format(Number(value));
 }
 
 function isZero(value: string) {
@@ -65,22 +65,18 @@ const ReturnValue: FC<ReturnValueProps> = (props) => {
 	const { t } = useTranslation();
 	const { item } = props;
 
-	const isNegative = item.percent !== null
-		&& item.percent.startsWith("-")
-		&& !isZero(item.percent);
-
-	const isPositive = item.percent !== null
-		&& !item.percent.startsWith("-")
-		&& !isZero(item.percent);
+	const displayedPercent = formatPercent(item.percent);
+	const isNegative = displayedPercent.startsWith("−");
+	const isPositive = displayedPercent.startsWith("+");
 
 	let toneClass = classes.neutral;
 	if (isNegative) toneClass = classes.negative;
 	else if (isPositive) toneClass = classes.positive;
 
 	return (
-		<Group className={classes.return} gap="xs" wrap="nowrap">
+		<Group className={classes.return} gap="xs" wrap="wrap">
 			<Text className={toneClass} fw={700} size="sm">
-				{formatPercent(item.percent)}
+				{displayedPercent}
 			</Text>
 
 			<Text className={toneClass} size="sm">
@@ -200,35 +196,35 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
 
 	return (
 		<Stack className={classes.balance} gap="xs">
-			<Group align="flex-start" gap="lg" justify="flex-end" wrap="nowrap">
-				<Stack className={classes.summary} gap={4}>
-					{summary.totals.map(total => (
-						<Text className={classes.total} fw={700} key={total.currency}>
-							{formatMoney(total, { withRoundedCents: true })}
-						</Text>
-					))}
+			<Stack className={classes.summary} gap="sm">
+				{summary.totals.map((total) => {
+					const item = summary.portfolio.unrealizedReturnByCurrency.find(
+						returnItem => returnItem.currency === total.currency,
+					);
 
-					{!!summary.remainingCurrencyCount && (
-						<Text c="dimmed" size="sm">
-							{t("accounts.remainingCurrencies", {
-								count: summary.remainingCurrencyCount,
-							})}
-						</Text>
-					)}
-				</Stack>
+					return (
+						<Stack
+							className={classes.currencySummary}
+							gap={2}
+							key={total.currency}
+						>
+							<Text className={classes.total} fw={700}>
+								{formatMoney(total, { withRoundedCents: true })}
+							</Text>
 
-				<Stack gap={4}>
-					{summary.totals.map((total) => {
-						const item = summary.portfolio.unrealizedReturnByCurrency.find(
-							returnItem => returnItem.currency === total.currency,
-						);
+							{item && <ReturnValue item={item} />}
+						</Stack>
+					);
+				})}
 
-						return item
-							? <ReturnValue item={item} key={total.currency} />
-							: null;
-					})}
-				</Stack>
-			</Group>
+				{!!summary.remainingCurrencyCount && (
+					<Text c="dimmed" size="sm">
+						{t("accounts.remainingCurrencies", {
+							count: summary.remainingCurrencyCount,
+						})}
+					</Text>
+				)}
+			</Stack>
 
 			{summary.portfolio.cashBalances.length > 0 && (
 				<Group className={classes.cash} gap="xs" justify="flex-end">

src/entities/brokerage-event/ui/BrokerageEventGroup.test.tsx

@@ -103,7 +103,7 @@ describe("BrokerageEventGroup", () => {
 			event({ id: "iis", name: "ИИС" }, "200"),
 		]);
 
-		expect(screen.getByRole("list", { name: /10 USD.*200 ₽/ }))
+		expect(screen.getByRole("list", { name: /10 \$.*200 ₽/ }))
 			.toBeInTheDocument();
 	});