차트 리펙

Author: BHyeonKim

src/app/routes/trade.$ticker.tsx

@@ -10,6 +10,7 @@ import { CoinListWithSearchBar } from '~/features/coin-search-list';
 import { OrderForm, OrderFormFallback } from '~/features/order';
 import { ExecutionList } from '~/features/order-execution-list';
 import useTradeNotification from '~/features/trade/hooks/useTradeNotification';
+import Chart from '~/features/tradeview/ui/Chart';
 import Container from '~/shared/ui/Container';
 import ContainerTitle from '~/shared/ui/ContainerTitle';
 import { NavBar, SideBar } from '~/widgets/navbar';
@@ -82,12 +83,7 @@ export default function TradeRouteComponent({
 						<Container>
 							<ContainerTitle>실시간 차트</ContainerTitle>
 							<Suspense fallback="차트데이터를 가져오고 있습니다.">
-								{coinInfo && (
-									<LazyStockChart
-										key={`chart-${coinInfo.ticker}`}
-										ticker={coinInfo.ticker}
-									/>
-								)}
+								<Chart />
 							</Suspense>
 						</Container>
 					</div>

src/features/tradeview/api/tradeview.endpoints.ts

@@ -3,8 +3,10 @@ import ApiClient from '~/shared/api/httpClient';
 import type { RowData } from '../types/tradeview.type';
 
 export default {
-	getPastData: async (ticker = 'TRUMP') => {
-		return await ApiClient.get<RowData[]>(`api/minute-ohlc?ticker=${ticker}`);
+	getPastData: async (ticker = 'TRUMP', period = 1) => {
+		return await ApiClient.get<RowData[]>(
+			`api/minute-ohlc?ticker=${ticker}&period=${period}`,
+		);
 	},
 };
 /* v8 ignore end */

src/features/tradeview/ui/Chart/ChartContainer.tsx

@@ -0,0 +1,59 @@
+import * as am5 from '@amcharts/amcharts5';
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
+import React, { useEffect, useRef, useState, type ReactNode } from 'react';
+
+export type ChartContainerProps = {
+	containerId: string;
+	toolbarId: string;
+	children: ReactNode;
+};
+
+export type ChartContainer = {
+	chartRoot: am5.Root | null;
+	chartToolbarContainerRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export default function ChartContainer({
+	containerId,
+	toolbarId,
+	children,
+}: ChartContainerProps) {
+	const [chartRoot, setChartRoot] = useState<ChartContainer['chartRoot']>(null);
+	const chartToolbarContainerRef =
+		useRef<ChartContainer['chartToolbarContainerRef']['current']>(null);
+
+	const childrenWithProps = React.Children.map(children, (child) => {
+		if (React.isValidElement<ChartContainer>(child)) {
+			return React.cloneElement(child, { chartRoot });
+		}
+		return child;
+	});
+
+	useEffect(() => {
+		if (chartRoot) return;
+		const root = am5.Root.new(containerId);
+
+		const Theme = am5.Theme.new(root);
+		Theme.rule('Grid', ['scrollbar', 'minor']).setAll({
+			visible: false,
+		});
+
+		root.setThemes([am5themes_Animated.new(root), Theme]);
+
+		setChartRoot(root);
+
+		return () => {
+			if (!chartRoot) return;
+			root.dispose();
+		};
+	}, [containerId, chartRoot]);
+
+	return (
+		<>
+			<div id={toolbarId} ref={chartToolbarContainerRef} />
+			<div id={containerId} className="h-full">
+				{childrenWithProps}
+			</div>
+		</>
+	);
+}

src/features/tradeview/ui/Chart/MainPanel.tsx

@@ -0,0 +1,106 @@
+import * as am5 from '@amcharts/amcharts5';
+import * as am5stock from '@amcharts/amcharts5/stock';
+import * as am5xy from '@amcharts/amcharts5/xy';
+
+import React, { type PropsWithChildren, useEffect, useState } from 'react';
+import type { StockChart } from './StockChart';
+
+type MainPanelProps = PropsWithChildren<Partial<StockChart>>;
+
+export type MainPanel = {
+	mainPanel: am5stock.StockPanel | null;
+	dateAxis: am5xy.GaplessDateAxis<am5xy.AxisRenderer> | null;
+	valueAxis: am5xy.ValueAxis<am5xy.AxisRenderer> | null;
+	valueLegend: am5stock.StockLegend | null;
+} & StockChart;
+
+export default function MainPanel({
+	chartRoot,
+	stockChart,
+	children,
+}: MainPanelProps) {
+	const [mainPanel, setMainPanel] = useState<MainPanel['mainPanel']>(null);
+	const [dateAxis, setDateAxis] = useState<MainPanel['dateAxis']>(null);
+	const [valueAxis, setValueAxis] = useState<MainPanel['valueAxis']>(null);
+	const [valueLegend, setValueLegend] =
+		useState<MainPanel['valueLegend']>(null);
+
+	const childrenWithProps = React.Children.map(children, (child) => {
+		if (React.isValidElement<MainPanel>(child)) {
+			return React.cloneElement(child, {
+				chartRoot,
+				stockChart,
+				mainPanel,
+				dateAxis,
+				valueAxis,
+				valueLegend,
+			});
+		}
+		return child;
+	});
+
+	useEffect(() => {
+		if (!chartRoot || !stockChart) return;
+		const newPanel = stockChart.panels.push(
+			am5stock.StockPanel.new(chartRoot, {
+				wheelY: 'zoomX',
+				panX: true,
+				panY: true,
+			}),
+		);
+		setMainPanel(newPanel);
+
+		const newDateAxis = newPanel.xAxes.push(
+			am5xy.GaplessDateAxis.new(chartRoot, {
+				baseInterval: {
+					timeUnit: 'minute',
+					count: 1,
+				},
+				renderer: am5xy.AxisRendererX.new(chartRoot, {
+					minorGridEnabled: true,
+				}),
+				tooltip: am5.Tooltip.new(chartRoot, {}),
+			}),
+		);
+
+		setDateAxis(newDateAxis);
+
+		const newValueLegend = newPanel.plotContainer.children.push(
+			am5stock.StockLegend.new(chartRoot, {
+				stockChart,
+			}),
+		);
+
+		setValueLegend(newValueLegend);
+
+		const newValueAxis = newPanel.yAxes.push(
+			am5xy.ValueAxis.new(chartRoot, {
+				renderer: am5xy.AxisRendererY.new(chartRoot, {
+					pan: 'zoom',
+				}),
+				extraMin: 0.1,
+				tooltip: am5.Tooltip.new(chartRoot, {}),
+				numberFormat: '#,###.00',
+				extraTooltipPrecision: 2,
+			}),
+		);
+
+		setValueAxis(newValueAxis);
+
+		newPanel.set(
+			'cursor',
+			am5xy.XYCursor.new(chartRoot, {
+				yAxis: newValueAxis,
+				xAxis: newDateAxis,
+				snapToSeries: newValueAxis.series,
+				snapToSeriesBy: 'y!',
+			}),
+		);
+
+		return () => {
+			newPanel.dispose();
+		};
+	}, [chartRoot, stockChart]);
+
+	return childrenWithProps;
+}

src/features/tradeview/ui/Chart/SbDateAxis.tsx

@@ -0,0 +1,37 @@
+import * as am5xy from '@amcharts/amcharts5/xy';
+import { type PropsWithChildren, useEffect } from 'react';
+import type { SbSeries } from './SbSeries';
+
+type SbDateAxisProps = PropsWithChildren<Partial<SbSeries>>;
+
+export default function SbDateAxis({
+	children,
+	sbDateAxisRef,
+	chartRootRef,
+	scrollbarRef,
+}: SbDateAxisProps) {
+	useEffect(() => {
+		if (
+			!sbDateAxisRef ||
+			!chartRootRef ||
+			!chartRootRef.current ||
+			!scrollbarRef ||
+			!scrollbarRef.current
+		)
+			return;
+
+		sbDateAxisRef.current = scrollbarRef.current.chart.xAxes.push(
+			am5xy.GaplessDateAxis.new(chartRootRef.current, {
+				baseInterval: {
+					timeUnit: 'minute',
+					count: 1,
+				},
+				renderer: am5xy.AxisRendererX.new(chartRootRef.current, {
+					minorGridEnabled: true,
+				}),
+			}),
+		);
+	}, [sbDateAxisRef, chartRootRef, scrollbarRef]);
+
+	return children;
+}

src/features/tradeview/ui/Chart/SbSeries.tsx

@@ -0,0 +1,71 @@
+import * as am5xy from '@amcharts/amcharts5/xy';
+import type { PropsWithChildren } from 'react';
+import React, { useEffect, useRef } from 'react';
+import type { CandlestickData } from '../../types/tradeview.type';
+import type { XScrollBar } from './XScrollBar';
+
+type SbSeriesProps = PropsWithChildren<
+	Partial<XScrollBar> & { pastTimeData?: CandlestickData[] }
+>;
+
+export type SbSeries = {
+	sbSeriesRef: React.RefObject<am5xy.LineSeries | null>;
+	sbValueAxisRef: React.RefObject<am5xy.ValueAxis<am5xy.AxisRenderer> | null>;
+	sbDateAxisRef: React.RefObject<am5xy.GaplessDateAxis<am5xy.AxisRenderer> | null>;
+} & XScrollBar;
+
+export default function SbSeries({
+	children,
+	scrollbarRef,
+	chartRootRef,
+	pastTimeData,
+}: SbSeriesProps) {
+	const sbSeriesRef = useRef<SbSeries['sbSeriesRef']['current']>(null);
+	const sbValueAxisRef = useRef<SbSeries['sbValueAxisRef']['current']>(null);
+	const sbDateAxisRef = useRef<SbSeries['sbDateAxisRef']['current']>(null);
+
+	const childrenWithProps = React.Children.map(children, (child) => {
+		if (React.isValidElement<SbSeries>(child)) {
+			return React.cloneElement(child, {
+				sbSeriesRef,
+				sbValueAxisRef,
+				sbDateAxisRef,
+			});
+		}
+		return child;
+	});
+
+	useEffect(() => {
+		if (!pastTimeData || !pastTimeData.length || !sbSeriesRef.current) return;
+		console.log(pastTimeData);
+		sbSeriesRef.current.data.setAll(pastTimeData);
+	}, [pastTimeData]);
+
+	useEffect(() => {
+		if (
+			!scrollbarRef ||
+			!scrollbarRef.current ||
+			!chartRootRef ||
+			!chartRootRef.current ||
+			!sbDateAxisRef.current ||
+			!sbValueAxisRef.current
+		)
+			return;
+
+		sbSeriesRef.current = scrollbarRef.current.chart.series.push(
+			am5xy.LineSeries.new(chartRootRef.current, {
+				valueYField: 'Close',
+				valueXField: 'Timestamp',
+				xAxis: sbDateAxisRef.current,
+				yAxis: sbValueAxisRef.current,
+			}),
+		);
+
+		sbSeriesRef.current.fills.template.setAll({
+			visible: true,
+			fillOpacity: 0.3,
+		});
+	}, [scrollbarRef, chartRootRef]);
+
+	return childrenWithProps;
+}

src/features/tradeview/ui/Chart/SbValueAxis.tsx

@@ -0,0 +1,31 @@
+import * as am5xy from '@amcharts/amcharts5/xy';
+import { type PropsWithChildren, useEffect } from 'react';
+import type { SbSeries } from './SbSeries';
+
+type SbValueAxisProps = PropsWithChildren<Partial<SbSeries>>;
+
+export default function SbValueAxis({
+	children,
+	sbValueAxisRef,
+	chartRootRef,
+	scrollbarRef,
+}: SbValueAxisProps) {
+	useEffect(() => {
+		if (
+			!sbValueAxisRef ||
+			!chartRootRef ||
+			!chartRootRef.current ||
+			!scrollbarRef ||
+			!scrollbarRef.current
+		)
+			return;
+
+		sbValueAxisRef.current = scrollbarRef.current.chart.yAxes.push(
+			am5xy.ValueAxis.new(chartRootRef.current, {
+				renderer: am5xy.AxisRendererY.new(chartRootRef.current, {}),
+			}),
+		);
+	}, [sbValueAxisRef, chartRootRef, scrollbarRef]);
+
+	return children;
+}

src/features/tradeview/ui/Chart/StockChart.tsx

@@ -0,0 +1,46 @@
+import * as am5stock from '@amcharts/amcharts5/stock';
+import React, { useEffect, useState, type PropsWithChildren } from 'react';
+
+import type { ChartContainer } from './ChartContainer';
+
+type ChartPropsWithChildren = PropsWithChildren<
+	Partial<
+		ChartContainer & {
+			settings: am5stock.IStockChartSettings;
+		}
+	>
+>;
+
+export type StockChart = {
+	stockChart: am5stock.StockChart | null;
+} & ChartContainer;
+
+export default function StockChart({
+	chartRoot,
+	settings = {},
+	children,
+}: ChartPropsWithChildren) {
+	const [stockChart, setStockChart] = useState<StockChart['stockChart']>(null);
+
+	const childrenWithProps = React.Children.map(children, (child) => {
+		if (React.isValidElement<StockChart>(child)) {
+			return React.cloneElement(child, { chartRoot, stockChart });
+		}
+		return child;
+	});
+
+	useEffect(() => {
+		if (!chartRoot || stockChart) return;
+		const schart = chartRoot.container.children.push(
+			am5stock.StockChart.new(chartRoot, settings),
+		);
+		setStockChart(schart);
+
+		return () => {
+			if (!schart) return;
+			schart.dispose();
+		};
+	}, [stockChart, chartRoot, settings]);
+
+	return childrenWithProps;
+}