Swap axis order when showing ranks

src/ui/views/PlayerGraphs/ScatterPlot.tsx

@@ -21,6 +21,7 @@ type ScatterPlotProps<Row> = {
 	getLink: (row: Row) => string;
 	getTooltipTitle: (row: Row) => string;
 	renderTooltip: (value: number, row: Row, i: number) => ReactNode;
+	reverseAxis: [boolean, boolean];
 	stat: [string, string];
 	statType: [string, string];
 };
@@ -90,6 +91,7 @@ const ScatterPlot = <Row extends unknown>({
 	getLink,
 	getTooltipTitle,
 	renderTooltip,
+	reverseAxis,
 	width: totalWidth,
 }: ScatterPlotProps<Row> & {
 	width: number;
@@ -100,8 +102,14 @@ const ScatterPlot = <Row extends unknown>({
 	const yVals = data.map(point => point.y);
 
 	const xDomain = [Math.min(...xVals), Math.max(...xVals)];
+	if (reverseAxis[0]) {
+		xDomain.reverse();
+	}
 
 	const yDomain = [Math.min(...yVals), Math.max(...yVals)];
+	if (reverseAxis[1]) {
+		yDomain.reverse();
+	}
 
 	// tooltip handler
 	const {

src/ui/views/PlayerGraphs/index.tsx

@@ -125,6 +125,7 @@ const GraphCreation = ({
 					</div>
 				);
 			}}
+			reverseAxis={[false, false]}
 			stat={stat}
 			statType={statType}
 		/>

src/ui/views/TeamGraphs/index.tsx

@@ -235,6 +235,10 @@ const GraphCreation = <Team extends ViewProps["teamsX"][number]>({
 	const titleY = getStatsWithLabels([stat[1]], statType[1], true)[0];
 	const descShort: [string, string] = [titleX.title, titleY.title];
 
+	const reverseAxis = stat.map(
+		(stat, i) => statType[i] === "powerRankings" && stat.startsWith("rank"),
+	) as [boolean, boolean];
+
 	return (
 		<StatGraph<Team>
 			data={data}
@@ -257,6 +261,7 @@ const GraphCreation = <Team extends ViewProps["teamsX"][number]>({
 					</div>
 				);
 			}}
+			reverseAxis={reverseAxis}
 			stat={stat}
 			statType={statType}
 		/>