From ffa95ed18c63d2bf75700109ea56ddb4afdbc282 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Delacotte?= <jerome.delacotte@bappli.com>
Date: Thu, 8 May 2025 20:27:46 +0200
Subject: [PATCH] =?UTF-8?q?M=C3=A9nage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/static/js/functions.js | 98 +++++---------------------------------
 src/templates/index.html   | 15 +-----
 2 files changed, 13 insertions(+), 100 deletions(-)

diff --git a/src/static/js/functions.js b/src/static/js/functions.js
index de82351..2ac6127 100644
--- a/src/static/js/functions.js
+++ b/src/static/js/functions.js
@@ -34,8 +34,6 @@ function loadJson(filename) {
                     }
 
                 });
-//                renderChart(data, '', true)
-
             } else {
                 const div = document.createElement('div');
                 div.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
@@ -66,32 +64,6 @@ function jsonToUl(json) {
 
     return ul;
 }
-//function jsonToTable(obj, depth = 0) {
-//    const table = document.createElement('table');
-//    table.border = 1;
-//
-//    for (const key in obj) {
-//        const row = document.createElement('tr');
-//
-//        const cellKey = document.createElement('td');
-//        cellKey.textContent = key;
-//        row.appendChild(cellKey);
-//
-//        const cellValue = document.createElement('td');
-//        const value = obj[key];
-//
-//        if (typeof value === 'object' && value !== null && depth < 4) {
-//            cellValue.appendChild(jsonToTable(value, depth + 1)); // recurse
-//        } else {
-//            cellValue.textContent = value;
-//        }
-//
-//        row.appendChild(cellValue);
-//        table.appendChild(row);
-//    }
-//
-//    return table;
-//}
 
 function jsonToTable(data, depth = 0) {
     if (Array.isArray(data)) {
@@ -168,8 +140,6 @@ function jsonToTable(data, depth = 0) {
     }
 }
 
-
-
 function addTab(name, index, content) {
     const tabButtons = document.getElementById('tab-buttons');
     const tabContents = document.getElementById('tab-contents');
@@ -237,13 +207,6 @@ function graph() {
 
 function renderChart(data, filename, create_columns) {
 
-    // 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('');
-//    }
     let signals = JSON.parse(sessionStorage.getItem("signals"));
     let exited = JSON.parse(sessionStorage.getItem("exited"));
     let market = JSON.parse(sessionStorage.getItem("market"));
@@ -255,7 +218,6 @@ function renderChart(data, filename, create_columns) {
 
     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>"
         string = "<ul class='indicators'>" +
             Object.keys(data[0])
                 .filter(key => !['date', 'open', 'close', 'volume', 'high', 'low'].includes(key))
@@ -266,41 +228,29 @@ function renderChart(data, filename, create_columns) {
         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',
-//                    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
+     if (create_columns === true) {
+        var tab_element = document.getElementById('tab-contents')
+        var index_tabs = tab_element.childNodes.length
+        addTab('Graph', 'chart' /*+ index_tabs*/, "{}")
+    }
+
+    const chart = echarts.init(document.getElementById('tab-chart' /*_' + index_tabs*/), null,
+        {
+            width: window.innerWidth - 200,
+            height: window.innerHeight - 100
+        });
+    window.addEventListener('resize', function() {chart.resize();});
 
     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']]
     const result = data.map(({ open, close, low, high }) => [open, close, low, high]);
 
     marks = []
@@ -348,21 +298,6 @@ function renderChart(data, filename, create_columns) {
               color: 'rgb(90,0,0)'
             }
         })
-        //              {
-//                name: 'highest value',
-//                type: 'max',
-//                valueDim: 'highest'
-//              },
-//              {
-//                name: 'lowest value',
-//                type: 'min',
-//                valueDim: 'lowest'
-//              },
-//              {
-//                name: 'average value on close',
-//                type: 'average',
-//                valueDim: 'close'
-//              }
     }
 
     series.push({
@@ -531,15 +466,6 @@ function loadChartWithIndicators() {
         .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++) {
diff --git a/src/templates/index.html b/src/templates/index.html
index 1dc2e83..fdcd168 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -41,28 +41,15 @@
     </dialog>
 
 </div>
-<div class="content">
+<div id='content' class="content">
     <div id="json-tabs">
         <ul id="tab-buttons"></ul>
         <div id="tab-contents"></div>
     </div>
 </div>
 
-<div id="chart" style="width: 100%; height: 1024px;"></div>
-
-<table border="1" id="data-table"></table>
-
-<!--<div id="data-table" style="margin-left: 220px; padding: 20px;"></div>-->
-
 <input id="current_file_name" hidden value="">
 
-<!-- Colonne droite avec le graphique (remplacez avec votre graphique)
-<div class="graph-container">
-    <h3>Graphique</h3>
-    <div id="chart" style="width: 600px; height: 400px;"></div>
-</div>
--->
-
 <script>init()</script>
 
 </body>