From 307e3a9f653cc0f9c9474a17d14e9371211414df Mon Sep 17 00:00:00 2001 From: Yongjie Zhao Date: Mon, 25 Jan 2021 15:58:15 +0800 Subject: [PATCH] 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(-) create mode 100644 superset-frontend/src/explore/components/controls/DateFilterControl/frame/DateFunctionTooltip.tsx 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 8598b2d7bc..f5ae9446c2 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 advancedRange = getAdvancedRange(props.value || ''); @@ -52,7 +53,12 @@ export function AdvancedFrame(props: FrameComponentProps) { return ( <> -
{t('Configure advanced time range')}
+
+ {t('Configure Advanced Time Range ')} + + + +
{t('START')}
+
+

DATETIME

+

{t('Return to specific datetime.')}

+

{t('Syntax')}

+ 
+        datetime([string])
+
+

{t('Example')}

+ 
+        {`datetime("2020-03-01 12:00:00")
+datetime("now")
+datetime("last year")`}
+
+
+
+

DATEADD

+

{t('Moves the given set of dates by a specified interval.')}

+

{t('Syntax')}

+ 
+        {`dateadd([datetime], [integer], [dateunit])
+dateunit = (year | quarter | month | week | day | hour | minute | second)`}
+
+

{t('Example')}

+ 
+        {`dateadd(datetime("today"), -13, day)
+dateadd(datetime("2020-03-01"), 2, day)`}
+
+
+
+

DATETRUNC

+

+ {t( + 'Truncates the specified date to the accuracy specified by the date unit.', + )} +

+

{t('Syntax')}

+ 
+        {`datetrunc([datetime], [dateunit])
+dateunit = (year | month | week)`}
+
+

{t('Example')}

+ 
+        {`datetrunc(datetime("2020-03-01"), week)
+datetrunc(datetime("2020-03-01"), month)`}
+
+
+
+

LASTDAY

+

{t('Get the last date by the date unit.')}

+

{t('Syntax')}

+ 
+        {`lastday([datetime], [dateunit])
+dateunit = (year | month | week)`}
+
+

{t('Example')}

+ 
+        lastday(datetime("today"), month)
+
+
+
+

HOLIDAY

+

{t('Get the specify date for the holiday')}

+

{t('Syntax')}

+ 
+        {`holiday([string])
+holiday([holiday string], [datetime])
+holiday([holiday string], [datetime], [country name])`}
+
+

{t('Example')}

+ 
+        {`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")`}
+
+
+ +); + +const StyledTooltip = (props: any) => { + const theme = useTheme(); + return ( + + {({ css }) => ( + + )} + + ); +}; + +export default function DateFunctionTooltip(props: any) { + return ; +}