improvements to graphs
This commit is contained in:
overcuriousity
@@ -78,6 +78,29 @@
|
||||
box-shadow: 0 4px 15px var(--shadow-hover);
|
||||
}
|
||||
|
||||
.scale-toggle {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 140px;
|
||||
background: var(--border-color);
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.scale-toggle:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 15px var(--shadow-hover);
|
||||
}
|
||||
|
||||
.scale-toggle.zoomed {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
@@ -389,8 +412,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<button class="theme-toggle" onclick="toggleTheme()">🌓 Toggle Dark Mode</button>
|
||||
<header> <button class="scale-toggle" id="scaleToggle" onclick="toggleScale()" title="Toggle between full scale (0-5) and zoomed view for better distinction">🔍 Full Scale</button> <button class="theme-toggle" onclick="toggleTheme()">🌓 Toggle Dark Mode</button>
|
||||
<h1>🧠 LLM Evaluation Dashboard</h1>
|
||||
<p class="subtitle">Comprehensive Intelligence & Performance Analysis</p>
|
||||
</header>
|
||||
@@ -485,6 +507,8 @@
|
||||
let statisticsData = null;
|
||||
let intelligenceData = null;
|
||||
let currentModelDetails = null;
|
||||
let zoomedScale = false;
|
||||
let overviewChartInstance = null;
|
||||
|
||||
// Theme toggle functionality
|
||||
function toggleTheme() {
|
||||
@@ -501,6 +525,81 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Scale toggle functionality
|
||||
function toggleScale() {
|
||||
zoomedScale = !zoomedScale;
|
||||
const btn = document.getElementById('scaleToggle');
|
||||
if (zoomedScale) {
|
||||
btn.textContent = '🔎 Zoomed';
|
||||
btn.classList.add('zoomed');
|
||||
} else {
|
||||
btn.textContent = '🔍 Full Scale';
|
||||
btn.classList.remove('zoomed');
|
||||
}
|
||||
localStorage.setItem('zoomedScale', zoomedScale ? 'enabled' : 'disabled');
|
||||
// Refresh all charts with new scale
|
||||
refreshAllCharts();
|
||||
}
|
||||
|
||||
// Load scale preference
|
||||
function loadScalePreference() {
|
||||
const savedScale = localStorage.getItem('zoomedScale');
|
||||
if (savedScale === 'enabled') {
|
||||
zoomedScale = true;
|
||||
const btn = document.getElementById('scaleToggle');
|
||||
btn.textContent = '🔎 Zoomed';
|
||||
btn.classList.add('zoomed');
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate optimal Y-axis range for zoomed view
|
||||
function getScaleOptions(data, isRadar = false) {
|
||||
if (!zoomedScale) {
|
||||
// Full scale: 0 to 5
|
||||
if (isRadar) {
|
||||
return { r: { beginAtZero: true, max: 5 } };
|
||||
}
|
||||
return { y: { beginAtZero: true, max: 5 } };
|
||||
}
|
||||
|
||||
// Zoomed scale: calculate min/max with padding
|
||||
const validData = data.filter(d => d !== null && d !== undefined && !isNaN(d));
|
||||
if (validData.length === 0) {
|
||||
if (isRadar) {
|
||||
return { r: { beginAtZero: true, max: 5 } };
|
||||
}
|
||||
return { y: { beginAtZero: true, max: 5 } };
|
||||
}
|
||||
|
||||
const minVal = Math.min(...validData);
|
||||
const maxVal = Math.max(...validData);
|
||||
const range = maxVal - minVal;
|
||||
const padding = Math.max(range * 0.2, 0.2); // At least 0.2 padding
|
||||
|
||||
let min = Math.max(0, Math.floor((minVal - padding) * 10) / 10);
|
||||
let max = Math.min(5, Math.ceil((maxVal + padding) * 10) / 10);
|
||||
|
||||
// Ensure we have at least some range
|
||||
if (max - min < 0.5) {
|
||||
min = Math.max(0, minVal - 0.3);
|
||||
max = Math.min(5, maxVal + 0.3);
|
||||
}
|
||||
|
||||
if (isRadar) {
|
||||
return { r: { min: min, max: max, beginAtZero: false } };
|
||||
}
|
||||
return { y: { min: min, max: max, beginAtZero: false } };
|
||||
}
|
||||
|
||||
// Refresh all charts when scale changes
|
||||
function refreshAllCharts() {
|
||||
if (comparisonData) {
|
||||
refreshOverviewChart();
|
||||
updateComparisonChart();
|
||||
updateCategoryChart();
|
||||
}
|
||||
}
|
||||
|
||||
// Tab switching
|
||||
function switchTab(tabName) {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
@@ -513,6 +612,7 @@
|
||||
// Initialize dashboard
|
||||
async function initDashboard() {
|
||||
loadThemePreference();
|
||||
loadScalePreference();
|
||||
await loadOverview();
|
||||
await loadComparison();
|
||||
await loadStatistics();
|
||||
@@ -553,30 +653,42 @@
|
||||
document.getElementById('overviewStats').innerHTML = statsHtml;
|
||||
|
||||
// Create overview chart
|
||||
const ctx = document.getElementById('overviewChart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: models,
|
||||
datasets: [{
|
||||
label: 'Average Score',
|
||||
data: models.map(m => comparisonData.models[m].overall_stats.average || 0),
|
||||
backgroundColor: 'rgba(102, 126, 234, 0.6)',
|
||||
borderColor: 'rgba(102, 126, 234, 1)',
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
refreshOverviewChart();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading overview:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function refreshOverviewChart() {
|
||||
if (!comparisonData) return;
|
||||
|
||||
const models = Object.keys(comparisonData.models);
|
||||
const data = models.map(m => comparisonData.models[m].overall_stats.average || 0);
|
||||
|
||||
if (overviewChartInstance) {
|
||||
overviewChartInstance.destroy();
|
||||
}
|
||||
|
||||
const ctx = document.getElementById('overviewChart').getContext('2d');
|
||||
overviewChartInstance = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: models,
|
||||
datasets: [{
|
||||
label: 'Average Score',
|
||||
data: data,
|
||||
backgroundColor: 'rgba(102, 126, 234, 0.6)',
|
||||
borderColor: 'rgba(102, 126, 234, 1)',
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: getScaleOptions(data)
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading overview:', error);
|
||||
@@ -630,11 +742,7 @@
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
r: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
scales: getScaleOptions(data, true)
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -855,12 +963,7 @@
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: 5
|
||||
}
|
||||
}
|
||||
scales: getScaleOptions(data)
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -925,7 +1028,7 @@
|
||||
<td>${genTime}</td>
|
||||
<td>${tokenInfo}${tokensPerSec}</td>
|
||||
<td>${test.status}</td>
|
||||
<td><small>${test.notes}</small></td>
|
||||
<td><small>${test.notes || ''}</small></td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user