[Interactive Graph] New Axes type for graph markings.

.changeset/real-trains-shop.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+Adding new interactive graph marking type, axes

packages/perseus-editor/src/components/__stories__/graph-settings.argtypes.ts

@@ -51,7 +51,7 @@ export default {
         },
         table: {
             type: {
-                summary: '"graph" | "grid" | "none"',
+                summary: '"axes" | "graph" | "grid" | "none"',
             },
         },
         type: {

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

@@ -15,7 +15,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
-import type {Coords} from "@khanacademy/perseus";
+import type {Coords, MarkingsType} from "@khanacademy/perseus";
 
 const {ButtonGroup, InfoTip, RangeInput} = components;
 
@@ -40,7 +40,7 @@ type Props = {
     snapStep: [number, number];
     valid: boolean;
     backgroundImage: any;
-    markings: "graph" | "grid" | "none";
+    markings: MarkingsType;
     showProtractor?: boolean;
     showRuler?: boolean;
     showTooltips?: boolean;

packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx

@@ -21,7 +21,7 @@ import ParametricEditor from "./parametric-editor";
 import PointEditor from "./point-editor";
 import RectangleEditor from "./rectangle-editor";
 
-import type {Coords} from "@khanacademy/perseus";
+import type {Coords, MarkingsType} from "@khanacademy/perseus";
 
 const {getDependencies} = Dependencies;
 const {unescapeMathMode} = Util;
@@ -32,7 +32,7 @@ type Graph = {
     range: Coords;
     tickStep: [number, number];
     gridStep: [number, number];
-    markings: "graph" | "grid" | "none";
+    markings: MarkingsType;
     valid?: boolean;
 };
 

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

@@ -19,7 +19,7 @@ import _ from "underscore";
 import Heading from "../../../components/heading";
 import LabeledRow from "../locked-figures/labeled-row";
 
-import type {PerseusImageBackground} from "@khanacademy/perseus";
+import type {MarkingsType, PerseusImageBackground} from "@khanacademy/perseus";
 
 type ChangeFn = typeof Changeable.change;
 
@@ -75,11 +75,12 @@ type Props = {
 
     /**
      * The type of markings to display on the graph.
+     * - axes: shows the axes without the gride lines
      * - graph: shows the axes and the grid lines
      * - grid: shows only the grid lines
      * - none: shows no markings
      */
-    markings: "graph" | "grid" | "none";
+    markings: MarkingsType;
     /**
      * Whether to show the protractor on the graph.
      */
@@ -539,6 +540,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
                                         value={this.props.markings}
                                         allowEmpty={false}
                                         buttons={[
+                                            {value: "axes", content: "Axes"},
                                             {value: "graph", content: "Graph"},
                                             {value: "grid", content: "Grid"},
                                             {value: "none", content: "None"},

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

@@ -37,6 +37,7 @@ import type {
     PerseusImageBackground,
     PerseusInteractiveGraphWidgetOptions,
     PerseusGraphType,
+    MarkingsType,
 } from "@khanacademy/perseus";
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
@@ -107,7 +108,7 @@ export type Props = {
      * - grid: shows only the grid lines
      * - none: shows no markings
      */
-    markings: "graph" | "grid" | "none";
+    markings: MarkingsType;
     /**
      * Whether to show the protractor on the graph.
      */

packages/perseus/src/index.ts

@@ -222,6 +222,7 @@ export type {
     Size,
     CollinearTuple,
     MathFormat,
+    MarkingsType,
     InputNumberWidget, // TODO(jeremy): remove?
     PerseusArticle,
     // Widget configuration types

packages/perseus/src/perseus-types.ts

@@ -397,6 +397,8 @@ export type PerseusImageBackground = {
     bottom?: number;
 };
 
+export type MarkingsType = "axes" | "graph" | "grid" | "none";
+
 export type PerseusCategorizerWidgetOptions = {
     // Translatable text; a list of items to categorize. e.g. ["banana", "yellow", "apple", "purple", "shirt"]
     items: ReadonlyArray<string>;
@@ -619,7 +621,7 @@ export type PerseusGrapherWidgetOptions = {
         >;
         gridStep?: [number, number];
         labels: [string, string];
-        markings: "graph" | "none" | "grid";
+        markings: MarkingsType;
         range: GraphRange;
         rulerLabel: "";
         rulerTicks: number;
@@ -684,11 +686,12 @@ export type PerseusInteractiveGraphWidgetOptions = {
     backgroundImage?: PerseusImageBackground;
     /**
      * The type of markings to display on the graph.
+     * - axes: shows the axes without the gride lines
      * - graph: shows the axes and the grid lines
      * - grid: shows only the grid lines
      * - none: shows no markings
      */
-    markings: "graph" | "grid" | "none";
+    markings: MarkingsType;
     // How to label the X and Y axis.  default: ["x", "y"]
     labels?: ReadonlyArray<string>;
     // Whether to show the Protractor tool overlayed on top of the graph
@@ -1384,11 +1387,12 @@ export type PerseusInteractionGraph = {
     gridStep: [number, number];
     /**
      * The type of markings to display on the graph.
+     * - axes: shows the axes without the gride lines
      * - graph: shows the axes and the grid lines
      * - grid: shows only the grid lines
      * - none: shows no markings
      */
-    markings: "graph" | "grid" | "none";
+    markings: MarkingsType;
     // The snap steps. default [0.5, 0.5]
     snapStep?: [number, number];
     // Whether the grid is valid or not.  Do the numbers all make sense?

packages/perseus/src/widgets/grapher/grapher.tsx

@@ -33,7 +33,10 @@ import {
 
 import type {Coord, Line} from "../../interactive2/types";
 import type {ChangeableProps} from "../../mixins/changeable";
-import type {PerseusGrapherWidgetOptions} from "../../perseus-types";
+import type {
+    MarkingsType,
+    PerseusGrapherWidgetOptions,
+} from "../../perseus-types";
 import type {Widget, WidgetExports, WidgetProps} from "../../types";
 import type {GridDimensions} from "../../util";
 import type {
@@ -356,7 +359,7 @@ type Props = ExternalProps & {
     plot: NonNullable<RenderProps["plot"]>;
     // NOTE(jeremy): This prop exists in the `graph` prop value. Unsure what
     // passes it down as a top-level prop (I suspect the editor?)
-    markings: "graph" | "grid" | "none";
+    markings: MarkingsType;
 };
 
 type DefaultProps = {

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

@@ -47,6 +47,7 @@ import type {
     GraphRange,
     LockedFigure,
     PerseusImageBackground,
+    MarkingsType,
 } from "../perseus-types";
 import type {ChangeHandler, WidgetExports, WidgetProps} from "../types";
 import type {
@@ -148,11 +149,12 @@ type RenderProps = {
     backgroundImage?: PerseusImageBackground;
     /**
      * The type of markings to display on the graph.
+     * - axes: shows the axes without the gride lines
      * - graph: shows the axes and the grid lines
      * - grid: shows only the grid lines
      * - none: shows no markings
      */
-    markings: "graph" | "grid" | "none";
+    markings: MarkingsType;
     /**
      * How to label the X and Y axis.  default: ["x", "y"]
      */

packages/perseus/src/widgets/interactive-graphs/backgrounds/grid.tsx

@@ -3,15 +3,15 @@ import * as React from "react";
 
 import {X, Y} from "../math";
 
-import type {GraphRange} from "../../../perseus-types";
+import type {GraphRange, MarkingsType} from "../../../perseus-types";
 import type {SizeClass} from "../../../util/sizing-utils";
 import type {vec} from "mafs";
 
 interface GridProps {
     gridStep: vec.Vector2;
     range: GraphRange;
     containerSizeClass: SizeClass;
-    markings: "graph" | "grid" | "none";
+    markings: MarkingsType;
     width: number;
     height: number;
 }
@@ -30,9 +30,11 @@ const axisOptions = (
     props: Omit<GridProps, "containerSizeClass">,
     axisIndex: number,
 ) => {
+    const lines: number | false =
+        props.markings === "axes" ? false : props.gridStep[axisIndex];
     return {
-        axis: props.markings === "graph",
-        lines: props.gridStep[axisIndex],
+        axis: props.markings === "graph" || props.markings === "axes",
+        lines: lines,
         labels: false as const,
     };
 };

packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts

@@ -14,6 +14,7 @@ import type {
     LockedPointType,
     LockedPolygonType,
     LockedVectorType,
+    MarkingsType,
     PerseusGraphType,
     PerseusRenderer,
 } from "../../perseus-types";
@@ -54,7 +55,7 @@ class InteractiveGraphQuestionBuilder {
     };
     private gridStep: vec.Vector2 = [1, 1];
     private labels: [string, string] = ["$x$", "$y$"];
-    private markings: "graph" | "grid" | "none" = "graph";
+    private markings: MarkingsType = "graph";
     private xRange: Interval = [-10, 10];
     private yRange: Interval = [-10, 10];
     private snapStep: vec.Vector2 = [0.5, 0.5];
@@ -152,9 +153,7 @@ class InteractiveGraphQuestionBuilder {
         return this;
     }
 
-    withMarkings(
-        markings: "graph" | "grid" | "none",
-    ): InteractiveGraphQuestionBuilder {
+    withMarkings(markings: MarkingsType): InteractiveGraphQuestionBuilder {
         this.markings = markings;
         return this;
     }

packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx

@@ -216,7 +216,8 @@ export const MafsGraph = (props: MafsGraphProps) => {
                             left: 0,
                         }}
                     >
-                        {props.markings === "graph" && (
+                        {(props.markings === "graph" ||
+                            props.markings === "axes") && (
                             <>
                                 <AxisLabels />
                             </>
@@ -251,7 +252,8 @@ export const MafsGraph = (props: MafsGraphProps) => {
                             {/* Axis Ticks, Labels, and Arrows */}
                             {
                                 // Only render the axis ticks and arrows if the markings are set to a full "graph"
-                                props.markings === "graph" && (
+                                (props.markings === "graph" ||
+                                    props.markings === "axes") && (
                                     <>
                                         <AxisTicks />
                                         <AxisArrows />

packages/perseus/src/widgets/interactive-graphs/reducer/use-graph-config.ts

@@ -1,13 +1,14 @@
 import React, {createContext} from "react";
 
+import type {MarkingsType} from "../../../perseus-types";
 import type {Interval, vec} from "mafs";
 
 export type GraphConfig = {
     range: [Interval, Interval];
     tickStep: vec.Vector2;
     gridStep: vec.Vector2;
     snapStep: vec.Vector2;
-    markings: "graph" | "grid" | "none";
+    markings: MarkingsType;
     showTooltips: boolean;
     graphDimensionsInPixels: vec.Vector2;
     width: number; // in graph units