Feat: add theme builder base and box plot chart controls (#2989)

FormidableLabs · Nov 26, 2024 · 4541fc4 · 4541fc4
1 parent 0b235c2
commit 4541fc4
Show file tree

Hide file tree

Showing 3 changed files with 190 additions and 8 deletions.
diff --git a/website/src/pages/themes/_components/color-picker.tsx b/website/src/pages/themes/_components/color-picker.tsx
@@ -28,7 +28,7 @@ const ColorPicker = ({
   };
 
   return (
-    <fieldset className={className}>
+    <fieldset className={clsx("p-0", className)}>
       {label && (
         <label className="block mb-1 text-sm text-grayscale-900 dark:text-white font-bold">
           {label}

diff --git a/website/src/pages/themes/_config.tsx b/website/src/pages/themes/_config.tsx
@@ -4,6 +4,7 @@ import {
   VictoryArea,
   VictoryAxis,
   VictoryBar,
+  VictoryBoxPlot,
   VictoryCandlestick,
   VictoryErrorBar,
   VictoryHistogram,
@@ -130,7 +131,7 @@ const getBaseLabelsConfig = (
   },
   {
     type: "slider",
-    label: "Padding",
+    label: "Text Padding",
     min: 0,
     max: 50,
     unit: "px",
@@ -139,7 +140,7 @@ const getBaseLabelsConfig = (
   },
   {
     type: "colorPicker",
-    label: "Fill",
+    label: "Font Color",
     path: getPath(basePath, "fill"),
     default: defaultFill,
   },
@@ -160,6 +161,78 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
     type: "section",
     title: "Global Settings",
     fields: [
+      {
+        type: "slider",
+        label: "Width",
+        min: 0,
+        max: 500,
+        unit: "px",
+        default: 350,
+        path: [
+          "chart.width",
+          "axis.width",
+          "area.width",
+          "bar.width",
+          "boxplot.width",
+          "candlestick.width",
+          "errorbar.width",
+          "group.width",
+          "histogram.width",
+          "line.width",
+          "pie.width",
+          "scatter.width",
+          "stack.width",
+          "voronoi.width",
+        ],
+      },
+      {
+        type: "slider",
+        label: "Height",
+        min: 0,
+        max: 500,
+        unit: "px",
+        default: 350,
+        path: [
+          "chart.height",
+          "axis.height",
+          "area.height",
+          "bar.height",
+          "boxplot.height",
+          "candlestick.height",
+          "errorbar.height",
+          "group.height",
+          "histogram.height",
+          "line.height",
+          "pie.height",
+          "scatter.height",
+          "stack.height",
+          "voronoi.height",
+        ],
+      },
+      {
+        type: "slider",
+        label: "Padding",
+        min: 0,
+        max: 100,
+        unit: "px",
+        default: 50,
+        path: [
+          "chart.padding",
+          "axis.padding",
+          "area.padding",
+          "bar.padding",
+          "boxplot.padding",
+          "candlestick.padding",
+          "errorbar.padding",
+          "group.padding",
+          "histogram.padding",
+          "line.padding",
+          "pie.padding",
+          "scatter.padding",
+          "stack.padding",
+          "voronoi.padding",
+        ],
+      },
       {
         type: "section",
         label: "Labels",
@@ -178,6 +251,11 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
           "pie.style.labels",
           "scatter.style.labels",
           "voronoi.style.labels",
+          "boxplot.style.maxLabels",
+          "boxplot.style.medianLabels",
+          "boxplot.style.minLabels",
+          "boxplot.style.q1Labels",
+          "boxplot.style.q3Labels",
         ]),
       },
       {
@@ -468,6 +546,112 @@ const optionsConfig: ThemeBuilderOptionsConfig = [
       },
     ],
   },
+  {
+    type: "section",
+    title: "Box Plot",
+    content: (props) => (
+      <VictoryBoxPlot
+        {...props}
+        data={[
+          { x: 1, y: [1, 2, 3, 5, 8] },
+          { x: 2, y: [3, 2, 8, 10, 12] },
+          { x: 3, y: [2, 8, 6, 5, 10] },
+          { x: 4, y: [1, 3, 2, 9, 5] },
+          { x: 5, y: [3, 2, 9, 5, 7] },
+        ]}
+        labels
+        labelOrientation="right"
+      />
+    ),
+    fields: [
+      {
+        type: "section",
+        label: "Max",
+        fields: [
+          ...getBaseStrokeConfig("boxplot.style.max", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+          ...getBaseLabelsConfig("boxplot.style.maxLabels"),
+        ],
+      },
+      {
+        type: "section",
+        label: "Median",
+        fields: [
+          ...getBaseStrokeConfig("boxplot.style.median", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+          ...getBaseLabelsConfig("boxplot.style.medianLabels"),
+        ],
+      },
+      {
+        type: "section",
+        label: "Min",
+        fields: [
+          ...getBaseStrokeConfig("boxplot.style.min", [
+            StrokeProps.STROKE,
+            StrokeProps.STROKE_WIDTH,
+          ]),
+          ...getBaseLabelsConfig("boxplot.style.minLabels"),
+        ],
+      },
+      {
+        type: "section",
+        label: "Q1",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: defaultFill,
+            path: "boxplot.style.q1.fill",
+          },
+          {
+            type: "slider",
+            label: "Border Radius",
+            min: 0,
+            max: 10,
+            step: 0.5,
+            default: 0,
+            path: "boxplot.q1.rx",
+          },
+          {
+            type: "slider",
+            label: "Stroke Width",
+            min: 0,
+            max: 5,
+            unit: "px",
+            default: 1,
+            path: "boxplot.style.q1.strokeWidth",
+          },
+          ...getBaseLabelsConfig("boxplot.style.q1Labels"),
+        ],
+      },
+      {
+        type: "section",
+        label: "Q3",
+        fields: [
+          {
+            type: "colorPicker",
+            label: "Fill",
+            default: defaultFill,
+            path: "boxplot.style.q3.fill",
+          },
+          {
+            type: "slider",
+            label: "Border Radius",
+            min: 0,
+            max: 10,
+            step: 0.5,
+            default: 0,
+            path: "boxplot.q3.rx",
+          },
+          ...getBaseLabelsConfig("boxplot.style.q3Labels"),
+        ],
+      },
+    ],
+  },
   {
     type: "section",
     title: "Candlestick Chart",

diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
@@ -56,11 +56,9 @@ module.exports = {
       fontFamily: {
         sans: ["Inter, Helvetica, Arial, sans-serif"],
       },
-      extend: {
-        backgroundImage: {
-          "select-chevron":
-            'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"/></svg>\')',
-        },
+      backgroundImage: {
+        "select-chevron":
+          'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"/></svg>\')',
       },
     },
   },