Function EditChartMenu

src/components/chart/edit-chart-menu.tsx:23–301

({
  value,
  onChange,
  columns,
}: EditChartMenuProps)

}

export default function EditChartMenu({
  value,
  onChange,
  columns,
}: EditChartMenuProps) {
  const { forcedTheme, resolvedTheme } = useTheme();
  const isNotChartComponent = ["text", "single_value", "table"].includes(
    value.type ?? "line"
  );

  // Add default yAxisKeyColors
  useEffect(() => {
    if (!value.params.options.yAxisKeyColors && columns?.length > 0) {
      const appTheme: "light" | "dark" = (forcedTheme || resolvedTheme) as
        | "light"
        | "dark";
      const themeColor = THEMES.neonPunk.colors?.[appTheme ?? "light"];
      const colors = generateGradientColors(
        themeColor[0],
        themeColor[1],
        columns.length
      );

      onChange((prev) => {
        const newColors = columns.reduce(
          (acc, col, i) => {
            acc[col] = colors[i];
            return acc;
          },
          {} as Record<string, string>
        );
        return produce(prev, (draft) => {
          draft.params.options.yAxisKeyColors = newColors;
        });
      });
    }
  }, [
    columns,
    forcedTheme,
    onChange,
    resolvedTheme,
    value.params.options.yAxisKeyColors,
  ]);

  // add default yAxisKeys and xAxisKey
  useEffect(() => {
    const allColumns = columns ?? [];
    if (!value.params.options.xAxisKey && columns?.length > 0) {
      onChange((prev) => {
        return produce(prev, (draft) => {
          draft.params.options.xAxisKey = allColumns.pop();
        });
      });
    }

    if (!value.params.options.yAxisKeys && columns?.length > 0) {
      onChange((prev) => {
        return produce(prev, (draft) => {