[rotated-axis-labels] New tests and comments

Author: SonicScrewdriver

packages/perseus/src/widgets/interactive-graphs/backgrounds/axis-labels.test.ts

@@ -0,0 +1,77 @@
+import {getLabelPosition, fontSize} from "./axis-labels";
+
+import type {GraphDimensions} from "../types";
+
+describe("getLabelPosition", () => {
+    it("should return the correct position for the default graph", () => {
+        const graphInfo: GraphDimensions = {
+            range: [
+                [-10, 10],
+                [-10, 10],
+            ],
+            width: 400,
+            height: 400,
+        };
+        const labelLocation = "onAxis";
+        const expected = [
+            [400, 200], // X Label at [Right edge of the graph, vertical center of the graph]
+            [200, -2 * fontSize], // Y Label at [Horizontal center of the graph, 2x fontSize above the top edge]
+        ];
+
+        expect(getLabelPosition(graphInfo, labelLocation)).toEqual(expected);
+    });
+
+    it("should return the correct position for labels set to alongEdge", () => {
+        const graphInfo: GraphDimensions = {
+            range: [
+                [-10, 10],
+                [-10, 10],
+            ],
+            width: 400,
+            height: 400,
+        };
+        const labelLocation = "alongEdge";
+        const expected = [
+            [200, 400 + fontSize], // X Label at [Horizontal center of the graph, 1x fontSize below the bottom edge]
+            [-fontSize, 200 - fontSize], // Y label at [1x fontSize to the left of the left edge, vertical center of the graph]
+        ];
+
+        expect(getLabelPosition(graphInfo, labelLocation)).toEqual(expected);
+    });
+
+    it("should return the correct position for labels set to alongEdge with wholly negative ranges", () => {
+        const graphInfo: GraphDimensions = {
+            range: [
+                [-10, -5],
+                [-10, -5],
+            ],
+            width: 400,
+            height: 400,
+        };
+        const labelLocation = "alongEdge";
+        const expected = [
+            [200, 400 + fontSize], // X Label at [Horizontal center of the graph, 1x fontSize below the bottom edge]
+            [-14, 200 - fontSize], // Y label at [1x fontSize to the left of the left edge, vertical center of the graph]
+        ];
+
+        expect(getLabelPosition(graphInfo, labelLocation)).toEqual(expected);
+    });
+
+    it("should return the correct position for labels set to alongEdge with wholly positive ranges", () => {
+        const graphInfo: GraphDimensions = {
+            range: [
+                [5, 10],
+                [5, 10],
+            ],
+            width: 400,
+            height: 400,
+        };
+        const labelLocation = "alongEdge";
+        const expected = [
+            [200, 400 + 3 * fontSize], // X Label at [Horizontal center of the graph, 3x fontSize below the bottom edge]
+            [-3 * fontSize, 200 - fontSize], // Y label at [3x fontSize to the left of the left edge, vertical center of the graph]
+        ];
+
+        expect(getLabelPosition(graphInfo, labelLocation)).toEqual(expected);
+    });
+});

packages/perseus/src/widgets/interactive-graphs/backgrounds/axis-labels.tsx

@@ -10,18 +10,23 @@ import {replaceOutsideTeX} from "../utils";
 import type {I18nContextType} from "../../../components/i18n-context";
 import type {GraphConfig} from "../reducer/use-graph-config";
 import type {GraphDimensions} from "../types";
-import type {Interval} from "mafs";
 
-const fontSize = 14;
+// Exported for testing purposes
+export const fontSize = 14;
+
 export default function AxisLabels({i18n}: {i18n: I18nContextType}) {
     const {range, labels, width, height, labelLocation} = useGraphConfig();
     const {strings} = i18n;
 
-    // Get the position of the main axis labels
-    const [xAxisLabelLocation, yAxisLabelLocation] = getLabelPosition(
+    const graphInfo: GraphDimensions = {
         range,
         width,
         height,
+    };
+
+    // Get the position of the main axis labels
+    const [xAxisLabelLocation, yAxisLabelLocation] = getLabelPosition(
+        graphInfo,
         labelLocation,
     );
 
@@ -72,24 +77,16 @@ export default function AxisLabels({i18n}: {i18n: I18nContextType}) {
 }
 
 export const getLabelPosition = (
-    range: [Interval, Interval],
-    width: number,
-    height: number,
+    graphInfo: GraphDimensions,
     labelLocation: GraphConfig["labelLocation"],
 ): vec.Vector2[] => {
-    // If the labels are rotated, we need to calculate the position
-    // of the labels based on the graph's dimensions and range.
-    const graphInfo: GraphDimensions = {
-        range,
-        width,
-        height,
-    };
-
     switch (labelLocation) {
+        // If the labels are placed on the axes (default), we need to place them at the
+        // end of the axis, which is the maximum value of the axis.
         case "onAxis": {
-            const xLabelInitial: vec.Vector2 = [range[X][MAX], 0];
-            const yLabelInitial: vec.Vector2 = [0, range[Y][MAX]];
-            const yLabelOffset: vec.Vector2 = [0, -fontSize * 2];
+            const xLabelInitial: vec.Vector2 = [graphInfo.range[X][MAX], 0];
+            const yLabelInitial: vec.Vector2 = [0, graphInfo.range[Y][MAX]];
+            const yLabelOffset: vec.Vector2 = [0, -fontSize * 2]; // Move the y-axis label up by 2 font sizes
 
             const xLabel = pointToPixel(xLabelInitial, graphInfo);
             const yLabel = vec.add(
@@ -98,25 +95,31 @@ export const getLabelPosition = (
             );
             return [xLabel, yLabel];
         }
+        // If the labels are placed along the edges of the graph, we need to rotate them
+        // and place them at the center of the left and bottom edges of the graph.
         case "alongEdge": {
+            // Offset the labels by a certain amount based on the range of the graph, to ensure that
+            // the labels do not overlap with the axis tick if they are out of the graph bounds.
             const xAxisLabelOffset: [number, number] =
-                range[Y][MIN] >= 0 // Move the label down by 3 font sizes if the y-axis is left of the graph
-                    ? [0, fontSize * 3]
-                    : [0, fontSize];
+                graphInfo.range[Y][MIN] >= 0
+                    ? [0, fontSize * 3] // Move the label down by 3 font sizes if the y-axis min is positive
+                    : [0, fontSize]; // Move the label down by 1 font size if the y-axis min is negative
             const yAxisLabelOffset: [number, number] =
-                range[X][MIN] >= 0 // Move the label left by 3.5 font sizes if the x-axis is below the graph
-                    ? [-fontSize * 3.5, -fontSize]
-                    : [-fontSize, -fontSize];
+                graphInfo.range[X][MIN] >= 0
+                    ? [-fontSize * 3, -fontSize] // Move the label left by 3.5 font sizes if the x-axis min is positive
+                    : [-fontSize, -fontSize]; // Move the label left by 1 font size if the x-axis min is negative
 
+            // Calculate the location of the labels to be halfway between the min and max values of the axes
             const xAxisLabelLocation: vec.Vector2 = [
-                (range[X][MIN] + range[X][MAX]) / 2,
-                range[Y][MIN],
+                (graphInfo.range[X][MIN] + graphInfo.range[X][MAX]) / 2,
+                graphInfo.range[Y][MIN],
             ];
             const yAxisLabelLocation: vec.Vector2 = [
-                range[X][MIN],
-                (range[Y][MIN] + range[Y][MAX]) / 2,
+                graphInfo.range[X][MIN],
+                (graphInfo.range[Y][MIN] + graphInfo.range[Y][MAX]) / 2,
             ];
 
+            // Convert the Vector2 coordinates to pixel coordinates and add the offsets
             const xLabel = vec.add(
                 pointToPixel(xAxisLabelLocation, graphInfo),
                 xAxisLabelOffset,
@@ -125,6 +128,7 @@ export const getLabelPosition = (
                 pointToPixel(yAxisLabelLocation, graphInfo),
                 yAxisLabelOffset,
             );
+
             return [xLabel, yLabel];
         }
         // Add more cases for other label locations as needed