Skip to content

Commit a9dc9f6

Browse files
scottsutscottsut
committed
refactor:adjust drill context-menu interaction
1 parent 486f5ec commit a9dc9f6

File tree

6 files changed

+77
-49
lines changed

6 files changed

+77
-49
lines changed

‎frontend/src/app/components/ChartDrill/ChartDrillContextMenu.tsx‎

Lines changed: 63 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,32 @@
1616
* limitations under the License.
1717
*/
1818

19+
import { CheckOutlined } from '@ant-design/icons';
1920
import { Dropdown, Menu } from 'antd';
2021
import useI18NPrefix from 'app/hooks/useI18NPrefix';
2122
import { DrillMode } from 'app/models/ChartDrillOption';
2223
import ChartDrillContext from 'app/pages/ChartWorkbenchPage/contexts/ChartDrillContext';
24+
import classnames from 'classnames';
2325
import { FC, memo, useContext, useMemo } from 'react';
2426
import styled from 'styled-components/macro';
27+
import { FONT_WEIGHT_MEDIUM, SPACE_SM } from 'styles/StyleConstants';
2528

2629
const ChartDrillContextMenu: FC<{}> = memo(({ children }) => {
2730
const t = useI18NPrefix(`viz.palette.drill`);
2831
const { drillOption, onDrillOptionChange } = useContext(ChartDrillContext);
2932

33+
const currentDrillLevel = drillOption?.getCurrentDrillLevel();
34+
3035
const contextMenu = useMemo(() => {
3136
return (
32-
<Menu
33-
style={{ width: 200 }}
37+
<StyledChartDrillMenu
3438
onClick={({ key }) => {
3539
if (!drillOption) {
3640
return;
3741
}
38-
if (key === 'enable') {
39-
if (!drillOption?.isSelectedDrill) {
40-
drillOption?.toggleSelectedDrill(true);
41-
onDrillOptionChange?.(drillOption);
42-
}
43-
} else if (key === 'disable') {
44-
if (drillOption?.isSelectedDrill) {
45-
drillOption?.toggleSelectedDrill(false);
46-
onDrillOptionChange?.(drillOption);
47-
}
42+
if (key === 'selectDrillStatus') {
43+
drillOption?.toggleSelectedDrill(!drillOption?.isSelectedDrill);
44+
onDrillOptionChange?.(drillOption);
4845
} else if (key === DrillMode.Drill) {
4946
drillOption?.drillDown();
5047
onDrillOptionChange?.(drillOption);
@@ -57,34 +54,32 @@ const ChartDrillContextMenu: FC<{}> = memo(({ children }) => {
5754
}
5855
}}
5956
>
60-
<Menu.Item key={'rollUp'}>{t('rollUp')}</Menu.Item>
61-
<Menu.Item
62-
disabled={drillOption?.mode === DrillMode.Expand}
63-
key={DrillMode.Drill}
64-
>
65-
{t('showNextLevel')}
66-
</Menu.Item>
67-
<Menu.Item
68-
disabled={drillOption?.mode === DrillMode.Drill}
69-
key={DrillMode.Expand}
70-
>
71-
{t('expandNextLevel')}
72-
</Menu.Item>
73-
<Menu.SubMenu
74-
disabled={drillOption?.mode === DrillMode.Expand}
75-
key="selectDrillStatus"
76-
title={t('selectDrillStatus')}
77-
>
78-
<Menu.Item key="enable" disabled={drillOption?.isSelectedDrill}>
79-
{t('enable')}
80-
</Menu.Item>
81-
<Menu.Item key="disable" disabled={!drillOption?.isSelectedDrill}>
82-
{t('disable')}
57+
{!!currentDrillLevel && (
58+
<Menu.Item key={'rollUp'}>{t('rollUp')}</Menu.Item>
59+
)}
60+
{drillOption?.mode !== DrillMode.Expand && (
61+
<Menu.Item key={DrillMode.Drill}>{t('showNextLevel')}</Menu.Item>
62+
)}
63+
{drillOption?.mode !== DrillMode.Drill && (
64+
<Menu.Item key={DrillMode.Expand}>{t('expandNextLevel')}</Menu.Item>
65+
)}
66+
{drillOption?.mode !== DrillMode.Expand && (
67+
<Menu.Item key="selectDrillStatus">
68+
<MenuSwitch
69+
className={classnames({ on: !!drillOption?.isSelectedDrill })}
70+
>
71+
<p>
72+
{drillOption?.isSelectedDrill
73+
? t('selectDrillOn')
74+
: t('selectDrillOff')}
75+
</p>
76+
<CheckOutlined className="icon" />
77+
</MenuSwitch>
8378
</Menu.Item>
84-
</Menu.SubMenu>
85-
</Menu>
79+
)}
80+
</StyledChartDrillMenu>
8681
);
87-
}, [drillOption, t, onDrillOptionChange]);
82+
}, [drillOption, currentDrillLevel, t, onDrillOptionChange]);
8883

8984
return (
9085
<StyledChartDrill className="chart-drill-menu-container">
@@ -107,3 +102,33 @@ const StyledChartDrill = styled.div`
107102
position: relative;
108103
width: 100%;
109104
`;
105+
106+
const StyledChartDrillMenu = styled(Menu)`
107+
min-width: 200px;
108+
`;
109+
110+
const MenuSwitch = styled.div`
111+
display: flex;
112+
align-items: center;
113+
114+
p {
115+
flex: 1;
116+
}
117+
118+
.icon {
119+
display: none;
120+
}
121+
122+
&.on {
123+
p {
124+
font-weight: ${FONT_WEIGHT_MEDIUM};
125+
}
126+
127+
.icon {
128+
display: block;
129+
flex-shrink: 0;
130+
padding-left: ${SPACE_SM};
131+
color: ${p => p.theme.success};
132+
}
133+
}
134+
`;

‎frontend/src/app/components/ChartDrill/ChartDrillPaths.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import ChartDrillContext from 'app/pages/ChartWorkbenchPage/contexts/ChartDrillC
2222
import { getColumnRenderName } from 'app/utils/chartHelper';
2323
import { FC, memo, useContext } from 'react';
2424
import styled from 'styled-components/macro';
25-
import { SPACE_TIMES } from 'styles/StyleConstants';
25+
import { SPACE_SM, SPACE_XS } from 'styles/StyleConstants';
2626

2727
const ChartDrillPaths: FC<{}> = memo(() => {
2828
const { drillOption, onDrillOptionChange } = useContext(ChartDrillContext);
@@ -38,6 +38,7 @@ const ChartDrillPaths: FC<{}> = memo(() => {
3838
{drilledFields.map(f => {
3939
return (
4040
<StyledDrillNode
41+
key={f.uid}
4142
isActive={Boolean(
4243
drillOption?.getCurrentFields()?.some(df => df.uid === f.uid),
4344
)}
@@ -62,11 +63,11 @@ const ChartDrillPaths: FC<{}> = memo(() => {
6263
export default ChartDrillPaths;
6364

6465
const StyledChartDrillPaths = styled.div`
65-
padding-left: ${SPACE_TIMES(2)};
66+
padding: ${SPACE_XS} ${SPACE_SM};
6667
`;
6768

6869
const StyledDrillNode = styled(Breadcrumb.Item)<{ isActive: boolean }>`
70+
color: ${p => (p.isActive ? p.theme.primary : p.theme.normal)} !important;
6971
cursor: pointer;
7072
user-select: none;
71-
color: ${p => (p.isActive ? p.theme.primary : p.theme.normal)} !important;
7273
`;

‎frontend/src/app/models/ChartDrillOption.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@ export class ChartDrillOption implements IChartDrillOption {
9494
: this.drillFields.slice(0, this.cursor + 2);
9595
}
9696

97+
public getCurrentDrillLevel(): number {
98+
return this.cursor + 1;
99+
}
100+
97101
public drillDown(filterData?: { [key in string]: any }) {
98102
if (this.drillFields.length === this.cursor + 2) {
99103
return;
@@ -182,7 +186,6 @@ export class ChartDrillOption implements IChartDrillOption {
182186

183187
private clearAll() {
184188
this.cursor = -1;
185-
this.isSelected = false;
186189
this.drillDownFields = [];
187190
this.expandDownFields = [];
188191
}

‎frontend/src/app/types/ChartDrillOption.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export interface IChartDrillOption {
3030
condition?: FilterCondition;
3131
}>;
3232
getCurrentFields(): ChartDataSectionField[] | undefined;
33+
getCurrentDrillLevel(): number;
3334
drillDown(filterData?: { [key in string]: any }): void;
3435
expandDown(): void;
3536
drillUp(field?: ChartDataSectionField): void;

‎frontend/src/locales/en/translation.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -799,10 +799,9 @@
799799
},
800800
"drill": {
801801
"showNextLevel": "Show Next Level",
802-
"expandNextLevel": "Expand Next Level",
803-
"selectDrillStatus": "Mouse Click Drill Status",
804-
"enable": "Enable",
805-
"disable": "Disable",
802+
"expandNextLevel": "Expand to Next Level",
803+
"selectDrillOn": "\"Click to drill down\" is on",
804+
"selectDrillOff": "Turn on \"Click to drill down\"",
806805
"rollUp": "Roll Up"
807806
}
808807
},

‎frontend/src/locales/zh/translation.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -800,9 +800,8 @@
800800
"drill": {
801801
"showNextLevel": "显示下一层级",
802802
"expandNextLevel": "展开下一层级",
803-
"selectDrillStatus": "鼠标点击钻取状态",
804-
"enable": "开启",
805-
"disable": "关闭",
803+
"selectDrillOn": "已开启“点击下钻”",
804+
"selectDrillOff": "开启“点击下钻”",
806805
"rollUp": "上卷"
807806
}
808807
},

0 commit comments

Comments
 (0)