Feat: theme builder palette fixes (#2992)

FormidableLabs · Dec 2, 2024 · fd196c9 · fd196c9
1 parent d5f2b06
commit fd196c9
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 32 deletions.
diff --git a/website/src/pages/themes/_components/color-scale-options.tsx b/website/src/pages/themes/_components/color-scale-options.tsx
@@ -8,14 +8,18 @@ type ColorScaleOptionsProps = {
   palette?: VictoryThemeDefinition["palette"];
   activeColorScale?: ColorScalePropType;
   onColorChange: (args: ColorChangeArgs) => void;
-  onColorScaleChange: (colorScale: string) => void;
+  onColorScaleChange: (colorScale?: string) => void;
 };
 
-const colorScales = [
+export const colorScaleOptions = [
   {
     label: "Qualitative",
     value: "qualitative",
   },
+  {
+    label: "Grayscale",
+    value: "grayscale",
+  },
   {
     label: "Heatmap",
     value: "heatmap",
@@ -36,6 +40,10 @@ const colorScales = [
     label: "Green",
     value: "green",
   },
+  {
+    label: "Blue",
+    value: "blue",
+  },
 ];
 
 const ColorScaleOptions = ({
@@ -50,26 +58,29 @@ const ColorScaleOptions = ({
         id="color-scale-select"
         value={activeColorScale as string}
         onChange={onColorScaleChange}
-        options={colorScales}
+        options={colorScaleOptions}
         label="Color Scale"
         className="mb-5"
+        includeDefault
       />
-      <div className="flex flex-wrap gap-3">
-        {palette?.[activeColorScale as string]?.map((color, i) => (
-          <ColorPicker
-            key={i}
-            color={color}
-            id={`color-${i}`}
-            onColorChange={(newColor) =>
-              onColorChange({
-                newColor,
-                index: i,
-                colorScale: activeColorScale as string,
-              })
-            }
-          />
-        ))}
-      </div>
+      {!!activeColorScale && (
+        <div className="flex flex-wrap gap-3">
+          {palette?.[activeColorScale as string]?.map((color, i) => (
+            <ColorPicker
+              key={i}
+              color={color}
+              id={`color-${i}`}
+              onColorChange={(newColor) =>
+                onColorChange({
+                  newColor,
+                  index: i,
+                  colorScale: activeColorScale as string,
+                })
+              }
+            />
+          ))}
+        </div>
+      )}
     </section>
   );
 };

diff --git a/website/src/pages/themes/_config.tsx b/website/src/pages/themes/_config.tsx
@@ -16,6 +16,7 @@ import {
   VictoryScatter,
   VictoryVoronoi,
 } from "victory";
+import { colorScaleOptions } from "./_components/color-scale-options";
 
 type ThemeBuilderFieldConfig =
   | {
@@ -63,14 +64,7 @@ const getNestedColorScaleConfig = (
   {
     type: "select",
     label: "Color Scale",
-    options: [
-      { label: "Qualitative", value: "qualitative" },
-      { label: "Heatmap", value: "heatmap" },
-      { label: "Warm", value: "warm" },
-      { label: "Cool", value: "cool" },
-      { label: "Red", value: "red" },
-      { label: "Green", value: "green" },
-    ],
+    options: colorScaleOptions,
     path: getPath(basePath, "colorScale"),
   },
 ];

diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
@@ -83,8 +83,9 @@ const ThemeBuilder = () => {
   const [customThemeConfig, setCustomThemeConfig] = React.useState<
     VictoryThemeDefinition | undefined
   >(undefined);
-  const [activeColorScale, setActiveColorScale] =
-    React.useState<ColorScalePropType>("qualitative");
+  const [activeColorScale, setActiveColorScale] = React.useState<
+    string | undefined
+  >(undefined);
   const [showThemeConfigPreview, setShowThemeConfigPreview] =
     React.useState(false);
   const [showTooltips, setShowTooltips] = React.useState(false);
@@ -113,8 +114,9 @@ const ThemeBuilder = () => {
     setCustomThemeConfig(updatedConfig);
   };
 
-  const handleColorScaleChange = (colorScale: string) => {
-    setActiveColorScale(colorScale as ColorScalePropType);
+  const handleColorScaleChange = (colorScale?: string) => {
+    const newColorScale = colorScale === "" ? undefined : colorScale;
+    setActiveColorScale(newColorScale);
   };
 
   const handleThemeConfigPreviewOpen = () => {
@@ -202,7 +204,7 @@ const ThemeBuilder = () => {
                     <VictoryAxis label="X Axis" />
                     <VictoryAxis dependentAxis label="Y Axis" />
                     <VictoryStack
-                      colorScale={activeColorScale}
+                      colorScale={activeColorScale as ColorScalePropType}
                       aria-label="Victory Stack Demo"
                     >
                       {[...Array(NUM_STACKS)].map((_, i) => (