Add color options tab for FunnelBar

viz-lib/src/visualizations/funnel/Editor/ColorsSettings.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { Section, ColorPicker } from "@/components/visualizations/editor";
+import { EditorPropTypes } from "@/visualizations/prop-types";
+import ColorPalette from "../../ColorPalette";
+
+export default function ColorsSettings({ options, onOptionsChange }: any) {
+  const [onOptionsChangeDebounced] = useDebouncedCallback(onOptionsChange, 200);
+
+  return (
+    <React.Fragment>
+      {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
+      <Section>
+        <ColorPicker
+          layout="horizontal"
+          label="Color"
+          interactive
+          presetColors={ColorPalette}
+          placement="topRight"
+          color={options.color}
+          triggerProps={{ "data-test": "Funnel.Editor.Colors.color" }}
+          onChange={(color: any) => onOptionsChange({ color: color })}
+          // @ts-expect-error ts-migrate(2339) FIXME: Property 'Label' does not exist on type '({ classN... Remove this comment to see the full error message
+          addonAfter={<ColorPicker.Label color={options.color} presetColors={ColorPalette} />}
+        />
+      </Section>
+    </React.Fragment>
+  );
+}
+
+ColorsSettings.propTypes = EditorPropTypes;

viz-lib/src/visualizations/funnel/Editor/index.ts

@@ -2,8 +2,10 @@ import createTabbedEditor from "@/components/visualizations/editor/createTabbedE
 
 import GeneralSettings from "./GeneralSettings";
 import AppearanceSettings from "./AppearanceSettings";
+import ColorsSettings from "./ColorsSettings";
 
 export default createTabbedEditor([
   { key: "General", title: "General", component: GeneralSettings },
   { key: "Appearance", title: "Appearance", component: AppearanceSettings },
+  { key: "Colors", title: "Colors", component: ColorsSettings },
 ]);

viz-lib/src/visualizations/funnel/Renderer/index.tsx

@@ -60,7 +60,7 @@ export default function Renderer({ data, options }: any) {
         align: "center",
         render: (value: any, item: any) => (
           // @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message
-          <FunnelBar align="center" color={ColorPalette.Cyan} value={item.pctMax}>
+          <FunnelBar align="center" color={options.color} value={item.pctMax}>
             {formatValue(value)}
           </FunnelBar>
         ),