91 lines
3.5 KiB
HTML
91 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Chart Updates Test</title>
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="test-plot" style="width:100%;height:400px;"></div>
|
|
|
|
<script>
|
|
// Test the fixed chart update logic
|
|
console.log('Testing chart update fix...');
|
|
|
|
// Create initial chart with volume trace
|
|
const plotElement = document.getElementById('test-plot');
|
|
|
|
const candlestickTrace = {
|
|
x: ['2025-12-10T09:00:00Z', '2025-12-10T09:01:00Z'],
|
|
open: [3320, 3322],
|
|
high: [3325, 3324],
|
|
low: [3318, 3320],
|
|
close: [3322, 3318],
|
|
type: 'candlestick',
|
|
name: 'Price'
|
|
};
|
|
|
|
const volumeTrace = {
|
|
x: ['2025-12-10T09:00:00Z', '2025-12-10T09:01:00Z'],
|
|
y: [100, 150],
|
|
type: 'bar',
|
|
name: 'Volume',
|
|
yaxis: 'y2',
|
|
marker: {
|
|
color: ['#10b981', '#ef4444'],
|
|
opacity: 0.3
|
|
}
|
|
};
|
|
|
|
const layout = {
|
|
title: 'Chart Update Test',
|
|
xaxis: { type: 'date' },
|
|
yaxis: { title: 'Price', domain: [0.3, 1] },
|
|
yaxis2: { title: 'Volume', domain: [0, 0.25] }
|
|
};
|
|
|
|
Plotly.newPlot('test-plot', [candlestickTrace, volumeTrace], layout).then(() => {
|
|
console.log('✅ Initial chart created');
|
|
|
|
// Test extending traces (simulating live update)
|
|
setTimeout(() => {
|
|
console.log('Testing extendTraces...');
|
|
|
|
const newTimestamp = '2025-12-10T09:02:00Z';
|
|
const newCandle = { open: 3318, high: 3320, low: 3316, close: 3319, volume: 200 };
|
|
|
|
// Test candlestick extension
|
|
Plotly.extendTraces('test-plot', {
|
|
x: [[newTimestamp]],
|
|
open: [[newCandle.open]],
|
|
high: [[newCandle.high]],
|
|
low: [[newCandle.low]],
|
|
close: [[newCandle.close]]
|
|
}, [0]).then(() => {
|
|
console.log('✅ Candlestick extended successfully');
|
|
|
|
// Test volume extension (the fixed version)
|
|
return Plotly.extendTraces('test-plot', {
|
|
x: [[newTimestamp]],
|
|
y: [[newCandle.volume]]
|
|
}, [1]);
|
|
}).then(() => {
|
|
console.log('✅ Volume extended successfully');
|
|
|
|
// Update volume color separately
|
|
const currentTrace = plotElement.data[1];
|
|
if (currentTrace && currentTrace.marker && currentTrace.marker.color) {
|
|
const volumeColor = newCandle.close >= newCandle.open ? '#10b981' : '#ef4444';
|
|
const newColors = [...currentTrace.marker.color, volumeColor];
|
|
return Plotly.restyle('test-plot', {'marker.color': [newColors]}, [1]);
|
|
}
|
|
}).then(() => {
|
|
console.log('✅ Volume color updated successfully');
|
|
console.log('✅ Chart update fix working correctly!');
|
|
}).catch(err => {
|
|
console.error('❌ Chart update failed:', err);
|
|
});
|
|
}, 2000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |