github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -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'}>
<DocumentStatsTable config={config} />
{formattedResults && Array.isArray(formattedResults.examples) && (
<EuiFlexItem>
<ExamplesList examples={formattedResults.examples} />
</EuiFlexItem>
<ExamplesList examples={formattedResults.examples} />
)}
{formattedResults && Array.isArray(formattedResults.layerList) && (
<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'}>
<DocumentStatsTable config={config} />
<ExamplesList examples={stats.examples} />
<EuiFlexItem className={'dataVisualizerPanelWrapper'} style={{ minHeight: 300 }}>
<EuiFlexItem className={'dataVisualizerPanelWrapper dataVisualizerMapWrapper'}>
<EmbeddedMapComponent layerList={layerList} />
</EuiFlexItem>
</ExpandedRowContent>

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

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

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';
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}
</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: '',
render: (summaryItem: { display: ReactNode }) => summaryItem.display,
width: '75px',
align: 'right',
},
{
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 (
<EuiFlexItem
data-test-subj={'fileDataVisualizerChoroplethMapTopValues'}
className={'dataVisualizerPanelWrapper'}
style={{ minHeight: 300 }}
className={'dataVisualizerPanelWrapper dataVisualizerMapWrapper'}
>
<EmbeddedMapComponent layerList={layerList} />
{isTopValuesSampled === true && (
<>
<EuiSpacer size="xs" />
<EuiText size="xs" textAlign={'left'}>
<EuiText size="xs" textAlign={'center'}>
<FormattedMessage
id="xpack.dataVisualizer.dataGrid.fieldExpandedRow.choroplethMapTopValues.calculatedFromSampleDescription"
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: '',
render: (summaryItem: { display: ReactNode }) => summaryItem.display,
width: '75px',
align: 'right',
},
{
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: '',
render: (metaItem: { display: ReactNode }) => metaItem.display,
width: '75px',
align: 'right',
},
{
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}
gutterSize={'s'}
className={'dataVisualizerExpandedRow'}
responsive={true}
>
{children}
</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 (
<ExpandedRowContent dataTestSubj={'dataVisualizerIPContent'}>
<DocumentStatsTable config={config} />
<TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" />
<TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" compressed={true} />
</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 (
<ExpandedRowContent dataTestSubj={'dataVisualizerKeywordContent'}>
<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} />}
</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: '',
render: (summaryItem: { display: ReactNode }) => summaryItem.display,
width: '75px',
align: 'right',
},
{
field: 'value',
@ -112,7 +113,6 @@ export const NumberContent: FC<FieldDataRowProps> = ({ config }) => {
data-test-subj={'dataVisualizerNumberSummaryTable'}
/>
</EuiFlexItem>
{stats && (
<TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" compressed={true} />
)}
@ -139,7 +139,7 @@ export const NumberContent: FC<FieldDataRowProps> = ({ config }) => {
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText size="xs">
<EuiText size="xs" textAlign={'center'}>
<FormattedMessage
id="xpack.dataVisualizer.dataGrid.fieldExpandedRow.numberContent.displayingPercentilesLabel"
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 {
margin-right: $euiSizeM;
&.topValuesValueLabelContainer--small {
width:70px;
}
&.topValuesValueLabelContainer--large {
width: 300px;
}
//&.topValuesValueLabelContainer--small {
// width:250px;
//}
//
//&.topValuesValueLabelContainer--large {
// width: 250px;
//}
}
.topValuesPercentLabelContainer {
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 (
<EuiFlexItem
data-test-subj={'dataVisualizerFieldDataTopValues'}
className={'dataVisualizerPanelWrapper dataVisualizerTopValuesWrapper'}
className={classNames(
'dataVisualizerPanelWrapper',
'dataVisualizerTopValuesWrapper',
`wrapperSize--${compressed === true ? 'compressed' : ''}`
)}
>
<ExpandedRowFieldHeader>
<FormattedMessage
@ -67,8 +71,27 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
{Array.isArray(topValues) &&
topValues.map((value) => (
<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
grow={false}
grow={true}
className={classNames(
'eui-textTruncate',
'topValuesValueLabelContainer',
@ -76,35 +99,17 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
)}
>
<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)}
</EuiText>
</EuiToolTip>
</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>
))}
{isTopValuesSampled === true && (
<Fragment>
<EuiSpacer size="xs" />
<EuiText size="xs" textAlign={'left'}>
<EuiText size="xs" textAlign={'center'}>
<FormattedMessage
id="xpack.dataVisualizer.dataGrid.field.topValues.calculatedFromSampleDescription"
defaultMessage="Calculated from sample of {topValuesSamplerShardSize} documents per shard"