실시간 차트 보조지표 값 소수점 표시

This commit is contained in:
Macbook
2026-05-30 10:39:50 +09:00
parent 33c2d4b337
commit c7ba13e7ed
23 changed files with 226 additions and 40 deletions
+22 -4
View File
@@ -117,8 +117,10 @@ export interface ChartSlotHandle {
setIndicators: (inds: IndicatorConfig[]) => void;
/** 크로스헤어 자석모드 설정 */
setCrosshairMagnet: (enabled: boolean) => void;
/** 가격축 라벨·설명 on/off */
/** 가격축 라벨·설명 on/off (캔들·보조지표 동일 값) */
setSeriesPriceLabelsEnabled: (enabled: boolean) => void;
setCandleAreaPriceLabelsEnabled: (enabled: boolean) => void;
setIndicatorAreaPriceLabelsEnabled: (enabled: boolean) => void;
/** 거래량 pane on/off */
setVolumeVisible: (visible: boolean) => void;
setPaneSeparatorOptions: (opts: ChartPaneSeparatorOptions) => void;
@@ -172,7 +174,9 @@ export interface ChartSlotProps {
magnetMode?: 'off' | 'weak' | 'strong';
/** 차트 우클릭 → 매수·매도 패널 자동 입력 */
onTradeOrderRequest?: (req: { market: string; price: number; side: 'buy' | 'sell' }, slotIndex: number) => void;
/** 보조지표 우측 가격축 라벨·설명 표시 */
/** 캔들 영역 오버레이 지표 가격축 라벨·설명 */
chartCandleAreaPriceLabels?: boolean;
/** 하단 보조지표 pane 가격축 라벨·설명 */
chartSeriesPriceLabels?: boolean;
/** 차트 하단 거래량 바 표시 */
chartVolumeVisible?: boolean;
@@ -206,6 +210,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
onSymbolChange,
magnetMode = 'off',
onTradeOrderRequest,
chartCandleAreaPriceLabels = true,
chartSeriesPriceLabels = true,
chartVolumeVisible = true,
chartRealtimeSource = 'BACKEND_STOMP',
@@ -331,6 +336,12 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
setSeriesPriceLabelsEnabled: (enabled: boolean) => {
managerRef.current?.setSeriesPriceLabelsEnabled(enabled);
},
setCandleAreaPriceLabelsEnabled: (enabled: boolean) => {
managerRef.current?.setCandleAreaPriceLabelsEnabled(enabled);
},
setIndicatorAreaPriceLabelsEnabled: (enabled: boolean) => {
managerRef.current?.setIndicatorAreaPriceLabelsEnabled(enabled);
},
setVolumeVisible: (visible: boolean) => {
managerRef.current?.setVolumeVisible(visible);
},
@@ -349,7 +360,11 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
}, [magnetMode]);
useEffect(() => {
managerRef.current?.setSeriesPriceLabelsEnabled(chartSeriesPriceLabels);
managerRef.current?.setCandleAreaPriceLabelsEnabled(chartCandleAreaPriceLabels);
}, [chartCandleAreaPriceLabels]);
useEffect(() => {
managerRef.current?.setIndicatorAreaPriceLabelsEnabled(chartSeriesPriceLabels);
}, [chartSeriesPriceLabels]);
useEffect(() => {
@@ -855,6 +870,8 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
drawingsVisible={!compactMode}
showHoverToolbar={!compactMode}
volumeVisible={chartVolumeVisible}
candleAreaPriceLabelsEnabled={chartCandleAreaPriceLabels}
indicatorAreaPriceLabelsEnabled={chartSeriesPriceLabels}
paneSeparatorOptions={chartPaneSeparator}
crosshairInfoVisible={chartCrosshairInfoVisible}
onCrosshair={data => {
@@ -873,7 +890,8 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
} else {
pendingRealtimeBarRef.current = null;
}
mgr.setSeriesPriceLabelsEnabled(chartSeriesPriceLabels);
mgr.setCandleAreaPriceLabelsEnabled(chartCandleAreaPriceLabels);
mgr.setIndicatorAreaPriceLabelsEnabled(chartSeriesPriceLabels);
mgr.setVolumeVisible(chartVolumeVisible);
if (chartPaneSeparator) mgr.setPaneSeparatorOptions(chartPaneSeparator);
// Time sync: 가시 시간 범위 변화 구독
@@ -331,7 +331,7 @@ export const SettingsOutputFooter: React.FC<{
<div className="ism-row ism-ichimoku-extra-row">
<span className="ism-label"> ·</span>
<div className="ism-control">
<label className="ism-toggle" title="이 지표만 우측 가격축 금액·설명 표시 (차트 설정 전역 스위치가 켜져 있을 때 적용)">
<label className="ism-toggle" title="이 지표만 우측 가격축 금액·설명 표시 (해당 영역·차트 설정 전역 스위치가 켜져 있을 때 적용)">
<input
type="checkbox"
checked={lastValueVisible}
+36 -2
View File
@@ -110,6 +110,8 @@ interface SettingsPageProps {
onRemoveIndicatorFromChart?: (type: string) => void;
/** 보조지표 설정 목록 순서 변경 → 차트 pane 순서 */
onIndicatorListOrderChange?: (orderedTypes: string[]) => void;
chartCandleAreaPriceLabels?: boolean;
onChartCandleAreaPriceLabels?: (v: boolean) => void;
chartSeriesPriceLabels?: boolean;
onChartSeriesPriceLabels?: (v: boolean) => void;
chartVolumeVisible?: boolean;
@@ -732,6 +734,8 @@ interface ChartPanelProps {
onChartRealtimeSource?: (v: string) => void;
magnetMode?: 'off' | 'weak' | 'strong';
onMagnetMode?: (m: 'off' | 'weak' | 'strong') => void;
chartCandleAreaPriceLabels?: boolean;
onChartCandleAreaPriceLabels?: (v: boolean) => void;
chartSeriesPriceLabels?: boolean;
onChartSeriesPriceLabels?: (v: boolean) => void;
chartVolumeVisible?: boolean;
@@ -752,6 +756,8 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
chartRealtimeSource = 'BACKEND_STOMP',
onChartRealtimeSource,
magnetMode = 'off', onMagnetMode,
chartCandleAreaPriceLabels = true,
onChartCandleAreaPriceLabels,
chartSeriesPriceLabels = true,
onChartSeriesPriceLabels,
chartVolumeVisible = true,
@@ -869,9 +875,33 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
<span className="stg-toggle-slider" />
</label>
</SettingRow>
</SettingSection>
<SettingSection title="지표 가격축 라벨·설명">
<div className="stg-subsection-label">
<span className="stg-subsection-desc">· pane (· )</span>
</div>
<SettingRow
label="지표 가격축 라벨·설명"
desc="켜면 보조지표 선마다 우측 가격축에 금액 하이라이트와 설명(전환선, 기준선 등)이 표시됩니다. 끄면 선만 표시됩니다."
label="가격축 라벨·설명"
desc="켜면 오버레이 지표 선마다 우측 가격축에 금액 설명(전환선, 기준선 등)이 표시됩니다."
>
<label className="stg-toggle">
<input
type="checkbox"
checked={chartCandleAreaPriceLabels}
onChange={e => onChartCandleAreaPriceLabels?.(e.target.checked)}
/>
<span className="stg-toggle-slider" />
</label>
</SettingRow>
<div className="stg-subsection-label stg-subsection-label--spaced">
<span className="stg-subsection-desc"> pane에 RSI·MACD </span>
</div>
<SettingRow
label="가격축 라벨·설명"
desc="켜면 하단 보조지표 pane의 선마다 우측 가격축에 금액과 설명이 표시됩니다. 끄면 선만 표시됩니다."
>
<label className="stg-toggle">
<input
@@ -1611,6 +1641,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
onAddIndicatorToChart,
onRemoveIndicatorFromChart,
onIndicatorListOrderChange,
chartCandleAreaPriceLabels = true,
onChartCandleAreaPriceLabels,
chartSeriesPriceLabels = true,
onChartSeriesPriceLabels,
chartVolumeVisible = true,
@@ -1709,6 +1741,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
onChartRealtimeSource={onChartRealtimeSource}
magnetMode={magnetMode}
onMagnetMode={onMagnetMode}
chartCandleAreaPriceLabels={chartCandleAreaPriceLabels}
onChartCandleAreaPriceLabels={onChartCandleAreaPriceLabels}
chartSeriesPriceLabels={chartSeriesPriceLabels}
onChartSeriesPriceLabels={onChartSeriesPriceLabels}
chartVolumeVisible={chartVolumeVisible}
+19 -5
View File
@@ -137,7 +137,11 @@ interface TradingChartProps {
volumeVisible?: boolean;
/** 하단 호버 줌·스크롤 툴바 (기본 true) */
showHoverToolbar?: boolean;
/** 보조지표 우측 가격축 라벨·설명 (차트 설정, 기본 true) */
/** 캔들 영역 오버레이 지표 가격축 라벨·설명 (기본 true) */
candleAreaPriceLabelsEnabled?: boolean;
/** 하단 보조지표 pane 가격축 라벨·설명 (기본 true) */
indicatorAreaPriceLabelsEnabled?: boolean;
/** @deprecated candleArea + indicatorArea 동일 값 */
seriesPriceLabelsEnabled?: boolean;
/** 실시간 차트 화면 표시 여부 — false 이면 숨김 중 무거운 재로드 지연 */
chartVisible?: boolean;
@@ -185,7 +189,9 @@ const TradingChart: React.FC<TradingChartProps> = ({
displayTimezone = DEFAULT_DISPLAY_TIMEZONE,
volumeVisible = true,
showHoverToolbar = true,
seriesPriceLabelsEnabled = true,
candleAreaPriceLabelsEnabled,
indicatorAreaPriceLabelsEnabled,
seriesPriceLabelsEnabled,
chartVisible = true,
paneSeparatorOptions,
paneLayoutClamp = false,
@@ -335,9 +341,16 @@ const TradingChart: React.FC<TradingChartProps> = ({
mgr.setVolumeVisible(volumeVisible, wrapperH > 0 ? wrapperH : undefined);
}, [volumeVisible]);
const resolvedCandlePriceLabels = candleAreaPriceLabelsEnabled ?? seriesPriceLabelsEnabled ?? true;
const resolvedIndicatorPriceLabels = indicatorAreaPriceLabelsEnabled ?? seriesPriceLabelsEnabled ?? true;
useEffect(() => {
managerRef.current?.setSeriesPriceLabelsEnabled(seriesPriceLabelsEnabled);
}, [seriesPriceLabelsEnabled]);
managerRef.current?.setCandleAreaPriceLabelsEnabled(resolvedCandlePriceLabels);
}, [resolvedCandlePriceLabels]);
useEffect(() => {
managerRef.current?.setIndicatorAreaPriceLabelsEnabled(resolvedIndicatorPriceLabels);
}, [resolvedIndicatorPriceLabels]);
useEffect(() => {
if (!paneSeparatorOptions) return;
@@ -773,7 +786,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
const wrapperH = wrapperRef.current?.clientHeight ?? 0;
mgr.setVolumeVisible(false, wrapperH > 0 ? wrapperH : undefined);
}
mgr.setSeriesPriceLabelsEnabled(seriesPriceLabelsEnabled);
mgr.setCandleAreaPriceLabelsEnabled(resolvedCandlePriceLabels);
mgr.setIndicatorAreaPriceLabelsEnabled(resolvedIndicatorPriceLabels);
if (paneSeparatorOptions) mgr.setPaneSeparatorOptions(paneSeparatorOptions);
onManagerReady(mgr);
@@ -36,6 +36,7 @@ import '../styles/virtualTradingDashboard.css';
interface Props {
theme?: Theme;
chartRealtimeSource?: ChartRealtimeSource;
chartCandleAreaPriceLabels?: boolean;
chartSeriesPriceLabels?: boolean;
tickers?: Map<string, TickerData>;
}
@@ -43,6 +44,7 @@ interface Props {
const TrendSearchPage: React.FC<Props> = ({
theme = 'dark',
chartRealtimeSource = 'BACKEND_STOMP',
chartCandleAreaPriceLabels = true,
chartSeriesPriceLabels = true,
tickers,
}) => {
@@ -256,6 +258,7 @@ const TrendSearchPage: React.FC<Props> = ({
flashMarkets={flashMarkets}
theme={theme}
chartRealtimeSource={chartRealtimeSource}
chartCandleAreaPriceLabels={chartCandleAreaPriceLabels}
chartSeriesPriceLabels={chartSeriesPriceLabels}
chartPaneSeparator={defaults.chartPaneSeparator}
tickers={tickers}
@@ -108,6 +108,7 @@ const VirtualTradingPage: React.FC<Props> = ({
const appChartDefaults = resolveAppDefaults(appSettings);
const chartRealtimeSource = (appChartDefaults.chartRealtimeSource
?? 'BACKEND_STOMP') as ChartRealtimeSource;
const chartCandleAreaPriceLabels = appChartDefaults.chartCandleAreaPriceLabels;
const chartSeriesPriceLabels = appChartDefaults.chartSeriesPriceLabels;
const chartPaneSeparator = appChartDefaults.chartPaneSeparator;
const chartLiveReceiveHighlight = appChartDefaults.chartLiveReceiveHighlight;
@@ -453,6 +454,7 @@ const VirtualTradingPage: React.FC<Props> = ({
onSelectMarket={handleSelectMarket}
theme={theme}
chartRealtimeSource={chartRealtimeSource}
chartCandleAreaPriceLabels={chartCandleAreaPriceLabels}
chartSeriesPriceLabels={chartSeriesPriceLabels}
chartPaneSeparator={chartPaneSeparator}
chartLiveReceiveHighlight={chartLiveReceiveHighlight}
@@ -23,6 +23,7 @@ interface Props {
timeframe: string;
theme?: Theme;
chartRealtimeSource?: ChartRealtimeSource;
chartCandleAreaPriceLabels?: boolean;
chartSeriesPriceLabels?: boolean;
chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
}
@@ -42,6 +43,7 @@ const TrendSearchCardChart: React.FC<Props> = ({
timeframe,
theme = 'dark',
chartRealtimeSource = 'BACKEND_STOMP',
chartCandleAreaPriceLabels = true,
chartSeriesPriceLabels = true,
chartPaneSeparator,
}) => {
@@ -197,7 +199,8 @@ const TrendSearchCardChart: React.FC<Props> = ({
magnifierEnabled={false}
volumeVisible
showHoverToolbar={false}
seriesPriceLabelsEnabled={chartSeriesPriceLabels}
candleAreaPriceLabelsEnabled={chartCandleAreaPriceLabels}
indicatorAreaPriceLabelsEnabled={chartSeriesPriceLabels}
paneSeparatorOptions={chartPaneSeparator}
/>
</div>
@@ -19,6 +19,7 @@ interface Props {
timeframe: string;
theme?: Theme;
chartRealtimeSource?: ChartRealtimeSource;
chartCandleAreaPriceLabels?: boolean;
chartSeriesPriceLabels?: boolean;
chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
}
@@ -39,6 +40,7 @@ const TrendSearchChartPanel: React.FC<Props> = ({
timeframe,
theme = 'dark',
chartRealtimeSource = 'BACKEND_STOMP',
chartCandleAreaPriceLabels = true,
chartSeriesPriceLabels = true,
chartPaneSeparator,
}) => {
@@ -184,7 +186,8 @@ const TrendSearchChartPanel: React.FC<Props> = ({
magnifierEnabled={false}
volumeVisible
showHoverToolbar={false}
seriesPriceLabelsEnabled={chartSeriesPriceLabels}
candleAreaPriceLabelsEnabled={chartCandleAreaPriceLabels}
indicatorAreaPriceLabelsEnabled={chartSeriesPriceLabels}
paneSeparatorOptions={chartPaneSeparator}
/>
</div>
@@ -21,6 +21,7 @@ interface Props {
onSelect?: () => void;
theme?: Theme;
chartRealtimeSource?: ChartRealtimeSource;
chartCandleAreaPriceLabels?: boolean;
chartSeriesPriceLabels?: boolean;
chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
ticker?: TickerData;
@@ -58,6 +59,7 @@ const TrendSearchResultCard: React.FC<Props> = ({
onSelect,
theme = 'dark',
chartRealtimeSource = 'BACKEND_STOMP',
chartCandleAreaPriceLabels = true,
chartSeriesPriceLabels = true,
chartPaneSeparator,
ticker,
@@ -140,6 +142,7 @@ const TrendSearchResultCard: React.FC<Props> = ({
timeframe={timeframe}
theme={theme}
chartRealtimeSource={chartRealtimeSource}
chartCandleAreaPriceLabels={chartCandleAreaPriceLabels}
chartSeriesPriceLabels={chartSeriesPriceLabels}
chartPaneSeparator={chartPaneSeparator}
/>
@@ -16,6 +16,7 @@ interface Props {
flashMarkets?: Set<string>;
theme?: Theme;
chartRealtimeSource?: ChartRealtimeSource;
chartCandleAreaPriceLabels?: boolean;
chartSeriesPriceLabels?: boolean;
chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
tickers?: Map<string, TickerData>;
@@ -37,6 +38,7 @@ const TrendSearchResultsCardGrid: React.FC<Props> = ({
flashMarkets,
theme = 'dark',
chartRealtimeSource = 'BACKEND_STOMP',
chartCandleAreaPriceLabels = true,
chartSeriesPriceLabels = true,
chartPaneSeparator,
tickers,
@@ -85,6 +87,7 @@ const TrendSearchResultsCardGrid: React.FC<Props> = ({
onSelect={onSelect ? () => onSelect(row) : undefined}
theme={theme}
chartRealtimeSource={chartRealtimeSource}
chartCandleAreaPriceLabels={chartCandleAreaPriceLabels}
chartSeriesPriceLabels={chartSeriesPriceLabels}
chartPaneSeparator={chartPaneSeparator}
ticker={tickers?.get(row.market)}
@@ -28,7 +28,9 @@ const VirtualStrategyChartPopup: React.FC<Props> = ({
onClose,
}) => {
const { settings: appSettings } = useAppSettings();
const chartSeriesPriceLabels = resolveAppDefaults(appSettings).chartSeriesPriceLabels;
const chartDefaults = resolveAppDefaults(appSettings);
const chartCandleAreaPriceLabels = chartDefaults.chartCandleAreaPriceLabels;
const chartSeriesPriceLabels = chartDefaults.chartSeriesPriceLabels;
const ko = getKoreanName(market);
const sym = market.replace(/^KRW-/, '');
@@ -56,6 +58,7 @@ const VirtualStrategyChartPopup: React.FC<Props> = ({
theme={theme}
running={running}
chartRealtimeSource={chartRealtimeSource}
chartCandleAreaPriceLabels={chartCandleAreaPriceLabels}
chartSeriesPriceLabels={chartSeriesPriceLabels}
/>
</AppPopup>
@@ -42,6 +42,7 @@ interface Props {
onSelect?: () => void;
theme?: Theme;
chartRealtimeSource?: ChartRealtimeSource;
chartCandleAreaPriceLabels?: boolean;
chartSeriesPriceLabels?: boolean;
chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
chartLiveReceiveHighlight?: boolean;
@@ -72,6 +73,7 @@ const VirtualTargetCard: React.FC<Props> = ({
onSelect,
theme = 'dark',
chartRealtimeSource = 'BACKEND_STOMP',
chartCandleAreaPriceLabels = true,
chartSeriesPriceLabels = true,
chartPaneSeparator,
chartLiveReceiveHighlight = true,
@@ -194,6 +196,7 @@ const VirtualTargetCard: React.FC<Props> = ({
theme={theme}
running={running}
chartRealtimeSource={chartRealtimeSource}
chartCandleAreaPriceLabels={chartCandleAreaPriceLabels}
chartSeriesPriceLabels={chartSeriesPriceLabels}
chartPaneSeparator={chartPaneSeparator}
chartTimeframe={chartTimeframe}
@@ -30,6 +30,7 @@ interface Props {
theme?: Theme;
running?: boolean;
chartRealtimeSource?: ChartRealtimeSource;
chartCandleAreaPriceLabels?: boolean;
chartSeriesPriceLabels?: boolean;
chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
/** 전체보기 분할 pane — 캔버스 높이 100% */
@@ -46,6 +47,7 @@ const VirtualTargetCardChart: React.FC<Props> = ({
theme = 'dark',
running = false,
chartRealtimeSource = 'BACKEND_STOMP',
chartCandleAreaPriceLabels = true,
chartSeriesPriceLabels = true,
chartPaneSeparator,
fillHeight = false,
@@ -261,7 +263,8 @@ const VirtualTargetCardChart: React.FC<Props> = ({
showPaneLegend={false}
showCandlePaneControls={false}
defaultCandleOnly
seriesPriceLabelsEnabled={chartSeriesPriceLabels}
candleAreaPriceLabelsEnabled={chartCandleAreaPriceLabels}
indicatorAreaPriceLabelsEnabled={chartSeriesPriceLabels}
paneSeparatorOptions={chartPaneSeparator}
/>
</div>
@@ -32,6 +32,7 @@ interface Props {
onExit: () => void;
theme?: Theme;
chartRealtimeSource?: ChartRealtimeSource;
chartCandleAreaPriceLabels?: boolean;
chartSeriesPriceLabels?: boolean;
chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
chartLiveReceiveHighlight?: boolean;
@@ -55,6 +56,7 @@ const VirtualTargetFocusView: React.FC<Props> = ({
onExit,
theme = 'dark',
chartRealtimeSource = 'BACKEND_STOMP',
chartCandleAreaPriceLabels = true,
chartSeriesPriceLabels = true,
chartPaneSeparator,
chartLiveReceiveHighlight = true,
@@ -114,6 +116,7 @@ const VirtualTargetFocusView: React.FC<Props> = ({
theme={theme}
running={running}
chartRealtimeSource={chartRealtimeSource}
chartCandleAreaPriceLabels={chartCandleAreaPriceLabels}
chartSeriesPriceLabels={chartSeriesPriceLabels}
chartPaneSeparator={chartPaneSeparator}
fillHeight
@@ -31,6 +31,7 @@ interface Props {
onSelectMarket?: (market: string) => void;
theme?: Theme;
chartRealtimeSource?: ChartRealtimeSource;
chartCandleAreaPriceLabels?: boolean;
chartSeriesPriceLabels?: boolean;
chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
chartLiveReceiveHighlight?: boolean;
@@ -48,6 +49,7 @@ const VirtualTargetGrid: React.FC<Props> = ({
onSelectMarket,
theme = 'dark',
chartRealtimeSource = 'BACKEND_STOMP',
chartCandleAreaPriceLabels = true,
chartSeriesPriceLabels = true,
chartPaneSeparator,
chartLiveReceiveHighlight = true,
@@ -133,6 +135,7 @@ const VirtualTargetGrid: React.FC<Props> = ({
onExit={() => setFocusMarket(null)}
theme={theme}
chartRealtimeSource={chartRealtimeSource}
chartCandleAreaPriceLabels={chartCandleAreaPriceLabels}
chartSeriesPriceLabels={chartSeriesPriceLabels}
chartPaneSeparator={chartPaneSeparator}
chartLiveReceiveHighlight={chartLiveReceiveHighlight}
@@ -172,7 +175,8 @@ const VirtualTargetGrid: React.FC<Props> = ({
onSelect={onSelectMarket ? () => onSelectMarket(t.market) : undefined}
theme={theme}
chartRealtimeSource={chartRealtimeSource}
chartSeriesPriceLabels={chartSeriesPriceLabels}
chartCandleAreaPriceLabels={chartCandleAreaPriceLabels}
chartSeriesPriceLabels={chartSeriesPriceLabels}
chartPaneSeparator={chartPaneSeparator}
chartLiveReceiveHighlight={chartLiveReceiveHighlight}
ticker={tickers?.get(t.market)}