Add logX and expY as playground settings

packages/components/src/components/SquigglePlayground.tsx

@@ -32,6 +32,10 @@ interface PlaygroundProps {
   showControls?: boolean;
   /** Whether to show the summary table in the playground */
   showSummary?: boolean;
+  /** Whether to log the x coordinate on distribution charts */
+  logX?: boolean;
+  /** Whether to exp the y coordinate on distribution charts */
+  expY?: boolean;
   /** If code is set, component becomes controlled */
   code?: string;
   onCodeChange?(expr: string): void;
@@ -71,6 +75,8 @@ const schema = yup
     showControls: yup.boolean(),
     showSummary: yup.boolean(),
     showEditor: yup.boolean(),
+    logX: yup.boolean(),
+    expY: yup.boolean(),
     showSettingsPage: yup.boolean().default(false),
     diagramStart: yup
       .number()
@@ -203,6 +209,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   showTypes = false,
   showControls = false,
   showSummary = false,
+  logX = false,
+  expY = false,
   code: controlledCode,
   onCodeChange,
   showEditor = true,
@@ -219,10 +227,12 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       sampleCount: 1000,
       xyPointLength: 1000,
       chartHeight: 150,
-      showTypes: showTypes,
+      showTypes,
-      showControls: showControls,
+      showControls,
-      showSummary: showSummary,
+      logX,
-      showEditor: showEditor,
+      expY,
+      showSummary,
+      showEditor,
       leftSizePercent: 50,
       showSettingsPage: false,
       diagramStart: 0,
@@ -313,6 +323,16 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       <div className="pt-8">
         <HeadedSection title="Distribution Display Settings">
           <div className="space-y-2">
+            <Checkbox
+              register={register}
+              name="logX"
+              label="Show x scale logarithmically"
+            />
+            <Checkbox
+              register={register}
+              name="expY"
+              label="Show y scale exponentially"
+            />
             <Checkbox
               register={register}
               name="showControls"
@@ -403,6 +423,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       showTypes={vars.showTypes}
       showControls={vars.showControls}
       showSummary={vars.showSummary}
+      logX={vars.logX}
+      expY={vars.expY}
       bindings={defaultBindings}
       jsImports={imports}
     />