js/chart-manager.js

export class ChartManager {
    constructor() {
        this.charts = {};
    }

    formatDate(dateStr) {
        return new Date(dateStr).toLocaleDateString('en-US', {
            year: 'numeric', month: 'short', day: 'numeric'
        });
    }

    createProgressChart(repoData) {
        const maxCount = Math.max(...repoData.map(row => row.xet_repos));
        const dataPoints = repoData.map(row => ({
            date: row.date, 
            value: row.xet_repos
        }));
        
        const lineChartCtx = document.getElementById('progressChart').getContext('2d');
        this.charts.lineChart = new Chart(lineChartCtx, {
            type: 'line',
            data: {
                labels: dataPoints.map(point => this.formatDate(point.date)),
                datasets: [{
                    label: 'Repos Migrated',
                    data: dataPoints.map(point => point.value),
                    borderColor: '#7875FF',
                    backgroundColor: 'rgba(255, 127, 65, 1)',
                    tension: 0.4 
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: { duration: 2000 }, 
                scales: {
                    y: {
                        min: 0,
                        ticks: { stepSize: 100000 } 
                    },
                    x: {
                        ticks: {
                            maxTicksLimit: 20
                        }
                    },
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `Repos Migrated: ${context.parsed.y.toLocaleString()}`;
                            }
                        }
                    }
                }
            }
        });
    }

    createDonutChart(fileData) {
        const lfs_file_count = fileData[fileData.length - 1].lfs_files;
        const xet_file_count = fileData[fileData.length - 1].xet_files;

        const donutChartCtx = document.getElementById('largeFilesChart').getContext('2d');
        this.charts.donutChart = new Chart(donutChartCtx, {
            type: 'doughnut',
            data: {
                labels: [
                    'LFS Files',
                    'Xet Files',
                ],
                datasets: [{
                    label: 'My First Dataset',
                    data: [lfs_file_count, xet_file_count],
                    backgroundColor: [
                        'oklch(0.577 0.245 27.325 / 75.56%)',
                        'oklch(0.6361 0.1994 280.07 / 71.37%)',
                    ],
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: { duration: 2000 }, 
                plugins: {
                    legend: {
                        position: 'top',
                    },
                }
            }
        });
    }

    init(repoData, fileData) {
        this.createProgressChart(repoData);
        this.createDonutChart(fileData);
    }
}