[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.
|
||||
*/
|
||||
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 { StringFieldProgressBar } from './string_progress_bar';
|
||||
import { Bucket } from './types';
|
||||
import { IndexPatternField } from '../../../../../data/public';
|
||||
import './discover_field_bucket.scss';
|
||||
|
||||
interface Props {
|
||||
bucket: Bucket;
|
||||
|
@ -47,18 +48,40 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<EuiFlexGroup gutterSize="xs" responsive={false}>
|
||||
<EuiFlexItem className="eui-textTruncate">
|
||||
<EuiText size="xs" className="eui-textTruncate">
|
||||
{bucket.display === '' ? emptyTxt : bucket.display}
|
||||
</EuiText>
|
||||
<EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="s">
|
||||
<EuiFlexItem className="dscFieldDetails__barContainer" grow={1}>
|
||||
<EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
|
||||
<EuiFlexItem grow={1} className="eui-textTruncate">
|
||||
<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>
|
||||
{field.filterable && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<div>
|
||||
<EuiButtonIcon
|
||||
iconSize="s"
|
||||
iconType="magnifyWithPlus"
|
||||
iconType="plusInCircle"
|
||||
onClick={() => onAddFilter(field, bucket.value, '+')}
|
||||
aria-label={addLabel}
|
||||
data-test-subj={`plus-${field.name}-${bucket.value}`}
|
||||
|
@ -73,7 +96,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
|
|||
/>
|
||||
<EuiButtonIcon
|
||||
iconSize="s"
|
||||
iconType="magnifyWithMinus"
|
||||
iconType="minusInCircle"
|
||||
onClick={() => onAddFilter(field, bucket.value, '-')}
|
||||
aria-label={removeLabel}
|
||||
data-test-subj={`minus-${field.name}-${bucket.value}`}
|
||||
|
@ -90,7 +113,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
|
|||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
<StringFieldProgressBar percent={bucket.percent} count={bucket.count} />
|
||||
<EuiSpacer size="s" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
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 { DiscoverFieldBucket } from './discover_field_bucket';
|
||||
import { getWarnings } from './lib/get_warnings';
|
||||
|
@ -78,7 +78,6 @@ export function DiscoverFieldDetails({
|
|||
|
||||
{details.visualizeUrl && (
|
||||
<>
|
||||
<EuiSpacer size={'s'} />
|
||||
<EuiLink
|
||||
onClick={() => {
|
||||
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 {
|
||||
padding: $euiSizeS;
|
||||
}
|
||||
|
|
|
@ -17,35 +17,18 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiText, EuiToolTip } from '@elastic/eui';
|
||||
import { EuiProgress } from '@elastic/eui';
|
||||
|
||||
interface Props {
|
||||
percent: number;
|
||||
count: number;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export function StringFieldProgressBar(props: Props) {
|
||||
export function StringFieldProgressBar({ value, percent, count }: Props) {
|
||||
const ariaLabel = `${value}: ${count} (${percent}%)`;
|
||||
|
||||
return (
|
||||
<EuiToolTip
|
||||
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>
|
||||
<EuiProgress value={percent} max={100} color="secondary" aria-label={ariaLabel} size="s" />
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue