frontend/src/features/instrument-details/ui/InstrumentChart/InstrumentChart.view.tsx

import type { FC } from "react";

import { AreaChart } from "@mantine/charts";
import {
	Accordion,
	Badge,
	ScrollArea,
	SegmentedControl,
	Table,
	Text,
} from "@mantine/core";

import { formatChartValue, formatMoney } from "@/shared/lib";

import type { InstrumentChartProps } from "../../model/types";

import classes from "../InstrumentDetails.module.css";
import { InstrumentSection } from "../InstrumentSection.view";
import { useInstrumentChartVm } from "./InstrumentChart.vm";

const InstrumentChart: FC<InstrumentChartProps> = (props) => {
	const {
		chartData,
		chartLabel,
		hasIncompleteCandle,
		periodOptions,
		priceRows,
		referenceLines,
		t,
		vm,
	} = useInstrumentChartVm(props);

	let chartContent;

	if (vm.candles) {
		if (chartData.length > 0) {
			chartContent = (
				<>
					<AreaChart
						areaProps={{ isAnimationActive: false }}
						aria-label={chartLabel}
						curveType="linear"
						data={chartData}
						dataKey="date"
						gridAxis="y"
						h={310}
						referenceLines={referenceLines}
						series={[
							{ color: "blue.6", label: t("stock.price"), name: "price" },
						]}
						tickLine="none"
						tooltipAnimationDuration={0}
						valueFormatter={formatChartValue}
						withDots={chartData.length === 1}
						withGradient
						yAxisProps={{ domain: ["auto", "auto"], width: 64 }}
					/>

					<Text c="dimmed" mt="sm" size="xs">
						{t(
							props.priceUnit === "percent"
								? "bond.chartNote"
								: "stock.chartNote",
						)}
					</Text>

					{!!hasIncompleteCandle && (
						<Text c="dimmed" size="xs">
							{t("stock.incomplete")}
						</Text>
					)}

					{referenceLines.length > 0 && (
						<Text mt="xs" size="sm">
							{t("stock.averageLine")}:{" "}
							{formatMoney(vm.position?.averagePurchasePrice)}
						</Text>
					)}

					<Accordion
						className={classes.priceTable}
						radius="md"
						variant="contained"
					>
						<Accordion.Item value="prices">
							<Accordion.Control>
								<Text fw={600}>{t("stock.priceTable")}</Text>

								<Text c="dimmed" size="xs">
									{t("stock.priceTableHint", { count: chartData.length })}
								</Text>
							</Accordion.Control>

							<Accordion.Panel>
								<ScrollArea.Autosize
									mah={360}
									type="auto"
									viewportProps={{
										"aria-label": t("stock.priceTable"),
										"role": "region",
										"tabIndex": 0,
									}}
								>
									<Table
										highlightOnHover
										horizontalSpacing="md"
										stickyHeader
										striped
										verticalSpacing="sm"
									>
										<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>
											{priceRows.map((candle) => {
												const displayColor = candle.isComplete
													? "gray"
													: "blue";

												return (
													<Table.Tr key={candle.time}>
														<Table.Td>{candle.date}</Table.Td>

														<Table.Td>
															{candle.price}
														</Table.Td>

														<Table.Td>
															<Badge
																color={displayColor}
																size="sm"
																variant="light"
															>
																{t(
																	candle.isComplete
																		? "stock.complete"
																		: "stock.forming",
																)}
															</Badge>
														</Table.Td>
													</Table.Tr>
												);
											})}
										</Table.Tbody>
									</Table>
								</ScrollArea.Autosize>
							</Accordion.Panel>
						</Accordion.Item>
					</Accordion>
				</>
			);
		}
		else {
			chartContent = (
				<Text c="dimmed">
					{t(
						vm.candlesState.partial
							? "investment.partial"
							: "stock.noCandles",
					)}
				</Text>
			);
		}
	}

	return (
		<InstrumentSection
			controls={(
				<div className={classes.controls}>
					<SegmentedControl
						aria-label={t("stock.period")}
						data={periodOptions}
						onChange={vm.setPeriod}
						value={vm.period}
					/>
				</div>
			)}
			large
			state={vm.candlesState}
			title={t("stock.chart")}
		>
			{chartContent}
		</InstrumentSection>
	);
};

export { InstrumentChart };