divers

src/app.py

@@ -122,7 +122,6 @@ def get_chart_data():
     print(path)
     indicators = request.args.get('indicators', '').split(',')
     df = pd.read_feather(path)
-    print(df)
 
     # # Calculs conditionnels
     # if 'sma' in indicators:

src/static/js/functions.js

@@ -90,7 +90,14 @@ 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]).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))
+                .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
     }
@@ -130,21 +137,36 @@ function renderChart(data, filename, create_columns) {
 //    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({
+    const result = data.map(({ open, close, low, high }) => [open, close, low, high]);
-//        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'
-//        }
-//       }
-//    )
 
+    series.push({
+        type: 'candlestick',
+        data: result,
+        itemStyle: {
+          color: '#ec0000',        // bougie haussière (fermée plus haut que ouverte)
+          color0: '#00da3c',       // bougie baissière
+          borderColor: '#8A0000',
+          borderColor0: '#008F28'
+        }
+       }
+    )
+//    console.log(result)
+
+    series.push({
+      name: 'Volume',
+      type: 'bar',
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: '#7fbe9e'
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#140'
+        }
+      },
+      data: data.map(d => d.volume)
+    })
     for (var key in cols) {
         var value = cols[key];
         element=document.getElementById(value)
@@ -201,18 +223,37 @@ function renderChart(data, filename, create_columns) {
         legend: {
             data: cols, // Affiche les noms de chaque série avec leur couleur
         },
-        xAxis: {
+        xAxis: [{
             type: 'category',
             data: data.map(d => {
                 const date = new Date(d.date);
                 return date.toLocaleDateString('fr-FR');  // ex : 07/05/2025
             })
         },
-        yAxis: {
+        {
+            type: 'category',
+            data: data.map(d => {
+                const date = new Date(d.date);
+                return date.toLocaleDateString('fr-FR');  // ex : 07/05/2025
+            }),
+            gridIndex: 1
+        }
+        ],
+        yAxis: [{
                 type: 'value',
                 min: 'dataMin',   // <-- commence à la plus petite valeur
                 max: 'dataMax'    // <-- adapte aussi le maximum
             },
+            {
+                gridIndex: 1,
+                min: 'dataMin',   // <-- commence à la plus petite valeur
+                max: 'dataMax'    // <-- adapte aussi le maximum
+            }
+        ],
+        grid: [
+            { left: '10%', right: '8%', height: '70%' },
+            { left: '10%', right: '8%', top: '80%', height: '10%' }
+        ],
         series: series
     }
 

src/templates/index.html

@@ -29,11 +29,7 @@
     </div>
 </div>
 
-<div id="indicators">
+<div id="indicators"></div>
-  <label><input id="smaCheckbox" type="checkbox" value="sma" onchange="toggleIndicator(this)"> SMA</label>
-  <label><input id="rsiCheckbox" type="checkbox" value="rsi" onchange="toggleIndicator(this)"> RSI</label>
-  <label><input id="bbCheckbox" type="checkbox" value="bollinger" onchange="toggleIndicator(this)"> Bollinger</label>
-</div>
 <div id="chart" style="width: 100%; height: 1024px;"></div>
 
 <table border="1" id="data-table"></table>