Merge pull request #6 from andreadelrio/hide-chart

Add hide/show toggle to chart
andreadelrio · Aug 5, 2020 · 6c8bf2d · 6c8bf2d
2 parents a1151df + 539b1ac
commit 6c8bf2d
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 46 deletions.
diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss
@@ -46,6 +46,7 @@ discover-app {
   flex-direction: column;
   display: flex;
   overflow: hidden;
+  padding-right: $euiSizeS;
 }
 
 .dscHistogram {
@@ -94,29 +95,9 @@ discover-app {
 }
 
 .dscResultCount {
-  display: flex;
-  justify-content: space-between;
   padding: 0 $euiSizeS;
-  flex-grow: 0;
-}
-
-.dscResultCount__title {
-  flex-grow: 0;
-  flex-basis: auto;
 }
 
-.dscResultCount__actions {
-  flex-grow: 0;
-  flex-basis: auto;
-  display: flex;
-  align-items: center;
-
-  > *:not(:first-child) {
-    margin-left: $euiSizeS;
-  }
-}
-
-
 .dscTimechart__header {
   display: flex;
   justify-content: center;

diff --git a/src/plugins/discover/public/application/components/discover.scss b/src/plugins/discover/public/application/components/discover.scss
@@ -0,0 +1,13 @@
+.dscResultCount {
+  @include euiBreakpoint('xs', 's') {
+    .dscResultCount__toggle {
+      align-items: flex-end;
+      margin-top: 0 !important;
+    }
+
+    .dscResuntCount__title,
+    .dscResultCount__actions {
+      margin-bottom: 0 !important;
+    }
+  }
+}
diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx
@@ -16,10 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import moment from 'moment';
 import { EuiResizableContainer } from '@elastic/eui';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { EuiFlexItem, EuiFlexGroup, EuiButtonToggle } from '@elastic/eui';
 import { HitsCounter } from './hits_counter';
 import { DiscoverGrid } from './discover_grid/discover_grid';
 import { TimechartHeader } from './timechart_header';
@@ -31,6 +32,7 @@ import { DiscoverUninitialized } from '../angular/directives/uninitialized';
 import { DiscoverHistogram } from '../angular/directives/histogram';
 import { LoadingSpinner } from './loading_spinner/loading_spinner';
 import { DiscoverFetchError } from './fetch_error/fetch_error';
+import './discover.scss';
 
 export function Discover({
   addColumn,
@@ -68,6 +70,7 @@ export function Discover({
   updateQuery,
   updateSavedQueryId,
 }: any) {
+  const [toggleOn, toggleChart] = useState(true);
   const toMoment = function (datetime: string) {
     if (!datetime) {
       return '';
@@ -80,6 +83,10 @@ export function Discover({
   const { TopNavMenu } = getServices().navigation.ui;
   const { savedSearch } = opts;
 
+  const onToggleChange = (e) => {
+    toggleChart(e.target.checked);
+  };
+
   return (
     <I18nProvider>
       <div className="dscApp" data-fetch-counter={fetchCounter}>
@@ -153,29 +160,43 @@ export function Discover({
                     {resultState === 'ready' && (
                       <div className="dscWrapper__content">
                         <div className="dscResultCount">
-                          <div className="dscResuntCount__title eui-textTruncate eui-textNoWrap">
-                            <HitsCounter
-                              hits={hits > 0 ? hits : 0}
-                              showResetButton={!!(savedSearch && savedSearch.id)}
-                              onResetQuery={resetQuery}
-                            />
-                          </div>
-                          <div className="dscResultCount__actions eui-textTruncate eui-textNoWrap">
-                            <TimechartHeader
-                              from={toMoment(timeRange.from)}
-                              to={toMoment(timeRange.to)}
-                              options={intervalOptions}
-                              onChangeInterval={onChangeInterval}
-                              stateInterval={state.interval}
-                              showScaledInfo={bucketInterval.scaled}
-                              bucketIntervalDescription={bucketInterval.description}
-                              bucketIntervalScale={bucketInterval.scale}
-                            />
-                          </div>
+                          <EuiFlexGroup justifyContent="spaceBetween">
+                            <EuiFlexItem
+                              grow={false}
+                              className="dscResuntCount__title eui-textTruncate eui-textNoWrap"
+                            >
+                              <HitsCounter
+                                hits={hits > 0 ? hits : 0}
+                                showResetButton={!!(savedSearch && savedSearch.id)}
+                                onResetQuery={resetQuery}
+                              />
+                            </EuiFlexItem>
+                            <EuiFlexItem className="dscResultCount__actions">
+                              <TimechartHeader
+                                from={toMoment(timeRange.from)}
+                                to={toMoment(timeRange.to)}
+                                options={intervalOptions}
+                                onChangeInterval={onChangeInterval}
+                                stateInterval={state.interval}
+                                showScaledInfo={bucketInterval.scaled}
+                                bucketIntervalDescription={bucketInterval.description}
+                                bucketIntervalScale={bucketInterval.scale}
+                              />
+                            </EuiFlexItem>
+                            <EuiFlexItem className="dscResultCount__toggle" grow={false}>
+                              <EuiButtonToggle
+                                label={toggleOn ? 'Hide chart' : 'Show chart'}
+                                iconType={toggleOn ? 'eyeClosed' : 'eye'}
+                                onChange={onToggleChange}
+                                isSelected={toggleOn}
+                                isEmpty
+                              />
+                            </EuiFlexItem>
+                          </EuiFlexGroup>
                         </div>
 
                         <div className="dscResults">
-                          {opts.timefield && (
+                          {opts.timefield && toggleOn && (
                             <section
                               aria-label="{{::'discover.histogramOfFoundDocumentsAriaLabel' | i18n: {defaultMessage: 'Histogram of found documents'} }}"
                               className="dscTimechart"

diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid.scss b/src/plugins/discover/public/application/components/discover_grid/discover_grid.scss
@@ -23,7 +23,6 @@ div[data-rbd-draggable-id='Time'] {
   align-items: start;
 }
 
-
 .dscEuiDataGridRowCellFilter {
   display: none;
   text-align: right;
@@ -82,7 +81,6 @@ div[data-rbd-draggable-id='Time'] {
 
 // We only truncate if the cell is not a control column.
 .euiDataGridHeader {
-
   .euiDataGridHeaderCell__content {
     @include euiTextTruncate;
     overflow: hidden;

diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_popover.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_popover.tsx
@@ -66,7 +66,6 @@ export function DiscoverGridPopover({
               defaultMessage: 'Filter out {value}',
               values: { value: text },
             })}
-            color="danger"
             onClick={onNegativeFilterClick}
           >
             {i18n.translate('discover.grid.filterOut', {

diff --git a/src/plugins/discover/public/application/components/timechart_header/timechart_header.scss b/src/plugins/discover/public/application/components/timechart_header/timechart_header.scss
@@ -0,0 +1,3 @@
+.dscTimeIntervalSelect {
+  align-items: center;
+}
diff --git a/src/plugins/discover/public/application/components/timechart_header/timechart_header.tsx b/src/plugins/discover/public/application/components/timechart_header/timechart_header.tsx
@@ -27,6 +27,7 @@ import {
 } from '@elastic/eui';
 import { I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import './timechart_header.scss';
 
 export interface TimechartHeaderProps {
   /**
@@ -94,7 +95,7 @@ export function TimechartHeader({
             })}
             delay="long"
           >
-            <EuiText data-test-subj="discoverIntervalDateRange" size="s">
+            <EuiText data-test-subj="discoverIntervalDateRange" textAlign="center" size="s">
               {`${from} - ${to} ${
                 interval !== 'auto'
                   ? i18n.translate('discover.timechartHeader.timeIntervalSelect.per', {
@@ -105,7 +106,7 @@ export function TimechartHeader({
             </EuiText>
           </EuiToolTip>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem className="dscTimeIntervalSelect" grow={false}>
           <EuiSelect
             aria-label={i18n.translate('discover.timechartHeader.timeIntervalSelect.ariaLabel', {
               defaultMessage: 'Time interval',