p1otek/btc-trading
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix MA rendering and simplify signal UI

Browse Source 
- 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:
DiTus
2026-03-01 19:45:28 +01:00
parent f789f3d4c1
commit 33f49b1559
3 changed files with 45 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/api/dashboard/static/js/indicators/moving_average.js
View File

@ -176,6 +176,42 @@ export class MAIndicator extends BaseIndicator {
} }
return maValues.map(ma => ({ ma })); 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() { getMetadata() {

15
src/api/dashboard/static/js/ui/chart.js
View File

@ -561,17 +561,16 @@ renderTA() {
const summarySignalClass = summary.signal || 'hold'; const summarySignalClass = summary.signal || 'hold';
const signalsHtml = this.indicatorSignals?.length > 0 ? this.indicatorSignals.map(indSignal => { const signalsHtml = this.indicatorSignals?.length > 0 ? this.indicatorSignals.map(indSignal => {
const signalIcon = indSignal.signal === 'buy' ? '🟢' : indSignal.signal === 'sell' ? '🔴' : '🟡'; const signalIcon = indSignal.signal === 'buy' ? '🟢' : indSignal.signal === 'sell' ? '🔴' : '⚪';
const signalClass = indSignal.signal || 'hold'; const signalColor = indSignal.signal === 'buy' ? '#26a69a' : indSignal.signal === 'sell' ? '#ef5350' : '#787b86';
const valueStr = indSignal.value !== null && indSignal.value !== undefined ? indSignal.value.toFixed(2) : 'N/A'; const lastSignalDate = indSignal.lastSignalDate ? new Date(indSignal.lastSignalDate * 1000).toLocaleDateString() : '-';
const indicatorConfig = indSignal.params ? `\nConfiguration: ${indSignal.params}` : '';
const tooltipText = `Value: ${valueStr}${indicatorConfig}\n\n${indSignal.reasoning}`;
return ` return `
<div class="ta-ma-row" style="border-bottom: none; padding: 4px 0; cursor: help;"> <div class="ta-ma-row" style="border-bottom: none; padding: 6px 0; align-items: center;">
<span class="ta-ma-label" title="${tooltipText}">${indSignal.name}</span> <span class="ta-ma-label">${indSignal.name}</span>
<span class="ta-ma-value" style="display: flex; align-items: center; gap: 8px;"> <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> </span>
</div> </div>
`; `;

41
src/api/dashboard/static/js/ui/indicators-panel-new.js
View File

@ -298,47 +298,6 @@ function renderIndicatorConfig(indicator, meta) {
` : ''} ` : ''}
</div> </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 ? ` ${meta?.inputs && meta.inputs.length > 0 ? `
<div class="config-section"> <div class="config-section">
<div class="section-subtitle">Parameters</div> <div class="section-subtitle">Parameters</div>