@khanacademy/perseus 57.0.1 → 57.1.0

package/dist/index.js

@@ -25414,7 +25414,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     }, nextQuestion));
   }
 }
-const fontSize$1 = 17;
+const fontSize = 17;
 const styles$j = {
   answerBar: {
     display: "flex",
@@ -25439,7 +25439,7 @@ const styles$j = {
     flexDirection: "row",
     alignItems: "center",
     fontWeight: "bold",
-    fontSize: fontSize$1
+    fontSize: fontSize
   }
 };
 
@@ -28126,7 +28126,6 @@ const defaultGraphConfig = {
   width: 0,
   height: 0,
   labels: [],
-  labelLocation: "onAxis",
   disableKeyboardInteraction: false,
   interactiveColor: "var(--mafs-blue)"
 };
@@ -28350,8 +28349,6 @@ function escapeIfUnescaped(character) {
   }
 }
 
-// Exported for testing purposes
-const fontSize = 14;
 function AxisLabels(_ref) {
   let {
     i18n
@@ -28360,26 +28357,24 @@ function AxisLabels(_ref) {
     range,
     labels,
     width,
-    height,
-    labelLocation
+    height
   } = 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
   };
-
-  // Get the position of the main axis labels
-  const [xAxisLabelLocation, yAxisLabelLocation] = getLabelPosition(graphInfo, labelLocation);
-  const [xAxisLabelText, yAxisLabelText] = labels;
-
-  // If the labels are rotated, we need to center the
-  // x-axis label along the bottom of the graph.
-  const xLabelTransform = labelLocation === "onAxis" ? "translate(7px, -50%)" : "translate(-50%, -50%)";
-  const yLabelTransform = labelLocation === "onAxis" ? "translate(-50%, 0px)" : "translate(-50%, 0px) rotate(-90deg)";
+  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]);
   const {
     TeX
   } = getDependencies();
@@ -28387,53 +28382,22 @@ function AxisLabels(_ref) {
     "aria-label": strings.xAxis,
     style: {
       position: "absolute",
-      left: xAxisLabelLocation[X],
-      top: xAxisLabelLocation[Y],
-      fontSize: fontSize + "px",
-      transform: xLabelTransform
+      left: x1,
+      top: y1,
+      fontSize: "14px",
+      transform: "translate(7px, -50%)"
     }
   }, /*#__PURE__*/React__default["default"].createElement(TeX, null, replaceOutsideTeX(xAxisLabelText))), /*#__PURE__*/React__default["default"].createElement("span", {
     "aria-label": strings.yAxis,
     style: {
       position: "absolute",
-      left: yAxisLabelLocation[X],
-      top: yAxisLabelLocation[Y],
-      fontSize: fontSize + "px",
-      transform: yLabelTransform
+      left: x2,
+      top: y2,
+      fontSize: "14px",
+      transform: "translate(-50%, 0px)"
     }
   }, /*#__PURE__*/React__default["default"].createElement(TeX, null, replaceOutsideTeX(yAxisLabelText))));
 }
-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;
@@ -34783,7 +34747,6 @@ const MafsGraph = props => {
     state,
     dispatch,
     labels,
-    labelLocation,
     readOnly,
     fullGraphAriaLabel,
     fullGraphAriaDescription
@@ -34864,7 +34827,6 @@ 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.
@@ -41992,7 +41954,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.0.1";
+const libVersion = "57.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {