Key Performance Indicator (KPI) Dashboard
No KPIs defined. Add a KPI in the "Manage KPIs" tab.
';
return;
}
grid.innerHTML = kpiData.map(kpi => {
const cappedAchievement = Math.min(kpi.Achievement, 100);
const statusClass = kpi.Status.toLowerCase().replace(' ', '-');
const progressBarColor = kpi.Status === 'On Target' ? '#16a34a' : kpi.Status === 'Near Target' ? '#f59e0b' : '#dc2626';
return `
${kpi.KPI}
${kpi.Actual.toLocaleString()}${kpi.Unit}
Target: ${kpi.Target.toLocaleString()}${kpi.Unit}
Achievement
${formatPercent(kpi.Achievement)}
`;
}).join('');
}
function renderKpiTable() {
const table = document.getElementById('kpi-table');
table.innerHTML = `
| KPI Name | Target | Actual | Unit | Goal Direction | Actions |
|---|
${kpiData.map(k => `
|
|
|
|
|
|
`).join('')}
`;
}
function addKpi() {
kpiData.push({ id: Date.now(), KPI: 'New KPI', Target: 100, Actual: 0, Unit: '', Direction: 'Higher is Better' });
processAndRenderAll();
}
function handleTableEvents(e) {
const target = e.target; if (!target) return;
const id = parseInt(target.closest('tr')?.dataset.id); if (!id) return;
if (target.classList.contains('remove-kpi-btn')) {
kpiData = kpiData.filter(k => k.id !== id);
} else if (target.tagName === 'INPUT' || target.tagName === 'SELECT') {
const key = target.dataset.key;
const item = kpiData.find(k => k.id === id);
if(item) item[key] = (target.type === 'number') ? parseFloat(target.value) || 0 : target.value;
}
processAndRenderAll();
}
document.getElementById('kpi-add-btn').addEventListener('click', addKpi);
const kpiTable = document.getElementById('kpi-table');
kpiTable.addEventListener('change', handleTableEvents);
kpiTable.addEventListener('click', handleTableEvents);
function initialize() {
kpiData = [
{ id: 1, KPI: 'Monthly Recurring Revenue (MRR)', Target: 250000, Actual: 265000, Unit: '$', Direction: 'Higher is Better' },
{ id: 2, KPI: 'Customer Churn Rate', Target: 2.0, Actual: 1.8, Unit: '%', Direction: 'Lower is Better' },
{ id: 3, KPI: 'Avg. Support Ticket Resolution Time', Target: 8, Actual: 9.2, Unit: 'h', Direction: 'Lower is Better' },
{ id: 4, KPI: 'Website Conversion Rate', Target: 3.5, Actual: 3.8, Unit: '%', Direction: 'Higher is Better' },
];
processAndRenderAll();
}
initialize();
});
