e449354b69
- Created Flask web application (app.py) to display and analyze trading data - Implemented data loading, processing, and email notification features - Added HTML templates for interactive data viewing - Included ultimate smoother and trend detection algorithms - Configured dynamic file selection and data rendering
200 lines
7.2 KiB
HTML
200 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CSV Data Viewer</title>
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
table, th, td {
|
|
border: 1px solid black;
|
|
}
|
|
th, td {
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
button {
|
|
margin: 10px;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
select {
|
|
width: 100%;
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Real-Time CSV Data Viewer</h1>
|
|
|
|
<!-- 动态生成文件切换按钮 -->
|
|
{% for file_name, file_path in files.items() %}
|
|
<button onclick="loadData('{{ file_name }}')">{{ file_name }}</button>
|
|
{% endfor %}
|
|
|
|
<h3>Data for {{ file_name }}</h3>
|
|
<table id="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<select id="filter-price" onchange="filterTable()">
|
|
<option value="">Price</option>
|
|
</select>
|
|
</th>
|
|
<th>
|
|
<select id="filter-Ask" onchange="filterTable()">
|
|
<option value="">Ask</option>
|
|
</select>
|
|
</th>
|
|
<th>
|
|
<select id="filter-Bid" onchange="filterTable()">
|
|
<option value="">Bid</option>
|
|
</select>
|
|
</th>
|
|
<th>
|
|
<select id="filter-symbol" onchange="filterTable()">
|
|
<option value="">Symbol</option>
|
|
</select>
|
|
</th>
|
|
<th>
|
|
<select id="filter-datetime" onchange="filterTable()">
|
|
<option value="">Datetime</option>
|
|
</select>
|
|
</th>
|
|
<th>
|
|
<select id="filter-delta" onchange="filterTable()">
|
|
<option value="">Delta</option>
|
|
</select>
|
|
</th>
|
|
<th>
|
|
<select id="filter-close" onchange="filterTable()">
|
|
<option value="">Close</option>
|
|
</select>
|
|
</th>
|
|
<th>
|
|
<select id="filter-open" onchange="filterTable()">
|
|
<option value="">Open</option>
|
|
</select>
|
|
</th>
|
|
<th>
|
|
<select id="filter-high" onchange="filterTable()">
|
|
<option value="">High</option>
|
|
</select>
|
|
</th>
|
|
<th>
|
|
<select id="filter-low" onchange="filterTable()">
|
|
<option value="">Low</option>
|
|
</select>
|
|
</th>
|
|
<th>
|
|
<select id="filter-volume" onchange="filterTable()">
|
|
<option value="">Volume</option>
|
|
</select>
|
|
</th>
|
|
<th>
|
|
<select id="filter-dj" onchange="filterTable()">
|
|
<option value="">DJ</option>
|
|
</select>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in data %}
|
|
<tr>
|
|
<td>{{ row.price }}</td>
|
|
<td>{{ row.Ask }}</td>
|
|
<td>{{ row.Bid }}</td>
|
|
<td>{{ row.symbol }}</td>
|
|
<td>{{ row.datetime }}</td>
|
|
<td>{{ row.delta }}</td>
|
|
<td>{{ row.close }}</td>
|
|
<td>{{ row.open }}</td>
|
|
<td>{{ row.high }}</td>
|
|
<td>{{ row.low }}</td>
|
|
<td>{{ row.volume }}</td>
|
|
<td>{{ row.dj }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
function loadData(fileName) {
|
|
fetch('/data/' + fileName)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
let tableBody = document.querySelector("#data-table tbody");
|
|
tableBody.innerHTML = ''; // 清空现有数据行
|
|
data.forEach(row => {
|
|
let rowElement = document.createElement('tr');
|
|
rowElement.innerHTML = `
|
|
<td>${row.price}</td>
|
|
<td>${row.Ask}</td>
|
|
<td>${row.Bid}</td>
|
|
<td>${row.symbol}</td>
|
|
<td>${row.datetime}</td>
|
|
<td>${row.delta}</td>
|
|
<td>${row.close}</td>
|
|
<td>${row.open}</td>
|
|
<td>${row.high}</td>
|
|
<td>${row.low}</td>
|
|
<td>${row.volume}</td>
|
|
<td>${row.dj}</td>
|
|
`;
|
|
tableBody.appendChild(rowElement);
|
|
});
|
|
|
|
populateFilters(data);
|
|
});
|
|
}
|
|
|
|
function populateFilters(data) {
|
|
let columns = ["price", "Ask", "Bid", "symbol", "datetime", "delta", "close", "open", "high", "low", "volume", "dj"];
|
|
columns.forEach(col => {
|
|
let uniqueValues = [...new Set(data.map(row => row[col]))];
|
|
let select = document.getElementById(`filter-${col}`);
|
|
select.innerHTML = '<option value="">All</option>';
|
|
uniqueValues.forEach(value => {
|
|
select.innerHTML += `<option value="${value}">${value}</option>`;
|
|
});
|
|
});
|
|
}
|
|
|
|
function filterTable() {
|
|
let filters = {
|
|
price: document.getElementById("filter-price").value,
|
|
Ask: document.getElementById("filter-Ask").value,
|
|
Bid: document.getElementById("filter-Bid").value,
|
|
symbol: document.getElementById("filter-symbol").value,
|
|
datetime: document.getElementById("filter-datetime").value,
|
|
delta: document.getElementById("filter-delta").value,
|
|
close: document.getElementById("filter-close").value,
|
|
open: document.getElementById("filter-open").value,
|
|
high: document.getElementById("filter-high").value,
|
|
low: document.getElementById("filter-low").value,
|
|
volume: document.getElementById("filter-volume").value,
|
|
dj: document.getElementById("filter-dj").value
|
|
};
|
|
|
|
let rows = document.querySelectorAll("#data-table tbody tr");
|
|
rows.forEach(row => {
|
|
let cells = row.children;
|
|
let show = true;
|
|
|
|
Object.keys(filters).forEach((col, index) => {
|
|
if (filters[col] && cells[index].textContent !== filters[col]) {
|
|
show = false;
|
|
}
|
|
});
|
|
|
|
row.style.display = show ? "" : "none";
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|