From 4d2af41fba4c584d78e12e038a3ebb8eb7ff9fc3 Mon Sep 17 00:00:00 2001
From: Danny van Kooten <dannyvankooten@users.noreply.github.com>
Date: Wed, 25 Oct 2023 13:52:36 +0200
Subject: [PATCH] set innerHTML on tooltip element only once

---
 assets/src/js/components/chart.js | 38 +++++++++++++++++--------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/assets/src/js/components/chart.js b/assets/src/js/components/chart.js
index 3b51d2a8..c22801bc 100644
--- a/assets/src/js/components/chart.js
+++ b/assets/src/js/components/chart.js
@@ -36,6 +36,22 @@ function createTooltip () {
   const el = document.createElement('div')
   el.className = 'ka-chart--tooltip'
   el.style.display = 'none'
+  el.innerHTML = `
+<div class="ka-chart--tooltip-box">
+  <div class="ka-chart--tooltip-heading"></div>
+  <div style="display: flex">
+    <div class="ka-chart--tooltip-content ka--visitors">
+      <div class="ka-chart--tooltip-amount"></div>
+      <div>${i18n['Visitors']}</div>
+    </div>
+    <div class="ka-chart--tooltip-content ka--pageviews">
+      <div class="ka-chart--tooltip-amount"></div>
+      <div>${i18n['Pageviews']}</div>
+    </div>
+  </div>
+</div>
+<div class="ka-chart--tooltip-arrow"></div>`
+
   return el
 }
 
@@ -53,8 +69,8 @@ export default function(root, height) {
 
   document.body.appendChild(tooltip)
   document.addEventListener('click', (evt) => {
-    // hide tooltip if clicking outside of chart or tooltip
-    if (evt.type === 'click' && typeof evt.target.matches === 'function' && evt.target.matches('.ka-chart *,.ka-chart--tooltip *')) {
+    // don't hide if click was inside tooltip
+    if (evt.target.matches && evt.target.matches('.ka-chart *,.ka-chart--tooltip *')) {
       return
     }
 
@@ -63,21 +79,9 @@ export default function(root, height) {
 
   function createShowTooltip (data, barWidth) {
     return (evt) => {
-      tooltip.innerHTML = `
-      <div class="ka-chart--tooltip-box">
-        <div class="ka-chart--tooltip-heading">${format(data.date, dateFormatOptions)}</div>
-        <div style="display: flex">
-          <div class="ka-chart--tooltip-content ka--visitors">
-            <div class="ka-chart--tooltip-amount">${data.visitors}</div>
-            <div>${i18n['Visitors']}</div>
-          </div>
-          <div class="ka-chart--tooltip-content ka--pageviews">
-            <div class="ka-chart--tooltip-amount">${data.pageviews}</div>
-            <div>${i18n['Pageviews']}</div>
-          </div>
-        </div>
-      </div>
-      <div class="ka-chart--tooltip-arrow"></div>`
+      tooltip.querySelector('.ka-chart--tooltip-heading').textContent = format(data.date, dateFormatOptions);
+      tooltip.querySelector('.ka--visitors').children[0].textContent = data.visitors
+      tooltip.querySelector('.ka--pageviews').children[0].textContent = data.visitors
 
       const styles = evt.currentTarget.getBoundingClientRect()
       tooltip.style.display = 'block'