a45d09ef6f
Single-panel design with TradingView-inspired UX: - Search bar for filtering indicators by name - Category tabs (Trend, Momentum, Volatility, Volume, Favorites) - Expandable indicators with inline configuration - Favorites system with pinning - Preset system to save/load indicator configurations - Reset to defaults functionality - Real-time configuration changes (apply immediately) - Mobile-friendly responsive design - Touch-optimized for mobile devices - Cleaner single-panel layout replacing two-panel approach Features: ✓ Search functionality (must-have) ✓ Presets high-priority (save, load, delete) ✓ Single expandable panel ✓ Inline configuration (no separate panel) ✓ Categories for organizing indicators ✓ Favorites support ✓ Real-time visual updates ✓ Mobile responsive ✓ Collapse all indicators with one click ○ Drag-to-reorder (not implemented - nice to have) Updated files: - indicators-panel-new.js: Completely new implementation - indicators-new.css: New styles for single panel - index.html: Updated sidebar to use indicator panel - app.js: Updated imports and initialization
100 lines
3.3 KiB
JavaScript
100 lines
3.3 KiB
JavaScript
import { TradingDashboard, refreshTA, openAIAnalysis } from './ui/chart.js';
|
|
import { restoreSidebarState, toggleSidebar } from './ui/sidebar.js';
|
|
import { SimulationStorage } from './ui/storage.js';
|
|
import { showExportDialog, closeExportDialog, performExport, exportSavedSimulation } from './ui/export.js';
|
|
import {
|
|
runSimulation,
|
|
displayEnhancedResults,
|
|
showSimulationMarkers,
|
|
clearSimulationResults,
|
|
getLastResults,
|
|
setLastResults
|
|
} from './ui/simulation.js';
|
|
import {
|
|
renderStrategies,
|
|
selectStrategy,
|
|
loadStrategies,
|
|
saveSimulation,
|
|
renderSavedSimulations,
|
|
loadSavedSimulation,
|
|
deleteSavedSimulation,
|
|
setCurrentStrategy
|
|
} from './ui/strategies-panel.js';
|
|
import {
|
|
initIndicatorPanel,
|
|
getActiveIndicators,
|
|
setActiveIndicators,
|
|
drawIndicatorsOnChart,
|
|
addIndicator,
|
|
removeIndicatorById,
|
|
removeIndicatorByIndex
|
|
} from './ui/indicators-panel-new.js';
|
|
import { StrategyParams } from './strategies/config.js';
|
|
import { IndicatorRegistry } from './indicators/index.js';
|
|
|
|
window.dashboard = null;
|
|
|
|
function setDefaultStartDate() {
|
|
const startDateInput = document.getElementById('simStartDate');
|
|
if (startDateInput) {
|
|
const sevenDaysAgo = new Date();
|
|
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
|
|
startDateInput.value = sevenDaysAgo.toISOString().slice(0, 16);
|
|
}
|
|
}
|
|
|
|
function updateTimeframeDisplay() {
|
|
const display = document.getElementById('simTimeframeDisplay');
|
|
if (display && window.dashboard) {
|
|
display.value = window.dashboard.currentInterval.toUpperCase();
|
|
}
|
|
}
|
|
|
|
window.toggleSidebar = toggleSidebar;
|
|
window.refreshTA = refreshTA;
|
|
window.openAIAnalysis = openAIAnalysis;
|
|
window.showExportDialog = showExportDialog;
|
|
window.closeExportDialog = closeExportDialog;
|
|
window.performExport = performExport;
|
|
window.exportSavedSimulation = exportSavedSimulation;
|
|
window.runSimulation = runSimulation;
|
|
window.saveSimulation = saveSimulation;
|
|
window.renderSavedSimulations = renderSavedSimulations;
|
|
window.loadSavedSimulation = loadSavedSimulation;
|
|
window.deleteSavedSimulation = deleteSavedSimulation;
|
|
window.clearSimulationResults = clearSimulationResults;
|
|
window.updateTimeframeDisplay = updateTimeframeDisplay;
|
|
window.renderIndicatorList = function() {
|
|
// Legacy function - replaced by initIndicatorPanel
|
|
window.initIndicatorPanel();
|
|
};
|
|
|
|
// Export init function for global access
|
|
window.initIndicatorPanel = initIndicatorPanel;
|
|
window.initIndicatorPanel = initIndicatorPanel;
|
|
window.addIndicator = addIndicator;
|
|
window.toggleIndicator = addIndicator;
|
|
|
|
window.StrategyParams = StrategyParams;
|
|
window.SimulationStorage = SimulationStorage;
|
|
window.IndicatorRegistry = IndicatorRegistry;
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
window.dashboard = new TradingDashboard();
|
|
restoreSidebarState();
|
|
setDefaultStartDate();
|
|
updateTimeframeDisplay();
|
|
renderSavedSimulations();
|
|
|
|
await loadStrategies();
|
|
|
|
// Initialize new indicator panel
|
|
window.initIndicatorPanel();
|
|
|
|
const originalSwitchTimeframe = window.dashboard.switchTimeframe.bind(window.dashboard);
|
|
window.dashboard.switchTimeframe = function(interval) {
|
|
originalSwitchTimeframe(interval);
|
|
setTimeout(() => drawIndicatorsOnChart(), 500);
|
|
};
|
|
});
|