Affichage graph des données / sélection des indicateurs
This commit is contained in:
Jérôme Delacotte
@@ -79,20 +79,33 @@ function graph() {
|
||||
chart.setOption(option);
|
||||
}
|
||||
|
||||
function loadFeather(filename) {
|
||||
fetch(`/read_feather/${filename}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Table
|
||||
const table = document.getElementById('data-table');
|
||||
if (data.length > 0) {
|
||||
let header = '<tr>' + Object.keys(data[0]).map(k => `<th>${k}</th>`).join('') + '</tr>';
|
||||
let rows = data.map(row => '<tr>' + Object.values(row).map(v => `<td>${v}</td>`).join('') + '</tr>');
|
||||
table.innerHTML = header + rows.join('');
|
||||
}
|
||||
function renderChart(data, filename, create_columns) {
|
||||
|
||||
// ECharts (Close price over time)
|
||||
const chart = echarts.init(document.getElementById('chart'));
|
||||
// Table
|
||||
// const table = document.getElementById('data-table');
|
||||
// if (data.length > 0) {
|
||||
// let header = '<tr>' + Object.keys(data[0]).map(k => `<th>${k}</th>`).join('') + '</tr>';
|
||||
// let rows = data.map(row => '<tr>' + Object.values(row).map(v => `<td>${v}</td>`).join('') + '</tr>');
|
||||
// table.innerHTML = header + rows.join('');
|
||||
// }
|
||||
const cols = Object.keys(data[0])
|
||||
if (create_columns === true) {
|
||||
string = "<ul class='indicators'>" + Object.keys(data[0]).map(cols => `<li><label><input id="${cols}" type="checkbox" value="${cols}" onchange="toggleIndicator(this)">${cols}</label></li>`).join('') + "</ul>"
|
||||
const indicators = document.getElementById('indicators');
|
||||
indicators.innerHTML = string
|
||||
}
|
||||
|
||||
|
||||
// const label = document.createElement('label');
|
||||
// label.innerHTML = `<input type="checkbox" value="${col}"> ${col}<br>`;
|
||||
// indicators.appendChild(label);
|
||||
|
||||
let totalPoints = data.length;
|
||||
let visiblePoints = 100;
|
||||
let startPercent = ((totalPoints - visiblePoints) / totalPoints) * 100;
|
||||
|
||||
// ECharts (Close price over time)
|
||||
const chart = echarts.init(document.getElementById('chart'));
|
||||
// const option = {
|
||||
// xAxis: {
|
||||
// type: 'category',
|
||||
@@ -108,52 +121,153 @@ function loadFeather(filename) {
|
||||
// }]
|
||||
// };
|
||||
// specify chart configuration item and data
|
||||
var option = {
|
||||
title: {
|
||||
text: filename
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: {show: true, readOnly: false},
|
||||
restore: {show: true},
|
||||
saveAsImage: {show: true}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// data:[]
|
||||
// },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.map(d => {
|
||||
const date = new Date(d.date);
|
||||
return date.toLocaleDateString('fr-FR'); // ex : 07/05/2025
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
type: 'line',
|
||||
name: 'Close',
|
||||
data: data.map(d => d.close)
|
||||
}]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
});
|
||||
const series = [{
|
||||
type: 'line',
|
||||
name: 'Close',
|
||||
data: data.map(d => d.close)
|
||||
}]
|
||||
// df_ohlc = data
|
||||
// df_ohlc['date'] = pd.to_datetime(data['date']).dt.strftime('%Y-%m-%d')
|
||||
// df_ohlc = data[['date', 'open', 'close', 'low', 'high']]
|
||||
// series.push({
|
||||
// type: 'candlestick',
|
||||
// data: {
|
||||
// 'dates': df_ohlc['date'].tolist(),
|
||||
// 'ohlc': df_ohlc[['open', 'close', 'low', 'high']].values.tolist()
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: '#ec0000', // bougie haussière (fermée plus haut que ouverte)
|
||||
// color0: '#00da3c', // bougie baissière
|
||||
// borderColor: '#8A0000',
|
||||
// borderColor0: '#008F28'
|
||||
// }
|
||||
// }
|
||||
// )
|
||||
|
||||
for (var key in cols) {
|
||||
var value = cols[key];
|
||||
element=document.getElementById(value)
|
||||
if (element) {
|
||||
if (element.checked) {
|
||||
series.push({
|
||||
name: value,
|
||||
type: 'line',
|
||||
data: data.map(d => d[value]),
|
||||
smooth: true,
|
||||
lineStyle: { color: stringToColor(value) }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
var option = {
|
||||
title: {
|
||||
text: filename
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: {show: true, readOnly: false},
|
||||
restore: {show: true},
|
||||
saveAsImage: {show: true}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider', // slider visible en bas
|
||||
start: startPercent,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
type: 'inside', // zoom avec la molette de la souris
|
||||
start: startPercent,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
data: cols, // Affiche les noms de chaque série avec leur couleur
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.map(d => {
|
||||
const date = new Date(d.date);
|
||||
return date.toLocaleDateString('fr-FR'); // ex : 07/05/2025
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 'dataMin', // <-- commence à la plus petite valeur
|
||||
max: 'dataMax' // <-- adapte aussi le maximum
|
||||
},
|
||||
series: series
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
|
||||
}
|
||||
|
||||
function loadFeather(filename) {
|
||||
const element = document.getElementById('current_file_name');
|
||||
element.value = filename
|
||||
fetch(`/read_feather/${filename}`)
|
||||
.then(response => response.json())
|
||||
.then(data => renderChart(data, filename, true) );
|
||||
}
|
||||
|
||||
|
||||
let selectedIndicators = new Set();
|
||||
|
||||
function toggleIndicator(checkbox) {
|
||||
const indicator = checkbox.value;
|
||||
if (checkbox.checked) {
|
||||
selectedIndicators.add(indicator);
|
||||
} else {
|
||||
selectedIndicators.delete(indicator);
|
||||
}
|
||||
loadChartWithIndicators();
|
||||
}
|
||||
|
||||
function loadChartWithIndicators() {
|
||||
const element = document.getElementById('current_file_name');
|
||||
let filename = element.value
|
||||
const indicators = Array.from(selectedIndicators).join(',');
|
||||
fetch(`/get_chart_data?filename=${filename}&indicators=${indicators}`)
|
||||
.then(response => response.json())
|
||||
.then(data => renderChart(data, filename, false));
|
||||
}
|
||||
|
||||
//function createListeners() {
|
||||
// // Écouteurs d'événement
|
||||
// document.querySelectorAll('input[type=checkbox]').forEach(cb => {
|
||||
// cb.addEventListener('change', () => {
|
||||
// chart.setOption({ series: getSeries() });
|
||||
// });
|
||||
// });
|
||||
//}
|
||||
|
||||
function stringToColor(str) {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
|
||||
// Convertir le hash en une teinte HSL (0-360°)
|
||||
const hue = hash % 360;
|
||||
// Saturation et luminosité réglées pour contraste
|
||||
return `hsl(${hue}, 70%, 50%)`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user