';
document.body.appendChild(panel);
// Add toggle button to status bar
this.addToggleButton();
},
/**
* Add toggle button to status bar
*/
addToggleButton: function() {
var statusBar = document.getElementById('status-bar');
if (!statusBar) return;
var btn = document.createElement('div');
btn.className = 'status-item accuracy-toggle';
btn.id = 'accuracy-toggle';
btn.innerHTML = '\
\
\
--\
\
Accuracy';
btn.onclick = function() { Accuracy.togglePanel(); };
btn.style.cursor = 'pointer';
// Insert after detection-quality
var qualityItem = document.getElementById('detection-quality');
if (qualityItem && qualityItem.nextSibling) {
statusBar.insertBefore(btn, qualityItem.nextSibling);
} else {
statusBar.appendChild(btn);
}
},
/**
* Toggle panel visibility
*/
togglePanel: function() {
var panel = document.getElementById('accuracy-panel');
if (!panel) return;
if (this.panelVisible) {
panel.style.display = 'none';
this.panelVisible = false;
} else {
panel.style.display = 'block';
this.panelVisible = true;
this.refresh();
}
},
/**
* Start polling for accuracy updates
*/
startPolling: function() {
var self = this;
this.refresh();
setInterval(function() {
self.refresh();
}, this.config.pollIntervalMs);
},
/**
* Refresh all accuracy data
*/
refresh: function() {
this.fetchAccuracy();
this.fetchHistory();
this.fetchImprovement();
this.fetchStats();
this.fetchZoneBreakdown();
this.fetchPositionAccuracy();
this.fetchPositionHistory();
},
/**
* Fetch current accuracy metrics
*/
fetchAccuracy: function() {
var self = this;
fetch('/api/learning/accuracy')
.then(function(res) { return res.json(); })
.then(function(data) {
self.currentData = data;
self.updateDisplay();
})
.catch(function(err) {
console.error('[Accuracy] Failed to fetch accuracy:', err);
});
},
/**
* Fetch accuracy history for sparkline
*/
fetchHistory: function() {
var self = this;
fetch('/api/learning/accuracy/history?weeks=' + this.config.historyWeeks)
.then(function(res) { return res.json(); })
.then(function(data) {
self.historyData = data;
self.drawSparkline();
})
.catch(function(err) {
console.error('[Accuracy] Failed to fetch history:', err);
});
},
/**
* Fetch improvement statistics
*/
fetchImprovement: function() {
var self = this;
fetch('/api/learning/accuracy/improvement')
.then(function(res) { return res.json(); })
.then(function(data) {
self.improvementData = data;
self.updateMotivation();
})
.catch(function(err) {
console.error('[Accuracy] Failed to fetch improvement:', err);
});
},
/**
* Fetch feedback stats
*/
fetchStats: function() {
fetch('/api/learning/stats')
.then(function(res) { return res.json(); })
.then(function(data) {
document.getElementById('unprocessed-count').textContent = data.unprocessed_count || 0;
document.getElementById('processed-count').textContent = data.processed_count || 0;
})
.catch(function(err) {
console.error('[Accuracy] Failed to fetch stats:', err);
});
},
/**
* Fetch per-zone accuracy breakdown
*/
fetchZoneBreakdown: function() {
var self = this;
var week = this.getCurrentWeek();
fetch('/api/learning/accuracy/history?scope_type=zone&weeks=1')
.then(function(res) { return res.json(); })
.then(function(data) {
self.renderZoneBreakdown(data);
})
.catch(function(err) {
console.error('[Accuracy] Failed to fetch zone breakdown:', err);
self.renderZoneBreakdown([]);
});
},
/**
* Get current week string
*/
getCurrentWeek: function() {
var now = new Date();
var start = new Date(now.getFullYear(), 0, 1);
var diff = now - start;
var oneWeek = 604800000; // ms in a week
var weekNum = Math.ceil((diff + start.getDay() * 86400000) / oneWeek);
return now.getFullYear() + '-W' + (weekNum < 10 ? '0' : '') + weekNum;
},
/**
* Render zone breakdown
*/
renderZoneBreakdown: function(zones) {
var container = document.getElementById('zone-breakdown');
if (!container) return;
if (!zones || zones.length === 0) {
container.innerHTML = '
No zone data yet
';
return;
}
var self = this;
var html = '';
zones.sort(function(a, b) { return (b.f1 || 0) - (a.f1 || 0); });
zones.forEach(function(zone) {
var f1 = zone.f1 !== null ? (zone.f1 * 100).toFixed(0) + '%' : '--';
var color = zone.f1 >= 0.8 ? '#66bb6a' : (zone.f1 >= 0.6 ? '#ffa726' : '#ef5350');
html += '