From f2be935beae652a3da3b796e12d1dd12ca181939 Mon Sep 17 00:00:00 2001
From: Stef <ramenhog@gmail.com>
Date: Tue, 19 Nov 2024 12:27:36 -0500
Subject: [PATCH] Feat: theme builder base options for all chart types (#2978)

---
 .../theme-builder/config-preview.tsx          |   2 +-
 demo/ts/components/theme-builder/index.tsx    |  74 ++-
 .../theme-builder/options-config.tsx          | 593 +++++++++++++++++-
 3 files changed, 644 insertions(+), 25 deletions(-)

diff --git a/demo/ts/components/theme-builder/config-preview.tsx b/demo/ts/components/theme-builder/config-preview.tsx
index 9012aea9c..05e73d9ea 100644
--- a/demo/ts/components/theme-builder/config-preview.tsx
+++ b/demo/ts/components/theme-builder/config-preview.tsx
@@ -30,7 +30,7 @@ const ConfigPreview = ({ config, onClose }: ConfigPreviewProps) => {
   };
 
   return (
-    <div className="fixed top-0 right-0 bottom-0 w-full p-10 z-20 bg-white flex flex-col">
+    <div className="fixed top-0 right-0 bottom-0 w-full p-10 z-[100] bg-white flex flex-col">
       <button
         onClick={handleClose}
         className="absolute top-3 right-3 bg-transparent border-0 text-xl"
diff --git a/demo/ts/components/theme-builder/index.tsx b/demo/ts/components/theme-builder/index.tsx
index e625705fd..978668831 100644
--- a/demo/ts/components/theme-builder/index.tsx
+++ b/demo/ts/components/theme-builder/index.tsx
@@ -11,6 +11,7 @@ import { VictoryAxis } from "victory-axis";
 import { VictoryStack } from "victory-stack";
 import { VictoryBar } from "victory-bar";
 import { VictoryArea } from "victory-area";
+import { VictoryTooltip } from "victory-tooltip";
 import Select from "./select";
 import ConfigPreview from "./config-preview";
 import Button from "./button";
@@ -82,9 +83,15 @@ const ThemeBuilder = () => {
     React.useState<ColorScalePropType>("qualitative");
   const [showThemeConfigPreview, setShowThemeConfigPreview] =
     React.useState(false);
+  const [showTooltips, setShowTooltips] = React.useState(true);
 
   const handleThemeSelect = (themeName: string) => {
     const theme = themes.find((t) => t.name === themeName);
+    if (!theme) {
+      setBaseTheme(undefined);
+      setCustomThemeConfig(undefined);
+      return;
+    }
     setBaseTheme(theme);
     setCustomThemeConfig({ ...theme?.config });
   };
@@ -152,9 +159,23 @@ const ThemeBuilder = () => {
         {customThemeConfig && (
           <div className="max-w-screen-xl w-full py-4 px-10">
             <h2 className="text-xl font-bold mb-4">Example Charts</h2>
+            <fieldset>
+              <div className="flex items-center gap-4 mb-4">
+                <input
+                  type="checkbox"
+                  id="show-tooltips"
+                  className="form-checkbox h-5 w-5 text-primary"
+                  checked={showTooltips}
+                  onChange={() => setShowTooltips(!showTooltips)}
+                />
+                <label htmlFor="show-tooltips">
+                  Show tooltips instead of labels
+                </label>
+              </div>
+            </fieldset>
             <div className="grid grid-cols-2 gap-10">
               <div>
-                <h3 className="text-base font-bold mb-3">Bar Chart</h3>
+                <h3 className="text-base font-bold mb-3">Stacked Area Chart</h3>
                 <VictoryChart
                   theme={customThemeConfig}
                   domainPadding={20}
@@ -167,13 +188,17 @@ const ThemeBuilder = () => {
                     aria-label="Victory Stack Demo"
                   >
                     {[...Array(5)].map((_, i) => (
-                      <VictoryBar data={sampleStackData} key={i} />
+                      <VictoryArea
+                        data={sampleStackData}
+                        key={i}
+                        labels={() => undefined}
+                      />
                     ))}
                   </VictoryStack>
                 </VictoryChart>
               </div>
               <div>
-                <h3 className="text-base font-bold mb-3">Area Chart</h3>
+                <h3 className="text-base font-bold mb-3">Stacked Bar Chart</h3>
                 <VictoryChart
                   theme={customThemeConfig}
                   domainPadding={20}
@@ -186,23 +211,48 @@ const ThemeBuilder = () => {
                     aria-label="Victory Stack Demo"
                   >
                     {[...Array(5)].map((_, i) => (
-                      <VictoryArea data={sampleStackData} key={i} />
+                      <VictoryBar
+                        data={sampleStackData}
+                        key={i}
+                        labels={({ datum }) =>
+                          showTooltips ? datum.y : undefined
+                        }
+                        {...(showTooltips && {
+                          labelComponent: <VictoryTooltip />,
+                        })}
+                      />
                     ))}
                   </VictoryStack>
                 </VictoryChart>
               </div>
               {optionsConfig.map(
-                ({ title, content: Content }, i) =>
+                ({ title, content: Content, hasVictoryChart = true }, i) =>
                   Content && (
                     <div key={i}>
                       <h3 className="text-base font-bold mb-3">{title}</h3>
-                      <VictoryChart
-                        theme={customThemeConfig}
-                        domainPadding={20}
-                        style={chartStyle}
-                      >
-                        {Content({ labels: ({ datum }) => datum.y })}
-                      </VictoryChart>
+                      {hasVictoryChart ? (
+                        <VictoryChart
+                          theme={customThemeConfig}
+                          domainPadding={20}
+                          style={chartStyle}
+                        >
+                          {Content({
+                            labels: ({ datum }) => datum.y || datum.x,
+                            ...(showTooltips && {
+                              labelComponent: <VictoryTooltip />,
+                            }),
+                          })}
+                        </VictoryChart>
+                      ) : (
+                        Content({
+                          labels: ({ datum }) => datum.y || datum.x,
+                          style: chartStyle,
+                          theme: customThemeConfig,
+                          ...(showTooltips && {
+                            labelComponent: <VictoryTooltip />,
+                          }),
+                        })
+                      )}
                     </div>
                   ),
               )}
diff --git a/demo/ts/components/theme-builder/options-config.tsx b/demo/ts/components/theme-builder/options-config.tsx
index 64a5e32cc..b2347ccb1 100644
--- a/demo/ts/components/theme-builder/options-config.tsx
+++ b/demo/ts/components/theme-builder/options-config.tsx
@@ -4,8 +4,44 @@ import { VictoryAxis } from "victory-axis";
 import { VictoryBar } from "victory-bar";
 import { VictoryCandlestick } from "victory-candlestick";
 import { VictoryErrorBar } from "victory-errorbar";
+import { VictoryHistogram } from "victory-histogram";
+import { VictoryLegend } from "victory-legend";
+import { VictoryLine } from "victory-line";
+import { VictoryPie } from "victory-pie";
+import { VictoryScatter } from "victory-scatter";
+import { VictoryVoronoi } from "victory-voronoi";
 
-const getBaseLabelsConfig = (basePath: string) => [
+type ThemeBuilderFieldConfig =
+  | {
+      type: "section" | "colorScale";
+      label: string;
+      fields?: ThemeBuilderFieldConfig[];
+    }
+  | {
+      type: "slider" | "select" | "colorPicker";
+      label: string;
+      path: string;
+      min?: number;
+      max?: number;
+      step?: number;
+      unit?: string;
+      default: number | string;
+      options?: { label: string; value: string }[];
+    };
+
+type ThemeBuilderOptionsConfig = {
+  type: "section";
+  title: string;
+  hasVictoryChart?: boolean;
+  content?: (props: any) => React.ReactNode;
+  fields: ThemeBuilderFieldConfig[];
+}[];
+
+const defaultFill = "#000";
+
+const getBaseLabelsConfig: (basePath: string) => ThemeBuilderFieldConfig[] = (
+  basePath: string,
+) => [
   {
     type: "slider",
     label: "Font Size",
@@ -13,6 +49,7 @@ const getBaseLabelsConfig = (basePath: string) => [
     max: 24,
     unit: "px",
     path: `${basePath}.fontSize`,
+    default: 12,
   },
   {
     type: "slider",
@@ -21,15 +58,17 @@ const getBaseLabelsConfig = (basePath: string) => [
     max: 50,
     unit: "px",
     path: `${basePath}.padding`,
+    default: 8,
   },
   {
     type: "colorPicker",
     label: "Fill",
     path: `${basePath}.fill`,
+    default: defaultFill,
   },
 ];
 
-const optionsConfig = [
+const optionsConfig: ThemeBuilderOptionsConfig = [
   {
     type: "section",
     title: "Palette",
@@ -55,11 +94,11 @@ const optionsConfig = [
         {...props}
         key="area-chart"
         data={[
-          { x: 1, y: 2 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 4 },
-          { x: 5, y: 7 },
+          { x: 1, y: 2, label: "A" },
+          { x: 2, y: 3, label: "B" },
+          { x: 3, y: 5, label: "C" },
+          { x: 4, y: 4, label: "D" },
+          { x: 5, y: 7, label: "E" },
         ]}
       />,
     ],
@@ -84,11 +123,13 @@ const optionsConfig = [
             max: 5,
             unit: "px",
             path: "area.style.data.strokeWidth",
+            default: 2,
           },
           {
             type: "colorPicker",
             label: "Fill",
             path: "area.style.data.fill",
+            default: defaultFill,
           },
         ],
       },
@@ -109,11 +150,11 @@ const optionsConfig = [
         key="bar-chart"
         {...props}
         data={[
-          { x: 1, y: 2 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 4 },
-          { x: 5, y: 7 },
+          { x: 1, y: 2, label: "A" },
+          { x: 2, y: 3, label: "B" },
+          { x: 3, y: 5, label: "C" },
+          { x: 4, y: 4, label: "D" },
+          { x: 5, y: 7, label: "E" },
         ]}
       />,
     ],
@@ -126,6 +167,7 @@ const optionsConfig = [
             type: "colorPicker",
             label: "Fill",
             path: "bar.style.data.fill",
+            default: defaultFill,
           },
           {
             type: "slider",
@@ -134,6 +176,7 @@ const optionsConfig = [
             max: 5,
             unit: "px",
             path: "bar.style.data.strokeWidth",
+            default: 0,
           },
           {
             type: "slider",
@@ -174,6 +217,7 @@ const optionsConfig = [
             close: 10,
             high: 15,
             low: 0,
+            label: "A",
           },
           {
             x: "3/2/23",
@@ -181,6 +225,7 @@ const optionsConfig = [
             close: 15,
             high: 20,
             low: 5,
+            label: "B",
           },
           {
             x: "3/3/23",
@@ -188,6 +233,7 @@ const optionsConfig = [
             close: 20,
             high: 22,
             low: 10,
+            label: "C",
           },
           {
             x: "3/4/23",
@@ -195,6 +241,7 @@ const optionsConfig = [
             close: 10,
             high: 25,
             low: 7,
+            label: "D",
           },
           {
             x: "3/5/23",
@@ -202,6 +249,7 @@ const optionsConfig = [
             close: 8,
             high: 15,
             low: 5,
+            label: "E",
           },
         ]}
       />
@@ -215,6 +263,7 @@ const optionsConfig = [
             type: "colorPicker",
             label: "Stroke Color",
             path: "candlestick.style.data.stroke",
+            default: defaultFill,
           },
           {
             type: "slider",
@@ -223,6 +272,7 @@ const optionsConfig = [
             max: 5,
             unit: "px",
             path: "candlestick.style.data.strokeWidth",
+            default: 1,
           },
           {
             type: "slider",
@@ -239,6 +289,7 @@ const optionsConfig = [
             max: 5,
             unit: "px",
             path: "candlestick.wickStrokeWidth",
+            default: 2,
           },
         ],
       },
@@ -255,11 +306,13 @@ const optionsConfig = [
             type: "colorPicker",
             label: "Positive Color",
             path: "candlestick.candleColors.positive",
+            default: "#ffffff",
           },
           {
             type: "colorPicker",
             label: "Negative Color",
             path: "candlestick.candleColors.negative",
+            default: defaultFill,
           },
         ],
       },
@@ -292,11 +345,13 @@ const optionsConfig = [
             max: 10,
             unit: "px",
             path: "errorbar.borderWidth",
+            default: 8,
           },
           {
             type: "colorPicker",
             label: "Stroke Color",
             path: "errorbar.style.data.stroke",
+            default: defaultFill,
           },
           {
             type: "slider",
@@ -305,6 +360,7 @@ const optionsConfig = [
             max: 5,
             unit: "px",
             path: "errorbar.style.data.strokeWidth",
+            default: 2,
           },
           {
             type: "select",
@@ -315,6 +371,7 @@ const optionsConfig = [
               { label: "Butt", value: "butt" },
             ],
             path: "errorbar.style.data.strokeLinecap",
+            default: "round",
           },
         ],
       },
@@ -325,6 +382,518 @@ const optionsConfig = [
       },
     ],
   },
+  {
+    type: "section",
+    title: "Histogram",
+    content: (props) => (
+      <VictoryHistogram
+        {...props}
+        data={[
+          { x: 0 },
+          { x: 1 },
+          { x: 1 },
+          { x: 1 },
+          { x: 1 },
+          { x: 2 },
+          { x: 2 },
+          { x: 3 },
+          { x: 4 },
+          { x: 7 },
+          { x: 7 },
+          { x: 10 },
+        ]}
+        labels={({ datum }) => `Bin count:\n ${datum.x}`}
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            path: "histogram.style.data.fill",
+            default: defaultFill,
+          },
+          {
+            type: "slider",
+            label: "Fill Opacity",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            path: "histogram.style.data.fillOpacity",
+            default: 1,
+          },
+          {
+            type: "slider",
+            label: "Top Corner Radius",
+            path: "histogram.cornerRadius.top",
+            max: 10,
+            step: 0.5,
+            default: 0,
+          },
+          {
+            type: "slider",
+            label: "Bin Spacing",
+            min: 0,
+            max: 10,
+            unit: "px",
+            path: "histogram.binSpacing",
+            default: 4,
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("histogram.style.labels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Legend",
+    content: (props) => [
+      <VictoryLegend
+        {...props}
+        key="legend"
+        x={125}
+        y={20}
+        title="Pets"
+        data={[
+          {
+            name: "Dogs",
+            symbol: { fill: "tomato" },
+          },
+          {
+            name: "Cats",
+            symbol: { fill: "orange" },
+          },
+          {
+            name: "Rabbits",
+            symbol: { fill: "gold" },
+          },
+        ]}
+      />,
+      <VictoryBar
+        key="legend-chart"
+        data={[
+          {
+            x: "Dogs",
+            y: 6,
+            fill: "tomato",
+          },
+          {
+            x: "Cats",
+            y: 4,
+            fill: "orange",
+          },
+          {
+            x: "Rabbits",
+            y: 2,
+            fill: "gold",
+          },
+        ]}
+        style={{
+          data: {
+            fill: ({ datum }) => datum.fill,
+          },
+        }}
+      />,
+    ],
+    fields: [
+      {
+        type: "section",
+        label: "General",
+        fields: [
+          {
+            type: "slider",
+            label: "Gutter",
+            min: 0,
+            max: 50,
+            unit: "px",
+            path: "legend.gutter",
+            default: 20,
+          },
+          {
+            type: "slider",
+            label: "Border Padding",
+            min: 0,
+            max: 50,
+            unit: "px",
+            path: "legend.borderPadding",
+            default: 10,
+          },
+          {
+            type: "select",
+            label: "Orientation",
+            options: [
+              { label: "Horizontal", value: "horizontal" },
+              { label: "Vertical", value: "vertical" },
+            ],
+            path: "legend.orientation",
+            default: "horizontal",
+          },
+          {
+            type: "select",
+            label: "Title Orientation",
+            options: [
+              { label: "Top", value: "top" },
+              { label: "Bottom", value: "bottom" },
+              { label: "Left", value: "left" },
+              { label: "Right", value: "right" },
+            ],
+            path: "legend.titleOrientation",
+            default: "top",
+          },
+          {
+            type: "select",
+            label: "Data Type",
+            options: [
+              { label: "Circle", value: "circle" },
+              { label: "Square", value: "square" },
+              { label: "Diamond", value: "diamond" },
+              { label: "Star", value: "star" },
+            ],
+            path: "legend.style.data.type",
+            default: "circle",
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("legend.style.labels"),
+      },
+      {
+        type: "section",
+        label: "Title",
+        fields: getBaseLabelsConfig("legend.style.title"),
+      },
+      {
+        type: "section",
+        label: "Border",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Stroke",
+            path: "legend.style.border.stroke",
+            default: defaultFill,
+          },
+          {
+            type: "slider",
+            label: "Stroke Width",
+            min: 0,
+            max: 5,
+            unit: "px",
+            path: "legend.style.border.strokeWidth",
+            default: 2,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Line Chart",
+    content: (props) => [
+      <VictoryAxis key="x-axis" label="X Axis" />,
+      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
+      <VictoryLine
+        key="line-chart"
+        {...props}
+        data={[
+          { x: 1, y: 2 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 4 },
+          { x: 5, y: 7 },
+        ]}
+        labels={({ datum }) => datum.y}
+      />,
+    ],
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Stroke",
+            default: defaultFill,
+            path: "line.style.data.stroke",
+          },
+          {
+            type: "slider",
+            label: "Stroke Width",
+            min: 0,
+            max: 5,
+            unit: "px",
+            default: 2,
+            path: "line.style.data.strokeWidth",
+          },
+          {
+            type: "select",
+            label: "Stroke Line Cap",
+            options: [
+              { label: "Round", value: "round" },
+              { label: "Square", value: "square" },
+              { label: "Butt", value: "butt" },
+            ],
+            default: "round",
+            path: "line.style.data.strokeLinecap",
+          },
+          {
+            type: "select",
+            label: "Stroke Line Join",
+            options: [
+              { label: "Round", value: "round" },
+              { label: "Bevel", value: "bevel" },
+              { label: "Miter", value: "miter" },
+            ],
+            default: "round",
+            path: "line.style.data.strokeLinejoin",
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("line.style.labels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Pie Chart",
+    hasVictoryChart: false,
+    content: (props) => (
+      <VictoryPie
+        {...props}
+        data={[
+          { x: "Cats", y: 35 },
+          { x: "Dogs", y: 40 },
+          { x: "Birds", y: 55 },
+          { x: "Fishes", y: 15 },
+          { x: "Reptiles", y: 10 },
+        ]}
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          {
+            type: "slider",
+            label: "Padding",
+            min: 0,
+            max: 50,
+            unit: "px",
+            path: "pie.style.data.padding",
+            default: 0,
+          },
+          {
+            type: "colorPicker",
+            label: "Stroke",
+            path: "pie.style.data.stroke",
+            default: defaultFill,
+          },
+          {
+            type: "slider",
+            label: "Stroke Width",
+            min: 0,
+            max: 5,
+            unit: "px",
+            default: 1,
+            path: "pie.style.data.strokeWidth",
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("pie.style.labels"),
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Scatter Chart",
+    content: (props) => (
+      <VictoryScatter
+        {...props}
+        data={[
+          { x: 1, y: 2 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 4 },
+          { x: 5, y: 7 },
+        ]}
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "Data",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: defaultFill,
+            path: "scatter.style.data.fill",
+          },
+          {
+            type: "slider",
+            label: "Opacity",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            default: 1,
+            path: "scatter.style.data.opacity",
+          },
+          {
+            type: "colorPicker",
+            label: "Stroke",
+            default: defaultFill,
+            path: "scatter.style.data.stroke",
+          },
+          {
+            type: "slider",
+            label: "Stroke Width",
+            min: 0,
+            max: 5,
+            unit: "px",
+            default: 0,
+            path: "scatter.style.data.strokeWidth",
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("scatter.style.labels"),
+      },
+    ],
+  },
+  // tooltip
+  {
+    type: "section",
+    title: "Tooltip",
+    fields: [
+      {
+        type: "section",
+        label: "General",
+        fields: [
+          ...getBaseLabelsConfig("tooltip.style"),
+          {
+            type: "slider",
+            label: "Corner Radius",
+            min: 0,
+            max: 10,
+            default: 0,
+            path: "tooltip.cornerRadius",
+          },
+          {
+            type: "slider",
+            label: "Pointer Length",
+            min: 0,
+            max: 20,
+            default: 10,
+            path: "tooltip.pointerLength",
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Flyout",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: "#FFFFFF",
+            path: "tooltip.flyoutStyle.fill",
+          },
+          {
+            type: "colorPicker",
+            label: "Stroke",
+            default: defaultFill,
+            path: "tooltip.flyoutStyle.stroke",
+          },
+          {
+            type: "slider",
+            label: "Stroke Width",
+            min: 0,
+            max: 5,
+            unit: "px",
+            default: 1,
+            path: "tooltip.flyoutStyle.strokeWidth",
+          },
+          {
+            type: "select",
+            label: "Pointer Events",
+            options: [
+              { label: "None", value: "none" },
+              { label: "All", value: "all" },
+            ],
+            default: "none",
+            path: "tooltip.flyoutStyle.pointerEvents",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Voronoi",
+    content: (props) => (
+      <VictoryVoronoi
+        {...props}
+        data={[
+          { x: 1, y: 2 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 4 },
+          { x: 5, y: 7 },
+        ]}
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "General",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: "#FFFFFF",
+            path: "voronoi.style.data.fill",
+          },
+          {
+            type: "colorPicker",
+            label: "Stroke",
+            default: defaultFill,
+            path: "voronoi.style.data.stroke",
+          },
+          {
+            type: "slider",
+            label: "Stroke Width",
+            min: 0,
+            max: 5,
+            unit: "px",
+            default: 2,
+            path: "voronoi.style.data.strokeWidth",
+          },
+        ],
+      },
+      {
+        type: "section",
+        label: "Labels",
+        fields: getBaseLabelsConfig("voronoi.style.labels"),
+      },
+    ],
+  },
 ];
 
 export default optionsConfig;