refactor: improve syntax

Author: mrholek

js/src/custom-tooltips.js

@@ -23,8 +23,8 @@ const getOrCreateTooltip = chart => {
     const table = document.createElement('table')
     table.style.margin = '0px'
 
-    tooltipEl.appendChild(table)
-    chart.canvas.parentNode.appendChild(tooltipEl)
+    tooltipEl.append(table)
+    chart.canvas.parentNode.append(tooltipEl)
   }
 
   return tooltipEl
@@ -49,7 +49,7 @@ const customTooltips = context => {
     const tableHead = document.createElement('thead')
     tableHead.classList.add(ClassName.TOOLTIP_HEADER)
 
-    titleLines.forEach(title => {
+    for (const title of titleLines) {
       const tr = document.createElement('tr')
       tr.style.borderWidth = 0
       tr.classList.add(ClassName.TOOLTIP_HEADER_ITEM)
@@ -58,15 +58,15 @@ const customTooltips = context => {
       th.style.borderWidth = 0
       const text = document.createTextNode(title)
 
-      th.appendChild(text)
-      tr.appendChild(th)
-      tableHead.appendChild(tr)
-    })
+      th.append(text)
+      tr.append(th)
+      tableHead.append(tr)
+    }
 
     const tableBody = document.createElement('tbody')
     tableBody.classList.add(ClassName.TOOLTIP_BODY)
 
-    bodyLines.forEach((body, i) => {
+    for (const [i, body] of bodyLines.entries()) {
       const colors = tooltip.labelColors[i]
 
       const span = document.createElement('span')
@@ -86,11 +86,11 @@ const customTooltips = context => {
 
       const text = document.createTextNode(body)
 
-      td.appendChild(span)
-      td.appendChild(text)
-      tr.appendChild(td)
-      tableBody.appendChild(tr)
-    })
+      td.append(span)
+      td.append(text)
+      tr.append(td)
+      tableBody.append(tr)
+    }
 
     const tableRoot = tooltipEl.querySelector('table')
 
@@ -100,18 +100,18 @@ const customTooltips = context => {
     }
 
     // Add new children
-    tableRoot.appendChild(tableHead)
-    tableRoot.appendChild(tableBody)
+    tableRoot.append(tableHead)
+    tableRoot.append(tableBody)
   }
 
   const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas
 
   // Display, position, and set styles for font
   tooltipEl.style.opacity = 1
-  tooltipEl.style.left = positionX + tooltip.caretX + 'px'
-  tooltipEl.style.top = positionY + tooltip.caretY + 'px'
+  tooltipEl.style.left = `${positionX + tooltip.caretX}px`
+  tooltipEl.style.top = `${positionY + tooltip.caretY}px`
   tooltipEl.style.font = tooltip.options.bodyFont.string
-  tooltipEl.style.padding = tooltip.padding + 'px ' + tooltip.padding + 'px'
+  tooltipEl.style.padding = `${tooltip.padding}px ${tooltip.padding}px`
 }
 
 export default customTooltips