Implement single-panel indicator management system

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
This commit is contained in:
DiTus
2026-02-25 22:34:59 +01:00
parent 6dc9cf5a63
commit a45d09ef6f
4 changed files with 1445 additions and 15 deletions

View File

@ -21,16 +21,14 @@ import {
setCurrentStrategy
} from './ui/strategies-panel.js';
import {
renderIndicatorList,
initIndicatorPanel,
getActiveIndicators,
setActiveIndicators,
drawIndicatorsOnChart,
addIndicator,
toggleIndicator,
showIndicatorConfig,
applyIndicatorConfig,
removeIndicator,
removeIndicatorById,
removeIndicatorByIndex,
drawIndicatorsOnChart
} from './ui/indicators-panel.js';
removeIndicatorByIndex
} from './ui/indicators-panel-new.js';
import { StrategyParams } from './strategies/config.js';
import { IndicatorRegistry } from './indicators/index.js';
@ -66,10 +64,16 @@ window.loadSavedSimulation = loadSavedSimulation;
window.deleteSavedSimulation = deleteSavedSimulation;
window.clearSimulationResults = clearSimulationResults;
window.updateTimeframeDisplay = updateTimeframeDisplay;
window.renderIndicatorList = renderIndicatorList;
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 = toggleIndicator;
window.showIndicatorConfig = showIndicatorConfig;
window.toggleIndicator = addIndicator;
window.StrategyParams = StrategyParams;
window.SimulationStorage = SimulationStorage;
@ -84,7 +88,8 @@ document.addEventListener('DOMContentLoaded', async () => {
await loadStrategies();
renderIndicatorList();
// Initialize new indicator panel
window.initIndicatorPanel();
const originalSwitchTimeframe = window.dashboard.switchTimeframe.bind(window.dashboard);
window.dashboard.switchTimeframe = function(interval) {