[Lens] Fix empty values filtering (#67594)
This commit is contained in:
parent
9c28661449
commit
84ed5096f3
|
@ -22,7 +22,7 @@ import {
|
|||
} from '../../../../../src/plugins/expressions/public';
|
||||
import { VisualizationContainer } from '../visualization_container';
|
||||
import { EmptyPlaceholder } from '../shared_components';
|
||||
|
||||
import { desanitizeFilterContext } from '../utils';
|
||||
export interface DatatableColumns {
|
||||
columnIds: string[];
|
||||
}
|
||||
|
@ -180,7 +180,7 @@ export function DatatableComponent(props: DatatableRenderProps) {
|
|||
],
|
||||
timeFieldName,
|
||||
};
|
||||
props.onClickValue(data);
|
||||
props.onClickValue(desanitizeFilterContext(data));
|
||||
},
|
||||
[firstTable]
|
||||
);
|
||||
|
|
|
@ -31,6 +31,7 @@ import { ColumnGroups, PieExpressionProps } from './types';
|
|||
import { getSliceValueWithFallback, getFilterContext } from './render_helpers';
|
||||
import { EmptyPlaceholder } from '../shared_components';
|
||||
import './visualization.scss';
|
||||
import { desanitizeFilterContext } from '../utils';
|
||||
|
||||
const EMPTY_SLICE = Symbol('empty_slice');
|
||||
|
||||
|
@ -242,7 +243,7 @@ export function PieComponent(
|
|||
firstTable
|
||||
);
|
||||
|
||||
onClickValue(context);
|
||||
onClickValue(desanitizeFilterContext(context));
|
||||
}}
|
||||
/>
|
||||
<Partition
|
||||
|
|
111
x-pack/plugins/lens/public/utils.test.ts
Normal file
111
x-pack/plugins/lens/public/utils.test.ts
Normal file
|
@ -0,0 +1,111 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { LensFilterEvent } from './types';
|
||||
import { desanitizeFilterContext } from './utils';
|
||||
|
||||
describe('desanitizeFilterContext', () => {
|
||||
it(`When filtered value equals '(empty)' replaces it with '' in table and in value.`, () => {
|
||||
const table = {
|
||||
rows: [
|
||||
{
|
||||
'f903668f-1175-4705-a5bd-713259d10326': 1589414640000,
|
||||
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '(empty)',
|
||||
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
|
||||
},
|
||||
{
|
||||
'f903668f-1175-4705-a5bd-713259d10326': 1589414670000,
|
||||
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 0,
|
||||
},
|
||||
{
|
||||
'f903668f-1175-4705-a5bd-713259d10326': 1589414880000,
|
||||
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '123123123',
|
||||
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
|
||||
},
|
||||
{
|
||||
'f903668f-1175-4705-a5bd-713259d10326': 1589414910000,
|
||||
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '(empty)',
|
||||
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
id: 'f903668f-1175-4705-a5bd-713259d10326',
|
||||
name: 'order_date per 30 seconds',
|
||||
},
|
||||
{
|
||||
id: '5d5446b2-72e8-4f86-91e0-88380f0fa14c',
|
||||
name: 'Top values of customer_phone',
|
||||
},
|
||||
{
|
||||
id: '9f0b6f88-c399-43a0-a993-0ad943c9af25',
|
||||
name: 'Count of records',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const contextWithEmptyValue: LensFilterEvent['data'] = {
|
||||
data: [
|
||||
{
|
||||
row: 3,
|
||||
column: 0,
|
||||
value: 1589414910000,
|
||||
table,
|
||||
},
|
||||
{
|
||||
row: 0,
|
||||
column: 1,
|
||||
value: '(empty)',
|
||||
table,
|
||||
},
|
||||
],
|
||||
timeFieldName: 'order_date',
|
||||
};
|
||||
|
||||
const desanitizedFilterContext = desanitizeFilterContext(contextWithEmptyValue);
|
||||
|
||||
expect(desanitizedFilterContext).toEqual({
|
||||
data: [
|
||||
{
|
||||
row: 3,
|
||||
column: 0,
|
||||
value: 1589414910000,
|
||||
table,
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
row: 0,
|
||||
column: 1,
|
||||
table: {
|
||||
rows: [
|
||||
{
|
||||
'f903668f-1175-4705-a5bd-713259d10326': 1589414640000,
|
||||
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '',
|
||||
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
|
||||
},
|
||||
{
|
||||
'f903668f-1175-4705-a5bd-713259d10326': 1589414670000,
|
||||
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 0,
|
||||
},
|
||||
{
|
||||
'f903668f-1175-4705-a5bd-713259d10326': 1589414880000,
|
||||
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '123123123',
|
||||
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
|
||||
},
|
||||
{
|
||||
'f903668f-1175-4705-a5bd-713259d10326': 1589414910000,
|
||||
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '(empty)',
|
||||
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
|
||||
},
|
||||
],
|
||||
columns: table.columns,
|
||||
},
|
||||
},
|
||||
],
|
||||
timeFieldName: 'order_date',
|
||||
});
|
||||
});
|
||||
});
|
39
x-pack/plugins/lens/public/utils.ts
Normal file
39
x-pack/plugins/lens/public/utils.ts
Normal file
|
@ -0,0 +1,39 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { LensFilterEvent } from './types';
|
||||
|
||||
/** replaces the value `(empty) to empty string for proper filtering` */
|
||||
export const desanitizeFilterContext = (
|
||||
context: LensFilterEvent['data']
|
||||
): LensFilterEvent['data'] => {
|
||||
const emptyTextValue = i18n.translate('xpack.lens.indexpattern.emptyTextColumnValue', {
|
||||
defaultMessage: '(empty)',
|
||||
});
|
||||
return {
|
||||
...context,
|
||||
data: context.data.map((point) =>
|
||||
point.value === emptyTextValue
|
||||
? {
|
||||
...point,
|
||||
value: '',
|
||||
table: {
|
||||
...point.table,
|
||||
rows: point.table.rows.map((row, index) =>
|
||||
index === point.row
|
||||
? {
|
||||
...row,
|
||||
[point.table.columns[point.column].id]: '',
|
||||
}
|
||||
: row
|
||||
),
|
||||
},
|
||||
}
|
||||
: point
|
||||
),
|
||||
};
|
||||
};
|
|
@ -39,6 +39,7 @@ import { VisualizationContainer } from '../visualization_container';
|
|||
import { isHorizontalChart } from './state_helpers';
|
||||
import { parseInterval } from '../../../../../src/plugins/data/common';
|
||||
import { EmptyPlaceholder } from '../shared_components';
|
||||
import { desanitizeFilterContext } from '../utils';
|
||||
|
||||
type InferPropType<T> = T extends React.FunctionComponent<infer P> ? P : T;
|
||||
type SeriesSpec = InferPropType<typeof LineSeries> &
|
||||
|
@ -354,7 +355,7 @@ export function XYChart({
|
|||
})),
|
||||
timeFieldName,
|
||||
};
|
||||
onClickValue(context);
|
||||
onClickValue(desanitizeFilterContext(context));
|
||||
}}
|
||||
/>
|
||||
|
||||
|
|
Loading…
Reference in a new issue