Affichage json et pkl

2025-05-07 15:01:34 +02:00
parent e18d112e54
commit 7f778867c4
5 changed files with 222 additions and 36 deletions
--- a/src/static/js/functions.js
+++ b/src/static/js/functions.js
@@ -0,0 +1,80 @@
+function loadJson(filename) {
+    fetch(`/read_json/${filename}`)
+        .then(res => res.json())
+        .then(data => {
+            const tabButtons = document.getElementById('tab-buttons');
+            const tabContents = document.getElementById('tab-contents');
+            tabButtons.innerHTML = '';
+            tabContents.innerHTML = '';
+
+            const isMulti = typeof data === 'object' && !Array.isArray(data);
+
+            if (isMulti) {
+                Object.entries(data).forEach(([name, content], index) => {
+                    const tabId = `tab-${index}`;
+                    const li = document.createElement('li');
+                    const btn = document.createElement('button');
+                    btn.textContent = name;
+                    btn.onclick = () => showTab(tabId);
+                    li.appendChild(btn);
+                    tabButtons.appendChild(li);
+
+                    const div = document.createElement('div');
+                    div.id = tabId;
+                    div.className = 'tab-content';
+                    div.style.display = index === 0 ? 'block' : 'none';
+                    div.innerHTML = Array.isArray(content) ? renderTable(content) : `<pre>${JSON.stringify(content, null, 2)}</pre>`;
+                    tabContents.appendChild(div);
+                });
+            } else {
+                const div = document.createElement('div');
+                div.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
+                tabContents.appendChild(div);
+            }
+        })
+        .catch(err => alert("Erreur : " + err.message));
+}
+
+function renderTable(rows) {
+    if (!rows.length) return "<p>Aucune donnée</p>";
+    const headers = Object.keys(rows[0]);
+    const thead = `<thead><tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr></thead>`;
+    const tbody = rows.map(r => `<tr>${headers.map(h => `<td>${r[h]}</td>`).join('')}</tr>`).join('');
+    return `<table border="1">${thead}<tbody>${tbody}</tbody></table>`;
+}
+
+
+function showTab(tabId) {
+    document.querySelectorAll('.tab-content').forEach(div => {
+        div.style.display = 'none';
+    });
+    document.getElementById(tabId).style.display = 'block';
+}
+
+function graph() {
+        // Initialiser l'instance de graphique
+        var chart = echarts.init(document.getElementById('chart'));
+
+        // Définir les options du graphique
+        var option = {
+            title: {
+                text: 'Exemple de Graphique Linéaire'
+            },
+            tooltip: {},
+            legend: {
+                data: ['Ventes']
+            },
+            xAxis: {
+                data: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
+            },
+            yAxis: {},
+            series: [{
+                name: 'Ventes',
+                type: 'line',
+                data: [5, 20, 36, 10, 10, 20, 30]
+            }]
+        };
+
+        // Utiliser les options pour afficher le graphique
+        chart.setOption(option);
+        }