candlebar added
All checks were successful
SonarQube Scan / SonarQube Trigger (push) Successful in 1m10s
All checks were successful
SonarQube Scan / SonarQube Trigger (push) Successful in 1m10s
This commit is contained in:
183
templates/candle_coin.html
Normal file
183
templates/candle_coin.html
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>XRP Candlestick Chart</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.0.2/luxon.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-luxon/1.1.0/chartjs-adapter-luxon.min.js"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 20px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: white;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
height: 60vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.info-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.info-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.info-label {
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.info-value {
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>XRP Candlestick Chart</h1>
|
||||||
|
<div class="chart-container">
|
||||||
|
<canvas id="candlestickChart"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="info-container">
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">Open</div>
|
||||||
|
<div class="info-value" id="openPrice">-</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">High</div>
|
||||||
|
<div class="info-value" id="highPrice">-</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">Low</div>
|
||||||
|
<div class="info-value" id="lowPrice">-</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-label">Close</div>
|
||||||
|
<div class="info-value" id="closePrice">-</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let chart;
|
||||||
|
|
||||||
|
async function fetchCandlestickData() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/data/{{coin}}/candlestick');
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching candlestick data:', error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateInfoDisplay(candlestick) {
|
||||||
|
document.getElementById('openPrice').textContent = `$${candlestick.o.toFixed(4)}`;
|
||||||
|
document.getElementById('highPrice').textContent = `$${candlestick.h.toFixed(4)}`;
|
||||||
|
document.getElementById('lowPrice').textContent = `$${candlestick.l.toFixed(4)}`;
|
||||||
|
document.getElementById('closePrice').textContent = `$${candlestick.c.toFixed(4)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateChart() {
|
||||||
|
const data = await fetchCandlestickData();
|
||||||
|
if (!data) return;
|
||||||
|
|
||||||
|
if (data.length > 0) {
|
||||||
|
updateInfoDisplay(data[data.length - 1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (chart) {
|
||||||
|
chart.data.datasets[0].data = data;
|
||||||
|
chart.update();
|
||||||
|
} else {
|
||||||
|
const ctx = document.getElementById('candlestickChart').getContext('2d');
|
||||||
|
chart = new Chart(ctx, {
|
||||||
|
type: 'candlestick',
|
||||||
|
data: {
|
||||||
|
datasets: [{
|
||||||
|
label: 'XRP Price',
|
||||||
|
data: data,
|
||||||
|
color: {
|
||||||
|
up: 'rgb(75, 192, 75)',
|
||||||
|
down: 'rgb(192, 75, 75)',
|
||||||
|
unchanged: 'rgb(90, 90, 90)',
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'XRP Price Movements'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: function(context) {
|
||||||
|
const d = context.raw;
|
||||||
|
return [
|
||||||
|
`Open: $${d.o.toFixed(4)}`,
|
||||||
|
`High: $${d.h.toFixed(4)}`,
|
||||||
|
`Low: $${d.l.toFixed(4)}`,
|
||||||
|
`Close: $${d.c.toFixed(4)}`
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
ticks: {
|
||||||
|
callback: function(value) {
|
||||||
|
return '$' + value.toFixed(4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
type: 'time',
|
||||||
|
time: {
|
||||||
|
unit: 'hour',
|
||||||
|
tooltipFormat: 'yyyy-MM-dd HH:mm'
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
maxTicksLimit: 10,
|
||||||
|
maxRotation: 45,
|
||||||
|
minRotation: 45
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update every 5 seconds
|
||||||
|
updateChart();
|
||||||
|
setInterval(updateChart, 5000);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user