From 7b999163f836041e7f8bc5b9caac7c298b06bb40 Mon Sep 17 00:00:00 2001 From: Marco Liberati Date: Tue, 12 Dec 2023 10:23:24 +0100 Subject: [PATCH] [Lens] Various fixes for Heatmap (#172602) ## Summary Fixes #172433 Fixes #172574 Fixes #170240 For #172433 the bands values are now passing thru the value formatter to match users' expectations: Screenshot 2023-12-05 at 16 52 39 When the default formatter is selected something complex happens there, which might look wrong but it is still respecting Kibana's advanced settings formatter pattern (in this example `0.[000]`): Screenshot 2023-12-05 at 16 52 57 As for #170240 the problem was due to an unnecessary safe guard which was forcing the first bucket to be `1` when it was open: Screenshot 2023-12-05 at 16 52 11 As for #172574 I just fixed at root level the problem... ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios (cherry picked from commit 9f4c220ad8599f4bd98e78d4e5abc9147cc5920f) --- .../buttons/toolbar_button/toolbar_button.tsx | 4 +- .../components/heatmap_component.test.tsx | 57 +++++++++ .../public/components/heatmap_component.tsx | 12 +- .../functional/apps/lens/group4/chart_data.ts | 38 +++--- .../test/functional/apps/lens/group4/tsdb.ts | 34 +++--- .../functional/apps/lens/group5/heatmap.ts | 108 +++++++++--------- .../lens/open_in_lens/agg_based/heatmap.ts | 70 +++--------- .../test/functional/page_objects/lens_page.ts | 5 +- .../group2/open_in_lens/agg_based/heatmap.ts | 36 +----- 9 files changed, 172 insertions(+), 192 deletions(-) diff --git a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.tsx b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.tsx index 84039857d0891..1e005d110e6cf 100644 --- a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.tsx +++ b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.tsx @@ -23,7 +23,7 @@ type ButtonRenderStyle = 'standard' | 'iconButton'; interface ToolbarButtonCommonProps extends Pick< EuiButtonPropsForButton, - 'onClick' | 'iconType' | 'size' | 'data-test-subj' | 'isDisabled' + 'onClick' | 'iconType' | 'size' | 'data-test-subj' | 'isDisabled' | 'aria-label' > { /** * Render style of the toolbar button @@ -162,7 +162,7 @@ const ToolbarIconButton = ({ { + const newData: Datatable = { + type: 'datatable', + rows: [{ 'col-0-1': -3 }], + columns: [{ id: 'col-0-1', name: 'Count', meta: { type: 'number' } }], + }; + const newProps = { + ...wrapperProps, + data: newData, + args: { + ...wrapperProps.args, + palette: { + params: { + colors: ['#6092c0', '#a8bfda', '#ebeff5', '#ecb385', '#e7664c'], + stops: [1, 2, 3, 4, 5], + range: 'number', + gradient: true, + continuity: 'above', + rangeMin: -Infinity, + rangeMax: null, + }, + }, + }, + } as unknown as HeatmapRenderProps; + const component = mountWithIntl(); + expect(component.find(Heatmap).prop('colorScale')).toEqual({ + bands: [ + { + start: -Infinity, + end: 1, + color: '#6092c0', + }, + { + start: 1, + end: 2, + color: '#a8bfda', + }, + { + start: 2, + end: 3, + color: '#ebeff5', + }, + { + start: 3, + end: 4, + color: '#ecb385', + }, + { + start: 4, + end: Infinity, + color: '#e7664c', + }, + ], + type: 'bands', + }); + }); + it('renders the axis titles', () => { const component = shallowWithIntl(); expect(component.find(Heatmap).prop('xAxisTitle')).toEqual('Dest'); diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx index f0794318e6001..e541918801b59 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx @@ -97,11 +97,7 @@ function shiftAndNormalizeStops( if (params.range === 'percent') { result = min + ((max - min) * value) / 100; } - // a division by zero safeguard - if (!Number.isFinite(result)) { - return 1; - } - return Number(result.toFixed(2)); + return result; } ); } @@ -515,11 +511,9 @@ export const HeatmapComponent: FC = memo( let overwriteArrayIdx; if (endValue === Number.POSITIVE_INFINITY) { - overwriteArrayIdx = `≥ ${metricFormatter.convert(startValue)}`; + overwriteArrayIdx = `≥ ${valueFormatter(startValue)}`; } else { - overwriteArrayIdx = `${metricFormatter.convert(start)} - ${metricFormatter.convert( - endValue - )}`; + overwriteArrayIdx = `${valueFormatter(start)} - ${valueFormatter(endValue)}`; } const overwriteColor = overwriteColors?.[overwriteArrayIdx]; diff --git a/x-pack/test/functional/apps/lens/group4/chart_data.ts b/x-pack/test/functional/apps/lens/group4/chart_data.ts index 9bcd237306920..9d43abd4ac650 100644 --- a/x-pack/test/functional/apps/lens/group4/chart_data.ts +++ b/x-pack/test/functional/apps/lens/group4/chart_data.ts @@ -52,19 +52,19 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { { name: '__other__', value: 5722.77 }, ]; - function assertMatchesExpectedData(state: DebugState) { + function assertMatchesExpectedData(state: DebugState | undefined) { expect( - state.bars![0].bars.map((bar) => ({ + state?.bars![0].bars.map((bar) => ({ x: bar.x, y: Math.floor(bar.y * 100) / 100, })) ).to.eql(expectedData); } - function assertMatchesExpectedPieData(state: DebugState) { + function assertMatchesExpectedPieData(state: DebugState | undefined) { expect( state - .partition![0].partitions.map((partition) => ({ + ?.partition![0].partitions.map((partition) => ({ name: partition.name, value: Math.floor(partition.value * 100) / 100, })) @@ -74,37 +74,33 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('should render xy chart', async () => { const data = await PageObjects.lens.getCurrentChartDebugState('xyVisChart'); - assertMatchesExpectedData(data!); + assertMatchesExpectedData(data); }); it('should render pie chart', async () => { await PageObjects.lens.switchToVisualization('pie'); const data = await PageObjects.lens.getCurrentChartDebugState('partitionVisChart'); - assertMatchesExpectedPieData(data!); + assertMatchesExpectedPieData(data); }); it('should render donut chart', async () => { await PageObjects.lens.switchToVisualization('donut'); const data = await PageObjects.lens.getCurrentChartDebugState('partitionVisChart'); - assertMatchesExpectedPieData(data!); + assertMatchesExpectedPieData(data); }); it('should render treemap chart', async () => { await PageObjects.lens.switchToVisualization('treemap', 'treemap'); const data = await PageObjects.lens.getCurrentChartDebugState('partitionVisChart'); - assertMatchesExpectedPieData(data!); + assertMatchesExpectedPieData(data); }); it('should render heatmap chart', async () => { await PageObjects.lens.switchToVisualization('heatmap', 'heat'); const debugState = await PageObjects.lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } - // assert axes - expect(debugState.axes!.x[0].labels).to.eql([ + expect(debugState?.axes!.x[0].labels).to.eql([ '97.220.3.248', '169.228.188.120', '78.83.247.30', @@ -112,18 +108,18 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { '93.28.27.24', 'Other', ]); - expect(debugState.axes!.y[0].labels).to.eql(['']); + expect(debugState?.axes!.y[0].labels).to.eql(['']); // assert cells - expect(debugState.heatmap!.cells.length).to.eql(6); + expect(debugState?.heatmap!.cells.length).to.eql(6); // assert legend - expect(debugState.legend!.items).to.eql([ - { color: '#6092c0', key: '5,722.77 - 8,529.22', name: '5,722.77 - 8,529.22' }, - { color: '#a8bfda', key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66' }, - { color: '#ebeff5', key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11' }, - { color: '#ecb385', key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55' }, - { color: '#e7664c', key: '≥ 16,948.55', name: '≥ 16,948.55' }, + expect(debugState?.legend!.items).to.eql([ + { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#6092c0' }, + { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#a8bfda' }, + { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#ebeff5' }, + { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ecb385' }, + { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#e7664c' }, ]); }); diff --git a/x-pack/test/functional/apps/lens/group4/tsdb.ts b/x-pack/test/functional/apps/lens/group4/tsdb.ts index 745592a02cb1d..730318f33db97 100644 --- a/x-pack/test/functional/apps/lens/group4/tsdb.ts +++ b/x-pack/test/functional/apps/lens/group4/tsdb.ts @@ -224,13 +224,13 @@ function getDataMapping( return dataStreamMapping; } -function sumFirstNValues(n: number, bars: Array<{ y: number }>): number { +function sumFirstNValues(n: number, bars: Array<{ y: number }> | undefined): number { const indexes = Array(n) .fill(1) .map((_, i) => i); let countSum = 0; for (const index of indexes) { - if (bars[index]) { + if (bars?.[index]) { countSum += bars[index].y; } } @@ -816,29 +816,29 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('xyVisChart'); const data = await PageObjects.lens.getCurrentChartDebugState('xyVisChart'); - const counterBars = data.bars![0].bars; - const countBars = data.bars![1].bars; + const counterBars = data?.bars![0].bars; + const countBars = data?.bars![1].bars; log.info('Check counter data before the upgrade'); // check there's some data before the upgrade - expect(counterBars[0].y).to.eql(5000); + expect(counterBars?.[0].y).to.eql(5000); log.info('Check counter data after the upgrade'); // check there's some data after the upgrade - expect(counterBars[counterBars.length - 1].y).to.eql(5000); + expect(counterBars?.[counterBars.length - 1].y).to.eql(5000); // due to the flaky nature of exact check here, we're going to relax it // as long as there's data before and after it is ok log.info('Check count before the upgrade'); - const columnsToCheck = countBars.length / 2; + const columnsToCheck = countBars ? countBars.length / 2 : 0; // Before the upgrade the count is N times the indexes expect(sumFirstNValues(columnsToCheck, countBars)).to.be.greaterThan( indexes.length * TEST_DOC_COUNT - 1 ); log.info('Check count after the upgrade'); // later there are only documents for the upgraded stream - expect(sumFirstNValues(columnsToCheck, [...countBars].reverse())).to.be.greaterThan( - TEST_DOC_COUNT - 1 - ); + expect( + sumFirstNValues(columnsToCheck, [...(countBars ?? [])].reverse()) + ).to.be.greaterThan(TEST_DOC_COUNT - 1); }); }); }); @@ -911,8 +911,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('xyVisChart'); const data = await PageObjects.lens.getCurrentChartDebugState('xyVisChart'); - const bars = data.bars![0].bars; - const columnsToCheck = bars.length / 2; + const bars = data?.bars![0].bars; + const columnsToCheck = bars ? bars.length / 2 : 0; // due to the flaky nature of exact check here, we're going to relax it // as long as there's data before and after it is ok log.info('Check count before the downgrade'); @@ -922,7 +922,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { ); log.info('Check count after the downgrade'); // later there are only documents for the upgraded stream - expect(sumFirstNValues(columnsToCheck, [...bars].reverse())).to.be.greaterThan( + expect(sumFirstNValues(columnsToCheck, [...(bars ?? [])].reverse())).to.be.greaterThan( TEST_DOC_COUNT - 1 ); }); @@ -952,8 +952,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('xyVisChart'); const dataBefore = await PageObjects.lens.getCurrentChartDebugState('xyVisChart'); - const barsBefore = dataBefore.bars![0].bars; - expect(barsBefore.some(({ y }) => y)).to.eql(true); + const barsBefore = dataBefore?.bars![0].bars; + expect(barsBefore?.some(({ y }) => y)).to.eql(true); // check after the downgrade await PageObjects.lens.goToTimeRange( @@ -969,8 +969,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('xyVisChart'); const dataAfter = await PageObjects.lens.getCurrentChartDebugState('xyVisChart'); - const barsAfter = dataAfter.bars![0].bars; - expect(barsAfter.some(({ y }) => y)).to.eql(true); + const barsAfter = dataAfter?.bars![0].bars; + expect(barsAfter?.some(({ y }) => y)).to.eql(true); }); }); }); diff --git a/x-pack/test/functional/apps/lens/group5/heatmap.ts b/x-pack/test/functional/apps/lens/group5/heatmap.ts index 3e37ce65cc5bc..26e77578f4545 100644 --- a/x-pack/test/functional/apps/lens/group5/heatmap.ts +++ b/x-pack/test/functional/apps/lens/group5/heatmap.ts @@ -40,12 +40,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.switchToVisualization('heatmap', 'heat'); const debugState = await PageObjects.lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } - // assert axes - expect(debugState.axes!.x[0].labels).to.eql([ + expect(debugState?.axes!.x[0].labels).to.eql([ '97.220.3.248', '169.228.188.120', '78.83.247.30', @@ -53,18 +49,18 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { '93.28.27.24', 'Other', ]); - expect(debugState.axes!.y[0].labels).to.eql(['']); + expect(debugState?.axes!.y[0].labels).to.eql(['']); // assert cells - expect(debugState.heatmap!.cells.length).to.eql(6); + expect(debugState?.heatmap!.cells.length).to.eql(6); // assert legend - expect(debugState.legend!.items).to.eql([ - { key: '5,722.77 - 8,529.22', name: '5,722.77 - 8,529.22', color: '#6092c0' }, - { key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66', color: '#a8bfda' }, - { key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11', color: '#ebeff5' }, - { key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55', color: '#ecb385' }, - { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' }, + expect(debugState?.legend!.items).to.eql([ + { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#6092c0' }, + { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#a8bfda' }, + { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#ebeff5' }, + { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ecb385' }, + { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#e7664c' }, ]); }); @@ -80,17 +76,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); const debugState = await PageObjects.lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } - // assert legend has changed - expect(debugState.legend!.items).to.eql([ - { key: '7,126 - 8,529.22', name: '7,126 - 8,529.22', color: '#6092c0' }, - { key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66', color: '#a8bfda' }, - { key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11', color: '#ebeff5' }, - { key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55', color: '#ecb385' }, - { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' }, + expect(debugState?.legend!.items).to.eql([ + { key: '7,125.997 - 8,529.22', name: '7,125.997 - 8,529.22', color: '#6092c0' }, + { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#a8bfda' }, + { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#ebeff5' }, + { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ecb385' }, + { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#e7664c' }, ]); }); @@ -98,12 +90,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await testSubjects.click('lnsPalettePanel_dynamicColoring_rangeType_groups_number'); const debugState = await PageObjects.lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } - // assert legend has changed - expect(debugState.legend!.items).to.eql([ + expect(debugState?.legend!.items).to.eql([ { key: '7,125.99 - 8,529.2', name: '7,125.99 - 8,529.2', color: '#6092c0' }, { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#a8bfda' }, { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#ebeff5' }, @@ -123,12 +111,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const debugState = await PageObjects.lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } - // assert legend has changed - expect(debugState.legend!.items).to.eql([ + expect(debugState?.legend!.items).to.eql([ { key: '0 - 8,529.2', name: '0 - 8,529.2', color: '#6092c0' }, { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#a8bfda' }, { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#ebeff5' }, @@ -137,22 +121,40 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { ]); }); + it('should reflect the apply stop value without rounding', async () => { + // target item is 5722.774804505345 + // so set a value slightly lower which can be rounded + await testSubjects.setValue('lnsPalettePanel_dynamicColoring_range_value_0', '5722.7747', { + clearWithKeyboard: true, + }); + const debugState = await PageObjects.lens.getCurrentChartDebugState('heatmapChart'); + + // assert legend has a rounded value + expect(debugState?.legend!.items).to.eql([ + { key: '5,722.775 - 8,529.2', name: '5,722.775 - 8,529.2', color: '#6092c0' }, + { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#a8bfda' }, + { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#ebeff5' }, + { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#ecb385' }, + { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' }, + ]); + // assert the cell has the correct coloring despite the legend rounding + expect(debugState?.heatmap!.cells[debugState.heatmap!.cells.length - 1].fill).to.be( + 'rgba(96, 146, 192, 1)' // rgba version of #6092c0 + ); + }); + it('should reset stop numbers when changing palette', async () => { await PageObjects.lens.changePaletteTo('status'); const debugState = await PageObjects.lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } - // assert legend has changed - expect(debugState.legend!.items).to.eql([ - { key: '5,722.77 - 8,529.22', name: '5,722.77 - 8,529.22', color: '#209280' }, - { key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66', color: '#54b399' }, - { key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11', color: '#d6bf57' }, - { key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55', color: '#e7664c' }, - { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#cc5642' }, + expect(debugState?.legend!.items).to.eql([ + { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#209280' }, + { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#54b399' }, + { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#d6bf57' }, + { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#e7664c' }, + { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#cc5642' }, ]); }); @@ -161,17 +163,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const debugState = await PageObjects.lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } - // assert legend has not changed - expect(debugState.legend!.items).to.eql([ - { key: '5,722.77 - 8,529.22', name: '5,722.77 - 8,529.22', color: '#209280' }, - { key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66', color: '#54b399' }, - { key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11', color: '#d6bf57' }, - { key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55', color: '#e7664c' }, - { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#cc5642' }, + expect(debugState?.legend!.items).to.eql([ + { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#209280' }, + { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#54b399' }, + { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#d6bf57' }, + { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#e7664c' }, + { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#cc5642' }, ]); }); @@ -183,9 +181,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await testSubjects.selectValue('lnsLeftAxisTitle-select', 'Auto'); const debugState = await PageObjects.lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } + expect(debugState?.axes?.y?.[0].title).to.eql('Average of bytes'); }); }); diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/heatmap.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/heatmap.ts index ad4b1e123b554..f812b741bd440 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/heatmap.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/heatmap.ts @@ -56,15 +56,11 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await lens.waitForVisualization('heatmapChart'); const debugState = await lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } - // assert axes - expect(debugState.axes!.x[0].labels).to.eql(['win 8', 'win xp', 'win 7', 'ios', 'osx']); - expect(debugState.axes!.y[0].labels).to.eql(['']); - expect(debugState.heatmap!.cells.length).to.eql(5); - expect(debugState.legend!.items).to.eql([ + expect(debugState?.axes!.x[0].labels).to.eql(['win 8', 'win xp', 'win 7', 'ios', 'osx']); + expect(debugState?.axes!.y[0].labels).to.eql(['']); + expect(debugState?.heatmap!.cells.length).to.eql(5); + expect(debugState?.legend!.items).to.eql([ { color: '#006837', key: '1,322 - 1,717.5', @@ -94,13 +90,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await lens.waitForVisualization('heatmapChart'); const debugState = await lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } - - expect(debugState.axes!.x[0].labels).to.eql(['*']); - expect(debugState.axes!.y[0].labels).to.eql(['win 8', 'win xp', 'win 7', 'ios', 'osx']); - expect(debugState.heatmap!.cells.length).to.eql(5); + expect(debugState?.axes!.x[0].labels).to.eql(['*']); + expect(debugState?.axes!.y[0].labels).to.eql(['win 8', 'win xp', 'win 7', 'ios', 'osx']); + expect(debugState?.heatmap!.cells.length).to.eql(5); }); it('should respect heatmap colors number', async () => { @@ -118,41 +110,13 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await lens.waitForVisualization('heatmapChart'); const debugState = await lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } - - expect(debugState.legend!.items).to.eql([ - { - color: '#006837', - key: '1,322 - 1,585.67', - name: '1,322 - 1,585.67', - }, - { - color: '#4CB15D', - key: '1,585.67 - 1,849.33', - name: '1,585.67 - 1,849.33', - }, - { - color: '#B7E075', - key: '1,849.33 - 2,113', - name: '1,849.33 - 2,113', - }, - { - color: '#FEFEBD', - key: '2,113 - 2,376.67', - name: '2,113 - 2,376.67', - }, - { - color: '#FDBF6F', - key: '2,376.67 - 2,640.33', - name: '2,376.67 - 2,640.33', - }, - { - color: '#EA5839', - key: '2,640.33 - 2,904', - name: '2,640.33 - 2,904', - }, + expect(debugState?.legend!.items).to.eql([ + { key: '1,322 - 1,585.667', name: '1,322 - 1,585.667', color: '#006837' }, + { key: '1,585.667 - 1,849.333', name: '1,585.667 - 1,849.333', color: '#4CB15D' }, + { key: '1,849.333 - 2,113', name: '1,849.333 - 2,113', color: '#B7E075' }, + { key: '2,113 - 2,376.667', name: '2,113 - 2,376.667', color: '#FEFEBD' }, + { key: '2,376.667 - 2,640.333', name: '2,376.667 - 2,640.333', color: '#FDBF6F' }, + { key: '2,640.333 - 2,904', name: '2,640.333 - 2,904', color: '#EA5839' }, ]); }); @@ -178,11 +142,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await lens.waitForVisualization('heatmapChart'); const debugState = await lens.getCurrentChartDebugState('heatmapChart'); - if (!debugState) { - throw new Error('Debug state is not available'); - } - - expect(debugState.legend!.items).to.eql([ + expect(debugState?.legend!.items).to.eql([ { color: '#006837', key: '0 - 100', diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index a08b582d98f12..5c7eef4cb9263 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -8,6 +8,7 @@ import expect from '@kbn/expect'; import { setTimeout as setTimeoutAsync } from 'timers/promises'; import type { FittingFunction, XYCurveType } from '@kbn/lens-plugin/public'; +import { DebugState } from '@elastic/charts'; import { WebElementWrapper } from '../../../../test/functional/services/lib/web_element_wrapper'; import { FtrProviderContext } from '../ftr_provider_context'; import { logWrapper } from './log_wrapper'; @@ -1093,9 +1094,9 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont ); }, - async getCurrentChartDebugState(visType: string) { + async getCurrentChartDebugState(visType: string): Promise { await this.waitForVisualization(visType); - return await elasticChart.getChartDebugData('lnsWorkspace'); + return (await elasticChart.getChartDebugData('lnsWorkspace'))!; }, /** diff --git a/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/heatmap.ts b/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/heatmap.ts index f1c362838d77e..6e486d6d34e5d 100644 --- a/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/heatmap.ts +++ b/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/heatmap.ts @@ -102,36 +102,12 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { expect(debugState).to.not.be.eql(null); expect(debugState.legend!.items).to.eql([ - { - color: '#006837', - key: '1,322 - 1,585.67', - name: '1,322 - 1,585.67', - }, - { - color: '#4CB15D', - key: '1,585.67 - 1,849.33', - name: '1,585.67 - 1,849.33', - }, - { - color: '#B7E075', - key: '1,849.33 - 2,113', - name: '1,849.33 - 2,113', - }, - { - color: '#FEFEBD', - key: '2,113 - 2,376.67', - name: '2,113 - 2,376.67', - }, - { - color: '#FDBF6F', - key: '2,376.67 - 2,640.33', - name: '2,376.67 - 2,640.33', - }, - { - color: '#EA5839', - key: '2,640.33 - 2,904', - name: '2,640.33 - 2,904', - }, + { key: '1,322 - 1,585.667', name: '1,322 - 1,585.667', color: '#006837' }, + { key: '1,585.667 - 1,849.333', name: '1,585.667 - 1,849.333', color: '#4CB15D' }, + { key: '1,849.333 - 2,113', name: '1,849.333 - 2,113', color: '#B7E075' }, + { key: '2,113 - 2,376.667', name: '2,113 - 2,376.667', color: '#FEFEBD' }, + { key: '2,376.667 - 2,640.333', name: '2,376.667 - 2,640.333', color: '#FDBF6F' }, + { key: '2,640.333 - 2,904', name: '2,640.333 - 2,904', color: '#EA5839' }, ]); });