pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(explore): add tooltip to timepicker label (#12401)

This commit is contained in:
Yongjie Zhao 2021-01-11 13:52:02 +08:00 committed by GitHub
parent c327cb911e
commit 23263da9f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
View File

@ -37,6 +37,7 @@ import Popover from 'src/common/components/Popover';
import { Divider } from 'src/common/components'; import { Divider } from 'src/common/components';
import Icon from 'src/components/Icon'; import Icon from 'src/components/Icon';
import { Select } from 'src/components/Select'; import { Select } from 'src/components/Select';
import { Tooltip } from 'src/common/components/Tooltip';
import { SelectOptionType, FrameType } from './types'; import { SelectOptionType, FrameType } from './types';
import { import {
COMMON_RANGE_VALUES_SET, COMMON_RANGE_VALUES_SET,
@ -181,27 +182,41 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
const [timeRangeValue, setTimeRangeValue] = useState(value); const [timeRangeValue, setTimeRangeValue] = useState(value);
const [validTimeRange, setValidTimeRange] = useState<boolean>(false); const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
const [evalResponse, setEvalResponse] = useState<string>(value); const [evalResponse, setEvalResponse] = useState<string>(value);
const [tooltipTitle, setTooltipTitle] = useState<string>(value);
useEffect(() => { useEffect(() => {
const valueToLower = value.toLowerCase(); fetchTimeRange(value, endpoints).then(({ value: actualRange, error }) => {
if ( if (error) {
valueToLower.startsWith('last') || setEvalResponse(error || '');
valueToLower.startsWith('next') || setValidTimeRange(false);
valueToLower.startsWith('previous') setTooltipTitle(value || '');
) { } else {
setActualTimeRange(value); /*
setValidTimeRange(true); HRT == human readable text
} else { ADR == actual datetime range
fetchTimeRange(value, endpoints).then(({ value, error }) => { +--------------+------+----------+--------+----------+-----------+
if (error) { | | Last | Previous | Custom | Advanced | No Filter |
setEvalResponse(error || ''); +--------------+------+----------+--------+----------+-----------+
setValidTimeRange(false); | control pill | HRT | HRT | ADR | ADR | ADR |
+--------------+------+----------+--------+----------+-----------+
| tooltip | ADR | ADR | HRT | HRT | HRT |
+--------------+------+----------+--------+----------+-----------+
*/
const valueToLower = value.toLowerCase();
if (
valueToLower.startsWith('last') ||
valueToLower.startsWith('next') ||
valueToLower.startsWith('previous')
) {
setActualTimeRange(value);
setTooltipTitle(actualRange || '');
} else { } else {
setActualTimeRange(value || ''); setActualTimeRange(actualRange || '');
setValidTimeRange(true); setTooltipTitle(value || '');
} }
}); setValidTimeRange(true);
} }
});
}, [value]); }, [value]);
useEffect(() => { useEffect(() => {
@ -327,13 +342,15 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
onVisibleChange={togglePopover} onVisibleChange={togglePopover}
overlayStyle={overlayStyle} overlayStyle={overlayStyle}
> >
<Label <Tooltip placement="top" title={tooltipTitle}>
className="pointer" <Label
data-test="time-range-trigger" className="pointer"
onClick={() => setShow(true)} data-test="time-range-trigger"
> onClick={() => setShow(true)}
{actualTimeRange} >
</Label> {actualTimeRange}
</Label>
</Tooltip>
</StyledPopover> </StyledPopover>
</> </>
); );