refactor: encapsulate instrument chart data

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

@@ -10,20 +10,19 @@ import {
 	Text,
 } from "@mantine/core";
 
-import { formatMoney } from "@/shared/lib";
+import { formatChartValue, formatMoney } from "@/shared/lib";
 
-import type { InstrumentChartVm } from "../../model/types";
+import type { InstrumentChartProps } from "../../model/types";
 
 import classes from "../InstrumentDetails.module.css";
 import { InstrumentSection } from "../InstrumentSection.view";
 import { useInstrumentChartVm } from "./InstrumentChart.vm";
 
-type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm };
-
 const InstrumentChart: FC<InstrumentChartProps> = (props) => {
 	const {
+		chartData,
 		chartLabel,
-		formatChartValue,
+		hasIncompleteCandle,
 		periodOptions,
 		priceRows,
 		referenceLines,
@@ -34,14 +33,14 @@ const InstrumentChart: FC<InstrumentChartProps> = (props) => {
 	let chartContent;
 
 	if (vm.candles) {
-		if (vm.chartData.length > 0) {
+		if (chartData.length > 0) {
 			chartContent = (
 				<>
 					<AreaChart
 						areaProps={{ isAnimationActive: false }}
 						aria-label={chartLabel}
 						curveType="linear"
-						data={vm.chartData}
+						data={chartData}
 						dataKey="date"
 						gridAxis="y"
 						h={310}
@@ -52,7 +51,7 @@ const InstrumentChart: FC<InstrumentChartProps> = (props) => {
 						tickLine="none"
 						tooltipAnimationDuration={0}
 						valueFormatter={formatChartValue}
-						withDots={vm.chartData.length === 1}
+						withDots={chartData.length === 1}
 						withGradient
 						yAxisProps={{ domain: ["auto", "auto"], width: 64 }}
 					/>
@@ -65,13 +64,13 @@ const InstrumentChart: FC<InstrumentChartProps> = (props) => {
 						)}
 					</Text>
 
-					{!!vm.hasIncompleteCandle && (
+					{!!hasIncompleteCandle && (
 						<Text c="dimmed" size="xs">
 							{t("stock.incomplete")}
 						</Text>
 					)}
 
-					{vm.averageLine !== null && (
+					{referenceLines.length > 0 && (
 						<Text mt="xs" size="sm">
 							{t("stock.averageLine")}:{" "}
 							{formatMoney(vm.position?.averagePurchasePrice)}
@@ -88,7 +87,7 @@ const InstrumentChart: FC<InstrumentChartProps> = (props) => {
 								<Text fw={600}>{t("stock.priceTable")}</Text>
 
 								<Text c="dimmed" size="xs">
-									{t("stock.priceTableHint", { count: vm.chartData.length })}
+									{t("stock.priceTableHint", { count: chartData.length })}
 								</Text>
 							</Accordion.Control>