You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ch...@apache.org on 2019/03/13 20:28:20 UTC

[incubator-superset] branch lyftga updated: Show tooltip with time frame (#6979)

This is an automated email from the ASF dual-hosted git repository.

christine pushed a commit to branch lyftga
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/lyftga by this push:
     new e6886fb  Show tooltip with time frame (#6979)
e6886fb is described below

commit e6886fbf1fc4c5656f8df61f829e2b61d3e4ef20
Author: Beto Dealmeida <ro...@dealmeida.net>
AuthorDate: Wed Mar 13 22:28:12 2019 +0200

    Show tooltip with time frame (#6979)
---
 .../components/controls/DateFilterControl.jsx      | 34 ++++++++++++++++------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/superset/assets/src/explore/components/controls/DateFilterControl.jsx b/superset/assets/src/explore/components/controls/DateFilterControl.jsx
index 9e07b99..b068945 100644
--- a/superset/assets/src/explore/components/controls/DateFilterControl.jsx
+++ b/superset/assets/src/explore/components/controls/DateFilterControl.jsx
@@ -32,6 +32,7 @@ import {
   Radio,
   Tab,
   Tabs,
+  Tooltip,
 } from 'react-bootstrap';
 import Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
@@ -311,15 +312,30 @@ export default class DateFilterControl extends React.Component {
         {grain}
       </MenuItem>
       ));
-    const timeFrames = COMMON_TIME_FRAMES.map(timeFrame => (
-      <Radio
-        key={timeFrame.replace(' ', '').toLowerCase()}
-        checked={this.state.common === timeFrame}
-        onChange={() => this.setState(getStateFromCommonTimeFrame(timeFrame))}
-      >
-        {timeFrame}
-      </Radio>
-      ));
+    const timeFrames = COMMON_TIME_FRAMES.map((timeFrame) => {
+      const nextState = getStateFromCommonTimeFrame(timeFrame);
+      return (
+        <OverlayTrigger
+          key={timeFrame}
+          placement="left"
+          overlay={
+            <Tooltip id={`tooltip-${timeFrame}`}>
+              {nextState.since}<br />{nextState.until}
+            </Tooltip>
+          }
+        >
+          <div>
+            <Radio
+              key={timeFrame.replace(' ', '').toLowerCase()}
+              checked={this.state.common === timeFrame}
+              onChange={() => this.setState(nextState)}
+            >
+              {timeFrame}
+            </Radio>
+          </div>
+        </OverlayTrigger>
+      );
+    });
     return (
       <Popover id="filter-popover" placement="top" positionTop={0}>
         <div style={{ width: '250px' }}>