@khanacademy/perseus-editor 2.8.4 → 2.9.0

package/dist/item-extras-editor.d.ts

@@ -7,6 +7,7 @@ declare class ItemExtrasEditor extends React.Component<Props> {
         chi2Table: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Validator<(...args: any[]) => any>;
         periodicTable: PropTypes.Requireable<boolean>;
+        periodicTableWithKey: PropTypes.Requireable<boolean>;
         tTable: PropTypes.Requireable<boolean>;
         zTable: PropTypes.Requireable<boolean>;
     };

package/dist/widgets/plotter-editor.d.ts

@@ -1,10 +1,9 @@
 import * as React from "react";
-declare const plotTypes: string[];
-type PlotType = typeof plotTypes[number];
+import type { PerseusPlotterWidgetOptions } from "@khanacademy/perseus";
 declare const editingStates: string[];
 type EditingState = typeof editingStates[number];
 type Props = {
-    type: PlotType;
+    type: PerseusPlotterWidgetOptions["type"];
     labels: Array<string>;
     categories: ReadonlyArray<string | number>;
     scaleY: number;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.8.4",
+    "version": "2.9.0",
     "publishConfig": {
         "access": "public"
     },
@@ -22,10 +22,10 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.4",
-        "@khanacademy/kmath": "^0.1.5",
-        "@khanacademy/perseus": "^12.3.0",
-        "@khanacademy/perseus-core": "1.2.0"
+        "@khanacademy/kas": "^0.3.5",
+        "@khanacademy/kmath": "^0.1.6",
+        "@khanacademy/perseus": "^13.0.0",
+        "@khanacademy/perseus-core": "1.3.0"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.1.3",

package/src/item-extras-editor.tsx

@@ -12,6 +12,7 @@ class ItemExtrasEditor extends React.Component<Props> {
         chi2Table: PropTypes.bool,
         onChange: PropTypes.func.isRequired,
         periodicTable: PropTypes.bool,
+        periodicTableWithKey: PropTypes.bool,
         tTable: PropTypes.bool,
         zTable: PropTypes.bool,
     };
@@ -20,6 +21,7 @@ class ItemExtrasEditor extends React.Component<Props> {
         calculator: false,
         chi2Table: false,
         periodicTable: false,
+        periodicTableWithKey: false,
         tTable: false,
         zTable: false,
     };
@@ -29,6 +31,7 @@ class ItemExtrasEditor extends React.Component<Props> {
             calculator: this.props.calculator,
             chi2Table: this.props.chi2Table,
             periodicTable: this.props.periodicTable,
+            periodicTableWithKey: this.props.periodicTableWithKey,
             tTable: this.props.tTable,
             zTable: this.props.zTable,
         };
@@ -79,6 +82,28 @@ class ItemExtrasEditor extends React.Component<Props> {
                         </InfoTip>
                     </div>
 
+                    {this.props.periodicTable && (
+                        <div>
+                            <label>
+                                Include key/legend with periodic table:{" "}
+                                <input
+                                    type="checkbox"
+                                    checked={this.props.periodicTableWithKey}
+                                    onChange={(e) => {
+                                        this.props.onChange({
+                                            periodicTableWithKey:
+                                                e.target.checked,
+                                        });
+                                    }}
+                                />
+                            </label>
+                            <InfoTip>
+                                Include a key for HS courses, omit for AP
+                                chemistry.
+                            </InfoTip>
+                        </div>
+                    )}
+
                     <div>
                         <label>
                             Show z table (statistics):{" "}

package/src/widgets/plotter-editor.tsx

@@ -4,6 +4,7 @@ import {number as knumber} from "@khanacademy/kmath";
 import {
     components,
     Dependencies,
+    plotterPlotTypes,
     PlotterWidget,
     Util,
 } from "@khanacademy/perseus";
@@ -13,18 +14,11 @@ import _ from "underscore";
 
 import BlurInput from "../components/blur-input";
 
+import type {PerseusPlotterWidgetOptions} from "@khanacademy/perseus";
+
 const {InfoTip, NumberInput, RangeInput, TextListEditor} = components;
 const Plotter = PlotterWidget.widget;
 
-const BAR = "bar";
-const LINE = "line";
-const PIC = "pic";
-const HISTOGRAM = "histogram";
-const DOTPLOT = "dotplot";
-
-const plotTypes = [BAR, LINE, PIC, HISTOGRAM, DOTPLOT];
-type PlotType = typeof plotTypes[number];
-
 const STARTING = "starting";
 const CORRECT = "correct";
 
@@ -48,7 +42,7 @@ const editorDefaults = {
 } as const;
 
 type Props = {
-    type: PlotType;
+    type: PerseusPlotterWidgetOptions["type"];
     labels: Array<string>;
     categories: ReadonlyArray<string | number>;
     scaleY: number;
@@ -100,7 +94,7 @@ class PlotterEditor extends React.Component<Props, State> {
         correct: [1],
         starting: [1],
 
-        type: BAR,
+        type: "bar",
         labels: ["", ""],
         categories: [""],
 
@@ -184,12 +178,12 @@ class PlotterEditor extends React.Component<Props, State> {
 
     changeType: (arg1: any) => void = (type) => {
         let categories;
-        if (type === HISTOGRAM) {
+        if (type === "histogram") {
             // Switching to histogram, add a label (0) to the left
             // @ts-expect-error - TS2769
             categories = [formatNumber(0)].concat(this.props.categories);
             this.props.onChange({type: type, categories: categories});
-        } else if (this.props.type === HISTOGRAM) {
+        } else if (this.props.type === "histogram") {
             // Switching from histogram, remove a label from the left
             categories = this.props.categories.slice(1);
             this.props.onChange({type: type, categories: categories});
@@ -222,7 +216,7 @@ class PlotterEditor extends React.Component<Props, State> {
 
     changeCategories: (arg1: any) => void = (categories) => {
         let n = categories.length;
-        if (this.props.type === HISTOGRAM) {
+        if (this.props.type === "histogram") {
             // Histograms with n labels/categories have n - 1 buckets
             n--;
         }
@@ -279,7 +273,7 @@ class PlotterEditor extends React.Component<Props, State> {
         const length = Math.floor((max - min) / scale) * scale;
 
         let categories;
-        if (this.props.type === HISTOGRAM || this.props.type === DOTPLOT) {
+        if (this.props.type === "histogram" || this.props.type === "dotplot") {
             // Ranges for histogram and dotplot labels should start at zero
             categories = _.range(0, length + scale, scale);
         } else {
@@ -312,7 +306,7 @@ class PlotterEditor extends React.Component<Props, State> {
             "labelInterval",
         );
 
-        if (this.props.type === PIC) {
+        if (this.props.type === "pic") {
             // @ts-expect-error - TS2339 - Property 'picUrl' does not exist on type 'Pick<Readonly<any> & Readonly<{ children?: ReactNode; }>, "type" | "correct" | "labels" | "categories" | "starting" | "scaleY" | "maxY" | "snapsPerLine" | "labelInterval">'.
             json.picUrl = this.props.picUrl;
         }
@@ -322,10 +316,10 @@ class PlotterEditor extends React.Component<Props, State> {
 
     render(): React.ReactNode {
         const setFromScale = _.contains(
-            [LINE, HISTOGRAM, DOTPLOT],
+            ["line", "histogram", "dotplot"],
             this.props.type,
         );
-        const canChangeSnaps = !_.contains([PIC, DOTPLOT], this.props.type);
+        const canChangeSnaps = !_.contains(["pic", "dotplot"], this.props.type);
         const props = {
             trackInteraction: () => {},
             ...this.props,
@@ -335,7 +329,7 @@ class PlotterEditor extends React.Component<Props, State> {
             <div className="perseus-widget-plotter-editor">
                 <div>
                     Chart type:{" "}
-                    {plotTypes.map((type) => {
+                    {plotterPlotTypes.map((type) => {
                         return (
                             <label key={type}>
                                 <input
@@ -419,7 +413,7 @@ class PlotterEditor extends React.Component<Props, State> {
                         </p>
                     </InfoTip>
                 </div>
-                {this.props.type === PIC && (
+                {this.props.type === "pic" && (
                     <div>
                         <label>
                             Picture:{" "}