Fix graph tooltip rendering

dashboard/src/components/GraphItem.vue

@@ -30,6 +30,51 @@ const props = defineProps({
   highMarkLabel: String,
 });
 
+function renderTooltip(context) {
+  // console.log(context); { chart, tooltip } tooltip has { title, body }
+  if (!tooltipElem.value) return;
+
+  const { /*chart, */ tooltip } = context;
+
+  if (tooltip.opacity === 0) {
+    tooltipElem.value.style.opacity = 0;
+    return;
+  }
+
+  const { title, body, labelColors } = tooltip; // these were computed in the "callback" in tooltip configuration
+  if (body) {
+    const titleLines = title || [];
+    const bodyLines = body.map(item => item.lines);
+
+    let innerHtml = `<div class="graphs-tooltip-title">${titleLines[0]}</div>`;
+
+    bodyLines.forEach(function(body, i) {
+      const colors = labelColors[i];
+      innerHtml += `<div style="color: ${colors.borderColor}" class="graphs-tooltip-item">${body}</div>`;
+    });
+
+    tooltipElem.value.innerHTML = innerHtml;
+  }
+
+  tooltipElem.value.style.opacity = 1;
+  tooltipElem.value.style.position = 'absolute';
+
+  tooltipElem.value.classList.remove('graphs-tooltip-caret-left', 'graphs-tooltip-caret-right');
+
+  if (tooltip.chart.width/2 < tooltip.caretX) {
+    tooltipElem.value.style.right = (tooltip.chart.width - tooltip.caretX) + 'px';
+    tooltipElem.value.style.left = 'unset';
+    tooltipElem.value.classList.add('graphs-tooltip-caret-right');
+  } else {
+    tooltipElem.value.style.right = 'unset';
+    tooltipElem.value.style.left = tooltip.caretX + 'px';
+    tooltipElem.value.classList.add('graphs-tooltip-caret-left');
+  }
+
+  tooltipElem.value.style.top = '0px';
+  tooltipElem.value.style.height = '100%';
+}
+
 function createGraphOptions({ yscale, period, highMark }) {
   let startTime, endTime, stepSize, count; // x axis configuration values
 
@@ -54,56 +99,14 @@ function createGraphOptions({ yscale, period, highMark }) {
       },
       tooltip: {
         enabled: false,
-        external: function(context) {
-          if (!tooltipElem.value) return;
-
-          const tooltipModel = context.tooltip;
-          if (tooltipModel.opacity === 0) {
-            tooltipElem.value.style.opacity = 0;
-            return;
-          }
-
-          // Set Text
-          if (tooltipModel.body) {
-            const titleLines = tooltipModel.title || [];
-            const bodyLines = tooltipModel.body.map(item => item.lines);
-
-            let innerHtml = `<div class="graphs-tooltip-title">${titleLines[0]}</div>`;
-
-            bodyLines.forEach(function(body, i) {
-              const colors = tooltipModel.labelColors[i];
-              innerHtml += `<div style="color: ${colors.borderColor}" class="graphs-tooltip-item">${body}</div>`;
-            });
-
-            tooltipElem.value.innerHTML = innerHtml;
-          }
-
-
-          tooltipElem.value.style.opacity = 1;
-          tooltipElem.value.style.position = 'absolute';
-
-          tooltipElem.value.classList.remove('graphs-tooltip-caret-left', 'graphs-tooltip-caret-right');
-
-          if (tooltipModel.chart.width/2 < tooltipModel.caretX) {
-            tooltipElem.value.style.right = (tooltipModel.chart.width - tooltipModel.caretX) + 'px';
-            tooltipElem.value.style.left = 'unset';
-            tooltipElem.value.classList.add('graphs-tooltip-caret-right');
-          } else {
-            tooltipElem.value.style.right = 'unset';
-            tooltipElem.value.style.left = tooltipModel.caretX + 'px';
-            tooltipElem.value.classList.add('graphs-tooltip-caret-left');
-          }
-
-          tooltipElem.value.style.top = 0 + 'px';
-          tooltipElem.value.style.height = '100%';
-        },
-        callbacks: {
+        callbacks: { // passed as title,body to the tooltip renderer
           title: (tooltipItem) => period.tooltipFormat === 'long' ? prettyLongDate(tooltipItem[0].raw.x) : prettyShortDate(tooltipItem[0].raw.x),
           label: (tooltipItem) => {
             const datasetLabel = tooltipItem.chart.data.datasets[tooltipItem.datasetIndex].label;
-            return `<span style="font-family: fixed">${yscale.ticks.callback(tooltipItem.raw.y)}</span>: ${datasetLabel}`;
+            return `${datasetLabel}: <span>${yscale.ticks.callback(tooltipItem.raw.y)}</span>`;
           }
-        }
+        },
+        external: renderTooltip,
       },
       annotation: {
         annotations: {
@@ -116,7 +119,7 @@ function createGraphOptions({ yscale, period, highMark }) {
             borderWidth: 0.5,
             label: {
               display: true,
-              content: props.highMarkLabel,
+              content: `Max ${props.title}`,
               position: 'end', // 'start', 'center', or 'end'
               backgroundColor: 'transparent',
               color: 'rgb(139, 0, 0)',
@@ -341,6 +344,7 @@ defineExpose({
 }
 
 .footer {
+  margin-top: 10px;
   text-align: center;
   font-weight: bold;
   font-size: 12px;
@@ -365,13 +369,8 @@ defineExpose({
   border-right: 1px var(--pankow-color-primary) solid;
 }
 
-.graphs-tooltip-title {
-  font-weight: bold;
-}
-
 .graphs-tooltip-item {
   padding: 2px 0px;
-  -webkit-text-stroke: 0.2px gray;
 }
 
 </style>