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

[Data visualizer] Improve design of expanded rows (#118125) (#118970)

Browse source
This commit is contained in:
Andrea Del Rio 2021-11-17 17:12:05 -08:00 • committed by GitHub
parent 009efda864
commit 7f1bdc3c7e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 26 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,7 @@
@import 'components/field_data_row/index';
$panelWidthS: #{'max(20%, 225px)'};
$panelWidthM: #{'max(30%, 300px)'};
$panelWidthL: #{'max(40%, 450px)'};
.dvExpandedRow {
@ -52,9 +53,6 @@ $panelWidthL: #{'max(40%, 450px)'};
}
.dvSummaryTable {
.euiTableRow > .euiTableRowCell {
border-bottom: 0;
}
.euiTableHeaderCell {
display: none;
}
@ -63,6 +61,11 @@ $panelWidthL: #{'max(40%, 450px)'};
.dvSummaryTable__wrapper {
min-width: $panelWidthS;
max-width: $panelWidthS;
&.dvPanel__dateSummary {
min-width: $panelWidthM;
max-width: $panelWidthM;
}
}
.dvTopValues__wrapper {

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

@ -6,7 +6,13 @@
*/
import React, { FC, ReactNode, useMemo } from 'react';
import { EuiBasicTable, EuiSpacer, RIGHT_ALIGNMENT, HorizontalAlignment } from '@elastic/eui';
import {
EuiBasicTable,
EuiSpacer,
RIGHT_ALIGNMENT,
LEFT_ALIGNMENT,
HorizontalAlignment,
} from '@elastic/eui';
import { Axis, BarSeries, Chart, Settings, ScaleType } from '@elastic/charts';
import { FormattedMessage } from '@kbn/i18n/react';
@ -73,12 +79,13 @@ export const BooleanContent: FC<FieldDataRowProps> = ({ config }) => {
name: '',
render: (_: string, summaryItem: { display: ReactNode }) => summaryItem.display,
width: '25px',
align: RIGHT_ALIGNMENT as HorizontalAlignment,
align: LEFT_ALIGNMENT as HorizontalAlignment,
},
{
field: 'value',
name: '',
render: (v: string) => <strong>{v}</strong>,
align: RIGHT_ALIGNMENT as HorizontalAlignment,
},
];

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

@ -6,13 +6,12 @@
*/
import React, { FC, ReactNode } from 'react';
import { EuiBasicTable, HorizontalAlignment } from '@elastic/eui';
import { EuiBasicTable, HorizontalAlignment, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from '@elastic/eui';
// @ts-ignore
import { formatDate } from '@elastic/eui/lib/services/format';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { RIGHT_ALIGNMENT } from '@elastic/eui';
import type { FieldDataRowProps } from '../../types/field_data_row';
import { ExpandedRowFieldHeader } from '../expanded_row_field_header';
import { DocumentStatsTable } from './document_stats';
@ -65,19 +64,20 @@ export const DateContent: FC<FieldDataRowProps> = ({ config }) => {
field: 'function',
render: (func: string, summaryItem: { display: ReactNode }) => summaryItem.display,
width: '70px',
align: RIGHT_ALIGNMENT as HorizontalAlignment,
align: LEFT_ALIGNMENT as HorizontalAlignment,
},
{
field: 'value',
name: '',
render: (v: string) => <strong>{v}</strong>,
align: RIGHT_ALIGNMENT as HorizontalAlignment,
},
];
return (
<ExpandedRowContent dataTestSubj={'dataVisualizerDateContent'}>
<DocumentStatsTable config={config} />
<ExpandedRowPanel className={'dvSummaryTable__wrapper dvPanel__wrapper'}>
<ExpandedRowPanel className={'dvSummaryTable__wrapper dvPanel__wrapper dvPanel__dateSummary'}>
<ExpandedRowFieldHeader>{summaryTableTitle}</ExpandedRowFieldHeader>
<EuiBasicTable<SummaryTableItem>
className={'dvSummaryTable'}

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

@ -8,7 +8,7 @@
import { FormattedMessage } from '@kbn/i18n/react';
import React, { FC, ReactNode } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiBasicTable, HorizontalAlignment, RIGHT_ALIGNMENT } from '@elastic/eui';
import { EuiBasicTable, HorizontalAlignment, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from '@elastic/eui';
import { ExpandedRowFieldHeader } from '../expanded_row_field_header';
import { FieldDataRowProps } from '../../types';
import { roundToDecimalPlace } from '../../../utils';
@ -20,12 +20,13 @@ const metaTableColumns = [
name: '',
render: (_: string, metaItem: { display: ReactNode }) => metaItem.display,
width: '25px',
align: RIGHT_ALIGNMENT as HorizontalAlignment,
align: LEFT_ALIGNMENT as HorizontalAlignment,
},
{
field: 'value',
name: '',
render: (v: string) => <strong>{v}</strong>,
align: RIGHT_ALIGNMENT as HorizontalAlignment,
},
];

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

@ -20,7 +20,7 @@ export const ExpandedRowPanel: FC<Props> = ({ children, dataTestSubj, grow, clas
<EuiPanel
data-test-subj={dataTestSubj}
hasShadow={false}
hasBorder={true}
hasBorder={false}
grow={!!grow}
className={className ?? ''}
paddingSize={'s'}

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

@ -11,6 +11,7 @@ import {
EuiFlexItem,
EuiText,
HorizontalAlignment,
LEFT_ALIGNMENT,
RIGHT_ALIGNMENT,
} from '@elastic/eui';
@ -91,12 +92,13 @@ export const NumberContent: FC<FieldDataRowProps> = ({ config, onAddFilter }) =>
name: '',
render: (summaryItem: { display: ReactNode }) => summaryItem.display,
width: '25px',
align: RIGHT_ALIGNMENT as HorizontalAlignment,
align: LEFT_ALIGNMENT as HorizontalAlignment,
},
{
field: 'value',
name: '',
render: (v: string) => <strong>{v}</strong>,
align: RIGHT_ALIGNMENT as HorizontalAlignment,
},
];