Skip to content

Commit c800fa4

Browse files
scottsutscottsut
authored
Merge pull request #1128 from Cuiyansong/master
Support Bar Chart Drill
2 parents dbdc241 + 0d53b5d commit c800fa4

File tree

53 files changed

+1760
-412
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1760
-412
lines changed

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/**
2+
* Datart
3+
*
4+
* Copyright 2021
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
import { Dropdown, Menu } from 'antd';
20+
import useI18NPrefix from 'app/hooks/useI18NPrefix';
21+
import { DrillMode } from 'app/models/ChartDrillOption';
22+
import ChartDrillContext from 'app/pages/ChartWorkbenchPage/contexts/ChartDrillContext';
23+
import { FC, memo, useContext, useMemo } from 'react';
24+
import styled from 'styled-components/macro';
25+
26+
const ChartDrillContextMenu: FC<{}> = memo(({ children }) => {
27+
const t = useI18NPrefix(`viz.palette.drill`);
28+
const { drillOption, onDrillOptionChange } = useContext(ChartDrillContext);
29+
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);
42+
}
43+
} else if (key === 'disable') {
44+
if (drillOption?.isSelectedDrill) {
45+
drillOption?.toggleSelectedDrill(false);
46+
onDrillOptionChange?.(drillOption);
47+
}
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}
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')}
83+
</Menu.Item>
84+
</Menu.SubMenu>
85+
</Menu>
86+
);
87+
}, [drillOption, t, onDrillOptionChange]);
88+
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+
});
103+
104+
export default ChartDrillContextMenu;
105+
106+
const StyledChartDrill = styled.div`
107+
position: relative;
108+
width: 100%;
109+
`;

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/**
2+
* Datart
3+
*
4+
* Copyright 2021
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
import { Breadcrumb } from 'antd';
20+
import { DrillMode } from 'app/models/ChartDrillOption';
21+
import ChartDrillContext from 'app/pages/ChartWorkbenchPage/contexts/ChartDrillContext';
22+
import { getColumnRenderName } from 'app/utils/chartHelper';
23+
import { FC, memo, useContext } from 'react';
24+
import styled from 'styled-components/macro';
25+
import { SPACE_TIMES } from 'styles/StyleConstants';
26+
27+
const ChartDrillPaths: FC<{}> = memo(() => {
28+
const { drillOption, onDrillOptionChange } = useContext(ChartDrillContext);
29+
30+
if (!drillOption || drillOption.mode === DrillMode.Normal) {
31+
return <div></div>;
32+
}
33+
34+
const drilledFields = drillOption.getDrilledFields();
35+
return (
36+
<StyledChartDrillPaths className="chart-drill-path">
37+
<Breadcrumb>
38+
{drilledFields.map(f => {
39+
return (
40+
<StyledDrillNode
41+
isActive={Boolean(
42+
drillOption?.getCurrentFields()?.some(df => df.uid === f.uid),
43+
)}
44+
onClick={() => {
45+
if (drillOption.mode === DrillMode.Drill) {
46+
drillOption.drillUp(f);
47+
} else if (drillOption.mode === DrillMode.Expand) {
48+
drillOption.expandUp(f);
49+
}
50+
onDrillOptionChange?.(drillOption);
51+
}}
52+
>
53+
{getColumnRenderName(f)}
54+
</StyledDrillNode>
55+
);
56+
})}
57+
</Breadcrumb>
58+
</StyledChartDrillPaths>
59+
);
60+
});
61+
62+
export default ChartDrillPaths;
63+
64+
const StyledChartDrillPaths = styled.div`
65+
padding-left: ${SPACE_TIMES(2)};
66+
`;
67+
68+
const StyledDrillNode = styled(Breadcrumb.Item)<{ isActive: boolean }>`
69+
cursor: pointer;
70+
user-select: none;
71+
color: ${p => (p.isActive ? p.theme.primary : p.theme.normal)} !important;
72+
`;

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/**
2+
* Datart
3+
*
4+
* Copyright 2021
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
import { ArrowDownOutlined } from '@ant-design/icons';
20+
import ChartDrillContext from 'app/pages/ChartWorkbenchPage/contexts/ChartDrillContext';
21+
import classnames from 'classnames';
22+
import { FC, memo, useContext } from 'react';
23+
import styled from 'styled-components/macro';
24+
import { FONT_SIZE_HEADING } from 'styles/StyleConstants';
25+
import { IW } from '../IconWrapper';
26+
27+
const ChartSelectedDrill: FC<{ fontSize?: string /** eg. 32px */ }> = memo(
28+
({ fontSize }) => {
29+
const { drillOption, onDrillOptionChange } = useContext(ChartDrillContext);
30+
31+
return (
32+
<StyledChartSelectedDrill
33+
visibility={Boolean(drillOption?.canSelect)}
34+
fontSize={fontSize || FONT_SIZE_HEADING}
35+
className={classnames({
36+
active: drillOption?.isSelectedDrill,
37+
})}
38+
onClick={() => {
39+
if (drillOption) {
40+
drillOption?.toggleSelectedDrill();
41+
onDrillOptionChange?.(drillOption);
42+
}
43+
}}
44+
>
45+
<ArrowDownOutlined />
46+
</StyledChartSelectedDrill>
47+
);
48+
},
49+
);
50+
51+
export default ChartSelectedDrill;
52+
53+
const StyledChartSelectedDrill = styled(IW)<{ visibility: boolean }>`
54+
visibility: ${p => (p.visibility ? 'visible' : 'hidden')};
55+
color: ${p => p.theme.textColorLight};
56+
cursor: pointer;
57+
58+
&.active {
59+
color: ${p => p.theme.primary};
60+
}
61+
`;

0 commit comments

Comments
 (0)