official-lean-ai-native-leaderboard/progress-calculator.js at main · henrythe9th/official-lean-ai-native-leaderboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
// Configuration for progress calculations and metrics
const progressConfig = {
    totalRevenue: {
        value: 3841700000
    },
    revenuePerEmployee: {
        value: 2500077,
        maxValue: 100000000, // $100MM
        minValue: 0,
        reverseScale: false // Higher is better
    },
    valuationPerEmployee: {
        value: 111929247,
        maxValue: 1000000000, // $1B
        minValue: 0,
        reverseScale: false // Higher is better
    },
    teamSize: {
        value: 28,
        maxValue: 100,
        minValue: 1,
        reverseScale: true // Lower is better (closer to 1-person company)
    }
};

// Format number as currency with $ and commas
function formatCurrency(value) {
    return '$' + value.toLocaleString('en-US');
}

// Format number with commas
function formatNumber(value) {
    return value.toLocaleString('en-US');
}

// Calculate percentages based on configuration
function calculatePercentage(config) {
    let percentage;
    if (config.reverseScale) {
        // For reverse scale (like team size where smaller is better)
        percentage = ((config.maxValue - config.value) / (config.maxValue - config.minValue)) * 100;
    } else {
        // For normal scale (like revenue where larger is better)
        percentage = ((config.value - config.minValue) / (config.maxValue - config.minValue)) * 100;
    }
    // Ensure percentage is between 0 and 100
    return Math.max(0, Math.min(100, percentage));
}

// Function to update progress bar with animation
function updateProgressBar(bar, percentText, percentage) {
    // Set initial width to 0 to ensure animation works
    bar.style.width = '0%';
    percentText.style.left = '0%';
    percentText.textContent = '0%';

    // Force a reflow to ensure the animation works
    void bar.offsetWidth;

    // Use setTimeout to ensure the browser registers the initial state before animating
    setTimeout(() => {
        // Now set the actual width
        bar.style.width = `${percentage}%`;
        percentText.style.left = `${percentage}%`;
        percentText.textContent = `${Math.round(percentage)}%`;
    }, 50);
}

// Calculate and update progress bars and metric values when the page loads
window.addEventListener('DOMContentLoaded', () => {
    // Calculate percentages
    const revenuePercentage = calculatePercentage(progressConfig.revenuePerEmployee);
    const valuationPercentage = calculatePercentage(progressConfig.valuationPerEmployee);
    const teamSizePercentage = calculatePercentage(progressConfig.teamSize);

    try {
        // Get all metric boxes
        const metricBoxes = document.querySelectorAll('.metric-box');

        if (metricBoxes.length >= 4) {
            // Total Revenue (1st box)
            metricBoxes[0].querySelector('.metric-value').textContent =
                formatCurrency(progressConfig.totalRevenue.value);

            // Revenue per employee (2nd box)
            metricBoxes[1].querySelector('.metric-value').textContent =
                formatCurrency(progressConfig.revenuePerEmployee.value);
            updateProgressBar(
                metricBoxes[1].querySelector('.progress-bar-fill'),
                metricBoxes[1].querySelector('.progress-percentage'),
                revenuePercentage
            );

            // Valuation per employee (3rd box)
            metricBoxes[2].querySelector('.metric-value').textContent =
                formatCurrency(progressConfig.valuationPerEmployee.value);
            updateProgressBar(
                metricBoxes[2].querySelector('.progress-bar-fill'),
                metricBoxes[2].querySelector('.progress-percentage'),
                valuationPercentage
            );

            // Team size (4th box)
            metricBoxes[3].querySelector('.metric-value').textContent =
                formatNumber(progressConfig.teamSize.value);
            updateProgressBar(
                metricBoxes[3].querySelector('.progress-bar-fill'),
                metricBoxes[3].querySelector('.progress-percentage'),
                teamSizePercentage
            );
        }
    } catch (error) {
        console.error('Error updating metrics:', error);
    }
});