Class InteractiveGraph

mafsRef

StaticdefaultProps

getPromptJSON

• getPromptJSON(): UnsupportedWidgetPromptJSON | InteractiveGraphPromptJSON

  Returns UnsupportedWidgetPromptJSON | InteractiveGraphPromptJSON

getSerializedState

• getSerializedState(): {
      alignment: string
      | null
      | undefined;
      apiOptions: APIOptionsWithDefaults;
      backgroundImage?: PerseusImageBackground;
      containerSizeClass: SizeClass;
      correct?: PerseusGraphType;
      findWidgets: (criterion: FilterCriterion) => readonly Widget[];
      fullGraphAriaDescription?: string;
      fullGraphAriaLabel?: string;
      graph: PerseusGraphType;
      gridStep?: [x: number, y: number];
      handleUserInput: (
          newUserInput: PerseusGraphType,
          cb?: () => void,
          silent?: boolean,
      ) => void;
      keypadElement?: any;
      labelLocation: AxisLabelLocation;
      labels: string[];
      linterContext: LinterContextProps;
      lockedFigures: LockedFigure[];
      markings: MarkingsType;
      onBlur: (blurPath: FocusPath) => void;
      onFocus: (blurPath: FocusPath) => void;
      problemNum: number | null | undefined;
      range: GraphRange;
      reviewMode: boolean;
      rulerLabel?: string;
      rulerTicks?: number;
      showAxisArrows: ShowAxisArrows;
      showProtractor: boolean;
      showRuler?: boolean;
      showSolutions?: ShowSolutions;
      showTooltips?: boolean;
      snapStep?: [x: number, y: number];
      static: boolean | null | undefined;
      step: [number, number];
      trackInteraction: (extraData?: Empty) => void;
      widgetId: string;
      widgetIndex: number;
  }

  Returns {
      alignment: string | null | undefined;
      apiOptions: APIOptionsWithDefaults;
      backgroundImage?: PerseusImageBackground;
      containerSizeClass: SizeClass;
      correct?: PerseusGraphType;
      findWidgets: (criterion: FilterCriterion) => readonly Widget[];
      fullGraphAriaDescription?: string;
      fullGraphAriaLabel?: string;
      graph: PerseusGraphType;
      gridStep?: [x: number, y: number];
      handleUserInput: (
          newUserInput: PerseusGraphType,
          cb?: () => void,
          silent?: boolean,
      ) => void;
      keypadElement?: any;
      labelLocation: AxisLabelLocation;
      labels: string[];
      linterContext: LinterContextProps;
      lockedFigures: LockedFigure[];
      markings: MarkingsType;
      onBlur: (blurPath: FocusPath) => void;
      onFocus: (blurPath: FocusPath) => void;
      problemNum: number | null | undefined;
      range: GraphRange;
      reviewMode: boolean;
      rulerLabel?: string;
      rulerTicks?: number;
      showAxisArrows: ShowAxisArrows;
      showProtractor: boolean;
      showRuler?: boolean;
      showSolutions?: ShowSolutions;
      showTooltips?: boolean;
      snapStep?: [x: number, y: number];
      static: boolean | null | undefined;
      step: [number, number];
      trackInteraction: (extraData?: Empty) => void;
      widgetId: string;
      widgetIndex: number;
  }

  • alignment: string | null | undefined

  • apiOptions: APIOptionsWithDefaults

  • OptionalbackgroundImage?: PerseusImageBackground

    An optional image to use in the background

  • containerSizeClass: SizeClass

  • Optionalcorrect?: PerseusGraphType

    The correct answer for this widget.

  • findWidgets: (criterion: FilterCriterion) => readonly Widget[]

  • OptionalfullGraphAriaDescription?: string

    Aria description that applies to the entire graph.

  • OptionalfullGraphAriaLabel?: string

    Aria label that applies to the entire graph.

  • graph: PerseusGraphType

  • OptionalgridStep?: [x: number, y: number]

    Where the grid lines on the graph will render. default [1, 1]

    NOTE(kevinb): perseus_data.go defines this as Array

  • handleUserInput: (newUserInput: PerseusGraphType, cb?: () => void, silent?: boolean) => void

  • OptionalkeypadElement?: any

  • labelLocation: AxisLabelLocation

    Where to put the axis labels on the graph. default: "onAxis"

  • labels: string[]

    How to label the X and Y axis. default: ["x", "y"]

  • linterContext: LinterContextProps

  • lockedFigures: LockedFigure[]

    Shapes (points, chords, etc) displayed on the graph that cannot be moved by the user.

  • markings: MarkingsType

    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

  • onBlur: (blurPath: FocusPath) => void

  • onFocus: (blurPath: FocusPath) => void

  • problemNum: number | null | undefined

  • range: GraphRange

    The X and Y coordinate ranges for the view of the graph. default: [[-10, 10], [-10, 10]]

    NOTE(kevinb): perseus_data.go defines this as Array<Array>

  • reviewMode: boolean

  • OptionalrulerLabel?: string

    The unit to show on the ruler. e.g. "mm", "cm", "m", "km", "in", "ft", "yd", "mi".

    Deprecated

    • no longer used by the InteractiveGraph widget. The property is kept on this type to prevent its accidental reuse in future features, since it may appear in production data.

  • OptionalrulerTicks?: number

    How many ticks to show on the ruler. e.g. 1, 2, 4, 8, 10, 16. Must be an integer.

    Deprecated

    • no longer used by the InteractiveGraph widget. The property is kept on this type to prevent its accidental reuse in future features, since it may appear in production data.

  • showAxisArrows: ShowAxisArrows

    Whether to show the arrows on the axis.

  • showProtractor: boolean

    Whether to show the Protractor tool overlaid on top of the graph

  • OptionalshowRuler?: boolean

    Whether to show the Ruler tool overlaid on top of the graph.

    Deprecated

    • no longer used by the InteractiveGraph widget. The property is kept on this type to prevent its accidental reuse in future features, since it may appear in production data.

  • OptionalshowSolutions?: ShowSolutions

  • OptionalshowTooltips?: boolean

    Whether to show tooltips on the graph

  • OptionalsnapStep?: [x: number, y: number]

    Where the graph points will lock to when they are dragged. default [0.5, 0.5]

    NOTE(kevinb): perseus_data.go defines this as Array

  • static: boolean | null | undefined

  • step: [number, number]

    Where the little black axis lines & labels (ticks) should render. Also known as the tick step. default [1, 1]

    NOTE(kevinb): perseus_data.go defines this as Array

  • trackInteraction: (extraData?: Empty) => void

  • widgetId: string

  • widgetIndex: number

  Deprecated

  and likely very broken API [LEMS-3185] do not trust serializedState

getUserInput

• getUserInput(): PerseusGraphType

  Returns PerseusGraphType

render

• render(): Element

  Returns Element

StaticdefaultExponentialCoords

• defaultExponentialCoords(props: Props): Coord[]

  Parameters

  • props: Props

  Returns Coord[]

StaticdefaultLogarithmCoords

• defaultLogarithmCoords(props: Props): Coord[]

  Parameters

  • props: Props

  Returns Coord[]

StaticdefaultQuadraticCoords

• defaultQuadraticCoords(props: Props): QuadraticCoords

  Parameters

  • props: Props

  Returns QuadraticCoords

StaticdefaultSinusoidCoords

• defaultSinusoidCoords(props: Props): Coord[]

  Parameters

  • props: Props

  Returns Coord[]

StaticdefaultTangentCoords

• defaultTangentCoords(props: Props): Coord[]

  Parameters

  • props: Props

  Returns Coord[]

StaticgetAbsoluteValueEquationString

• getAbsoluteValueEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetAngleCoords

• getAngleCoords(
      graph: PerseusGraphTypeAngle,
      props: Props,
  ): [Coord, Coord, Coord]

  Parameters

  • graph: PerseusGraphTypeAngle

    Like props.graph or props.correct

  • props: Props

    of an InteractiveGraph instance

  Returns [Coord, Coord, Coord]

StaticgetAngleEquationString

• getAngleEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetCircleEquationString

• getCircleEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetCurrentQuadraticCoefficients

• getCurrentQuadraticCoefficients(props: Props): QuadraticCoefficient

  Parameters

  • props: Props

  Returns QuadraticCoefficient

StaticgetCurrentSinusoidCoefficients

• getCurrentSinusoidCoefficients(props: Props): SineCoefficient

  Parameters

  • props: Props

  Returns SineCoefficient

StaticgetCurrentTangentCoefficients

• getCurrentTangentCoefficients(props: Props): TangentCoefficient

  Parameters

  • props: Props

  Returns TangentCoefficient

StaticgetEquationString

• getEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetExponentialEquationString

• getExponentialEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetLinearEquationString

• getLinearEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetLinearSystemCoords

• getLinearSystemCoords(graph: PerseusGraphType, props: Props): [Coord, Coord][]

  Parameters

  • graph: PerseusGraphType

    Like props.graph or props.correct

  • props: Props

    of an InteractiveGraph instance

  Returns [Coord, Coord][]

StaticgetLinearSystemEquationString

• getLinearSystemEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetLineCoords

• getLineCoords(graph: PerseusGraphType, props: Props): Coord[]

  Parameters

  • graph: PerseusGraphType

    Like props.graph or props.correct

  • props: Props

    of an InteractiveGraph instance

  Returns Coord[]

StaticgetLogarithmEquationString

• getLogarithmEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetNoneEquationString

• getNoneEquationString(): string

  Returns string

StaticgetPointCoords

• getPointCoords(graph: PerseusGraphTypePoint, props: Props): Coord[]

  Parameters

  • graph: PerseusGraphTypePoint

    Like props.graph or props.correct

  • props: Props

    of an InteractiveGraph instance

  Returns Coord[]

StaticgetPointEquationString

• getPointEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetPolygonCoords

• getPolygonCoords(graph: PerseusGraphType, props: Props): Coord[]

  Parameters

  • graph: PerseusGraphType

    Like props.graph or props.correct

  • props: Props

    of an InteractiveGraph instance

  Returns Coord[]

StaticgetPolygonEquationString

• getPolygonEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetQuadraticEquationString

• getQuadraticEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetRayEquationString

• getRayEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetSegmentCoords

• getSegmentCoords(graph: PerseusGraphTypeSegment, props: Props): Coord[][]

  Parameters

  • graph: PerseusGraphTypeSegment

    Like props.graph or props.correct

  • props: Props

    of an InteractiveGraph instance

  Returns Coord[][]

StaticgetSegmentEquationString

• getSegmentEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetSinusoidEquationString

• getSinusoidEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticgetTangentEquationString

• getTangentEquationString(props: Props): string

  Parameters

  • props: Props

  Returns string

StaticnormalizeCoords

• normalizeCoords(coordsList: Coord[], ranges: [Range, Range]): Coord[]

  Parameters

  • coordsList: Coord[]
  • ranges: [Range, Range]

  Returns Coord[]

StaticpointsFromNormalized

• pointsFromNormalized(
      props: Props,
      coordsList: Coord[],
      noSnap?: boolean,
  ): Coord[]

  Parameters

  • props: Props
  • coordsList: Coord[]
  • OptionalnoSnap: boolean

  Returns Coord[]