Use loadout names for graph labels

weirdgloop · Feb 2, 2024 · 9c8090c · 9c8090c
1 parent 8cbc978
commit 9c8090c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git 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
@@ -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