render a "cursor" that follows the tooltip (#5530)

* WIP - trying to render a "cursor" that follows the tooltip

This is not yet working.

The intention is to have a vertical line on the chart corresponding to the currently shown "tooltip" info in the legend below the chart. This is the behavior of Sidekiq 6.

* Fix the chart cursor

* Move chart legend to the right

* Avoid content jumping when values change

web/assets/javascripts/base-charts.js

@@ -65,7 +65,9 @@ class BaseChart {
   get chartOptions() {
     let chartOptions = {
       interaction: {
-        mode: "x",
+        mode: "nearest",
+        axis: "x",
+        intersect: false,
       },
       scales: {
         x: {

web/assets/javascripts/dashboard-charts.js

@@ -106,7 +106,6 @@ class RealtimeChart extends DashboardChart {
 
   renderLegend(dp) {
     this.legend.innerHTML = `
-      <span>${dp[0].label}</span>
       <span>
         <span class="swatch" style="background-color: ${dp[0].dataset.borderColor};"></span>
         <span>${dp[0].dataset.label}: ${dp[0].formattedValue}</span>
@@ -115,9 +114,17 @@ class RealtimeChart extends DashboardChart {
         <span class="swatch" style="background-color: ${dp[1].dataset.borderColor};"></span>
         <span>${dp[1].dataset.label}: ${dp[1].formattedValue}</span>
       </span>
+      <span class="time">${dp[0].label}</span>
     `;
   }
 
+  renderCursor(dp) {
+    if (this.cursorX != dp[0].label) {
+      this.cursorX = dp[0].label;
+      this.update()
+    }
+  }
+
   get chartOptions() {
     return {
       ...super.chartOptions,
@@ -135,7 +142,22 @@ class RealtimeChart extends DashboardChart {
           enabled: false,
           external: (context) => {
             const dp = context.tooltip.dataPoints;
-            if (dp && this.legend) this.renderLegend(dp);
+            if (dp && dp.length == 2 && this.legend) {
+              this.renderLegend(dp);
+              this.renderCursor(dp);
+            }
+          },
+        },
+        annotation: {
+          annotations: {
+            ...super.chartOptions.plugins.annotation.annotations,
+            cursor: this.cursorX && {
+              type: "line",
+              borderColor: "rgba(0, 0, 0, 0.3)",
+              xMin: this.cursorX,
+              xMax: this.cursorX,
+              borderWidth: 1,
+            },
           },
         },
       },

web/assets/stylesheets/application-rtl.css

@@ -103,7 +103,7 @@ div.interval-slider {
 }
 
 #realtime-legend {
-  text-align: right;
+  justify-content: start;
 }
 
 /* Beacon

web/assets/stylesheets/application.css

@@ -421,15 +421,22 @@ div.interval-slider input {
   margin-top: -20px;
   padding-left: 30px;
   display: flex;
-  gap: 15px;
+  justify-content: end;
   align-items: center;
 }
+#realtime-legend > * {
+  min-width: 14rem;
+}
 #realtime-legend .swatch {
   display: inline-block;
   width: 10px;
   height: 10px;
   margin: 0 5px;
 }
+#realtime-legend .time {
+  min-width: auto;
+  text-align: right;
+}
 
 /* Beacon
 ********************************** */

web/views/dashboard.erb

@@ -1,4 +1,5 @@
 <script type="text/javascript" src="<%= root_path %>javascripts/chart.min.js"></script>
+<script type="text/javascript" src="<%= root_path %>javascripts/chartjs-plugin-annotation.min.js"></script>
 <script type="text/javascript" src="<%= root_path %>javascripts/base-charts.js"></script>
 <script type="text/javascript" src="<%= root_path %>javascripts/dashboard-charts.js"></script>
 <script type="text/javascript" src="<%= root_path %>javascripts/dashboard.js"></script>