Feat: Percentage field color customization

src/components/ColorPickerInput.tsx

@@ -0,0 +1,92 @@
+import {
+  useState,
+  useEffect,
+  useRef,
+  MutableRefObject,
+  useLayoutEffect,
+} from "react";
+import { Box } from "@mui/material";
+
+import { fieldSx } from "@src/components/SideDrawer/utils";
+import { Color, ColorPicker } from "react-color-palette";
+import { useDebouncedCallback } from "use-debounce";
+
+const useResponsiveWidth = (): [
+  width: number,
+  setRef: MutableRefObject<HTMLElement | null>
+] => {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    if (!ref || !ref.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver((targets) => {
+      const { width: currentWidth } = targets[0].contentRect;
+      setWidth(currentWidth);
+    });
+
+    resizeObserver.observe(ref.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return [width, ref];
+};
+
+export interface IColorPickerProps {
+  value: Color;
+  handleOnChangeComplete: (color: Color) => void;
+  disabled?: boolean;
+}
+
+export default function ColorPickerInput({
+  value,
+  handleOnChangeComplete,
+  disabled = false,
+}: IColorPickerProps) {
+  const [localValue, setLocalValue] = useState(value);
+  const [width, setRef] = useResponsiveWidth();
+
+  const debouncedOnChangeComplete = useDebouncedCallback((color) => {
+    handleOnChangeComplete(color);
+  }, 100);
+
+  useEffect(() => {
+    debouncedOnChangeComplete(localValue);
+  }, [debouncedOnChangeComplete, localValue]);
+
+  return (
+    <Box
+      ref={setRef}
+      sx={[
+        fieldSx,
+        {
+          marginTop: "1rem",
+          padding: "1rem",
+          borderColor: "divider",
+          transitionDuration: 0,
+          "& .rcp": {
+            border: "none",
+            "& .rcp-saturation": {
+              borderRadius: "4px",
+            },
+            "& .rcp-body": {
+              boxSizing: "unset",
+            },
+          },
+        },
+      ]}
+    >
+      <ColorPicker
+        width={width}
+        height={100}
+        color={localValue}
+        onChange={(color) => setLocalValue(color)}
+      />
+    </Box>
+  );
+}

src/components/fields/Percentage/Settings.tsx

@@ -0,0 +1,195 @@
+import { useState } from "react";
+
+import {
+  Box,
+  ButtonBase,
+  Checkbox,
+  Collapse,
+  InputLabel,
+  useTheme,
+} from "@mui/material";
+import ColorPickerInput from "@src/components/ColorPickerInput";
+import { ISettingsProps } from "@src/components/fields/types";
+
+import { Color, toColor } from "react-color-palette";
+import { fieldSx } from "@src/components/SideDrawer/utils";
+import { ChevronDown } from "mdi-material-ui";
+import { ReactElement } from "react-markdown/lib/react-markdown";
+import { resultColorsScale } from "@src/utils/color";
+
+const ColorPickerCollapse = ({
+  colorKey,
+  color,
+  active,
+  setActive,
+  disabled,
+  children,
+}: {
+  colorKey: string;
+  color: Color;
+  active: boolean;
+  setActive: (activeKey: string | null) => void;
+  disabled?: boolean;
+  children?: ReactElement;
+}) => {
+  const toggleCollapse = () => !disabled && setActive(active ? null : colorKey);
+
+  const toggleState = (() => {
+    if (disabled && active) {
+      setActive(null);
+      return false;
+    }
+    return active;
+  })();
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <ButtonBase
+        onClick={toggleCollapse}
+        component={ButtonBase}
+        focusRipple
+        disabled={disabled}
+        sx={[
+          fieldSx,
+          {
+            justifyContent: "flex-start",
+            "&&": { pl: 0.75, pr: 0.5 },
+            color: color.hex,
+            transition: (theme) =>
+              theme.transitions.create("border-radius", {
+                delay: theme.transitions.duration.standard,
+              }),
+            "&.Mui-disabled": { color: "text.disabled" },
+          },
+          active && {
+            transitionDelay: "0s",
+            transitionDuration: "0s",
+          },
+        ]}
+      >
+        <Box
+          sx={{
+            backgroundColor: color?.hex,
+            width: 15,
+            height: 15,
+            mr: 1.5,
+            boxShadow: (theme) => `0 0 0 1px ${theme.palette.divider} inset`,
+            borderRadius: 0.5,
+            opacity: 0.5,
+          }}
+        />
+        <div style={{ flexGrow: 1 }}>{color.hex}</div>
+        <ChevronDown
+          color="action"
+          sx={{
+            transition: (theme) => theme.transitions.create("transform"),
+            transform: active ? "rotate(180deg)" : "none",
+          }}
+        />
+      </ButtonBase>
+      <Collapse in={toggleState}>{children}</Collapse>
+    </Box>
+  );
+};
+
+const defaultColors: { [key: string]: Color } = {
+  default: toColor("hex", "#FFFFFF"),
+  startColor: toColor("hex", "#ED4747"),
+  midColor: toColor("hex", "#F3C900"),
+  endColor: toColor("hex", "#1FAD5F"),
+};
+
+const colorLabels: { [key: string]: string } = {
+  startColor: "Start Color",
+  midColor: "Middle Color",
+  endColor: "End Color",
+};
+
+export default function Settings({ onChange, config }: ISettingsProps) {
+  const [checkStates, setCheckStates] = useState<{ [key: string]: boolean }>({
+    startColor: Boolean(config.startColor),
+    midColor: Boolean(config.midColor),
+    endColor: Boolean(config.endColor),
+  });
+  const [activePicker, setActivePicker] = useState<string | null>(null);
+  const theme = useTheme();
+
+  const onCheckboxChange = (key: string, checked: boolean) => {
+    if (!checked) {
+      onChange(key)(defaultColors.default);
+    } else {
+      onChange(key)(defaultColors[key]);
+    }
+    setCheckStates({ ...checkStates, [key]: checked });
+  };
+
+  return (
+    <>
+      {Object.keys(checkStates).map((colorKey) => {
+        const color = config[colorKey] || defaultColors[colorKey];
+        return (
+          <Box key={colorKey} sx={{ display: "flex", flexDirection: "column" }}>
+            {colorLabels[colorKey]}
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "start",
+                justifyContent: "center",
+              }}
+            >
+              <Checkbox
+                sx={[
+                  fieldSx,
+                  { width: "auto", marginRight: "0.5rem", boxShadow: "none" },
+                ]}
+                checked={checkStates[colorKey]}
+                onChange={() =>
+                  onCheckboxChange(colorKey, !checkStates[colorKey])
+                }
+              />
+              <ColorPickerCollapse
+                colorKey={colorKey}
+                active={activePicker === colorKey}
+                setActive={(activePicker) => setActivePicker(activePicker)}
+                color={color}
+                disabled={!checkStates[colorKey]}
+              >
+                <ColorPickerInput
+                  value={color}
+                  handleOnChangeComplete={(color) => onChange(colorKey)(color)}
+                  disabled={!checkStates[colorKey]}
+                />
+              </ColorPickerCollapse>
+            </Box>
+          </Box>
+        );
+      })}
+      <InputLabel>
+        Preview:
+        <Box sx={{ display: "flex", textAlign: "center" }}>
+          {[0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1].map((value) => {
+            const { startColor, midColor, endColor } = config;
+            return (
+              <Box
+                key={value}
+                sx={{
+                  width: "100%",
+                  padding: "0.5rem 0",
+                  color: theme.palette.text.primary,
+                  backgroundColor: resultColorsScale(value, {
+                    startColor: startColor.hex,
+                    midColor: midColor.hex,
+                    endColor: endColor.hex,
+                  }).toHex(),
+                  opacity: 0.5,
+                }}
+              >
+                {Math.floor(value * 100)}%
+              </Box>
+            );
+          })}
+        </Box>
+      </InputLabel>
+    </>
+  );
+}

src/components/fields/Percentage/SideDrawerField.tsx

@@ -4,6 +4,7 @@ import { TextField, InputAdornment, Box } from "@mui/material";
 import { emphasize } from "@mui/material/styles";
 import { resultColorsScale } from "@src/utils/color";
 import { getFieldId } from "@src/components/SideDrawer/utils";
+import { Color, toColor } from "react-color-palette";
 
 export default function Percentage({
   column,
@@ -12,6 +13,29 @@ export default function Percentage({
   onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
+  const defaultColors = {
+    startColor: toColor("hex", "#ED4747"),
+    midColor: toColor("hex", "#F3C900"),
+    endColor: toColor("hex", "#1FAD5F"),
+  };
+  const {
+    startColor,
+    midColor,
+    endColor,
+  }: {
+    startColor: Color;
+    endColor: Color;
+    midColor: Color;
+  } = {
+    ...defaultColors,
+    ...(column as any).config,
+  };
+
+  const colors = {
+    startColor: startColor.hex,
+    midColor: midColor.hex,
+    endColor: endColor.hex,
+  };
   return (
     <TextField
       variant="filled"
@@ -38,7 +62,7 @@ export default function Percentage({
                   `0 0 0 1px ${theme.palette.divider} inest`,
                 backgroundColor:
                   typeof value === "number"
-                    ? resultColorsScale(value).toHex() + "!important"
+                    ? resultColorsScale(value, colors).toHex() + "!important"
                     : undefined,
               }}
             />