affichage plusieurs echelles + css

src/static/css/style.css

@@ -23,13 +23,8 @@
             padding: 0;
         }
 
-        li {
-            padding: 5px;
-            border-bottom: 1px solid #ddd;
-        }
-
         li:hover {
-            background-color: #f0f0f0;
+            background-color: #c0f0f0;
         }
 
 
@@ -85,3 +80,18 @@
     margin-top: 1rem;
     white-space: pre-wrap;
 }
+ul.indicators {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(125px, 1fr));
+}
+.is-1h {
+    color: green;
+    font-weight: bold;
+}
+.is-1d {
+    color: orange;
+    font-weight: bold;
+}

src/static/js/functions.js

@@ -242,8 +242,8 @@ function renderChart(data, filename, create_columns) {
 
     const chart = echarts.init(document.getElementById('tab-chart' /*_' + index_tabs*/), null,
         {
-            width: window.innerWidth - 200,
-            height: window.innerHeight - 100
+            width: window.innerWidth - 250,
+            height: window.innerHeight - 150
         });
     window.addEventListener('resize', function() {chart.resize();});
 
@@ -252,7 +252,6 @@ function renderChart(data, filename, create_columns) {
         name: 'Close',
         data: data.map(d => d.close)
     }]
-    const result = data.map(({ open, close, low, high }) => [open, close, low, high]);
 
     marks = []
 
@@ -301,14 +300,18 @@ function renderChart(data, filename, create_columns) {
         })
     }
 
+    // Bougies
+    const result = data.map(({ open, close, low, high }) => [open, close, low, high]);
+
     series.push({
         type: 'candlestick',
         data: result,
+        yAxisIndex: 0,
         itemStyle: {
-          color: '#ec0000',        // bougie haussière (fermée plus haut que ouverte)
-          color0: '#00da3c',       // bougie baissière
-          borderColor: '#8A0000',
-          borderColor0: '#008F28'
+          color: '#00da3c',      // hausse (close > open) => vert
+          color0: '#ec0000',     // baisse (close < open) => rouge
+          borderColor: '#008F28',
+          borderColor0: '#8A0000'
         },
         markPoint: {
             label: {
@@ -326,11 +329,12 @@ function renderChart(data, filename, create_columns) {
        }
     )
 
+    // Volume
     series.push({
       name: 'Volume',
       type: 'bar',
       xAxisIndex: 1,
-      yAxisIndex: 1,
+      yAxisIndex: 2,
       itemStyle: {
         color: '#7fbe9e'
       },
@@ -347,13 +351,36 @@ function renderChart(data, filename, create_columns) {
         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) }
-                })
+
+                // RSI
+                if (value.toLowerCase().indexOf('rsi') >= 0) {
+                    series.push({
+                      name: value,
+                      type: 'line',
+                      yAxisIndex: 1,
+                      lineStyle: { color: stringToColor(value) },
+                      data: data.map(d => d[value])
+                    })
+                }
+                else if (value.toLowerCase().indexOf('pct') >= 0 | value.indexOf('percent') >= 0) {
+                    series.push({
+                      name: value,
+                      type: 'line',
+                      yAxisIndex: 3,
+                      lineStyle: { color: stringToColor(value) },
+                      data: data.map(d => d[value])
+                    })
+                }
+                else {
+                    series.push({
+                        name: value,
+                        type: 'line',
+                        yAxisIndex: 0,
+                        data: data.map(d => d[value]),
+                        smooth: true,
+                        lineStyle: { color: stringToColor(value) }
+                    })
+                }
            }
         }
     }
@@ -415,16 +442,35 @@ function renderChart(data, filename, create_columns) {
                 gridIndex: 1
             }
         ],
-        yAxis: [{
+        yAxis: [
+            // yAxisIndex: 0
+            {
                 type: 'value',
                 min: 'dataMin',   // <-- commence à la plus petite valeur
                 max: 'dataMax'    // <-- adapte aussi le maximum
             },
+            // yAxisIndex: 1
+            {
+              type: 'value',   // Axe pour le RSI
+              name: 'RSI',
+              position: 'right',
+              min: 0,
+              max: 100
+            },
+            // yAxisIndex: 2
             {
                 gridIndex: 1,
                 min: 'dataMin',   // <-- commence à la plus petite valeur
                 max: 'dataMax'    // <-- adapte aussi le maximum
-            }
+            },
+            // yAxisIndex: 3
+            {
+              type: 'value',   // Axe pour le RSI
+              name: 'PCT',
+              position: 'right',
+              min: -1,
+              max: 1
+            },
         ],
         grid: [
             { left: '10%', right: '8%', height: '70%' },
@@ -435,6 +481,15 @@ function renderChart(data, filename, create_columns) {
 
     chart.setOption(option)
 
+    document.querySelectorAll('.indicators li').forEach(li => {
+        if (li.textContent.trim().endsWith('_1h')) {
+            li.classList.add('is-1h');
+        }
+        if (li.textContent.trim().endsWith('_1d')) {
+            li.classList.add('is-1d');
+        }
+    });
+
 }
 
 function loadFeather(filename) {