From 9c8090c389e4716ed546f2d7a8b77538b4281eb3 Mon Sep 17 00:00:00 2001
From: Nick Koester <nick.koester5@gmail.com>
Date: Fri, 2 Feb 2024 00:46:00 -0500
Subject: [PATCH] Use loadout names for graph labels

---
 src/app/components/results/LoadoutComparison.tsx | 6 +++---
 src/app/components/results/TtkComparison.tsx     | 9 +++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/app/components/results/LoadoutComparison.tsx b/src/app/components/results/LoadoutComparison.tsx
index 6108c1c6..a383806c 100644
--- a/src/app/components/results/LoadoutComparison.tsx
+++ b/src/app/components/results/LoadoutComparison.tsx
@@ -314,9 +314,9 @@ const LoadoutComparison: React.FC = observer(() => {
     const lines: { name: number, [lKey: string]: string | number }[] = [];
     for (const input of inputRange(x, loadouts, monster)) {
       const entry: typeof lines[0] = { name: input.xValue };
-      for (const [i, l] of input.loadouts.entries()) {
+      for (const [, l] of input.loadouts.entries()) {
         const v = getOutput(y, l, input.monster);
-        entry[`Loadout ${i + 1}`] = v.toFixed(2);
+        entry[l.name] = v.toFixed(2);
         maximum = Math.max(maximum, v);
         min = Math.min(min, v);
       }
@@ -348,7 +348,7 @@ const LoadoutComparison: React.FC = observer(() => {
       lines.push(<Line
         key={i}
         type="monotone"
-        dataKey={`Loadout ${i + 1}`}
+        dataKey={loadouts[i].name}
         stroke={colour}
         dot={false}
         isAnimationActive={false}
diff --git a/src/app/components/results/TtkComparison.tsx b/src/app/components/results/TtkComparison.tsx
index 7c78491d..ca1d861b 100644
--- a/src/app/components/results/TtkComparison.tsx
+++ b/src/app/components/results/TtkComparison.tsx
@@ -77,6 +77,7 @@ const TtkComparison: React.FC = observer(() => {
   const store = useStore();
   const { showTtkComparison } = store.prefs;
   const calcResults = toJS(store.calc.loadouts);
+  const loadouts = toJS(store.loadouts);
 
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme === 'dark';
@@ -103,12 +104,12 @@ const TtkComparison: React.FC = observer(() => {
         if (v) {
           runningTotals[i] = (runningTotals[i] || 0) + v;
         }
-        entry[`Loadout ${i + 1}`] = (runningTotals[i] * 100).toFixed(2);
+        entry[loadouts[i].name] = (runningTotals[i] * 100).toFixed(2);
       });
       lines.push(entry);
     }
     return lines;
-  }, [xAxisType, calcResults]);
+  }, [xAxisType, calcResults, loadouts]);
 
   const generateLines = useCallback(() => {
     const lines: React.ReactNode[] = [];
@@ -118,11 +119,11 @@ const TtkComparison: React.FC = observer(() => {
       : ['blue', 'chocolate', 'green', 'sienna', 'purple'];
     for (let i = 0; i < calcResults.length; i++) {
       const colour = strokeColours.shift() || 'red';
-      lines.push(<Line key={i} isAnimationActive={false} type="monotone" dataKey={`Loadout ${i + 1}`} stroke={colour} dot={false} connectNulls />);
+      lines.push(<Line key={i} isAnimationActive={false} type="monotone" dataKey={loadouts[i].name} stroke={colour} dot={false} connectNulls />);
       strokeColours.push(colour);
     }
     return lines;
-  }, [isDark, calcResults.length]);
+  }, [isDark, calcResults.length, loadouts]);
 
   return (
     <SectionAccordion