feat(menu): common menu items

Kanaries · Aug 3, 2023 · 1f3fb84 · 1f3fb84
1 parent 6109fa0
commit 1f3fb84
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 3 deletions.
diff --git a/packages/graphic-walker/src/fields/datasetFields/dimFields.tsx b/packages/graphic-walker/src/fields/datasetFields/dimFields.tsx
@@ -6,6 +6,7 @@ import { useGlobalStore } from "../../store";
 import DataTypeIcon from "../../components/dataTypeIcon";
 import ActionMenu from "../../components/actionMenu";
 import { FieldPill } from "./fieldPill";
+import { useMenuActions } from "./utils";
 
 interface Props {
     provided: DroppableProvided;
@@ -14,14 +15,16 @@ const DimFields: React.FC<Props> = (props) => {
     const { provided } = props;
     const { vizStore } = useGlobalStore();
     const dimensions = vizStore.draggableFieldState.dimensions;
+    const menuActions = useMenuActions('dimensions');
     return (
         <div {...provided.droppableProps} ref={provided.innerRef}>
             {dimensions.map((f, index) => (
                 <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
                     {(provided, snapshot) => {
                         return (
                             <ActionMenu
-                                menu={[]}
+                                title={f.name || f.fid}
+                                menu={menuActions[index]}
                                 enableContextMenu
                                 disabled={snapshot.isDragging}
                             >

diff --git a/packages/graphic-walker/src/fields/datasetFields/meaFields.tsx b/packages/graphic-walker/src/fields/datasetFields/meaFields.tsx
@@ -7,6 +7,7 @@ import { FieldPill } from "./fieldPill";
 import DropdownContext, { IDropdownContextOption } from "../../components/dropdownContext";
 import ActionMenu from "../../components/actionMenu";
 import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { useMenuActions } from "./utils";
 
 interface Props {
     provided: DroppableProvided;
@@ -36,6 +37,7 @@ const MeaFields: React.FC<Props> = (props) => {
             },
         ];
     }, []);
+    const menuActions = useMenuActions('measures');
 
     const fieldActionHandler = useCallback((selectedValue: any, opIndex: number, meaIndex: number) => {
         if (selectedValue === "bin" || selectedValue === 'binCount') {
@@ -52,11 +54,11 @@ const MeaFields: React.FC<Props> = (props) => {
                         return (
                             <div className="block">
                                 <ActionMenu
-                                    menu={[]}
+                                    title={f.name || f.fid}
+                                    menu={menuActions[index]}
                                     enableContextMenu
                                     disabled={snapshot.isDragging}
                                 >
-
                                     <DropdownContext
                                         disable={snapshot.isDragging}
                                         options={MEA_ACTION_OPTIONS}

diff --git a/packages/graphic-walker/src/fields/datasetFields/utils.ts b/packages/graphic-walker/src/fields/datasetFields/utils.ts
@@ -0,0 +1,69 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useGlobalStore } from "../../store";
+import type { IActionMenuItem } from "../../components/actionMenu/list";
+import { COUNT_FIELD_ID } from "../../constants";
+
+
+const keepTrue = <T extends string | number | object | Function | symbol>(array: (T | 0 | null | false | undefined | void)[]): T[] => {
+    return array.filter(Boolean) as T[];
+};
+
+export const useMenuActions = (channel: "dimensions" | "measures"): IActionMenuItem[][] => {
+    const { vizStore } = useGlobalStore();
+    const fields = vizStore.draggableFieldState[channel];
+    const { t } = useTranslation('translation', { keyPrefix: "field_menu" });
+
+    return useMemo<IActionMenuItem[][]>(() => {
+        return fields.map((f, index) => {
+            return keepTrue<IActionMenuItem>([
+                channel === 'dimensions' && {
+                    label: t('to_dim'),
+                    onPress() {
+                        vizStore.moveField("dimensions", index, "measures", vizStore.draggableFieldState.measures.length);
+                    },
+                },
+                channel === 'measures' && {
+                    label: t('to_mea'),
+                    disabled: f.fid === COUNT_FIELD_ID,
+                    onPress() {
+                        vizStore.moveField("measures", index, "dimensions", vizStore.draggableFieldState.dimensions.length);
+                    },
+                },
+                {
+                    label: t('new_calc'),
+                    disabled: f.semanticType === 'nominal' || f.semanticType === 'ordinal',
+                    children: [
+                        {
+                            label: "Bin",
+                            onPress() {
+                                vizStore.createBinField(channel, index, "bin");
+                            },
+                        },
+                        {
+                            label: "Bin Count",
+                            disabled: f.semanticType === 'nominal' || f.semanticType === 'ordinal',
+                            onPress() {
+                                vizStore.createBinField(channel, index, "binCount");
+                            },
+                        },
+                        {
+                            label: "Log10",
+                            disabled: f.semanticType === 'nominal' || f.semanticType === 'ordinal',
+                            onPress() {
+                                vizStore.createLogField(channel, index, "log10");
+                            },
+                        },
+                        {
+                            label: "Log2",
+                            disabled: f.semanticType === 'nominal' || f.semanticType === 'ordinal',
+                            onPress() {
+                                vizStore.createLogField(channel, index, "log2");
+                            },
+                        },
+                    ],
+                },
+            ]);
+        });
+    }, [channel, fields, vizStore, t]);
+};
diff --git a/packages/graphic-walker/src/locales/en-US.json b/packages/graphic-walker/src/locales/en-US.json
@@ -211,5 +211,10 @@
         "drop_field": "Drop Field Here",
         "confirm": "Confirm",
         "cancel": "Cancel"
+    },
+    "field_menu": {
+        "to_dim": "Move to dimensions",
+        "to_mea": "Move to measures",
+        "new_calc": "New calculation"
     }
 }
diff --git a/packages/graphic-walker/src/locales/ja-JP.json b/packages/graphic-walker/src/locales/ja-JP.json
@@ -210,5 +210,10 @@
         "drop_field": "ここにフィールドをドロップ",
         "confirm": "確認",
         "cancel": "キャンセル"
+    },
+    "field_menu": {
+        "to_dim": "ディメンションに変更",
+        "to_mea": "メジャーに変更",
+        "new_calc": "計算フィールドを作成"
     }
 }
diff --git a/packages/graphic-walker/src/locales/zh-CN.json b/packages/graphic-walker/src/locales/zh-CN.json
@@ -211,5 +211,10 @@
         "drop_field": "拖拽字段至此",
         "confirm": "确认",
         "cancel": "取消"
+    },
+    "field_menu": {
+        "to_dim": "移动到维度",
+        "to_mea": "移动到度量",
+        "new_calc": "新的计算字段"
     }
 }