radar customization

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.60.0",
+  "version": "14.60.1",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.60.0",
+  "version": "14.60.1",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-dev/table"
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/helpers": "^0.0.3",
+    "@dnd-kit/helpers": "0.0.4",
     "@dnd-kit/react": "^0.0.4",
     "@dnd-kit/sortable": "^8.0.0",
     "@emotion/cache": "^11.11.0",

dashboard/src/components/plugins/editor-components/name-color-map-editor/name-color-map-editor.tsx

@@ -1,72 +1,58 @@
 import { move } from '@dnd-kit/helpers';
 import { DragDropProvider } from '@dnd-kit/react';
 import { Group, Stack, Text } from '@mantine/core';
-import _ from 'lodash';
-import { forwardRef, useMemo } from 'react';
+import { ComponentProps, forwardRef, memo } from 'react';
+import { Control, FieldValues, useFieldArray } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { v4 as uuidv4 } from 'uuid';
 import { NameColorMapRow } from './types';
 import { RowEditor } from './row-editor';
 import { AddARow } from './add-a-row';
 import { SelectPalette } from './select-palette';
 
+type FieldWithId = NameColorMapRow & { id: string };
+
 type Props = {
-  value: NameColorMapRow[];
-  onChange: (v: NameColorMapRow[]) => void;
-  zIndex?: number;
+  control: Control<$TSFixMe>;
+  name: string;
   names: string[];
 };
 
-export const NameColorMapEditor = forwardRef<HTMLDivElement, Props>(({ value, onChange, zIndex = 340, names }, ref) => {
-  const { t } = useTranslation();
-  const rows = useMemo(() => {
-    return value.map((r) => ({
-      id: uuidv4(),
-      ...r,
-    }));
-  }, [value]);
+export const NameColorMapEditor = memo(
+  forwardRef<HTMLDivElement, Props>(({ control, name, names }, ref) => {
+    const { t } = useTranslation();
+    const { fields, append, remove, update, replace } = useFieldArray({
+      control,
+      name,
+    });
+
+    const typedFields = fields as FieldWithId[];
 
-  const append = (v: NameColorMapRow) => {
-    onChange([...value, v]);
-  };
-  const remove = (index: number) => {
-    const newValue = [...value];
-    newValue.splice(index, 1);
-    onChange(newValue);
-  };
-  const getChangeHandler = (index: number) => (v: NameColorMapRow) => {
-    const newValue = [...value];
-    newValue[index] = v;
-    onChange(newValue);
-  };
+    const handleAppend = (v: NameColorMapRow) => {
+      append(v);
+    };
 
-  const onDragEnd = (event: any) => {
-    const { source, target } = event.operation;
-    const newRows = move(rows, source, target);
-    onChange(newRows.map((v) => _.omit(v, 'id')));
-  };
+    const onDragEnd: ComponentProps<typeof DragDropProvider>['onDragEnd'] = (event) => {
+      const { source, target } = event.operation;
+      if (!source || !target) return;
+      const newFields = move(typedFields, source, target);
+      replace(newFields.map((f) => ({ name: f.name, color: f.color })));
+    };
 
-  return (
-    <Stack ref={ref} pt={4}>
-      <Group justify="space-between">
-        <Text size="sm" fw="500" mb={-4}>
-          {t('viz.pie_chart.color.map.label')}
-        </Text>
-        <SelectPalette value={value} onChange={onChange} />
-      </Group>
-      <DragDropProvider onDragEnd={onDragEnd}>
-        {rows.map((r, index) => (
-          <RowEditor
-            key={r.id}
-            row={r}
-            handleChange={getChangeHandler(index)}
-            handleRemove={() => remove(index)}
-            index={index}
-            names={names}
-          />
-        ))}
-      </DragDropProvider>
-      <AddARow append={append} />
-    </Stack>
-  );
-});
+    return (
+      <Stack ref={ref} pt={4}>
+        <Group justify="space-between">
+          <Text size="sm" fw="500" mb={-4}>
+            {t('viz.pie_chart.color.map.label')}
+          </Text>
+          <SelectPalette fields={typedFields} replace={replace} />
+        </Group>
+        <DragDropProvider onDragEnd={onDragEnd}>
+          {typedFields.map((field, index) => (
+            <RowEditor key={field.id} field={field} update={update} remove={remove} index={index} names={names} />
+          ))}
+        </DragDropProvider>
+        <AddARow append={handleAppend} />
+      </Stack>
+    );
+  }),
+);

dashboard/src/components/plugins/editor-components/name-color-map-editor/row-editor.tsx

@@ -1,98 +1,89 @@
 import { useSortable } from '@dnd-kit/react/sortable';
-import { ActionIcon, Autocomplete, Badge, Center, CloseButton, ColorInput, Flex, Group } from '@mantine/core';
+import { ActionIcon, Autocomplete, Badge, Center, CloseButton, Flex, Group } from '@mantine/core';
+import { ColorPickerPopoverForViz } from '~/components/widgets/color-picker-popover/color-picker-popover-for-viz';
 import { IconGripVertical } from '@tabler/icons-react';
 import { useBoolean } from 'ahooks';
+import { isEqual } from 'lodash';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NameColorMapRow } from './types';
 
-type RowFieldItem = {
-  id: string;
-} & NameColorMapRow;
-
 type NameColorMapRowProps = {
-  row: RowFieldItem;
-  handleChange: (v: RowFieldItem) => void;
-  handleRemove: () => void;
+  field: NameColorMapRow & { id: string };
+  update: (index: number, data: NameColorMapRow) => void;
+  remove: (index: number) => void;
   index: number;
   names: string[];
 };
 
-export const RowEditor = ({ row, index, handleChange, handleRemove, names }: NameColorMapRowProps) => {
-  const { t } = useTranslation();
-  const [touched, { setTrue: setTouched }] = useBoolean(false);
-  const [hovering, { setTrue, setFalse }] = useBoolean(false);
-  const { ref, handleRef } = useSortable({
-    id: row.id,
-    index,
-  });
-
-  const changeName = (name: string) => {
-    handleChange({
-      ...row,
-      name,
+export const RowEditor = memo(
+  ({ field, index, update, remove, names }: NameColorMapRowProps) => {
+    const { t } = useTranslation();
+    const [touched, { setTrue: setTouched }] = useBoolean(false);
+    const [hovering, { setTrue, setFalse }] = useBoolean(false);
+    const { ref, handleRef } = useSortable({
+      id: field.id,
+      index,
     });
-  };
 
-  const changeColor = (color: string) => {
-    handleChange({
-      ...row,
-      color,
-    });
-  };
+    const changeName = (name: string) => {
+      update(index, {
+        name,
+        color: field.color,
+      });
+    };
 
-  return (
-    <Flex
-      ref={ref}
-      gap="sm"
-      justify="flex-start"
-      align="center"
-      direction="row"
-      wrap="nowrap"
-      onMouseEnter={setTrue}
-      onMouseLeave={setFalse}
-    >
-      <Center style={{ minWidth: '30px', maxWidth: '30px', flex: 0 }}>
-        {hovering ? (
-          <ActionIcon size="xs" ref={handleRef} variant="subtle">
-            <IconGripVertical />
-          </ActionIcon>
-        ) : (
-          <Badge size="sm" variant="light">
-            {index + 1}
-          </Badge>
-        )}
-      </Center>
-      <Group grow wrap="nowrap" style={{ flex: 1 }}>
-        <Autocomplete
-          size="xs"
-          value={row.name}
-          placeholder={t('viz.pie_chart.color.map.name')}
-          onChange={changeName}
-          onClick={setTouched}
-          error={touched && !row.name}
-          data={names}
-          maxDropdownHeight={500}
-        />
-        <ColorInput
-          styles={{
-            root: {
-              flexGrow: 1,
-            },
-          }}
-          popoverProps={{
-            withinPortal: true,
-            zIndex: 340,
-          }}
-          size="xs"
-          value={row.color}
-          onChange={changeColor}
-          onClick={setTouched}
-          error={touched && !row.color}
-        />
-      </Group>
-      <div style={{ minWidth: '40px', maxWidth: '40px', flex: 0 }}>
-        <CloseButton onClick={handleRemove} size="sm" />
-      </div>
-    </Flex>
-  );
-};
+    const changeColor = (color: string) => {
+      update(index, {
+        name: field.name,
+        color,
+      });
+    };
+
+    return (
+      <Flex
+        ref={ref}
+        gap="sm"
+        justify="flex-start"
+        align="center"
+        direction="row"
+        wrap="nowrap"
+        onMouseEnter={setTrue}
+        onMouseLeave={setFalse}
+      >
+        <Center style={{ minWidth: '30px', maxWidth: '30px', flex: 0 }}>
+          {hovering ? (
+            <ActionIcon size="xs" ref={handleRef} variant="subtle">
+              <IconGripVertical />
+            </ActionIcon>
+          ) : (
+            <Badge size="sm" variant="light">
+              {index + 1}
+            </Badge>
+          )}
+        </Center>
+        <Group grow wrap="nowrap" style={{ flex: 1 }}>
+          <Autocomplete
+            size="xs"
+            value={field.name}
+            placeholder={t('viz.pie_chart.color.map.name')}
+            onChange={changeName}
+            onClick={setTouched}
+            error={touched && !field.name}
+            data={names}
+            maxDropdownHeight={500}
+          />
+          <ColorPickerPopoverForViz
+            value={field.color}
+            onChange={changeColor}
+            label={t('viz.pie_chart.color.map.color')}
+          />
+        </Group>
+        <div style={{ minWidth: '40px', maxWidth: '40px', flex: 0 }}>
+          <CloseButton onClick={() => remove(index)} size="sm" />
+        </div>
+      </Flex>
+    );
+  },
+  (prevProps, nextProps) => isEqual(prevProps, nextProps),
+);

dashboard/src/components/plugins/editor-components/name-color-map-editor/select-palette.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Combobox, Menu } from '@mantine/core';
-import _ from 'lodash';
 import numbro from 'numbro';
+import { FieldValues, UseFieldArrayReplace } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { NameColorMapRow } from './types';
 import { ColorMapPalettes } from './palette';
@@ -11,7 +11,7 @@ function getBackgroundImage(colors: string[]) {
     return '';
   }
   const format: numbro.Format = { output: 'percent', mantissa: 4, trimMantissa: true };
-  const step = _.divide(1, len);
+  const step = 1 / len;
   const stops: string[] = [];
   colors.forEach((c, i) => {
     stops.push(`${c} ${numbro(i * step).format(format)}`);
@@ -22,25 +22,25 @@ function getBackgroundImage(colors: string[]) {
 }
 
 type Props = {
-  value: NameColorMapRow[];
-  onChange: (v: NameColorMapRow[]) => void;
+  fields: (NameColorMapRow & { id: string })[];
+  replace: UseFieldArrayReplace<FieldValues, string>;
 };
 
-export const SelectPalette = ({ value, onChange }: Props) => {
+export const SelectPalette = ({ fields, replace }: Props) => {
   const { t } = useTranslation();
 
   const applyPalette = (colors: string[]) => {
-    const newValue = value.map((v, i) => ({
-      name: v.name,
-      color: colors[i],
+    const newValue = fields.map((f, i) => ({
+      name: f.name,
+      color: colors[i] ?? f.color,
     }));
-    for (let j = newValue.length - 1; j < colors.length; j++) {
+    for (let j = newValue.length; j < colors.length; j++) {
       newValue.push({
         name: '',
         color: colors[j],
       });
     }
-    onChange(newValue);
+    replace(newValue);
   };
 
   return (

dashboard/src/components/plugins/editor-components/viz-config-banner.tsx

@@ -1,5 +1,7 @@
 import { ActionIcon, Group, Text } from '@mantine/core';
 import { IconDeviceFloppy } from '@tabler/icons-react';
+import React, { memo } from 'react';
+import { Control, useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 type Props = {
@@ -18,3 +20,13 @@ export function VizConfigBanner({ canSubmit, buttonRef }: Props) {
     </Group>
   );
 }
+
+type FormVizConfigBannerProps = {
+  control: Control<$TSFixMe>;
+  buttonRef?: React.RefObject<HTMLButtonElement>;
+};
+
+export const FormVizConfigBanner = memo(({ control, buttonRef }: FormVizConfigBannerProps) => {
+  const { isDirty, isValid } = useFormState({ control });
+  return <VizConfigBanner canSubmit={isDirty && isValid} buttonRef={buttonRef} />;
+});