dashboard-charts.js in sidekiq-7.3.0

- old
+ new

@@ -106,23 +106,33 @@
   registerLegend(el) {
     this.legend = el;
   }
 
   renderLegend(dp) {
-    this.legend.innerHTML = `
-      <span>
-        <span class="swatch" style="background-color: ${dp[0].dataset.borderColor};"></span>
-        <span>${dp[0].dataset.label}: ${dp[0].formattedValue}</span>
-      </span>
-      <span>
-        <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>
-    `;
+    const entry1 = this.legendEntry(dp[0]);
+    const entry2 = this.legendEntry(dp[1]);
+    const time = document.createElement("span");
+    time.classList.add("time");
+    time.innerText = dp[0].label;
+
+    this.legend.replaceChildren(entry1, entry2, time)
   }
 
+  legendEntry(dp) {
+    const wrapper = document.createElement("span");
+
+    const swatch = document.createElement("span");
+    swatch.classList.add("swatch");
+    swatch.style.backgroundColor = dp.dataset.borderColor;
+    wrapper.appendChild(swatch)
+    
+    const label = document.createElement("span");
+    label.innerText = `${dp.dataset.label}: ${dp.formattedValue}`;
+    wrapper.appendChild(label)
+    return wrapper;
+  }
+
   renderCursor(dp) {
     if (this.cursorX != dp[0].label) {
       this.cursorX = dp[0].label;
       this.update()
     }
@@ -177,6 +187,6 @@
 
   var hc = document.getElementById("history-chart")
   if (hc != null) {
     var htc = new DashboardChart(hc, JSON.parse(hc.textContent))
     window.historyChart = htc
-  }
\ No newline at end of file
+  }