+
실시간 차트
diff --git a/src/features/tradeview/const/chart.const.ts b/src/features/tradeview/const/chart.const.ts
index 98813a9..82feff3 100644
--- a/src/features/tradeview/const/chart.const.ts
+++ b/src/features/tradeview/const/chart.const.ts
@@ -7,3 +7,5 @@ export const INTERVALS = [
];
export const INTERVAL_SELECTOR_HEIGHT = 26;
+
+export const MINUTE = 60;
diff --git a/src/features/tradeview/ui/Orderbook/chart.tsx b/src/features/tradeview/ui/Orderbook/chart.tsx
index 9bd424a..cb380ea 100644
--- a/src/features/tradeview/ui/Orderbook/chart.tsx
+++ b/src/features/tradeview/ui/Orderbook/chart.tsx
@@ -1,6 +1,7 @@
import * as am5 from '@amcharts/amcharts5';
import * as am5xy from '@amcharts/amcharts5/xy';
import { useEffect, useLayoutEffect, useRef } from 'react';
+import { formatCurrencyKR } from '~/shared/utils';
import type { OrderBookUnit } from '../../types/orderbook.type';
const THEME = {
@@ -33,7 +34,7 @@ export default function OrderbookChart({
if (!chartRef.current || !yAxisRef.current || !seriesRef.current) return;
const formattedData = data.map((item) => ({
- price: item.price.toString(),
+ price: formatCurrencyKR(+item.price),
size: item.size,
priceY: item.price,
sizeX: item.size,
@@ -41,10 +42,6 @@ export default function OrderbookChart({
yAxisRef.current.data.setAll(formattedData);
seriesRef.current.data.setAll(formattedData);
-
- chartRef.current.series.each((series) => {
- series.appear(1000);
- });
}, [data]);
useLayoutEffect(() => {
@@ -69,7 +66,6 @@ export default function OrderbookChart({
am5.Rectangle.new(rootRef.current, {
stroke: am5.color('#fff'),
strokeOpacity: 0,
- fill: THEME[type].barColor,
fillOpacity: 0.05,
}),
);
@@ -116,7 +112,7 @@ export default function OrderbookChart({
sequencedInterpolation: true,
tooltip: am5.Tooltip.new(rootRef.current, {
pointerOrientation: 'horizontal',
- labelText: '[bold]{priceY}원 {sizeX}개',
+ labelText: "[bold]{priceY.formatNumber('#,###.##')}원 {sizeX}개",
}),
paddingBottom: 0,
paddingTop: 0,
diff --git a/src/features/tradeview/ui/StockChart/Series.tsx b/src/features/tradeview/ui/StockChart/Series.tsx
index 1e45e1a..b07ea74 100644
--- a/src/features/tradeview/ui/StockChart/Series.tsx
+++ b/src/features/tradeview/ui/StockChart/Series.tsx
@@ -15,7 +15,6 @@ import {
useContext,
useImperativeHandle,
useLayoutEffect,
- useMemo,
useRef,
} from 'react';
@@ -114,13 +113,6 @@ export default function Series({
useImperativeHandle(ref, () => seriesApiRef.current.getInstance(), []);
- const context = useMemo(
- () => ({
- series: seriesApiRef.current,
- }),
- [],
- );
-
return (
{children}
diff --git a/src/features/tradeview/ui/StockChart/ToolTip.tsx b/src/features/tradeview/ui/StockChart/ToolTip.tsx
index b878c6c..7ea64dc 100644
--- a/src/features/tradeview/ui/StockChart/ToolTip.tsx
+++ b/src/features/tradeview/ui/StockChart/ToolTip.tsx
@@ -1,6 +1,7 @@
import type { CandlestickData } from 'lightweight-charts';
import { useLayoutEffect, useRef } from 'react';
import { formatCurrencyKR } from '~/shared/utils';
+import { formatDateKr } from '../../utils';
import { useChartContainer } from './ChartContainer';
import { useChartRoot } from './ChartRoot';
import { useSeries } from './Series';
@@ -36,6 +37,8 @@ export default function ToolTip() {
const { close, high, low, open, time } = param.seriesData.get(
chartSeries,
) as CandlestickData;
+ const date = new Date((time as number) * 1000);
+ const koreanDate = new Date(date.setHours(date.getHours() - 9));
toolTipElementRef.current.style.display = 'block';
toolTipElementRef.current.innerHTML = `
@@ -50,7 +53,7 @@ export default function ToolTip() {
${formatCurrencyKR(close)}원
-
${new Date((time as number) * 1000).toLocaleString()}
+
${formatDateKr(koreanDate)}
`;
diff --git a/src/features/tradeview/ui/StockChart/index.tsx b/src/features/tradeview/ui/StockChart/index.tsx
index 7fa11b3..697fa2f 100644
--- a/src/features/tradeview/ui/StockChart/index.tsx
+++ b/src/features/tradeview/ui/StockChart/index.tsx
@@ -21,10 +21,14 @@ import Series from './Series';
import ToolTip from './ToolTip';
import api from '../../api/tradeview.endpoints';
-import { INTERVALS } from '../../const/chart.const';
+import { INTERVALS, MINUTE } from '../../const/chart.const';
import usePastTimeData from '../../hooks/usePastTimeData';
import useRealTimeData from '../../hooks/useRealTimeData';
-import { extractCandlestickData, timestampToISOString } from '../../utils';
+import {
+ extractCandlestickData,
+ priceFormatter,
+ timestampToISOString,
+} from '../../utils';
import IntervalSelector from '../IntervalSelector';
type ChartProps = {
@@ -39,6 +43,7 @@ export default function Chart({ ticker = 'BTC', count = 30 }: ChartProps) {
const [isChartReady, setIsChartReady] = useState(false);
const realTimeData = useRealTimeData(ticker);
const pastTimeData = usePastTimeData(ticker, selectedInterval, count);
+ const prevRequestDate = useRef