some new features
This commit is contained in:
ilgazca
@ -1,76 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Time Series Analysis</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.form-check-label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Time Series Analysis App</h1>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Upload Time Series Data</h5>
|
||||
<p class="card-text">Upload a CSV or Excel file with time series data. First column should be dates, second column should be values.</p>
|
||||
<form method="post" enctype="multipart/form-data" action="/upload">
|
||||
<div class="mb-3">
|
||||
<input type="file" class="form-control" name="file" accept=".csv,.xls,.xlsx">
|
||||
</div>
|
||||
<h6 class="mt-3">Select Analyses:</h6>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="decomposition" id="decomposition" checked>
|
||||
<label class="form-check-label" for="decomposition">
|
||||
Time Series Decomposition (Trend, Seasonality, Residuals)
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="forecasting" id="forecasting" checked>
|
||||
<label class="form-check-label" for="forecasting">
|
||||
Forecasting
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="acf_pacf" id="acf_pacf" checked>
|
||||
<label class="form-check-label" for="acf_pacf">
|
||||
ACF and PACF Plots
|
||||
</label>
|
||||
</div>
|
||||
<div class="mt-3" id="forecast_options" style="display: none;">
|
||||
<h6>Forecasting Options:</h6>
|
||||
<div class="mb-3">
|
||||
<label for="train_percent" class="form-label">Training Data Percentage (50-95%):</label>
|
||||
<input type="number" class="form-control" name="train_percent" id="train_percent" value="80" min="50" max="95" step="1">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="test_percent" class="form-label">Test Data Percentage (5-50%):</label>
|
||||
<input type="number" class="form-control" name="test_percent" id="test_percent" value="20" min="5" max="50" step="1">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="forecast_periods" class="form-label">Number of Periods to Forecast (1-24):</label>
|
||||
<input type="number" class="form-control" name="forecast_periods" id="forecast_periods" value="12" min="1" max="24" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary mt-3">Analyze</button>
|
||||
</form>
|
||||
{% if error %}
|
||||
<div class="alert alert-danger mt-3">{{ error }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="container">
|
||||
<!-- Warning Message -->
|
||||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<strong>Warning:</strong> This app does not save files or outputs. All work will be lost when the page is closed.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<h1 class="text-center mb-4">Time Series Analysis</h1>
|
||||
|
||||
{% if error %}
|
||||
<div class="alert alert-danger">{{ error }}</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" enctype="multipart/form-data" action="/upload">
|
||||
<div class="mb-3">
|
||||
<label for="file" class="form-label">Upload CSV or Excel File</label>
|
||||
<input type="file" class="form-control" id="file" name="file" accept=".csv,.xls,.xlsx" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<h5>Analysis Options</h5>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="decomposition" name="decomposition">
|
||||
<label class="form-check-label" for="decomposition">Perform Decomposition</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="forecasting" name="forecasting" checked>
|
||||
<label class="form-check-label" for="forecasting">Perform Forecasting</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="acf_pacf" name="acf_pacf">
|
||||
<label class="form-check-label" for="acf_pacf">Generate ACF/PACF Plots</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="train_percent" class="form-label">Train Percentage</label>
|
||||
<input type="number" class="form-control" id="train_percent" name="train_percent" value="80" min="1" max="99" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="test_percent" class="form-label">Test Percentage</label>
|
||||
<input type="number" class="form-control" id="test_percent" name="test_percent" value="20" min="1" max="99" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="forecast_periods" class="form-label">Forecast Periods</label>
|
||||
<input type="number" class="form-control" id="forecast_periods" name="forecast_periods" value="12" min="1" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="model_type" class="form-label">Forecast Model</label>
|
||||
<select class="form-control" id="model_type" name="model_type">
|
||||
<option value="ARIMA">ARIMA</option>
|
||||
<option value="Exponential Smoothing">Exponential Smoothing</option>
|
||||
<option value="Prophet">Prophet</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Analyze</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// Show/hide forecasting options based on checkbox
|
||||
document.getElementById('forecasting').addEventListener('change', function() {
|
||||
document.getElementById('forecast_options').style.display = this.checked ? 'block' : 'none';
|
||||
});
|
||||
// Ensure train and test percentages sum to 100
|
||||
// Sync Train and Test Percentage inputs
|
||||
const trainInput = document.getElementById('train_percent');
|
||||
const testInput = document.getElementById('test_percent');
|
||||
trainInput.addEventListener('input', function() {
|
||||
testInput.value = (100 - parseFloat(this.value)).toFixed(0);
|
||||
});
|
||||
testInput.addEventListener('input', function() {
|
||||
trainInput.value = (100 - parseFloat(this.value)).toFixed(0);
|
||||
});
|
||||
|
||||
function syncPercentages(source, target) {
|
||||
source.addEventListener('input', () => {
|
||||
const value = parseFloat(source.value);
|
||||
if (!isNaN(value) && value >= 1 && value <= 99) {
|
||||
target.value = (100 - value).toFixed(0);
|
||||
} else {
|
||||
target.value = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
syncPercentages(trainInput, testInput);
|
||||
syncPercentages(testInput, trainInput);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user