[CX] Allow option to rotate axis labels on interactive graphs (#2284)

## Summary:
This PR is part of the Interactive Graph Project. 

The purpose of this PR is to add a new option that will allow Content Creators to change the location of the axis labels between "onAxis" and "alongEdge". 

Note: While working on this ticket, a long-standing bug was found where the axis labels will continue to stretch further away from their desired locations on largely positive or negative graphs. This will require clamping the min/max values for our calculations. However, adding that logic was making this ticket seem quite complicated so I have opted to create a separate ticket for handling this. See https://khanacademy.atlassian.net/browse/LEMS-2912 for more details.

## Screenshots:
### onAxis (Default) 
![Screenshot 2025-03-12 at 10 52 46 AM](https://github.com/user-attachments/assets/c8b65da1-c34e-424a-b802-dcf550afad58)

### alongEdge 
![Screenshot 2025-03-12 at 10 52 29 AM](https://github.com/user-attachments/assets/920e7f68-f90c-4be6-b82e-d592c451acfa)

Issue: https://khanacademy.atlassian.net/browse/LEMS-2718

## Test plan:
- New tests 
- Tests Pass 
- Manual Testing

Author: nishasy

Reviewers: SonicScrewdriver

Required Reviewers:

Approved By: SonicScrewdriver

Checks: ✅ 8 checks were successful

Pull Request URL: #2284

Author: nishasy

.changeset/beige-stingrays-cry.md

@@ -0,0 +1,7 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-core": minor
+"@khanacademy/perseus-editor": minor
+---
+
+Add new labelLocation value for Interactive Graphs

packages/perseus-core/src/data-schema.ts

@@ -431,6 +431,7 @@ export type PerseusImageBackground = {
  * - none: shows no markings
  */
 export type MarkingsType = "axes" | "graph" | "grid" | "none";
+export type AxisLabelLocation = "onAxis" | "alongEdge";
 
 export type PerseusCategorizerWidgetOptions = {
     // Translatable text; a list of items to categorize. e.g. ["banana", "yellow", "apple", "purple", "shirt"]
@@ -734,6 +735,13 @@ export type PerseusInteractiveGraphWidgetOptions = {
     markings: MarkingsType;
     // How to label the X and Y axis.  default: ["x", "y"]
     labels?: ReadonlyArray<string>;
+    /**
+     * Specifies the location of the labels on the graph.  default: "onAxis".
+     * - "onAxis": Labels are positioned on the axis at the right (x) and top (y) of the graph.
+     * - "alongEdge": Labels are centered along the bottom (x) and left (y) edges of the graph.
+     *    The y label is rotated. Typically used when the range min is near 0 with longer labels.
+     */
+    labelLocation?: AxisLabelLocation;
     // Whether to show the Protractor tool overlayed on top of the graph
     showProtractor: boolean;
     /**

packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx

@@ -20,6 +20,7 @@ import Heading from "../../../components/heading";
 import LabeledRow from "../locked-figures/labeled-row";
 
 import type {
+    AxisLabelLocation,
     MarkingsType,
     PerseusImageBackground,
 } from "@khanacademy/perseus-core";
@@ -49,6 +50,13 @@ type Props = {
      * The labels for the x and y axes.
      */
     labels: ReadonlyArray<string>;
+    /**
+     * Specifies the location of the labels on the graph.  default: "onAxis".
+     * - "onAxis": Labels are positioned on the axis at the right (x) and top (y) of the graph.
+     * - "alongEdge": Labels are centered along the bottom (x) and left (y) edges of the graph.
+     *    The y label is rotated. Typically used when the range min is near 0 with longer labels.
+     */
+    labelLocation: AxisLabelLocation;
     /**
      * The range of the graph.
      */
@@ -99,6 +107,7 @@ type Props = {
 type State = {
     isExpanded: boolean;
     labelsTextbox: ReadonlyArray<string>;
+    labelLocation: AxisLabelLocation;
     gridStepTextbox: [x: number, y: number];
     snapStepTextbox: [x: number, y: number];
     stepTextbox: [x: number, y: number];
@@ -116,6 +125,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
     static stateFromProps(props: Props) {
         return {
             labelsTextbox: props.labels,
+            labelLocation: props.labelLocation,
             gridStepTextbox: props.gridStep,
             snapStepTextbox: props.snapStep,
             stepTextbox: props.step,
@@ -140,6 +150,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
             interactiveSizes.defaultBoxSizeSmall,
         ],
         labels: ["$x$", "$y$"],
+        labelLocation: "onAxis",
         range: [
             [-10, 10],
             [-10, 10],
@@ -165,6 +176,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
     UNSAFE_componentWillReceiveProps(nextProps) {
         if (
             !_.isEqual(this.props.labels, nextProps.labels) ||
+            !_.isEqual(this.props.labelLocation, nextProps.labelLocation) ||
             !_.isEqual(this.props.gridStep, nextProps.gridStep) ||
             !_.isEqual(this.props.snapStep, nextProps.snapStep) ||
             !_.isEqual(this.props.step, nextProps.step) ||
@@ -399,6 +411,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
 
     changeGraph = () => {
         const labels = this.state.labelsTextbox;
+        const labelLocation = this.state.labelLocation;
         const range = _.map(this.state.rangeTextbox, function (range) {
             return _.map(range, Number);
         });
@@ -425,6 +438,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
             this.change({
                 valid: true,
                 labels: labels,
+                labelLocation: labelLocation,
                 range: range,
                 step: step,
                 gridStep: gridStep,
@@ -452,6 +466,26 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
                 {this.state.isExpanded && (
                     <View>
                         <div className="graph-settings">
+                            <div className="perseus-widget-row">
+                                <LabeledRow label="Label Location">
+                                    <ButtonGroup
+                                        value={this.props.labelLocation}
+                                        allowEmpty={false}
+                                        buttons={[
+                                            {
+                                                value: "onAxis",
+                                                content: "On Axis",
+                                            },
+                                            {
+                                                value: "alongEdge",
+                                                content: "Along Graph Edge",
+                                            },
+                                        ]}
+                                        onChange={this.change("labelLocation")}
+                                    />
+                                </LabeledRow>
+                            </div>
+
                             <div className="perseus-widget-row">
                                 <div className="perseus-widget-left-col">
                                     <LabeledRow label="x Label">

packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx

@@ -14,6 +14,7 @@ import {
     type PerseusGraphType,
     type MarkingsType,
     type InteractiveGraphDefaultWidgetOptions,
+    type AxisLabelLocation,
     interactiveGraphLogic,
 } from "@khanacademy/perseus-core";
 import {Id, View} from "@khanacademy/wonder-blocks-core";
@@ -70,6 +71,13 @@ export type Props = {
      * The labels for the x and y axes.
      */
     labels: ReadonlyArray<string>;
+    /**
+     * Specifies the location of the labels on the graph.  default: "onAxis".
+     * - "onAxis": Labels are positioned on the axis at the right (x) and top (y) of the graph.
+     * - "alongEdge": Labels are centered along the bottom (x) and left (y) edges of the graph.
+     *    The y label is rotated. Typically used when the range min is near 0 with longer labels.
+     */
+    labelLocation?: AxisLabelLocation;
     /**
      * The range of the graph in the x and y directions.
      */
@@ -194,6 +202,7 @@ class InteractiveGraphEditor extends React.Component<Props> {
             "backgroundImage",
             "markings",
             "labels",
+            "labelLocation",
             "showProtractor",
             "showTooltips",
             "range",
@@ -291,6 +300,7 @@ class InteractiveGraphEditor extends React.Component<Props> {
                 box: this.props.box,
                 range: this.props.range,
                 labels: this.props.labels,
+                labelLocation: this.props.labelLocation,
                 step: this.props.step,
                 gridStep: gridStep,
                 snapStep: snapStep,
@@ -741,6 +751,7 @@ class InteractiveGraphEditor extends React.Component<Props> {
                             box={getInteractiveBoxFromSizeClass(sizeClass)}
                             range={this.props.range}
                             labels={this.props.labels}
+                            labelLocation={this.props.labelLocation}
                             step={this.props.step}
                             gridStep={gridStep}
                             snapStep={snapStep}

packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap

@@ -37,7 +37,7 @@ exports[`Interactive Graph A none-type graph renders predictably: first render 1
                 </span>
                 <span
                   aria-label="Y-axis"
-                  style="position: absolute; left: 200px; top: -24px; font-size: 14px; transform: translate(-50%, 0px);"
+                  style="position: absolute; left: 200px; top: -28px; font-size: 14px; transform: translate(-50%, 0px);"
                 >
                   <span
                     class="mock-TeX"

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

@@ -0,0 +1,96 @@
+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]
+            [-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 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);
+    });
+
+    it("should return the correct position for labels set to alongEdge with min ranges at 0", () => {
+        // Should result in same position as the wholly positive range test
+        const graphInfo: GraphDimensions = {
+            range: [
+                [0, 10],
+                [0, 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);
+    });
+});