From 1339f85292c24d362c45b9ee9b794a8f5c68c629 Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 29 Jun 2021 07:27:12 -0400 Subject: [PATCH] [Exploratory view] use percentages in distribution chart (#103080) (#103625) Co-authored-by: Shahzad --- x-pack/plugins/lens/public/index.ts | 3 + .../operations/definitions/index.ts | 1 + .../operations/index.ts | 2 + .../public/indexpattern_datasource/types.ts | 3 + .../configurations/constants/constants.ts | 1 + .../configurations/lens_attributes.test.ts | 209 +++++++++++++++++- .../configurations/lens_attributes.ts | 36 ++- .../lens_columns/overall_column.tsx | 110 +++++++++ .../rum/data_distribution_config.ts | 6 +- .../synthetics/data_distribution_config.ts | 4 +- .../test_data/sample_attribute.ts | 94 +++++++- .../shared/exploratory_view/types.ts | 1 + 12 files changed, 447 insertions(+), 23 deletions(-) create mode 100644 x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_columns/overall_column.tsx diff --git a/x-pack/plugins/lens/public/index.ts b/x-pack/plugins/lens/public/index.ts index a82bc0b9c0d3d..3054f3787a24c 100644 --- a/x-pack/plugins/lens/public/index.ts +++ b/x-pack/plugins/lens/public/index.ts @@ -54,6 +54,9 @@ export type { CounterRateIndexPatternColumn, DerivativeIndexPatternColumn, MovingAverageIndexPatternColumn, + FormulaIndexPatternColumn, + MathIndexPatternColumn, + OverallSumIndexPatternColumn, } from './indexpattern_datasource/types'; export type { LensEmbeddableInput } from './editor_frame_service/embeddable'; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts index 246959913c39e..897777a05efc6 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts @@ -118,6 +118,7 @@ export { export { CountIndexPatternColumn } from './count'; export { LastValueIndexPatternColumn } from './last_value'; export { RangeIndexPatternColumn } from './ranges'; +export { FormulaIndexPatternColumn, MathIndexPatternColumn } from './formula'; // List of all operation definitions registered to this data source. // If you want to implement a new operation, add the definition to this array and diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/index.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/index.ts index d55c5d3c00f17..7899ce9efcedf 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/index.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/index.ts @@ -35,4 +35,6 @@ export { OverallMinIndexPatternColumn, OverallMaxIndexPatternColumn, OverallAverageIndexPatternColumn, + FormulaIndexPatternColumn, + MathIndexPatternColumn, } from './definitions'; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/types.ts b/x-pack/plugins/lens/public/indexpattern_datasource/types.ts index f24c39f810b21..1a3451bdb403b 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/types.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/types.ts @@ -32,6 +32,9 @@ export { CounterRateIndexPatternColumn, DerivativeIndexPatternColumn, MovingAverageIndexPatternColumn, + FormulaIndexPatternColumn, + MathIndexPatternColumn, + OverallSumIndexPatternColumn, } from './operations'; export type DraggedField = DragDropIdentifier & { diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/constants/constants.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/constants/constants.ts index 52faa2dccaeac..dd48cf3f7eeb8 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/constants/constants.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/constants/constants.ts @@ -49,6 +49,7 @@ import { export const DEFAULT_TIME = { from: 'now-1h', to: 'now' }; export const RECORDS_FIELD = 'Records'; +export const RECORDS_PERCENTAGE_FIELD = 'RecordsPercentage'; export const FieldLabels: Record = { 'user_agent.name': BROWSER_FAMILY_LABEL, diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts index 72b4bd7919c3e..0be64677586c1 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts @@ -70,13 +70,23 @@ describe('Lens Attribute', () => { }); it('should return main y axis', function () { - expect(lnsAttr.getMainYAxis(layerConfig)).toEqual({ + expect(lnsAttr.getMainYAxis(layerConfig, 'layer0', '')).toEqual({ dataType: 'number', isBucketed: false, label: 'Pages loaded', - operationType: 'count', + operationType: 'formula', + params: { + format: { + id: 'percent', + params: { + decimals: 0, + }, + }, + formula: 'count() / overall_sum(count())', + isFormulaBroken: false, + }, + references: ['y-axis-column-layer0X4'], scale: 'ratio', - sourceField: 'Records', }); }); @@ -230,7 +240,15 @@ describe('Lens Attribute', () => { it('should return first layer', function () { expect(lnsAttr.getLayers()).toEqual({ layer0: { - columnOrder: ['x-axis-column-layer0', 'y-axis-column-layer0'], + columnOrder: [ + 'x-axis-column-layer0', + 'y-axis-column-layer0', + 'y-axis-column-layer0X0', + 'y-axis-column-layer0X1', + 'y-axis-column-layer0X2', + 'y-axis-column-layer0X3', + 'y-axis-column-layer0X4', + ], columns: { 'x-axis-column-layer0': { dataType: 'number', @@ -253,16 +271,98 @@ describe('Lens Attribute', () => { }, 'y-axis-column-layer0': { dataType: 'number', + filter: { + language: 'kuery', + query: + 'transaction.type: page-load and processor.event: transaction and transaction.type : *', + }, isBucketed: false, label: 'Pages loaded', + operationType: 'formula', + params: { + format: { + id: 'percent', + params: { + decimals: 0, + }, + }, + formula: + "count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *') / overall_sum(count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *'))", + isFormulaBroken: false, + }, + references: ['y-axis-column-layer0X4'], + scale: 'ratio', + }, + 'y-axis-column-layer0X0': { + customLabel: true, + dataType: 'number', + filter: { + language: 'kuery', + query: + 'transaction.type: page-load and processor.event: transaction and transaction.type : *', + }, + isBucketed: false, + label: 'Part of count() / overall_sum(count())', operationType: 'count', scale: 'ratio', sourceField: 'Records', + }, + 'y-axis-column-layer0X1': { + customLabel: true, + dataType: 'number', filter: { language: 'kuery', query: 'transaction.type: page-load and processor.event: transaction and transaction.type : *', }, + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'count', + scale: 'ratio', + sourceField: 'Records', + }, + 'y-axis-column-layer0X2': { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'math', + params: { + tinymathAst: 'y-axis-column-layer0X1', + }, + references: ['y-axis-column-layer0X1'], + scale: 'ratio', + }, + 'y-axis-column-layer0X3': { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'overall_sum', + references: ['y-axis-column-layer0X2'], + scale: 'ratio', + }, + 'y-axis-column-layer0X4': { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'math', + params: { + tinymathAst: { + args: ['y-axis-column-layer0X0', 'y-axis-column-layer0X3'], + location: { + max: 30, + min: 0, + }, + name: 'divide', + text: + "count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *') / overall_sum(count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *'))", + type: 'function', + }, + }, + references: ['y-axis-column-layer0X0', 'y-axis-column-layer0X3'], + scale: 'ratio', }, }, incompleteColumns: {}, @@ -326,7 +426,16 @@ describe('Lens Attribute', () => { ]); expect(lnsAttr.layers.layer0).toEqual({ - columnOrder: ['x-axis-column-layer0', 'breakdown-column-layer0', 'y-axis-column-layer0'], + columnOrder: [ + 'x-axis-column-layer0', + 'breakdown-column-layer0', + 'y-axis-column-layer0', + 'y-axis-column-layer0X0', + 'y-axis-column-layer0X1', + 'y-axis-column-layer0X2', + 'y-axis-column-layer0X3', + 'y-axis-column-layer0X4', + ], columns: { 'breakdown-column-layer0': { dataType: 'string', @@ -353,7 +462,13 @@ describe('Lens Attribute', () => { operationType: 'range', params: { maxBars: 'auto', - ranges: [{ from: 0, label: '', to: 1000 }], + ranges: [ + { + from: 0, + label: '', + to: 1000, + }, + ], type: 'histogram', }, scale: 'interval', @@ -361,16 +476,98 @@ describe('Lens Attribute', () => { }, 'y-axis-column-layer0': { dataType: 'number', + filter: { + language: 'kuery', + query: + 'transaction.type: page-load and processor.event: transaction and transaction.type : *', + }, isBucketed: false, label: 'Pages loaded', + operationType: 'formula', + params: { + format: { + id: 'percent', + params: { + decimals: 0, + }, + }, + formula: + "count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *') / overall_sum(count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *'))", + isFormulaBroken: false, + }, + references: ['y-axis-column-layer0X4'], + scale: 'ratio', + }, + 'y-axis-column-layer0X0': { + customLabel: true, + dataType: 'number', + filter: { + language: 'kuery', + query: + 'transaction.type: page-load and processor.event: transaction and transaction.type : *', + }, + isBucketed: false, + label: 'Part of count() / overall_sum(count())', operationType: 'count', scale: 'ratio', sourceField: 'Records', + }, + 'y-axis-column-layer0X1': { + customLabel: true, + dataType: 'number', filter: { language: 'kuery', query: 'transaction.type: page-load and processor.event: transaction and transaction.type : *', }, + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'count', + scale: 'ratio', + sourceField: 'Records', + }, + 'y-axis-column-layer0X2': { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'math', + params: { + tinymathAst: 'y-axis-column-layer0X1', + }, + references: ['y-axis-column-layer0X1'], + scale: 'ratio', + }, + 'y-axis-column-layer0X3': { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'overall_sum', + references: ['y-axis-column-layer0X2'], + scale: 'ratio', + }, + 'y-axis-column-layer0X4': { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'math', + params: { + tinymathAst: { + args: ['y-axis-column-layer0X0', 'y-axis-column-layer0X3'], + location: { + max: 30, + min: 0, + }, + name: 'divide', + text: + "count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *') / overall_sum(count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *'))", + type: 'function', + }, + }, + references: ['y-axis-column-layer0X0', 'y-axis-column-layer0X3'], + scale: 'ratio', }, }, incompleteColumns: {}, diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts index eaf9c1c884a9d..5734cd1592692 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts @@ -35,10 +35,13 @@ import { USE_BREAK_DOWN_COLUMN, TERMS_COLUMN, REPORT_METRIC_FIELD, + RECORDS_FIELD, + RECORDS_PERCENTAGE_FIELD, } from './constants'; import { ColumnFilter, SeriesConfig, UrlFilter, URLReportDefinition } from '../types'; import { PersistableFilter } from '../../../../../../lens/common'; import { parseAbsoluteDate } from '../series_date_picker/date_range_picker'; +import { getDistributionInPercentageColumn } from './lens_columns/overall_column'; function getLayerReferenceName(layerId: string) { return `indexpattern-datasource-layer-${layerId}`; @@ -339,7 +342,7 @@ export class LensAttributes { return this.getTermsColumn(fieldName, columnLabel || label); } - if (fieldName === 'Records' || columnType === FILTER_RECORDS) { + if (fieldName === RECORDS_FIELD || columnType === FILTER_RECORDS) { return this.getRecordsColumn( columnLabel || label, colIndex !== undefined ? columnFilters?.[colIndex] : undefined, @@ -396,10 +399,14 @@ export class LensAttributes { } } - getMainYAxis(layerConfig: LayerConfig) { + getMainYAxis(layerConfig: LayerConfig, layerId: string, columnFilter: string) { const { sourceField, operationType, label } = layerConfig.seriesConfig.yAxisColumns[0]; - if (sourceField === 'Records' || !sourceField) { + if (sourceField === RECORDS_PERCENTAGE_FIELD) { + return getDistributionInPercentageColumn({ label, layerId, columnFilter }).main; + } + + if (sourceField === RECORDS_FIELD || !sourceField) { return this.getRecordsColumn(label); } @@ -412,9 +419,16 @@ export class LensAttributes { }); } - getChildYAxises(layerConfig: LayerConfig) { + getChildYAxises(layerConfig: LayerConfig, layerId?: string, columnFilter?: string) { const lensColumns: Record = {}; const yAxisColumns = layerConfig.seriesConfig.yAxisColumns; + const { sourceField: mainSourceField, label: mainLabel } = yAxisColumns[0]; + + if (mainSourceField === RECORDS_PERCENTAGE_FIELD && layerId) { + return getDistributionInPercentageColumn({ label: mainLabel, layerId, columnFilter }) + .supportingColumns; + } + // 1 means there is only main y axis if (yAxisColumns.length === 1) { return lensColumns; @@ -444,7 +458,7 @@ export class LensAttributes { label: label || 'Count of records', operationType: 'count', scale: 'ratio', - sourceField: 'Records', + sourceField: RECORDS_FIELD, filter: columnFilter, ...(timeScale ? { timeScale } : {}), } as CountIndexPatternColumn; @@ -546,13 +560,13 @@ export class LensAttributes { const layerId = `layer${index}`; const columnFilter = this.getLayerFilters(layerConfig, layerConfigs.length); const timeShift = this.getTimeShift(this.layerConfigs[0], layerConfig, index); - const mainYAxis = this.getMainYAxis(layerConfig); + const mainYAxis = this.getMainYAxis(layerConfig, layerId, columnFilter); layers[layerId] = { columnOrder: [ `x-axis-column-${layerId}`, ...(breakdown ? [`breakdown-column-${layerId}`] : []), `y-axis-column-${layerId}`, - ...Object.keys(this.getChildYAxises(layerConfig)), + ...Object.keys(this.getChildYAxises(layerConfig, layerId, columnFilter)), ], columns: { [`x-axis-column-${layerId}`]: this.getXAxis(layerConfig, layerId), @@ -572,7 +586,7 @@ export class LensAttributes { }), } : {}), - ...this.getChildYAxises(layerConfig), + ...this.getChildYAxises(layerConfig, layerId, columnFilter), }, incompleteColumns: {}, }; @@ -611,13 +625,13 @@ export class LensAttributes { }; } - parseFilters() {} - getJSON(): TypedLensByValueInput['attributes'] { const uniqueIndexPatternsIds = Array.from( new Set([...this.layerConfigs.map(({ indexPattern }) => indexPattern.id)]) ); + const query = this.layerConfigs[0].seriesConfig.query; + return { title: 'Prefilled from exploratory view app', description: '', @@ -641,7 +655,7 @@ export class LensAttributes { }, }, visualization: this.visualization, - query: { query: '', language: 'kuery' }, + query: query || { query: '', language: 'kuery' }, filters: [], }, }; diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_columns/overall_column.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_columns/overall_column.tsx new file mode 100644 index 0000000000000..05764517bc36f --- /dev/null +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_columns/overall_column.tsx @@ -0,0 +1,110 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import type { TinymathAST } from '@kbn/tinymath'; +import { + DataType, + CountIndexPatternColumn, + MathIndexPatternColumn, + FormulaIndexPatternColumn, + OverallSumIndexPatternColumn, +} from '../../../../../../../lens/public'; + +export function getDistributionInPercentageColumn({ + label, + layerId, + columnFilter, +}: { + label?: string; + columnFilter?: string; + layerId: string; +}) { + const yAxisColId = `y-axis-column-${layerId}`; + + let lensFormula = 'count() / overall_sum(count())'; + + if (columnFilter) { + lensFormula = `count(kql='${columnFilter}') / overall_sum(count(kql='${columnFilter}'))`; + } + + const main: FormulaIndexPatternColumn = { + label: label || 'Percentage of records', + dataType: 'number' as DataType, + operationType: 'formula', + isBucketed: false, + scale: 'ratio', + params: { + formula: lensFormula, + isFormulaBroken: false, + format: { id: 'percent', params: { decimals: 0 } }, + }, + references: [`${yAxisColId}X4`], + }; + + const countColumn: CountIndexPatternColumn = { + label: 'Part of count() / overall_sum(count())', + dataType: 'number', + operationType: 'count', + isBucketed: false, + scale: 'ratio', + sourceField: 'Records', + customLabel: true, + filter: { query: columnFilter ?? '', language: 'kuery' }, + }; + + const mathColumn: MathIndexPatternColumn = { + label: 'Part of count() / overall_sum(count())', + dataType: 'number', + operationType: 'math', + isBucketed: false, + scale: 'ratio', + params: { tinymathAst: `${yAxisColId}X1` }, + references: [`${yAxisColId}X1`], + customLabel: true, + }; + + const overAllSumColumn: OverallSumIndexPatternColumn = { + label: 'Part of count() / overall_sum(count())', + dataType: 'number', + operationType: 'overall_sum', + isBucketed: false, + scale: 'ratio', + references: [`${yAxisColId}X2`], + customLabel: true, + }; + + const tinyMathColumn: MathIndexPatternColumn = { + label: 'Part of count() / overall_sum(count())', + dataType: 'number', + operationType: 'math', + isBucketed: false, + scale: 'ratio', + params: { + tinymathAst: ({ + type: 'function', + name: 'divide', + args: [`${yAxisColId}X0`, `${yAxisColId}X3`], + location: { min: 0, max: 30 }, + text: lensFormula, + } as unknown) as TinymathAST, + }, + references: [`${yAxisColId}X0`, `${yAxisColId}X3`], + customLabel: true, + }; + + const supportingColumns: Record< + string, + CountIndexPatternColumn | MathIndexPatternColumn | OverallSumIndexPatternColumn + > = { + [`${yAxisColId}X0`]: countColumn, + [`${yAxisColId}X1`]: countColumn, + [`${yAxisColId}X2`]: mathColumn, + [`${yAxisColId}X3`]: overAllSumColumn, + [`${yAxisColId}X4`]: tinyMathColumn, + }; + + return { main, supportingColumns }; +} diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/rum/data_distribution_config.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/rum/data_distribution_config.ts index b171edf2901d5..f34c8db6c197d 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/rum/data_distribution_config.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/rum/data_distribution_config.ts @@ -6,7 +6,7 @@ */ import { ConfigProps, SeriesConfig } from '../../types'; -import { FieldLabels, RECORDS_FIELD, REPORT_METRIC_FIELD } from '../constants'; +import { FieldLabels, REPORT_METRIC_FIELD, RECORDS_PERCENTAGE_FIELD } from '../constants'; import { buildPhraseFilter } from '../utils'; import { CLIENT_GEO_COUNTRY_NAME, @@ -49,7 +49,7 @@ export function getRumDistributionConfig({ indexPattern }: ConfigProps): SeriesC }, yAxisColumns: [ { - sourceField: RECORDS_FIELD, + sourceField: RECORDS_PERCENTAGE_FIELD, label: PAGES_LOADED_LABEL, }, ], @@ -91,5 +91,7 @@ export function getRumDistributionConfig({ indexPattern }: ConfigProps): SeriesC [SERVICE_NAME]: WEB_APPLICATION_LABEL, [TRANSACTION_DURATION]: PAGE_LOAD_TIME_LABEL, }, + // rum page load transactions are always less then 60 seconds + query: { query: 'transaction.duration.us < 60000000', language: 'kuery' }, }; } diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/synthetics/data_distribution_config.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/synthetics/data_distribution_config.ts index 9783f63f5b901..2522f0b2c2581 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/synthetics/data_distribution_config.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/synthetics/data_distribution_config.ts @@ -6,7 +6,7 @@ */ import { ConfigProps, SeriesConfig } from '../../types'; -import { FieldLabels, RECORDS_FIELD, REPORT_METRIC_FIELD } from '../constants'; +import { FieldLabels, REPORT_METRIC_FIELD, RECORDS_PERCENTAGE_FIELD } from '../constants'; import { buildExistsFilter } from '../utils'; import { MONITORS_DURATION_LABEL, PINGS_LABEL } from '../constants/labels'; @@ -23,7 +23,7 @@ export function getSyntheticsDistributionConfig({ }, yAxisColumns: [ { - sourceField: RECORDS_FIELD, + sourceField: RECORDS_PERCENTAGE_FIELD, label: PINGS_LABEL, }, ], diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute.ts index edf2a42415820..569d68ad4ebff 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/test_data/sample_attribute.ts @@ -17,7 +17,15 @@ export const sampleAttribute = { indexpattern: { layers: { layer0: { - columnOrder: ['x-axis-column-layer0', 'y-axis-column-layer0'], + columnOrder: [ + 'x-axis-column-layer0', + 'y-axis-column-layer0', + 'y-axis-column-layer0X0', + 'y-axis-column-layer0X1', + 'y-axis-column-layer0X2', + 'y-axis-column-layer0X3', + 'y-axis-column-layer0X4', + ], columns: { 'x-axis-column-layer0': { sourceField: 'transaction.duration.us', @@ -34,8 +42,47 @@ export const sampleAttribute = { }, 'y-axis-column-layer0': { dataType: 'number', + filter: { + language: 'kuery', + query: + 'transaction.type: page-load and processor.event: transaction and transaction.type : *', + }, isBucketed: false, label: 'Pages loaded', + operationType: 'formula', + params: { + format: { + id: 'percent', + params: { + decimals: 0, + }, + }, + formula: + "count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *') / overall_sum(count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *'))", + isFormulaBroken: false, + }, + references: ['y-axis-column-layer0X4'], + scale: 'ratio', + }, + 'y-axis-column-layer0X0': { + customLabel: true, + dataType: 'number', + filter: { + language: 'kuery', + query: + 'transaction.type: page-load and processor.event: transaction and transaction.type : *', + }, + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'count', + scale: 'ratio', + sourceField: 'Records', + }, + 'y-axis-column-layer0X1': { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: 'Part of count() / overall_sum(count())', operationType: 'count', scale: 'ratio', sourceField: 'Records', @@ -45,6 +92,49 @@ export const sampleAttribute = { 'transaction.type: page-load and processor.event: transaction and transaction.type : *', }, }, + 'y-axis-column-layer0X2': { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'math', + params: { + tinymathAst: 'y-axis-column-layer0X1', + }, + references: ['y-axis-column-layer0X1'], + scale: 'ratio', + }, + 'y-axis-column-layer0X3': { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'overall_sum', + references: ['y-axis-column-layer0X2'], + scale: 'ratio', + }, + 'y-axis-column-layer0X4': { + customLabel: true, + dataType: 'number', + isBucketed: false, + label: 'Part of count() / overall_sum(count())', + operationType: 'math', + params: { + tinymathAst: { + args: ['y-axis-column-layer0X0', 'y-axis-column-layer0X3'], + location: { + max: 30, + min: 0, + }, + name: 'divide', + text: + "count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *') / overall_sum(count(kql='transaction.type: page-load and processor.event: transaction and transaction.type : *'))", + type: 'function', + }, + }, + references: ['y-axis-column-layer0X0', 'y-axis-column-layer0X3'], + scale: 'ratio', + }, }, incompleteColumns: {}, }, @@ -70,7 +160,7 @@ export const sampleAttribute = { }, ], }, - query: { query: '', language: 'kuery' }, + query: { query: 'transaction.duration.us < 60000000', language: 'kuery' }, filters: [], }, }; diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts index ad7c654c9a168..717d98715453d 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts @@ -63,6 +63,7 @@ export interface SeriesConfig { palette?: PaletteOutput; yTitle?: string; yConfig?: YConfig[]; + query?: { query: string; language: 'kuery' }; } export type URLReportDefinition = Record;