From 8eef5857f7bb29ecfbcb6a680d5280ce673b4800 Mon Sep 17 00:00:00 2001 From: Wylie Conlon Date: Fri, 21 Aug 2020 17:24:35 -0400 Subject: [PATCH 1/2] [Lens] Decouple visualizations from specific operations --- .../expression.test.tsx | 52 +++++++++++++++++++ .../datatable_visualization/expression.tsx | 5 +- .../pie_visualization/suggestions.test.ts | 36 ++++++++++++- .../public/pie_visualization/suggestions.ts | 2 +- x-pack/plugins/lens/public/types.ts | 5 ++ .../xy_visualization/xy_suggestions.test.ts | 51 ++++++++++++++++++ .../public/xy_visualization/xy_suggestions.ts | 10 ++-- 7 files changed, 151 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx index ac43593213687..b9bdea5522f32 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx @@ -144,6 +144,58 @@ describe('datatable_expression', () => { }); }); + test('it invokes executeTriggerActions with correct context on click on timefield from range', () => { + const data: LensMultiTable = { + type: 'lens_multitable', + tables: { + l1: { + type: 'kibana_datatable', + columns: [ + { id: 'a', name: 'a', meta: { type: 'date_range', aggConfigParams: { field: 'a' } } }, + { id: 'b', name: 'b', meta: { type: 'count' } }, + ], + rows: [{ a: 1588024800000, b: 3 }], + }, + }, + }; + + const args: DatatableProps['args'] = { + title: '', + columns: { columnIds: ['a', 'b'], type: 'lens_datatable_columns' }, + }; + + const wrapper = mountWithIntl( + x as IFieldFormat} + onClickValue={onClickValue} + getType={jest.fn(() => ({ type: 'buckets' } as IAggType))} + /> + ); + + wrapper.find('[data-test-subj="lensDatatableFilterFor"]').at(1).simulate('click'); + + expect(onClickValue).toHaveBeenCalledWith({ + data: [ + { + column: 0, + row: 0, + table: data.tables.l1, + value: 1588024800000, + }, + ], + negate: false, + timeFieldName: 'a', + }); + }); + test('it shows emptyPlaceholder for undefined bucketed data', () => { const { args, data } = sampleArgs(); const emptyData: LensMultiTable = { diff --git a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx index 02186ecf09b4b..87ac2d1710b19 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx @@ -164,9 +164,8 @@ export function DatatableComponent(props: DatatableRenderProps) { const handleFilterClick = useMemo( () => (field: string, value: unknown, colIndex: number, negate: boolean = false) => { const col = firstTable.columns[colIndex]; - const isDateHistogram = col.meta?.type === 'date_histogram'; - const timeFieldName = - negate && isDateHistogram ? undefined : col?.meta?.aggConfigParams?.field; + const isDate = col.meta?.type === 'date_histogram' || col.meta?.type === 'date_range'; + const timeFieldName = negate && isDate ? undefined : col?.meta?.aggConfigParams?.field; const rowIndex = firstTable.rows.findIndex((row) => row[field] === value); const data: LensFilterEvent['data'] = { diff --git a/x-pack/plugins/lens/public/pie_visualization/suggestions.test.ts b/x-pack/plugins/lens/public/pie_visualization/suggestions.test.ts index 20b267caa9074..b8b43c3ed248b 100644 --- a/x-pack/plugins/lens/public/pie_visualization/suggestions.test.ts +++ b/x-pack/plugins/lens/public/pie_visualization/suggestions.test.ts @@ -90,7 +90,41 @@ describe('suggestions', () => { columns: [ { columnId: 'b', - operation: { label: 'Days', dataType: 'date' as DataType, isBucketed: true }, + operation: { + label: 'Days', + dataType: 'date' as DataType, + isBucketed: true, + scale: 'interval', + }, + }, + { + columnId: 'c', + operation: { label: 'Count', dataType: 'number' as DataType, isBucketed: false }, + }, + ], + changeType: 'initial', + }, + state: undefined, + keptLayerIds: ['first'], + }) + ).toHaveLength(0); + }); + + it('should reject any histogram operations', () => { + expect( + suggestions({ + table: { + layerId: 'first', + isMultiRow: true, + columns: [ + { + columnId: 'b', + operation: { + label: 'Durations', + dataType: 'number' as DataType, + isBucketed: true, + scale: 'interval', + }, }, { columnId: 'c', diff --git a/x-pack/plugins/lens/public/pie_visualization/suggestions.ts b/x-pack/plugins/lens/public/pie_visualization/suggestions.ts index 5d85ac3bbd56a..067b0bb4906df 100644 --- a/x-pack/plugins/lens/public/pie_visualization/suggestions.ts +++ b/x-pack/plugins/lens/public/pie_visualization/suggestions.ts @@ -15,7 +15,7 @@ function shouldReject({ table, keptLayerIds }: SuggestionRequest 1 || (keptLayerIds.length && table.layerId !== keptLayerIds[0]) || table.changeType === 'reorder' || - table.columns.some((col) => col.operation.dataType === 'date') + table.columns.some((col) => col.operation.scale === 'interval') // Histograms are not good for pie ); } diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index 20f2ce6c56774..729daed7223fe 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -259,6 +259,11 @@ export interface OperationMetadata { // A bucketed operation is grouped by duplicate values, otherwise each row is // treated as unique isBucketed: boolean; + /** + * ordinal: Each name is a unique value, but the names are in sorted order, like "Top values" + * interval: Histogram data, like date or number histograms + * ratio: Most number data is rendered as a ratio that includes 0 + */ scale?: 'ordinal' | 'interval' | 'ratio'; // Extra meta-information like cardinality, color // TODO currently it's not possible to differentiate between a field from a raw diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts index 632f6fc8861a4..00796a8ca1688 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts @@ -42,6 +42,18 @@ describe('xy_suggestions', () => { }; } + function filtersCol(columnId: string): TableSuggestionColumn { + return { + columnId, + operation: { + dataType: 'string', + label: `Filters`, + isBucketed: true, + scale: 'ordinal', + }, + }; + } + function dateCol(columnId: string): TableSuggestionColumn { return { columnId, @@ -54,6 +66,18 @@ describe('xy_suggestions', () => { }; } + function histogramCol(columnId: string): TableSuggestionColumn { + return { + columnId, + operation: { + dataType: 'number', + isBucketed: true, + label: `${columnId} histogram`, + scale: 'interval', + }, + }; + } + // Helper that plucks out the important part of a suggestion for // most test assertions function suggestionSubset(suggestion: VisualizationSuggestion) { @@ -274,6 +298,33 @@ describe('xy_suggestions', () => { `); }); + test('suggests all basic x y chart with histogram on x', () => { + (generateId as jest.Mock).mockReturnValueOnce('aaa'); + const [suggestion, ...rest] = getSuggestions({ + table: { + isMultiRow: true, + columns: [numCol('bytes'), histogramCol('duration')], + layerId: 'first', + changeType: 'unchanged', + }, + keptLayerIds: [], + }); + + expect(rest).toHaveLength(visualizationTypes.length - 1); + expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(` + Array [ + Object { + "seriesType": "bar_stacked", + "splitAccessor": undefined, + "x": "duration", + "y": Array [ + "bytes", + ], + }, + ] + `); + }); + test('does not suggest multiple splits', () => { const suggestions = getSuggestions({ table: { diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts index 387d56c03e31a..75dd5a7a579b8 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts @@ -112,13 +112,13 @@ function getBucketMappings(table: TableSuggestion, currentState?: State) { const currentXColumnIndex = prioritizedBuckets.findIndex( ({ columnId }) => columnId === currentLayer.xAccessor ); - const currentXDataType = - currentXColumnIndex > -1 && prioritizedBuckets[currentXColumnIndex].operation.dataType; + const currentXScaleType = + currentXColumnIndex > -1 && prioritizedBuckets[currentXColumnIndex].operation.scale; if ( - currentXDataType && - // make sure time gets mapped to x dimension even when changing current bucket/dimension mapping - (currentXDataType === 'date' || prioritizedBuckets[0].operation.dataType !== 'date') + currentXScaleType && + // make sure histograms get mapped to x dimension even when changing current bucket/dimension mapping + (currentXScaleType === 'interval' || prioritizedBuckets[0].operation.scale !== 'interval') ) { const [x] = prioritizedBuckets.splice(currentXColumnIndex, 1); prioritizedBuckets.unshift(x); From faa6c8d0421bfea0538aae383d14bb0c20974987 Mon Sep 17 00:00:00 2001 From: Wylie Conlon Date: Wed, 26 Aug 2020 15:43:28 -0400 Subject: [PATCH 2/2] Remove unused mock --- .../public/xy_visualization/xy_suggestions.test.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts index 00796a8ca1688..79e4ed6958193 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts @@ -42,18 +42,6 @@ describe('xy_suggestions', () => { }; } - function filtersCol(columnId: string): TableSuggestionColumn { - return { - columnId, - operation: { - dataType: 'string', - label: `Filters`, - isBucketed: true, - scale: 'ordinal', - }, - }; - } - function dateCol(columnId: string): TableSuggestionColumn { return { columnId,