viainti-chart 1.0.6 → 1.1.1

package/dist/index.mjs

@@ -1,55 +1,642 @@
-import React, { useRef, useEffect, useSyncExternalStore, useState, memo, useCallback, useMemo } from 'react';
+import React, { useRef, useState, useEffect, useMemo, useCallback, useSyncExternalStore, memo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
-const Chart = ({ data, width = 800, height = 400 }) => {
-    const canvasRef = useRef(null);
+const PRICE_SCALE_WIDTH = 72;
+const LEFT_TOOLBAR_WIDTH = 0;
+const PADDING_LEFT = 12;
+const PADDING_RIGHT = 12;
+const PADDING_TOP = 12;
+const PADDING_BOTTOM = 12;
+const X_AXIS_HEIGHT = 42;
+const VOLUME_RATIO = 0.28;
+const MIN_VOLUME_HEIGHT = 120;
+const MAX_VOLUME_HEIGHT = 260;
+const MIN_PRICE_HEIGHT = 200;
+const MIN_BAR_SPACING$1 = 6;
+const MAX_BAR_SPACING$1 = 18;
+const MIN_VISIBLE_BARS = 20;
+const MAX_VISIBLE_BARS = 800;
+const CROSSHAIR_COLOR = 'rgba(255,255,255,0.35)';
+const GRID_MAJOR = 'rgba(255,255,255,0.06)';
+const GRID_MINOR = 'rgba(255,255,255,0.03)';
+const BULL_COLOR = '#2ECC71';
+const BEAR_COLOR = '#E74C3C';
+const clamp$1 = (value, min, max) => Math.max(min, Math.min(max, value));
+const alignStroke$1 = (value) => Math.round(value) + 0.5;
+const niceStep = (range, targetTicks) => {
+    if (range <= 0 || !Number.isFinite(range))
+        return 1;
+    const rawStep = range / Math.max(targetTicks, 1);
+    const magnitude = 10 ** Math.floor(Math.log10(rawStep));
+    const normalized = rawStep / magnitude;
+    let niceNormalized;
+    if (normalized <= 1)
+        niceNormalized = 1;
+    else if (normalized <= 2)
+        niceNormalized = 2;
+    else if (normalized <= 5)
+        niceNormalized = 5;
+    else
+        niceNormalized = 10;
+    return niceNormalized * magnitude;
+};
+const formatPrice = (value, step) => {
+    if (!Number.isFinite(value))
+        return '—';
+    const decimals = clamp$1(-Math.floor(Math.log10(step || 1)), 0, value < 1 ? 6 : 4);
+    return value.toFixed(decimals);
+};
+const formatVolume = (value) => {
+    if (!Number.isFinite(value))
+        return '—';
+    if (value >= 1_000_000)
+        return `${(value / 1_000_000).toFixed(2)}M`;
+    if (value >= 1_000)
+        return `${(value / 1_000).toFixed(2)}K`;
+    return value.toFixed(2);
+};
+const formatTimeLabel = (timestamp) => {
+    const date = new Date(timestamp);
+    if (Number.isNaN(date.getTime()))
+        return `${timestamp}`;
+    return date.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
+};
+const getCandleTime = (candle, fallback) => {
+    if (!candle)
+        return fallback;
+    if (typeof candle.time === 'number')
+        return candle.time;
+    if (typeof candle.timestamp === 'number')
+        return candle.timestamp;
+    return fallback;
+};
+const computePlotArea = (containerWidth, containerHeight, showVolume) => {
+    const leftGutter = LEFT_TOOLBAR_WIDTH + PADDING_LEFT;
+    const rightGutter = PRICE_SCALE_WIDTH + PADDING_RIGHT;
+    const plotX0 = leftGutter;
+    const plotX1 = Math.max(plotX0 + 1, containerWidth - rightGutter);
+    const plotWidth = plotX1 - plotX0;
+    const availableHeight = Math.max(120, containerHeight - PADDING_TOP - PADDING_BOTTOM - X_AXIS_HEIGHT);
+    const targetVolume = showVolume ? clamp$1(Math.round(containerHeight * VOLUME_RATIO), MIN_VOLUME_HEIGHT, MAX_VOLUME_HEIGHT) : 0;
+    const volumePaneHeight = showVolume ? Math.min(targetVolume, Math.max(0, availableHeight - MIN_PRICE_HEIGHT)) : 0;
+    const pricePaneHeight = availableHeight - volumePaneHeight;
+    const pricePaneY0 = PADDING_TOP;
+    const volumePaneY0 = pricePaneY0 + pricePaneHeight + (showVolume ? 12 : 0);
+    const xAxisY0 = volumePaneY0 + volumePaneHeight;
+    return { plotX0, plotX1, plotWidth, pricePaneY0, pricePaneHeight, volumePaneY0, volumePaneHeight, xAxisY0 };
+};
+const computeViewport = (data, state) => {
+    if (!data.length) {
+        return { startIndex: 0, endIndex: 0, minTimeVisible: 0, maxTimeVisible: 0 };
+    }
+    const rawEnd = (data.length - 1) + Math.round(state.panOffsetBars);
+    const maxEnd = Math.max(data.length - 1, 0);
+    const minEnd = Math.min(Math.max(state.visibleBars - 1, 0), maxEnd);
+    const endIndex = clamp$1(rawEnd, minEnd, maxEnd);
+    const startIndex = Math.max(0, endIndex - state.visibleBars + 1);
+    const minTimeVisible = getCandleTime(data[startIndex], startIndex);
+    const maxTimeVisible = getCandleTime(data[endIndex], endIndex);
+    console.log('[Chart::Viewport]', { startIndex, endIndex, minTimeVisible, maxTimeVisible });
+    return { startIndex, endIndex, minTimeVisible, maxTimeVisible };
+};
+const computeXMapping = (plotArea, viewport, state) => {
+    const visibleCount = Math.max(1, viewport.endIndex - viewport.startIndex + 1);
+    const firstTarget = plotArea.plotX0 + state.leftPaddingPx;
+    const lastTarget = plotArea.plotX1 - state.rightPaddingPx;
+    const innerSpan = Math.max(1, lastTarget - firstTarget);
+    const gaps = Math.max(1, visibleCount - 1);
+    const rawSpacing = visibleCount > 1 ? innerSpan / gaps : innerSpan;
+    const barSpacing = clamp$1(rawSpacing, MIN_BAR_SPACING$1, MAX_BAR_SPACING$1);
+    const bodyWidth = clamp$1(barSpacing * 0.7, 3, barSpacing - 2);
+    const wickWidth = Math.max(1, Math.floor(bodyWidth * 0.25));
+    const offsetX = visibleCount > 1
+        ? (lastTarget - (visibleCount - 1) * barSpacing) - plotArea.plotX0
+        : (lastTarget - plotArea.plotX0);
+    const candleCenterX = (index) => plotArea.plotX0 + offsetX + (index - viewport.startIndex) * barSpacing;
+    const candleLeftX = (index) => candleCenterX(index) - bodyWidth / 2;
+    const gapLeft = candleCenterX(viewport.startIndex) - (plotArea.plotX0 + state.leftPaddingPx);
+    const gapRight = (plotArea.plotX1 - state.rightPaddingPx) - candleCenterX(viewport.endIndex);
+    if (Math.abs(gapLeft) > 2 || Math.abs(gapRight) > 2) {
+        console.warn('[Chart::GapMismatch]', { startIndex: viewport.startIndex, endIndex: viewport.endIndex, gapLeft, gapRight, visibleCount, barSpacing });
+    }
+    else {
+        console.log('[Chart::AlignmentOK]', { startIndex: viewport.startIndex, endIndex: viewport.endIndex, gapLeft, gapRight, visibleCount, barSpacing });
+    }
+    return { barSpacing, bodyWidth, wickWidth, offsetX, candleCenterX, candleLeftX };
+};
+const computeYMapping = (data, viewport, plotArea, state) => {
+    const slice = data.slice(Math.max(0, viewport.startIndex), Math.max(0, viewport.endIndex) + 1);
+    if (!slice.length) {
+        return {
+            yMin: 0,
+            yMax: 1,
+            priceToY: () => plotArea.pricePaneY0,
+            yTicks: []
+        };
+    }
+    let minPrice = Number.POSITIVE_INFINITY;
+    let maxPrice = Number.NEGATIVE_INFINITY;
+    slice.forEach(candle => {
+        minPrice = Math.min(minPrice, candle.low);
+        maxPrice = Math.max(maxPrice, candle.high);
+    });
+    if (!Number.isFinite(minPrice) || !Number.isFinite(maxPrice)) {
+        minPrice = 0;
+        maxPrice = 1;
+    }
+    const pad = (maxPrice - minPrice || Math.abs(maxPrice) * 0.01 || 1) * state.yPaddingPct;
+    const yMin = minPrice - pad;
+    const yMax = maxPrice + pad;
+    const priceToY = (value) => {
+        const clampedValue = Number.isFinite(value) ? value : 0;
+        return plotArea.pricePaneY0 + ((yMax - clampedValue) / Math.max(yMax - yMin, 1e-6)) * plotArea.pricePaneHeight;
+    };
+    const step = niceStep(yMax - yMin, 8);
+    const startTick = Math.ceil(yMin / step) * step;
+    const yTicks = [];
+    for (let value = startTick; value <= yMax; value += step) {
+        const y = priceToY(value);
+        yTicks.push({ value, y, label: formatPrice(value, step) });
+    }
+    return { yMin, yMax, priceToY, yTicks };
+};
+const computeTimeTicks = (data, viewport, xMapping, plotArea) => {
+    if (!data.length)
+        return [];
+    const ticks = [];
+    const targetSpacingPx = 120;
+    const candlesPerTick = Math.max(1, Math.round(targetSpacingPx / xMapping.barSpacing));
+    for (let idx = viewport.startIndex; idx <= viewport.endIndex; idx += candlesPerTick) {
+        const timestamp = getCandleTime(data[idx], idx);
+        if (timestamp < viewport.minTimeVisible || timestamp > viewport.maxTimeVisible)
+            continue;
+        const x = xMapping.candleCenterX(idx);
+        if (x < plotArea.plotX0 || x > plotArea.plotX1)
+            continue;
+        ticks.push({ index: idx, x, label: formatTimeLabel(timestamp) });
+    }
+    if (ticks.length === 0 && viewport.endIndex >= viewport.startIndex) {
+        const timestamp = getCandleTime(data[viewport.endIndex], viewport.endIndex);
+        if (timestamp >= viewport.minTimeVisible && timestamp <= viewport.maxTimeVisible) {
+            const x = xMapping.candleCenterX(viewport.endIndex);
+            ticks.push({ index: viewport.endIndex, x, label: formatTimeLabel(timestamp) });
+        }
+    }
+    const outOfRange = ticks.filter(tick => {
+        const t = getCandleTime(data[tick.index], tick.index);
+        return t < viewport.minTimeVisible || t > viewport.maxTimeVisible;
+    });
+    if (outOfRange.length) {
+        console.warn('[Chart::TimeTickTrim]', { outOfRange, minTimeVisible: viewport.minTimeVisible, maxTimeVisible: viewport.maxTimeVisible });
+    }
+    console.log('[Chart::TimeTicks]', {
+        count: ticks.length,
+        minTimeVisible: viewport.minTimeVisible,
+        maxTimeVisible: viewport.maxTimeVisible,
+        tickIndexes: ticks.map(t => t.index),
+        labels: ticks.map(t => t.label)
+    });
+    return ticks;
+};
+const drawRoundedRect$1 = (ctx, x, y, width, height, radius) => {
+    const r = Math.min(radius, width / 2, height / 2);
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+    ctx.lineTo(x + r, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+};
+const Chart = ({ data, width = 900, height = 520, visibleBars: defaultVisibleBars = 60 }) => {
+    const priceCanvasRef = useRef(null);
+    const overlayCanvasRef = useRef(null);
+    const chartAreaRef = useRef(null);
+    const [showMenu, setShowMenu] = useState(false);
+    const [chartState, setChartState] = useState(() => ({
+        visibleBars: Math.max(defaultVisibleBars, MIN_VISIBLE_BARS),
+        panOffsetBars: 0,
+        locked: false,
+        crosshairEnabled: true,
+        crosshairIndex: null,
+        crosshairPrice: null,
+        autoScaleY: true,
+        yPaddingPct: 0.08,
+        showGrid: true,
+        showVolume: true,
+        rightPaddingPx: 60,
+        leftPaddingPx: 0
+    }));
     useEffect(() => {
-        const canvas = canvasRef.current;
+        setChartState(prev => {
+            const clamped = clamp$1(Math.round(prev.visibleBars), MIN_VISIBLE_BARS, Math.min(MAX_VISIBLE_BARS, Math.max(data.length, MIN_VISIBLE_BARS)));
+            const minPan = -Math.max(data.length - clamped, 0);
+            const panOffsetBars = clamp$1(prev.panOffsetBars, minPan, 0);
+            if (clamped === prev.visibleBars && panOffsetBars === prev.panOffsetBars)
+                return prev;
+            return { ...prev, visibleBars: clamped, panOffsetBars };
+        });
+    }, [data.length]);
+    const plotArea = useMemo(() => computePlotArea(width, height, chartState.showVolume), [chartState.showVolume, height, width]);
+    const viewport = useMemo(() => computeViewport(data, chartState), [chartState, data]);
+    const xMapping = useMemo(() => computeXMapping(plotArea, viewport, chartState), [chartState, plotArea, viewport]);
+    const yMapping = useMemo(() => computeYMapping(data, viewport, plotArea, chartState), [chartState, data, plotArea, viewport]);
+    const timeTicks = useMemo(() => computeTimeTicks(data, viewport, xMapping, plotArea), [data, plotArea, viewport, xMapping]);
+    useEffect(() => {
+        const resizeCanvas = (canvas) => {
+            if (!canvas)
+                return;
+            const dpr = window.devicePixelRatio || 1;
+            canvas.width = width * dpr;
+            canvas.height = height * dpr;
+            canvas.style.width = `${width}px`;
+            canvas.style.height = `${height}px`;
+        };
+        resizeCanvas(priceCanvasRef.current);
+        resizeCanvas(overlayCanvasRef.current);
+    }, [height, width]);
+    const priceSlice = useMemo(() => data.slice(Math.max(0, viewport.startIndex), Math.max(0, viewport.endIndex) + 1), [data, viewport.endIndex, viewport.startIndex]);
+    const drawBaseLayer = useCallback(() => {
+        const canvas = priceCanvasRef.current;
         if (!canvas)
             return;
         const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
-        // Clear canvas
+        const dpr = window.devicePixelRatio || 1;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
-        if (data.length === 0)
+        ctx.fillStyle = '#05070d';
+        ctx.fillRect(0, 0, width, height);
+        if (!priceSlice.length)
             return;
-        // Find min and max values
-        const highs = data.map((d) => d.high);
-        const lows = data.map((d) => d.low);
-        const minPrice = Math.min(...lows);
-        const maxPrice = Math.max(...highs);
-        const priceRange = maxPrice - minPrice;
-        const candleWidth = width / data.length;
-        data.forEach((candle, index) => {
-            const x = index * candleWidth;
-            const yHigh = ((maxPrice - candle.high) / priceRange) * height;
-            const yLow = ((maxPrice - candle.low) / priceRange) * height;
-            const yOpen = ((maxPrice - candle.open) / priceRange) * height;
-            const yClose = ((maxPrice - candle.close) / priceRange) * height;
-            // Draw high-low line
-            ctx.strokeStyle = 'black';
-            ctx.beginPath();
-            ctx.moveTo(x + candleWidth / 2, yHigh);
-            ctx.lineTo(x + candleWidth / 2, yLow);
-            ctx.stroke();
-            // Draw open-close body
-            const bodyHeight = Math.abs(yClose - yOpen);
-            const bodyY = Math.min(yOpen, yClose);
-            const isGreen = candle.close > candle.open;
-            ctx.fillStyle = isGreen ? 'green' : 'red';
-            ctx.fillRect(x + candleWidth * 0.1, bodyY, candleWidth * 0.8, bodyHeight);
-            // Draw open/close wicks if body is small
-            if (bodyHeight < 1) {
-                ctx.strokeStyle = isGreen ? 'green' : 'red';
+        // Price pane clip
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(plotArea.plotX0, plotArea.pricePaneY0, plotArea.plotWidth, plotArea.pricePaneHeight);
+        ctx.clip();
+        if (chartState.showGrid) {
+            ctx.strokeStyle = GRID_MAJOR;
+            ctx.lineWidth = 1;
+            ctx.setLineDash([]);
+            yMapping.yTicks.forEach(tick => {
+                ctx.beginPath();
+                ctx.moveTo(plotArea.plotX0, alignStroke$1(tick.y));
+                ctx.lineTo(plotArea.plotX1, alignStroke$1(tick.y));
+                ctx.stroke();
+            });
+            timeTicks.forEach(tick => {
+                ctx.beginPath();
+                ctx.moveTo(alignStroke$1(tick.x), plotArea.pricePaneY0);
+                ctx.lineTo(alignStroke$1(tick.x), plotArea.pricePaneY0 + plotArea.pricePaneHeight);
+                ctx.stroke();
+            });
+            ctx.strokeStyle = GRID_MINOR;
+            ctx.setLineDash([2, 4]);
+            for (let i = 0; i < yMapping.yTicks.length - 1; i++) {
+                const current = yMapping.yTicks[i];
+                const next = yMapping.yTicks[i + 1];
+                if (!current || !next)
+                    continue;
+                const midValue = (current.value + next.value) / 2;
+                const y = alignStroke$1(yMapping.priceToY(midValue));
                 ctx.beginPath();
-                ctx.moveTo(x + candleWidth / 2, yOpen);
-                ctx.lineTo(x + candleWidth / 2, yClose);
+                ctx.moveTo(plotArea.plotX0, y);
+                ctx.lineTo(plotArea.plotX1, y);
                 ctx.stroke();
             }
+            for (let i = 0; i < timeTicks.length - 1; i++) {
+                const current = timeTicks[i];
+                const next = timeTicks[i + 1];
+                if (!current || !next)
+                    continue;
+                const midX = (current.x + next.x) / 2;
+                ctx.beginPath();
+                ctx.moveTo(alignStroke$1(midX), plotArea.pricePaneY0);
+                ctx.lineTo(alignStroke$1(midX), plotArea.pricePaneY0 + plotArea.pricePaneHeight);
+                ctx.stroke();
+            }
+            ctx.setLineDash([]);
+        }
+        const highlightIndex = chartState.crosshairIndex;
+        if (highlightIndex != null && highlightIndex >= viewport.startIndex && highlightIndex <= viewport.endIndex) {
+            const x = xMapping.candleLeftX(highlightIndex);
+            ctx.fillStyle = 'rgba(255,255,255,0.05)';
+            ctx.fillRect(x, plotArea.pricePaneY0, xMapping.bodyWidth, plotArea.pricePaneHeight);
+        }
+        priceSlice.forEach((candle, offset) => {
+            const index = viewport.startIndex + offset;
+            const xCenter = xMapping.candleCenterX(index);
+            const left = xCenter - xMapping.bodyWidth / 2;
+            const yOpen = yMapping.priceToY(candle.open);
+            const yClose = yMapping.priceToY(candle.close);
+            const yHigh = yMapping.priceToY(candle.high);
+            const yLow = yMapping.priceToY(candle.low);
+            const bodyTop = Math.min(yOpen, yClose);
+            const bodyHeight = Math.abs(yClose - yOpen) || 1;
+            const isBull = (candle.close ?? 0) >= (candle.open ?? 0);
+            ctx.strokeStyle = isBull ? BULL_COLOR : BEAR_COLOR;
+            ctx.lineWidth = xMapping.wickWidth;
+            ctx.beginPath();
+            ctx.moveTo(alignStroke$1(xCenter), yHigh);
+            ctx.lineTo(alignStroke$1(xCenter), yLow);
+            ctx.stroke();
+            ctx.fillStyle = isBull ? BULL_COLOR : BEAR_COLOR;
+            drawRoundedRect$1(ctx, left, bodyTop, xMapping.bodyWidth, bodyHeight, 1.5);
+            ctx.fill();
+        });
+        const lastCandle = data[viewport.endIndex] ?? data[data.length - 1];
+        if (lastCandle) {
+            const lastPrice = lastCandle.close ?? lastCandle.open ?? lastCandle.high ?? 0;
+            const prevClose = data[viewport.endIndex - 1]?.close ?? lastPrice;
+            const delta = lastPrice - prevClose;
+            const deltaPct = prevClose ? (delta / prevClose) * 100 : 0;
+            const y = yMapping.priceToY(lastPrice);
+            ctx.strokeStyle = 'rgba(255,255,255,0.35)';
+            ctx.setLineDash([6, 4]);
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(plotArea.plotX0, y);
+            ctx.lineTo(plotArea.plotX1, y);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.fillStyle = delta >= 0 ? '#16a34a' : '#dc2626';
+            const badgeX = plotArea.plotX1 + 4;
+            const badgeY = clamp$1(y - 12, plotArea.pricePaneY0 + 4, plotArea.pricePaneY0 + plotArea.pricePaneHeight - 24);
+            ctx.fillRect(badgeX, badgeY, PRICE_SCALE_WIDTH - 8, 24);
+            ctx.fillStyle = '#05070d';
+            ctx.font = '12px Inter, sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(lastPrice.toFixed(2), badgeX + (PRICE_SCALE_WIDTH - 8) / 2, badgeY + 10);
+            ctx.textAlign = 'left';
+            ctx.fillStyle = '#f1f5f9';
+            ctx.fillText(`${delta >= 0 ? '+' : ''}${delta.toFixed(2)} (${deltaPct >= 0 ? '+' : ''}${deltaPct.toFixed(2)}%)`, badgeX, plotArea.pricePaneY0 - 6);
+        }
+        ctx.restore();
+        ctx.fillStyle = '#94a3b8';
+        ctx.font = '11px Inter, sans-serif';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        yMapping.yTicks.forEach(tick => {
+            ctx.fillText(tick.label, plotArea.plotX0 + 4, tick.y);
+        });
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'bottom';
+        timeTicks.forEach((tick, idx) => {
+            const prev = timeTicks[idx - 1];
+            if (prev && Math.abs(tick.x - prev.x) < 80)
+                return;
+            const x = clamp$1(tick.x, plotArea.plotX0 + 20, plotArea.plotX1 - 20);
+            ctx.fillText(tick.label, x, plotArea.pricePaneY0 + plotArea.pricePaneHeight + 18);
+        });
+        if (chartState.showVolume && plotArea.volumePaneHeight > 0) {
+            ctx.strokeStyle = 'rgba(255,255,255,0.08)';
+            ctx.beginPath();
+            ctx.moveTo(plotArea.plotX0, plotArea.volumePaneY0 - 6);
+            ctx.lineTo(plotArea.plotX1, plotArea.volumePaneY0 - 6);
+            ctx.stroke();
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(plotArea.plotX0, plotArea.volumePaneY0, plotArea.plotWidth, plotArea.volumePaneHeight);
+            ctx.clip();
+            const maxVolume = Math.max(...priceSlice.map(c => c.volume ?? 0), 1);
+            priceSlice.forEach((candle, offset) => {
+                const index = viewport.startIndex + offset;
+                const xCenter = xMapping.candleCenterX(index);
+                const barWidth = Math.max(2, xMapping.bodyWidth * 0.6);
+                const volume = candle.volume ?? 0;
+                const heightRatio = volume / maxVolume;
+                const barHeight = heightRatio * (plotArea.volumePaneHeight - 12);
+                const y = plotArea.volumePaneY0 + plotArea.volumePaneHeight - barHeight;
+                ctx.fillStyle = (candle.close ?? 0) >= (candle.open ?? 0) ? 'rgba(46,204,113,0.35)' : 'rgba(231,76,60,0.35)';
+                ctx.fillRect(xCenter - barWidth / 2, y, barWidth, Math.max(barHeight, 2));
+                if (highlightIndex === index) {
+                    ctx.fillStyle = 'rgba(255,255,255,0.12)';
+                    ctx.fillRect(xCenter - barWidth / 2, y, barWidth, Math.max(barHeight, 2));
+                }
+            });
+            ctx.restore();
+        }
+    }, [chartState.crosshairIndex, chartState.showGrid, chartState.showVolume, data, plotArea, priceSlice, timeTicks, viewport.endIndex, viewport.startIndex, width, height, xMapping, yMapping]);
+    const drawOverlayLayer = useCallback(() => {
+        const canvas = overlayCanvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const dpr = window.devicePixelRatio || 1;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, width, height);
+        if (!chartState.crosshairEnabled || chartState.crosshairIndex == null || chartState.crosshairPrice == null) {
+            return;
+        }
+        const index = chartState.crosshairIndex;
+        const x = xMapping.candleCenterX(index);
+        const priceY = yMapping.priceToY(chartState.crosshairPrice);
+        ctx.strokeStyle = CROSSHAIR_COLOR;
+        ctx.lineWidth = 1;
+        ctx.setLineDash([4, 4]);
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.moveTo(plotArea.plotX0, priceY);
+        ctx.lineTo(plotArea.plotX1 + PRICE_SCALE_WIDTH, priceY);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        // Price badge
+        ctx.fillStyle = '#111927';
+        ctx.fillRect(plotArea.plotX1 + 2, priceY - 10, PRICE_SCALE_WIDTH - 4, 20);
+        ctx.fillStyle = '#e2e8f0';
+        ctx.font = '11px Inter, sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(chartState.crosshairPrice.toFixed(4).replace(/0+$/, '').replace(/\.$/, ''), plotArea.plotX1 + (PRICE_SCALE_WIDTH - 4) / 2, priceY);
+        // Time badge
+        const tick = formatTimeLabel(getCandleTime(data[index], index));
+        ctx.fillStyle = '#111927';
+        ctx.fillRect(x - 48, plotArea.pricePaneY0 + plotArea.pricePaneHeight + 4, 96, 18);
+        ctx.fillStyle = '#e2e8f0';
+        ctx.fillText(tick, x, plotArea.pricePaneY0 + plotArea.pricePaneHeight + 13);
+        const candle = data[index];
+        if (!candle)
+            return;
+        const tooltipWidth = 170;
+        const tooltipHeight = 90;
+        const tooltipX = clamp$1(x - tooltipWidth - 16, plotArea.plotX0 + 8, plotArea.plotX1 - tooltipWidth - 8);
+        const tooltipY = plotArea.pricePaneY0 + 12;
+        ctx.fillStyle = 'rgba(15,15,20,0.9)';
+        drawRoundedRect$1(ctx, tooltipX, tooltipY, tooltipWidth, tooltipHeight, 8);
+        ctx.fill();
+        ctx.strokeStyle = 'rgba(255,255,255,0.08)';
+        ctx.stroke();
+        ctx.fillStyle = '#f8fafc';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.font = '11px Inter, sans-serif';
+        const lines = [
+            `O ${formatPrice(candle.open, 0.01)}`,
+            `H ${formatPrice(candle.high, 0.01)}`,
+            `L ${formatPrice(candle.low, 0.01)}`,
+            `C ${formatPrice(candle.close, 0.01)}`,
+            `V ${formatVolume(candle.volume ?? 0)}`
+        ];
+        lines.forEach((line, idx) => {
+            ctx.fillText(line, tooltipX + 10, tooltipY + 16 + idx * 16);
+        });
+    }, [chartState.crosshairEnabled, chartState.crosshairIndex, chartState.crosshairPrice, data, height, plotArea, width, xMapping, yMapping]);
+    useEffect(() => {
+        drawBaseLayer();
+    }, [drawBaseLayer]);
+    useEffect(() => {
+        drawOverlayLayer();
+    }, [drawOverlayLayer]);
+    const setVisibleBars = useCallback((factor) => {
+        setChartState(prev => {
+            if (prev.locked)
+                return prev;
+            const minBars = MIN_VISIBLE_BARS;
+            const maxBars = Math.max(minBars, Math.min(MAX_VISIBLE_BARS, data.length || MIN_VISIBLE_BARS));
+            const nextVisible = clamp$1(Math.round(prev.visibleBars * factor), minBars, maxBars);
+            if (nextVisible === prev.visibleBars)
+                return prev;
+            const minPan = -Math.max(data.length - nextVisible, 0);
+            const nextPanOffset = clamp$1(prev.panOffsetBars, minPan, 0);
+            return { ...prev, visibleBars: nextVisible, panOffsetBars: nextPanOffset };
         });
-    }, [data, width, height]);
-    return React.createElement("canvas", { ref: canvasRef, width: width, height: height });
+    }, [data.length]);
+    const updateCrosshair = useCallback((clientX, clientY) => {
+        if (chartState.locked || !chartState.crosshairEnabled || !data.length)
+            return;
+        const rect = chartAreaRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const localX = clientX - rect.left;
+        const clampedX = clamp$1(localX, plotArea.plotX0, plotArea.plotX1);
+        const ratio = (clampedX - (plotArea.plotX0 + xMapping.offsetX)) / (xMapping.barSpacing || 1);
+        const index = clamp$1(Math.round(ratio) + viewport.startIndex, viewport.startIndex, viewport.endIndex);
+        const localY = clientY - rect.top;
+        const clampedY = clamp$1(localY, plotArea.pricePaneY0, plotArea.pricePaneY0 + plotArea.pricePaneHeight);
+        const priceRange = yMapping.yMax - yMapping.yMin || 1;
+        const price = yMapping.yMax - ((clampedY - plotArea.pricePaneY0) / Math.max(plotArea.pricePaneHeight, 1)) * priceRange;
+        const safePrice = Number.isFinite(price) ? price : yMapping.yMin;
+        setChartState(prev => ({ ...prev, crosshairIndex: index, crosshairPrice: safePrice }));
+    }, [chartState.crosshairEnabled, chartState.locked, data.length, plotArea, viewport.endIndex, viewport.startIndex, xMapping, yMapping]);
+    const clampPan = useCallback((pan, visible) => {
+        const minPan = -Math.max(data.length - visible, 0);
+        return clamp$1(pan, minPan, 0);
+    }, [data.length]);
+    const handleWheel = useCallback((event) => {
+        if (chartState.locked)
+            return;
+        event.preventDefault();
+        const factor = event.deltaY < 0 ? 0.9 : 1.1;
+        setVisibleBars(factor);
+    }, [chartState.locked, setVisibleBars]);
+    const isDraggingRef = useRef(false);
+    const lastXRef = useRef(0);
+    const handlePointerDown = useCallback((event) => {
+        if (event.button !== 0)
+            return;
+        chartAreaRef.current?.setPointerCapture(event.pointerId);
+        isDraggingRef.current = true;
+        lastXRef.current = event.clientX;
+        updateCrosshair(event.clientX, event.clientY);
+    }, [updateCrosshair]);
+    const handlePointerMove = useCallback((event) => {
+        if (isDraggingRef.current && !chartState.locked) {
+            const deltaX = event.clientX - lastXRef.current;
+            lastXRef.current = event.clientX;
+            const deltaBars = -(deltaX / (xMapping.barSpacing || 1));
+            setChartState(prev => ({ ...prev, panOffsetBars: clampPan(prev.panOffsetBars + deltaBars, prev.visibleBars) }));
+            return;
+        }
+        updateCrosshair(event.clientX, event.clientY);
+    }, [chartState.locked, clampPan, updateCrosshair, xMapping.barSpacing]);
+    const handlePointerUp = useCallback((event) => {
+        chartAreaRef.current?.releasePointerCapture(event.pointerId);
+        isDraggingRef.current = false;
+    }, []);
+    const handlePointerLeave = useCallback(() => {
+        isDraggingRef.current = false;
+        setChartState(prev => {
+            if (!prev.crosshairEnabled)
+                return prev;
+            return { ...prev, crosshairIndex: null, crosshairPrice: null };
+        });
+    }, [setChartState]);
+    const handleButtonZoom = (direction) => {
+        setVisibleBars(direction === 'in' ? 0.9 : 1.1);
+    };
+    const handleReset = () => {
+        setChartState(prev => ({
+            ...prev,
+            visibleBars: Math.max(defaultVisibleBars, MIN_VISIBLE_BARS),
+            panOffsetBars: 0,
+            locked: false,
+            crosshairEnabled: true,
+            crosshairIndex: null,
+            crosshairPrice: null,
+            autoScaleY: true,
+            showGrid: true,
+            showVolume: true
+        }));
+    };
+    const handleSnapshot = () => {
+        const base = priceCanvasRef.current;
+        if (!base)
+            return;
+        const overlay = overlayCanvasRef.current;
+        const exportCanvas = document.createElement('canvas');
+        exportCanvas.width = base.width;
+        exportCanvas.height = base.height;
+        const ctx = exportCanvas.getContext('2d');
+        if (!ctx)
+            return;
+        ctx.drawImage(base, 0, 0);
+        if (overlay)
+            ctx.drawImage(overlay, 0, 0);
+        const link = document.createElement('a');
+        link.download = 'viainti-chart.png';
+        link.href = exportCanvas.toDataURL('image/png');
+        link.click();
+    };
+    return (React.createElement("div", { style: { width } },
+        React.createElement("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '12px' } },
+            React.createElement("button", { onClick: () => handleButtonZoom('in'), disabled: chartState.locked, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: chartState.locked ? '#1f2937' : '#0f172a', color: '#f8fafc' } }, "Zoom +"),
+            React.createElement("button", { onClick: () => handleButtonZoom('out'), disabled: chartState.locked, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: chartState.locked ? '#1f2937' : '#0f172a', color: '#f8fafc' } }, "Zoom -"),
+            React.createElement("button", { onClick: () => setChartState(prev => ({ ...prev, locked: !prev.locked })), style: { padding: '6px 12px', borderRadius: '999px', border: chartState.locked ? '1px solid #fbbf24' : '1px solid #475569', background: chartState.locked ? '#fbbf2411' : '#0f172a', color: '#f8fafc' } }, chartState.locked ? 'Unlock' : 'Lock'),
+            React.createElement("button", { onClick: () => setChartState(prev => ({ ...prev, crosshairEnabled: !prev.crosshairEnabled, crosshairIndex: prev.crosshairEnabled ? null : prev.crosshairIndex, crosshairPrice: prev.crosshairEnabled ? null : prev.crosshairPrice })), style: { padding: '6px 12px', borderRadius: '999px', border: chartState.crosshairEnabled ? '1px solid #22d3ee' : '1px solid #475569', background: chartState.crosshairEnabled ? '#22d3ee11' : '#0f172a', color: '#f8fafc' } }, chartState.crosshairEnabled ? 'Crosshair on' : 'Crosshair off'),
+            React.createElement("button", { onClick: handleReset, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: '#0f172a', color: '#f8fafc' } }, "Reset"),
+            React.createElement("button", { onClick: handleSnapshot, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: '#0f172a', color: '#f8fafc' } }, "Camera"),
+            React.createElement("button", { onClick: () => setShowMenu(prev => !prev), style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: showMenu ? '#22c55e11' : '#0f172a', color: '#f8fafc' } }, "Menu")),
+        showMenu && (React.createElement("div", { style: { marginBottom: '12px', padding: '12px', borderRadius: '16px', border: '1px solid #1f2937', background: '#0b1120', color: '#e2e8f0', display: 'flex', flexWrap: 'wrap', gap: '12px', fontSize: '12px' } },
+            React.createElement("label", { style: { display: 'flex', alignItems: 'center', gap: '6px' } },
+                React.createElement("input", { type: "checkbox", checked: chartState.showGrid, onChange: () => setChartState(prev => ({ ...prev, showGrid: !prev.showGrid })) }),
+                " Grid"),
+            React.createElement("label", { style: { display: 'flex', alignItems: 'center', gap: '6px' } },
+                React.createElement("input", { type: "checkbox", checked: chartState.showVolume, onChange: () => setChartState(prev => ({ ...prev, showVolume: !prev.showVolume })) }),
+                " Volumen"),
+            React.createElement("label", { style: { display: 'flex', alignItems: 'center', gap: '6px' } },
+                React.createElement("input", { type: "checkbox", checked: chartState.autoScaleY, onChange: () => setChartState(prev => ({ ...prev, autoScaleY: !prev.autoScaleY })) }),
+                " AutoScale Y"))),
+        React.createElement("div", { ref: chartAreaRef, style: { position: 'relative', width, height, borderRadius: '24px', border: '1px solid #1f2937', overflow: 'hidden', background: '#05070d', touchAction: 'none' }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onWheel: handleWheel },
+            React.createElement("canvas", { ref: priceCanvasRef, style: { position: 'absolute', inset: 0 } }),
+            React.createElement("canvas", { ref: overlayCanvasRef, style: { position: 'absolute', inset: 0, pointerEvents: 'none' } })),
+        React.createElement("p", { style: { marginTop: '10px', fontSize: '12px', color: '#94a3b8' } },
+            "Bars: ",
+            chartState.visibleBars,
+            " \u00B7 Pan offset: ",
+            chartState.panOffsetBars.toFixed(2),
+            " \u00B7 Viewport ",
+            viewport.startIndex,
+            " \u2192 ",
+            viewport.endIndex)));
 };
 
 var DefaultContext = {
@@ -2083,10 +2670,14 @@ const CUSTOM_THEME_FIELDS = [
 const MIN_CANDLE_PX = 4;
 const MAX_CANDLE_PX = 28;
 const BUFFER_FRACTION = 0.18;
-const LEFT_OFFSET_BARS = 2;
-const RIGHT_OFFSET_BARS = 18;
-const BAR_BODY_RATIO = 0.78;
 const GRID_DIVISIONS = 10;
+const RIGHT_PADDING_PX = 60;
+const RIGHT_PADDING_MIN = 40;
+const RIGHT_PADDING_MAX = 120;
+const LEFT_PADDING_PX = 0;
+const MIN_BAR_SPACING = 6;
+const MAX_BAR_SPACING = 16;
+const MIN_BODY_WIDTH = 3;
 const INERTIA_DURATION_MS = 900;
 const ZOOM_MIN = 0.2;
 const ZOOM_MAX = 6;
@@ -2112,19 +2703,19 @@ const determinePriceFormat = (reference) => {
         return { min: 2, max: 3 };
     return { min: 2, max: 2 };
 };
-const getEffectiveBarCount = (count) => Math.max(count + LEFT_OFFSET_BARS + RIGHT_OFFSET_BARS, 1);
-const getCandleStep = (width, count) => (width <= 0 ? 0 : width / getEffectiveBarCount(count));
-const getCandleCenter = (index, width, count) => {
-    const step = getCandleStep(width, count);
-    return (index + LEFT_OFFSET_BARS + 0.5) * step;
+const getPlotArea = ({ containerWidth, containerHeight, leftToolsWidth, priceScaleWidth, paddingLeft = 0, paddingRight = 0, paddingTop = 0, paddingBottom = 0 }) => {
+    const plotX0 = Math.max(0, leftToolsWidth + paddingLeft);
+    const plotX1 = Math.max(plotX0, containerWidth - priceScaleWidth - paddingRight);
+    const usableWidth = Math.max(1, plotX1 - plotX0);
+    const usableHeight = Math.max(1, containerHeight - paddingTop - paddingBottom);
+    return {
+        plotX0,
+        plotX1,
+        plotWidth: usableWidth,
+        plotHeight: usableHeight
+    };
 };
 const clampPixelToChart = (pixel, width) => Math.max(0, Math.min(width, pixel));
-const pixelToCandleIndex = (pixel, width, count) => {
-    const step = getCandleStep(width, count);
-    if (step === 0)
-        return 0;
-    return pixel / step - LEFT_OFFSET_BARS - 0.5;
-};
 const clampCandleIndex = (value, length) => {
     if (length <= 0)
         return 0;
@@ -2229,7 +2820,19 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
     const showCrosshairRef = useRef(false);
     const containerRef = useRef(null);
     const plotAreaRef = useRef(null);
+    const layoutRowRef = useRef(null);
+    const barGeometryRef = useRef({ barSpacing: MAX_BAR_SPACING, offsetX: 0 });
     const priceWindowRef = useRef({ min: 0, max: 1 });
+    const projectPixelToIndex = useCallback((pixelX) => {
+        const { barSpacing, offsetX } = barGeometryRef.current;
+        if (barSpacing <= 0)
+            return 0;
+        return (pixelX - offsetX) / barSpacing;
+    }, []);
+    const getLocalCenter = useCallback((index) => {
+        const { barSpacing, offsetX } = barGeometryRef.current;
+        return offsetX + index * barSpacing;
+    }, []);
     const [dimensions, setDimensions] = useState({ width: 800, height: 400, cssWidth: 800, cssHeight: 400 });
     const isDraggingRef = useRef(false);
     const lastMouseXRef = useRef(0);
@@ -2273,6 +2876,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
             default: return 25;
         }
     }, []);
+    const totalDataPoints = storeData.length;
     useEffect(() => {
         setData(data);
     }, [data, setData]);
@@ -2358,7 +2962,8 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         if (!chartWidth)
             return;
         const candles = getVisibleCandles();
-        const pxPerCandle = chartWidth / Math.max(getEffectiveBarCount(candles.length || 1), 1);
+        const spacing = barGeometryRef.current.barSpacing || (chartWidth / Math.max(candles.length || 1, 1));
+        const pxPerCandle = Math.max(spacing, 1e-3);
         if (!isFinite(pxPerCandle) || pxPerCandle === 0)
             return;
         const deltaOffset = deltaPx / Math.max(pxPerCandle, 1e-3);
@@ -2515,6 +3120,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
     const [noteDraft, setNoteDraft] = useState('');
     const [priceFormat, setPriceFormat] = useState({ min: 2, max: 4 });
     const [isMobile, setIsMobile] = useState(false);
+    const [layoutSize, setLayoutSize] = useState({ width: 0, height: 0 });
     useEffect(() => {
         if (!plotAreaRef.current)
             return;
@@ -2528,6 +3134,20 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         window.addEventListener('resize', checkMobile);
         return () => window.removeEventListener('resize', checkMobile);
     }, []);
+    useEffect(() => {
+        if (!layoutRowRef.current || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const { width, height } = entry.contentRect;
+            setLayoutSize(prev => (prev.width === width && prev.height === height ? prev : { width, height }));
+        });
+        observer.observe(layoutRowRef.current);
+        return () => observer.disconnect();
+    }, []);
     useEffect(() => {
         if (!visibleData.length)
             return;
@@ -2601,11 +3221,77 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         const referenceMagnitude = Math.min(Math.abs(minPrice), Math.abs(maxPrice)) || Math.max(Math.abs(minPrice), Math.abs(maxPrice));
         const suggestedFormat = determinePriceFormat(referenceMagnitude);
         setPriceFormat((prev) => (prev.min === suggestedFormat.min && prev.max === suggestedFormat.max ? prev : suggestedFormat));
-        const chartWidth = Math.max(1, cssWidth - priceScaleWidth);
-        const chartHeight = Math.max(1, cssHeight - timeScaleHeight - volumeHeight);
-        const candleStep = getCandleStep(chartWidth, candles.length);
-        const candleWidth = Math.max(1, candleStep * BAR_BODY_RATIO);
-        const centerX = (index) => getCandleCenter(index, chartWidth, candles.length);
+        const leftToolsWidth = showDrawingToolbar ? (isMobile ? 60 : 88) : 0;
+        const layoutRect = layoutRowRef.current?.getBoundingClientRect();
+        const fallbackWidth = leftToolsWidth + cssWidth;
+        const layoutWidth = layoutSize.width || layoutRect?.width || fallbackWidth;
+        const layoutHeight = layoutSize.height || layoutRect?.height || cssHeight;
+        const paddingLeft = 0;
+        const paddingRight = 0;
+        const effectiveContainerHeight = Math.max(0, layoutHeight - timeScaleHeight);
+        const plotArea = getPlotArea({
+            containerWidth: layoutWidth,
+            containerHeight: layoutHeight,
+            leftToolsWidth,
+            priceScaleWidth,
+            paddingLeft,
+            paddingRight
+        });
+        const chartWidth = Math.max(1, plotArea.plotWidth);
+        const chartHeight = Math.max(1, plotArea.plotHeight - volumeHeight);
+        const visibleBars = Math.max(candles.length, 1);
+        const leftPaddingPx = LEFT_PADDING_PX;
+        const rightPaddingPx = clamp(RIGHT_PADDING_PX, RIGHT_PADDING_MIN, RIGHT_PADDING_MAX);
+        const targetFirstLocal = leftPaddingPx;
+        const targetLastLocal = Math.max(targetFirstLocal, plotArea.plotWidth - rightPaddingPx);
+        const indexSpan = Math.max(visibleBars - 1, 1);
+        const availableSpan = Math.max(targetLastLocal - targetFirstLocal, MIN_BAR_SPACING);
+        const barSpacing = clamp(availableSpan / indexSpan, MIN_BAR_SPACING, MAX_BAR_SPACING);
+        const candleWidth = clamp(barSpacing * 0.7, MIN_BODY_WIDTH, Math.max(barSpacing - 2, MIN_BODY_WIDTH));
+        const wickWidth = Math.max(1, Math.floor(candleWidth * 0.2));
+        const windowMeta = visibleWindowRef.current;
+        const startIndex = windowMeta.start;
+        const endIndex = Math.max(windowMeta.end - 1, startIndex);
+        const spanBars = Math.max(0, endIndex - startIndex);
+        const rawOffset = targetLastLocal - spanBars * barSpacing;
+        const maxOffset = Math.max(0, plotArea.plotWidth - rightPaddingPx);
+        const offsetXLocal = clamp(rawOffset, 0, maxOffset);
+        const xForIndex = (absIndex) => plotArea.plotX0 + offsetXLocal + (absIndex - startIndex) * barSpacing;
+        const centerX = (index) => xForIndex(startIndex + index) - plotArea.plotX0;
+        const lastXAbsolute = candles.length ? xForIndex(endIndex) : plotArea.plotX0 + offsetXLocal;
+        const lastX = lastXAbsolute - plotArea.plotX0;
+        const gapLeft = offsetXLocal - leftPaddingPx;
+        const gapRight = targetLastLocal - lastX;
+        if (Math.abs(gapLeft) > 2 || Math.abs(gapRight) > 2) {
+            console.warn('[ChartLayout] gap mismatch', { gapLeft, gapRight, visibleBars, startIndex, endIndex });
+        }
+        const panOffset = panOffsetRef.current;
+        barGeometryRef.current = { barSpacing, offsetX: offsetXLocal };
+        console.log('[ChartLayout]', {
+            containerWidth: layoutWidth,
+            containerHeight: effectiveContainerHeight,
+            leftToolsWidth,
+            priceScaleWidth,
+            paddingLeft,
+            paddingRight,
+            plotX0: plotArea.plotX0,
+            plotX1: plotArea.plotX1,
+            plotWidth: plotArea.plotWidth,
+            plotHeight: plotArea.plotHeight,
+            dataLength: totalDataPoints,
+            visibleBars: candles.length,
+            barSpacing,
+            candleWidth,
+            wickWidth,
+            rightPaddingPx,
+            offsetIndex: panOffset,
+            offsetXPx: offsetXLocal,
+            startIndex,
+            endIndex,
+            lastX,
+            lastXAbsolute,
+            gapRight
+        });
         // Generate price labels
         const priceLabelsArray = [];
         for (let i = 0; i <= 10; i++) {
@@ -2642,7 +3328,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
             }
             const timeStep = Math.max(1, Math.floor(Math.max(candles.length, 1) / GRID_DIVISIONS));
             for (let i = 0; i <= candles.length; i += timeStep) {
-                const x = alignStroke((i + LEFT_OFFSET_BARS) * candleStep);
+                const x = alignStroke(offsetXLocal + i * barSpacing);
                 if (x < 0 || x > chartWidth)
                     continue;
                 gridCtx.beginPath();
@@ -2678,7 +3364,6 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                     else if (seriesType === 'step') {
                         const prev = candles[index - 1];
                         if (prev) {
-                            centerX(index - 1);
                             const prevY = ((maxPrice - prev.close) / priceRange) * chartHeight;
                             chartCtx.lineTo(x, prevY);
                             chartCtx.lineTo(x, yClose);
@@ -2738,7 +3423,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                         seriesType === 'high-low';
                     if (usesWick) {
                         chartCtx.strokeStyle = color;
-                        chartCtx.lineWidth = 1;
+                        chartCtx.lineWidth = wickWidth;
                         chartCtx.beginPath();
                         chartCtx.moveTo(strokeX, alignedYHigh);
                         chartCtx.lineTo(strokeX, alignedYLow);
@@ -2844,7 +3529,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
             });
             indicatorCtx.setLineDash([]); // Reset line dash
         }
-    }, [visibleData, cssWidth, cssHeight, colorScheme, calculatedIndicators, seriesType, getVisibleCandles]);
+    }, [visibleData, cssWidth, cssHeight, colorScheme, calculatedIndicators, seriesType, getVisibleCandles, showDrawingToolbar, isMobile, totalDataPoints, layoutSize]);
     const drawCrosshair = useCallback(() => {
         const overlayCtx = overlayRef.current?.getContext('2d');
         if (overlayCtx && showCrosshairRef.current) {
@@ -2881,13 +3566,13 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         }
         if (!isDraggingRef.current) {
             const { min, max } = priceWindowRef.current;
-            const rawIndex = pixelToCandleIndex(x, chartWidth, visibleData.length);
+            const rawIndex = projectPixelToIndex(x);
             const hoveredIndex = clampCandleIndex(rawIndex, visibleData.length);
             const hoveredCandle = visibleData[hoveredIndex];
             const snappedPrice = coordsRef.current.snapToPrice(y, chartHeight, min, max);
             const yPixel = coordsRef.current.priceToPixel(snappedPrice, chartHeight, min, max);
             const xPixel = magnetEnabled
-                ? getCandleCenter(hoveredIndex, chartWidth, visibleData.length)
+                ? getLocalCenter(hoveredIndex)
                 : clampPixelToChart(x, chartWidth);
             mousePosRef.current = { x: xPixel, y: yPixel };
             setCrosshairMeta({
@@ -2953,8 +3638,8 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         let snappedPrice = coordsRef.current.snapToPrice(y, chartHeight, bounds.minPrice, bounds.maxPrice, 0.5);
         let snappedY = y;
         if (magnetEnabled && targetData.length) {
-            const snappedIndex = clampCandleIndex(pixelToCandleIndex(x, chartWidth, dataLength), dataLength);
-            x = getCandleCenter(snappedIndex, chartWidth, dataLength);
+            const snappedIndex = clampCandleIndex(projectPixelToIndex(x), dataLength);
+            x = getLocalCenter(snappedIndex);
             snappedY = coordsRef.current.priceToPixel(snappedPrice, chartHeight, bounds.minPrice, bounds.maxPrice);
             y = snappedY;
         }
@@ -2962,7 +3647,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
             x = clampPixelToChart(x, chartWidth);
         }
         const price = coordsRef.current.pixelToPrice(snappedY, chartHeight, bounds.minPrice, bounds.maxPrice);
-        const hoveredIndex = clampCandleIndex(pixelToCandleIndex(x, chartWidth, dataLength), dataLength);
+        const hoveredIndex = clampCandleIndex(projectPixelToIndex(x), dataLength);
         const time = targetData[hoveredIndex]?.timestamp ?? hoveredIndex;
         return { x, y: snappedY, price, time };
     }, [visibleData, storeData, magnetEnabled, chartWidth, chartHeight, interactionsLocked]);
@@ -3175,7 +3860,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         }
         if (visibleData.length) {
             const { min, max } = priceWindowRef.current;
-            const snappedIndex = clampCandleIndex(pixelToCandleIndex(rawX, chartWidth, visibleData.length), visibleData.length);
+            const snappedIndex = clampCandleIndex(projectPixelToIndex(rawX), visibleData.length);
             setSelectedCandleIndex(snappedIndex);
             const price = coordsRef.current.pixelToPrice(rawY, chartHeight, min, max);
             setClickedPrice({ x: rawX, y: rawY, price });
@@ -3693,7 +4378,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                             fontSize: '13px',
                             fontWeight: 600
                         } }, "Save note"))))),
-        React.createElement("div", { style: {
+        React.createElement("div", { ref: layoutRowRef, style: {
                 flex: 1,
                 display: 'flex',
                 gap: isMobile ? '12px' : '16px',