You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by vi...@apache.org on 2021/01/25 13:11:57 UTC
[superset] 21/38: chore(explore): added tooltips to timepicker
(#12580)
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 <yo...@gmail.com>
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} />;
+}