Add support date navigation fro Traders list

Author: smalinin

bn_lightweight_charts/js/index_bn.html

@@ -19,6 +19,14 @@
             Cantarell, "Helvetica Neue", sans-serif;
     }
 
+    td.dt0, td.dt1, td.dt {
+        cursor: pointer;
+        text-decoration: underline;
+    }
+    td.dt0, td.dt1{
+        color: blue;
+    }
+
     .tableview {
       background: darkgrey;
       color: black;
@@ -165,6 +173,30 @@ <h6>Performance Report for [ <span id="strategy-title"></span> ] </h6>
             return []
           }
         }
+
+        function scrollToTime(chart, stm0, stm1)
+        {
+          const tm0 = (new Date((stm0+":00").replace(' ','T')+'Z')).getTime()/1000
+          const tm1 = stm1 ? (new Date((stm1+":00").replace(' ','T')+'Z')).getTime()/1000 : null
+
+          const scale = chart.timeScale()
+          const tc0 = scale.timeToCoordinate(tm0)
+          if (tc0) {
+            const idx0 = scale.coordinateToLogical(tc0)
+            if (tm1) {
+              const tc1 = scale.timeToCoordinate(tm1)
+              if (tc1) {
+                const idx1 = scale.coordinateToLogical(tc1)
+                scale.setVisibleLogicalRange({ from: idx0 - 5, to: idx1 + 5 });
+                document.querySelector("#nav-home-tab").click();
+              }
+            }
+            else {
+                scale.setVisibleLogicalRange({ from: idx0 - 5, to: idx0 + 200 + 5 });
+                document.querySelector("#nav-home-tab").click();
+            }
+          }
+        }
     </script>
 </body>
 </html>

bn_lightweight_charts/widgets.py

@@ -259,8 +259,8 @@ def _prepare_html(self):
                     }}
                     const pos = v.size > 0 ? 'Long' : 'Short';
                     _html += `<tr><td>${{v.ref}}</td> <td>${{pos}}</td><td>${{v.tradeid}}</td>`
-                                +`<td>${{v.dateopen}}</td><td>${{v.priceopen}}</td>`
-                                +`<td>${{v.dateclose}}</td><td>${{v.priceclose}}</td>`
+                                +`<td class="dt0">${{v.dateopen}}</td><td>${{v.priceopen}}</td>`
+                                +`<td class="dt1">${{v.dateclose}}</td><td>${{v.priceclose}}</td>`
                                 +`<td>${{v.pnlcomm}}</td><td>${{v.return_pct}}</td><td>${{v.commission}}</td>`
                                 +`<td>${{v.barlen}}</td></tr>`;
                 }}
@@ -274,7 +274,7 @@ def _prepare_html(self):
                         state = 1;
                     }}
                     const pos = v.o_ordtype===0 ? 'Buy' : 'Sell';
-                    _html += `<tr><td>${{v.o_ref}}</td><td>${{v.o_datetime}}</td><td>${{pos}}</td>`
+                    _html += `<tr><td>${{v.o_ref}}</td><td class="dt">${{v.o_datetime}}</td><td>${{pos}}</td>`
                             +`<td>${{v.o_price}}</td><td>${{v.o_size}}</td></tr>`;
                 }}
             }}
@@ -314,6 +314,25 @@ def _prepare_html(self):
             }}
         }}
         document.querySelectorAll('#slist a')[0]?.click()
+
+        document.querySelector('#trades tbody').ondblclick = (e) => {{
+            const n = e.target;
+            const chart = {self.id}.chart;
+            if (n.nodeName==='TD' && n.classList.contains('dt0')) {{
+                const dt0 = n.innerText
+                const dt1 = n.parentNode.querySelector('td.dt1')?.innerText
+                scrollToTime(chart, dt0, dt1)
+            }}
+            else if (n.nodeName==='TD' && n.classList.contains('dt1')) {{
+                const dt1 = n.innerText
+                const dt0 = n.parentNode.querySelector('td.dt0')?.innerText
+                scrollToTime(chart, dt0, dt1)
+            }}
+            else if (n.nodeName==='TD' && n.classList.contains('dt')) {{
+                const dt0 = n.innerText
+                scrollToTime(chart, dt0)
+            }}
+        }}
         \n</script></body></html>
         '''
         return html_code