feat(account): add concentration tab with top-5 slices and chart (WealthLedger/main#48)

src/app/routes/AppRoutes/AllAccounts.test.tsx

@@ -46,8 +46,10 @@ const position: Portfolio["positions"][number]
 		displayName: "Сбербанк",
 		figi: "SBER",
 		isin: null,
+		issuer: null,
 		logoName: null,
 		quantity: "2",
+		sector: null,
 		ticker: "SBER",
 		type: "STOCK",
 	};

src/pages/account/model/concentration.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, it } from "vitest";
+
+import type { Portfolio } from "@/entities/portfolio";
+
+import { toConcentration } from "./concentration";
+import { portfolio, position } from "./positions.fixtures";
+
+function snapshot(positions: Portfolio["positions"]): Portfolio {
+	return { ...portfolio, positions };
+}
+
+function stock(
+	name: string,
+	value: null | string,
+	currency = "RUB",
+	overrides: Partial<Portfolio["positions"][number]> = {},
+): Portfolio["positions"][number] {
+	return {
+		...position,
+		currentValue: value === null ? null : { currency, value },
+		displayName: name,
+		...overrides,
+	};
+}
+
+describe("account concentration", () => {
+	it("uses exact positive values and excludes cash, negatives and nulls", () => {
+		const model = toConcentration(snapshot([
+			stock("A", "1"), stock("B", "15"),
+			stock("C", "0"), stock("D", "-50"), stock("E", null),
+			stock("F", null, "USD"), stock("G", "-3", "USD"),
+		]), "stocks", "RUB");
+
+		expect(model.currencies).toEqual(["RUB", "USD"]);
+		expect(model.total).toBe("16");
+		expect(model.items.map(item => item.share)).toEqual(["93,8 %", "6,3 %"]);
+		expect(model.unaccounted).toBe(3);
+		const negative = snapshot([stock("A", "-3", "USD")]);
+		expect(toConcentration(negative, "stocks", "USD"))
+			.toMatchObject({ empty: true, unaccounted: 1 });
+	});
+
+	it("ranks seven positions with exact other and top-five totals", () => {
+		const model = toConcentration(snapshot([
+			stock("A", "400"), stock("B", "250"), stock("C", "150"),
+			stock("D", "100"), stock("E", "50"), stock("F", "30"),
+			stock("G", "20"),
+		]), "stocks", "RUB");
+
+		expect(model.items.map(item => item.amount)).toEqual([
+			"400", "250", "150", "100", "50",
+		]);
+		expect(model.other).toMatchObject({
+			amount: "50", count: 2, share: "5 %",
+		});
+		expect(model.top5Share).toBe("95 %");
+		expect(model.other?.entries.map(item => item.share)).toEqual([
+			"3 %", "2 %",
+		]);
+	});
+
+	it("keeps sixth row, tiny share and stable alphabetical ties", () => {
+		const model = toConcentration(snapshot([
+			stock("Сбер", "100"), stock("X5", "100"),
+			stock("VK", "100"), stock("D", "100"),
+			stock("E", "100"), stock("F", "100"),
+		]), "stocks", "RUB");
+
+		expect(model.items).toHaveLength(6);
+		expect(model.other).toBeNull();
+		expect(model.items.slice(0, 2).map(item => item.name)).toEqual([
+			"D", "E",
+		]);
+
+		const tiny = snapshot([
+			stock("Large", "100000000"), stock("Small", "1"),
+		]);
+
+		expect(toConcentration(tiny, "stocks", "RUB").items[1]?.share)
+			.toBe("< 0,1 %");
+	});
+
+	it("groups sectors and issuers by codes, not labels", () => {
+		const positions = [
+			stock("A", "300", "RUB", {
+				issuer: { id: "one", name: "Сбербанк" }, sector: "energy",
+			}),
+			stock("B", "200", "RUB", {
+				issuer: { id: "one", name: "Сбер" }, sector: "energy",
+				type: "BOND",
+			}),
+			stock("C", "100", "RUB", {
+				issuer: { id: "two", name: "Сбер" }, sector: "financial",
+				type: "FUND",
+			}),
+			stock("D", "50", "RUB", { issuer: null, sector: null }),
+		];
+
+		expect(toConcentration(snapshot(positions), "sectors", "RUB")
+			.items.map(item => item.amount)).toEqual(["500", "100", "50"]);
+		expect(toConcentration(snapshot(positions), "issuers", "RUB")
+			.items.map(item => [item.name, item.amount])).toEqual([
+			["Сбербанк", "500"], ["", "50"],
+		]);
+	});
+
+	it("chooses issuer name from the largest position, then alphabetically", () => {
+		const data = snapshot([
+			stock("A", "200", "RUB", {
+				issuer: { id: "brand", name: "Сбербанк" },
+			}),
+			stock("B", "200", "RUB", {
+				issuer: { id: "brand", name: "Сбер" },
+			}),
+			stock("C", "300", "RUB", {
+				issuer: { id: "other", name: "Альфа" },
+			}),
+		]);
+
+		expect(toConcentration(data, "issuers", "RUB").items[0]?.name)
+			.toBe("Сбер");
+	});
+});

src/pages/account/model/concentration.ts

@@ -0,0 +1,237 @@
+import type { Portfolio } from "@/entities/portfolio";
+
+import {
+	type Decimal,
+	decimalFromString,
+	decimalToString,
+	sumDecimals,
+} from "@/shared/lib";
+
+type Concentration = {
+	currencies: string[];
+	empty: boolean;
+	items: ConcentrationItem[];
+	other: ConcentrationOther | null;
+	top5Share: null | string;
+	total: null | string;
+	unaccounted: number;
+};
+
+type ConcentrationItem = {
+	amount: string;
+	chartValue: number;
+	key: string;
+	name: string;
+	share: string;
+	unknown: boolean;
+};
+
+type ConcentrationOther = ConcentrationItem & {
+	count: number;
+	entries: ConcentrationItem[];
+};
+
+type Group = {
+	best?: { name: string; value: Decimal };
+	first: number;
+	key: string;
+	name: string;
+	unknown: boolean;
+	values: Decimal[];
+};
+
+type Position = Portfolio["positions"][number];
+
+type Slice = "bonds"
+	| "issuers"
+	| "sectors"
+	| "stocks";
+
+const eligibleTypes = new Set(["BOND", "FUND", "STOCK"]);
+const RADIX = 10n;
+const CHART_PRECISION = 1_000_000n;
+const SHARE_PRECISION = 1000n;
+const HALF = 2n;
+const TOP = 5;
+const FIRST_OTHER = 7;
+
+const compareNames = (a: string, b: string) =>
+	a.toLowerCase().localeCompare(b.toLowerCase(), "en", {
+		numeric: false,
+	});
+
+function addPosition(
+	groups: Map<string, Group>,
+	position: Position,
+	index: number,
+	slice: Slice,
+	selected: null | string,
+): number {
+	if (!isIncluded(slice, position.type)) return 0;
+	if (!position.currentValue) return 1;
+	if (position.currentValue.currency !== selected) return 0;
+	const value = decimalFromString(position.currentValue.value);
+	if (value.value < 0n) return 1;
+	if (value.value === 0n) return 0;
+	const identity = groupIdentity(position, slice, index);
+
+	const group = groups.get(identity.key) ?? {
+		...identity, first: index, values: [],
+	};
+
+	group.values.push(value);
+
+	if (slice === "issuers" && !identity.unknown) {
+		const best = group.best;
+
+		if (!best || compareDecimal(value, best.value) > 0
+			|| (compareDecimal(value, best.value) === 0
+				&& compareNames(identity.name, best.name) < 0)) {
+			group.best = { name: identity.name, value };
+			group.name = identity.name;
+		}
+	}
+
+	groups.set(identity.key, group);
+
+	return 0;
+}
+
+function chartValue(part: Decimal, total: Decimal): number {
+	const scale = Math.max(part.scale, total.scale);
+	const numerator = part.value * RADIX ** BigInt(scale - part.scale);
+	const denominator = total.value * RADIX ** BigInt(scale - total.scale);
+
+	return Number(numerator * CHART_PRECISION / denominator)
+		/ Number(CHART_PRECISION);
+}
+
+function compareDecimal(a: Decimal, b: Decimal): number {
+	const scale = Math.max(a.scale, b.scale);
+	const left = a.value * RADIX ** BigInt(scale - a.scale);
+	const right = b.value * RADIX ** BigInt(scale - b.scale);
+
+	if (left > right) return 1;
+
+	return left < right ? -1 : 0;
+}
+
+function groupIdentity(position: Position, slice: Slice, index: number) {
+	if (slice === "sectors") {
+		const sector = position.sector;
+
+		return { key: sector ?? "", name: sector ?? "", unknown: !sector };
+	}
+
+	if (slice === "issuers") {
+		return {
+			key: position.issuer?.id ?? "",
+			name: position.issuer?.name ?? "",
+			unknown: !position.issuer,
+		};
+	}
+
+	return {
+		key: String(index),
+		name: position.displayName,
+		unknown: false,
+	};
+}
+
+function isIncluded(slice: Slice, type: string): boolean {
+	if (slice === "stocks") return type === "STOCK";
+	if (slice === "bonds") return type === "BOND";
+
+	return slice === "issuers" ? type === "STOCK" || type === "BOND" : eligibleTypes.has(type);
+}
+
+function share(part: Decimal, total: Decimal): string {
+	const scale = Math.max(part.scale, total.scale);
+	const numerator = part.value * RADIX ** BigInt(scale - part.scale);
+	const denominator = total.value * RADIX ** BigInt(scale - total.scale);
+	if (numerator * SHARE_PRECISION < denominator) return "< 0,1 %";
+
+	const tenths = (numerator * SHARE_PRECISION * HALF + denominator)
+		/ (HALF * denominator);
+
+	return tenths % RADIX === 0n ? `${tenths / RADIX} %` : `${tenths / RADIX},${tenths % RADIX} %`;
+}
+
+function toConcentration(
+	portfolio: Portfolio,
+	slice: Slice,
+	currency: null | string,
+): Concentration {
+	const currencies = [...new Set(portfolio.positions
+		.filter(position => eligibleTypes.has(position.type))
+		.filter(position => position.currentValue
+			&& decimalFromString(position.currentValue.value).value !== 0n)
+		.map(position => position.currentValue?.currency)
+		.filter((value): value is string => !!value))]
+		.toSorted((a, b) => a.localeCompare(b));
+
+	const selected = currency && currencies.includes(currency)
+		? currency
+		: currencies[0] ?? null;
+
+	const groups = new Map<string, Group>();
+	let unaccounted = 0;
+
+	for (const [index, position] of portfolio.positions.entries()) {
+		unaccounted += addPosition(groups, position, index, slice, selected);
+	}
+
+	const ranked = Array.from(groups.values(), group => ({
+		...group, sum: sumDecimals(group.values),
+	})).toSorted((a, b) => compareDecimal(b.sum, a.sum)
+		|| compareNames(a.name, b.name) || a.first - b.first);
+
+	const total = ranked.length > 0
+		? sumDecimals(ranked.map(item => item.sum))
+		: null;
+
+	const entries = total
+		? ranked.map(group => ({
+				amount: decimalToString(group.sum),
+				chartValue: chartValue(group.sum, total),
+				key: group.key,
+				name: group.name,
+				share: share(group.sum, total),
+				unknown: group.unknown,
+			}))
+		: [];
+
+	const rest = entries.length >= FIRST_OTHER ? entries.slice(TOP) : [];
+
+	const otherSum = rest.length > 0
+		? sumDecimals(ranked.slice(TOP).map(item => item.sum))
+		: null;
+
+	const other = otherSum && total
+		? {
+				amount: decimalToString(otherSum),
+				chartValue: chartValue(otherSum, total),
+				count: rest.length,
+				entries: rest,
+				key: "__other",
+				name: "", share: share(otherSum, total), unknown: false,
+			}
+		: null;
+
+	const top5 = ranked.length > TOP
+		? sumDecimals(ranked.slice(0, TOP).map(item => item.sum))
+		: null;
+
+	return {
+		currencies,
+		empty: !total,
+		items: other ? entries.slice(0, TOP) : entries,
+		other,
+		top5Share: top5 && total ? share(top5, total) : null,
+		total: total && decimalToString(total),
+		unaccounted,
+	};
+}
+
+export { toConcentration };
+export type { Concentration, ConcentrationItem, Slice };

src/pages/account/model/positions.fixtures.ts

@@ -13,8 +13,10 @@ const portfolio
 				displayName: "Акция",
 				figi: "FIGI-STOCK",
 				isin: null,
+				issuer: null,
 				logoName: "akciya.png",
 				quantity: "2",
+				sector: null,
 				ticker: null,
 				type: "STOCK",
 			},
@@ -25,8 +27,10 @@ const portfolio
 				displayName: "Облигация",
 				figi: "FIGI-BOND",
 				isin: "RU000A0JX0J2",
+				issuer: null,
 				logoName: null,
 				quantity: "1",
+				sector: null,
 				ticker: null,
 				type: "BOND",
 			},
@@ -37,8 +41,10 @@ const portfolio
 				displayName: "Фонд",
 				figi: "FIGI-FUND",
 				isin: null,
+				issuer: null,
 				logoName: "fond.png",
 				quantity: "3",
+				sector: null,
 				ticker: null,
 				type: "FUND",
 			},

src/pages/account/ui/AccountPage/AccountPage.test.tsx

@@ -25,6 +25,7 @@ import type {
 	AccountPageRecentOperations,
 } from "../../model/previews";
 
+import { toConcentration } from "../../model/concentration";
 import {
 	toAccountPagePositionSections,
 	toUnrealizedReturns,
@@ -84,8 +85,10 @@ const portfolio
 				displayName: "Вторая",
 				figi: "FIGI-2",
 				isin: null,
+				issuer: null,
 				logoName: "vtoraya.png",
 				quantity: "2",
+				sector: null,
 				ticker: null,
 				type: "STOCK",
 			},
@@ -96,8 +99,10 @@ const portfolio
 				displayName: "Первая",
 				figi: "FIGI-1",
 				isin: "RU000A0JX0J2",
+				issuer: null,
 				logoName: null,
 				quantity: "1",
+				sector: null,
 				ticker: null,
 				type: "BOND",
 			},
@@ -116,8 +121,10 @@ function position(
 		displayName: "Инструмент",
 		figi: null,
 		isin: null,
+		issuer: null,
 		logoName: null,
 		quantity: "1",
+		sector: null,
 		ticker: null,
 		type: "STOCK",
 		...overrides,
@@ -143,15 +150,70 @@ function emptyProps() {
 
 function loadedProps(nextPortfolio: Portfolio = portfolio) {
 	return {
+		concentration: null,
+		currency: null,
+		onCurrencyChange: vi.fn(),
+		onSliceChange: vi.fn(),
 		portfolio: nextPortfolio,
 		positionSections: toAccountPagePositionSections(nextPortfolio),
 		recentEvents: emptyRecentEvents,
 		recentOperations: emptyRecentOperations,
+		slice: "stocks" as const,
 		unrealizedReturns: toUnrealizedReturns(nextPortfolio.positions),
 	};
 }
 
 describe("AccountPage states", () => {
+	it("shows concentration only for a loaded individual account", async () => {
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>
+				HttpResponse.json(resource({
+					...portfolio,
+					positions: [position({
+						currentValue: { currency: "RUB", value: "100" },
+						displayName: "Акция",
+					})],
+				})),
+			),
+		);
+		const client = createTestQueryClient();
+		renderAccountRoute(client);
+		const tab = await screen.findByRole("tab", { name: "Концентрация" });
+		expect(tab).toHaveAttribute("aria-selected", "false");
+		fireEvent.click(tab);
+		expect(screen.getAllByText("100 ₽")).toHaveLength(2);
+	});
+
+	it("expands and resets other when switching slice", () => {
+		const positions = [400, 250, 150, 100, 50, 30, 20].map(
+			(value, index) => position({
+				currentValue: { currency: "RUB", value: String(value) },
+				displayName: `Акция ${index + 1}`,
+			}),
+		);
+
+		const data = { ...portfolio, positions };
+		const model = toConcentration(data, "stocks", "RUB");
+		const props = loadedProps(data);
+		const onTabChange = vi.fn();
+		renderPage(
+			<AccountPageLoaded
+				{...props}
+				accountId="a"
+				concentration={model}
+				currency="RUB"
+				onTabChange={onTabChange}
+				tab="concentration"
+			/>,
+		);
+		const other = screen.getByRole("button", { name: /Прочее/ });
+		expect(other).toHaveAttribute("aria-expanded", "false");
+		fireEvent.click(other);
+		expect(other).toHaveAttribute("aria-expanded", "true");
+		expect(screen.getByText("Акция 7")).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("radio", { name: "Секторы" }));
+		expect(props.onSliceChange).toHaveBeenCalledWith("sectors");
+	});
 	it("shows the loaded portfolio source sync status", async () => {
 		server.use(
 			http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () =>

src/pages/account/ui/AccountPage/AccountPage.tsx

@@ -25,13 +25,20 @@ const AccountPage: FC = () => {
 		<AccountPageLoaded
 			account={viewModel.account}
 			accountId={viewModel.accountId}
+			concentration={viewModel.concentration}
+			currency={viewModel.currency}
 			incomeSummary={viewModel.incomeSummary}
+			onCurrencyChange={viewModel.onCurrencyChange}
+			onSliceChange={viewModel.onSliceChange}
+			onTabChange={viewModel.onTabChange}
 			partial={viewModel.partial}
 			portfolio={viewModel.portfolio}
 			positionSections={viewModel.positionSections}
 			recentEvents={viewModel.recentEvents}
 			recentOperations={viewModel.recentOperations}
+			slice={viewModel.slice}
 			source={viewModel.source}
+			tab={viewModel.tab}
 			unrealizedReturns={viewModel.unrealizedReturns}
 		/>
 	);

src/pages/account/ui/AccountPage/AccountPage.vm.ts

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useParams } from "react-router";
 
 import type { Portfolio } from "@/entities/portfolio";
@@ -17,6 +18,11 @@ import { useScreenSync } from "@/features/tbank-connection";
 import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
 import { useInitialAvailability } from "@/shared/lib";
 
+import {
+	type Concentration,
+	type Slice,
+	toConcentration,
+} from "../../model/concentration";
 import {
 	type AccountPagePositionSection,
 	toAccountPagePositionSections,
@@ -45,10 +51,17 @@ type AccountPageEmptyViewModel = AccountPageContent & {
 };
 
 type AccountPageLoadedViewModel = AccountPageContent & {
+	concentration: Concentration | null;
+	currency: null | string;
+	onCurrencyChange: (currency: null | string) => void;
+	onSliceChange: (slice: Slice) => void;
+	onTabChange: (tab: null | string) => void;
 	portfolio: Portfolio;
 	positionSections: AccountPagePositionSection[];
+	slice: Slice;
 	source?: InvestmentResourceMeta;
 	state: "loaded";
+	tab: string;
 	unrealizedReturns: Portfolio["totalsByCurrency"];
 };
 
@@ -66,6 +79,23 @@ function isPortfolioAccessFailure(code?: string) {
 
 function useAccountPageViewModel(): AccountPageViewModel {
 	const { accountId } = useParams();
+
+	const [selection, setSelection] = useState<{
+		accountId?: string;
+		currency: null | string;
+		slice: Slice;
+		tab: string;
+	}>({ accountId, currency: null, slice: "stocks", tab: "positions" });
+
+	const current = selection.accountId === accountId
+		? selection
+		: {
+				accountId, currency: null, slice: "stocks" as const, tab: "positions",
+			};
+
+	const updateSelection = (change: Partial<typeof selection>) =>
+		setSelection({ ...current, ...change });
+
 	const portfolio = usePortfolio(accountId);
 
 	const operations = useBrokerageOperations(accountId, {
@@ -122,18 +152,35 @@ function useAccountPageViewModel(): AccountPageViewModel {
 		};
 
 	const isPartial = portfolio.meta?.completeness === "incomplete";
+	const currencies = toConcentration(portfolio.data, "stocks", null).currencies;
+
+	const currency = current.currency && currencies.includes(current.currency)
+		? current.currency
+		: currencies[0] ?? null;
+
+	const concentration = accountId !== "all"
+		&& current.tab === "concentration"
+		? toConcentration(portfolio.data, current.slice, currency)
+		: null;
 
 	return {
 		account,
 		accountId,
+		concentration,
+		currency,
 		incomeSummary,
+		onCurrencyChange: value => updateSelection({ currency: value }),
+		onSliceChange: slice => updateSelection({ slice }),
+		onTabChange: tab => updateSelection({ tab: tab ?? "positions" }),
 		partial: isPartial,
 		portfolio: portfolio.data,
 		positionSections: toAccountPagePositionSections(portfolio.data),
 		recentEvents,
 		recentOperations,
+		slice: current.slice,
 		source: portfolio.meta,
 		state: "loaded" as const,
+		tab: current.tab,
 		unrealizedReturns: toUnrealizedReturns(portfolio.data.positions),
 	};
 }

src/pages/account/ui/AccountPage/components/AccountPageLoaded.view.tsx

@@ -18,6 +18,7 @@ import { formatMoney } from "@/shared/lib";
 import { SourceSyncStatus } from "@/shared/ui";
 import { PortfolioStructure } from "@/widgets/portfolio-structure";
 
+import type { Concentration as ConcentrationModel, Slice } from "../../../model/concentration";
 import type { AccountPagePositionSection } from "../../../model/positions";
 import type {
 	AccountPageIncomeSummary,
@@ -27,6 +28,7 @@ import type {
 
 import classes from "../AccountPage.module.css";
 import { AccountHeading } from "./AccountHeading.view";
+import { Concentration } from "./Concentration/Concentration.view";
 import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view";
 import { IncomeSummary } from "./IncomeSummary.view";
 import { PositionSection } from "./PositionSection.view";
@@ -35,19 +37,31 @@ import { RecentOperations } from "./RecentOperations.view";
 type AccountPageLoadedProps = {
 	account?: BrokerageAccount;
 	accountId?: string;
+	concentration: ConcentrationModel | null;
+	currency: null | string;
 	incomeSummary?: AccountPageIncomeSummary;
+	onCurrencyChange: (currency: null | string) => void;
+	onSliceChange: (slice: Slice) => void;
+	onTabChange?: (tab: null | string) => void;
 	partial?: boolean;
 	portfolio: Portfolio;
 	positionSections: AccountPagePositionSection[];
 	recentEvents: AccountPageRecentEvents;
 	recentOperations: AccountPageRecentOperations;
+	slice: Slice;
 	source?: InvestmentResourceMeta;
+	tab?: string;
 	unrealizedReturns: Portfolio["totalsByCurrency"];
 };
 
 const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
 	const [filter, setFilter] = useState<string>();
+	const [fallbackTab, setFallbackTab] = useState("positions");
+	const tab = props.tab ?? fallbackTab;
+
+	const onTabChange = props.onTabChange
+		?? ((value: null | string) => setFallbackTab(value ?? "positions"));
 
 	const activeSection = props.positionSections.find(
 		section => section.kind === filter,
@@ -75,7 +89,9 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 			/>
 
 			{props.partial
-				? <Alert role="status">{t("investment.partial")}</Alert>
+				? tab !== "concentration" && (
+					<Alert role="status">{t("investment.partial")}</Alert>
+				)
 				: <CurrencyCards amounts={props.portfolio.totalsByCurrency} />}
 
 			{!props.partial && props.unrealizedReturns.length > 0 && (
@@ -107,14 +123,21 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 
 			<Tabs
 				classNames={{ list: classes.tabsList }}
-				defaultValue="positions"
 				keepMounted={false}
+				onChange={onTabChange}
+				value={tab}
 			>
 				<Tabs.List aria-label={t("portfolio.sections")} mb="md">
 					<Tabs.Tab value="positions">
 						{t("portfolio.tabs.positions")}
 					</Tabs.Tab>
 
+					{props.accountId !== "all" && (
+						<Tabs.Tab value="concentration">
+							{t("portfolio.concentration.title")}
+						</Tabs.Tab>
+					)}
+
 					<Tabs.Tab value="cash">{t("portfolio.tabs.cash")}</Tabs.Tab>
 
 					<Tabs.Tab value="operations">
@@ -143,6 +166,22 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 					</Stack>
 				</Tabs.Panel>
 
+				{props.accountId !== "all" && (
+					<Tabs.Panel value="concentration">
+						{props.concentration && (
+							<Concentration
+								currency={props.currency}
+								key={`${props.slice}-${props.currency}`}
+								model={props.concentration}
+								onCurrencyChange={props.onCurrencyChange}
+								onSliceChange={props.onSliceChange}
+								partial={!!props.partial}
+								slice={props.slice}
+							/>
+						)}
+					</Tabs.Panel>
+				)}
+
 				<Tabs.Panel value="cash">
 					<CurrencyCards amounts={props.portfolio.cashBalances} />
 				</Tabs.Panel>

src/pages/account/ui/AccountPage/components/Concentration/Concentration.module.css

@@ -0,0 +1,111 @@
+.layout {
+	display: grid;
+	grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
+	gap: var(--mantine-spacing-xl);
+	align-items: center;
+}
+
+.chart {
+	position: relative;
+	justify-self: center;
+}
+
+.pattern {
+	position: absolute;
+	width: 0;
+	height: 0;
+}
+
+.center {
+	position: absolute;
+	inset: 32%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	font-size: clamp(12px, 1.3vw, 17px);
+	overflow-wrap: anywhere;
+	pointer-events: none;
+}
+
+.srOnly {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+}
+
+.list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	gap: var(--mantine-spacing-sm);
+	min-height: 58px;
+	border-bottom: 1px solid var(--mantine-color-gray-2);
+}
+
+.rank {
+	display: grid;
+	place-items: center;
+	width: 28px;
+	height: 28px;
+	flex: none;
+	border-radius: 50%;
+	color: white;
+}
+
+.identity {
+	flex: 1;
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+
+.bar,
+.bar span {
+	display: block;
+	height: 4px;
+	border-radius: 4px;
+}
+
+.bar {
+	background: var(--mantine-color-gray-2);
+}
+
+.value {
+	text-align: right;
+	white-space: nowrap;
+}
+
+.other {
+	display: flex;
+	justify-content: space-between;
+	gap: var(--mantine-spacing-sm);
+	width: 100%;
+	min-height: 44px;
+	align-items: center;
+	border: 0;
+	background: var(--mantine-color-gray-0);
+	color: inherit;
+	cursor: pointer;
+	text-align: left;
+}
+
+.other:focus-visible {
+	outline: 2px solid var(--mantine-color-blue-6);
+	outline-offset: 2px;
+}
+
+@media (max-width: 700px) {
+	.layout { grid-template-columns: 1fr; }
+	.slices { max-width: 100%; overflow-x: auto; }
+	.other { flex-wrap: wrap; }
+}

src/pages/account/ui/AccountPage/components/Concentration/Concentration.view.tsx

@@ -0,0 +1,302 @@
+import { DonutChart } from "@mantine/charts";
+import {
+	Alert, Box, Group, Paper, SegmentedControl, Select, Stack,
+	Text, Title,
+} from "@mantine/core";
+import { type FC, useId, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { formatMoney } from "@/shared/lib";
+
+import type {
+	ConcentrationItem,
+	Concentration as ConcentrationModel,
+	Slice,
+} from "../../../../model/concentration";
+
+import classes from "./Concentration.module.css";
+
+type Props = {
+	currency: null | string;
+	model: ConcentrationModel;
+	onCurrencyChange: (currency: null | string) => void;
+	onSliceChange: (slice: Slice) => void;
+	partial: boolean;
+	slice: Slice;
+};
+
+const sliceLabels = {
+	bonds: "portfolio.bonds",
+	issuers: "portfolio.concentration.issuers",
+	sectors: "portfolio.concentration.sectors",
+	stocks: "portfolio.stocks",
+} as const;
+
+type RowProps = {
+	color: string;
+	currency: string;
+	index: number;
+	item: ConcentrationItem;
+	name: string;
+};
+
+const colors = [
+	"#2563eb", "#18a999", "#f59e0b", "#8b5cf6", "#ef6c5b",
+	"#64748b",
+];
+
+const PERCENT = 100;
+const RANK_THRESHOLD = 0.04;
+const OTHER_START = 6;
+
+function amountFor(item: ConcentrationItem, currency: string): string {
+	return formatMoney({ currency, value: item.amount });
+}
+
+function nameFor(
+	item: ConcentrationItem,
+	slice: Slice,
+	t: ReturnType<typeof useTranslation>["t"],
+): string {
+	if (item.key === "__other") return t("portfolio.concentration.other");
+	if (item.unknown) return t(slice === "sectors"
+		? "portfolio.concentration.missingSector"
+		: "portfolio.concentration.missingIssuer");
+	if (slice === "sectors") return t(`stock.sectors.${item.name}`, {
+		defaultValue: item.name,
+	});
+
+	return item.name;
+}
+
+const ConcentrationRow: FC<RowProps> = props => (
+	<li className={classes.row}>
+		<span
+			aria-hidden="true"
+			className={classes.rank}
+			style={{ backgroundColor: props.color }}
+		>
+			{props.index}
+		</span>
+
+		<span className={classes.identity}>
+			<span>{props.name}</span>
+
+			<span aria-hidden="true" className={classes.bar}>
+				<span style={{
+					backgroundColor: props.color,
+					width: `${props.item.chartValue * PERCENT}%`,
+				}}
+				/>
+			</span>
+		</span>
+
+		<span className={classes.value}>
+			<strong>{amountFor(props.item, props.currency)}</strong>
+
+			<Text c="dimmed" size="sm">{props.item.share}</Text>
+		</span>
+	</li>
+);
+
+function chartCellProps(series: { name: string }, rows: ConcentrationItem[]) {
+	return {
+		stroke: "white",
+		strokeWidth: 2,
+		...((series.name === "__other"
+			|| rows.some(item => item.key === series.name && item.unknown))
+		&& { strokeDasharray: "3 2" }),
+	};
+}
+
+function rankLabel({ index, percent }: { index: number; percent?: number }) {
+	return (percent ?? 0) >= RANK_THRESHOLD ? String(index + 1) : "";
+}
+
+const Concentration: FC<Props> = (props) => {
+	const { t } = useTranslation();
+	const [expanded, setExpanded] = useState(false);
+	const otherId = useId();
+	const chartId = useId();
+	const currency = props.currency ?? "";
+
+	const rows = props.model.other
+		? [...props.model.items, props.model.other]
+		: props.model.items;
+
+	const chartData = rows.map((item, index) => ({
+		color: colors[index % colors.length] ?? colors[0] ?? "blue",
+		name: item.key,
+		value: item.chartValue,
+	}));
+
+	const chartText = [
+		props.model.top5Share && t("portfolio.concentration.top5", {
+			share: props.model.top5Share,
+		}),
+		props.model.total && formatMoney({
+			currency, value: props.model.total,
+		}),
+		...rows.map(item =>
+			`${nameFor(item, props.slice, t)} · ${amountFor(item, currency)} · ${item.share}`),
+	].filter(Boolean).join("; ");
+
+	const slices = [
+		{ label: t("portfolio.stocks"), value: "stocks" },
+		{ label: t("portfolio.bonds"), value: "bonds" },
+		{ label: t("portfolio.concentration.sectors"), value: "sectors" },
+		{ label: t("portfolio.concentration.issuers"), value: "issuers" },
+	];
+
+	// eslint-disable-next-line frontend/readability -- Mantine callback closes over page action.
+	const selectSlice = (value: string) => props.onSliceChange(value as Slice);
+	// eslint-disable-next-line frontend/readability -- Disclosure state belongs to this view.
+	const toggleOther = () => setExpanded(value => !value);
+
+	// eslint-disable-next-line frontend/readability -- Chart callback closes over visible rows.
+	const cellProps = (series: { name: string }) => chartCellProps(series, rows);
+	const pieProps = { isAnimationActive: false, label: rankLabel };
+
+	const totalText = props.model.total
+		? formatMoney({ currency, value: props.model.total })
+		: "";
+
+	return (
+		<Stack gap="lg">
+			<Group align="end" justify="space-between">
+				<SegmentedControl
+					aria-label={t("portfolio.concentration.slice")}
+					className={classes.slices}
+					data={slices}
+					onChange={selectSlice}
+					value={props.slice}
+				/>
+
+				{props.model.currencies.length > 1 && (
+					<Select
+						aria-label={t("portfolio.concentration.currency")}
+						data={props.model.currencies}
+						onChange={props.onCurrencyChange}
+						value={props.currency}
+						w={130}
+					/>
+				)}
+			</Group>
+
+			{props.partial && (
+				<Alert role="status">{t("portfolio.concentration.incomplete")}</Alert>
+			)}
+
+			{props.model.empty
+				? (
+						<Stack gap="xs">
+							<Text fw={600}>{t(sliceLabels[props.slice])}
+								{props.currency && ` · ${props.currency}`}
+							</Text>
+
+							<Text>{t("portfolio.concentration.empty")}</Text>
+						</Stack>
+					)
+				: (
+						<Paper className={classes.layout} p="lg" radius="md" withBorder>
+							<Box className={classes.chart}>
+								<DonutChart
+									aria-describedby={chartId}
+									aria-label={t("portfolio.concentration.chart")}
+									cellProps={cellProps}
+									data={chartData}
+									pieProps={pieProps}
+									role="img"
+									size={260}
+									strokeWidth={24}
+								/>
+
+								<div aria-hidden="true" className={classes.center}>
+									{props.model.top5Share && (
+										<Text fw={700} size="sm">{t("portfolio.concentration.top5", {
+											share: props.model.top5Share,
+										})}
+										</Text>
+									)}
+
+									<Text fw={700}>{totalText}</Text>
+								</div>
+
+								<Text className={classes.srOnly} id={chartId}>
+									{chartText}
+								</Text>
+							</Box>
+
+							<Stack gap="xs">
+								<Title order={3} size="md">{t("portfolio.concentration.title")}</Title>
+
+								<ol className={classes.list}>
+									{props.model.items.map((item, index) => (
+										<ConcentrationRow
+											color={colors[index % colors.length] ?? "blue"}
+											currency={currency}
+											index={index + 1}
+											item={item}
+											key={item.key}
+											name={nameFor(item, props.slice, t)}
+										/>
+									))}
+								</ol>
+
+								{props.model.other && (
+									<>
+										<button
+											aria-controls={otherId}
+											aria-expanded={expanded}
+											className={classes.other}
+											onClick={toggleOther}
+											type="button"
+										>
+											<span>{t("portfolio.concentration.other")} · {t(
+												"portfolio.concentration.otherCount",
+												{ count: props.model.other.count },
+											)}
+											</span>
+
+											<span>{amountFor(props.model.other, currency)} · {
+												props.model.other.share
+											}
+											</span>
+										</button>
+
+										<ol
+											className={classes.list}
+											hidden={!expanded}
+											id={otherId}
+											start={OTHER_START}
+										>
+											{props.model.other.entries.map((item, index) => (
+												<ConcentrationRow
+													color={colors[(index + OTHER_START) % colors.length]
+														?? "blue"}
+													currency={currency}
+													index={index + OTHER_START}
+													item={item}
+													key={item.key}
+													name={nameFor(item, props.slice, t)}
+												/>
+											))}
+										</ol>
+									</>
+								)}
+							</Stack>
+						</Paper>
+					)}
+
+			{props.model.unaccounted > 0 && (
+				<Text c="dimmed" size="sm">{t(
+					"portfolio.concentration.unaccounted",
+					{ count: props.model.unaccounted },
+				)}
+				</Text>
+			)}
+		</Stack>
+	);
+};
+
+export { Concentration };

src/pages/account/ui/AccountPage/components/PositionCard/PositionCard.stories.tsx

@@ -12,6 +12,7 @@ const syntheticPosition
 		displayName: "Учебные технологии",
 		figi: null,
 		isin: null,
+		issuer: null,
 		logoName: null,
 		logoSrc: null,
 		quantity: "100",
@@ -19,6 +20,7 @@ const syntheticPosition
 		returnPercentText: "+25,00 %",
 		returnText: "+5 000 ₽",
 		returnTone: "positive",
+		sector: null,
 		shareText: "20%",
 		ticker: "DEMO",
 		type: "STOCK",

src/pages/account/ui/AccountPage/position-layout.browser.test.tsx

@@ -37,12 +37,14 @@ it("keeps expanded positions vertical while other positions adapt to the viewpor
 					displayName: `Инструмент ${index}`,
 					figi: null,
 					isin: null,
+					issuer: null,
 					logoName: null,
 					logoSrc: null,
 					quantity: "10",
 					returnPercent: null,
 					returnPercentText: null,
 					returnText: null,
+					sector: null,
 					shareText: null,
 					ticker: null,
 					type: kind === "stocks" ? "STOCK" : otherType,

src/shared/api/generated/schema.d.ts

@@ -1056,6 +1056,10 @@ export interface components {
             id: string;
             name: string;
         };
+        PortfolioIssuerDto: {
+            id: string;
+            name: string;
+        };
         PortfolioPositionDto: {
             instrumentUid?: string | null;
             account?: components["schemas"]["AccountReferenceDto"];
@@ -1070,6 +1074,8 @@ export interface components {
             isin: string | null;
             ticker: string | null;
             logoName: string | null;
+            sector: string | null;
+            issuer: components["schemas"]["PortfolioIssuerDto"] | null;
         };
         PortfolioDto: {
             /** Format: date-time */
@@ -1383,6 +1389,8 @@ export interface components {
             isin: string | null;
             ticker: string | null;
             logoName: string | null;
+            sector: string | null;
+            issuer: components["schemas"]["PortfolioIssuerDto"] | null;
             returnPercent: string | null;
         };
         StockPositionDto: {

src/shared/api/spec/openapi.json

@@ -6423,6 +6423,21 @@
           "name"
         ]
       },
+      "PortfolioIssuerDto": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "name": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "id",
+          "name"
+        ]
+      },
       "PortfolioPositionDto": {
         "type": "object",
         "properties": {
@@ -6495,6 +6510,19 @@
           "logoName": {
             "type": "string",
             "nullable": true
+          },
+          "sector": {
+            "type": "string",
+            "nullable": true
+          },
+          "issuer": {
+            "nullable": true,
+            "type": "object",
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/PortfolioIssuerDto"
+              }
+            ]
           }
         },
         "required": [
@@ -6507,7 +6535,9 @@
           "absoluteReturn",
           "isin",
           "ticker",
-          "logoName"
+          "logoName",
+          "sector",
+          "issuer"
         ]
       },
       "PortfolioDto": {
@@ -7910,6 +7940,19 @@
             "type": "string",
             "nullable": true
           },
+          "sector": {
+            "type": "string",
+            "nullable": true
+          },
+          "issuer": {
+            "nullable": true,
+            "type": "object",
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/PortfolioIssuerDto"
+              }
+            ]
+          },
           "returnPercent": {
             "type": "string",
             "nullable": true
@@ -7926,6 +7969,8 @@
           "isin",
           "ticker",
           "logoName",
+          "sector",
+          "issuer",
           "returnPercent"
         ]
       },

src/shared/i18n/locales/ru.ts

@@ -509,6 +509,22 @@ const ru = {
 			bonds: "Облигации",
 			byAccount: "Позиции по счетам",
 			cashBalances: "Денежные остатки",
+			concentration: {
+				chart: "Распределение позиций",
+				currency: "Валюта концентрации",
+				empty: "В этом разрезе нет позиций с положительной оценкой.",
+				incomplete: "Данные неполные",
+				issuers: "Эмитенты",
+				missingIssuer: "Эмитент не указан",
+				missingSector: "Сектор не указан",
+				other: "Прочее",
+				otherCount: "{{count}} элементов",
+				sectors: "Секторы",
+				slice: "Разрез концентрации",
+				title: "Концентрация",
+				top5: "Топ-5 · {{share}}",
+				unaccounted: "Не учтено позиций: {{count}}",
+			},
 			connectionErrorText: "Настройте подключение, чтобы посмотреть портфель.",
 			connectionErrorTitle: "Проверьте подключение T-Bank",
 			currencies: {
@@ -760,6 +776,7 @@ const ru = {
 				consumer: "Потребительский сектор",
 				energy: "Энергетика",
 				financial: "Финансы",
+				government: "Государственный сектор",
 				health_care: "Здравоохранение",
 				industrials: "Промышленность",
 				it: "Информационные технологии",