class ConfluenceChart { constructor() { this.chart = null; this.candles = null; this.resizeObserver = null; this.plotResizeObserver = null; this.observedPlotCanvas = null; this.levelSeries = new Map(); this.priceLines = new Map(); this.previewLine = null; this.projectionLayer = null; this.bars = []; this.levels = []; this.onChartClick = null; this.tooltip = null; this.chartEl = null; this.clickListener = null; this.selectedLineId = null; this.selectedDrawingId = null; this.anchorHandles = []; this.lineHitTarget = null; this.lineFocus = null; this.lineFocusTimer = null; this.draggingLine = null; this.lineMoveListener = null; this.lineUpListener = null; this.draggingAnchor = null; this.onLineChange = null; this.anchorMoveListener = null; this.anchorUpListener = null; this.contextMenu = null; this.contextCutoff = null; this.contextLineId = null; this.contextEndButton = null; this.contextListener = null; this.onLineEnd = null; this.onLineDuplicate = null; this.onLineDelete = null; // Tool arming: the sidebar decides what the next chart gesture creates. this.armedTool = null; this.gesture = null; this.pendingAnchor = null; this.onToolComplete = null; this.snapToBars = true; this.priceTag = null; this.toolDownListener = null; this.toolMoveListener = null; this.toolUpListener = null; this.pendingView = null; this.overlayLayer = null; this.snapDot = null; this.snapLabel = null; this.snapLeader = null; this.snapLeaderLine = null; this.comments = []; this.commentNodes = new Map(); this.commentLayer = null; this.contextLabelLayer = null; this.contextLabelFrame = null; this.onCommentToggle = null; this.onCommentMove = null; this.onCommentSelect = null; this.lastSnapDiagnostic = null; } static TICK = 0.25; // Pixels of travel between press and release that make a gesture a drag // rather than a click. Wide enough to survive a twitch on a deliberate click. static DRAG_THRESHOLD = 12; /** * Whether to report snap geometry to the server. * * `?diag=1` turns it on and remembers it; `?diag=0` turns it off. Kept out of * the way rather than always on: it exists because the browser runs on a * different machine from whoever is debugging it. */ static diagnosticMode() { const asked = new URLSearchParams(location.search).get('diag'); if (asked === '1') localStorage.setItem('chart-diag', '1'); if (asked === '0') localStorage.removeItem('chart-diag'); return localStorage.getItem('chart-diag') === '1'; } static snapToTick(price) { return Math.round(price / ConfluenceChart.TICK) * ConfluenceChart.TICK; } create(el) { this.chartEl = el; this.chart = LightweightCharts.createChart(el, { autoSize: true, layout: { background: { color: getComputedStyle(document.documentElement).getPropertyValue('--chart-bg').trim() }, textColor: getComputedStyle(document.documentElement).getPropertyValue('--muted').trim(), attributionLogo: false, }, grid: { vertLines: { color: 'rgba(128,128,128,.10)' }, horzLines: { color: 'rgba(128,128,128,.10)' }, }, timeScale: { timeVisible: true, secondsVisible: false, // The library is timezone-agnostic: it reads epoch seconds as UTC and // labels them as UTC. Bars stay in UTC — that convention holds // everywhere in this codebase, and shifting the values themselves would // put every trendline anchor, hit test and alert an offset out. Only // the label is localised, via the browser's own zone. tickMarkFormatter: (time, tickMarkType) => { const at = new Date(time * 1000); const daily = this.bars[0]?.tf === '1d'; if (tickMarkType === LightweightCharts.TickMarkType.Year) { return String(daily ? at.getUTCFullYear() : at.getFullYear()); } if (tickMarkType === LightweightCharts.TickMarkType.Month) { return at.toLocaleString(undefined, { month: 'short', ...(daily ? { timeZone: 'UTC' } : {}) }); } if (tickMarkType === LightweightCharts.TickMarkType.DayOfMonth) { return String(daily ? at.getUTCDate() : at.getDate()); } return at.toLocaleTimeString(undefined, { hour12: false, hour: '2-digit', minute: '2-digit', ...(tickMarkType === LightweightCharts.TickMarkType.TimeWithSeconds ? { second: '2-digit' } : {}), }); }, }, localization: { // The crosshair readout, which would otherwise disagree with the axis. timeFormatter: time => { const daily = this.bars[0]?.tf === '1d'; return new Date(time * 1000).toLocaleString(undefined, daily ? { timeZone: 'UTC', year: 'numeric', month: 'short', day: 'numeric' } : { hour12: false, month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }); }, }, rightPriceScale: { borderVisible: false }, // Every price-bearing series shares this scale. A second autoscaled price // axis can place the same numeric price at a different y, which makes // daily context look comparable to intraday price when it is not. leftPriceScale: { visible: false }, // Never magnet. The default snaps the crosshair to the bar's *close*, so // hovering beside a low reads a price several ticks away, and everything // that snaps in this app snaps to extremes. The crosshair tracks the // cursor; the snap dot says where an anchor would actually land. crosshair: { mode: LightweightCharts.CrosshairMode.Normal }, }); this.candles = this.chart.addSeries(LightweightCharts.CandlestickSeries, { upColor: '#27825c', downColor: '#bd4545', borderVisible: true, borderUpColor: '#1d6849', borderDownColor: '#963737', wickUpColor: '#1d6849', wickDownColor: '#963737', }); // Volume as an overlay on its own hidden scale, confined to the bottom // fifth. An overlay rather than a pane so it cannot alter the price scale: // volumes are five figures and prices four, and sharing a scale would // flatten the candles into a line. this.volume = this.chart.addSeries(LightweightCharts.HistogramSeries, { priceScaleId: 'volume', priceFormat: { type: 'volume' }, lastValueVisible: false, priceLineVisible: false, }); this.chart.priceScale('volume').applyOptions({ scaleMargins: { top: 0.88, bottom: 0 }, visible: false, }); // The default leaves a tenth of the pane empty beneath the lowest bar, // which is where the volume draws and where a cursor tracing swing lows // naturally sits — far from any actual price. Give most of it back. this.chart.priceScale('right').applyOptions({ scaleMargins: { top: 0.12, bottom: 0.04 } }); this.resizeObserver = new ResizeObserver(() => { this.chart.applyOptions({ width: el.clientWidth, height: el.clientHeight }); requestAnimationFrame(() => { this.observePlotCanvas(); this.renderAnchorHandles(); this.renderTrendlineProjections(); this.renderComments(); this.renderContextLabels(); }); }); this.resizeObserver.observe(el); // Every overlay lives in here, and this is positioned over the *plot* — not // the element, which also contains the price scales. Lightweight Charts // reports coordinates from the plot's origin, so anchoring the container // there lets each overlay use those coordinates untranslated. Keep the // measurement even with no left scale: future layout changes must not // silently displace snap indicators, comments or trendline handles. this.overlayLayer = document.createElement('div'); this.overlayLayer.className = 'chart-overlays'; el.appendChild(this.overlayLayer); this.contextLabelLayer = document.createElement('div'); this.contextLabelLayer.className = 'chart-context-labels'; this.overlayLayer.appendChild(this.contextLabelLayer); this.tooltip = document.createElement('div'); this.tooltip.className = 'chart-tooltip'; this.overlayLayer.appendChild(this.tooltip); const preview = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); preview.classList.add('chart-preview'); preview.setAttribute('aria-hidden', 'true'); this.previewLine = document.createElementNS('http://www.w3.org/2000/svg', 'line'); this.previewLine.setAttribute('hidden', ''); preview.appendChild(this.previewLine); this.overlayLayer.appendChild(preview); this.projectionLayer = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.projectionLayer.classList.add('chart-projections'); this.projectionLayer.setAttribute('aria-hidden', 'true'); this.overlayLayer.appendChild(this.projectionLayer); const handles = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); handles.classList.add('chart-handles'); handles.setAttribute('aria-hidden', 'true'); this.lineFocus = document.createElementNS('http://www.w3.org/2000/svg', 'line'); this.lineFocus.classList.add('chart-line-focus'); this.lineFocus.setAttribute('hidden', ''); handles.appendChild(this.lineFocus); this.lineHitTarget = document.createElementNS('http://www.w3.org/2000/svg', 'line'); this.lineHitTarget.classList.add('chart-line-hit'); this.lineHitTarget.setAttribute('hidden', ''); this.lineHitTarget.addEventListener('pointerdown', event => this.startLineDrag(event)); handles.appendChild(this.lineHitTarget); for (const anchor of ['start', 'end']) { const handle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); handle.classList.add('chart-anchor'); handle.dataset.anchor = anchor; handle.setAttribute('r', '6'); handle.setAttribute('hidden', ''); handle.addEventListener('pointerdown', event => this.startAnchorDrag(event, anchor)); handle.addEventListener('click', event => event.stopPropagation()); handles.appendChild(handle); this.anchorHandles.push(handle); } this.overlayLayer.appendChild(handles); this.contextMenu = document.createElement('div'); this.contextMenu.className = 'chart-context-menu'; this.contextMenu.hidden = true; const endHere = document.createElement('button'); endHere.type = 'button'; endHere.textContent = 'End trendline here'; endHere.addEventListener('click', event => { event.stopPropagation(); this.endSelectedLineHere(); }); this.contextEndButton = endHere; const duplicate = document.createElement('button'); duplicate.type = 'button'; duplicate.dataset.action = 'duplicate'; duplicate.textContent = 'Duplicate 10 bars right'; duplicate.addEventListener('click', event => { event.stopPropagation(); const level = this.levels.find(value => value.id === this.contextLineId); this.hideContextMenu(); if (level && this.onLineDuplicate) this.onLineDuplicate({ ...level }); }); const deleteLine = document.createElement('button'); deleteLine.type = 'button'; deleteLine.dataset.action = 'delete'; deleteLine.textContent = 'Delete'; deleteLine.addEventListener('click', event => { event.stopPropagation(); const id = this.contextLineId; this.hideContextMenu(); if (id && this.onLineDelete) this.onLineDelete(id); }); this.contextMenu.addEventListener('click', event => event.stopPropagation()); this.contextMenu.append(endHere, duplicate, deleteLine); this.overlayLayer.appendChild(this.contextMenu); this.priceTag = document.createElement('div'); this.priceTag.className = 'chart-price-tag'; this.priceTag.hidden = true; this.overlayLayer.appendChild(this.priceTag); this.snapDot = document.createElement('div'); this.snapDot.className = 'chart-snap-dot'; this.snapDot.hidden = true; this.overlayLayer.appendChild(this.snapDot); // States the price the anchor will use. Useful in itself, and it means a // single screenshot answers "is the dot in the wrong place, or on the // wrong bar?" without anyone pasting console output. this.snapLabel = document.createElement('div'); this.snapLabel.className = 'chart-snap-label'; this.snapLabel.hidden = true; this.overlayLayer.appendChild(this.snapLabel); // A leader from the cursor to the target. The snap is often far from the // pointer — hovering below the candles legitimately snaps up to a bar's low // — and without a line joining them the dot reads as unrelated to where you // are pointing. this.snapLeader = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.snapLeader.classList.add('chart-snap-leader'); this.snapLeader.setAttribute('aria-hidden', 'true'); this.snapLeaderLine = document.createElementNS('http://www.w3.org/2000/svg', 'line'); this.snapLeader.appendChild(this.snapLeaderLine); this.overlayLayer.appendChild(this.snapLeader); this.commentLayer = document.createElement('div'); this.commentLayer.className = 'chart-comments'; this.overlayLayer.appendChild(this.commentLayer); this.toolDownListener = event => this.startToolGesture(event); this.toolMoveListener = event => this.moveToolGesture(event); this.toolUpListener = event => this.finishToolGesture(event); el.addEventListener('pointerdown', this.toolDownListener); window.addEventListener('pointermove', this.toolMoveListener); window.addEventListener('pointerup', this.toolUpListener); this.anchorMoveListener = event => this.moveAnchor(event); this.anchorUpListener = event => this.finishAnchorDrag(event); window.addEventListener('pointermove', this.anchorMoveListener); window.addEventListener('pointerup', this.anchorUpListener); this.lineMoveListener = event => this.moveLine(event); this.lineUpListener = event => this.finishLineDrag(event); window.addEventListener('pointermove', this.lineMoveListener); window.addEventListener('pointerup', this.lineUpListener); this.contextListener = event => this.showContextMenu(event); el.addEventListener('contextmenu', this.contextListener); this.clickListener = event => { this.hideContextMenu(); // A placement gesture ends in a click too; selecting on it would pick // whatever the new line happens to overlap. if (this.armedTool) return; if (!this.onChartClick) return; const point = this.eventPoint(event); if (point && this.withinPlot(point) && point.t != null) { this.onChartClick({ point, time: point.t }); } }; el.addEventListener('click', this.clickListener); this.chart.subscribeCrosshairMove(param => { this.scheduleContextLabels(); if (!param.point || !param.time) { this.tooltip.hidden = true; return; } this.updateLineTooltip(param); }); requestAnimationFrame(() => this.observePlotCanvas()); this.chart.timeScale().subscribeVisibleLogicalRangeChange(() => { this.renderAnchorHandles(); this.renderTrendlineProjections(); this.renderComments(); this.renderContextLabels(); }); } setBars(bars) { this.bars = bars; const candleData = bars.map(this.toCandle); this.candles.setData(candleData); this.volume.setData(bars.map(ConfluenceChart.toVolume)); // Anchored by time, not by logical index. A logical index addresses the // chart's *shared* scale — the union of every series' time points — not // this array. The daily MAs land straight after with hundreds of points // pre-dating the 1m window, and prepending them shifts every logical index // by that count, silently dragging the view ten hours off the live edge. // A time range names the instant, so later series cannot move it. if (bars.length) { const last = bars[bars.length - 1]; // Keep the old five bars of right-hand breathing room, in seconds. const step = bars.length > 1 ? last.t - bars[bars.length - 2].t : 60; this.pendingView = { from: bars[Math.max(0, bars.length - 160)].t, to: last.t + step * 5, }; this.chart.timeScale().setVisibleRange(this.pendingView); } requestAnimationFrame(() => this.renderAnchorHandles()); // The bar grid just changed underneath every pinned comment. this.renderComments(); this.renderContextLabels(); this.renderTrendlineProjections(); } updateBar(bar) { // update() throws on anything older than the series' last point, which // takes the whole app down rather than dropping one stale bar. Ticks made // this reachable often enough to matter, so refuse it here as well as at // the source: a bar behind the last one has nothing to contribute. const last = this.bars[this.bars.length - 1]; if (last && bar.t < last.t) return; this.candles.update(this.toCandle(bar)); this.volume.update(ConfluenceChart.toVolume(bar)); if (this.bars.length && this.bars[this.bars.length - 1].t === bar.t) this.bars[this.bars.length - 1] = bar; else this.bars.push(bar); this.renderAnchorHandles(); this.renderContextLabels(); this.renderTrendlineProjections(); } setComments(comments) { this.comments = comments; this.renderComments(); } setCommentHandlers({ onToggle, onMove, onSelect }) { this.onCommentToggle = onToggle; this.onCommentMove = onMove; this.onCommentSelect = onSelect; } // Comments are DOM, not canvas: they hold arbitrary text, need to collapse, // and a floating one must ignore the time scale entirely. renderComments() { if (!this.commentLayer) return; const width = this.chartEl.clientWidth; const height = this.chartEl.clientHeight; const seen = new Set(); for (const comment of this.comments || []) { seen.add(comment.id); let node = this.commentNodes.get(comment.id); if (!node) { node = this.buildCommentNode(comment); this.commentNodes.set(comment.id, node); this.commentLayer.appendChild(node.root); } node.comment = comment; node.root.dataset.drawingId = comment.id; node.root.classList.toggle('collapsed', !!comment.collapsed); node.root.classList.toggle('floating', !comment.pinned); const iconClass = ConfluenceChart.symbolIcons[comment.icon]; node.root.classList.toggle('symbol', !!iconClass); node.collapse.hidden = !!iconClass; node.collapseIcon.className = comment.collapsed ? 'fa-solid fa-expand' : 'fa-solid fa-compress'; node.grab.hidden = iconClass ? this.selectedDrawingId !== comment.id : comment.pinned; if (iconClass) { node.icon.className = `fa-solid ${iconClass}`; node.label.replaceChildren(node.icon); } else { node.label.textContent = comment.collapsed ? String(comment.number) : comment.note; } node.root.style.borderColor = comment.color; node.root.style.setProperty('--comment-focus-color', comment.color || '#c8992f'); node.root.title = comment.note; if (!comment.pinned) { // A fraction of the pane, so it holds its place through any zoom. node.root.style.left = `${Math.round(comment.x * width)}px`; node.root.style.top = `${Math.round(comment.y * height)}px`; node.root.classList.remove('off-left', 'off-right'); continue; } const placed = this.anchorCoordinate(comment.anchor_t); const x = placed.x; const y = this.candles.priceToCoordinate(comment.anchor_p); // Scrolled past: park it on the edge it went off, pointing that way, // rather than letting it vanish and be hard to find again. const offLeft = placed.before || (x !== null && x < 0); const offRight = placed.after || (x !== null && x > width); node.root.classList.toggle('off-left', offLeft && !offRight); node.root.classList.toggle('off-right', offRight); const clampedX = offLeft ? 4 : offRight ? width - node.root.offsetWidth - 4 : x; node.root.style.left = `${Math.round(clampedX)}px`; node.root.style.top = `${Math.round(Math.min(Math.max(y == null ? 24 : y, 4), height - 28))}px`; } for (const [id, node] of this.commentNodes) { if (!seen.has(id)) { clearTimeout(node.focusTimer); node.root.remove(); this.commentNodes.delete(id); } } } /** * Where an anchor time sits on the current timeframe. * * timeToCoordinate answers only for times that are data points on the series, * so a comment placed on a 30m bar returned null the moment the chart * switched to 15m or 1h — and null was being read as "off the left edge", * which slid every such comment to the far left. The anchor is resolved to * the bar that *contains* it instead, which is timeframe-independent: a 09:30 * note lands on the 09:30 bar at 15m and on the 09:00 bar at 1h. */ anchorCoordinate(anchorT) { if (!this.bars.length) return { x: null, before: false, after: false }; if (anchorT < this.bars[0].t) return { x: null, before: true, after: false }; const lastBar = this.bars[this.bars.length - 1]; if (anchorT > lastBar.t) { // Past the newest bar is not off the chart — the right edge carries // whitespace, so ask the scale directly and only park it if it answers. const beyond = this.chart.timeScale().timeToCoordinate(lastBar.t); return { x: beyond, before: false, after: beyond === null }; } let lo = 0; let hi = this.bars.length - 1; while (lo < hi) { const mid = (lo + hi + 1) >> 1; if (this.bars[mid].t <= anchorT) lo = mid; else hi = mid - 1; } return { x: this.chart.timeScale().timeToCoordinate(this.bars[lo].t), before: false, after: false }; } buildCommentNode(comment) { const root = document.createElement('div'); root.className = 'chart-comment'; const focus = document.createElement('span'); focus.className = 'chart-comment-focus'; focus.setAttribute('aria-hidden', 'true'); const label = document.createElement('span'); label.className = 'chart-comment-text'; const icon = document.createElement('i'); const collapse = document.createElement('button'); collapse.type = 'button'; collapse.className = 'chart-comment-collapse'; collapse.title = 'Collapse or expand'; collapse.setAttribute('aria-label', 'Collapse or expand comment'); const collapseIcon = document.createElement('i'); collapse.appendChild(collapseIcon); const grab = document.createElement('button'); grab.type = 'button'; grab.className = 'chart-comment-grab'; grab.title = 'Drag'; grab.setAttribute('aria-label', 'Drag drawing'); const grabIcon = document.createElement('i'); grabIcon.className = 'fa-solid fa-grip-vertical'; grab.appendChild(grabIcon); root.append(focus, collapse, grab, label); const node = { root, focus, label, icon, collapse, collapseIcon, grab, comment }; root.addEventListener('click', event => { event.stopPropagation(); this.focusComment(node.comment.id); if (this.onCommentSelect) this.onCommentSelect(node.comment); }); collapse.addEventListener('click', event => { event.stopPropagation(); this.focusComment(node.comment.id); if (this.onCommentSelect) this.onCommentSelect(node.comment); if (this.onCommentToggle) this.onCommentToggle(node.comment); }); grab.addEventListener('click', event => event.stopPropagation()); // Floating comments move in screen space. Symbols can also be moved while // pinned, in which case their bar and tick-snapped price are updated. grab.addEventListener('pointerdown', event => { if (node.comment.pinned && !node.comment.icon) return; event.preventDefault(); event.stopPropagation(); this.focusComment(node.comment.id); if (this.onCommentSelect) this.onCommentSelect(node.comment); const bounds = this.plotCanvas().getBoundingClientRect(); const move = moveEvent => { root.style.left = `${Math.round(moveEvent.clientX - bounds.left - root.offsetWidth / 2)}px`; root.style.top = `${Math.round(moveEvent.clientY - bounds.top - root.offsetHeight / 2)}px`; }; const up = upEvent => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); if (node.comment.pinned && node.comment.icon) { const point = this.eventPoint(upEvent); if (point && this.withinPlot(point) && this.onCommentMove) { this.onCommentMove(node.comment, { anchor_t: Math.round(point.t), anchor_p: ConfluenceChart.snapToTick(point.p), }); } else { this.renderComments(); } return; } const x = (upEvent.clientX - bounds.left - 8) / bounds.width; const y = (upEvent.clientY - bounds.top - 8) / bounds.height; const clamp = value => Math.min(Math.max(value, 0), 1); if (this.onCommentMove) this.onCommentMove(node.comment, { x: clamp(x), y: clamp(y) }); }; window.addEventListener('pointermove', move); window.addEventListener('pointerup', up); }); return node; } // A typed price alert is a manual line with zero slope. Treating it as flat // here is what makes it render as a level rather than a stubby segment. static isFlat(level) { return level.kind === 'horizontal' || (level.kind === 'manual' && level.slope === 0); } static isContextLevel(level) { return level.kind === 'ma' || level.kind === 'vwap' || level.kind === 'horizontal'; } seriesTitle(level) { if (ConfluenceChart.isContextLevel(level)) return ''; if (level.kind === 'manual') { return level.id === this.selectedLineId ? level.label : `#${level.number}`; } return level.label; } // Flat levels are drawn as price lines rather than two-point series: they // span the whole chart regardless of scroll and get a price-axis label. syncPriceLines(levels) { const flat = levels.filter(level => ConfluenceChart.isFlat(level) && !level.hidden); const wanted = new Set(flat.map(level => level.id)); for (const [id, entry] of this.priceLines) { if (!wanted.has(id)) { entry.host.removePriceLine(entry.line); this.priceLines.delete(id); } } for (const level of flat) { const options = { price: level.anchor_p, color: ConfluenceChart.levelColor(level), lineWidth: level.line_width || 1, lineStyle: LightweightCharts.LineStyle.Dashed, axisLabelVisible: level.kind !== 'horizontal', title: this.seriesTitle(level), }; const existing = this.priceLines.get(level.id); if (existing) existing.line.applyOptions(options); else { const host = this.candles; this.priceLines.set(level.id, { host, line: host.createPriceLine(options) }); } } } // Level points are sampled on their own timeframe — VWAP every minute, the // daily averages once a session — and every distinct timestamp claims its own // slot on the chart's shared scale. Left raw, a minute-resolution VWAP spread // 160 hourly candles across 908 slots and drew them as unreadable slivers. // Snapping onto the candle grid preserves the line's shape while keeping the // scale one slot per candle, which is what makes the bars their proper width. snapPointsToBars(points) { if (!this.bars.length || !points.length) return points; const times = this.bars.map(bar => bar.t); const last = times[times.length - 1]; const byTime = new Map(); for (const point of points) { // Clamped, not passed through: on a daily chart every one of VWAP's ~760 // minute points falls after the last candle's session open, and letting // them keep their own times put all 760 back on the scale. Projection to // the right of the last bar is handled by the caller instead. if (point.time >= last) { byTime.set(last, point.value); continue; } let lo = 0; let hi = times.length - 1; while (lo < hi) { const mid = (lo + hi) >> 1; if (times[mid] < point.time) lo = mid + 1; else hi = mid; } // Points older than the window collapse onto the first candle; the newest // of them wins, which is the value in force when the window opens. byTime.set(times[lo], point.value); } return [...byTime.entries()] .sort((a, b) => a[0] - b[0]) .map(([time, value]) => ({ time, value })); } syncLevels(levels) { this.levels = levels; this.syncPriceLines(levels); const drawn = levels.filter(level => !ConfluenceChart.isFlat(level)); const wanted = new Set(drawn.filter(level => !level.hidden).map(level => level.id)); for (const [id, entry] of this.levelSeries) { if (!wanted.has(id)) { this.chart.removeSeries(entry.series); this.levelSeries.delete(id); } } for (const level of drawn) { if (level.hidden) continue; let entry = this.levelSeries.get(level.id); // Both trace a series of points, but a higher-timeframe average holds its // value between closes while VWAP moves continuously. const hasPoints = level.kind === 'ma' || level.kind === 'vwap'; const isMa = level.kind === 'ma'; const dailyChart = this.bars[0]?.tf === '1d'; const options = { color: ConfluenceChart.levelColor(level), lineWidth: level.line_width || (level.tf === '1d' ? 2 : 1), // A daily value is held constant while projected over intraday bars, // but on the daily chart each point is a new sample and should connect // normally rather than drawing a staircase. lineType: isMa && !dailyChart ? LightweightCharts.LineType.WithSteps : LightweightCharts.LineType.Simple, lineStyle: level.provisional ? LightweightCharts.LineStyle.Dashed : LightweightCharts.LineStyle.Solid, priceLineVisible: false, lastValueVisible: !ConfluenceChart.isContextLevel(level) && level.cutoff_t == null, title: this.seriesTitle(level), // Overlays outside the visible price range must not flatten the candles. autoscaleInfoProvider: () => null, }; if (!entry) { entry = { series: this.chart.addSeries(LightweightCharts.LineSeries, { ...options, priceScaleId: 'right' }), }; this.levelSeries.set(level.id, entry); } else { entry.series.applyOptions(options); } let data; if (hasPoints) { data = this.snapPointsToBars((level.points || []).map(([time, value]) => ({ time, value }))); const latestTime = this.bars[this.bars.length - 1]?.t; const latestValue = data[data.length - 1]?.value; if (latestTime != null && latestValue != null && latestTime > data[data.length - 1].time) { data.push({ time: latestTime, value: latestValue }); } } else { data = level.kind === 'manual' ? this.seriesLineData(level) : this.lineData(level); } entry.series.setData(data); } // Re-anchor once, after the level series have reshaped the scale. setBars // runs before them, so the width it asked for was derived from the previous // timeframe's point density and the chart holds that width as new series // arrive. Consumed rather than reapplied every time: VWAP resyncs a level // every minute, and re-anchoring on each would yank the view back from // wherever the user had panned it. if (this.pendingView) { this.chart.timeScale().setVisibleRange(this.pendingView); this.pendingView = null; } this.renderAnchorHandles(); this.renderTrendlineProjections(); this.renderContextLabels(); } renderContextLabels() { if (!this.contextLabelLayer || !this.candles) return; const height = this.plotCanvas()?.getBoundingClientRect().height || 0; const labels = this.levels .filter(level => !level.hidden && ConfluenceChart.isContextLevel(level)) .map(level => { const points = level.points || []; const value = level.current_p ?? points[points.length - 1]?.[1] ?? level.anchor_p; const y = value == null ? null : this.candles.priceToCoordinate(value); return { level, value, y }; }) .filter(item => item.y != null && item.y >= 0 && item.y <= height) .sort((a, b) => a.y - b.y); const gap = 18; const top = 10; const bottom = Math.max(top, height - 10); labels.forEach((item, index) => { item.placedY = index === 0 ? Math.max(top, item.y) : Math.max(item.y, labels[index - 1].placedY + gap); }); if (labels.length && labels[labels.length - 1].placedY > bottom) { const shift = labels[labels.length - 1].placedY - bottom; labels.forEach(item => { item.placedY -= shift; }); } this.contextLabelLayer.replaceChildren(...labels.map(({ level, value, y, placedY }) => { const node = document.createElement('div'); node.className = 'chart-context-label'; node.textContent = `${level.label} ${Number(value).toFixed(2)}`; node.style.top = `${Math.max(top, placedY)}px`; node.style.borderColor = ConfluenceChart.levelColor(level); return node; })); } scheduleContextLabels() { if (this.contextLabelFrame != null) return; this.contextLabelFrame = requestAnimationFrame(() => { this.contextLabelFrame = null; this.renderContextLabels(); }); } // --- tool arming and placement gestures --------------------------------- setToolCompleteHandler(handler) { this.onToolComplete = handler; } setSnap(enabled) { this.snapToBars = enabled; } /** * Arm a tool so the next chart gesture places one. Panning is suspended * while armed, otherwise the drag that draws a line also drags the chart out * from under it. */ armTool(tool) { this.armedTool = tool; this.chart.applyOptions({ handleScroll: !tool, handleScale: !tool }); this.hideSnapDot(); this.chartEl.classList.toggle('armed', Boolean(tool)); this.pendingAnchor = null; this.clearGesture(); this.clearLinePreview(); } /** * Pixels between the element's left edge and the plot area. * * Lightweight Charts measures coordinates from the plot, not the element. * The helper remains the single source of truth if axes or panes change the * plot bounds again. */ /** Put the overlay container exactly over the plot area. */ syncOverlayLayer() { if (!this.overlayLayer || !this.chartEl) return; const canvas = this.plotCanvas(); if (!canvas) return; const chartRect = this.chartEl.getBoundingClientRect(); const plot = canvas.getBoundingClientRect(); this.overlayLayer.style.left = `${Math.round(plot.left - chartRect.left)}px`; this.overlayLayer.style.top = `${Math.round(plot.top - chartRect.top)}px`; this.overlayLayer.style.width = `${Math.round(plot.width)}px`; this.overlayLayer.style.height = `${Math.round(plot.height)}px`; } /** * Keep overlays aligned as Lightweight Charts sizes its internal price scales. * * The chart element itself does not resize when an axis label changes the * plot bounds; the plot canvas does. Observing the canvas catches both initial * settling and later digit-width changes. */ observePlotCanvas() { const canvas = this.plotCanvas(); if (!canvas) return; if (canvas !== this.observedPlotCanvas) { if (this.plotResizeObserver) this.plotResizeObserver.disconnect(); this.observedPlotCanvas = canvas; this.plotResizeObserver = new ResizeObserver(() => { this.syncOverlayLayer(); this.renderAnchorHandles(); this.renderTrendlineProjections(); this.renderComments(); this.renderContextLabels(); if (this.armedTool) this.renderGesture(); }); this.plotResizeObserver.observe(canvas); } this.syncOverlayLayer(); } plotCanvas() { if (!this.chartEl) return null; return [...this.chartEl.querySelectorAll('canvas')] .sort((a, b) => (b.width * b.height) - (a.width * a.height))[0] || null; } plotOffsetX() { if (!this.chartEl) return 0; const canvas = this.plotCanvas(); if (!canvas) return 0; return canvas.getBoundingClientRect().left - this.chartEl.getBoundingClientRect().left; } eventPoint(event) { const plot = this.plotCanvas()?.getBoundingClientRect(); if (!plot) return null; const x = event.clientX - plot.left; const y = event.clientY - plot.top; const price = this.candles.coordinateToPrice(y); if (price == null) return null; const time = this.chart.timeScale().coordinateToTime(x); const index = time == null ? this.indexAtCoordinate(x) : null; const projectedTime = index == null ? null : this.timeAtIndex(index); return { x, y, p: price, t: time == null ? projectedTime : Number(time) }; } placementAtClient(clientX, clientY) { const point = this.eventPoint({ clientX, clientY }); if (!point || !this.withinPlot(point)) return null; return { time: Math.round(point.t), price: ConfluenceChart.snapToTick(point.p), x: Math.min(Math.max(point.x / this.overlayLayer.clientWidth, 0), 1), y: Math.min(Math.max(point.y / this.overlayLayer.clientHeight, 0), 1), }; } indexAtCoordinate(x) { if (!this.bars.length) return null; const scale = this.chart.timeScale(); const logical = scale.coordinateToLogical(x); const lastX = scale.timeToCoordinate(this.bars[this.bars.length - 1].t); const lastLogical = lastX == null ? null : scale.coordinateToLogical(lastX); if (logical == null || lastLogical == null) return null; return this.bars.length - 1 + Number(logical) - Number(lastLogical); } coordinateAtIndex(index) { if (!this.bars.length) return null; const scale = this.chart.timeScale(); const lastX = scale.timeToCoordinate(this.bars[this.bars.length - 1].t); const lastLogical = lastX == null ? null : scale.coordinateToLogical(lastX); if (lastLogical == null) return null; return scale.logicalToCoordinate(Number(lastLogical) + index - (this.bars.length - 1)); } coordinateAtTime(time) { const last = this.bars[this.bars.length - 1]; if (!last) return null; if (time <= last.t) { const direct = this.chart.timeScale().timeToCoordinate(time); if (direct != null) return direct; } return this.coordinateAtIndex(this.indexAt(time)); } startToolGesture(event) { if (!this.armedTool || event.button !== 0) return; const point = this.eventPoint(event); if (!point) return; event.preventDefault(); this.gesture = { start: point, end: point }; this.chartEl.setPointerCapture?.(event.pointerId); this.renderGesture(); } moveToolGesture(event) { if (!this.armedTool) return; const point = this.eventPoint(event); if (!point) return; // The listener is on window, so it fires over the sidebar and the price // axis too. Reported from a real session: x=1409 on a 1280-wide chart, which // has no time under it — and the snap fell back to the newest bar, throwing // the dot to the right-hand edge. if (!this.withinPlot(point)) { this.hideSnapDot(); return; } if (this.armedTool !== 'level') this.showSnapDot(this.snapPoint(point), point); if (this.gesture) { this.gesture.end = point; this.renderGesture(); return; } // Waiting on the second click: rubber-band from the placed anchor. if (this.pendingAnchor) this.renderPending(this.pendingAnchor, this.snapPoint(point)); } showSnapDot(snapped, point = {}) { if (snapped.t == null) return this.hideSnapDot(); const x = this.coordinateAtTime(snapped.t); const y = this.candles.priceToCoordinate(snapped.p); if (x == null || y == null) return this.hideSnapDot(); this.snapDot.hidden = false; this.snapDot.style.left = `${Math.round(x)}px`; this.snapDot.style.top = `${Math.round(y)}px`; // Says which it is before you commit, since the extreme decides the side. this.snapDot.dataset.side = snapped.snappedSide || ''; // Diagnostic mode: report what the client computed so it can be read on // the server. Off unless asked for, because the browser is usually on a // different machine and this is the only way to see its numbers. // turn on: ?diag=1 (remembered) turn off: ?diag=0 if (ConfluenceChart.diagnosticMode() && snapped.t != null && this.bars.length) { const step = this.bars.length > 1 ? this.bars[this.bars.length - 1].t - this.bars[this.bars.length - 2].t : 60; const drift = point.t == null ? null : Math.abs(snapped.t - point.t); { const now = Date.now(); if (!this._lastSnapReport || now - this._lastSnapReport > 900) { this._lastSnapReport = now; const body = { cursor_t: point.t, cursor_p: point.p, cursor_x: Math.round(point.x), snapped_t: snapped.t, snapped_p: snapped.p, bars_held: this.bars.length, first_bar_t: this.bars[0].t, last_bar_t: this.bars[this.bars.length - 1].t, chart_w: this.chartEl.clientWidth, chart_h: this.chartEl.clientHeight, cursor_y: Math.round(point.y), dot_y: this.snapDot && !this.snapDot.hidden ? Math.round(this.snapDot.getBoundingClientRect().top - this.chartEl.getBoundingClientRect().top) + 5 : null, expected_y: Math.round(y), bar_low_y: (() => { const bar = this.bars.find(candle => candle.t === snapped.t); const at = bar && this.candles.priceToCoordinate(bar.l); return at == null ? null : Math.round(at); })(), bar_high_y: (() => { const bar = this.bars.find(candle => candle.t === snapped.t); const at = bar && this.candles.priceToCoordinate(bar.h); return at == null ? null : Math.round(at); })(), note: point.t == null ? 'coordinateToTime returned null' : `drift ${drift}s (${Math.round(drift / step)} bars), step ${step}s`, }; this.lastSnapDiagnostic = body; fetch('/api/debug/snap', { method: 'POST', headers: { 'Content-Type': 'application/json', ...(localStorage.getItem('chart-token') ? { 'X-Chart-Token': localStorage.getItem('chart-token') } : {}) }, body: JSON.stringify(body), }).catch(() => {}); } } } const side = snapped.snappedSide === 'resistance' ? 'H' : snapped.snappedSide === 'support' ? 'L' : ''; const clock = new Date(snapped.t * 1000) .toLocaleTimeString(undefined, { hour12: false, hour: '2-digit', minute: '2-digit' }); this.snapLabel.hidden = false; this.snapLabel.dataset.side = snapped.snappedSide || ''; this.snapLabel.textContent = `${snapped.p.toFixed(2)}${side ? ' ' + side : ''} · ${clock}`; // Flipped to the left near the right-hand edge so it never leaves the pane. const flip = x > this.chartEl.clientWidth - 120; this.snapLabel.style.left = `${Math.round(flip ? x - 12 : x + 12)}px`; this.snapLabel.style.top = `${Math.round(y)}px`; this.snapLabel.style.transform = flip ? 'translate(-100%, -50%)' : 'translate(0, -50%)'; if (point.x != null && point.y != null) { this.snapLeaderLine.setAttribute('x1', point.x); this.snapLeaderLine.setAttribute('y1', point.y); this.snapLeaderLine.setAttribute('x2', x); this.snapLeaderLine.setAttribute('y2', y); this.snapLeader.style.display = ''; } else { this.snapLeader.style.display = 'none'; } } hideSnapDot() { if (this.snapDot) this.snapDot.hidden = true; if (this.snapLabel) this.snapLabel.hidden = true; if (this.snapLeader) this.snapLeader.style.display = 'none'; } renderPending(a, b) { if (a.t != null && b.t != null) this.setLinePreview(a, b, '#65b7cf', 2); } finishToolGesture(event) { if (!this.armedTool || !this.gesture) return; const tool = this.armedTool; const { start, end } = this.gesture; this.clearGesture(); this.chartEl.releasePointerCapture?.(event.pointerId); if (tool === 'comment' || tool === 'symbol') { // Both placements come from one gesture: the time and price under the // cursor for a pinned comment, and the same spot as a fraction of the // pane for a floating one, so the tool decides which without a second // interaction. this.onToolComplete?.({ tool, time: end.t, price: ConfluenceChart.snapToTick(end.p), x: Math.min(Math.max(end.x / this.chartEl.clientWidth, 0), 1), y: Math.min(Math.max(end.y / this.chartEl.clientHeight, 0), 1), }); return; } if (tool === 'level') { // A click with no drag is a valid placement; the drag is only there to // let you fine-tune the price before committing. this.onToolComplete?.({ tool, price: ConfluenceChart.snapToTick(end.p) }); return; } // Both idioms are supported. Press-drag-release places a trendline in one // gesture; a plain click sets the first anchor and the next click finishes // it. Rejecting short gestures outright left the tool armed and silent, so // the next click began a whole new line — which read as the line suddenly // continuing at a different slope. // Deliberate drag or click? At 5px a twitch while pressing the second click // counted as a drag, which threw away the anchor placed by the first click // and restarted the line under the cursor. Making a pending anchor always // win fixed that and broke the other direction: a real press-drag begun // after an abandoned click was hijacked by that stale anchor, starting the // line far from where the drag did. So the threshold decides, and it is // wide enough that only a deliberate drag clears the anchor. const dragged = Math.hypot(end.x - start.x, end.y - start.y) >= ConfluenceChart.DRAG_THRESHOLD; const b = this.snapPoint(end); if (!dragged && !this.pendingAnchor) { this.pendingAnchor = b; this.renderPending(b, b); return; } // A drag says everything it needs to on its own; anything half-placed // before it is abandoned rather than silently adopted. const a = dragged ? this.snapPoint(start) : this.pendingAnchor; this.pendingAnchor = null; this.clearLinePreview(); if (a.t == null || b.t == null || a.t === b.t) return; this.onToolComplete?.({ tool, start: a, end: b }); } /** * Trendline anchors snap to bar extremes; levels snap to the tick grid. * * With snapping on, an anchor always lands on the nearer extreme of the * nearest bar — there is no proximity gate. An 8px one used to let the * cursor fall between the high and the low and snap to neither, so the * preview showed a raw mid-bar price and the side quietly fell back to the * dropdown. Which extreme you land on *is* the side: a high is resistance, a * low is support, so the choice is made by where you point rather than by a * control you have to remember to set. An already-snapped point carries no * cursor y, so it is returned untouched rather than re-snapped against NaN. */ /** Is this point over the plotted area, rather than an axis or the sidebar? */ withinPlot(point) { const plot = this.plotCanvas()?.getBoundingClientRect(); if (!plot) return true; const width = plot.width; const height = plot.height; return point.x >= 0 && point.x <= width && point.y >= 0 && point.y <= height; } /** * The bar nearest a pixel, when the time scale will not name one. * * coordinateToTime answers null over the right-hand whitespace and the price * axis. Treating that as "the newest bar" put the anchor at the live edge * however far away the cursor was. */ barNearestX(x) { let best = null; const timeScale = this.chart.timeScale(); for (const bar of this.bars) { const coordinate = timeScale.timeToCoordinate(bar.t); if (coordinate == null) continue; const distance = Math.abs(coordinate - x); if (!best || distance < best.distance) best = { distance, t: bar.t }; } return best ? best.t : null; } snapPoint(point) { const fallbackT = point.t ?? (point.x == null ? null : this.barNearestX(point.x)); const base = { t: fallbackT, p: point.p, snappedSide: point.snappedSide ?? null }; if (!this.snapToBars || !this.bars.length || fallbackT == null) return base; const last = this.bars[this.bars.length - 1]; if (fallbackT > last.t) { const index = Math.round(this.indexAt(fallbackT)); return { t: this.timeAtIndex(index), p: ConfluenceChart.snapToTick(point.p), snappedSide: null }; } // An already-snapped point carries no cursor position; return it untouched // rather than measuring against undefined. if (point.y == null) return base; // Horizontal position chooses the bar, vertical position chooses which of // its extremes. Nothing else — a nearest-in-2D search was tried and is // wrong: sweeping along the bottom of the chart, whichever nearby bar had // the lowest low won on total distance, so the dot skipped off the bar // under the cursor entirely instead of tracing each bar's low in turn. const nearest = this.bars.reduce( (best, bar) => (Math.abs(bar.t - fallbackT) < Math.abs(best.t - fallbackT) ? bar : best), ); const candidates = [ { p: nearest.h, side: 'resistance' }, { p: nearest.l, side: 'support' }, ]; const snapped = candidates .map(value => ({ ...value, distance: Math.abs(this.candles.priceToCoordinate(value.p) - point.y) })) .sort((a, b) => a.distance - b.distance)[0]; return { t: nearest.t, p: snapped.p, snappedSide: snapped.side }; } renderGesture() { if (!this.gesture) return; const { start, end } = this.gesture; if (this.armedTool === 'level') { const price = ConfluenceChart.snapToTick(end.p); const y = this.candles.priceToCoordinate(price); if (y == null) return; this.previewLine.removeAttribute('hidden'); this.previewLine.setAttribute('x1', 0); this.previewLine.setAttribute('y1', y); this.previewLine.setAttribute('x2', this.chartEl.clientWidth); this.previewLine.setAttribute('y2', y); this.previewLine.setAttribute('stroke', '#e0a34a'); this.previewLine.setAttribute('stroke-width', 2); this.previewLine.setAttribute('stroke-dasharray', '6 4'); this.priceTag.hidden = false; this.priceTag.textContent = price.toFixed(2); this.priceTag.style.top = `${y}px`; this.priceTag.style.left = `${Math.min(end.x + 14, this.chartEl.clientWidth - 70)}px`; return; } const a = this.snapPoint(start); const b = this.snapPoint(end); if (a.t != null && b.t != null) this.setLinePreview(a, b, '#65b7cf', 2); } clearGesture() { this.gesture = null; if (this.priceTag) this.priceTag.hidden = true; // The pending anchor's rubber band must survive between the two clicks. if (!this.pendingAnchor) this.clearLinePreview(); } setClickHandler(handler) { this.onChartClick = handler; } setLineChangeHandler(handler) { this.onLineChange = handler; } setLineEndHandler(handler) { this.onLineEnd = handler; } setLineDuplicateHandler(handler) { this.onLineDuplicate = handler; } setLineDeleteHandler(handler) { this.onLineDelete = handler; } setSelectedLine(id) { this.selectedLineId = id; this.hideContextMenu(); for (const level of this.levels.filter(value => value.kind === 'manual')) { if (ConfluenceChart.isFlat(level)) { this.priceLines.get(level.id)?.line.applyOptions({ title: this.seriesTitle(level) }); } else { this.levelSeries.get(level.id)?.series.applyOptions({ title: this.seriesTitle(level) }); } } this.renderAnchorHandles(); } setSelectedDrawing(id) { this.selectedDrawingId = id; this.renderComments(); } focusLine(id) { this.setSelectedLine(id); const level = this.levels.find(value => value.id === id && value.kind === 'manual'); if (!level) return; if (ConfluenceChart.isFlat(level)) { const y = this.candles.priceToCoordinate(level.anchor_p); if (y == null) return; this.lineFocus.setAttribute('x1', 0); this.lineFocus.setAttribute('y1', y); this.lineFocus.setAttribute('x2', this.overlayLayer.getBoundingClientRect().width); this.lineFocus.setAttribute('y2', y); } else { if (this.lineHitTarget.hasAttribute('hidden')) return; for (const attribute of ['x1', 'y1', 'x2', 'y2']) { this.lineFocus.setAttribute(attribute, this.lineHitTarget.getAttribute(attribute)); } } this.lineFocus.setAttribute('stroke', ConfluenceChart.levelColor(level)); const lineWidth = level.line_width || 2; this.lineFocus.style.setProperty('--line-focus-start-width', `${lineWidth + 10}px`); this.lineFocus.style.setProperty('--line-focus-width', `${lineWidth}px`); this.lineFocus.removeAttribute('hidden'); this.lineFocus.style.animation = 'none'; void this.lineFocus.getBoundingClientRect(); this.lineFocus.style.animation = ''; clearTimeout(this.lineFocusTimer); this.lineFocusTimer = setTimeout(() => this.lineFocus.setAttribute('hidden', ''), 800); } focusComment(id) { const node = this.commentNodes.get(id); if (!node) return; clearTimeout(node.focusTimer); node.root.classList.remove('focus'); void node.root.getBoundingClientRect(); node.root.classList.add('focus'); node.focusTimer = setTimeout(() => node.root.classList.remove('focus'), 800); } setLinePreview(start, end, color, lineWidth) { if (start.t === end.t) return; const x1 = this.chart.timeScale().timeToCoordinate(start.t); const x2 = this.chart.timeScale().timeToCoordinate(end.t); const y1 = this.candles.priceToCoordinate(start.p); const y2 = this.candles.priceToCoordinate(end.p); if ([x1, x2, y1, y2].some(value => value == null)) return; this.previewLine.removeAttribute('hidden'); this.previewLine.setAttribute('x1', x1); this.previewLine.setAttribute('y1', y1); this.previewLine.setAttribute('x2', x2); this.previewLine.setAttribute('y2', y2); this.previewLine.setAttribute('stroke', color); this.previewLine.setAttribute('stroke-width', lineWidth); this.previewLine.setAttribute('stroke-dasharray', '6 4'); } clearLinePreview() { if (this.previewLine) this.previewLine.setAttribute('hidden', ''); } updateLineTooltip(param) { const id = this.hitTest(param); const line = this.levels.find(level => level.id === id); this.tooltip.hidden = !line; if (!line) return; this.tooltip.textContent = `#${line.number} ${line.label}`; this.tooltip.style.left = `${param.point.x + 12}px`; this.tooltip.style.top = `${Math.max(8, param.point.y - 30)}px`; } hitTest(param) { let best = null; const visible = this.visibleBarIndexes(); if (!visible) return null; for (const level of this.levels.filter(value => value.kind === 'manual' && ConfluenceChart.isFlat(value) && !value.hidden)) { const y = this.candles.priceToCoordinate(level.anchor_p); const distance = y == null ? Infinity : Math.abs(y - param.point.y); if (distance <= 6 && (!best || distance < best.distance)) best = { id: level.id, distance }; } for (const level of this.levels.filter(value => value.kind === 'manual' && !ConfluenceChart.isFlat(value))) { const startIndex = Math.max(this.indexAt(level.anchor_t), visible.from); const naturalEnd = level.cutoff_t == null ? visible.to : this.indexAt(level.cutoff_t); const endIndex = Math.min(naturalEnd, visible.to); if (endIndex <= startIndex) continue; const start = { x: this.coordinateAtIndex(startIndex), y: this.candles.priceToCoordinate(this.linePriceAtIndex(level, startIndex)), }; const end = { x: this.coordinateAtIndex(endIndex), y: this.candles.priceToCoordinate(this.linePriceAtIndex(level, endIndex)), }; if ([start.x, start.y, end.x, end.y].some(value => value == null) || start.x === end.x) continue; if (param.point.x < Math.min(start.x, end.x) - 6 || param.point.x > Math.max(start.x, end.x) + 6) continue; const lineY = start.y + (end.y - start.y) * (param.point.x - start.x) / (end.x - start.x); const distance = Math.abs(lineY - param.point.y); if (distance <= 6 && (!best || distance < best.distance)) best = { id: level.id, distance }; } return best?.id || null; } /** * Fractional index of a timestamp in the bar series. Mirrors index_at() in * app/analysis/bar_space.py — the chart spaces bars evenly however much time * separates them, so this is the space a straight line is straight in. */ indexAt(time) { const bars = this.bars; if (bars.length < 2) return 0; if (time <= bars[0].t) { const step = bars[1].t - bars[0].t; return step ? (time - bars[0].t) / step : 0; } const last = bars.length - 1; if (time >= bars[last].t) { const step = bars[last].t - bars[last - 1].t; return last + (step ? (time - bars[last].t) / step : 0); } let lo = 0; let hi = last; while (hi - lo > 1) { const mid = (lo + hi) >> 1; if (bars[mid].t <= time) lo = mid; else hi = mid; } const span = bars[hi].t - bars[lo].t; return lo + (span ? (time - bars[lo].t) / span : 0); } timeAtIndex(index) { const bars = this.bars; if (bars.length < 2) return bars[0]?.t ?? 0; if (index <= 0) return Math.round(bars[0].t + index * (bars[1].t - bars[0].t)); const last = bars.length - 1; if (index >= last) { return Math.round(bars[last].t + (index - last) * (bars[last].t - bars[last - 1].t)); } const lower = Math.floor(index); const fraction = index - lower; return Math.round(bars[lower].t + fraction * (bars[lower + 1].t - bars[lower].t)); } visibleBarIndexes() { const plot = this.plotCanvas()?.getBoundingClientRect(); if (!plot) return null; const from = this.indexAtCoordinate(0); const to = this.indexAtCoordinate(plot.width); return from == null || to == null ? null : { from, to }; } linePriceAtIndex(level, index) { const start = this.indexAt(level.anchor_t); const end = this.indexAt(level.last_t); const endPrice = level.anchor_p + level.slope * (level.last_t - level.anchor_t); return end === start ? level.anchor_p : level.anchor_p + (endPrice - level.anchor_p) * (index - start) / (end - start); } seriesLineData(level) { if (!this.bars.length) return []; const start = this.indexAt(level.anchor_t); const lastBar = this.bars.length - 1; const cutoff = level.cutoff_t == null ? lastBar : this.indexAt(level.cutoff_t); const end = Math.min(lastBar, cutoff); if (start > end) return []; const anchorEnd = this.indexAt(level.last_t); const indexes = [start]; if (anchorEnd > start && anchorEnd < end) indexes.push(anchorEnd); if (end > indexes[indexes.length - 1]) indexes.push(end); return indexes.map(index => ({ time: this.timeAtIndex(index), value: this.linePriceAtIndex(level, index), })); } renderTrendlineProjections() { if (!this.projectionLayer || !this.bars.length) return; const visible = this.visibleBarIndexes(); if (!visible) return; const lastBar = this.bars.length - 1; const lines = this.levels .filter(level => level.kind === 'manual' && !level.hidden && !ConfluenceChart.isFlat(level)) .map(level => { const start = Math.max(lastBar, this.indexAt(level.anchor_t), visible.from); const naturalEnd = level.cutoff_t == null ? visible.to : this.indexAt(level.cutoff_t); const end = Math.min(naturalEnd, visible.to); if (end <= start) return null; const x1 = this.coordinateAtIndex(start); const x2 = this.coordinateAtIndex(end); const y1 = this.candles.priceToCoordinate(this.linePriceAtIndex(level, start)); const y2 = this.candles.priceToCoordinate(this.linePriceAtIndex(level, end)); if ([x1, x2, y1, y2].some(value => value == null)) return null; const node = document.createElementNS('http://www.w3.org/2000/svg', 'line'); node.dataset.lineId = level.id; node.setAttribute('x1', x1); node.setAttribute('y1', y1); node.setAttribute('x2', x2); node.setAttribute('y2', y2); node.setAttribute('stroke', ConfluenceChart.levelColor(level)); node.setAttribute('stroke-width', level.line_width || 2); return node; }) .filter(Boolean); this.projectionLayer.replaceChildren(...lines); } lineData(level) { // Interpolated across bars, matching what the server scores the level at. // Doing it per second instead kicked the line upward at every session gap, // because a one-hour halt is one bar wide but an hour of slope. const endPrice = level.anchor_p + level.slope * (level.last_t - level.anchor_t); const times = [level.anchor_t, level.last_t]; const cutoffIndex = level.cutoff_t == null ? -1 : this.bars.findIndex(bar => bar.t >= level.cutoff_t); const target = cutoffIndex >= 0 ? this.bars[cutoffIndex] : this.bars[this.bars.length - 1]; if (target && target.t > level.last_t) times.push(target.t); const startIndex = this.indexAt(level.anchor_t); const span = this.indexAt(level.last_t) - startIndex; return times .filter((time, index) => index === 0 || time !== times[index - 1]) .map(time => ({ time, value: span ? level.anchor_p + (endPrice - level.anchor_p) * (this.indexAt(time) - startIndex) / span : level.anchor_p, })); } renderAnchorHandles() { const level = this.levels.find( value => value.id === this.selectedLineId && value.kind === 'manual' && !ConfluenceChart.isFlat(value), ); if (!level || !this.anchorHandles.length) { this.anchorHandles.forEach(handle => handle.setAttribute('hidden', '')); this.lineHitTarget?.setAttribute('hidden', ''); return; } const points = [ { time: level.anchor_t, value: level.anchor_p }, { time: level.last_t, value: level.anchor_p + level.slope * (level.last_t - level.anchor_t), }, ]; const visible = this.visibleBarIndexes(); const hitEnd = level.cutoff_t == null ? visible?.to : this.indexAt(level.cutoff_t); const hitIndexes = [this.indexAt(level.anchor_t), hitEnd]; const hitPoints = hitIndexes.map(index => ({ x: index == null ? null : this.coordinateAtIndex(index), y: index == null ? null : this.candles.priceToCoordinate(this.linePriceAtIndex(level, index)), })); if (hitPoints.some(point => point.x == null || point.y == null)) { this.lineHitTarget.setAttribute('hidden', ''); } else { this.lineHitTarget.removeAttribute('hidden'); this.lineHitTarget.setAttribute('x1', hitPoints[0].x); this.lineHitTarget.setAttribute('y1', hitPoints[0].y); this.lineHitTarget.setAttribute('x2', hitPoints[1].x); this.lineHitTarget.setAttribute('y2', hitPoints[1].y); } points.forEach((point, index) => { const x = this.coordinateAtTime(point.time); const y = this.candles.priceToCoordinate(point.value); const handle = this.anchorHandles[index]; if (x == null || y == null) { handle.setAttribute('hidden', ''); return; } handle.removeAttribute('hidden'); handle.setAttribute('cx', x); handle.setAttribute('cy', y); handle.setAttribute('fill', ConfluenceChart.levelColor(level)); }); } startLineDrag(event) { if (event.button !== 0) return; const level = this.levels.find(value => value.id === this.selectedLineId); const point = this.eventPoint(event); if (!level || !point || point.t == null) return; event.preventDefault(); event.stopPropagation(); this.draggingLine = { id: level.id, start: point, original: { ...level }, moved: false, }; event.currentTarget.setPointerCapture?.(event.pointerId); } moveLine(event) { if (!this.draggingLine) return; const point = this.eventPoint(event); const level = this.levels.find(value => value.id === this.draggingLine.id); if (!point || point.t == null || !this.withinPlot(point) || !level) return; event.preventDefault(); const { original, start } = this.draggingLine; const indexShift = Math.round(this.indexAt(point.t) - this.indexAt(start.t)); const priceShift = ConfluenceChart.snapToTick(point.p - start.p); const anchorT = this.timeAtIndex(this.indexAt(original.anchor_t) + indexShift); const lastT = this.timeAtIndex(this.indexAt(original.last_t) + indexShift); const endPrice = original.anchor_p + original.slope * (original.last_t - original.anchor_t) + priceShift; level.anchor_t = anchorT; level.last_t = lastT; level.anchor_p = original.anchor_p + priceShift; level.slope = (endPrice - level.anchor_p) / (lastT - anchorT); if (original.cutoff_t != null) { level.cutoff_t = this.timeAtIndex(this.indexAt(original.cutoff_t) + indexShift); } this.draggingLine.moved = indexShift !== 0 || priceShift !== 0; const entry = this.levelSeries.get(level.id); if (entry) entry.series.setData(this.seriesLineData(level)); this.renderAnchorHandles(); this.renderTrendlineProjections(); } finishLineDrag(event) { if (!this.draggingLine) return; event.preventDefault(); const level = this.levels.find(value => value.id === this.draggingLine.id); const moved = this.draggingLine.moved; this.draggingLine = null; if (moved && level && this.onLineChange) this.onLineChange({ ...level }); } startAnchorDrag(event, anchor) { event.preventDefault(); event.stopPropagation(); this.draggingAnchor = { id: this.selectedLineId, anchor }; event.currentTarget.setPointerCapture?.(event.pointerId); } moveAnchor(event) { if (!this.draggingAnchor || !this.chartEl) return; const level = this.levels.find(value => value.id === this.draggingAnchor.id); if (!level || !this.bars.length) return; const point = this.eventPoint(event); if (!point || !this.withinPlot(point)) { this.hideSnapDot(); return; } const snapped = this.snapPoint(point); if (snapped.t == null || snapped.p == null) return; const time = snapped.t; const price = snapped.p; if (this.snapToBars) this.showSnapDot(snapped, point); const secondPrice = level.anchor_p + level.slope * (level.last_t - level.anchor_t); if (this.draggingAnchor.anchor === 'start') { if (time >= level.last_t) return; level.anchor_t = time; level.anchor_p = price; level.slope = (secondPrice - price) / (level.last_t - time); } else { if (time <= level.anchor_t) return; if (level.cutoff_t != null && time >= level.cutoff_t) return; level.last_t = time; level.slope = (price - level.anchor_p) / (time - level.anchor_t); } const entry = this.levelSeries.get(level.id); if (entry) entry.series.setData(this.seriesLineData(level)); this.renderAnchorHandles(); this.renderTrendlineProjections(); } finishAnchorDrag(event) { if (!this.draggingAnchor) return; event.preventDefault(); const level = this.levels.find(value => value.id === this.draggingAnchor.id); this.draggingAnchor = null; this.hideSnapDot(); if (level && this.onLineChange) this.onLineChange({ ...level }); } showContextMenu(event) { const level = this.levels.find( value => value.id === this.selectedLineId && value.kind === 'manual' && !ConfluenceChart.isFlat(value), ); if (!level || !this.bars.length) return; event.preventDefault(); const point = this.eventPoint(event); if (!point || !this.withinPlot(point) || point.t == null) return; const cutoff = this.bars.reduce((nearest, bar) => Math.abs(bar.t - point.t) < Math.abs(nearest.t - point.t) ? bar : nearest ).t; this.contextLineId = level.id; this.contextCutoff = cutoff > level.last_t ? cutoff : null; this.contextEndButton.hidden = this.contextCutoff == null; this.contextMenu.hidden = false; const plot = this.plotCanvas().getBoundingClientRect(); this.contextMenu.style.left = `${Math.max(4, Math.min(point.x, plot.width - 170))}px`; this.contextMenu.style.top = `${Math.max(4, Math.min(point.y, plot.height - this.contextMenu.offsetHeight - 4))}px`; } hideContextMenu() { if (this.contextMenu) this.contextMenu.hidden = true; this.contextCutoff = null; this.contextLineId = null; } dismissContextMenu() { if (!this.contextMenu || this.contextMenu.hidden) return false; this.hideContextMenu(); return true; } endSelectedLineHere() { const level = this.levels.find(value => value.id === this.selectedLineId); if (!level || this.contextCutoff == null) return; level.cutoff_t = this.contextCutoff; const entry = this.levelSeries.get(level.id); if (entry) entry.series.setData(this.seriesLineData(level)); this.renderTrendlineProjections(); this.hideContextMenu(); if (this.onLineEnd) this.onLineEnd({ ...level }); } // Tinted by the bar's own direction, muted so the candles stay the subject. static toVolume(bar) { return { time: bar.t, value: bar.v, color: bar.c >= bar.o ? 'rgba(39,130,92,.38)' : 'rgba(189,69,69,.38)', }; } toCandle(bar) { return { time: bar.t, open: bar.o, high: bar.h, low: bar.l, close: bar.c }; } destroy() { if (this.resizeObserver) this.resizeObserver.disconnect(); if (this.plotResizeObserver) this.plotResizeObserver.disconnect(); if (this.contextLabelFrame != null) cancelAnimationFrame(this.contextLabelFrame); clearTimeout(this.lineFocusTimer); for (const node of this.commentNodes.values()) clearTimeout(node.focusTimer); if (this.chartEl && this.clickListener) this.chartEl.removeEventListener('click', this.clickListener); if (this.chartEl && this.contextListener) this.chartEl.removeEventListener('contextmenu', this.contextListener); if (this.anchorMoveListener) window.removeEventListener('pointermove', this.anchorMoveListener); if (this.anchorUpListener) window.removeEventListener('pointerup', this.anchorUpListener); if (this.lineMoveListener) window.removeEventListener('pointermove', this.lineMoveListener); if (this.lineUpListener) window.removeEventListener('pointerup', this.lineUpListener); if (this.chartEl && this.toolDownListener) this.chartEl.removeEventListener('pointerdown', this.toolDownListener); if (this.toolMoveListener) window.removeEventListener('pointermove', this.toolMoveListener); if (this.toolUpListener) window.removeEventListener('pointerup', this.toolUpListener); if (this.chart) this.chart.remove(); } } ConfluenceChart.tfColors = { '1m':'#82909f', '2m':'#8a92df', '5m':'#65b7cf', '15m':'#45c39b', '30m':'#a8c85d', '1h':'#efb643', '1d':'#d96073', }; // VWAP and the prior-day levels are both stamped 1d, so without their own // colours they would be indistinguishable from the daily moving averages. ConfluenceChart.kindColors = { vwap: '#b07ad6', horizontal: '#9fb0c4' }; ConfluenceChart.symbolIcons = { 'arrow-up': 'fa-arrow-up', 'arrow-down': 'fa-arrow-down', 'face-smile': 'fa-face-smile', 'hand-point-right': 'fa-hand-point-right', skull: 'fa-skull', 'face-laugh-squint': 'fa-face-laugh-squint', 'champagne-glasses': 'fa-champagne-glasses', 'arrow-left': 'fa-arrow-left', 'arrow-right': 'fa-arrow-right', hand: 'fa-hand', 'right-to-bracket': 'fa-right-to-bracket', play: 'fa-play', }; ConfluenceChart.levelColor = level => level.color || ConfluenceChart.kindColors[level.kind] || ConfluenceChart.tfColors[level.tf]; window.ConfluenceChart = ConfluenceChart;