571 lines
29 KiB
HTML
571 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Real-Time ETH/USDT Chart</title>
|
|
<script src="https://unpkg.com/lightweight-charts@4.1.3/dist/lightweight-charts.standalone.production.js"></script>
|
|
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
|
|
|
<!-- NOTE: These 'url_for' will not work in a static HTML file. -->
|
|
<!-- They are placeholders for a Flask environment. For a standalone file, you would link directly to the JS files. -->
|
|
<script src="{{ url_for('static', filename='candle-aggregator.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='hts.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='ema.js') }}"></script>
|
|
<script src="{{ url_for('static',filename='bb.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='hurst.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='indicators.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='indicator-manager.js') }}"></script>
|
|
|
|
<style>
|
|
:root {
|
|
--background-dark: #161A25; --container-dark: #1E222D; --border-color: #2A2E39;
|
|
--text-primary: #D1D4DC; --text-secondary: #8A91A0; --button-bg: #363A45;
|
|
--button-hover-bg: #434651; --accent-orange: #F0B90B; --green: #26a69a; --red: #ef5350;
|
|
|
|
/* Colors for measure tool */
|
|
--measure-tool-up-bg: rgba(41, 98, 255, 0.2);
|
|
--measure-tool-up-border: #2962FF;
|
|
--measure-tool-down-bg: rgba(239, 83, 80, 0.2);
|
|
--measure-tool-down-border: #ef5350;
|
|
--measure-tool-text: #FFFFFF;
|
|
}
|
|
body {
|
|
background-color: var(--background-dark); color: var(--text-primary);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
margin: 0; padding: 20px 0; display: flex; flex-direction: column; align-items: center;
|
|
}
|
|
.header {
|
|
width: 90%; max-width: 1400px; text-align: left; padding-bottom: 15px;
|
|
border-bottom: 1px solid var(--border-color); margin-bottom: 20px;
|
|
}
|
|
.header h1 { margin: 0; font-size: 24px; }
|
|
#chart-wrapper { position: relative; width: 90%; max-width: 1400px; height: 500px; }
|
|
#chart { width: 100%; height: 100%; }
|
|
.control-panel {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 15px; width: 90%; max-width: 1400px; padding: 20px 0;
|
|
}
|
|
.control-cell {
|
|
background-color: var(--container-dark); border: 1px solid var(--border-color);
|
|
border-radius: 8px; padding: 15px; display: flex; flex-direction: column;
|
|
justify-content: flex-start; align-items: center; min-height: 80px;
|
|
}
|
|
.indicator-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
|
|
.action-button, .input-field, .control-cell select {
|
|
background-color: var(--button-bg); border: 1px solid var(--border-color);
|
|
color: var(--text-primary); padding: 8px 12px; text-align: center;
|
|
text-decoration: none; display: inline-block; font-size: 14px;
|
|
border-radius: 5px; cursor: pointer; transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
.action-button:hover, .control-cell select:hover { background-color: var(--button-hover-bg); }
|
|
.input-field { width: 60px; }
|
|
#candle-timer { font-size: 2rem; font-weight: 500; color: var(--accent-orange); }
|
|
#timeframe-display { margin-top: 10px; min-width: 60px; }
|
|
.progress-bar-container {
|
|
width: 80%; height: 4px; background-color: var(--button-bg);
|
|
border-radius: 2px; margin-top: 10px; overflow: hidden;
|
|
}
|
|
.progress-bar {
|
|
width: 0%; height: 100%; background-color: var(--green);
|
|
transition: width 0.4s ease-out;
|
|
}
|
|
|
|
/* --- Styles for Measure Tool --- */
|
|
#measure-tool {
|
|
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
|
pointer-events: none; overflow: hidden; z-index: 10;
|
|
}
|
|
#measure-box { position: absolute; }
|
|
#measure-svg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
|
|
#measure-tooltip {
|
|
position: absolute; color: var(--measure-tool-text); padding: 4px 8px;
|
|
border-radius: 4px; font-size: 11px; line-height: 1.2;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
}
|
|
|
|
/* --- Styles for Timeframe Modal --- */
|
|
.modal-overlay {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
display: none; /* Hidden by default */
|
|
justify-content: center; align-items: center; z-index: 1000;
|
|
}
|
|
.modal {
|
|
background-color: var(--container-dark); padding: 25px; border-radius: 8px;
|
|
border: 1px solid var(--border-color); text-align: center;
|
|
width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
|
}
|
|
.modal h2 {
|
|
margin-top: 0; margin-bottom: 20px; font-size: 18px; color: var(--text-primary);
|
|
}
|
|
.modal .input-field {
|
|
width: 100%; box-sizing: border-box; font-size: 24px;
|
|
padding: 10px; margin-bottom: 10px; text-align: center;
|
|
}
|
|
.modal #timeframe-preview-text {
|
|
color: var(--text-secondary); font-size: 14px; margin-top: 0;
|
|
margin-bottom: 20px; min-height: 20px;
|
|
}
|
|
.modal .action-button { width: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1 id="chart-title">{{ symbol }} Chart</h1>
|
|
</div>
|
|
|
|
<div id="chart-wrapper">
|
|
<div id="chart"></div>
|
|
<div id="measure-tool" style="display: none;">
|
|
<div id="measure-box"></div>
|
|
<svg id="measure-svg"></svg>
|
|
<div id="measure-tooltip"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-panel">
|
|
<div class="control-cell">
|
|
<h3>Candle Closes In</h3>
|
|
<div id="candle-timer">--:--</div>
|
|
<div id="timeframe-display" class="action-button">1m</div>
|
|
<div id="progress-container" class="progress-bar-container">
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="control-cell" id="indicator-cell-1"></div>
|
|
<div class="control-cell" id="indicator-cell-2"></div>
|
|
<div class="control-cell" id="indicator-cell-3"></div>
|
|
<div class="control-cell" id="indicator-cell-4"></div>
|
|
</div>
|
|
|
|
<!-- Timeframe Modal -->
|
|
<div id="timeframe-modal-overlay" class="modal-overlay">
|
|
<div id="timeframe-modal" class="modal">
|
|
<h2>Change interval</h2>
|
|
<input type="number" id="timeframe-input" class="input-field" min="1" placeholder="Enter minutes"/>
|
|
<p id="timeframe-preview-text"></p>
|
|
<button id="timeframe-confirm-btn" class="action-button">OK</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
const chartElement = document.getElementById('chart');
|
|
const chart = LightweightCharts.createChart(chartElement, {
|
|
width: chartElement.clientWidth, height: 500,
|
|
layout: { background: { type: 'solid', color: '#1E222D' }, textColor: '#D1D4DC' },
|
|
grid: { vertLines: { color: '#2A2E39' }, horzLines: { color: '#2A2E39' } },
|
|
timeScale: { timeVisible: true, secondsVisible: true },
|
|
crosshair: {
|
|
mode: LightweightCharts.CrosshairMode.Normal,
|
|
},
|
|
});
|
|
const candlestickSeries = chart.addCandlestickSeries({
|
|
upColor: 'rgba(255, 152, 0, 1.0)', downColor: 'rgba(255, 152, 0, 0.66)', borderDownColor: 'rgba(255, 152, 0, 0.66)',
|
|
borderUpColor: 'rgba(255, 152, 0, 1.0)', wickDownColor: 'rgba(255, 152, 0, 0.66)', wickUpColor: 'rgba(255, 152, 0, 1.0)'
|
|
});
|
|
|
|
const originalAddLineSeries = chart.addLineSeries;
|
|
chart.addLineSeries = function(options) {
|
|
const newOptions = { ...options, crosshairMarkerVisible: false, };
|
|
return originalAddLineSeries.call(this, newOptions);
|
|
};
|
|
|
|
let baseCandleData1m = [];
|
|
let displayedCandleData = [];
|
|
let manager;
|
|
let currentTimeframeMinutes = 1;
|
|
|
|
const candleTimerDiv = document.getElementById('candle-timer');
|
|
const chartTitle = document.getElementById('chart-title');
|
|
const progressContainer = document.getElementById('progress-container');
|
|
const progressBar = document.querySelector('.progress-bar');
|
|
|
|
const measureToolEl = document.getElementById('measure-tool');
|
|
const measureBoxEl = document.getElementById('measure-box');
|
|
const measureSvgEl = document.getElementById('measure-svg');
|
|
const measureTooltipEl = document.getElementById('measure-tooltip');
|
|
let measureState = { active: false, finished: false, startPoint: null, endPoint: null };
|
|
let isRedrawScheduled = false;
|
|
|
|
const timeframeDisplay = document.getElementById('timeframe-display');
|
|
const modalOverlay = document.getElementById('timeframe-modal-overlay');
|
|
const modalInput = document.getElementById('timeframe-input');
|
|
const modalPreviewText = document.getElementById('timeframe-preview-text');
|
|
const modalConfirmBtn = document.getElementById('timeframe-confirm-btn');
|
|
|
|
function openModal(initialValue = '') {
|
|
modalOverlay.style.display = 'flex';
|
|
modalInput.value = initialValue;
|
|
updatePreviewText();
|
|
modalInput.focus();
|
|
modalInput.select();
|
|
}
|
|
|
|
function closeModal() {
|
|
modalOverlay.style.display = 'none';
|
|
}
|
|
|
|
function updatePreviewText() {
|
|
const value = modalInput.value;
|
|
if (value && parseInt(value) > 0) {
|
|
modalPreviewText.textContent = `${value} minute${parseInt(value) > 1 ? 's' : ''}`;
|
|
} else {
|
|
modalPreviewText.textContent = '';
|
|
}
|
|
}
|
|
|
|
function confirmTimeframe() {
|
|
const newTimeframe = parseInt(modalInput.value);
|
|
if (newTimeframe && newTimeframe > 0) {
|
|
currentTimeframeMinutes = newTimeframe;
|
|
timeframeDisplay.textContent = `${newTimeframe}m`;
|
|
updateChartForTimeframe(true);
|
|
closeModal();
|
|
}
|
|
}
|
|
|
|
timeframeDisplay.addEventListener('click', () => openModal(currentTimeframeMinutes));
|
|
modalConfirmBtn.addEventListener('click', confirmTimeframe);
|
|
modalInput.addEventListener('input', updatePreviewText);
|
|
modalInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') confirmTimeframe(); });
|
|
modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) closeModal(); });
|
|
window.addEventListener('keydown', (e) => {
|
|
if (modalOverlay.style.display === 'flex' && e.key === 'Escape') {
|
|
closeModal();
|
|
}
|
|
else if (modalOverlay.style.display !== 'flex' && !isNaN(parseInt(e.key)) && !e.ctrlKey && !e.metaKey) {
|
|
const activeEl = document.activeElement;
|
|
if (activeEl.tagName !== 'INPUT' && activeEl.tagName !== 'TEXTAREA') {
|
|
e.preventDefault();
|
|
openModal(e.key);
|
|
}
|
|
}
|
|
});
|
|
|
|
manager = createIndicatorManager(chart, baseCandleData1m, displayedCandleData);
|
|
manager.populateDropdowns();
|
|
|
|
const socket = io();
|
|
socket.on('connect', () => console.log('Socket.IO connected.'));
|
|
|
|
socket.on('history_progress', (data) => {
|
|
if (data && data.progress) progressBar.style.width = `${data.progress}%`;
|
|
});
|
|
|
|
socket.on('history_finished', (data) => {
|
|
if (!data || !data.klines_1m) return;
|
|
progressBar.style.width = '100%';
|
|
baseCandleData1m = data.klines_1m.map(k => ({
|
|
time: k[0] / 1000, open: parseFloat(k[1]), high: parseFloat(k[2]),
|
|
low: parseFloat(k[3]), close: parseFloat(k[4])
|
|
}));
|
|
updateChartForTimeframe(true);
|
|
setTimeout(() => { progressContainer.style.display = 'none'; }, 500);
|
|
});
|
|
|
|
// --- MODIFICATION START: Rewritten candle update and creation logic ---
|
|
function handleLiveUpdate(update) {
|
|
if (baseCandleData1m.length === 0 || displayedCandleData.length === 0) return;
|
|
|
|
// First, ensure the base 1m data is up-to-date.
|
|
const lastBaseCandle = baseCandleData1m[baseCandleData1m.length - 1];
|
|
if (update.time > lastBaseCandle.time) {
|
|
baseCandleData1m.push(update);
|
|
} else if (update.time === lastBaseCandle.time) {
|
|
baseCandleData1m[baseCandleData1m.length - 1] = update;
|
|
}
|
|
|
|
const candleDurationSeconds = currentTimeframeMinutes * 60;
|
|
let lastDisplayedCandle = displayedCandleData[displayedCandleData.length - 1];
|
|
|
|
// Check if the update belongs to the currently forming displayed candle
|
|
if (update.time >= lastDisplayedCandle.time && update.time < lastDisplayedCandle.time + candleDurationSeconds) {
|
|
// It does, so just update the High, Low, and Close prices
|
|
lastDisplayedCandle.high = Math.max(lastDisplayedCandle.high, update.high);
|
|
lastDisplayedCandle.low = Math.min(lastDisplayedCandle.low, update.low);
|
|
lastDisplayedCandle.close = update.close;
|
|
candlestickSeries.update(lastDisplayedCandle);
|
|
} else if (update.time >= lastDisplayedCandle.time + candleDurationSeconds) {
|
|
// This update is for a NEW candle.
|
|
const newCandleTime = Math.floor(update.time / candleDurationSeconds) * candleDurationSeconds;
|
|
|
|
// Create the new candle. Its O,H,L,C are all from this first tick.
|
|
const newCandle = {
|
|
time: newCandleTime,
|
|
open: update.open,
|
|
high: update.high,
|
|
low: update.low,
|
|
close: update.close,
|
|
};
|
|
|
|
displayedCandleData.push(newCandle);
|
|
candlestickSeries.update(newCandle);
|
|
|
|
// Since a new candle has been formed, we should recalculate indicators
|
|
manager.recalculateAllAfterHistory(baseCandleData1m, displayedCandleData);
|
|
}
|
|
}
|
|
|
|
let latestCandleUpdate = null;
|
|
let isUpdateScheduled = false;
|
|
|
|
function processLatestUpdate() {
|
|
if (latestCandleUpdate) {
|
|
handleLiveUpdate(latestCandleUpdate);
|
|
latestCandleUpdate = null;
|
|
}
|
|
isUpdateScheduled = false;
|
|
}
|
|
|
|
socket.on('candle_update', (update) => {
|
|
latestCandleUpdate = update;
|
|
if (!isUpdateScheduled) {
|
|
isUpdateScheduled = true;
|
|
requestAnimationFrame(processLatestUpdate);
|
|
}
|
|
});
|
|
|
|
socket.on('candle_closed', (closedCandle) => {
|
|
// This handler's primary job is to ensure data integrity by using the final, closed 1m candle.
|
|
|
|
// 1. Update the master 1-minute data array with the final version of the candle.
|
|
const candleIndex = baseCandleData1m.findIndex(c => c.time === closedCandle.time);
|
|
if (candleIndex !== -1) {
|
|
baseCandleData1m[candleIndex] = closedCandle;
|
|
} else {
|
|
// This case might happen if connection was lost and we missed updates for this candle
|
|
baseCandleData1m.push(closedCandle);
|
|
baseCandleData1m.sort((a, b) => a.time - b.time); // Keep it sorted just in case
|
|
}
|
|
|
|
if (displayedCandleData.length === 0) return;
|
|
|
|
// 2. Determine which displayed candle this closed 1m candle belongs to.
|
|
const candleDurationSeconds = currentTimeframeMinutes * 60;
|
|
const bucketTime = Math.floor(closedCandle.time / candleDurationSeconds) * candleDurationSeconds;
|
|
|
|
// 3. Find the displayed candle that needs to be corrected with final data.
|
|
const displayedCandleToUpdate = displayedCandleData.find(c => c.time === bucketTime);
|
|
if (!displayedCandleToUpdate) {
|
|
console.warn("Could not find a displayed candle to update for closed 1m candle at", new Date(closedCandle.time * 1000).toISOString());
|
|
// As a fallback, a full redraw can fix inconsistencies.
|
|
// updateChartForTimeframe(true);
|
|
return;
|
|
}
|
|
|
|
// 4. Find all 1m source candles for this bucket.
|
|
const sourceCandles = baseCandleData1m.filter(c =>
|
|
c.time >= bucketTime && c.time < bucketTime + candleDurationSeconds
|
|
);
|
|
|
|
// 5. If we have source candles, aggregate them to get the CORRECT final data.
|
|
if (sourceCandles.length > 0) {
|
|
const finalCandle = {
|
|
time: bucketTime,
|
|
open: sourceCandles[0].open,
|
|
high: Math.max(...sourceCandles.map(c => c.high)),
|
|
low: Math.min(...sourceCandles.map(c => c.low)),
|
|
close: sourceCandles[sourceCandles.length - 1].close
|
|
};
|
|
|
|
// 6. Update the specific candle in the displayed data array
|
|
const displayedIndex = displayedCandleData.findIndex(c => c.time === bucketTime);
|
|
if (displayedIndex !== -1) {
|
|
displayedCandleData[displayedIndex] = finalCandle;
|
|
}
|
|
|
|
// 7. Update the series on the chart and recalculate indicators for accuracy.
|
|
candlestickSeries.update(finalCandle);
|
|
manager.recalculateAllAfterHistory(baseCandleData1m, displayedCandleData);
|
|
}
|
|
});
|
|
// --- MODIFICATION END ---
|
|
|
|
function updateChartForTimeframe(isFullReset = false) {
|
|
if (baseCandleData1m.length === 0) return;
|
|
const visibleTimeRange = isFullReset ? null : chart.timeScale().getVisibleTimeRange();
|
|
const newCandleData = aggregateCandles(baseCandleData1m, currentTimeframeMinutes);
|
|
|
|
if (newCandleData.length > 0) {
|
|
displayedCandleData = newCandleData;
|
|
candlestickSeries.setData(displayedCandleData);
|
|
chartTitle.textContent = `{{ symbol }} Chart (${currentTimeframeMinutes}m)`;
|
|
manager.recalculateAllAfterHistory(baseCandleData1m, displayedCandleData);
|
|
if (visibleTimeRange) {
|
|
chart.timeScale().setVisibleRange(visibleTimeRange);
|
|
} else {
|
|
chart.timeScale().fitContent();
|
|
}
|
|
}
|
|
}
|
|
|
|
function clearMeasureTool() {
|
|
measureState = { active: false, finished: false, startPoint: null, endPoint: null };
|
|
measureToolEl.style.display = 'none';
|
|
measureSvgEl.innerHTML = '';
|
|
}
|
|
|
|
function formatDuration(seconds) {
|
|
const d = Math.floor(seconds / (3600*24));
|
|
const h = Math.floor(seconds % (3600*24) / 3600);
|
|
const m = Math.floor(seconds % 3600 / 60);
|
|
let result = '';
|
|
if (d > 0) result += `${d}d `;
|
|
if (h > 0) result += `${h}h `;
|
|
if (m > 0) result += `${m}m`;
|
|
return result.trim() || '0m';
|
|
}
|
|
|
|
function drawMeasureTool() {
|
|
if (!measureState.startPoint || !measureState.endPoint) return;
|
|
const startCoord = {
|
|
x: chart.timeScale().timeToCoordinate(measureState.startPoint.time),
|
|
y: candlestickSeries.priceToCoordinate(measureState.startPoint.price)
|
|
};
|
|
const endCoord = {
|
|
x: chart.timeScale().timeToCoordinate(measureState.endPoint.time),
|
|
y: candlestickSeries.priceToCoordinate(measureState.endPoint.price)
|
|
};
|
|
if (startCoord.x === null || startCoord.y === null || endCoord.x === null || endCoord.y === null) {
|
|
measureToolEl.style.display = 'none';
|
|
return;
|
|
}
|
|
measureToolEl.style.display = 'block';
|
|
const isUp = measureState.endPoint.price >= measureState.startPoint.price;
|
|
const boxColor = isUp ? 'var(--measure-tool-up-bg)' : 'var(--measure-tool-down-bg)';
|
|
const borderColor = isUp ? 'var(--measure-tool-up-border)' : 'var(--measure-tool-down-border)';
|
|
measureBoxEl.style.backgroundColor = boxColor;
|
|
measureBoxEl.style.borderColor = borderColor;
|
|
measureTooltipEl.style.backgroundColor = borderColor;
|
|
const minX = Math.min(startCoord.x, endCoord.x);
|
|
const maxX = Math.max(startCoord.x, endCoord.x);
|
|
const minY = Math.min(startCoord.y, endCoord.y);
|
|
const maxY = Math.max(startCoord.y, endCoord.y);
|
|
measureBoxEl.style.left = `${minX}px`;
|
|
measureBoxEl.style.top = `${minY}px`;
|
|
measureBoxEl.style.width = `${maxX - minX}px`;
|
|
measureBoxEl.style.height = `${maxY - minY}px`;
|
|
const midX = minX + (maxX - minX) / 2;
|
|
const midY = minY + (maxY - minY) / 2;
|
|
const arrowSize = 5;
|
|
const isTimeGoingForward = measureState.endPoint.time >= measureState.startPoint.time;
|
|
let hArrowPoints = isTimeGoingForward
|
|
? `${maxX - arrowSize},${midY - arrowSize} ${maxX},${midY} ${maxX - arrowSize},${midY + arrowSize}`
|
|
: `${minX + arrowSize},${midY - arrowSize} ${minX},${midY} ${minX + arrowSize},${midY + arrowSize}`;
|
|
let vArrowPoints = isUp
|
|
? `${midX - arrowSize},${minY + arrowSize} ${midX},${minY} ${midX + arrowSize},${minY + arrowSize}`
|
|
: `${midX - arrowSize},${maxY - arrowSize} ${midX},${maxY} ${midX + arrowSize},${maxY - arrowSize}`;
|
|
measureSvgEl.innerHTML = `
|
|
<line x1="${minX}" y1="${midY}" x2="${maxX}" y2="${midY}" stroke="${borderColor}" stroke-width="1"/>
|
|
<polygon points="${hArrowPoints}" fill="${borderColor}" />
|
|
<line x1="${midX}" y1="${minY}" x2="${midX}" y2="${maxY}" stroke="${borderColor}" stroke-width="1"/>
|
|
<polygon points="${vArrowPoints}" fill="${borderColor}" />
|
|
`;
|
|
const priceChange = measureState.endPoint.price - measureState.startPoint.price;
|
|
const pctChange = (priceChange / measureState.startPoint.price) * 100;
|
|
const timeDifference = measureState.endPoint.time - measureState.startPoint.time;
|
|
const bars = Math.round(timeDifference / (currentTimeframeMinutes * 60));
|
|
const duration = formatDuration(Math.abs(timeDifference));
|
|
measureTooltipEl.innerHTML = `
|
|
<div>${priceChange.toFixed(2)} (${pctChange.toFixed(2)}%)</div>
|
|
<div>${bars} bars, ${duration}</div>
|
|
`;
|
|
measureTooltipEl.style.left = `${midX}px`;
|
|
const tooltipMargin = 8;
|
|
if (isUp) {
|
|
measureTooltipEl.style.top = `${minY}px`;
|
|
measureTooltipEl.style.transform = `translate(-50%, calc(-100% - ${tooltipMargin}px))`;
|
|
} else {
|
|
measureTooltipEl.style.top = `${maxY}px`;
|
|
measureTooltipEl.style.transform = `translate(-50%, ${tooltipMargin}px)`;
|
|
}
|
|
}
|
|
|
|
const onMeasureMove = (param) => {
|
|
if (!measureState.active || !param.point) return;
|
|
measureState.endPoint.time = chart.timeScale().coordinateToTime(param.point.x);
|
|
measureState.endPoint.price = candlestickSeries.coordinateToPrice(param.point.y);
|
|
if (!measureState.endPoint.time || !measureState.endPoint.price) return;
|
|
drawMeasureTool();
|
|
};
|
|
|
|
const onMeasureUp = () => {
|
|
measureState.active = false;
|
|
measureState.finished = true;
|
|
chart.unsubscribeCrosshairMove(onMeasureMove);
|
|
};
|
|
|
|
let priceScaleDragState = { isDragging: false };
|
|
function priceScaleRedrawLoop() {
|
|
if (!priceScaleDragState.isDragging) return;
|
|
drawMeasureTool();
|
|
requestAnimationFrame(priceScaleRedrawLoop);
|
|
}
|
|
chartElement.addEventListener('mousedown', (e) => {
|
|
if (!measureState.finished) return;
|
|
const rect = chartElement.getBoundingClientRect();
|
|
const priceScaleWidth = chart.priceScale('right').width();
|
|
if (e.clientX > rect.left + rect.width - priceScaleWidth) {
|
|
priceScaleDragState.isDragging = true;
|
|
requestAnimationFrame(priceScaleRedrawLoop);
|
|
}
|
|
});
|
|
window.addEventListener('mouseup', () => {
|
|
if (priceScaleDragState.isDragging) {
|
|
priceScaleDragState.isDragging = false;
|
|
}
|
|
});
|
|
|
|
chart.timeScale().subscribeVisibleTimeRangeChange(() => {
|
|
if (measureState.finished) {
|
|
drawMeasureTool();
|
|
}
|
|
});
|
|
|
|
chart.subscribeCrosshairMove(() => {
|
|
if (measureState.finished && !isRedrawScheduled) {
|
|
isRedrawScheduled = true;
|
|
requestAnimationFrame(() => {
|
|
drawMeasureTool();
|
|
isRedrawScheduled = false;
|
|
});
|
|
}
|
|
});
|
|
|
|
chart.subscribeClick((param) => {
|
|
if (measureState.finished) {
|
|
clearMeasureTool();
|
|
return;
|
|
}
|
|
if (!param.point || !param.sourceEvent.shiftKey) return;
|
|
if (measureState.active) {
|
|
onMeasureUp();
|
|
return;
|
|
}
|
|
clearMeasureTool();
|
|
const time = chart.timeScale().coordinateToTime(param.point.x);
|
|
const price = candlestickSeries.coordinateToPrice(param.point.y);
|
|
if (!time || !price) return;
|
|
measureState.startPoint = { time, price };
|
|
measureState.endPoint = { time, price };
|
|
measureState.active = true;
|
|
measureToolEl.style.display = 'block';
|
|
drawMeasureTool();
|
|
chart.subscribeCrosshairMove(onMeasureMove);
|
|
});
|
|
|
|
setInterval(() => {
|
|
const selectedIntervalSeconds = currentTimeframeMinutes * 60;
|
|
const now = new Date().getTime() / 1000;
|
|
const secondsRemaining = Math.floor(selectedIntervalSeconds - (now % selectedIntervalSeconds));
|
|
const minutes = Math.floor(secondsRemaining / 60);
|
|
const seconds = secondsRemaining % 60;
|
|
candleTimerDiv.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
|
}, 1000);
|
|
|
|
window.addEventListener('resize', () => chart.resize(chartElement.clientWidth, 500));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|