Fix MA rendering and simplify signal UI
- Fixed MA plot ID to match return structure (ma vs value) - Moved Status and Last Signal display to main Indicator Analysis section - Removed Signal Status section from expanded indicator config - Simplified signal display to show only status icon/type and last signal date - Removed strength and reasoning tooltips from signal display
This commit is contained in:
@ -176,6 +176,42 @@ export class MAIndicator extends BaseIndicator {
|
||||
}
|
||||
|
||||
return maValues.map(ma => ({ ma }));
|
||||
|
||||
getMetadata() {
|
||||
return {
|
||||
name: 'MA',
|
||||
description: 'Moving Average (SMA/EMA/RMA/WMA/VWMA)',
|
||||
inputs: [
|
||||
{
|
||||
name: 'period',
|
||||
label: 'Period',
|
||||
type: 'number',
|
||||
default: 44,
|
||||
min: 1,
|
||||
max: 500
|
||||
},
|
||||
{
|
||||
name: 'maType',
|
||||
label: 'MA Type',
|
||||
type: 'select',
|
||||
options: ['SMA', 'EMA', 'RMA', 'WMA', 'VWMA'],
|
||||
default: 'SMA'
|
||||
}
|
||||
],
|
||||
plots: [
|
||||
{
|
||||
id: 'ma',
|
||||
color: '#2962ff',
|
||||
title: 'MA',
|
||||
style: 'solid',
|
||||
width: 1
|
||||
}
|
||||
],
|
||||
displayMode: 'overlay'
|
||||
};
|
||||
}
|
||||
|
||||
return maValues;
|
||||
}
|
||||
|
||||
getMetadata() {
|
||||
|
||||
@ -561,17 +561,16 @@ renderTA() {
|
||||
const summarySignalClass = summary.signal || 'hold';
|
||||
|
||||
const signalsHtml = this.indicatorSignals?.length > 0 ? this.indicatorSignals.map(indSignal => {
|
||||
const signalIcon = indSignal.signal === 'buy' ? '🟢' : indSignal.signal === 'sell' ? '🔴' : '🟡';
|
||||
const signalClass = indSignal.signal || 'hold';
|
||||
const valueStr = indSignal.value !== null && indSignal.value !== undefined ? indSignal.value.toFixed(2) : 'N/A';
|
||||
const indicatorConfig = indSignal.params ? `\nConfiguration: ${indSignal.params}` : '';
|
||||
const tooltipText = `Value: ${valueStr}${indicatorConfig}\n\n${indSignal.reasoning}`;
|
||||
const signalIcon = indSignal.signal === 'buy' ? '🟢' : indSignal.signal === 'sell' ? '🔴' : '⚪';
|
||||
const signalColor = indSignal.signal === 'buy' ? '#26a69a' : indSignal.signal === 'sell' ? '#ef5350' : '#787b86';
|
||||
const lastSignalDate = indSignal.lastSignalDate ? new Date(indSignal.lastSignalDate * 1000).toLocaleDateString() : '-';
|
||||
|
||||
return `
|
||||
<div class="ta-ma-row" style="border-bottom: none; padding: 4px 0; cursor: help;">
|
||||
<span class="ta-ma-label" title="${tooltipText}">${indSignal.name}</span>
|
||||
<div class="ta-ma-row" style="border-bottom: none; padding: 6px 0; align-items: center;">
|
||||
<span class="ta-ma-label">${indSignal.name}</span>
|
||||
<span class="ta-ma-value" style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="ta-signal ${signalClass}" style="font-size: 11px; padding: 2px 8px; min-width: 60px; text-align: center;" title="${tooltipText}">${signalIcon} ${indSignal.signal.toUpperCase()}</span>
|
||||
<span style="font-size: 11px; padding: 2px 8px; min-width: 60px; text-align: center; background: ${signalColor}; color: white; border-radius: 3px;">${signalIcon} ${indSignal.signal.toUpperCase()}</span>
|
||||
<span style="font-size: 10px; color: var(--tv-text-secondary);">Last: ${lastSignalDate}</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -298,47 +298,6 @@ function renderIndicatorConfig(indicator, meta) {
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
${window.dashboard?.indicatorSignals ? `
|
||||
<div class="config-section">
|
||||
<div class="section-subtitle">Signal Status</div>
|
||||
${(() => {
|
||||
const indSignal = window.dashboard.indicatorSignals.find(s => s.id === indicator.id);
|
||||
if (!indSignal) {
|
||||
return `<div class="config-row" style="color: var(--tv-text-secondary); font-size: 12px;">No signal data available</div>`;
|
||||
}
|
||||
|
||||
const signalType = indSignal.signal.toUpperCase();
|
||||
const signalIcon = signalType === 'BUY' ? '🟢' : signalType === 'SELL' ? '🔴' : '⚪';
|
||||
const signalColor = indSignal.color || 'var(--tv-text-secondary)';
|
||||
const signalDate = indSignal.lastSignalDate ? new Date(indSignal.lastSignalDate * 1000).toLocaleString() : 'Waiting for crossover...';
|
||||
|
||||
return `
|
||||
<div class="config-row" style="align-items: center;">
|
||||
<label style="flex: 0 0 80px;">Status</label>
|
||||
<span class="ta-signal ${indSignal.signal}" style="font-size: 12px; padding: 4px 12px; min-width: 70px; text-align: center; background: ${signalColor}; color: white; border-radius: 4px;">
|
||||
${signalIcon} ${signalType}
|
||||
</span>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label style="flex: 0 0 80px;">Last Signal</label>
|
||||
<span style="color: var(--tv-text-primary); font-size: 12px;">${signalDate}</span>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label style="flex: 0 0 80px;">Strength</label>
|
||||
<div style="display: flex; align-items: center; gap: 8px; flex: 1;">
|
||||
<input type="range" min="0" max="100" value="${indSignal.strength}" disabled style="width: 80px;">
|
||||
<span style="color: var(--tv-text-primary); font-size: 12px;">${indSignal.strength}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label style="flex: 0 0 80px;">Reasoning</label>
|
||||
<span style="color: var(--tv-text-primary); font-size: 11px;">${indSignal.reasoning}</span>
|
||||
</div>
|
||||
`;
|
||||
})()}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${meta?.inputs && meta.inputs.length > 0 ? `
|
||||
<div class="config-section">
|
||||
<div class="section-subtitle">Parameters</div>
|
||||
|
||||
Reference in New Issue
Block a user