Affichage graph des données

2025-05-07 16:45:28 +02:00
parent 7f778867c4
commit 5861697489
5 changed files with 221 additions and 109 deletions
--- a/src/static/js/functions.js
+++ b/src/static/js/functions.js
@@ -77,4 +77,83 @@ function graph() {

        // Utiliser les options pour afficher le graphique
        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('');
+            }
+
+            // ECharts (Close price over time)
+            const chart = echarts.init(document.getElementById('chart'));
+//            const option = {
+//                xAxis: {
+//                    type: 'category',
+//                    data: data.map(d => d.date)
+//                },
+//                yAxis: {
+//                    type: 'value'
+//                },
+//                series: [{
+//                    type: 'line',
+//                    name: 'Close',
+//                    data: data.map(d => d.close)
+//                }]
+//            };
+            	// 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);
+        });
+}