-
-
- ${isActive ? `
` : ''}
+ const available = getAvailableIndicators();
+
+ container.innerHTML = `
+
+ ${available.map(ind => `
+
+ ${ind.name}
+ +
+
+ `).join('')}
+
+ ${activeIndicators.length > 0 ? `
+
Active
+
+ ${activeIndicators.map(ind => {
+ const isConfiguring = ind.id === configuringId;
+ const plotGroups = groupPlotsByColor(ind.plots || []);
+ const colorDots = plotGroups.map(group => {
+ const firstIdx = group.indices[0];
+ const color = ind.params[`_color_${firstIdx}`] || '#2962ff';
+ return `
`;
+ }).join('');
+ const label = getIndicatorLabel(ind);
+
+ return `
+
+
+ ${ind.visible !== false ? '👁' : '👁🗨'}
+
+ ${label}
+ ${colorDots}
+
+
+
+ `;
+ }).join('')}
- `;
- }).join('');
+ ` : ''}
+ `;
+
+ // Bind events via delegation
+ container.querySelectorAll('.indicator-catalog-item').forEach(el => {
+ el.addEventListener('click', () => previewIndicator(el.dataset.type));
+ el.addEventListener('dblclick', () => addIndicator(el.dataset.type));
+ });
+ container.querySelectorAll('.indicator-catalog-add').forEach(el => {
+ el.addEventListener('click', (e) => {
+ e.stopPropagation();
+ addIndicator(el.dataset.type);
+ });
+ });
+ container.querySelectorAll('.indicator-active-name').forEach(el => {
+ el.addEventListener('click', () => selectIndicatorConfig(el.dataset.id));
+ });
+ container.querySelectorAll('.indicator-config-btn').forEach(el => {
+ el.addEventListener('click', (e) => {
+ e.stopPropagation();
+ selectIndicatorConfig(el.dataset.id);
+ });
+ });
+ container.querySelectorAll('.indicator-remove-btn').forEach(el => {
+ el.addEventListener('click', (e) => {
+ e.stopPropagation();
+ removeIndicatorById(el.dataset.id);
+ });
+ });
+ container.querySelectorAll('.indicator-active-eye').forEach(el => {
+ el.addEventListener('click', (e) => {
+ e.stopPropagation();
+ toggleVisibility(el.dataset.id);
+ });
+ });
updateConfigPanel();
+ updateChartLegend();
}
function updateConfigPanel() {
@@ -95,95 +169,126 @@ function updateConfigPanel() {
configPanel.style.display = 'block';
- if (configuringIndex >= 0 && configuringIndex < activeIndicators.length) {
- renderIndicatorConfig(configuringIndex);
+ // Active indicator config takes priority over preview
+ const indicator = configuringId ? activeIndicators.find(a => a.id === configuringId) : null;
+
+ if (indicator) {
+ renderIndicatorConfig(indicator);
if (configButtons) configButtons.style.display = 'flex';
+ } else if (previewingType) {
+ renderPreviewConfig(previewingType);
+ if (configButtons) configButtons.style.display = 'none';
} else {
const container = document.getElementById('configForm');
if (container) {
- container.innerHTML = '
Select an active indicator to configure its settings
';
+ container.innerHTML = '
Click an indicator to preview its settings
';
}
if (configButtons) configButtons.style.display = 'none';
}
}
-export function toggleIndicator(type) {
- const existingIdx = activeIndicators.findIndex(a => a.type === type);
+/** Single-click: preview config for a catalog indicator type (read-only) */
+function previewIndicator(type) {
+ configuringId = null;
+ previewingType = previewingType === type ? null : type;
+ renderIndicatorList();
+}
+
+/** Render a read-only preview of an indicator's default config */
+function renderPreviewConfig(type) {
+ const container = document.getElementById('configForm');
+ if (!container) return;
- if (existingIdx >= 0) {
- activeIndicators[existingIdx].series?.forEach(s => {
- try { window.dashboard?.chart?.removeSeries(s); } catch(e) {}
- });
- activeIndicators.splice(existingIdx, 1);
- if (configuringIndex >= activeIndicators.length) {
- configuringIndex = -1;
- } else if (configuringIndex === existingIdx) {
- configuringIndex = -1;
- } else if (configuringIndex > existingIdx) {
- configuringIndex--;
- }
- } else {
- const indicatorDef = AVAILABLE_INDICATORS.find(i => i.type === type);
- if (!indicatorDef) return;
+ const IndicatorClass = IR?.[type];
+ if (!IndicatorClass) return;
+
+ const instance = new IndicatorClass({ type, params: {}, name: '' });
+ const meta = instance.getMetadata();
+
+ container.innerHTML = `
+
${meta.name}
+
${meta.description || ''}
- const IndicatorClass = IR?.[type];
- if (!IndicatorClass) return;
+ ${meta.inputs.map(input => `
+
+
+ ${input.type === 'select' ?
+ `` :
+ ``
+ }
+
+ `).join('')}
- const instance = new IndicatorClass({ type, params: {}, name: indicatorDef.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({
- type: type,
- name: metadata.name,
- params: params,
- plots: metadata.plots,
- series: []
- });
-
- configuringIndex = activeIndicators.length - 1;
- }
+
Double-click to add to chart
+ `;
+}
+
+/** Add a new instance of an indicator type */
+export function addIndicator(type) {
+ const IndicatorClass = IR?.[type];
+ if (!IndicatorClass) return;
+
+ previewingType = null;
+ 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
+ });
+
+ configuringId = id;
renderIndicatorList();
drawIndicatorsOnChart();
}
-export function showIndicatorConfig(index) {
- if (configuringIndex === index) {
- configuringIndex = -1;
+function selectIndicatorConfig(id) {
+ previewingType = null;
+ if (configuringId === id) {
+ configuringId = null;
} else {
- configuringIndex = index;
+ configuringId = id;
}
renderIndicatorList();
}
-export function showIndicatorConfigByType(type) {
- const idx = activeIndicators.findIndex(a => a.type === type);
- if (idx >= 0) {
- configuringIndex = idx;
- renderIndicatorList();
- }
+function toggleVisibility(id) {
+ const indicator = activeIndicators.find(a => a.id === id);
+ if (!indicator) return;
+
+ indicator.visible = indicator.visible === false ? true : false;
+
+ // Show/hide all series for this indicator
+ indicator.series?.forEach(s => {
+ try {
+ s.applyOptions({ visible: indicator.visible });
+ } catch(e) {}
+ });
+
+ renderIndicatorList();
}
-export function renderIndicatorConfig(index) {
+export function renderIndicatorConfig(indicator) {
const container = document.getElementById('configForm');
- if (!container) return;
-
- const indicator = activeIndicators[index];
- if (!indicator) {
- container.innerHTML = '';
- return;
- }
+ if (!container || !indicator) return;
const IndicatorClass = IR?.[indicator.type];
if (!IndicatorClass) {
@@ -208,7 +313,7 @@ export function renderIndicatorConfig(index) {
}).join('');
container.innerHTML = `
-
${indicator.name}
+
${getIndicatorLabel(indicator)}
${colorInputs}
@@ -237,9 +342,9 @@ export function renderIndicatorConfig(index) {
}
export function applyIndicatorConfig() {
- if (configuringIndex < 0 || configuringIndex >= activeIndicators.length) return;
+ const indicator = configuringId ? activeIndicators.find(a => a.id === configuringId) : null;
+ if (!indicator) return;
- const indicator = activeIndicators[configuringIndex];
const IndicatorClass = IR?.[indicator.type];
if (!IndicatorClass) return;
@@ -276,14 +381,23 @@ export function applyIndicatorConfig() {
}
export function removeIndicator() {
- if (configuringIndex < 0 || configuringIndex >= activeIndicators.length) return;
+ if (!configuringId) return;
+ removeIndicatorById(configuringId);
+}
+
+export function removeIndicatorById(id) {
+ const idx = activeIndicators.findIndex(a => a.id === id);
+ if (idx < 0) return;
- activeIndicators[configuringIndex].series?.forEach(s => {
+ activeIndicators[idx].series?.forEach(s => {
try { window.dashboard?.chart?.removeSeries(s); } catch(e) {}
});
- activeIndicators.splice(configuringIndex, 1);
- configuringIndex = -1;
+ activeIndicators.splice(idx, 1);
+
+ if (configuringId === id) {
+ configuringId = null;
+ }
renderIndicatorList();
drawIndicatorsOnChart();
@@ -291,20 +405,7 @@ export function removeIndicator() {
export function removeIndicatorByIndex(index) {
if (index < 0 || index >= activeIndicators.length) return;
-
- activeIndicators[index].series?.forEach(s => {
- try { window.dashboard?.chart?.removeSeries(s); } catch(e) {}
- });
-
- activeIndicators.splice(index, 1);
- if (configuringIndex === index) {
- configuringIndex = -1;
- } else if (configuringIndex > index) {
- configuringIndex--;
- }
-
- renderIndicatorList();
- drawIndicatorsOnChart();
+ removeIndicatorById(activeIndicators[index].id);
}
export function drawIndicatorsOnChart() {
@@ -321,7 +422,12 @@ export function drawIndicatorsOnChart() {
const lineStyleMap = { 'solid': 0, 'dotted': 1, 'dashed': 2 };
- activeIndicators.forEach((indicator, idx) => {
+ activeIndicators.forEach((indicator) => {
+ if (indicator.visible === false) {
+ indicator.series = [];
+ return;
+ }
+
const IndicatorClass = IR?.[indicator.type];
if (!IndicatorClass) return;
@@ -350,7 +456,7 @@ export function drawIndicatorsOnChart() {
color: plotColor,
lineWidth: plot.width || lineWidth,
lineStyle: lineStyle,
- title: plot.title,
+ title: '',
priceLineVisible: false,
lastValueVisible: true
});
@@ -378,10 +484,84 @@ export function drawIndicatorsOnChart() {
}
});
});
+
+ updateChartLegend();
}
+/** Update the TradingView-style legend overlay on the chart */
+export function updateChartLegend() {
+ let legend = document.getElementById('chartIndicatorLegend');
+ if (!legend) {
+ const chartWrapper = document.getElementById('chartWrapper');
+ if (!chartWrapper) return;
+ legend = document.createElement('div');
+ legend.id = 'chartIndicatorLegend';
+ legend.className = 'chart-indicator-legend';
+ chartWrapper.appendChild(legend);
+ }
+
+ if (activeIndicators.length === 0) {
+ legend.innerHTML = '';
+ legend.style.display = 'none';
+ return;
+ }
+
+ legend.style.display = 'flex';
+ legend.innerHTML = activeIndicators.map(ind => {
+ const label = getIndicatorLabel(ind);
+ const plotGroups = groupPlotsByColor(ind.plots || []);
+ const firstColor = ind.params['_color_0'] || '#2962ff';
+ const dimmed = ind.visible === false;
+
+ return `
+
+
+ ${label}
+ ×
+
+ `;
+ }).join('');
+
+ // Bind legend events
+ legend.querySelectorAll('.legend-item').forEach(el => {
+ el.addEventListener('click', (e) => {
+ if (e.target.classList.contains('legend-close')) return;
+ selectIndicatorConfig(el.dataset.id);
+ renderIndicatorList();
+ });
+ });
+ legend.querySelectorAll('.legend-close').forEach(el => {
+ el.addEventListener('click', (e) => {
+ e.stopPropagation();
+ removeIndicatorById(el.dataset.id);
+ });
+ });
+}
+
+// Legacy compat: toggleIndicator still works for external callers
+export function toggleIndicator(type) {
+ addIndicator(type);
+}
+
+export function showIndicatorConfig(index) {
+ if (index >= 0 && index < activeIndicators.length) {
+ selectIndicatorConfig(activeIndicators[index].id);
+ }
+}
+
+export function showIndicatorConfigByType(type) {
+ const ind = activeIndicators.find(a => a.type === type);
+ if (ind) {
+ selectIndicatorConfig(ind.id);
+ }
+}
+
+window.addIndicator = addIndicator;
window.toggleIndicator = toggleIndicator;
window.showIndicatorConfig = showIndicatorConfig;
window.applyIndicatorConfig = applyIndicatorConfig;
window.removeIndicator = removeIndicator;
+window.removeIndicatorById = removeIndicatorById;
window.removeIndicatorByIndex = removeIndicatorByIndex;
+window.drawIndicatorsOnChart = drawIndicatorsOnChart;