Hugging Face's logo

Spaces:
fernando-bold
/
solar-power-degradation-dashboard
Running

App Files Community
solar-power-degradation-dashboard
File size: 5,288 Bytes
90a9642
fe4831c
 
 
 
 
 
 
 
90a9642
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 

// Handle technical sheet view details
document.addEventListener('view-details', (e) => {
  const equipment = e.detail;
  console.log('View details for:', equipment);
  // Here you could show a modal or navigate to a details page
  alert(`Viewing details for ${equipment.manufacturer} ${equipment.model}`);
});

// Power capacity chart data generation
function generatePowerCapacityData(nominalPower, yearsToShow, annualDegradation) {
  return Array.from({ length: yearsToShow + 1 }, (_, year) => {
    const availablePower = Math.max(
      nominalPower * (1 - (year * annualDegradation) / 100),
      nominalPower * 0.8
    );
    return {
      year: `Ano ${year}`,
      power: availablePower,
      nominal: nominalPower,
    };
  });
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ROI Visionary: Solar Payback Predictor</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/recharts@2.11.2/umd/Recharts.min.js"></script>
    <script src="components/chart-card.js"></script>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-12">
        <header class="mb-12 text-center">
            <h1 class="text-4xl font-bold text-gray-900 mb-2">ROI Visionary</h1>
            <p class="text-xl text-gray-600">Solar Investment Payback Predictor</p>
        </header>

        <main class="max-w-4xl mx-auto">
            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h2 class="text-2xl font-semibold mb-4 text-gray-800">Investment Parameters</h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Initial Investment (R$)</label>
                            <input type="number" id="initialInvestment" value="50000" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Annual Savings (R$)</label>
                            <input type="number" id="annualSavings" value="12000" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Years to Show</label>
                            <input type="number" id="yearsToShow" value="25" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <button id="calculateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-200">
                            Calculate ROI
                        </button>
                    </div>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h2 class="text-2xl font-semibold mb-4 text-gray-800">Quick Summary</h2>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">Payback Period</span>
                            <span id="paybackPeriod" class="font-medium">4.2 years</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">25-Year ROI</span>
                            <span id="roiPercent" class="font-medium">480%</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">Net Value</span>
                            <span id="netValue" class="font-medium">R$ 240k</span>
                        </div>
                        <div class="pt-4">
                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                <div id="paybackProgress" class="h-full bg-blue-600" style="width: 16.8%"></div>
                            </div>
                            <div class="text-xs text-gray-500 mt-1">Years to payback: 4.2/25</div>
                        </div>
                    </div>
                </div>
            </div>

            <chart-card 
                initial-investment="50000" 
                annual-savings="12000" 
                payback-years="4.2" 
                years-to-show="25">
            </chart-card>
        </main>
    </div>

    <script src="script.js"></script>
    <script>
        feather.replace();
    </script>
</body>
</html>