From 1f3fb84e9049d01442ea257c6cd133689944bfa2 Mon Sep 17 00:00:00 2001 From: AntoineYANG Date: Thu, 3 Aug 2023 15:28:50 +0800 Subject: [PATCH] feat(menu): common menu items --- .../src/fields/datasetFields/dimFields.tsx | 5 +- .../src/fields/datasetFields/meaFields.tsx | 6 +- .../src/fields/datasetFields/utils.ts | 69 +++++++++++++++++++ .../graphic-walker/src/locales/en-US.json | 5 ++ .../graphic-walker/src/locales/ja-JP.json | 5 ++ .../graphic-walker/src/locales/zh-CN.json | 5 ++ 6 files changed, 92 insertions(+), 3 deletions(-) create mode 100644 packages/graphic-walker/src/fields/datasetFields/utils.ts diff --git a/packages/graphic-walker/src/fields/datasetFields/dimFields.tsx b/packages/graphic-walker/src/fields/datasetFields/dimFields.tsx index 04ba1b9a..a523491b 100644 --- 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,6 +15,7 @@ const DimFields: React.FC = (props) => { const { provided } = props; const { vizStore } = useGlobalStore(); const dimensions = vizStore.draggableFieldState.dimensions; + const menuActions = useMenuActions('dimensions'); return (
{dimensions.map((f, index) => ( @@ -21,7 +23,8 @@ const DimFields: React.FC = (props) => { {(provided, snapshot) => { return ( diff --git a/packages/graphic-walker/src/fields/datasetFields/meaFields.tsx b/packages/graphic-walker/src/fields/datasetFields/meaFields.tsx index 3a1625e8..8b41ff9d 100644 --- 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) => { }, ]; }, []); + 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) => { return (
- (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(() => { + return fields.map((f, index) => { + return keepTrue([ + 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 index 4e4cfb3e..b0379972 100644 --- 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" } } \ No newline at end of file diff --git a/packages/graphic-walker/src/locales/ja-JP.json b/packages/graphic-walker/src/locales/ja-JP.json index 98504681..5277b929 100644 --- 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": "計算フィールドを作成" } } \ No newline at end of file diff --git a/packages/graphic-walker/src/locales/zh-CN.json b/packages/graphic-walker/src/locales/zh-CN.json index b674b580..2b58b656 100644 --- 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": "新的计算字段" } } \ No newline at end of file