Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add hide/show toggle to chart #6

Merged
merged 5 commits into from
Aug 5, 2020
Merged

Add hide/show toggle to chart #6

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7682282
adding toggle of chart
andreadelrio Jul 21, 2020
2039f1c
fix conflict
andreadelrio Jul 27, 2020
d9c9997
merged from kertal's branch
andreadelrio Jul 28, 2020
e751fd4
clean sass file
andreadelrio Jul 28, 2020
539b1ac
improve dscResultCount in smaller screens
andreadelrio Jul 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 0 additions & 20 deletions src/plugins/discover/public/application/_discover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,29 +94,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;
Expand Down
62 changes: 41 additions & 21 deletions src/plugins/discover/public/application/components/discover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* 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';
Expand All @@ -31,6 +31,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 { EuiFlexItem, EuiFlexGroup, EuiButtonToggle } from '@elastic/eui';

export function Discover({
addColumn,
Expand Down Expand Up @@ -79,6 +80,11 @@ export function Discover({
}
const { TopNavMenu } = getServices().navigation.ui;
const { savedSearch } = opts;
const [toggleOn, setToggleOn] = useState(true);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to move the useState before line 77 to get rid of the warning you mentioned. furthermore I'd suggest to name it a bit more specific, since this component will grow soon. maybe name it toggleChartOn, or a bit more clear what it does: showChart (subjectively)


const onToggleChange = (e) => {
setToggleOn(e.target.checked);
};

return (
<I18nProvider>
Expand Down Expand Up @@ -153,29 +159,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 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}
/>
</EuiFlexItem>
<EuiFlexItem 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"
Expand Down
2 changes: 0 additions & 2 deletions src/plugins/discover/public/application/components/discover_grid/discover_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ div[data-rbd-draggable-id='Time'] {
align-items: start;
}


.dscEuiDataGridRowCellFilter {
display: none;
text-align: right;
Expand Down Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion src/plugins/discover/public/application/components/discover_grid/discover_grid_popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@ export function DiscoverGridPopover({
defaultMessage: 'Filter out {value}',
values: { value: text },
})}
color="danger"
onClick={onNegativeFilterClick}
>
{i18n.translate('discover.grid.filterOut', {
Expand Down