704 lines
27 KiB
JavaScript
704 lines
27 KiB
JavaScript
import { getAvailableIndicators, IndicatorRegistry as IR } from '../indicators/index.js';
|
||
|
||
let activeIndicators = [];
|
||
let configuringId = null;
|
||
let previewingType = null; // type being previewed (not yet added)
|
||
let nextInstanceId = 1;
|
||
|
||
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 getPlotGroupName(plotId) {
|
||
if (plotId.toLowerCase().includes('fast')) return 'Fast';
|
||
if (plotId.toLowerCase().includes('slow')) return 'Slow';
|
||
if (plotId.toLowerCase().includes('upper')) return 'Upper';
|
||
if (plotId.toLowerCase().includes('lower')) return 'Lower';
|
||
if (plotId.toLowerCase().includes('middle') || plotId.toLowerCase().includes('basis')) return 'Middle';
|
||
if (plotId.toLowerCase().includes('signal')) return 'Signal';
|
||
if (plotId.toLowerCase().includes('histogram')) return 'Histogram';
|
||
if (plotId.toLowerCase().includes('k')) return '%K';
|
||
if (plotId.toLowerCase().includes('d')) return '%D';
|
||
return plotId;
|
||
}
|
||
|
||
function groupPlotsByColor(plots) {
|
||
const groups = {};
|
||
plots.forEach((plot, idx) => {
|
||
const groupName = getPlotGroupName(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);
|
||
}
|
||
|
||
/** Generate a short label for an active indicator showing its key params */
|
||
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;
|
||
if (val !== undefined) 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();
|
||
}
|
||
|
||
export function getActiveIndicators() {
|
||
return activeIndicators;
|
||
}
|
||
|
||
export function setActiveIndicators(indicators) {
|
||
activeIndicators = indicators;
|
||
}
|
||
|
||
/**
|
||
* Render the indicator catalog (available indicators) and active list.
|
||
* Catalog items are added via double-click (multiple instances allowed).
|
||
*/
|
||
export function renderIndicatorList() {
|
||
const container = document.getElementById('indicatorList');
|
||
if (!container) return;
|
||
|
||
const available = getAvailableIndicators();
|
||
|
||
container.innerHTML = `
|
||
<div class="indicator-catalog">
|
||
${available.map(ind => `
|
||
<div class="indicator-catalog-item ${previewingType === ind.type ? 'previewing' : ''}"
|
||
title="${ind.description || ''}"
|
||
data-type="${ind.type}">
|
||
<span class="indicator-catalog-name">${ind.name}</span>
|
||
<span class="indicator-catalog-add" data-type="${ind.type}">+</span>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
${activeIndicators.length > 0 ? `
|
||
<div class="indicator-active-divider">Active</div>
|
||
<div class="indicator-active-list">
|
||
${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 `<span class="indicator-color-dot" style="background: ${color};"></span>`;
|
||
}).join('');
|
||
const label = getIndicatorLabel(ind);
|
||
|
||
return `
|
||
<div class="indicator-active-item ${isConfiguring ? 'configuring' : ''}"
|
||
data-id="${ind.id}">
|
||
<span class="indicator-active-eye" data-id="${ind.id}"
|
||
title="${ind.visible !== false ? 'Hide' : 'Show'}">
|
||
${ind.visible !== false ? '👁' : '👁🗨'}
|
||
</span>
|
||
<span class="indicator-active-name" data-id="${ind.id}">${label}</span>
|
||
${colorDots}
|
||
<button class="indicator-config-btn ${isConfiguring ? 'active' : ''}"
|
||
data-id="${ind.id}" title="Configure">⚙</button>
|
||
<button class="indicator-remove-btn"
|
||
data-id="${ind.id}" title="Remove">×</button>
|
||
</div>
|
||
`;
|
||
}).join('')}
|
||
</div>
|
||
` : ''}
|
||
`;
|
||
|
||
// 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() {
|
||
const configPanel = document.getElementById('indicatorConfigPanel');
|
||
const configButtons = document.getElementById('configButtons');
|
||
if (!configPanel) return;
|
||
|
||
configPanel.style.display = 'block';
|
||
|
||
// 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 = '<div style="text-align: center; color: var(--tv-text-secondary); padding: 20px; font-size: 12px;">Click an indicator to preview its settings</div>';
|
||
}
|
||
if (configButtons) configButtons.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
/** 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;
|
||
|
||
const IndicatorClass = IR?.[type];
|
||
if (!IndicatorClass) return;
|
||
|
||
const instance = new IndicatorClass({ type, params: {}, name: '' });
|
||
const meta = instance.getMetadata();
|
||
|
||
container.innerHTML = `
|
||
<div style="font-size: 11px; color: var(--tv-blue); margin-bottom: 4px; font-weight: 600;">${meta.name}</div>
|
||
<div style="font-size: 11px; color: var(--tv-text-secondary); margin-bottom: 10px;">${meta.description || ''}</div>
|
||
|
||
${meta.inputs.map(input => `
|
||
<div style="margin-bottom: 8px;">
|
||
<label style="font-size: 10px; color: var(--tv-text-secondary); text-transform: uppercase; display: block; margin-bottom: 4px;">${input.label}</label>
|
||
${input.type === 'select' ?
|
||
`<select class="sim-input" style="font-size: 12px; padding: 6px;" disabled>${input.options.map(o => `<option ${input.default === o ? 'selected' : ''}>${o}</option>`).join('')}</select>` :
|
||
`<input type="number" class="sim-input" value="${input.default}" ${input.step !== undefined ? `step="${input.step}"` : ''} style="font-size: 12px; padding: 6px;" disabled>`
|
||
}
|
||
</div>
|
||
`).join('')}
|
||
|
||
<div style="font-size: 10px; color: var(--tv-text-secondary); margin-top: 8px; text-align: center;">Double-click to add to chart</div>
|
||
`;
|
||
}
|
||
|
||
/** 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: 1
|
||
};
|
||
|
||
// Set Hurst-specific defaults
|
||
if (type === 'hurst') {
|
||
params.timeframe = 'chart';
|
||
params.markerBuyShape = 'custom';
|
||
params.markerSellShape = 'custom';
|
||
params.markerBuyColor = '#9e9e9e';
|
||
params.markerSellColor = '#9e9e9e';
|
||
params.markerBuyCustom = '▲';
|
||
params.markerSellCustom = '▼';
|
||
}
|
||
|
||
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();
|
||
}
|
||
|
||
function selectIndicatorConfig(id) {
|
||
previewingType = null;
|
||
if (configuringId === id) {
|
||
configuringId = null;
|
||
} else {
|
||
configuringId = id;
|
||
}
|
||
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(indicator) {
|
||
const container = document.getElementById('configForm');
|
||
if (!container || !indicator) return;
|
||
|
||
const IndicatorClass = IR?.[indicator.type];
|
||
if (!IndicatorClass) {
|
||
container.innerHTML = '<div style="color: var(--tv-red);">Error loading indicator</div>';
|
||
return;
|
||
}
|
||
|
||
const instance = new IndicatorClass({ type: indicator.type, params: indicator.params, name: indicator.name });
|
||
const meta = instance.getMetadata();
|
||
|
||
const plotGroups = groupPlotsByColor(meta.plots);
|
||
|
||
const colorInputs = plotGroups.map(group => {
|
||
const firstIdx = group.indices[0];
|
||
const color = indicator.params[`_color_${firstIdx}`] || meta.plots[firstIdx].color || '#2962ff';
|
||
return `
|
||
<div style="margin-bottom: 8px;">
|
||
<label style="font-size: 10px; color: var(--tv-text-secondary); text-transform: uppercase; display: block; margin-bottom: 4px;">${group.name} Color</label>
|
||
<input type="color" id="config__color_${firstIdx}" value="${color}" style="width: 100%; height: 28px; border: 1px solid var(--tv-border); border-radius: 4px; cursor: pointer; background: var(--tv-bg);">
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
container.innerHTML = `
|
||
<div style="font-size: 11px; color: var(--tv-blue); margin-bottom: 8px; font-weight: 600;">${getIndicatorLabel(indicator)}</div>
|
||
|
||
${colorInputs}
|
||
|
||
<div style="margin-bottom: 8px;">
|
||
<label style="font-size: 10px; color: var(--tv-text-secondary); text-transform: uppercase; display: block; margin-bottom: 4px;">Line Type</label>
|
||
<select id="config__lineType" class="sim-input" style="font-size: 12px; padding: 6px;">
|
||
${LINE_TYPES.map(lt => `<option value="${lt}" ${indicator.params._lineType === lt ? 'selected' : ''}>${lt.charAt(0).toUpperCase() + lt.slice(1)}</option>`).join('')}
|
||
</select>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 8px;">
|
||
<label style="font-size: 10px; color: var(--tv-text-secondary); text-transform: uppercase; display: block; margin-bottom: 4px;">Line Width</label>
|
||
<input type="number" id="config__lineWidth" class="sim-input" value="${indicator.params._lineWidth || 1}" min="1" max="5" style="font-size: 12px; padding: 6px;">
|
||
</div>
|
||
|
||
${meta.inputs.map(input => `
|
||
<div style="margin-bottom: 8px;">
|
||
<label style="font-size: 10px; color: var(--tv-text-secondary); text-transform: uppercase; display: block; margin-bottom: 4px;">${input.label}</label>
|
||
${input.type === 'select' ?
|
||
`<select id="config_${input.name}" class="sim-input" style="font-size: 12px; padding: 6px;">${input.options.map(o => `<option value="${o}" ${indicator.params[input.name] === o ? 'selected' : ''}>${o}</option>`).join('')}</select>` :
|
||
`<input type="number" id="config_${input.name}" class="sim-input" value="${indicator.params[input.name]}" ${input.min !== undefined ? `min="${input.min}"` : ''} ${input.max !== undefined ? `max="${input.max}"` : ''} ${input.step !== undefined ? `step="${input.step}"` : ''} style="font-size: 12px; padding: 6px;">`
|
||
}
|
||
</div>
|
||
`).join('')}
|
||
`;
|
||
}
|
||
|
||
export function applyIndicatorConfig() {
|
||
const indicator = configuringId ? activeIndicators.find(a => a.id === configuringId) : null;
|
||
if (!indicator) return;
|
||
|
||
const IndicatorClass = IR?.[indicator.type];
|
||
if (!IndicatorClass) return;
|
||
|
||
const instance = new IndicatorClass({ type: indicator.type, params: {}, name: indicator.name });
|
||
const meta = instance.getMetadata();
|
||
|
||
const plotGroups = groupPlotsByColor(meta.plots);
|
||
plotGroups.forEach(group => {
|
||
const firstIdx = group.indices[0];
|
||
const colorEl = document.getElementById(`config__color_${firstIdx}`);
|
||
if (colorEl) {
|
||
const color = colorEl.value;
|
||
group.indices.forEach(idx => {
|
||
indicator.params[`_color_${idx}`] = color;
|
||
});
|
||
}
|
||
});
|
||
|
||
const lineTypeEl = document.getElementById('config__lineType');
|
||
const lineWidthEl = document.getElementById('config__lineWidth');
|
||
|
||
if (lineTypeEl) indicator.params._lineType = lineTypeEl.value;
|
||
if (lineWidthEl) indicator.params._lineWidth = parseInt(lineWidthEl.value);
|
||
|
||
meta.inputs.forEach(input => {
|
||
const el = document.getElementById(`config_${input.name}`);
|
||
if (el) {
|
||
indicator.params[input.name] = input.type === 'select' ? el.value : parseFloat(el.value);
|
||
}
|
||
});
|
||
|
||
renderIndicatorList();
|
||
drawIndicatorsOnChart();
|
||
}
|
||
|
||
export function removeIndicator() {
|
||
if (!configuringId) return;
|
||
removeIndicatorById(configuringId);
|
||
}
|
||
|
||
export 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;
|
||
}
|
||
|
||
renderIndicatorList();
|
||
drawIndicatorsOnChart();
|
||
}
|
||
|
||
export function removeIndicatorByIndex(index) {
|
||
if (index < 0 || index >= activeIndicators.length) return;
|
||
removeIndicatorById(activeIndicators[index].id);
|
||
}
|
||
|
||
let indicatorPanes = new Map();
|
||
let nextPaneIndex = 1;
|
||
|
||
export function drawIndicatorsOnChart() {
|
||
if (!window.dashboard || !window.dashboard.chart) return;
|
||
|
||
activeIndicators.forEach(ind => {
|
||
ind.series?.forEach(s => {
|
||
try { window.dashboard.chart.removeSeries(s); } catch(e) {}
|
||
});
|
||
});
|
||
|
||
const candles = window.dashboard.allData.get(window.dashboard.currentInterval);
|
||
if (!candles || candles.length === 0) return;
|
||
|
||
const lineStyleMap = { 'solid': LightweightCharts.LineStyle.Solid, 'dotted': LightweightCharts.LineStyle.Dotted, 'dashed': LightweightCharts.LineStyle.Dashed };
|
||
|
||
indicatorPanes.clear();
|
||
nextPaneIndex = 1;
|
||
|
||
const overlayIndicators = [];
|
||
const paneIndicators = [];
|
||
|
||
activeIndicators.forEach(ind => {
|
||
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 });
|
||
}
|
||
});
|
||
|
||
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);
|
||
|
||
overlayIndicators.forEach(({ indicator, meta, instance }) => {
|
||
if (indicator.visible === false) {
|
||
indicator.series = [];
|
||
return;
|
||
}
|
||
|
||
renderIndicatorOnPane(indicator, meta, instance, candles, 0, lineStyleMap);
|
||
});
|
||
|
||
paneIndicators.forEach(({ indicator, meta, instance }, idx) => {
|
||
if (indicator.visible === false) {
|
||
indicator.series = [];
|
||
return;
|
||
}
|
||
|
||
const paneIndex = nextPaneIndex++;
|
||
indicatorPanes.set(indicator.id, paneIndex);
|
||
|
||
renderIndicatorOnPane(indicator, meta, instance, candles, paneIndex, lineStyleMap);
|
||
|
||
const pane = window.dashboard.chart.panes()[paneIndex];
|
||
if (pane) {
|
||
pane.setHeight(paneHeight);
|
||
}
|
||
});
|
||
|
||
updateChartLegend();
|
||
}
|
||
|
||
function renderIndicatorOnPane(indicator, meta, instance, candles, paneIndex, lineStyleMap) {
|
||
let results = instance.calculate(candles);
|
||
if (!results || !Array.isArray(results)) {
|
||
console.error(`[renderIndicatorOnPane] ${indicator.name}: Failed to get valid results (got ${typeof results})`);
|
||
return;
|
||
}
|
||
indicator.series = [];
|
||
|
||
const lineStyle = lineStyleMap[indicator.params._lineType] || LightweightCharts.LineStyle.Solid;
|
||
const lineWidth = indicator.params._lineWidth || 1;
|
||
|
||
const firstNonNull = Array.isArray(results) ? results.find(r => r !== null && r !== undefined) : null;
|
||
const isObjectResult = firstNonNull && typeof firstNonNull === 'object';
|
||
|
||
meta.plots.forEach((plot, plotIdx) => {
|
||
if (isObjectResult) {
|
||
// Find if this specific plot has any non-null data across all results
|
||
const hasData = results.some(r => r && r[plot.id] !== undefined && r[plot.id] !== null);
|
||
if (!hasData) return;
|
||
}
|
||
|
||
// Skip hidden plots
|
||
if (plot.visible === false) 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
|
||
});
|
||
}
|
||
}
|
||
|
||
if (data.length === 0) return;
|
||
|
||
let series;
|
||
|
||
// Determine line style for this specific plot
|
||
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: plot.topFillColor2 || '#00000000',
|
||
bottomFillColor1: plot.bottomFillColor1 || '#00000000',
|
||
bottomColor: plot.bottomColor || '#00000000',
|
||
lineWidth: plot.width !== undefined ? plot.width : 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 !== undefined ? plot.width : lineWidth,
|
||
lineStyle: plotLineStyle,
|
||
title: plot.title || '',
|
||
priceLineVisible: false,
|
||
lastValueVisible: plot.lastValueVisible !== false
|
||
}, paneIndex);
|
||
}
|
||
|
||
series.setData(data);
|
||
series.plotId = plot.id;
|
||
|
||
// Skip hidden plots (visible: false)
|
||
if (plot.visible === false) {
|
||
series.applyOptions({ visible: false });
|
||
}
|
||
|
||
indicator.series.push(series);
|
||
});
|
||
|
||
// Render gradient zones if available
|
||
if (meta.gradientZones && indicator.series.length > 0) {
|
||
// Find the main series to attach zones to
|
||
let baseSeries = indicator.series[0];
|
||
|
||
meta.gradientZones.forEach(zone => {
|
||
if (zone.from === undefined || zone.to === undefined) return;
|
||
|
||
// We use createPriceLine on the series for horizontal bands with custom colors
|
||
baseSeries.createPriceLine({
|
||
price: zone.from,
|
||
color: zone.color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[^)]+\)/, 'rgb($1, $2, $3)'),
|
||
lineWidth: 1,
|
||
lineStyle: LightweightCharts.LineStyle.Solid,
|
||
axisLabelVisible: false,
|
||
title: zone.label || '',
|
||
});
|
||
|
||
if (zone.to !== zone.from) {
|
||
baseSeries.createPriceLine({
|
||
price: zone.to,
|
||
color: zone.color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[^)]+\)/, 'rgb($1, $2, $3)'),
|
||
lineWidth: 1,
|
||
lineStyle: LightweightCharts.LineStyle.Solid,
|
||
axisLabelVisible: false,
|
||
title: '',
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
/** 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 `
|
||
<div class="legend-item ${dimmed ? 'legend-dimmed' : ''} ${ind.id === configuringId ? 'legend-selected' : ''}"
|
||
data-id="${ind.id}">
|
||
<span class="legend-dot" style="background: ${firstColor};"></span>
|
||
<span class="legend-label">${label}</span>
|
||
<span class="legend-close" data-id="${ind.id}" title="Remove">×</span>
|
||
</div>
|
||
`;
|
||
}).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;
|