dexbot 1.4.21 → 1.4.23

package/analysis/tradingview/tradingview_uplot_chart_generator.ts

@@ -1,13 +1,15 @@
+'use strict';
 
 import fs from 'node:fs';
 import { MARKET_ADAPTER } from '../../modules/constants.js';
-import { escapeHtml, serializeJsonForScript } from '../chart_utils.js';
+import { escapeHtml, serializeJsonForScript, UPLOT_SHARED_SCRIPT } from '../chart_utils.js';
+import { cursorCSS, uplotBgCSS } from '../chart_css.js';
+import { zoomResetScript } from '../chart_ui.js';
 import { normalizeCandle } from '../math_utils.js';
 import { PATHS } from '../../modules/paths.js';
 import { getStorage } from '../../modules/storage/index.js';
 const { readJSON } = getStorage();
 import { getErrorMessage } from '../../modules/utils/errors.js';
-'use strict';
 
 
 function inferBaseIntervalSeconds(candles: any[], fallback: any = 3600) {
@@ -393,10 +395,8 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         .legend-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #eef4fb; font-weight: 700; }
         .status { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; color: #8290a2; text-transform: uppercase; letter-spacing: 0.5px; }
         .pill { border: 1px solid rgba(255,255,255,0.06); border-radius: 999px; padding: 4px 8px; background: rgba(255,255,255,0.03); }
-        .uplot { background: #0b0f14; }
-        .u-cursor-x { border-left: 1px dashed rgba(255,255,255,0.3) !important; }
-        .u-cursor-y { border-top: 1px dashed rgba(255,255,255,0.3) !important; display: none; }
-        .is-hovered .u-cursor-y { display: block; }
+        ${uplotBgCSS('#0b0f14')}
+        ${cursorCSS()}
         @media (max-width: 980px) {
             #topbar { flex-direction: column; align-items: flex-start; }
             #toolbar { justify-content: flex-start; }
@@ -497,7 +497,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                     <span class="legend-item"><span class="legend-dot" style="background:#93c5fd"></span><span class="legend-label">VWMA</span> <span class="legend-value" id="legend-vwap">-</span></span>
                 </div>
             </div>
-            <div id="price-chart"></div>
+            <div id="price-chart" title="Wheel: zoom time (ulos = tyhjaa tilaa datan ymparilla) · Drag: siirra aika- ja hintanakymaa · Wheel/drag hinta-akselilla: zoomaa hintaa · Double-click hinta-akselia: autofit"></div>
             <div id="volume-chart"></div>
         </div>
     </div>
@@ -556,8 +556,12 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         let lastRenderedPriceScale = null;
         let charts = [];
         let chartEventsBound = false;
+        let manualYRange = null;
+        let lastCandleKey = null;
         let pendingRange = null;
         let pendingRangeRaf = 0;
+        let xMin = 0;
+        let xMax = 0;
         let smaWorker = null;
         let smaWorkerJob = null;
         let smaWorkerStartRaf = 0;
@@ -569,22 +573,122 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         const vwapCache = new Map();
         const seriesCache = new Map();
 
+        ${UPLOT_SHARED_SCRIPT}
+
+        // TradingView-exporter interaction overrides (PR #3 / #11 feature):
+        // redeclare after UPLOT_SHARED_SCRIPT so these hoisted declarations win
+        // for this page only, without mutating the shared stack used by other charts.
+        function clampXRange(min, max) {
+            if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min) return { min: xMin, max: xMax };
+            // Salli tyhjaa tilaa datan molemmin puolin (TradingView-tyyli):
+            // enintaan 75 % datan pituudesta reunapuskurina kummallekin puolelle.
+            const dataSpan = Math.max(1, xMax - xMin);
+            const maxPad = dataSpan * 0.75;
+            let lo = Math.max(xMin - maxPad, min);
+            let hi = Math.min(xMax + maxPad, max);
+            if (lo < xMin && hi <= lo) lo = xMin;
+            if (hi > xMax + maxPad) hi = xMax + maxPad;
+            if (hi <= lo) return { min: xMin, max: xMax };
+            return { min: lo, max: hi };
+        }
+        function bindWheelZoom(chart) {
+            chart.root.addEventListener('wheel', (e) => {
+                if (e.ctrlKey || e.metaKey || e.altKey) return;
+                e.preventDefault();
+                const rect = chart.root.getBoundingClientRect();
+                if (chart === priceChart && inYAxisZone(chart, e.clientX)) {
+                    const centerY = chart.posToVal(e.clientY - rect.top, 'y');
+                    zoomYAt(chart, centerY, e.deltaY < 0 ? 0.91 : 1.10);
+                    return;
+                }
+                e.stopPropagation();
+                const left = e.clientX - rect.left - (chart.bbox.left / (chart.pxRatio || 1));
+                const center = chart.posToVal(left, 'x');
+                const s = chart.scales.x || {};
+                const currMin = Number.isFinite(s.min) ? s.min : xMin;
+                const currMax = Number.isFinite(s.max) ? s.max : xMax;
+                const span = currMax - currMin;
+                if (!Number.isFinite(span) || span <= 0) return;
+                const factor = e.deltaY < 0 ? 0.85 : 1.15;
+                // Uloszoomaus datan reunojen yli: kokonaisnakyyma enintaan 2.5x datan pituus
+                const fullSpan = Math.max(1, xMax - xMin);
+                const nextSpan = Math.max(1, Math.min(fullSpan * 2.5, span * factor));
+                const ratio = (center - currMin) / span;
+                syncXRange(center - nextSpan * ratio, center - nextSpan * ratio + nextSpan);
+            }, { passive: false });
+        }
         function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
+        // Significant-digit price formatting (5 "active" digits), matching the
+        // DEXBot order-price style (formatCurrency) but with one extra digit.
+        // Very small values get SI micro-suffixes (m/µ/n/p/...); large values
+        // get comma grouping. Examples: 34.935 -> "34.935", 119.975 -> "119.98",
+        // 3014.9 -> "3,014.9", 0.00567 -> "5.67m".
         function fmtPrice(v) {
             if (v == null || !Number.isFinite(v)) return '-';
-            const abs = Math.abs(v);
-            if (abs >= 1000) return v.toFixed(2);
-            if (abs >= 100) return v.toFixed(3);
-            if (abs >= 1) return v.toFixed(4);
-            return v.toPrecision(6);
+            const num = Number(v);
+            if (num === 0) return '0';
+            const abs = Math.abs(num);
+            if (abs < 0.1) {
+                if (abs >= 0.001) return fmtPrice(num * 1000) + 'm';
+                if (abs >= 0.000001) return fmtPrice(num * 1e6) + 'µ';
+                if (abs >= 1e-9) return fmtPrice(num * 1e9) + 'n';
+                if (abs >= 1e-12) return fmtPrice(num * 1e12) + 'p';
+                if (abs >= 1e-15) return fmtPrice(num * 1e15) + 'f';
+                if (abs >= 1e-18) return fmtPrice(num * 1e18) + 'a';
+                return num.toFixed(6);
+            }
+            const digits = 4;
+            let intDigits = Math.floor(Math.log10(abs)) + 1;
+            if (abs < 1) intDigits = 1;
+            const formatted = intDigits >= digits ? String(Math.round(num)) : num.toFixed(digits - intDigits);
+            return intDigits >= 4 ? formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : formatted;
+        }
+        function fmtPriceAxis(vals) {
+            if (!Array.isArray(vals) || vals.length === 0) return [];
+            return vals.map((v) => (v == null || !Number.isFinite(v)) ? '' : fmtPrice(v));
+        }
+        function fmtPriceLabel(v) {
+            if (v == null || !Number.isFinite(v)) return '-';
+            return fmtPrice(v);
+        }
+        function logAxisSplits(self, axisIdx, scaleMin, scaleMax, foundIncr, foundSpace) {
+            if (!Number.isFinite(scaleMin) || !Number.isFinite(scaleMax) || scaleMin <= 0 || scaleMax <= 0) return [];
+            let h = 600;
+            if (self && self.bbox && Number.isFinite(self.bbox.height)) h = self.bbox.height / (self.pxRatio || 1);
+            else if (self && self.over && self.over.clientHeight) h = self.over.clientHeight;
+            const target = Math.max(8, Math.min(16, Math.floor(h / 30)));
+            const lmin = Math.log10(scaleMin);
+            const lmax = Math.log10(scaleMax);
+            const out = [];
+            for (let i = 0; i <= target; i++) {
+                out.push(Math.pow(10, lmin + (lmax - lmin) * (i / target)));
+            }
+            return out;
         }
+        // Significant-digit volume formatting (4 "active" digits) with K/M/B/T
+        // suffixes, matching the price-axis style. Examples: 1234567 -> "1235K",
+        // 1234567890 -> "1.235B".
         function fmtVolume(v) {
             if (v == null || !Number.isFinite(v)) return '-';
-            const abs = Math.abs(v);
-            if (abs >= 1e9) return (v / 1e9).toFixed(2) + 'B';
-            if (abs >= 1e6) return (v / 1e6).toFixed(2) + 'M';
-            if (abs >= 1e3) return (v / 1e3).toFixed(2) + 'K';
-            return v.toFixed(2);
+            const num = Number(v);
+            if (num === 0) return '0';
+            const abs = Math.abs(num);
+            const units = [[1e12, 'T'], [1e9, 'B'], [1e6, 'M'], [1e3, 'K']];
+            for (const [factor, suffix] of units) {
+                if (abs >= factor) {
+                    const scaled = num / factor;
+                    const a = Math.abs(scaled);
+                    let intDigits = Math.floor(Math.log10(a)) + 1;
+                    if (a < 1) intDigits = 1;
+                    const digits = 4;
+                    const formatted = intDigits >= digits ? String(Math.round(scaled)) : scaled.toFixed(digits - intDigits);
+                    return formatted + suffix;
+                }
+            }
+            let intDigits = Math.floor(Math.log10(abs)) + 1;
+            if (abs < 1) intDigits = 1;
+            const digits = 4;
+            return intDigits >= digits ? String(Math.round(num)) : num.toFixed(digits - intDigits);
         }
         function candleDirection(open, close) {
             if (close > open) return 'up';
@@ -1007,8 +1111,9 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 if (Number.isFinite(v)) { if (v < min) min = v; if (v > max) max = v; }
             }
             if (!Number.isFinite(min) || !Number.isFinite(max) || min <= 0 || max <= 0) return null;
-            if (min === max) return [min * 0.98, max * 1.02];
-            return [min * 0.97, max * 1.03];
+            if (min === max) return [min * 0.96, max * 1.04];
+            // ~7 % hengitystilaa yla- ja alapuolelle (TradingView-tyyli)
+            return [min * 0.93, max * 1.07];
         }
         function visibleVolumeRange(u) {
             if (!currentCandles.length) return null;
@@ -1264,6 +1369,10 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             currentSeriesCloseValues = currentSeriesState.closeValues;
             const aggregated = aggregateCandles(currentSeriesCandles, tf?.seconds || 3600);
             currentCandles = aggregated.candles;
+            if (currentCandles.length) {
+                xMin = currentCandles[0].time;
+                xMax = currentCandles[currentCandles.length - 1].time;
+            }
             currentDisplayCandles = deriveDisplayCandles(currentCandles);
             currentOpen = currentDisplayCandles.map((c) => c.open);
             currentHigh = currentCandles.map((c) => c.high);
@@ -1342,6 +1451,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                         distr: isLogScale ? 3 : 1,
                         log: isLogScale ? 10 : undefined,
                         range: (u, min, max) => {
+                            if (manualYRange) return [manualYRange.min, manualYRange.max];
                             const vis = visiblePriceRange(u);
                             if (vis) return vis;
                             if (isLogScale) {
@@ -1368,8 +1478,24 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 ],
                 axes: [
                     makeTimeAxis(false),
-                    { scale: 'y', size: 62, stroke: '#ffffff', grid: { stroke: '#1c2128' }, ticks: { stroke: '#30363d', width: 1 }, values: (u, vals) => vals.map((v) => (v == null ? '' : fmtPrice(v))) },
+                    {
+                        scale: 'y',
+                        side: 1,
+                        size: 84,
+                        space: isLogScale ? 1 : 45,
+                        stroke: '#ffffff',
+                        grid: { stroke: '#272f3a' },
+                        ticks: { stroke: '#414b57', width: 1 },
+                        font: '600 13px Segoe UI, sans-serif',
+                        splits: isLogScale ? logAxisSplits : undefined,
+                        values: (u, vals) => isLogScale
+                            ? vals.map((v) => (Number.isFinite(v) ? fmtPrice(v) : ''))
+                            : fmtPriceAxis(vals),
+                    },
                 ],
+                hooks: {
+                    draw: [(u) => positionPriceMarker(u)],
+                },
             };
 
             const plugin = candlePlugin();
@@ -1403,7 +1529,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 ],
                 axes: [
                     makeTimeAxis(true),
-                    { scale: 'y', size: 62, stroke: '#ffffff', grid: { stroke: '#1c2128' }, ticks: { stroke: '#30363d', width: 1 }, values: (u, vals) => vals.map((v) => (v == null ? '' : fmtVolume(v))) },
+                    { scale: 'y', side: 1, size: 84, space: 22, stroke: '#ffffff', grid: { stroke: '#1c2128' }, ticks: { stroke: '#30363d', width: 1 }, font: '600 12px Segoe UI, sans-serif', values: (u, vals) => vals.map((v) => (v == null ? '' : fmtVolume(v))) },
                 ],
             };
 
@@ -1417,83 +1543,212 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             lastRenderedPriceScale = currentPriceScale;
             return priceChart;
         }
-        function clampRange(min, max) {
-            if (!currentCandles.length || !Number.isFinite(min) || !Number.isFinite(max) || max <= min) return null;
-            const first = currentCandles[0].time;
-            const last = currentCandles[currentCandles.length - 1].time;
-            let lo = min;
-            let hi = max;
-            if (lo < first) { hi += first - lo; lo = first; }
-            if (hi > last) { lo -= hi - last; hi = last; }
-            if (lo < first) lo = first;
-            if (hi > last) hi = last;
-            if (hi <= lo) return null;
-            return { min: lo, max: hi };
+        // True when clientX sits over the price-axis region. The chart canvas
+        // (plot + axis gutters) can be wider than the viewport and the right
+        // gutter clipped off-screen, so we key the price zone off the ON-SCREEN
+        // chart container width (always reachable) rather than the far-right gutter.
+        // The rightmost ~120px of the container zooms price; the rest pans time.
+        function inYAxisZone(chart, clientX) {
+            const rootRect = chart.root.getBoundingClientRect();
+            if (!rootRect || rootRect.width <= 0) return false;
+            const x = clientX - rootRect.left;
+            if (chart === priceChart) {
+                return x > rootRect.width - 120;
+            }
+            return false;
         }
-        function syncXRange(min, max) {
-            pendingRange = clampRange(min, max);
-            if (pendingRangeRaf) return;
-            pendingRangeRaf = requestAnimationFrame(() => {
-                const next = pendingRange;
-                pendingRange = null;
-                pendingRangeRaf = 0;
-                if (!next || charts.length === 0) return;
-                charts.forEach((chart) => chart.batch(() => chart.setScale('x', next)));
-            });
+        let priceMarkerLabel = null;
+        let priceMarkerLine = null;
+        function ensurePriceMarker(u) {
+            if (priceMarkerLabel && priceMarkerLabel.parentNode === u.root) return;
+            if (priceMarkerLabel && priceMarkerLabel.parentNode) priceMarkerLabel.parentNode.removeChild(priceMarkerLabel);
+            if (priceMarkerLine && priceMarkerLine.parentNode) priceMarkerLine.parentNode.removeChild(priceMarkerLine);
+            try { if (getComputedStyle(u.root).position === 'static') u.root.style.position = 'relative'; } catch (e) {}
+            priceMarkerLabel = document.createElement('div');
+            priceMarkerLabel.style.cssText = 'position:absolute;z-index:30;pointer-events:none;font:600 12px Segoe UI, sans-serif;line-height:19px;height:19px;padding:0 7px;border-radius:3px;color:#ffffff;white-space:nowrap;box-sizing:border-box;text-align:center;overflow:hidden;';
+            priceMarkerLine = document.createElement('div');
+            priceMarkerLine.style.cssText = 'position:absolute;z-index:1;pointer-events:none;height:0;border-top:1px dashed currentColor;opacity:0.6;';
+            u.root.appendChild(priceMarkerLine);
+            u.root.appendChild(priceMarkerLabel);
+        }
+        function positionPriceMarker(u) {
+            if (!u || !u.over || !currentCandles.length) return;
+            ensurePriceMarker(u);
+            const last = currentCandles[currentCandles.length - 1];
+            const prev = currentCandles.length > 1 ? currentCandles[currentCandles.length - 2] : last;
+            const price = last.close;
+            if (!Number.isFinite(price)) {
+                priceMarkerLabel.style.display = 'none';
+                priceMarkerLine.style.display = 'none';
+                return;
+            }
+            const up = price >= (Number.isFinite(prev.close) ? prev.close : price);
+            const color = up ? '#26a69a' : '#ef5350';
+            const s = u.scales.y || {};
+            const sMin = Number.isFinite(s.min) ? s.min : null;
+            const sMax = Number.isFinite(s.max) ? s.max : null;
+            if (sMin == null || sMax == null || sMax <= sMin) {
+                priceMarkerLabel.style.display = 'none';
+                priceMarkerLine.style.display = 'none';
+                return;
+            }
+            let frac;
+            if (currentPriceScale === 'log') {
+                const lmin = Math.log10(sMin);
+                const lmax = Math.log10(sMax);
+                const lp = Math.log10(Math.max(price, 1e-12));
+                frac = (lp - lmin) / (lmax - lmin);
+            } else {
+                frac = (price - sMin) / (sMax - sMin);
+            }
+            const rootRect = u.root.getBoundingClientRect();
+            const overRect = u.over.getBoundingClientRect();
+            if (!overRect || overRect.height <= 0) return;
+            const plotTop = overRect.top - rootRect.top;
+            const yRel = (1 - frac) * overRect.height;
+            const inRange = frac >= 0 && frac <= 1;
+            priceMarkerLabel.style.display = 'block';
+            priceMarkerLabel.textContent = fmtPriceLabel(price);
+            priceMarkerLabel.style.background = color;
+            priceMarkerLabel.style.top = (plotTop + Math.max(0, Math.min(overRect.height, yRel)) - 10) + 'px';
+            const leftAxisW = overRect.left - rootRect.left;
+            const rightAxisW = rootRect.right - overRect.right;
+            if (leftAxisW >= rightAxisW) {
+                priceMarkerLabel.style.left = '0px';
+                priceMarkerLabel.style.right = '';
+                priceMarkerLabel.style.width = Math.max(40, leftAxisW - 4) + 'px';
+            } else {
+                priceMarkerLabel.style.left = '';
+                priceMarkerLabel.style.right = '0px';
+                priceMarkerLabel.style.width = Math.max(40, rightAxisW - 4) + 'px';
+            }
+            if (inRange) {
+                priceMarkerLine.style.display = 'block';
+                priceMarkerLine.style.color = color;
+                priceMarkerLine.style.top = (plotTop + yRel) + 'px';
+                priceMarkerLine.style.left = (overRect.left - rootRect.left) + 'px';
+                priceMarkerLine.style.width = overRect.width + 'px';
+            } else {
+                priceMarkerLine.style.display = 'none';
+            }
         }
-        function bindWheelZoom(chart) {
-            chart.root.addEventListener('wheel', (e) => {
-                if (e.ctrlKey || e.metaKey || e.altKey) return;
-                e.preventDefault();
-                const rect = chart.root.getBoundingClientRect();
-                const center = chart.posToVal(e.clientX - rect.left, 'x');
-                const s = chart.scales.x || {};
-                const currMin = Number.isFinite(s.min) ? s.min : currentCandles[0].time;
-                const currMax = Number.isFinite(s.max) ? s.max : currentCandles[currentCandles.length - 1].time;
-                const span = currMax - currMin;
-                const first = currentCandles[0]?.time;
-                const last = currentCandles[currentCandles.length - 1]?.time;
-                const fullSpan = Number.isFinite(first) && Number.isFinite(last) ? Math.max(1, last - first) : span;
-                if (!Number.isFinite(span) || span <= 0) return;
-                const factor = e.deltaY < 0 ? 0.85 : 1.15;
-                const nextSpan = Math.max(1, Math.min(fullSpan, span * factor));
-                const ratio = (center - currMin) / span;
-                syncXRange(center - nextSpan * ratio, center - nextSpan * ratio + nextSpan);
-            }, { passive: false });
+        function currentYRange(chart) {
+            const s = chart.scales.y || {};
+            let min = Number.isFinite(s.min) ? s.min : null;
+            let max = Number.isFinite(s.max) ? s.max : null;
+            if (min == null || max == null) {
+                const vis = visiblePriceRange(chart);
+                if (vis) { min = vis[0]; max = vis[1]; }
+            }
+            if (min == null || max == null || !Number.isFinite(min) || !Number.isFinite(max) || max <= min) return null;
+            return { min: min, max: max };
         }
-        function bindPan(chart) {
+        let priceBounds = null;
+        function computePriceBounds() {
+            let min = Infinity;
+            let max = -Infinity;
+            for (let i = 0; i < currentCandles.length; i++) {
+                const lo = currentLow[i];
+                const hi = currentHigh[i];
+                if (Number.isFinite(lo) && lo > 0 && lo < min) min = lo;
+                if (Number.isFinite(hi) && hi > max) max = hi;
+            }
+            if (!Number.isFinite(min) || !Number.isFinite(max) || min <= 0 || max <= min) {
+                priceBounds = null;
+                return;
+            }
+            const range = max - min;
+            // Uloszoomauksen rajat: alin naytettava hinta voi painua viimeistaan
+            // ~35 % datan minimin alapuolelle, ylin ~1.6x datan maksimin, ja
+            // kokonaisvali saa olla enintaan ~1.6x datan hintahaarukasta —
+            // ei siis paase "lipsahtamaan" candleita nakyvasta kadottaen.
+            priceBounds = { min: min, max: max, floor: min * 0.35, ceil: max * 1.6, maxSpan: range * 1.6 };
+        }
+        function applyYRange(chart, min, max) {
+            if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min) return false;
+            const ref = Math.max(Math.abs(min), Math.abs(max), 1e-12);
+            if (max - min < ref * 1e-9) return false;
+            if (currentPriceScale === 'log' && min <= 0) {
+                min = max > 0 ? max * 1e-6 : 1e-6;
+                if (max <= min) return false;
+            }
+            if (priceBounds) {
+                let nMin = Math.max(min, priceBounds.floor);
+                let nMax = Math.min(max, priceBounds.ceil);
+                if (nMax - nMin > priceBounds.maxSpan) {
+                    const c = (nMin + nMax) / 2;
+                    nMin = c - priceBounds.maxSpan / 2;
+                    nMax = c + priceBounds.maxSpan / 2;
+                    nMin = Math.max(nMin, priceBounds.floor);
+                    nMax = Math.min(nMax, priceBounds.ceil);
+                }
+                if (nMax <= nMin) return false;
+                min = nMin;
+                max = nMax;
+            }
+            manualYRange = { min: min, max: max };
+            chart.setScale('y', { min: min, max: max });
+            return true;
+        }
+        function zoomYAt(chart, centerY, factor) {
+            const r = currentYRange(chart);
+            if (!r) return;
+            const span = r.max - r.min;
+            let ratio = (centerY - r.min) / span;
+            if (!Number.isFinite(ratio)) ratio = 0.5;
+            ratio = Math.max(0.05, Math.min(0.95, ratio));
+            const nextSpan = span * factor;
+            const nextMin = centerY - nextSpan * ratio;
+            applyYRange(chart, nextMin, nextMin + nextSpan);
+        }
+        function bindYAxisDrag(chart) {
             let dragging = false;
-            let startClientX = 0;
-            let startMin = 0;
-            let startMax = 0;
+            let startClientY = 0;
+            let startRange = null;
             const onMove = (e) => {
-                if (!dragging) return;
+                if (!dragging || !startRange) return;
                 e.preventDefault();
-                const rect = chart.root.getBoundingClientRect();
-                const delta = chart.posToVal(e.clientX - rect.left, 'x') - chart.posToVal(startClientX - rect.left, 'x');
-                syncXRange(startMin - delta, startMax - delta);
+                chart.root.style.cursor = 'ns-resize';
+                const deltaPx = e.clientY - startClientY;
+                if (!Number.isFinite(deltaPx) || deltaPx === 0) return;
+                const factor = Math.exp(deltaPx / 350);
+                const span = startRange.max - startRange.min;
+                const center = (startRange.min + startRange.max) / 2;
+                const nextSpan = span * factor;
+                applyYRange(chart, center - nextSpan / 2, center + nextSpan / 2);
             };
             const endDrag = () => {
                 if (!dragging) return;
                 dragging = false;
-                document.body.style.cursor = '';
+                startRange = null;
+                chart.root.style.cursor = '';
                 window.removeEventListener('mousemove', onMove);
                 window.removeEventListener('mouseup', endDrag);
             };
             chart.root.addEventListener('mousedown', (e) => {
                 if (!e || e.button !== 0 || e.ctrlKey || e.metaKey || e.altKey) return;
+                // capture phase so we pre-empt uPlot's own plot drag when in the y-zone
                 const rect = chart.root.getBoundingClientRect();
                 if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) return;
+                if (chart !== priceChart || !inYAxisZone(chart, e.clientX)) return;
+                const range = currentYRange(chart);
+                if (!range) return;
                 e.preventDefault();
                 e.stopPropagation();
                 dragging = true;
-                startClientX = e.clientX;
-                const s = chart.scales.x || {};
-                startMin = Number.isFinite(s.min) ? s.min : currentCandles[0].time;
-                startMax = Number.isFinite(s.max) ? s.max : currentCandles[currentCandles.length - 1].time;
-                document.body.style.cursor = 'grabbing';
+                startClientY = e.clientY;
+                startRange = range;
+                chart.root.style.cursor = 'ns-resize';
                 window.addEventListener('mousemove', onMove);
                 window.addEventListener('mouseup', endDrag, { once: true });
+            }, true);
+        }
+        function bindYAxisReset(chart) {
+            chart.root.addEventListener('dblclick', (e) => {
+                if (chart !== priceChart) return;
+                manualYRange = null;
+                const vis = visiblePriceRange(chart);
+                if (vis) chart.setScale('y', { min: vis[0], max: vis[1] });
             });
         }
         function refreshLegend() {
@@ -1521,6 +1776,9 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             const oldRange = keepRange && priceChart ? priceChart.scales.x : null;
             const needsRebuild = !priceChart || !volumeChart || lastRenderedPriceScale !== currentPriceScale;
             if (needsRebuild) {
+                manualYRange = null;
+                priceMarkerLabel = null;
+                priceMarkerLine = null;
                 if (priceEl) priceEl.innerHTML = '';
                 if (volumeEl) volumeEl.innerHTML = '';
                 priceChart = null;
@@ -1529,6 +1787,16 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 chartEventsBound = false;
             }
             const data = buildData();
+            // Dataset changed (timeframe switch, fresh candles): drop any manual
+            // price scale so auto-fit takes over again for the new data shape.
+            const candleKey = currentCandles.length
+                ? currentCandles[0].time + ':' + currentCandles[currentCandles.length - 1].time + ':' + currentCandles.length
+                : '';
+            if (candleKey !== lastCandleKey) {
+                lastCandleKey = candleKey;
+                manualYRange = null;
+            }
+            computePriceBounds();
             if (needsRebuild) {
                 makeChart();
             } else {
@@ -1541,17 +1809,24 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 charts.forEach((chart) => {
                     bindWheelZoom(chart);
                     bindPan(chart);
-                    chart.over.addEventListener('mousemove', () => {
+                    if (chart === priceChart) {
+                        bindYAxisDrag(chart);
+                        bindYAxisReset(chart);
+                        chart.root.addEventListener('mousemove', (e) => {
+                            chart.root.style.cursor = inYAxisZone(chart, e.clientX) ? 'ns-resize' : '';
+                        });
+                    }
+                    chart.root.addEventListener('mousemove', () => {
                         if (chart.cursor.idx != null) updateLegend(chart.cursor.idx);
                     });
-                    chart.over.addEventListener('mouseleave', refreshLegend);
+                    chart.root.addEventListener('mouseleave', refreshLegend);
                     chart.root.addEventListener('mouseenter', () => chart.root.classList.add('is-hovered'));
                     chart.root.addEventListener('mouseleave', () => chart.root.classList.remove('is-hovered'));
                 });
                 chartEventsBound = true;
             }
             if (oldRange && Number.isFinite(oldRange.min) && Number.isFinite(oldRange.max)) {
-                const next = clampRange(oldRange.min, oldRange.max);
+                const next = clampXRange(oldRange.min, oldRange.max);
                 if (next) charts.forEach((chart) => chart.batch(() => chart.setScale('x', next)));
             }
             refreshLegend();
@@ -1584,6 +1859,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         if (pairToggle) {
             pairToggle.addEventListener('click', () => {
                 currentPairMode = currentPairMode === 'inverse' ? 'normal' : 'inverse';
+                manualYRange = null;
                 setControls();
                 rerender(true);
             });
@@ -1701,13 +1977,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             });
         });
 
-        window.addEventListener('keydown', (e) => {
-            if ((e.ctrlKey || e.metaKey) && e.key === '0' && charts.length) {
-                const first = currentCandles[0]?.time;
-                const last = currentCandles[currentCandles.length - 1]?.time;
-                if (Number.isFinite(first) && Number.isFinite(last)) syncXRange(first, last);
-            }
-        });
+        ${zoomResetScript()}
     })();
     </script>
 </body>

package/analysis/trend_detection/DYNAMIC_WEIGHT_RESEARCH.md

@@ -159,7 +159,7 @@ All panels share aligned vertical time grid lines, and the bottom output panel s
 |------|-------|---------|---------|
 | **nz%** | 0–1 | 0.00 | Neutral zone: dead-band below which offset is forced to 0 |
 | **lb** | 1–32 | 9 | Logarithmic. Lookback bars for AMA slope calculation |
-| **amaS%** | 0.04–0.12 | 0.085 | Logarithmic. Gear ratio for average per-bar AMA slope saturation |
+| **amaS%** | 0.06–0.12 | 0.09 | Logarithmic. Gear ratio for average per-bar AMA slope saturation |
 | **kalS%** | 0.5–1.5 | 1.0 | Logarithmic. Gear ratio for Kalman composite saturation |
 | **clip%** | 0–55 | 10 | Percentile clip: filters extreme inputs (0 = off) |