5f84215acd
- Add two-tab navigation (Indicators, Strategies) in right sidebar - Move all strategy-related content to Strategies tab - Implement sidebar collapse/expand functionality - Add indicator visibility toggle (eye button) - Fix bug where wrong interval data was deleted on TF switch - Add localStorage persistence for sidebar state and active tab - Ensure indicators recalculate when TF changes
919 lines
34 KiB
JavaScript
919 lines
34 KiB
JavaScript
import { getAvailableIndicators, IndicatorRegistry as IR } from '../indicators/index.js';
|
||
|
||
// State management
|
||
let activeIndicators = [];
|
||
let configuringId = null;
|
||
let searchQuery = '';
|
||
let selectedCategory = 'all';
|
||
let nextInstanceId = 1;
|
||
let listenersAttached = false; // Single flag to track if any listeners are attached
|
||
|
||
// Chart pane management
|
||
let indicatorPanes = new Map();
|
||
let nextPaneIndex = 1;
|
||
|
||
// Presets storage
|
||
let userPresets = JSON.parse(localStorage.getItem('indicator_presets') || '{}');
|
||
|
||
// Categories
|
||
const CATEGORIES = [
|
||
{ id: 'all', name: 'All Indicators', icon: '📊' },
|
||
{ id: 'trend', name: 'Trend', icon: '📊' },
|
||
{ id: 'momentum', name: 'Momentum', icon: '📈' },
|
||
{ id: 'volatility', name: 'Volatility', icon: '📉' },
|
||
{ id: 'volume', name: 'Volume', icon: '🔀' },
|
||
{ id: 'favorites', name: 'Favorites', icon: '★' }
|
||
];
|
||
|
||
const CATEGORY_MAP = {
|
||
sma: 'trend', ema: 'trend', hts: 'trend',
|
||
rsi: 'momentum', macd: 'momentum', stoch: 'momentum',
|
||
bb: 'volatility', atr: 'volatility',
|
||
others: 'volume'
|
||
};
|
||
|
||
const DEFAULT_COLORS = ['#2962ff', '#26a69a', '#ef5350', '#ff9800', '#9c27b0', '#00bcd4', '#ffeb3b', '#e91e63'];
|
||
const LINE_TYPES = ['solid', 'dotted', 'dashed'];
|
||
|
||
function getDefaultColor(index) {
|
||
return DEFAULT_COLORS[index % DEFAULT_COLORS.length];
|
||
}
|
||
|
||
function getIndicatorCategory(indicator) {
|
||
return CATEGORY_MAP[indicator.type] || 'trend';
|
||
}
|
||
|
||
function getIndicatorLabel(indicator) {
|
||
const meta = getIndicatorMeta(indicator);
|
||
if (!meta) return indicator.name;
|
||
|
||
const paramParts = meta.inputs.map(input => {
|
||
const val = indicator.params[input.name];
|
||
if (val !== undefined && val !== input.default) return val;
|
||
return null;
|
||
}).filter(v => v !== null);
|
||
|
||
if (paramParts.length > 0) {
|
||
return `${indicator.name} (${paramParts.join(', ')})`;
|
||
}
|
||
return indicator.name;
|
||
}
|
||
|
||
function getIndicatorMeta(indicator) {
|
||
const IndicatorClass = IR?.[indicator.type];
|
||
if (!IndicatorClass) return null;
|
||
const instance = new IndicatorClass({ type: indicator.type, params: indicator.params, name: indicator.name });
|
||
return instance.getMetadata();
|
||
}
|
||
|
||
function groupPlotsByColor(plots) {
|
||
const groups = {};
|
||
plots.forEach((plot, idx) => {
|
||
const groupMap = {
|
||
'fast': 'Fast', 'slow': 'Slow', 'upper': 'Upper', 'lower': 'Lower',
|
||
'middle': 'Middle', 'basis': 'Middle', 'signal': 'Signal',
|
||
'histogram': 'Histogram', 'k': '%K', 'd': '%D'
|
||
};
|
||
const groupName = Object.entries(groupMap).find(([k, v]) => plot.id.toLowerCase().includes(k))?.[1] || plot.id;
|
||
if (!groups[groupName]) {
|
||
groups[groupName] = { name: groupName, indices: [], plots: [] };
|
||
}
|
||
groups[groupName].indices.push(idx);
|
||
groups[groupName].plots.push(plot);
|
||
});
|
||
return Object.values(groups);
|
||
}
|
||
|
||
export function initIndicatorPanel() {
|
||
console.log('[IndicatorPanel] Initializing...');
|
||
renderIndicatorPanel();
|
||
console.log('[IndicatorPanel] Initialized');
|
||
}
|
||
|
||
export function getActiveIndicators() {
|
||
return activeIndicators;
|
||
}
|
||
|
||
export function setActiveIndicators(indicators) {
|
||
activeIndicators = indicators;
|
||
renderIndicatorPanel();
|
||
}
|
||
|
||
// Render main panel
|
||
export function renderIndicatorPanel() {
|
||
const container = document.getElementById('indicatorPanel');
|
||
if (!container) {
|
||
console.error('[IndicatorPanel] Container #indicatorPanel not found!');
|
||
return;
|
||
}
|
||
|
||
console.log('[IndicatorPanel] Rendering panel, searchQuery:', searchQuery, 'selectedCategory:', selectedCategory);
|
||
|
||
const available = getAvailableIndicators();
|
||
const catalog = available.filter(ind => {
|
||
if (searchQuery && !ind.name.toLowerCase().includes(searchQuery.toLowerCase())) return false;
|
||
if (selectedCategory === 'all') return true;
|
||
if (selectedCategory === 'favorites') return false;
|
||
const cat = CATEGORY_MAP[ind.type] || 'trend';
|
||
return cat === selectedCategory;
|
||
});
|
||
|
||
console.log("[IndicatorPanel] Total indicators:", available.length, "Filtered to:", catalog.length);
|
||
|
||
const favoriteIds = new Set(userPresets.favorites || []);
|
||
|
||
container.innerHTML = `
|
||
<div class="indicator-panel">
|
||
<!-- Search Bar -->
|
||
<div class="indicator-search">
|
||
<span class="search-icon">🔍</span>
|
||
<input
|
||
type="text"
|
||
id="indicatorSearch"
|
||
placeholder="Search indicators..."
|
||
value="${searchQuery}"
|
||
autocomplete="off"
|
||
>
|
||
${searchQuery ? `<button class="search-clear">×</button>` : ''}
|
||
</div>
|
||
|
||
<!-- Categories -->
|
||
<div class="category-tabs">
|
||
${CATEGORIES.map(cat => `
|
||
<button class="category-tab ${selectedCategory === cat.id ? 'active' : ''}" data-category="${cat.id}">
|
||
${cat.icon} ${cat.name}
|
||
</button>
|
||
`).join('')}
|
||
</div>
|
||
|
||
<!-- Favorites (if any) -->
|
||
${[...favoriteIds].length > 0 ? `
|
||
<div class="indicator-section favorites">
|
||
<div class="section-title">★ Favorites</div>
|
||
${[...favoriteIds].map(id => {
|
||
const ind = available.find(a => {
|
||
return a.type === id || (activeIndicators.find(ai => ai.id === id)?.type === '');
|
||
});
|
||
if (!ind) return '';
|
||
return renderIndicatorItem(ind, true);
|
||
}).join('')}
|
||
</div>
|
||
` : ''}
|
||
|
||
<!-- Active Indicators -->
|
||
${activeIndicators.length > 0 ? `
|
||
<div class="indicator-section active">
|
||
<div class="section-title">
|
||
${activeIndicators.length} Active
|
||
${activeIndicators.length > 0 ? `<button class="clear-all">Clear All</button>` : ''}
|
||
</div>
|
||
${activeIndicators.slice().reverse().map(ind => renderActiveIndicator(ind)).join('')}
|
||
</div>
|
||
` : ''}
|
||
|
||
<!-- Available Indicators -->
|
||
${catalog.length > 0 ? `
|
||
<div class="indicator-section catalog">
|
||
<div class="section-title">Available Indicators</div>
|
||
${catalog.map(ind => renderIndicatorItem(ind, false)).join('')}
|
||
</div>
|
||
` : `
|
||
<div class="no-results">
|
||
No indicators found
|
||
</div>
|
||
`}
|
||
</div>
|
||
`;
|
||
|
||
// Only setup event listeners once
|
||
if (!listenersAttached) {
|
||
setupEventListeners();
|
||
listenersAttached = true;
|
||
}
|
||
}
|
||
|
||
function renderIndicatorItem(indicator, isFavorite) {
|
||
return `
|
||
<div class="indicator-item ${isFavorite ? 'favorite' : ''}" data-type="${indicator.type}">
|
||
<div class="indicator-item-main">
|
||
<span class="indicator-name">${indicator.name}</span>
|
||
<span class="indicator-desc">${indicator.description || ''}</span>
|
||
<div class="indicator-actions">
|
||
<button class="indicator-btn add" data-type="${indicator.type}" title="Add to chart">+</button>
|
||
${isFavorite ? '' : `
|
||
<button class="indicator-btn favorite" data-type="${indicator.type}" title="Add to favorites">
|
||
${userPresets.favorites?.includes(indicator.type) ? '★' : '☆'}
|
||
</button>
|
||
`}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function renderActiveIndicator(indicator) {
|
||
const isExpanded = configuringId === indicator.id;
|
||
const meta = getIndicatorMeta(indicator);
|
||
const label = getIndicatorLabel(indicator);
|
||
const isFavorite = userPresets.favorites?.includes(indicator.type) || false;
|
||
const showPresets = meta.name && function() {
|
||
const hasPresets = typeof getPresetsForIndicator === 'function' ? getPresetsForIndicator(meta.name) : [];
|
||
if (!hasPresets || hasPresets.length === 0) return '';
|
||
return `<div class="indicator-presets">
|
||
<button class="preset-indicator" title="${hasPresets.length} saved presets">💾</button>
|
||
</div>`;
|
||
}();
|
||
|
||
return `
|
||
<div class="indicator-item active ${isExpanded ? 'expanded' : ''}" data-id="${indicator.id}">
|
||
<div class="indicator-item-main" onclick="window.toggleIndicatorExpand && window.toggleIndicatorExpand('${indicator.id}');">
|
||
<div class="drag-handle" title="Drag to reorder">⋮⋮</div>
|
||
<button class="indicator-btn visible" onclick="event.stopPropagation(); window.toggleIndicatorVisibility && window.toggleIndicatorVisibility('${indicator.id}')" title="${indicator.visible !== false ? 'Hide' : 'Show'}">
|
||
${indicator.visible !== false ? '👁' : '👁🗨'}
|
||
</button>
|
||
<span class="indicator-name">${label}</span>
|
||
${showPresets}
|
||
<button class="indicator-btn favorite" onclick="event.stopPropagation(); window.toggleFavorite && window.toggleFavorite('${indicator.type}')" title="Add to favorites">
|
||
${isFavorite ? '★' : '☆'}
|
||
</button>
|
||
<button class="indicator-btn expand ${isExpanded ? 'rotated' : ''}" data-id="${indicator.id}" onclick="event.stopPropagation(); window.toggleIndicatorExpand && window.toggleIndicatorExpand('${indicator.id}')" title="Show settings">
|
||
${isExpanded ? '▼' : '▶'}
|
||
</button>
|
||
</div>
|
||
|
||
${isExpanded ? `
|
||
<div class="indicator-config">
|
||
${typeof renderIndicatorConfig === 'function' ? renderIndicatorConfig(indicator, meta) : ''}
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function renderPresetIndicatorIndicator(meta, indicator) {
|
||
const hasPresets = typeof getPresetsForIndicator === 'function' ? getPresetsForIndicator(meta.name) : [];
|
||
if (!hasPresets || hasPresets.length === 0) return '';
|
||
|
||
return `<button class="preset-indicator" title="${hasPresets.length} saved presets" onclick="event.stopPropagation(); window.showPresets && window.showPresets('${meta.name}')">💾</button>`;
|
||
}
|
||
|
||
function renderIndicatorConfig(indicator, meta) {
|
||
const plotGroups = groupPlotsByColor(meta?.plots || []);
|
||
|
||
return `
|
||
<div class="config-sections">
|
||
<!-- Colors -->
|
||
<div class="config-section">
|
||
<div class="section-subtitle">Visual Settings</div>
|
||
${plotGroups.map(group => {
|
||
const firstIdx = group.indices[0];
|
||
const color = indicator.params[`_color_${firstIdx}`] || meta.plots[firstIdx]?.color || getDefaultColor(activeIndicators.indexOf(indicator));
|
||
return `
|
||
<div class="config-row">
|
||
<label>${group.name} Color</label>
|
||
<div class="color-picker">
|
||
<input type="color" id="color_${indicator.id}_${firstIdx}" value="${color}" onchange="window.updateIndicatorColor && window.updateIndicatorColor('${indicator.id}', ${firstIdx}, this.value)">
|
||
<span class="color-preview" style="background: ${color};"></span>
|
||
</div>
|
||
</div>
|
||
`.trim() + '';
|
||
}).join('')}
|
||
|
||
${indicator.type !== 'rsi' ? `
|
||
<div class="config-row">
|
||
<label>Line Type</label>
|
||
<select onchange="window.updateIndicatorSetting && window.updateIndicatorSetting('${indicator.id}', '_lineType', this.value)">
|
||
${LINE_TYPES.map(lt => `<option value="${lt}" ${indicator.params._lineType === lt ? 'selected' : ''}>${lt.charAt(0).toUpperCase() + lt.slice(1)}</option>`).join('')}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="config-row">
|
||
<label>Line Width</label>
|
||
<input type="range" min="1" max="5" value="${indicator.params._lineWidth || 2}" onchange="this.nextElementSibling.textContent = this.value; window.updateIndicatorSetting && window.updateIndicatorSetting('${indicator.id}', '_lineWidth', parseInt(this.value))">
|
||
<span class="range-value">${indicator.params._lineWidth || 2}</span>
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
|
||
${meta?.inputs && meta.inputs.length > 0 ? `
|
||
<div class="config-section">
|
||
<div class="section-subtitle">Parameters</div>
|
||
${meta.inputs.map(input => `
|
||
<div class="config-row">
|
||
<label>${input.label}</label>
|
||
${input.type === 'select' ?
|
||
`<select onchange="window.updateIndicatorSetting && window.updateIndicatorSetting('${indicator.id}', '${input.name}', this.value)">
|
||
${input.options.map(o => `<option value="${o}" ${indicator.params[input.name] === o ? 'selected' : ''}>${o}</option>`).join('')}
|
||
</select>` :
|
||
`<input
|
||
type="number"
|
||
value="${indicator.params[input.name]}"
|
||
${input.min !== undefined ? `min="${input.min}"` : ''}
|
||
${input.max !== undefined ? `max="${input.max}"` : ''}
|
||
${input.step !== undefined ? `step="${input.step}"` : ''}
|
||
onchange="window.updateIndicatorSetting && window.updateIndicatorSetting('${indicator.id}', '${input.name}', parseFloat(this.value))"
|
||
>`
|
||
}
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
` : ''}
|
||
|
||
<div class="config-section">
|
||
<div class="section-subtitle">
|
||
Presets
|
||
<button class="preset-action-btn" onclick="window.savePreset && window.savePreset('${indicator.id}')">+ Save Preset</button>
|
||
</div>
|
||
${typeof renderIndicatorPresets === 'function' ? renderIndicatorPresets(indicator, meta) : ''}
|
||
</div>
|
||
|
||
<div class="config-actions">
|
||
<button class="btn-secondary" onclick="window.resetIndicator && window.resetIndicator('${indicator.id}')">Reset to Defaults</button>
|
||
<button class="btn-danger" onclick="window.removeIndicator && window.removeIndicator('${indicator.id}')">Remove</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function renderIndicatorPresets(indicator, meta) {
|
||
const presets = typeof getPresetsForIndicator === 'function' ? getPresetsForIndicator(meta.name) : [];
|
||
|
||
return presets.length > 0 ? `
|
||
<div class="presets-list">
|
||
${presets.map(p => {
|
||
const isApplied = meta.inputs.every(input =>
|
||
(indicator.params[input.name] === (p.values?.[input.name] ?? input.default))
|
||
);
|
||
|
||
return `
|
||
<div class="preset-item ${isApplied ? 'applied' : ''}" data-preset="${p.id}">
|
||
<span class="preset-label" onclick="window.applyPreset && window.applyPreset('${indicator.id}', '${p.id}')">${p.name}</span>
|
||
<button class="preset-delete" onclick="window.deletePreset && window.deletePreset('${p.id}')">×</button>
|
||
</div>
|
||
`;
|
||
}).join('')}
|
||
</div>
|
||
` : '<div class="no-presets">No saved presets</div>';
|
||
}
|
||
|
||
// Event listeners
|
||
function setupEventListeners() {
|
||
const container = document.getElementById('indicatorPanel');
|
||
if (!container) return;
|
||
|
||
console.log('[IndicatorPanel] Setting up event listeners...');
|
||
|
||
// Single event delegation handler for add button
|
||
container.addEventListener('click', (e) => {
|
||
const addBtn = e.target.closest('.indicator-btn.add');
|
||
if (addBtn) {
|
||
e.stopPropagation();
|
||
const type = addBtn.dataset.type;
|
||
if (type && window.addIndicator) {
|
||
console.log('[IndicatorPanel] Add button clicked for type:', type);
|
||
window.addIndicator(type);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Expand/collapse button
|
||
const expandBtn = e.target.closest('.indicator-btn.expand');
|
||
if (expandBtn) {
|
||
e.stopPropagation();
|
||
const id = expandBtn.dataset.id;
|
||
if (id && window.toggleIndicatorExpand) {
|
||
window.toggleIndicatorExpand(id);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Remove button
|
||
const removeBtn = e.target.closest('.indicator-btn.remove');
|
||
if (removeBtn) {
|
||
e.stopPropagation();
|
||
const id = removeBtn.dataset.id;
|
||
if (id && window.removeIndicatorById) {
|
||
window.removeIndicatorById(id);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Favorite button
|
||
const favoriteBtn = e.target.closest('.indicator-btn.favorite');
|
||
if (favoriteBtn) {
|
||
e.stopPropagation();
|
||
const type = favoriteBtn.dataset.type;
|
||
if (type && window.toggleFavorite) {
|
||
window.toggleFavorite(type);
|
||
}
|
||
return;
|
||
}
|
||
});
|
||
|
||
// Search input
|
||
const searchInput = document.getElementById('indicatorSearch');
|
||
if (searchInput) {
|
||
searchInput.addEventListener('input', (e) => {
|
||
searchQuery = e.target.value;
|
||
renderIndicatorPanel();
|
||
});
|
||
}
|
||
|
||
// Search clear button
|
||
const searchClear = container.querySelector('.search-clear');
|
||
if (searchClear) {
|
||
searchClear.addEventListener('click', (e) => {
|
||
searchQuery = '';
|
||
renderIndicatorPanel();
|
||
});
|
||
}
|
||
|
||
// Category tabs
|
||
document.querySelectorAll('.category-tab').forEach(tab => {
|
||
tab.addEventListener('click', (e) => {
|
||
selectedCategory = tab.dataset.category;
|
||
renderIndicatorPanel();
|
||
});
|
||
});
|
||
|
||
// Clear all button
|
||
const clearAllBtn = container.querySelector('.clear-all');
|
||
if (clearAllBtn) {
|
||
clearAllBtn.addEventListener('click', () => {
|
||
window.clearAllIndicators();
|
||
});
|
||
}
|
||
|
||
console.log('[IndicatorPanel] Event listeners setup complete');
|
||
}
|
||
|
||
// Actions
|
||
window.toggleIndicatorExpand = function(id) {
|
||
configuringId = configuringId === id ? null : id;
|
||
renderIndicatorPanel();
|
||
};
|
||
|
||
window.clearSearch = function() {
|
||
searchQuery = '';
|
||
renderIndicatorPanel();
|
||
};
|
||
|
||
window.updateIndicatorColor = function(id, index, color) {
|
||
const indicator = activeIndicators.find(a => a.id === id);
|
||
if (!indicator) return;
|
||
|
||
indicator.params[`_color_${index}`] = color;
|
||
drawIndicatorsOnChart();
|
||
};
|
||
|
||
window.updateIndicatorSetting = function(id, key, value) {
|
||
const indicator = activeIndicators.find(a => a.id === id);
|
||
if (!indicator) return;
|
||
|
||
indicator.params[key] = value;
|
||
drawIndicatorsOnChart();
|
||
};
|
||
|
||
window.clearAllIndicators = function() {
|
||
activeIndicators.forEach(ind => {
|
||
ind.series?.forEach(s => {
|
||
try { window.dashboard?.chart?.removeSeries(s); } catch(e) {}
|
||
});
|
||
});
|
||
activeIndicators = [];
|
||
configuringId = null;
|
||
renderIndicatorPanel();
|
||
drawIndicatorsOnChart();
|
||
}
|
||
|
||
function removeIndicatorById(id) {
|
||
const idx = activeIndicators.findIndex(a => a.id === id);
|
||
if (idx < 0) return;
|
||
|
||
activeIndicators[idx].series?.forEach(s => {
|
||
try { window.dashboard?.chart?.removeSeries(s); } catch(e) {}
|
||
});
|
||
|
||
activeIndicators.splice(idx, 1);
|
||
|
||
if (configuringId === id) {
|
||
configuringId = null;
|
||
}
|
||
|
||
renderIndicatorPanel();
|
||
drawIndicatorsOnChart();
|
||
}
|
||
|
||
// Presets
|
||
function getPresetsForIndicator(indicatorName) {
|
||
if (!userPresets || !userPresets.presets) return [];
|
||
return userPresets.presets.filter(p => p.indicatorName === indicatorName);
|
||
}
|
||
|
||
window.savePreset = function(id) {
|
||
const indicator = activeIndicators.find(a => a.id === id);
|
||
if (!indicator) return;
|
||
|
||
const presetName = prompt('Enter preset name:');
|
||
if (!presetName) return;
|
||
|
||
const IndicatorClass = IR?.[indicator.type];
|
||
if (!IndicatorClass) return;
|
||
|
||
const instance = new IndicatorClass({ type: indicator.type, params: indicator.params, name: indicator.name });
|
||
const meta = instance.getMetadata();
|
||
|
||
const preset = {
|
||
id: `preset_${Date.now()}`,
|
||
name: presetName,
|
||
indicatorName: meta.name,
|
||
values: {}
|
||
};
|
||
|
||
meta.inputs.forEach(input => {
|
||
preset.values[input.name] = indicator.params[input.name];
|
||
});
|
||
|
||
if (!userPresets.presets) userPresets.presets = [];
|
||
userPresets.presets.push(preset);
|
||
saveUserPresets();
|
||
renderIndicatorPanel();
|
||
|
||
alert(`Preset "${presetName}" saved!`);
|
||
};
|
||
|
||
window.applyPreset = function(id, presetId) {
|
||
const allPresets = (userPresets?.presets || []).filter(p => typeof p === 'object' && p.id);
|
||
const preset = allPresets.find(p => p.id === presetId);
|
||
if (!preset) return;
|
||
|
||
const indicator = activeIndicators.find(a => a.id === id);
|
||
if (!indicator) return;
|
||
|
||
Object.keys(preset.values).forEach(key => {
|
||
indicator.params[key] = preset.values[key];
|
||
});
|
||
|
||
renderIndicatorPanel();
|
||
drawIndicatorsOnChart();
|
||
};
|
||
|
||
window.deletePreset = function(presetId) {
|
||
if (!confirm('Delete this preset?')) return;
|
||
|
||
if (userPresets?.presets) {
|
||
userPresets.presets = userPresets.presets.filter(p => p.id !== presetId);
|
||
saveUserPresets();
|
||
renderIndicatorPanel();
|
||
}
|
||
};
|
||
|
||
window.showPresets = function(indicatorName) {
|
||
const presets = getPresetsForIndicator(indicatorName);
|
||
if (presets.length === 0) {
|
||
alert('No saved presets for this indicator');
|
||
return;
|
||
}
|
||
|
||
const menu = window.open('', '_blank', 'width=400,height=500');
|
||
|
||
let htmlContent =
|
||
'<html><head><title>Presets - ' + indicatorName + '</title><style>' +
|
||
'body { font-family: sans-serif; padding: 20px; background: #1e222d; color: #d1d4dc; }' +
|
||
'.preset { padding: 10px; margin: 5px; background: #131722; border-radius: 4px; }' +
|
||
'.preset:hover { background: #2a2e39; cursor: pointer; }' +
|
||
'</style></head><body>' +
|
||
'<h3>' + indicatorName + ' Presets</h3>';
|
||
|
||
presets.forEach(p => {
|
||
htmlContent += '<div class="preset" onclick="opener.applyPresetFromWindow(' + "'" + p.id + "'" + ')">' + p.name + '</div>';
|
||
});
|
||
|
||
htmlContent += '</body></html>';
|
||
|
||
menu.document.write(htmlContent);
|
||
};
|
||
|
||
window.applyPresetFromWindow = function(presetId) {
|
||
const indicator = activeIndicators.find(a => a.id === configuringId);
|
||
if (!indicator) return;
|
||
applyPreset(indicator.id, presetId);
|
||
};
|
||
|
||
function addIndicator(type) {
|
||
const IndicatorClass = IR?.[type];
|
||
if (!IndicatorClass) return;
|
||
|
||
const id = `${type}_${nextInstanceId++}`;
|
||
const instance = new IndicatorClass({ type, params: {}, name: '' });
|
||
const metadata = instance.getMetadata();
|
||
|
||
const params = {
|
||
_lineType: 'solid',
|
||
_lineWidth: 2
|
||
};
|
||
metadata.plots.forEach((plot, idx) => {
|
||
params[`_color_${idx}`] = plot.color || getDefaultColor(activeIndicators.length + idx);
|
||
});
|
||
metadata.inputs.forEach(input => {
|
||
params[input.name] = input.default;
|
||
});
|
||
|
||
activeIndicators.push({
|
||
id,
|
||
type,
|
||
name: metadata.name,
|
||
params,
|
||
plots: metadata.plots,
|
||
series: [],
|
||
visible: true
|
||
});
|
||
// Don't set configuringId so indicators are NOT expanded by default
|
||
renderIndicatorPanel();
|
||
drawIndicatorsOnChart();
|
||
};
|
||
|
||
function saveUserPresets() {
|
||
localStorage.setItem('indicator_presets', JSON.stringify(userPresets));
|
||
}
|
||
|
||
function renderIndicatorOnPane(indicator, meta, instance, candles, paneIndex, lineStyleMap) {
|
||
console.log(`renderIndicatorOnPane for ${indicator.id}, candles.length=${candles.length}, paneIndex=${paneIndex}`);
|
||
|
||
// Recalculate with current TF candles
|
||
const results = instance.calculate(candles);
|
||
console.log(`Calculated results for ${indicator.id}:`, results?.length || 0, 'values');
|
||
|
||
// Clear previous series for this indicator
|
||
if (indicator.series && indicator.series.length > 0) {
|
||
indicator.series.forEach(s => {
|
||
try {
|
||
window.dashboard.chart.removeSeries(s);
|
||
console.log(`Removed series for ${indicator.id}`);
|
||
} catch(e) { console.error('Error removing series:', e); }
|
||
});
|
||
}
|
||
indicator.series = [];
|
||
|
||
const lineStyle = lineStyleMap[indicator.params._lineType] || LightweightCharts.LineStyle.Solid;
|
||
const lineWidth = indicator.params._lineWidth || 2;
|
||
|
||
const firstNonNull = results?.find(r => r !== null && r !== undefined);
|
||
const isObjectResult = firstNonNull && typeof firstNonNull === 'object';
|
||
|
||
let plotsCreated = 0;
|
||
meta.plots.forEach((plot, plotIdx) => {
|
||
if (isObjectResult) {
|
||
const hasData = results.some(r => r && r[plot.id] !== undefined && r[plot.id] !== null);
|
||
if (!hasData) {
|
||
console.log(`No data for plot ${plot.id} in ${indicator.id}`);
|
||
return;
|
||
}
|
||
}
|
||
|
||
const plotColor = indicator.params[`_color_${plotIdx}`] || plot.color || '#2962ff';
|
||
|
||
const data = [];
|
||
for (let i = 0; i < candles.length; i++) {
|
||
let value;
|
||
if (isObjectResult) {
|
||
value = results[i]?.[plot.id];
|
||
} else {
|
||
value = results[i];
|
||
}
|
||
|
||
if (value !== null && value !== undefined) {
|
||
data.push({
|
||
time: candles[i].time,
|
||
value: value
|
||
});
|
||
}
|
||
}
|
||
|
||
console.log(`Plot ${plot.id} has ${data.length} data points`);
|
||
if (data.length === 0) return;
|
||
|
||
let series;
|
||
let plotLineStyle = lineStyle;
|
||
if (plot.style === 'dashed') plotLineStyle = LightweightCharts.LineStyle.Dashed;
|
||
else if (plot.style === 'dotted') plotLineStyle = LightweightCharts.LineStyle.Dotted;
|
||
else if (plot.style === 'solid') plotLineStyle = LightweightCharts.LineStyle.Solid;
|
||
|
||
if (plot.type === 'histogram') {
|
||
series = window.dashboard.chart.addSeries(LightweightCharts.HistogramSeries, {
|
||
color: plotColor,
|
||
priceFormat: { type: 'price', precision: 4, minMove: 0.0001 },
|
||
priceLineVisible: false,
|
||
lastValueVisible: false
|
||
}, paneIndex);
|
||
} else if (plot.type === 'baseline') {
|
||
series = window.dashboard.chart.addSeries(LightweightCharts.BaselineSeries, {
|
||
baseValue: { type: 'price', price: plot.baseValue || 0 },
|
||
topLineColor: plot.topLineColor || plotColor,
|
||
topFillColor1: plot.topFillColor1 || plotColor,
|
||
topFillColor2: '#00000000',
|
||
bottomFillColor1: '#00000000',
|
||
bottomColor: plot.bottomColor || '#00000000',
|
||
lineWidth: plot.width || indicator.params._lineWidth || lineWidth,
|
||
lineStyle: plotLineStyle,
|
||
title: plot.title || '',
|
||
priceLineVisible: false,
|
||
lastValueVisible: plot.lastValueVisible !== false
|
||
}, paneIndex);
|
||
} else {
|
||
series = window.dashboard.chart.addSeries(LightweightCharts.LineSeries, {
|
||
color: plotColor,
|
||
lineWidth: plot.width || indicator.params._lineWidth || lineWidth,
|
||
lineStyle: plotLineStyle,
|
||
title: plot.title || '',
|
||
priceLineVisible: false,
|
||
lastValueVisible: plot.lastValueVisible !== false
|
||
}, paneIndex);
|
||
}
|
||
|
||
series.setData(data);
|
||
indicator.series.push(series);
|
||
plotsCreated++;
|
||
console.log(`Created series for ${indicator.id}, plot=${plot.id}, total series now=${indicator.series.length}`);
|
||
|
||
// Create horizontal band lines for RSI
|
||
if (meta.name === 'RSI' && indicator.series.length > 0) {
|
||
const mainSeries = indicator.series[0];
|
||
const overbought = indicator.params.overbought || 70;
|
||
const oversold = indicator.params.oversold || 30;
|
||
|
||
// Remove existing price lines first
|
||
while (indicator.bands && indicator.bands.length > 0) {
|
||
try {
|
||
indicator.bands.pop();
|
||
} catch(e) {}
|
||
}
|
||
indicator.bands = indicator.bands || [];
|
||
|
||
// Create overbought band line
|
||
indicator.bands.push(mainSeries.createPriceLine({
|
||
price: overbought,
|
||
color: '#787B86',
|
||
lineWidth: 1,
|
||
lineStyle: LightweightCharts.LineStyle.Dashed,
|
||
axisLabelVisible: false,
|
||
title: ''
|
||
}));
|
||
|
||
// Create oversold band line
|
||
indicator.bands.push(mainSeries.createPriceLine({
|
||
price: oversold,
|
||
color: '#787B86',
|
||
lineWidth: 1,
|
||
lineStyle: LightweightCharts.LineStyle.Dashed,
|
||
axisLabelVisible: false,
|
||
title: ''
|
||
}));
|
||
}
|
||
});
|
||
}
|
||
|
||
// Chart drawing
|
||
export function drawIndicatorsOnChart() {
|
||
if (!window.dashboard || !window.dashboard.chart) {
|
||
return;
|
||
}
|
||
|
||
const currentInterval = window.dashboard.currentInterval;
|
||
const candles = window.dashboard.allData.get(currentInterval);
|
||
|
||
if (!candles || candles.length === 0) {
|
||
return;
|
||
}
|
||
|
||
// Log: Ensure we're using the correct interval candles
|
||
console.log(`drawIndicatorsOnChart for interval=${currentInterval}, candles=${candles.length}`);
|
||
|
||
// First, remove all existing series
|
||
activeIndicators.forEach(ind => {
|
||
ind.series?.forEach(s => {
|
||
try { window.dashboard.chart.removeSeries(s); } catch(e) {}
|
||
});
|
||
ind.series = [];
|
||
});
|
||
|
||
const lineStyleMap = {
|
||
'solid': LightweightCharts.LineStyle.Solid,
|
||
'dotted': LightweightCharts.LineStyle.Dotted,
|
||
'dashed': LightweightCharts.LineStyle.Dashed
|
||
};
|
||
|
||
indicatorPanes.clear();
|
||
nextPaneIndex = 1;
|
||
|
||
const overlayIndicators = [];
|
||
const paneIndicators = [];
|
||
|
||
// Process all indicators, filtering by visibility
|
||
activeIndicators.forEach(ind => {
|
||
if (ind.visible === false) {
|
||
return;
|
||
}
|
||
|
||
const IndicatorClass = IR?.[ind.type];
|
||
if (!IndicatorClass) return;
|
||
|
||
const instance = new IndicatorClass({ type: ind.type, params: ind.params, name: ind.name });
|
||
const meta = instance.getMetadata();
|
||
|
||
if (meta.displayMode === 'pane') {
|
||
paneIndicators.push({ indicator: ind, meta, instance });
|
||
} else {
|
||
overlayIndicators.push({ indicator: ind, meta, instance });
|
||
}
|
||
});
|
||
|
||
console.log('Rendering indicators:', { overlayCount: overlayIndicators.length, paneCount: paneIndicators.length });
|
||
|
||
// Calculate heights based on VISIBLE indicators only
|
||
const totalPanes = 1 + paneIndicators.length;
|
||
const mainPaneHeight = paneIndicators.length > 0 ? 60 : 100;
|
||
const paneHeight = paneIndicators.length > 0 ? Math.floor(40 / paneIndicators.length) : 0;
|
||
|
||
window.dashboard.chart.panes()[0]?.setHeight(mainPaneHeight);
|
||
|
||
let totalSeriesCreated = 0;
|
||
overlayIndicators.forEach(({ indicator, meta, instance }) => {
|
||
const oldLen = indicator.series.length;
|
||
renderIndicatorOnPane(indicator, meta, instance, candles, 0, lineStyleMap);
|
||
totalSeriesCreated += indicator.series.length - oldLen;
|
||
});
|
||
|
||
paneIndicators.forEach(({ indicator, meta, instance }, idx) => {
|
||
const paneIndex = nextPaneIndex++;
|
||
indicatorPanes.set(indicator.id, paneIndex);
|
||
|
||
const oldLen = indicator.series.length;
|
||
renderIndicatorOnPane(indicator, meta, instance, candles, paneIndex, lineStyleMap);
|
||
totalSeriesCreated += indicator.series.length - oldLen;
|
||
|
||
const pane = window.dashboard.chart.panes()[paneIndex];
|
||
if (pane) {
|
||
pane.setHeight(paneHeight);
|
||
}
|
||
});
|
||
|
||
console.log(`drawIndicatorsOnChart complete - created ${totalSeriesCreated} series for ${overlayIndicators.length + paneIndicators.length} visible indicators`);
|
||
}
|
||
|
||
function resetIndicator(id) {
|
||
const indicator = activeIndicators.find(a => a.id === id);
|
||
if (!indicator) return;
|
||
|
||
const IndicatorClass = IR[indicator.type];
|
||
if (!IndicatorClass) return;
|
||
|
||
const instance = new IndicatorClass({ type: indicator.type, params: {}, name: '' });
|
||
const meta = instance.getMetadata();
|
||
if (!meta || !meta.inputs) return;
|
||
|
||
meta.inputs.forEach(input => {
|
||
indicator.params[input.name] = input.default;
|
||
});
|
||
|
||
renderIndicatorPanel();
|
||
drawIndicatorsOnChart();
|
||
}
|
||
|
||
function removeIndicator(id) {
|
||
removeIndicatorById(id);
|
||
}
|
||
|
||
function toggleIndicatorVisibility(id) {
|
||
const indicator = activeIndicators.find(a => a.id === id);
|
||
if (!indicator) {
|
||
return;
|
||
}
|
||
|
||
indicator.visible = indicator.visible === false;
|
||
|
||
// Full redraw to ensure all indicators render correctly
|
||
if (typeof drawIndicatorsOnChart === 'function') {
|
||
drawIndicatorsOnChart();
|
||
}
|
||
|
||
renderIndicatorPanel();
|
||
}
|
||
|
||
// Export functions for module access
|
||
export { addIndicator, removeIndicatorById, toggleIndicatorVisibility };
|
||
|
||
// Legacy compatibility functions
|
||
window.renderIndicatorList = renderIndicatorPanel;
|
||
window.resetIndicator = resetIndicator;
|
||
window.removeIndicator = removeIndicator;
|
||
window.toggleIndicator = addIndicator;
|
||
window.toggleIndicatorVisibility = toggleIndicatorVisibility;
|
||
window.showIndicatorConfig = function(id) {
|
||
const ind = activeIndicators.find(a => a.id === id);
|
||
if (ind) configuringId = id;
|
||
renderIndicatorPanel();
|
||
};
|
||
window.applyIndicatorConfig = function() {
|
||
// No-op - config is applied immediately
|
||
}; |