From 8ab301408f94e1dbd7fd73ed261ee2b34274ceb8 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 15 Mar 2021 19:45:39 -0700
Subject: [PATCH] Sort and index multi-series data correctly in line chart

 - Sorting must be done on copies to preserve orders.
 - Indices should be reversed since rendering is also reversed (the back
   layer (the tallest) is rendered first to create the stacking effect).
---
 ui/app/components/chart-primitives/tooltip.hbs | 2 +-
 ui/app/components/line-chart.js                | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/app/components/chart-primitives/tooltip.hbs b/ui/app/components/chart-primitives/tooltip.hbs
index e1718c27d..54361b9d8 100644
--- a/ui/app/components/chart-primitives/tooltip.hbs
+++ b/ui/app/components/chart-primitives/tooltip.hbs
@@ -1,7 +1,7 @@
 <div data-test-chart-tooltip class="chart-tooltip {{if @active "active" "inactive"}}" style={{@style}} ...attributes>
   <ol>
     {{#each @data as |props|}}
-      {{yield props.series  props.datum (inc props.index)}}
+      {{yield props.series props.datum (inc props.index)}}
     {{/each}}
   </ol>
 </div>
diff --git a/ui/app/components/line-chart.js b/ui/app/components/line-chart.js
index 995df3f81..3dbb38afc 100644
--- a/ui/app/components/line-chart.js
+++ b/ui/app/components/line-chart.js
@@ -297,14 +297,14 @@ export default class LineChart extends Component {
           formattedY: this.yFormat()(datum[yProp]),
           datum,
         },
-        index: seriesIndex,
+        index: data.length - seriesIndex - 1,
       };
     });
 
     // Of the selected data, determine which is closest
-    const closestDatum = activeData.sort(
-      (a, b) => Math.abs(a.datum.datum[xProp] - x) - Math.abs(b.datum.datum[xProp] - x)
-    )[0];
+    const closestDatum = activeData
+      .slice()
+      .sort((a, b) => Math.abs(a.datum.datum[xProp] - x) - Math.abs(b.datum.datum[xProp] - x))[0];
 
     // If any other selected data are beyond a distance threshold, drop them from the list
     // xScale is used here to measure distance in screen-space rather than data-space.