@khanacademy/perseus 57.1.0 → 57.2.0

package/dist/index.js

@@ -25414,7 +25414,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     }, nextQuestion));
   }
 }
-const fontSize = 17;
+const fontSize$1 = 17;
 const styles$j = {
   answerBar: {
     display: "flex",
@@ -25439,7 +25439,7 @@ const styles$j = {
     flexDirection: "row",
     alignItems: "center",
     fontWeight: "bold",
-    fontSize: fontSize
+    fontSize: fontSize$1
   }
 };
 
@@ -28126,6 +28126,7 @@ const defaultGraphConfig = {
   width: 0,
   height: 0,
   labels: [],
+  labelLocation: "onAxis",
   disableKeyboardInteraction: false,
   interactiveColor: "var(--mafs-blue)"
 };
@@ -28349,6 +28350,8 @@ function escapeIfUnescaped(character) {
   }
 }
 
+// Exported for testing purposes
+const fontSize = 14;
 function AxisLabels(_ref) {
   let {
     i18n
@@ -28357,24 +28360,27 @@ function AxisLabels(_ref) {
     range,
     labels,
     width,
-    height
+    height,
+    labelLocation
   } = useGraphConfig();
   const {
     strings
   } = i18n;
-  const yAxisLabelLocation = [0, range[Y][MAX]];
-  const xAxisLabelLocation = [range[X][MAX], 0];
-  const [xAxisLabelText, yAxisLabelText] = labels;
   const graphInfo = {
     range,
     width,
     height
   };
-  const [x1, y1] = pointToPixel(xAxisLabelLocation, graphInfo);
-  // The default location for the y-axis-label is at the maximum y point
-  // This is just underneath the tick line for that point. The -24 moves the
-  // label up one grid square, so it sits on top of the graph
-  const [x2, y2] = mafs.vec.add(pointToPixel(yAxisLabelLocation, graphInfo), [0, -24]);
+
+  // Get the position of the main axis labels
+  const [xAxisLabelLocation, yAxisLabelLocation] = getLabelPosition(graphInfo, labelLocation);
+  const [xAxisLabelText, yAxisLabelText] = labels;
+
+  // Get the transform for the labels
+  const {
+    xLabelTransform,
+    yLabelTransform
+  } = getLabelTransform(labelLocation);
   const {
     TeX
   } = getDependencies();
@@ -28382,23 +28388,72 @@ function AxisLabels(_ref) {
     "aria-label": strings.xAxis,
     style: {
       position: "absolute",
-      left: x1,
-      top: y1,
-      fontSize: "14px",
-      transform: "translate(7px, -50%)"
+      left: xAxisLabelLocation[X],
+      top: xAxisLabelLocation[Y],
+      fontSize: fontSize + "px",
+      transform: xLabelTransform
     }
   }, /*#__PURE__*/React__default["default"].createElement(TeX, null, replaceOutsideTeX(xAxisLabelText))), /*#__PURE__*/React__default["default"].createElement("span", {
     "aria-label": strings.yAxis,
     style: {
       position: "absolute",
-      left: x2,
-      top: y2,
-      fontSize: "14px",
-      transform: "translate(-50%, 0px)"
+      left: yAxisLabelLocation[X],
+      top: yAxisLabelLocation[Y],
+      fontSize: fontSize + "px",
+      transform: yLabelTransform
     }
   }, /*#__PURE__*/React__default["default"].createElement(TeX, null, replaceOutsideTeX(yAxisLabelText))));
 }
 
+/* Get the transform for the labels based on the labelLocation
+ *  Exported for testing purposes.
+ */
+const getLabelTransform = labelLocation => {
+  // onAxis is the default label location
+  const isOnAxis = labelLocation === undefined || labelLocation === "onAxis";
+  const xLabelTransform = isOnAxis ? "translate(7px, -50%)" : "translate(-50%, -50%)";
+  const yLabelTransform = isOnAxis ? "translate(-50%, 0px)" : "translate(-50%, 0px) rotate(-90deg)";
+  return {
+    xLabelTransform,
+    yLabelTransform
+  };
+};
+
+/* Calculate the position of the main axis labels based on the labelLocation
+ * and the ranges of the graph. Exported for testing purposes.
+ */
+const getLabelPosition = (graphInfo, labelLocation) => {
+  // If the labels are placed along the edge of the graph, we need to place them at the
+  // center of the graph, which is the average of the min and max values of the axes.
+  if (labelLocation === "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 = 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 = graphInfo.range[X][MIN] >= 0 ? [-fontSize * 3, -fontSize] // Move the label left by 3 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 = [(graphInfo.range[X][MIN] + graphInfo.range[X][MAX]) / 2, graphInfo.range[Y][MIN]];
+    const yAxisLabelLocation = [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 = mafs.vec.add(pointToPixel(xAxisLabelLocation, graphInfo), xAxisLabelOffset);
+    const yLabel = mafs.vec.add(pointToPixel(yAxisLabelLocation, graphInfo), yAxisLabelOffset);
+    return [xLabel, yLabel];
+  }
+
+  // Otherwise, the labels are placed on the axes (default), and we need to
+  // place them at the end of the axis, which is the maximum value of the axis.
+  const xLabelInitial = [graphInfo.range[X][MAX], 0];
+  const yLabelInitial = [0, graphInfo.range[Y][MAX]];
+  const yLabelOffset = [0, -fontSize * 2]; // Move the y-axis label up by 2 font sizes
+
+  const xLabel = pointToPixel(xLabelInitial, graphInfo);
+  const yLabel = mafs.vec.add(pointToPixel(yLabelInitial, graphInfo), yLabelOffset);
+  return [xLabel, yLabel];
+};
+
 // The size of the ticks and labels in pixels
 const tickSize = 10;
 const tickLabelSize = 14;
@@ -34747,6 +34802,7 @@ const MafsGraph = props => {
     state,
     dispatch,
     labels,
+    labelLocation,
     readOnly,
     fullGraphAriaLabel,
     fullGraphAriaDescription
@@ -34827,6 +34883,7 @@ const MafsGraph = props => {
       width,
       height,
       labels,
+      labelLocation,
       disableKeyboardInteraction: disableInteraction,
       // If the graph is read-only or static, we want to make it
       // visually clear that the graph is no longer interactive.
@@ -41954,7 +42011,7 @@ const addLibraryVersionToPerseusDebug = (libraryName, libraryVersion) => {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "57.1.0";
+const libVersion = "57.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {