426 lines
20 KiB
HTML
426 lines
20 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>
|
|
|
|
<!-- Indicator & Aggregation Scripts -->
|
|
<script src="{{ url_for('static', filename='candle-aggregator.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='sma.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-select { margin-top: 10px; }
|
|
.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;
|
|
}
|
|
</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>
|
|
<select id="timeframe-select">
|
|
<option value="1">1m</option>
|
|
<option value="2">2m</option>
|
|
<option value="3">3m</option>
|
|
<option value="4">4m</option>
|
|
<option value="5">5m</option>
|
|
</select>
|
|
<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>
|
|
|
|
<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 }
|
|
});
|
|
const candlestickSeries = chart.addCandlestickSeries({
|
|
upColor: '#26a69a', downColor: '#ef5350', borderDownColor: '#ef5350',
|
|
borderUpColor: '#26a69a', wickDownColor: '#ef5350', wickUpColor: '#26a69a',
|
|
});
|
|
|
|
let baseCandleData1m = [];
|
|
let displayedCandleData = [];
|
|
let manager;
|
|
|
|
const timeframeSelect = document.getElementById('timeframe-select');
|
|
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;
|
|
|
|
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);
|
|
});
|
|
|
|
socket.on('candle_update', (candle) => candlestickSeries.update(candle));
|
|
|
|
socket.on('candle_closed', (closedCandle) => {
|
|
const lastBaseCandle = baseCandleData1m.length > 0 ? baseCandleData1m[baseCandleData1m.length - 1] : null;
|
|
if (lastBaseCandle && lastBaseCandle.time === closedCandle.time) {
|
|
baseCandleData1m[baseCandleData1m.length - 1] = closedCandle;
|
|
} else {
|
|
baseCandleData1m.push(closedCandle);
|
|
}
|
|
updateChartForTimeframe(false);
|
|
});
|
|
|
|
function updateChartForTimeframe(isFullReset = false) {
|
|
const selectedIntervalMinutes = parseInt(timeframeSelect.value, 10);
|
|
if (baseCandleData1m.length === 0) return;
|
|
const visibleRange = isFullReset ? null : chart.timeScale().getVisibleLogicalRange();
|
|
const newCandleData = aggregateCandles(baseCandleData1m, selectedIntervalMinutes);
|
|
|
|
if (newCandleData.length > 0) {
|
|
displayedCandleData = newCandleData;
|
|
candlestickSeries.setData(displayedCandleData);
|
|
chartTitle.textContent = `{{ symbol }} Chart (${selectedIntervalMinutes}m)`;
|
|
manager.recalculateAllAfterHistory(baseCandleData1m, displayedCandleData);
|
|
if (visibleRange) chart.timeScale().setVisibleLogicalRange(visibleRange);
|
|
else chart.timeScale().fitContent();
|
|
}
|
|
}
|
|
|
|
timeframeSelect.addEventListener('change', () => updateChartForTimeframe(true));
|
|
|
|
// --- Measure Tool Logic ---
|
|
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;
|
|
if (isTimeGoingForward) {
|
|
hArrowPoints = `${maxX - arrowSize},${midY - arrowSize} ${maxX},${midY} ${maxX - arrowSize},${midY + arrowSize}`;
|
|
} else {
|
|
hArrowPoints = `${minX + arrowSize},${midY - arrowSize} ${minX},${midY} ${minX + arrowSize},${midY + arrowSize}`;
|
|
}
|
|
|
|
let vArrowPoints;
|
|
if (isUp) {
|
|
vArrowPoints = `${midX - arrowSize},${minY + arrowSize} ${midX},${minY} ${midX + arrowSize},${minY + arrowSize}`;
|
|
} else {
|
|
vArrowPoints = `${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 / (parseInt(timeframeSelect.value, 10) * 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);
|
|
};
|
|
|
|
// --- High-performance scaling logic for price axis drag ---
|
|
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();
|
|
const chartWidth = rect.width;
|
|
if (e.clientX > rect.left + chartWidth - priceScaleWidth) {
|
|
priceScaleDragState.isDragging = true;
|
|
requestAnimationFrame(priceScaleRedrawLoop);
|
|
}
|
|
});
|
|
|
|
window.addEventListener('mouseup', () => {
|
|
if (priceScaleDragState.isDragging) {
|
|
priceScaleDragState.isDragging = false;
|
|
}
|
|
});
|
|
// --- End high-performance scaling logic ---
|
|
|
|
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 = parseInt(timeframeSelect.value, 10) * 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>
|