static/js/kpi.js

// KPI Report Data Processing
class KPIReport {
    constructor() {
        this.apiUrl = '/api/kpi/';
    }

    async fetchDailyReport(date) {
        const response = await fetch(`${this.apiUrl}daily/?date=${date}`);
        return await response.json();
    }

    async fetchWeeklyReport(weekNumber) {
        const response = await fetch(`${this.apiUrl}weekly/?week=${weekNumber}`);
        return await response.json();
    }

    async fetchMonthlyReport(year, month) {
        const response = await fetch(`${this.apiUrl}monthly/?year=${year}&month=${month}`);
        return await response.json();
    }

    processDailyData(data) {
        return {
            labels: data.metrics.map(m => m.name),
            targets: data.metrics.map(m => m.target),
            actuals: data.metrics.map(m => m.actual),
            percentages: data.metrics.map(m => m.percentage)
        };
    }

    processWeeklyData(data) {
        return {
            labels: data.days.map(d => d.date),
            datasets: data.metrics.map(metric => ({
                label: metric.name,
                data: data.days.map(day => {
                    const dayMetric = day.metrics.find(m => m.name === metric.name);
                    return dayMetric ? dayMetric.value : 0;
                })
            }))
        };
    }

    processMonthlyData(data) {
        return {
            labels: data.metrics.map(m => m.name),
            targets: data.metrics.map(m => m.target),
            actuals: data.metrics.map(m => m.actual)
        };
    }
}

// Initialize KPI Report when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    const kpiReport = new KPIReport();
    // Add event listeners for date/week/month selectors
    // Add chart initialization logic
});