[Discover] Improve styling of graphs in sidebar (#69440)
This commit is contained in:
parent
938733e862
commit
59925daff5
|
@ -0,0 +1,4 @@
|
||||||
|
.dscFieldDetails__barContainer {
|
||||||
|
// Constrains value to the flex item, and allows for truncation when necessary
|
||||||
|
min-width: 0;
|
||||||
|
}
|
|
@ -17,11 +17,12 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
|
import { EuiText, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import { StringFieldProgressBar } from './string_progress_bar';
|
import { StringFieldProgressBar } from './string_progress_bar';
|
||||||
import { Bucket } from './types';
|
import { Bucket } from './types';
|
||||||
import { IndexPatternField } from '../../../../../data/public';
|
import { IndexPatternField } from '../../../../../data/public';
|
||||||
|
import './discover_field_bucket.scss';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
bucket: Bucket;
|
bucket: Bucket;
|
||||||
|
@ -47,18 +48,40 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<EuiFlexGroup gutterSize="xs" responsive={false}>
|
<EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="s">
|
||||||
<EuiFlexItem className="eui-textTruncate">
|
<EuiFlexItem className="dscFieldDetails__barContainer" grow={1}>
|
||||||
<EuiText size="xs" className="eui-textTruncate">
|
<EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
|
||||||
{bucket.display === '' ? emptyTxt : bucket.display}
|
<EuiFlexItem grow={1} className="eui-textTruncate">
|
||||||
</EuiText>
|
<EuiText
|
||||||
|
title={
|
||||||
|
bucket.display === ''
|
||||||
|
? emptyTxt
|
||||||
|
: `${bucket.display}: ${bucket.count} (${bucket.percent}%)`
|
||||||
|
}
|
||||||
|
size="xs"
|
||||||
|
className="eui-textTruncate"
|
||||||
|
>
|
||||||
|
{bucket.display === '' ? emptyTxt : bucket.display}
|
||||||
|
</EuiText>
|
||||||
|
</EuiFlexItem>
|
||||||
|
<EuiFlexItem grow={false} className="eui-textTruncate">
|
||||||
|
<EuiText color="secondary" size="xs" className="eui-textTruncate">
|
||||||
|
{bucket.percent}%
|
||||||
|
</EuiText>
|
||||||
|
</EuiFlexItem>
|
||||||
|
</EuiFlexGroup>
|
||||||
|
<StringFieldProgressBar
|
||||||
|
value={bucket.value}
|
||||||
|
percent={bucket.percent}
|
||||||
|
count={bucket.count}
|
||||||
|
/>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
{field.filterable && (
|
{field.filterable && (
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexItem grow={false}>
|
||||||
<div>
|
<div>
|
||||||
<EuiButtonIcon
|
<EuiButtonIcon
|
||||||
iconSize="s"
|
iconSize="s"
|
||||||
iconType="magnifyWithPlus"
|
iconType="plusInCircle"
|
||||||
onClick={() => onAddFilter(field, bucket.value, '+')}
|
onClick={() => onAddFilter(field, bucket.value, '+')}
|
||||||
aria-label={addLabel}
|
aria-label={addLabel}
|
||||||
data-test-subj={`plus-${field.name}-${bucket.value}`}
|
data-test-subj={`plus-${field.name}-${bucket.value}`}
|
||||||
|
@ -73,7 +96,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
|
||||||
/>
|
/>
|
||||||
<EuiButtonIcon
|
<EuiButtonIcon
|
||||||
iconSize="s"
|
iconSize="s"
|
||||||
iconType="magnifyWithMinus"
|
iconType="minusInCircle"
|
||||||
onClick={() => onAddFilter(field, bucket.value, '-')}
|
onClick={() => onAddFilter(field, bucket.value, '-')}
|
||||||
aria-label={removeLabel}
|
aria-label={removeLabel}
|
||||||
data-test-subj={`minus-${field.name}-${bucket.value}`}
|
data-test-subj={`minus-${field.name}-${bucket.value}`}
|
||||||
|
@ -90,7 +113,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
)}
|
)}
|
||||||
</EuiFlexGroup>
|
</EuiFlexGroup>
|
||||||
<StringFieldProgressBar percent={bucket.percent} count={bucket.count} />
|
<EuiSpacer size="s" />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { EuiLink, EuiSpacer, EuiIconTip, EuiText } from '@elastic/eui';
|
import { EuiLink, EuiIconTip, EuiText } from '@elastic/eui';
|
||||||
import { FormattedMessage } from '@kbn/i18n/react';
|
import { FormattedMessage } from '@kbn/i18n/react';
|
||||||
import { DiscoverFieldBucket } from './discover_field_bucket';
|
import { DiscoverFieldBucket } from './discover_field_bucket';
|
||||||
import { getWarnings } from './lib/get_warnings';
|
import { getWarnings } from './lib/get_warnings';
|
||||||
|
@ -78,7 +78,6 @@ export function DiscoverFieldDetails({
|
||||||
|
|
||||||
{details.visualizeUrl && (
|
{details.visualizeUrl && (
|
||||||
<>
|
<>
|
||||||
<EuiSpacer size={'s'} />
|
|
||||||
<EuiLink
|
<EuiLink
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
getServices().core.application.navigateToApp(details.visualizeUrl.app, {
|
getServices().core.application.navigateToApp(details.visualizeUrl.app, {
|
||||||
|
|
|
@ -121,14 +121,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
Fixes EUI known issue https://github.com/elastic/eui/issues/1749
|
|
||||||
*/
|
|
||||||
.dscProgressBarTooltip__anchor {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.dscFieldSearch {
|
.dscFieldSearch {
|
||||||
padding: $euiSizeS;
|
padding: $euiSizeS;
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,35 +17,18 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiText, EuiToolTip } from '@elastic/eui';
|
import { EuiProgress } from '@elastic/eui';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
percent: number;
|
percent: number;
|
||||||
count: number;
|
count: number;
|
||||||
|
value: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function StringFieldProgressBar(props: Props) {
|
export function StringFieldProgressBar({ value, percent, count }: Props) {
|
||||||
|
const ariaLabel = `${value}: ${count} (${percent}%)`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EuiToolTip
|
<EuiProgress value={percent} max={100} color="secondary" aria-label={ariaLabel} size="s" />
|
||||||
anchorClassName="dscProgressBarTooltip__anchor"
|
|
||||||
content={props.count}
|
|
||||||
delay="regular"
|
|
||||||
position="right"
|
|
||||||
>
|
|
||||||
<EuiFlexGroup alignItems="center" responsive={false}>
|
|
||||||
<EuiFlexItem>
|
|
||||||
<EuiProgress
|
|
||||||
value={props.percent}
|
|
||||||
max={100}
|
|
||||||
color="secondary"
|
|
||||||
aria-hidden={true}
|
|
||||||
size="l"
|
|
||||||
/>
|
|
||||||
</EuiFlexItem>
|
|
||||||
<EuiFlexItem grow={false}>
|
|
||||||
<EuiText size="xs">{props.percent}%</EuiText>
|
|
||||||
</EuiFlexItem>
|
|
||||||
</EuiFlexGroup>
|
|
||||||
</EuiToolTip>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue