aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

알림목록 화면오류 수정

Browse Source
This commit is contained in:
Macbook
2026-05-30 01:28:58 +09:00
parent ba6695eb9c
commit 0e46104106
5 changed files with 116 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/TradingChart.tsx
+11 -1
View File
@@ -358,6 +358,13 @@ const TradingChart: React.FC<TradingChartProps> = ({
required = mgr.resetPaneHeights(wrapperH);
}
if (paneLayoutClamp) {
try {
const w = wrapper.clientWidth;
if (w > 0 && wrapperH > 0) mgr.resize(w, wrapperH);
} catch { /* ok */ }
}
if (!paneLayoutClamp && required > wrapperH + 4) {
container.style.height = `${required}px`;
} else {
@@ -730,7 +737,10 @@ const TradingChart: React.FC<TradingChartProps> = ({
useEffect(() => {
if (!containerRef.current) return;
const mgr = new ChartManager(containerRef.current, theme);
const mgr = new ChartManager(containerRef.current, theme, {
compactPaneLayout: paneLayoutClamp,
autoSize: !paneLayoutClamp,
});
managerRef.current = mgr;
setChartMgr(mgr);
if (!volumeVisibleRef.current) {
frontend/src/components/tradeNotification/TradeNotificationListRow.tsx
+3 -5
View File
@@ -141,11 +141,11 @@ const TradeNotificationListRow: React.FC<Props> = ({
const chartExpanded = isListLayout && expandedChartKey != null;
const chartActive = isListLayout && chartsEnabled && panelActive;
const signalActive = isListLayout && panelActive && !chartExpanded;
const signalCardEnabled = isListLayout && panelActive && !chartExpanded;
const ticker = tickers?.get(item.market);
const expandedIndicator = indicatorCards.find(c => c.id === expandedChartKey);
const signalSnapshotEnabled = isListLayout && panelActive && item.strategyId != null;
const signalSnapshotEnabled = signalCardEnabled && item.strategyId != null;
const { snapshot, loading: signalLoading } = useTradeNotificationSignalSnapshot(
item.market,
item.strategyId,
@@ -356,7 +356,6 @@ const TradeNotificationListRow: React.FC<Props> = ({
</TradeNotificationHScrollPane>
) : (
<>
{signalActive && (
<TradeNotificationHScrollPane
className="tnl-row-gallery-signal"
label="신호 일치율"
@@ -371,13 +370,12 @@ const TradeNotificationListRow: React.FC<Props> = ({
candleType={item.candleType}
theme={theme}
ticker={ticker}
enabled={signalActive}
enabled={signalCardEnabled}
snapshot={snapshot}
signalLoading={signalLoading}
onExpandCharts={() => setExpandedChartKey('candle')}
/>
</TradeNotificationHScrollPane>
)}
<div className="tnl-row-gallery-candle" aria-label="캔들 차트">
<TradeSignalChartCard
frontend/src/components/tradeNotification/TradeSignalMiniChart.tsx
+14 -24
View File
@@ -50,6 +50,17 @@ const TradeSignalMiniChart: React.FC<Props> = ({
const marketRef = useRef(market);
marketRef.current = market;
const syncChartLayout = useCallback(() => {
const wrap = canvasWrapRef.current;
const mgr = managerRef.current;
if (!wrap || !mgr?.hasMainSeries()) return;
const chartWrap = wrap.querySelector<HTMLElement>('.tv-chart-wrap');
const w = chartWrap?.clientWidth ?? wrap.clientWidth;
const h = chartWrap?.clientHeight ?? wrap.clientHeight;
if (w <= 0 || h <= 0) return;
mgr.syncLayout(w, h);
}, []);
const handleCandlesReady = useCallback(() => {
chartLiveReadyRef.current = true;
const pending = pendingBarRef.current;
@@ -57,12 +68,8 @@ const TradeSignalMiniChart: React.FC<Props> = ({
if (!pending || !mgr || barsMarketRef.current !== marketRef.current) return;
pendingBarRef.current = null;
mgr.updateBar(pending);
const wrap = canvasWrapRef.current;
if (wrap && wrap.clientWidth > 0 && wrap.clientHeight > 0) {
mgr.resetPaneHeights(wrap.clientHeight);
mgr.resize(wrap.clientWidth, wrap.clientHeight);
}
}, []);
syncChartLayout();
}, [syncChartLayout]);
const applyRealtimeBar = useCallback((bar: OHLCVBar, append: boolean) => {
if (barsMarketRef.current !== marketRef.current) return;
@@ -107,17 +114,6 @@ const TradeSignalMiniChart: React.FC<Props> = ({
barsMarketRef.current = barsMarket;
const barsReady = bars.length >= 2 && barsMarket === market;
const syncChartLayout = useCallback(() => {
const wrap = canvasWrapRef.current;
const mgr = managerRef.current;
if (!wrap || !mgr?.hasMainSeries()) return;
const w = wrap.clientWidth;
const h = wrap.clientHeight;
if (w <= 0 || h <= 0) return;
mgr.resetPaneHeights(h);
mgr.resize(w, h);
}, []);
useLayoutEffect(() => {
chartLiveReadyRef.current = false;
pendingBarRef.current = null;
@@ -132,14 +128,8 @@ const TradeSignalMiniChart: React.FC<Props> = ({
const timers = [200, 600, 1200].map(delay =>
setTimeout(() => {
if (!canvasWrapRef.current) return;
const h = canvasWrapRef.current.clientHeight;
if (h <= 0) return;
const w = canvasWrapRef.current.clientWidth;
if (managerRef.current?.hasMainSeries()) {
if (w > 0) {
managerRef.current.resetPaneHeights(h);
managerRef.current.resize(w, h);
}
syncChartLayout();
} else if (!chartReloadTriggeredRef.current && delay >= 600 && barsReady) {
chartReloadTriggeredRef.current = true;
setChartReloadTick(t => t + 1);
frontend/src/styles/tradeNotificationList.css
+10
View File
@@ -1160,6 +1160,16 @@ ul.tnl-list.tnl-list--grid {
min-height: 300px;
}
/* 그리드형 — 상세 메타와 투자전략 구분선 사이 여백 축소 */
.tnl-summary-card--grid .tnl-summary-meta {
flex: 0 1 auto;
}
.tnl-summary-card--grid .tnl-summary-strategy-field {
margin-top: -6px;
padding-top: 2px;
}
.tnl-row--grid.tnl-row--unread .tnl-summary-card {
border-color: rgba(122, 162, 247, 0.45);
}
frontend/src/utils/ChartManager.ts
+58 -7
View File
@@ -258,13 +258,23 @@ export class ChartManager {
/** applyPaneLayout / resetPaneHeights 에서 측정한 마지막 가용 높이(px) */
private _lastLayoutAvailableHeight?: number;
constructor(container: HTMLElement, theme: Theme) {
/** 알림 목록 미니 차트 등 고정 높이 — pane 최소 px·비율 완화 */
private _compactPaneLayout = false;
constructor(
container: HTMLElement,
theme: Theme,
options?: { autoSize?: boolean; compactPaneLayout?: boolean },
) {
this.container = container;
this._compactPaneLayout = options?.compactPaneLayout ?? false;
const autoSize = options?.autoSize ?? !this._compactPaneLayout;
const t = getTheme(theme);
this.chart = createChart(container, {
/* autoSize: true → LWC가 내부적으로 ResizeObserver를 사용해 컨테이너 크기 변경을 자동으로 처리.
멀티 레이아웃에서 초기 렌더 시 컨테이너가 0 크기일 때도 차트가 정상 표시됨. */
autoSize: true,
멀티 레이아웃에서 초기 렌더 시 컨테이너가 0 크기일 때도 차트가 정상 표시됨.
compact(미니) 차트는 autoSize:false + syncLayout() 으로 피드백 루프 방지. */
autoSize,
layout: {
background: { type: ColorType.Solid, color: t.bgColor },
textColor: t.textColor,
@@ -764,10 +774,39 @@ export class ChartManager {
/** 지표 추가·제거 후 pane index 동기화 + stretch 재배분 */
private _finalizeIndicatorPaneLayout(): void {
if (this._activeIndicatorPaneIndices().size === 0) return;
this._removeOrphanSubPanes();
if (this._activeIndicatorPaneIndices().size > 0) {
this._resyncIndicatorPaneIndices();
this.resetPaneHeights(this._lastLayoutAvailableHeight);
} else {
this._trimTrailingEmptySubPanes();
}
const H = this._lastLayoutAvailableHeight ?? this.container.clientHeight;
this.resetPaneHeights(H > 0 ? H : undefined);
if (this._compactPaneLayout && H > 0) {
try {
const w = this.container.clientWidth;
if (w > 0) this.chart.resize(w, H);
} catch { /* ok */ }
}
this._notifyPaneLayout();
}
/**
* 고정 높이 미니 차트 — pane 비율 재계산 + LWC resize 를 한 번에 수행.
* (autoSize:false 일 때 외부 ResizeObserver 가 호출)
*/
syncLayout(width: number, height: number): void {
if (height > 0) this._lastLayoutAvailableHeight = height;
this._removeOrphanSubPanes();
if (this._activeIndicatorPaneIndices().size > 0) {
this._resyncIndicatorPaneIndices();
} else {
this._trimTrailingEmptySubPanes();
}
this.resetPaneHeights(height);
try {
if (width > 0 && height > 0) this.chart.resize(width, height);
} catch { /* ok */ }
this._notifyPaneLayout();
}
@@ -3530,7 +3569,7 @@ export class ChartManager {
const volumeShown = this._volumeVisible && !this._candleOnlyLayout;
const VOL_FRAC = this._volumeFrac(H);
const MIN_IND_PX = 80;
const MIN_IND_PX = this._minIndPx(H);
const ORPHAN_STRETCH = 0.0001;
/** 보조지표 pane 은 동일 stretch weight → 항상 같은 높이 */
const IND_EQUAL_WEIGHT = 1;
@@ -3569,14 +3608,26 @@ export class ChartManager {
return totalRequired;
}
private _minIndPx(H: number): number {
if (this._compactPaneLayout) {
return Math.min(56, Math.max(28, Math.round(H * 0.2)));
}
return 80;
}
private _paneHeightFractions(
indicatorPaneCount: number,
volFrac: number,
availableHeight?: number,
): { mainFrac: number; eachIndFrac: number } {
const N = indicatorPaneCount;
if (N === 0) {
return { mainFrac: 1 - volFrac, eachIndFrac: 0 };
}
if (this._compactPaneLayout && N === 1 && availableHeight != null && availableHeight < 400) {
const mainFrac = 0.52;
return { mainFrac, eachIndFrac: Math.max(0.28, 1 - mainFrac - volFrac) };
}
if (N <= 3) {
return { mainFrac: 0.5, eachIndFrac: (0.5 - volFrac) / N };
}
@@ -3621,7 +3672,7 @@ export class ChartManager {
? this._lastLayoutAvailableHeight
: this.container.clientHeight);
const N = this._activeIndicatorPaneIndices().size;
const { mainFrac } = this._paneHeightFractions(N, this._volumeFrac(H));
const { mainFrac } = this._paneHeightFractions(N, this._volumeFrac(H), H);
return this._applyPaneStretchFactors(mainFrac, availableHeight);
}