feat: add bond pages and portfolio navigation

2026-09-10 22:30:47 +03:00
parent 561222e468
commit 232d7f9990
39 changed files with 4217 additions and 221 deletions
@@ -0,0 +1,187 @@
+import { AreaChart } from "@mantine/charts";
+import {
+	Accordion,
+	Badge,
+	ScrollArea,
+	SegmentedControl,
+	Table,
+	Text,
+} from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { formatDecimal, formatMoney } from "@/shared/lib";
+import type { InstrumentChartVm } from "../model/types";
+import classes from "./InstrumentDetails.module.css";
+import { InstrumentSection } from "./InstrumentSection.view";
+
+type InstrumentChartProps = { vm: InstrumentChartVm; priceUnit?: "percent" };
+const InstrumentChart: FC<InstrumentChartProps> = (props) => {
+	const { vm } = props;
+	const { t } = useTranslation();
+	return (
+		<InstrumentSection
+			title={t("stock.chart")}
+			state={vm.candlesState}
+			large
+			controls={
+				<div className={classes.controls}>
+					<SegmentedControl
+						aria-label={t("stock.period")}
+						value={vm.period}
+						onChange={vm.setPeriod}
+						data={["month", "halfYear", "year", "all"].map((value) => ({
+							value,
+							label: t(`stock.periods.${value}`),
+						}))}
+					/>
+				</div>
+			}
+		>
+			{vm.candles ? (
+				vm.chartData.length ? (
+					<>
+						<AreaChart
+							h={310}
+							data={vm.chartData}
+							dataKey="date"
+							series={[
+								{ name: "price", color: "blue.6", label: t("stock.price") },
+							]}
+							curveType="linear"
+							withDots={vm.chartData.length === 1}
+							withGradient
+							gridAxis="y"
+							tickLine="none"
+							tooltipAnimationDuration={0}
+							areaProps={{ isAnimationActive: false }}
+							yAxisProps={{ domain: ["auto", "auto"], width: 64 }}
+							referenceLines={
+								vm.averageLine === null
+									? []
+									: [
+											{
+												y: vm.averageLine,
+												ifOverflow: "extendDomain",
+												color: "orange.7",
+												label: t("stock.averageLine"),
+											},
+										]
+							}
+							valueFormatter={(value) =>
+								new Intl.NumberFormat("ru-RU", {
+									maximumFractionDigits: 4,
+								}).format(value)
+							}
+							aria-label={t(
+								props.priceUnit === "percent"
+									? "bond.chartLabel"
+									: "stock.chartLabel",
+								{
+									currency:
+										props.priceUnit === "percent"
+											? t("bond.percentOfNominal")
+											: (vm.candles.currency ?? ""),
+								},
+							)}
+						/>
+						<Text size="xs" c="dimmed" mt="sm">
+							{t(
+								props.priceUnit === "percent"
+									? "bond.chartNote"
+									: "stock.chartNote",
+							)}
+						</Text>
+						{vm.hasIncompleteCandle ? (
+							<Text size="xs" c="dimmed">
+								{t("stock.incomplete")}
+							</Text>
+						) : null}
+						{vm.averageLine !== null ? (
+							<Text size="sm" mt="xs">
+								{t("stock.averageLine")}:{" "}
+								{formatMoney(vm.position?.averagePurchasePrice ?? null)}
+							</Text>
+						) : null}
+						<Accordion
+							className={classes.priceTable}
+							variant="contained"
+							radius="md"
+						>
+							<Accordion.Item value="prices">
+								<Accordion.Control>
+									<Text fw={600}>{t("stock.priceTable")}</Text>
+									<Text size="xs" c="dimmed">
+										{t("stock.priceTableHint", { count: vm.chartData.length })}
+									</Text>
+								</Accordion.Control>
+								<Accordion.Panel>
+									<ScrollArea.Autosize
+										mah={360}
+										type="auto"
+										viewportProps={{
+											tabIndex: 0,
+											role: "region",
+											"aria-label": t("stock.priceTable"),
+										}}
+									>
+										<Table
+											striped
+											highlightOnHover
+											stickyHeader
+											verticalSpacing="sm"
+											horizontalSpacing="md"
+										>
+											<Table.Thead>
+												<Table.Tr>
+													<Table.Th>{t("stock.date")}</Table.Th>
+													<Table.Th>{t("stock.price")}</Table.Th>
+													<Table.Th>{t("stock.candle")}</Table.Th>
+												</Table.Tr>
+											</Table.Thead>
+											<Table.Tbody>
+												{vm.priceRows.map((candle) => (
+													<Table.Tr key={candle.time}>
+														<Table.Td>{candle.date}</Table.Td>
+														<Table.Td>
+															{props.priceUnit === "percent"
+																? `${formatDecimal(candle.close)} %`
+																: formatMoney(
+																		vm.candles?.currency
+																			? {
+																					value: candle.close,
+																					currency: vm.candles.currency,
+																				}
+																			: null,
+																	)}
+														</Table.Td>
+														<Table.Td>
+															<Badge
+																variant="light"
+																color={candle.isComplete ? "gray" : "blue"}
+																size="sm"
+															>
+																{t(
+																	candle.isComplete
+																		? "stock.complete"
+																		: "stock.forming",
+																)}
+															</Badge>
+														</Table.Td>
+													</Table.Tr>
+												))}
+											</Table.Tbody>
+										</Table>
+									</ScrollArea.Autosize>
+								</Accordion.Panel>
+							</Accordion.Item>
+						</Accordion>
+					</>
+				) : (
+					<Text c="dimmed">{t("stock.noCandles")}</Text>
+				)
+			) : null}
+		</InstrumentSection>
+	);
+};
+
+export { InstrumentChart };