Sort the graph tooltip items according to the value at the given point in time

dashboard/src/components/GraphItem.vue

@@ -40,14 +40,22 @@ function renderTooltip(context) {
     return;
   }
 
-  const { title, body, labelColors } = tooltip; // these were computed in the "callback" in tooltip configuration
+  // datapoints are in sync with the indexing of body
+  const { title, body, labelColors, dataPoints } = 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) {
+    // first amend the value so we know the dataPoints index, then sort and render
+    bodyLines.forEach((body, i) => {
+      body.value = dataPoints[i].parsed?.y || 0;
+    });
+    bodyLines.sort((a, b) => {
+      return b.value - a.value;
+    });
+    bodyLines.forEach((body, i) => {
       const colors = labelColors[i];
       innerHtml += `<div style="color: ${colors.borderColor}" class="graphs-tooltip-item">${body}</div>`;
     });