import * as React from "react"; import type { StatefulMafsGraphType } from "./stateful-mafs-graph"; import type { QuadraticGraphState } from "./types"; import type { Coord } from "../../interactive2/types"; import type { WidgetProps } from "../../types"; import type { InteractiveGraphPromptJSON } from "../../widget-ai-utils/interactive-graph/interactive-graph-ai-utils"; import type { UnsupportedWidgetPromptJSON } from "../../widget-ai-utils/unsupported-widget"; import type { QuadraticCoefficient, SineCoefficient, Range } from "@khanacademy/kmath"; import type { PerseusGraphType, PerseusGraphTypeAngle, PerseusGraphTypePoint, PerseusGraphTypeSegment, PerseusInteractiveGraphWidgetOptions, GraphRange, InteractiveGraphPublicWidgetOptions, LockedFigure, PerseusImageBackground, MarkingsType, PerseusInteractiveGraphUserInput, AxisLabelLocation, ShowAxisArrows } from "@khanacademy/perseus-core"; type InteractiveGraphProps = { /** * 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 */ step: [number, number]; /** * Where the grid lines on the graph will render. default [1, 1] * * NOTE(kevinb): perseus_data.go defines this as Array */ gridStep?: [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 */ snapStep?: [x: number, y: number]; /** * An optional image to use in the background */ 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: MarkingsType; /** * How to label the X and Y axis. default: ["x", "y"] */ labels: string[]; /** * Where to put the axis labels on the graph. default: "onAxis" */ labelLocation: AxisLabelLocation; /** * Whether to show the Protractor tool overlaid on top of the graph */ showProtractor: 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. */ showRuler?: boolean; /** * Whether to show tooltips on the graph */ showTooltips?: boolean; /** * 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. */ rulerLabel?: string; /** * 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. */ rulerTicks?: number; /** * 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> */ range: GraphRange; /** * Whether to show the arrows on the axis. */ showAxisArrows: ShowAxisArrows; /** * The type of graph */ graph: PerseusGraphType; /** * The correct answer for this widget. */ correct?: PerseusGraphType; /** * Shapes (points, chords, etc) displayed on the graph that cannot be moved * by the user. */ lockedFigures: LockedFigure[]; /** * Aria label that applies to the entire graph. */ fullGraphAriaLabel?: string; /** * Aria description that applies to the entire graph. */ fullGraphAriaDescription?: string; }; type Props = WidgetProps; type DefaultProps = { labels: string[]; labelLocation: Props["labelLocation"]; range: Props["range"]; showAxisArrows: Props["showAxisArrows"]; step: Props["step"]; backgroundImage: Props["backgroundImage"]; markings: Props["markings"]; showTooltips: Props["showTooltips"]; showProtractor: Props["showProtractor"]; userInput: Props["userInput"]; }; type State = any; declare class InteractiveGraph extends React.Component { mafsRef: React.RefObject; static defaultProps: DefaultProps; getUserInput(): PerseusInteractiveGraphUserInput; getPromptJSON(): InteractiveGraphPromptJSON | UnsupportedWidgetPromptJSON; /** * @deprecated and likely very broken API * [LEMS-3185] do not trust serializedState */ getSerializedState(): { graph: PerseusGraphType; step: [number, number]; gridStep?: [x: number, y: number]; snapStep?: [x: number, y: number]; backgroundImage?: PerseusImageBackground; markings: MarkingsType; labels: string[]; labelLocation: AxisLabelLocation; showProtractor: boolean; showRuler?: boolean; showTooltips?: boolean; rulerLabel?: string; rulerTicks?: number; range: GraphRange; showAxisArrows: ShowAxisArrows; correct?: PerseusGraphType; lockedFigures: LockedFigure[]; fullGraphAriaLabel?: string; fullGraphAriaDescription?: string; trackInteraction: (extraData?: Empty | undefined) => void; widgetId: string; widgetIndex: number; alignment: string | null | undefined; static: boolean | null | undefined; problemNum: number | null | undefined; apiOptions: Readonly unknown; showAlignmentOptions?: boolean; readOnly?: boolean; editingDisabled?: boolean; answerableCallback?: (arg1: boolean) => unknown; getAnotherHint?: () => unknown; interactionCallback?: (widgetData: { [widgetId: string]: any; }) => void; imagePlaceholder?: React.ReactNode; widgetPlaceholder?: React.ReactNode; baseElements?: { Link: React.ComponentType; }; imagePreloader?: (dimensions: import("../../types").Dimensions) => React.ReactNode; trackInteraction?: (args: { type: string; id: string; correct?: boolean; } & Partial & Partial<{ visible: number; }>) => void; customKeypad?: boolean; nativeKeypadProxy?: (blur: () => void) => import("@khanacademy/math-input").KeypadAPI; isMobile?: boolean; isMobileApp?: boolean; setDrawingAreaAvailable?: (arg1: boolean) => unknown; hintProgressColor?: string; canScrollPage?: boolean; editorChangeDelay?: number; flags?: Record<"new-radio-widget" | "image-widget-upgrade-gif-controls" | "image-widget-upgrade-scale", boolean>; }> & { baseElements: NonNullable; canScrollPage: NonNullable; editorChangeDelay: NonNullable; isArticle: NonNullable; isMobile: NonNullable; isMobileApp: NonNullable; editingDisabled: NonNullable; onFocusChange: NonNullable; readOnly: NonNullable; setDrawingAreaAvailable: NonNullable; showAlignmentOptions: NonNullable; }>; keypadElement?: any; questionCompleted?: boolean; onFocus: (blurPath: import("../..").FocusPath) => void; onBlur: (blurPath: import("../..").FocusPath) => void; findWidgets: (criterion: import("../../types").FilterCriterion) => ReadonlyArray; reviewMode: boolean; showSolutions?: import("@khanacademy/perseus-core").ShowSolutions; handleUserInput: (newUserInput: PerseusGraphType, cb?: () => void, silent?: boolean) => void; linterContext: import("@khanacademy/perseus-linter").LinterContextProps; containerSizeClass: import("../../util/sizing-utils").SizeClass; }; render(): React.JSX.Element; /** * @param {object} graph Like props.graph or props.correct * @param {object} props of an InteractiveGraph instance */ static getLineCoords(graph: PerseusGraphType, props: Props): Coord[]; /** * @param {object} graph Like props.graph or props.correct * @param {object} props of an InteractiveGraph instance */ static getPointCoords(graph: PerseusGraphTypePoint, props: Props): Coord[]; /** * @param {object} graph Like props.graph or props.correct * @param {object} props of an InteractiveGraph instance */ static getLinearSystemCoords(graph: PerseusGraphType, props: Props): [Coord, Coord][]; /** * @param {object} graph Like props.graph or props.correct * @param {object} props of an InteractiveGraph instance */ static getPolygonCoords(graph: PerseusGraphType, props: Props): Coord[]; /** * @param {object} graph Like props.graph or props.correct * @param {object} props of an InteractiveGraph instance */ static getSegmentCoords(graph: PerseusGraphTypeSegment, props: Props): Coord[][]; /** * @param {object} graph Like props.graph or props.correct * @param {object} props of an InteractiveGraph instance */ static getAngleCoords(graph: PerseusGraphTypeAngle, props: Props): [Coord, Coord, Coord]; static normalizeCoords(coordsList: Coord[], ranges: [Range, Range]): Coord[]; static getEquationString(props: Props): string; static pointsFromNormalized(props: Props, coordsList: Coord[], noSnap?: boolean): Coord[]; static getNoneEquationString(): string; static getLinearEquationString(props: Props): string; static getCurrentQuadraticCoefficients(props: Props): QuadraticCoefficient; static defaultQuadraticCoords(props: Props): QuadraticGraphState["coords"]; static getQuadraticEquationString(props: Props): string; static getCurrentSinusoidCoefficients(props: Props): SineCoefficient; static defaultSinusoidCoords(props: Props): Coord[]; static getSinusoidEquationString(props: Props): string; static getCircleEquationString(props: Props): string; static getLinearSystemEquationString(props: Props): string; static getPointEquationString(props: Props): string; static getSegmentEquationString(props: Props): string; static getRayEquationString(props: Props): string; static getPolygonEquationString(props: Props): string; static getAngleEquationString(props: Props): string; } /** * @deprecated and likely a very broken API * [LEMS-3185] do not trust serializedState */ declare function getUserInputFromSerializedState(serializedState: any): PerseusInteractiveGraphUserInput; declare function getStartUserInput(options: InteractiveGraphPublicWidgetOptions): PerseusGraphType; declare function getCorrectUserInput(options: PerseusInteractiveGraphWidgetOptions): PerseusInteractiveGraphUserInput; declare const _default: { name: string; displayName: string; widget: typeof InteractiveGraph; getStartUserInput: typeof getStartUserInput; getCorrectUserInput: typeof getCorrectUserInput; getUserInputFromSerializedState: typeof getUserInputFromSerializedState; }; export default _default;