Spaces:
Sleeping
Sleeping
File size: 8,858 Bytes
edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 a10f30d bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 edb27ef bd04e87 |
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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Analysis - Gold Price Prediction</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.gold-accent {
color: #FFD700;
}
.stat-card {
border: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
}
.navbar-brand {
font-weight: bold;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark gradient-bg">
<div class="container">
<a class="navbar-brand" href="/">
<i class="fas fa-coins gold-accent"></i>
Gold Price Predictor
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/data-analysis">Data Analysis</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="container my-5">
<div class="row mb-4">
<div class="col-12">
<h1 class="text-center mb-5">
<i class="fas fa-chart-bar text-warning"></i>
Analisis Data Historis Harga Emas
</h1>
</div>
</div>
<!-- Statistics Cards -->
<div class="row mb-5">
<div class="col-md-3 mb-3">
<div class="card stat-card text-center">
<div class="card-body">
<i class="fas fa-database fa-2x text-primary mb-3"></i>
<h5 class="card-title">Total Records</h5>
<h3 class="text-primary">{{ stats.total_records }}</h3>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card stat-card text-center">
<div class="card-body">
<i class="fas fa-calendar-alt fa-2x text-info mb-3"></i>
<h5 class="card-title">Date Range</h5>
<p class="text-info small">{{ stats.date_range }}</p>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card stat-card text-center">
<div class="card-body">
<i class="fas fa-chart-line fa-2x text-success mb-3"></i>
<h5 class="card-title">Avg Close Price</h5>
<h4 class="text-success">IDR {{ "{:,.0f}".format(stats.avg_close) }}</h4>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card stat-card text-center">
<div class="card-body">
<i class="fas fa-chart-area fa-2x text-warning mb-3"></i>
<h5 class="card-title">Avg Open Price</h5>
<h4 class="text-warning">IDR {{ "{:,.0f}".format(stats.avg_open) }}</h4>
</div>
</div>
</div>
</div>
<!-- Additional Statistics -->
<div class="row mb-5">
<div class="col-md-4 mb-3">
<div class="card stat-card">
<div class="card-body text-center">
<i class="fas fa-arrow-down fa-2x text-danger mb-3"></i>
<h5 class="card-title">Minimum Close Price</h5>
<h4 class="text-danger">IDR {{ "{:,.0f}".format(stats.min_close) }}</h4>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card stat-card">
<div class="card-body text-center">
<i class="fas fa-arrow-up fa-2x text-success mb-3"></i>
<h5 class="card-title">Maximum Close Price</h5>
<h4 class="text-success">IDR {{ "{:,.0f}".format(stats.max_close) }}</h4>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card stat-card">
<div class="card-body text-center">
<i class="fas fa-clock fa-2x text-primary mb-3"></i>
<h5 class="card-title">Current Price</h5>
<h5 class="text-primary">Close: IDR {{ "{:,.0f}".format(stats.current_close) }}</h5>
<h5 class="text-info">Open: IDR {{ "{:,.0f}".format(stats.current_open) }}</h5>
</div>
</div>
</div>
</div>
<!-- Historical Chart -->
<div class="card stat-card mb-5">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-chart-line"></i>
Grafik Harga Historis Emas
</h5>
</div>
<div class="card-body text-center">
<img src="data:image/png;base64,{{ chart }}" class="img-fluid" alt="Historical Price Chart">
</div>
</div>
<!-- Information Cards -->
<div class="row">
<div class="col-md-6 mb-4">
<div class="card stat-card">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-info-circle"></i>
Tentang Data
</h5>
</div>
<div class="card-body">
<ul class="list-unstyled">
<li><i class="fas fa-check text-success"></i> Data diperoleh dari website https://www.investing.com/commodities/gold-historical-data</li>
<li><i class="fas fa-check text-success"></i> Mencakup data historis emas selama 3 tahun</li>
<li><i class="fas fa-check text-success"></i> Data telah dibersihkan dan dinormalisasi</li>
<li><i class="fas fa-check text-success"></i> Tidak ada data yang hilang (null values)</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card stat-card">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-cog"></i>
Tentang Model
</h5>
</div>
<div class="card-body">
<ul class="list-unstyled">
<li><i class="fas fa-check text-success"></i> Algoritma: Linear Regression</li>
<li><i class="fas fa-check text-success"></i> Sliding Window: 7 hari</li>
<li><i class="fas fa-check text-success"></i> Normalisasi: MinMaxScaler</li>
<li><i class="fas fa-check text-success"></i> Train/Test Split: 80/20</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Back to Prediction -->
<div class="text-center mt-5">
<a href="/" class="btn btn-warning btn-lg">
<i class="fas fa-arrow-left"></i>
Kembali ke Prediksi
</a>
</div>
</div>
<!-- Footer -->
<footer class="gradient-bg text-center py-4 mt-5">
<div class="container">
<p class="mb-0">© 2025 Kelompok 4 - Sistem Prediksi Harga Emas. Powered by Machine Learning.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> |