github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Make height uniform, center alignment, fix map and keyword map not same size

Browse source 
Move styling
This commit is contained in:
Quynh Nguyen 2021-09-16 12:14:08 -05:00
parent ed496bf282
commit 8fc42e2f2d
14 changed files with 67 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/data_visualizer/public/application/common/components/expanded_row/geo_point_content/geo_point_content.tsx
View file

@ -63,9 +63,7 @@ export const GeoPointContent: FC<FieldDataRowProps> = ({ config }) => {
<ExpandedRowContent dataTestSubj={'dataVisualizerGeoPointContent'}> <ExpandedRowContent dataTestSubj={'dataVisualizerGeoPointContent'}>
<DocumentStatsTable config={config} /> <DocumentStatsTable config={config} />
{formattedResults && Array.isArray(formattedResults.examples) && ( {formattedResults && Array.isArray(formattedResults.examples) && (
<EuiFlexItem> <ExamplesList examples={formattedResults.examples} />
<ExamplesList examples={formattedResults.examples} />
</EuiFlexItem>
)} )}
{formattedResults && Array.isArray(formattedResults.layerList) && ( {formattedResults && Array.isArray(formattedResults.layerList) && (
<EuiFlexItem <EuiFlexItem

2
x-pack/plugins/data_visualizer/public/application/common/components/expanded_row/geo_point_content_with_map/geo_point_content_with_map.tsx
View file

@ -64,7 +64,7 @@ export const GeoPointContentWithMap: FC<{
<ExpandedRowContent dataTestSubj={'dataVisualizerIndexBasedMapContent'}> <ExpandedRowContent dataTestSubj={'dataVisualizerIndexBasedMapContent'}>
<DocumentStatsTable config={config} /> <DocumentStatsTable config={config} />
<ExamplesList examples={stats.examples} /> <ExamplesList examples={stats.examples} />
<EuiFlexItem className={'dataVisualizerPanelWrapper'} style={{ minHeight: 300 }}> <EuiFlexItem className={'dataVisualizerPanelWrapper dataVisualizerMapWrapper'}>
<EmbeddedMapComponent layerList={layerList} /> <EmbeddedMapComponent layerList={layerList} />
</EuiFlexItem> </EuiFlexItem>
</ExpandedRowContent> </ExpandedRowContent>

20
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/_index.scss
View file

@ -4,7 +4,6 @@
$panelWidthS: 300px; $panelWidthS: 300px;
$panelWidthL: 600px; $panelWidthL: 600px;
$panelWidthXL: 900px;
.dataVisualizerFieldExpandedRow { .dataVisualizerFieldExpandedRow {
padding-left: $euiSize * 4; padding-left: $euiSize * 4;
@ -70,18 +69,20 @@ $panelWidthXL: 900px;
.dataVisualizerSummaryTableWrapper { .dataVisualizerSummaryTableWrapper {
min-width: $panelWidthS; min-width: $panelWidthS;
max-width: $panelWidthS; max-width: $panelWidthS;
max-height: 120px;
} }
.dataVisualizerMapWrapper { .dataVisualizerMapWrapper {
min-height: 300px; min-height: 200px;
min-width: $panelWidthS; min-width: 450px;
max-width: $panelWidthS;
} }
.dataVisualizerTopValuesWrapper { .dataVisualizerTopValuesWrapper {
min-width: $panelWidthS; min-width: $panelWidthS;
max-width: $panelWidthL; width: fit-content;
&.wrapperSize--compressed {
max-width: 450px;
}
} }
.dataVisualizerUniformPanel { .dataVisualizerUniformPanel {
@ -92,15 +93,12 @@ $panelWidthXL: 900px;
.dataVisualizerPanelWrapper { .dataVisualizerPanelWrapper {
border-radius: $euiBorderRadius; border-radius: $euiBorderRadius;
border: 1px solid $euiBorderColor; border: 1px solid $euiBorderColor;
padding: 6px; padding: 4px;
margin: 3px 12px 12px 0; margin: 3px 12px 12px 0;
min-height: 120px;
height: min-content;
} }
.dataVisualizerTextContent { .dataVisualizerTextContent {
min-width: $panelWidthS; min-width: 450px;
max-width: $panelWidthXL;
} }
} }

7
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/expanded_row_field_header/expanded_row_field_header.tsx
View file

@ -9,7 +9,12 @@ import { EuiText } from '@elastic/eui';
import React from 'react'; import React from 'react';
export const ExpandedRowFieldHeader = ({ children }: { children: React.ReactNode }) => ( export const ExpandedRowFieldHeader = ({ children }: { children: React.ReactNode }) => (
<EuiText size="xs" color={'subdued'} className={'fieldDataCard__valuesTitle'}> <EuiText
size="xs"
color={'subdued'}
className={'fieldDataCard__valuesTitle'}
textAlign={'center'}
>
{children} {children}
</EuiText> </EuiText>
); );

1
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx
View file

@ -71,6 +71,7 @@ export const BooleanContent: FC<FieldDataRowProps> = ({ config }) => {
name: '', name: '',
render: (summaryItem: { display: ReactNode }) => summaryItem.display, render: (summaryItem: { display: ReactNode }) => summaryItem.display,
width: '75px', width: '75px',
align: 'right',
}, },
{ {
field: 'value', field: 'value',

5
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/choropleth_map.tsx
View file

@ -105,14 +105,13 @@ export const ChoroplethMap: FC<Props> = ({ stats, suggestion }) => {
return ( return (
<EuiFlexItem <EuiFlexItem
data-test-subj={'fileDataVisualizerChoroplethMapTopValues'} data-test-subj={'fileDataVisualizerChoroplethMapTopValues'}
className={'dataVisualizerPanelWrapper'} className={'dataVisualizerPanelWrapper dataVisualizerMapWrapper'}
style={{ minHeight: 300 }}
> >
<EmbeddedMapComponent layerList={layerList} /> <EmbeddedMapComponent layerList={layerList} />
{isTopValuesSampled === true && ( {isTopValuesSampled === true && (
<> <>
<EuiSpacer size="xs" /> <EuiSpacer size="xs" />
<EuiText size="xs" textAlign={'left'}> <EuiText size="xs" textAlign={'center'}>
<FormattedMessage <FormattedMessage
id="xpack.dataVisualizer.dataGrid.fieldExpandedRow.choroplethMapTopValues.calculatedFromSampleDescription" id="xpack.dataVisualizer.dataGrid.fieldExpandedRow.choroplethMapTopValues.calculatedFromSampleDescription"
defaultMessage="Calculated from sample of {topValuesSamplerShardSize} documents per shard" defaultMessage="Calculated from sample of {topValuesSamplerShardSize} documents per shard"

1
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/date_content.tsx
View file

@ -62,6 +62,7 @@ export const DateContent: FC<FieldDataRowProps> = ({ config }) => {
name: '', name: '',
render: (summaryItem: { display: ReactNode }) => summaryItem.display, render: (summaryItem: { display: ReactNode }) => summaryItem.display,
width: '75px', width: '75px',
align: 'right',
}, },
{ {
field: 'value', field: 'value',

1
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/document_stats.tsx
View file

@ -18,6 +18,7 @@ const metaTableColumns = [
name: '', name: '',
render: (metaItem: { display: ReactNode }) => metaItem.display, render: (metaItem: { display: ReactNode }) => metaItem.display,
width: '75px', width: '75px',
align: 'right',
}, },
{ {
field: 'value', field: 'value',

1
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/expanded_row_content.tsx
View file

@ -18,6 +18,7 @@ export const ExpandedRowContent: FC<Props> = ({ children, dataTestSubj }) => {
data-test-subj={dataTestSubj} data-test-subj={dataTestSubj}
gutterSize={'s'} gutterSize={'s'}
className={'dataVisualizerExpandedRow'} className={'dataVisualizerExpandedRow'}
responsive={true}
> >
{children} {children}
</EuiFlexGroup> </EuiFlexGroup>

2
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/ip_content.tsx
View file

@ -21,7 +21,7 @@ export const IpContent: FC<FieldDataRowProps> = ({ config }) => {
return ( return (
<ExpandedRowContent dataTestSubj={'dataVisualizerIPContent'}> <ExpandedRowContent dataTestSubj={'dataVisualizerIPContent'}>
<DocumentStatsTable config={config} /> <DocumentStatsTable config={config} />
<TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" /> <TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" compressed={true} />
</ExpandedRowContent> </ExpandedRowContent>
); );
}; };

7
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/keyword_content.tsx
View file

@ -44,7 +44,12 @@ export const KeywordContent: FC<FieldDataRowProps> = ({ config }) => {
return ( return (
<ExpandedRowContent dataTestSubj={'dataVisualizerKeywordContent'}> <ExpandedRowContent dataTestSubj={'dataVisualizerKeywordContent'}>
<DocumentStatsTable config={config} /> <DocumentStatsTable config={config} />
<TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" /> <TopValues
stats={stats}
fieldFormat={fieldFormat}
barColor="secondary"
compressed={EMSSuggestion !== null}
/>
{EMSSuggestion && stats && <ChoroplethMap stats={stats} suggestion={EMSSuggestion} />} {EMSSuggestion && stats && <ChoroplethMap stats={stats} suggestion={EMSSuggestion} />}
</ExpandedRowContent> </ExpandedRowContent>

4
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/number_content.tsx
View file

@ -84,6 +84,7 @@ export const NumberContent: FC<FieldDataRowProps> = ({ config }) => {
name: '', name: '',
render: (summaryItem: { display: ReactNode }) => summaryItem.display, render: (summaryItem: { display: ReactNode }) => summaryItem.display,
width: '75px', width: '75px',
align: 'right',
}, },
{ {
field: 'value', field: 'value',
@ -112,7 +113,6 @@ export const NumberContent: FC<FieldDataRowProps> = ({ config }) => {
data-test-subj={'dataVisualizerNumberSummaryTable'} data-test-subj={'dataVisualizerNumberSummaryTable'}
/> />
</EuiFlexItem> </EuiFlexItem>
{stats && ( {stats && (
<TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" compressed={true} /> <TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" compressed={true} />
)} )}
@ -139,7 +139,7 @@ export const NumberContent: FC<FieldDataRowProps> = ({ config }) => {
/> />
</EuiFlexItem> </EuiFlexItem>
<EuiFlexItem grow={false}> <EuiFlexItem grow={false}>
<EuiText size="xs"> <EuiText size="xs" textAlign={'center'}>
<FormattedMessage <FormattedMessage
id="xpack.dataVisualizer.dataGrid.fieldExpandedRow.numberContent.displayingPercentilesLabel" id="xpack.dataVisualizer.dataGrid.fieldExpandedRow.numberContent.displayingPercentilesLabel"
defaultMessage="Displaying {minPercent} - {maxPercent} percentiles" defaultMessage="Displaying {minPercent} - {maxPercent} percentiles"

15
x-pack/plugins/data_visualizer/public/application/common/components/top_values/_top_values.scss
View file

@ -4,16 +4,17 @@
.topValuesValueLabelContainer { .topValuesValueLabelContainer {
margin-right: $euiSizeM; margin-right: $euiSizeM;
&.topValuesValueLabelContainer--small {
width:70px;
}
&.topValuesValueLabelContainer--large { //&.topValuesValueLabelContainer--small {
width: 300px; // width:250px;
} //}
//
//&.topValuesValueLabelContainer--large {
// width: 250px;
//}
} }
.topValuesPercentLabelContainer { .topValuesPercentLabelContainer {
margin-left: $euiSizeM; margin-left: $euiSizeM;
width:70px; min-width:50px;
} }

49
x-pack/plugins/data_visualizer/public/application/common/components/top_values/top_values.tsx
View file

@ -51,7 +51,11 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
return ( return (
<EuiFlexItem <EuiFlexItem
data-test-subj={'dataVisualizerFieldDataTopValues'} data-test-subj={'dataVisualizerFieldDataTopValues'}
className={'dataVisualizerPanelWrapper dataVisualizerTopValuesWrapper'} className={classNames(
'dataVisualizerPanelWrapper',
'dataVisualizerTopValuesWrapper',
`wrapperSize--${compressed === true ? 'compressed' : ''}`
)}
> >
<ExpandedRowFieldHeader> <ExpandedRowFieldHeader>
<FormattedMessage <FormattedMessage
@ -67,8 +71,27 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
{Array.isArray(topValues) && {Array.isArray(topValues) &&
topValues.map((value) => ( topValues.map((value) => (
<EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}> <EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
{progressBarMax !== undefined && (
<EuiFlexItem
grow={false}
className={classNames('eui-textTruncate', 'topValuesPercentLabelContainer')}
>
<EuiText size="xs" textAlign="right" color="subdued">
{getPercentLabel(value.doc_count, progressBarMax)}
</EuiText>
</EuiFlexItem>
)}
<EuiFlexItem data-test-subj="dataVisualizerFieldDataTopValueBar" grow={false}>
<EuiProgress
value={value.doc_count}
max={progressBarMax}
color={barColor}
size="m"
style={{ width: 80 }}
/>
</EuiFlexItem>
<EuiFlexItem <EuiFlexItem
grow={false} grow={true}
className={classNames( className={classNames(
'eui-textTruncate', 'eui-textTruncate',
'topValuesValueLabelContainer', 'topValuesValueLabelContainer',
@ -76,35 +99,17 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
)} )}
> >
<EuiToolTip content={kibanaFieldFormat(value.key, fieldFormat)} position="right"> <EuiToolTip content={kibanaFieldFormat(value.key, fieldFormat)} position="right">
<EuiText size="xs" textAlign={'right'} color="subdued"> <EuiText size="xs" textAlign={'left'} color="subdued">
{kibanaFieldFormat(value.key, fieldFormat)} {kibanaFieldFormat(value.key, fieldFormat)}
</EuiText> </EuiText>
</EuiToolTip> </EuiToolTip>
</EuiFlexItem> </EuiFlexItem>
<EuiFlexItem data-test-subj="dataVisualizerFieldDataTopValueBar">
<EuiProgress
value={value.doc_count}
max={progressBarMax}
color={barColor}
size="m"
/>
</EuiFlexItem>
{progressBarMax !== undefined && (
<EuiFlexItem
grow={false}
className={classNames('eui-textTruncate', 'topValuesPercentLabelContainer')}
>
<EuiText size="xs" textAlign="left" color="subdued">
{getPercentLabel(value.doc_count, progressBarMax)}
</EuiText>
</EuiFlexItem>
)}
</EuiFlexGroup> </EuiFlexGroup>
))} ))}
{isTopValuesSampled === true && ( {isTopValuesSampled === true && (
<Fragment> <Fragment>
<EuiSpacer size="xs" /> <EuiSpacer size="xs" />
<EuiText size="xs" textAlign={'left'}> <EuiText size="xs" textAlign={'center'}>
<FormattedMessage <FormattedMessage
id="xpack.dataVisualizer.dataGrid.field.topValues.calculatedFromSampleDescription" id="xpack.dataVisualizer.dataGrid.field.topValues.calculatedFromSampleDescription"
defaultMessage="Calculated from sample of {topValuesSamplerShardSize} documents per shard" defaultMessage="Calculated from sample of {topValuesSamplerShardSize} documents per shard"