min pivot distance only applies to L1 pivots ,

charts minimize addons,
delete buttons WIP
This commit is contained in:
Dobromir Popov
2025-10-24 13:49:16 +03:00
parent 42bf91b735
commit b970c4ca4d
8 changed files with 532 additions and 169 deletions

View File

@@ -166,12 +166,16 @@
item.querySelector('.delete-annotation-btn').addEventListener('click', function(e) {
e.stopPropagation();
console.log('Delete button clicked for:', annotation.annotation_id);
console.log('window.deleteAnnotation type:', typeof window.deleteAnnotation);
console.log('window object keys:', Object.keys(window).filter(k => k.includes('delete')));
// Use window.deleteAnnotation to ensure we get the global function
if (typeof window.deleteAnnotation === 'function') {
console.log('Calling window.deleteAnnotation...');
window.deleteAnnotation(annotation.annotation_id);
} else {
console.error('window.deleteAnnotation is not a function:', typeof window.deleteAnnotation);
console.log('Available functions:', Object.keys(window).filter(k => typeof window[k] === 'function'));
alert('Delete function not available. Please refresh the page.');
}
});

View File

@@ -26,36 +26,60 @@
<div class="timeframe-chart" id="chart-1s">
<div class="chart-header">
<span class="timeframe-label">1 Second</span>
<span class="chart-info" id="info-1s"></span>
<div class="chart-header-controls">
<span class="chart-info" id="info-1s"></span>
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1s"
title="Minimize Chart">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="chart-plot" id="plot-1s"></div>
</div>
<div class="timeframe-chart" id="chart-1m">
<div class="chart-header">
<span class="timeframe-label">1 Minute</span>
<span class="chart-info" id="info-1m"></span>
<div class="chart-header-controls">
<span class="chart-info" id="info-1m"></span>
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1m"
title="Minimize Chart">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="chart-plot" id="plot-1m"></div>
</div>
<div class="timeframe-chart" id="chart-1h">
<div class="chart-header">
<span class="timeframe-label">1 Hour</span>
<span class="chart-info" id="info-1h"></span>
<div class="chart-header-controls">
<span class="chart-info" id="info-1h"></span>
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1h"
title="Minimize Chart">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="chart-plot" id="plot-1h"></div>
</div>
<div class="timeframe-chart" id="chart-1d">
<div class="chart-header">
<span class="timeframe-label">1 Day</span>
<span class="chart-info" id="info-1d"></span>
<div class="chart-header-controls">
<span class="chart-info" id="info-1d"></span>
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1d"
title="Minimize Chart">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="chart-plot" id="plot-1d"></div>
</div>
</div>
<!-- Loading overlay -->
<div id="chart-loading" class="chart-loading d-none">
<div class="spinner-border text-primary" role="status">
@@ -68,25 +92,25 @@
<script>
// Chart panel controls
document.getElementById('zoom-in-btn').addEventListener('click', function() {
document.getElementById('zoom-in-btn').addEventListener('click', function () {
if (appState.chartManager) {
appState.chartManager.handleZoom(1.5);
}
});
document.getElementById('zoom-out-btn').addEventListener('click', function() {
document.getElementById('zoom-out-btn').addEventListener('click', function () {
if (appState.chartManager) {
appState.chartManager.handleZoom(0.67);
}
});
document.getElementById('reset-zoom-btn').addEventListener('click', function() {
document.getElementById('reset-zoom-btn').addEventListener('click', function () {
if (appState.chartManager) {
appState.chartManager.resetZoom();
}
});
document.getElementById('fullscreen-btn').addEventListener('click', function() {
document.getElementById('fullscreen-btn').addEventListener('click', function () {
const chartContainer = document.getElementById('chart-container');
if (chartContainer.requestFullscreen) {
chartContainer.requestFullscreen();
@@ -96,4 +120,37 @@
chartContainer.msRequestFullscreen();
}
});
</script>
// Minimize button functionality
document.querySelectorAll('.minimize-btn').forEach(btn => {
btn.addEventListener('click', function () {
const timeframe = this.getAttribute('data-timeframe');
const chartElement = document.getElementById(`chart-${timeframe}`);
const plotElement = document.getElementById(`plot-${timeframe}`);
if (chartElement.classList.contains('minimized')) {
// Restore chart
chartElement.classList.remove('minimized');
plotElement.style.display = 'block';
this.innerHTML = '<i class="fas fa-minus"></i>';
this.title = 'Minimize Chart';
// Update chart layout
if (window.appState && window.appState.chartManager) {
window.appState.chartManager.updateChartLayout();
}
} else {
// Minimize chart
chartElement.classList.add('minimized');
plotElement.style.display = 'none';
this.innerHTML = '<i class="fas fa-plus"></i>';
this.title = 'Restore Chart';
// Update chart layout
if (window.appState && window.appState.chartManager) {
window.appState.chartManager.updateChartLayout();
}
}
});
});
</script>