This is an automated email from the ASF dual-hosted git repository. villebro pushed a commit to branch 1.0 in repository https://gitbox.apache.org/repos/asf/superset.git
commit 3ccb23c4a3295c36c7d49344ee25649987e8cf9f Author: Yongjie Zhao <[email protected]> AuthorDate: Mon Jan 25 15:58:15 2021 +0800 chore(explore): added tooltips to timepicker (#12580) * wip * wip * fix lint * fix: tooltip cosmetic * wip * add license --- .../DateFilterControl/frame/AdvancedFrame.tsx | 8 +- .../frame/DateFunctionTooltip.tsx | 147 +++++++++++++++++++++ 2 files changed, 154 insertions(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/AdvancedFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/AdvancedFrame.tsx index 39a695c..e8fe028 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/AdvancedFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/AdvancedFrame.tsx @@ -21,6 +21,7 @@ import { t } from '@superset-ui/core'; import { SEPARATOR } from 'src/explore/dateFilterUtils'; import { Input } from 'src/common/components'; import { FrameComponentProps } from '../types'; +import DateFunctionTooltip from './DateFunctionTooltip'; export function AdvancedFrame(props: FrameComponentProps) { const [since, until] = getAdvancedRange(props.value || '').split(SEPARATOR); @@ -48,7 +49,12 @@ export function AdvancedFrame(props: FrameComponentProps) { return ( <> - <div className="section-title">{t('Configure advanced time range')}</div> + <div className="section-title"> + {t('Configure Advanced Time Range ')} + <DateFunctionTooltip placement="rightBottom"> + <i className="fa fa-info-circle text-muted" /> + </DateFunctionTooltip> + </div> <div className="control-label">{t('START')}</div> <Input key="since" diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/DateFunctionTooltip.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/DateFunctionTooltip.tsx new file mode 100644 index 0000000..622d69d --- /dev/null +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/DateFunctionTooltip.tsx @@ -0,0 +1,147 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React from 'react'; +import { useTheme, t } from '@superset-ui/core'; + +import { Tooltip } from 'src/common/components/Tooltip'; +import { ClassNames } from '@emotion/core'; + +const TIME_PICKER_HELPER = ( + <> + <div> + <h3>DATETIME</h3> + <p>{t('Return to specific datetime.')}</p> + <h4>{t('Syntax')}</h4> + <pre> + <code>datetime([string])</code> + </pre> + <h4>{t('Example')}</h4> + <pre> + <code>{`datetime("2020-03-01 12:00:00") +datetime("now") +datetime("last year")`}</code> + </pre> + </div> + <div> + <h3>DATEADD</h3> + <p>{t('Moves the given set of dates by a specified interval.')}</p> + <h4>{t('Syntax')}</h4> + <pre> + <code>{`dateadd([datetime], [integer], [dateunit]) +dateunit = (year | quarter | month | week | day | hour | minute | second)`}</code> + </pre> + <h4>{t('Example')}</h4> + <pre> + <code>{`dateadd(datetime("today"), -13, day) +dateadd(datetime("2020-03-01"), 2, day)`}</code> + </pre> + </div> + <div> + <h3>DATETRUNC</h3> + <p> + {t( + 'Truncates the specified date to the accuracy specified by the date unit.', + )} + </p> + <h4>{t('Syntax')}</h4> + <pre> + <code>{`datetrunc([datetime], [dateunit]) +dateunit = (year | month | week)`}</code> + </pre> + <h4>{t('Example')}</h4> + <pre> + <code>{`datetrunc(datetime("2020-03-01"), week) +datetrunc(datetime("2020-03-01"), month)`}</code> + </pre> + </div> + <div> + <h3>LASTDAY</h3> + <p>{t('Get the last date by the date unit.')}</p> + <h4>{t('Syntax')}</h4> + <pre> + <code>{`lastday([datetime], [dateunit]) +dateunit = (year | month | week)`}</code> + </pre> + <h4>{t('Example')}</h4> + <pre> + <code>lastday(datetime("today"), month)</code> + </pre> + </div> + <div> + <h3>HOLIDAY</h3> + <p>{t('Get the specify date for the holiday')}</p> + <h4>{t('Syntax')}</h4> + <pre> + <code>{`holiday([string]) +holiday([holiday string], [datetime]) +holiday([holiday string], [datetime], [country name])`}</code> + </pre> + <h4>{t('Example')}</h4> + <pre> + <code>{`holiday("new year") +holiday("christmas", datetime("2019")) +holiday("christmas", dateadd(datetime("2019"), 1, year)) +holiday("christmas", datetime("2 years ago")) +holiday("Easter Monday", datetime("2019"), "UK")`}</code> + </pre> + </div> + </> +); + +const StyledTooltip = (props: any) => { + const theme = useTheme(); + return ( + <ClassNames> + {({ css }) => ( + <Tooltip + overlayClassName={css` + .ant-tooltip-content { + min-width: ${theme.gridUnit * 125}px; + max-height: 410px; + overflow-y: scroll; + + .ant-tooltip-inner { + max-width: ${theme.gridUnit * 125}px; + h3 { + font-size: ${theme.typography.sizes.m}px; + font-weight: ${theme.typography.weights.bold}; + } + h4 { + font-size: ${theme.typography.sizes.m}px; + font-weight: ${theme.typography.weights.bold}; + } + pre { + border: none; + text-align: left; + word-break: break-word; + font-size: ${theme.typography.sizes.s}px; + } + } + } + `} + {...props} + /> + )} + </ClassNames> + ); +}; + +export default function DateFunctionTooltip(props: any) { + return <StyledTooltip title={TIME_PICKER_HELPER} {...props} />; +}
