trade/trade-frontend
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(visualizer): improve chart interactions

Browse Source 
- Rename Drift → Trade in UI\n- Dynamic price precision for low prices\n- Fib retracement: select + move in X+Y\n- Ctrl+wheel vertical zoom, Ctrl+drag vertical pan\n- Auto Scale toggle for price scale
This commit is contained in:
u1
2026-01-06 17:46:33 +01:00
parent e20a1f5198
commit 6107c4e0ef
5 changed files with 345 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
apps/visualizer/src/features/chart/TradingChart.tsx
View File

@@ -26,8 +26,10 @@ type Props = {
bb20?: { upper: SeriesPoint[]; lower: SeriesPoint[]; mid: SeriesPoint[] };
showIndicators: boolean;
fib?: FibRetracement | null;
fibSelected?: boolean;
priceAutoScale?: boolean;
onReady?: (api: { chart: IChartApi; candles: ISeriesApi<'Candlestick', UTCTimestamp> }) => void;
onChartClick?: (p: FibAnchor) => void;
onChartClick?: (p: FibAnchor & { target: 'chart' | 'fib' }) => void;
onChartCrosshairMove?: (p: FibAnchor) => void;
};
@@ -37,6 +39,27 @@ function toTime(t: number): UTCTimestamp {
return t as UTCTimestamp;
}
function samplePriceFromCandles(candles: Candle[]): number | null {
for (let i = candles.length - 1; i >= 0; i -= 1) {
const close = candles[i]?.close;
if (typeof close !== 'number') continue;
if (!Number.isFinite(close)) continue;
if (close === 0) continue;
return close;
}
return null;
}
function priceFormatForSample(price: number) {
const abs = Math.abs(price);
if (!Number.isFinite(abs) || abs === 0) return { type: 'price' as const, precision: 2, minMove: 0.01 };
if (abs >= 1000) return { type: 'price' as const, precision: 0, minMove: 1 };
if (abs >= 1) return { type: 'price' as const, precision: 2, minMove: 0.01 };
const exponent = Math.floor(Math.log10(abs)); // negative for abs < 1
const precision = Math.min(8, Math.max(4, -exponent + 3));
return { type: 'price' as const, precision, minMove: Math.pow(10, -precision) };
}
function toCandleData(candles: Candle[]): CandlestickData[] {
return candles.map((c) => ({
time: toTime(c.time),
@@ -71,6 +94,8 @@ export default function TradingChart({
bb20,
showIndicators,
fib,
fibSelected = false,
priceAutoScale = true,
onReady,
onChartClick,
onChartCrosshairMove,
@@ -78,6 +103,9 @@ export default function TradingChart({
const containerRef = useRef<HTMLDivElement | null>(null);
const chartRef = useRef<IChartApi | null>(null);
const fibPrimitiveRef = useRef<FibRetracementPrimitive | null>(null);
const fibRef = useRef<FibRetracement | null>(fib ?? null);
const priceAutoScaleRef = useRef<boolean>(priceAutoScale);
const prevPriceAutoScaleRef = useRef<boolean>(priceAutoScale);
const onReadyRef = useRef<Props['onReady']>(onReady);
const onChartClickRef = useRef<Props['onChartClick']>(onChartClick);
const onChartCrosshairMoveRef = useRef<Props['onChartCrosshairMove']>(onChartCrosshairMove);
@@ -100,6 +128,10 @@ export default function TradingChart({
const bbUpper = useMemo(() => toLineSeries(bb20?.upper), [bb20?.upper]);
const bbLower = useMemo(() => toLineSeries(bb20?.lower), [bb20?.lower]);
const bbMid = useMemo(() => toLineSeries(bb20?.mid), [bb20?.mid]);
const priceFormat = useMemo(() => {
const sample = samplePriceFromCandles(candles);
return sample == null ? { type: 'price' as const, precision: 2, minMove: 0.01 } : priceFormatForSample(sample);
}, [candles]);
useEffect(() => {
onReadyRef.current = onReady;
@@ -113,6 +145,14 @@ export default function TradingChart({
onChartCrosshairMoveRef.current = onChartCrosshairMove;
}, [onChartCrosshairMove]);
useEffect(() => {
fibRef.current = fib ?? null;
}, [fib]);
useEffect(() => {
priceAutoScaleRef.current = priceAutoScale;
}, [priceAutoScale]);
useEffect(() => {
if (!containerRef.current) return;
if (chartRef.current) return;
@@ -146,6 +186,7 @@ export default function TradingChart({
borderVisible: false,
wickUpColor: '#22c55e',
wickDownColor: '#ef4444',
priceFormat,
});
const fibPrimitive = new FibRetracementPrimitive();
@@ -166,16 +207,18 @@ export default function TradingChart({
color: 'rgba(251,146,60,0.9)',
lineWidth: 1,
lineStyle: LineStyle.Dotted,
priceFormat,
});
const smaSeries = chart.addSeries(LineSeries, { color: 'rgba(248,113,113,0.9)', lineWidth: 1 });
const emaSeries = chart.addSeries(LineSeries, { color: 'rgba(52,211,153,0.9)', lineWidth: 1 });
const bbUpperSeries = chart.addSeries(LineSeries, { color: 'rgba(250,204,21,0.6)', lineWidth: 1 });
const bbLowerSeries = chart.addSeries(LineSeries, { color: 'rgba(163,163,163,0.6)', lineWidth: 1 });
const smaSeries = chart.addSeries(LineSeries, { color: 'rgba(248,113,113,0.9)', lineWidth: 1, priceFormat });
const emaSeries = chart.addSeries(LineSeries, { color: 'rgba(52,211,153,0.9)', lineWidth: 1, priceFormat });
const bbUpperSeries = chart.addSeries(LineSeries, { color: 'rgba(250,204,21,0.6)', lineWidth: 1, priceFormat });
const bbLowerSeries = chart.addSeries(LineSeries, { color: 'rgba(163,163,163,0.6)', lineWidth: 1, priceFormat });
const bbMidSeries = chart.addSeries(LineSeries, {
color: 'rgba(250,204,21,0.35)',
lineWidth: 1,
lineStyle: LineStyle.Dashed,
priceFormat,
});
seriesRef.current = {
@@ -197,7 +240,35 @@ export default function TradingChart({
if (logical == null) return;
const price = candleSeries.coordinateToPrice(param.point.y);
if (price == null) return;
onChartClickRef.current?.({ logical: Number(logical), price: Number(price) });
const currentFib = fibRef.current;
let target: 'chart' | 'fib' = 'chart';
if (currentFib) {
const x1 = chart.timeScale().logicalToCoordinate(currentFib.a.logical as any);
const x2 = chart.timeScale().logicalToCoordinate(currentFib.b.logical as any);
if (x1 != null && x2 != null) {
const tol = 6;
const left = Math.min(x1, x2) - tol;
const right = Math.max(x1, x2) + tol;
const p0 = currentFib.a.price;
const delta = currentFib.b.price - p0;
const yRatioMin = 0;
const yRatioMax = 4.236;
const pMin = Math.min(p0 + delta * yRatioMin, p0 + delta * yRatioMax);
const pMax = Math.max(p0 + delta * yRatioMin, p0 + delta * yRatioMax);
const y1 = candleSeries.priceToCoordinate(pMin);
const y2 = candleSeries.priceToCoordinate(pMax);
if (y1 != null && y2 != null) {
const top = Math.min(y1, y2) - tol;
const bottom = Math.max(y1, y2) + tol;
if (param.point.x >= left && param.point.x <= right && param.point.y >= top && param.point.y <= bottom) {
target = 'fib';
}
}
}
}
onChartClickRef.current?.({ logical: Number(logical), price: Number(price), target });
};
chart.subscribeClick(onClick);
@@ -211,6 +282,127 @@ export default function TradingChart({
};
chart.subscribeCrosshairMove(onCrosshairMove);
const container = containerRef.current;
const onWheel = (e: WheelEvent) => {
if (!e.ctrlKey) return;
if (!containerRef.current) return;
e.preventDefault();
e.stopPropagation();
if (priceAutoScaleRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
const y = e.clientY - rect.top;
const pivotPrice = candleSeries.coordinateToPrice(y);
if (pivotPrice == null) return;
const ps = candleSeries.priceScale();
const range = ps.getVisibleRange();
let low: number;
let high: number;
if (range) {
low = Math.min(range.from, range.to);
high = Math.max(range.from, range.to);
} else {
const top = candleSeries.coordinateToPrice(0);
const bottom = candleSeries.coordinateToPrice(rect.height);
if (top == null || bottom == null) return;
low = Math.min(top, bottom);
high = Math.max(top, bottom);
}
const span = high - low;
if (!(span > 0)) return;
const zoomFactor = Math.exp(e.deltaY * 0.002);
if (!Number.isFinite(zoomFactor) || zoomFactor <= 0) return;
const t = Math.min(1, Math.max(0, (pivotPrice - low) / span));
const minSpan = span * 1e-6;
const maxSpan = span * 1e6;
const nextSpan = Math.min(maxSpan, Math.max(minSpan, span * zoomFactor));
const nextLow = pivotPrice - t * nextSpan;
const nextHigh = nextLow + nextSpan;
ps.setAutoScale(false);
ps.setVisibleRange({ from: nextLow, to: nextHigh });
};
container?.addEventListener('wheel', onWheel, { passive: false, capture: true });
let pan: { pointerId: number; startPrice: number; startRange: { from: number; to: number } } | null = null;
const onPointerDown = (e: PointerEvent) => {
if (e.button !== 0) return;
if (!e.ctrlKey) return;
if (priceAutoScaleRef.current) return;
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
const y = e.clientY - rect.top;
const startPrice = candleSeries.coordinateToPrice(y);
if (startPrice == null) return;
const ps = candleSeries.priceScale();
const range = ps.getVisibleRange();
let from: number;
let to: number;
if (range) {
from = range.from;
to = range.to;
} else {
const top = candleSeries.coordinateToPrice(0);
const bottom = candleSeries.coordinateToPrice(rect.height);
if (top == null || bottom == null) return;
from = Math.min(top, bottom);
to = Math.max(top, bottom);
}
if (!(to > from)) return;
pan = { pointerId: e.pointerId, startPrice, startRange: { from, to } };
try {
containerRef.current.setPointerCapture(e.pointerId);
} catch {
// ignore
}
e.preventDefault();
e.stopPropagation();
};
const onPointerMove = (e: PointerEvent) => {
if (!pan) return;
if (pan.pointerId !== e.pointerId) return;
if (!containerRef.current) return;
if (!e.ctrlKey || priceAutoScaleRef.current) {
pan = null;
return;
}
const rect = containerRef.current.getBoundingClientRect();
const y = e.clientY - rect.top;
const currentPrice = candleSeries.coordinateToPrice(y);
if (currentPrice == null) return;
const delta = pan.startPrice - currentPrice;
const ps = candleSeries.priceScale();
ps.setAutoScale(false);
ps.setVisibleRange({ from: pan.startRange.from + delta, to: pan.startRange.to + delta });
e.preventDefault();
e.stopPropagation();
};
const stopPan = (e: PointerEvent) => {
if (!pan) return;
if (pan.pointerId !== e.pointerId) return;
pan = null;
try {
containerRef.current?.releasePointerCapture(e.pointerId);
} catch {
// ignore
}
};
container?.addEventListener('pointerdown', onPointerDown, { capture: true });
container?.addEventListener('pointermove', onPointerMove, { capture: true });
container?.addEventListener('pointerup', stopPan, { capture: true });
container?.addEventListener('pointercancel', stopPan, { capture: true });
const ro = new ResizeObserver(() => {
if (!containerRef.current) return;
const { width, height } = containerRef.current.getBoundingClientRect();
@@ -221,6 +413,11 @@ export default function TradingChart({
return () => {
chart.unsubscribeClick(onClick);
chart.unsubscribeCrosshairMove(onCrosshairMove);
container?.removeEventListener('wheel', onWheel, { capture: true });
container?.removeEventListener('pointerdown', onPointerDown, { capture: true });
container?.removeEventListener('pointermove', onPointerMove, { capture: true });
container?.removeEventListener('pointerup', stopPan, { capture: true });
container?.removeEventListener('pointercancel', stopPan, { capture: true });
ro.disconnect();
if (fibPrimitiveRef.current) {
candleSeries.detachPrimitive(fibPrimitiveRef.current);
@@ -251,9 +448,51 @@ export default function TradingChart({
s.bbMid?.applyOptions({ visible: showIndicators });
}, [candleData, volumeData, oracleData, smaData, emaData, bbUpper, bbLower, bbMid, showIndicators]);
useEffect(() => {
const s = seriesRef.current;
if (!s.candles) return;
s.candles.applyOptions({ priceFormat });
s.oracle?.applyOptions({ priceFormat });
s.sma20?.applyOptions({ priceFormat });
s.ema20?.applyOptions({ priceFormat });
s.bbUpper?.applyOptions({ priceFormat });
s.bbLower?.applyOptions({ priceFormat });
s.bbMid?.applyOptions({ priceFormat });
}, [priceFormat]);
useEffect(() => {
fibPrimitiveRef.current?.setFib(fib ?? null);
}, [fib]);
useEffect(() => {
fibPrimitiveRef.current?.setSelected(Boolean(fibSelected));
}, [fibSelected]);
useEffect(() => {
const candlesSeries = seriesRef.current.candles;
if (!candlesSeries) return;
const ps = candlesSeries.priceScale();
const prev = prevPriceAutoScaleRef.current;
prevPriceAutoScaleRef.current = priceAutoScale;
if (priceAutoScale) {
ps.setAutoScale(true);
return;
}
ps.setAutoScale(false);
if (!prev) return;
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
const top = candlesSeries.coordinateToPrice(0);
const bottom = candlesSeries.coordinateToPrice(rect.height);
if (top == null || bottom == null) return;
const from = Math.min(top, bottom);
const to = Math.max(top, bottom);
if (!(to > from)) return;
ps.setVisibleRange({ from, to });
}, [priceAutoScale]);
return <div className="tradingChart" ref={containerRef} />;
}