Skip to content

Commit a2cf535

Browse files
SoarBlueSkySoarBlueSky
committed
feat: Date aggregation can be selected in the drop-down menu, right-click to add a shortcut key to select date aggregation
1 parent e23f95e commit a2cf535

File tree

38 files changed

+861
-188
lines changed

38 files changed

+861
-188
lines changed

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

Lines changed: 159 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -17,89 +17,178 @@
1717
*/
1818

1919
import { Dropdown, Menu } from 'antd';
20+
import {
21+
ChartDataSectionType,
22+
ChartDataViewFieldCategory,
23+
interimDateAggregatedKey,
24+
} from 'app/constants';
2025
import useI18NPrefix from 'app/hooks/useI18NPrefix';
2126
import { DrillMode } from 'app/models/ChartDrillOption';
27+
import DateMeunItem from 'app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartFieldAction/DateAggregationAction/DateMeunItem';
2228
import ChartDrillContext from 'app/pages/ChartWorkbenchPage/contexts/ChartDrillContext';
23-
import { FC, memo, useContext, useMemo } from 'react';
29+
import { ChartConfig, ChartDataSectionField } from 'app/types/ChartConfig';
30+
import { getInterimDateAggregateRows } from 'app/utils/chartHelper';
31+
import { updateBy } from 'app/utils/mutation';
32+
import { FC, memo, useCallback, useContext, useMemo } from 'react';
2433
import styled from 'styled-components/macro';
2534

26-
const ChartDrillContextMenu: FC<{}> = memo(({ children }) => {
27-
const t = useI18NPrefix(`viz.palette.drill`);
28-
const { drillOption, onDrillOptionChange } = useContext(ChartDrillContext);
35+
const ChartDrillContextMenu: FC<{ chartConfig?: ChartConfig }> = memo(
36+
({ children, chartConfig }) => {
37+
const t = useI18NPrefix(`viz.palette.drill`);
38+
const {
39+
drillOption,
40+
onDrillOptionChange,
41+
sourceSupportDateField,
42+
onChartDrillDataAggregationChange,
43+
} = useContext(ChartDrillContext);
44+
const currentFields = drillOption?.getCurrentFields();
2945

30-
const contextMenu = useMemo(() => {
31-
return (
32-
<Menu
33-
style={{ width: 200 }}
34-
onClick={({ key }) => {
35-
if (!drillOption) {
36-
return;
37-
}
38-
if (key === 'enable') {
39-
if (!drillOption?.isSelectedDrill) {
40-
drillOption?.toggleSelectedDrill(true);
41-
onDrillOptionChange?.(drillOption);
46+
const currentDrillField = useMemo(() => {
47+
if (!drillOption) {
48+
return;
49+
}
50+
const allFields = drillOption.getAllFields();
51+
const groupSection = chartConfig?.datas?.find(
52+
v => v.type === ChartDataSectionType.GROUP,
53+
);
54+
let rows: ChartDataSectionField[] | undefined = [];
55+
56+
if (currentFields) {
57+
rows = groupSection?.rows?.filter(v =>
58+
currentFields.some(val => val.uid === v.uid),
59+
);
60+
} else {
61+
rows = groupSection?.rows?.filter(v => v.uid === allFields[0].uid);
62+
}
63+
return getInterimDateAggregateRows(rows);
64+
}, [currentFields, drillOption, chartConfig?.datas]);
65+
66+
const handleChangeDataAggregate = useCallback(
67+
(config: ChartDataSectionField) => {
68+
const groupData = chartConfig?.datas?.find(v => v.type === 'group');
69+
70+
if (groupData) {
71+
const _groupData = updateBy(groupData, draft => {
72+
if (draft.rows) {
73+
const index = draft.rows.findIndex(v => v.uid === config.uid);
74+
const interimDateAggregatedValue =
75+
draft.rows[index][interimDateAggregatedKey];
76+
const deleteColName = interimDateAggregatedValue
77+
? interimDateAggregatedValue.colName
78+
: draft.rows[index].colName;
79+
80+
draft.rows[index][interimDateAggregatedKey] = config;
81+
draft.deleteColName = deleteColName;
82+
}
83+
});
84+
85+
onChartDrillDataAggregationChange?.('data', {
86+
needRefresh: true,
87+
ancestors: [0],
88+
value: _groupData,
89+
});
90+
}
91+
},
92+
[chartConfig?.datas, onChartDrillDataAggregationChange],
93+
);
94+
95+
const contextMenu = useMemo(() => {
96+
return (
97+
<Menu
98+
style={{ width: 200 }}
99+
onClick={({ key, keyPath }) => {
100+
if (!drillOption) {
101+
return;
42102
}
43-
} else if (key === 'disable') {
44-
if (drillOption?.isSelectedDrill) {
45-
drillOption?.toggleSelectedDrill(false);
103+
if (key === 'enable') {
104+
if (!drillOption?.isSelectedDrill) {
105+
drillOption?.toggleSelectedDrill(true);
106+
onDrillOptionChange?.(drillOption);
107+
}
108+
} else if (key === 'disable') {
109+
if (drillOption?.isSelectedDrill) {
110+
drillOption?.toggleSelectedDrill(false);
111+
onDrillOptionChange?.(drillOption);
112+
}
113+
} else if (key === DrillMode.Drill) {
114+
drillOption?.drillDown();
115+
onDrillOptionChange?.(drillOption);
116+
} else if (key === DrillMode.Expand) {
117+
drillOption?.expandDown();
118+
onDrillOptionChange?.(drillOption);
119+
} else if (key === 'rollUp') {
120+
drillOption?.rollUp();
46121
onDrillOptionChange?.(drillOption);
47122
}
48-
} else if (key === DrillMode.Drill) {
49-
drillOption?.drillDown();
50-
onDrillOptionChange?.(drillOption);
51-
} else if (key === DrillMode.Expand) {
52-
drillOption?.expandDown();
53-
onDrillOptionChange?.(drillOption);
54-
} else {
55-
drillOption?.rollUp();
56-
onDrillOptionChange?.(drillOption);
57-
}
58-
}}
59-
>
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}
123+
}}
70124
>
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')}
125+
<Menu.Item key={'rollUp'}>{t('rollUp')}</Menu.Item>
126+
<Menu.Item
127+
disabled={drillOption?.mode === DrillMode.Expand}
128+
key={DrillMode.Drill}
129+
>
130+
{t('showNextLevel')}
80131
</Menu.Item>
81-
<Menu.Item key="disable" disabled={!drillOption?.isSelectedDrill}>
82-
{t('disable')}
132+
<Menu.Item
133+
disabled={drillOption?.mode === DrillMode.Drill}
134+
key={DrillMode.Expand}
135+
>
136+
{t('expandNextLevel')}
83137
</Menu.Item>
84-
</Menu.SubMenu>
85-
</Menu>
86-
);
87-
}, [drillOption, t, onDrillOptionChange]);
138+
<Menu.SubMenu
139+
disabled={drillOption?.mode === DrillMode.Expand}
140+
key="selectDrillStatus"
141+
title={t('selectDrillStatus')}
142+
>
143+
<Menu.Item key="enable" disabled={drillOption?.isSelectedDrill}>
144+
{t('enable')}
145+
</Menu.Item>
146+
<Menu.Item key="disable" disabled={!drillOption?.isSelectedDrill}>
147+
{t('disable')}
148+
</Menu.Item>
149+
</Menu.SubMenu>
150+
{currentDrillField?.map((v, i) => {
151+
if (
152+
v.category === ChartDataViewFieldCategory.DateAggregationField
153+
) {
154+
return (
155+
<Menu.SubMenu key={i} title={v.colName}>
156+
<DateMeunItem
157+
sourceSupportDateField={sourceSupportDateField}
158+
config={v[interimDateAggregatedKey] || v}
159+
onChange={config => handleChangeDataAggregate(config)}
160+
/>
161+
</Menu.SubMenu>
162+
);
163+
}
164+
return false;
165+
})}
166+
</Menu>
167+
);
168+
}, [
169+
drillOption,
170+
t,
171+
onDrillOptionChange,
172+
currentDrillField,
173+
sourceSupportDateField,
174+
handleChangeDataAggregate,
175+
]);
88176

89-
return (
90-
<StyledChartDrill className="chart-drill-menu-container">
91-
<Dropdown
92-
disabled={!drillOption}
93-
overlay={contextMenu}
94-
destroyPopupOnHide={true}
95-
trigger={['contextMenu']}
96-
getPopupContainer={triggerNode => triggerNode}
97-
>
98-
<div style={{ height: '100%' }}>{children}</div>
99-
</Dropdown>
100-
</StyledChartDrill>
101-
);
102-
});
177+
return (
178+
<StyledChartDrill className="chart-drill-menu-container">
179+
<Dropdown
180+
disabled={!drillOption}
181+
overlay={contextMenu}
182+
destroyPopupOnHide={true}
183+
trigger={['contextMenu']}
184+
getPopupContainer={triggerNode => triggerNode}
185+
>
186+
<div style={{ height: '100%' }}>{children}</div>
187+
</Dropdown>
188+
</StyledChartDrill>
189+
);
190+
},
191+
);
103192

104193
export default ChartDrillContextMenu;
105194

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const StyledChartDrillPaths = styled.div`
6666
`;
6767

6868
const StyledDrillNode = styled(Breadcrumb.Item)<{ isActive: boolean }>`
69+
color: ${p => (p.isActive ? p.theme.primary : p.theme.normal)} !important;
6970
cursor: pointer;
7071
user-select: none;
71-
color: ${p => (p.isActive ? p.theme.primary : p.theme.normal)} !important;
7272
`;

0 commit comments

Comments
 (0)