github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.12] [Lens] Various fixes for Heatmap (#172602) (#173133)

Browse source 
# Backport

This will backport the following commits from `main` to `8.12`:
- [[Lens] Various fixes for Heatmap
(#172602)](https://github.com/elastic/kibana/pull/172602)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Marco
Liberati","email":"dej611@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-12-12T09:23:24Z","message":"[Lens]
Various fixes for Heatmap (#172602)\n\n## Summary\r\n\r\nFixes
#172433\r\nFixes #172574\r\nFixes #170240\r\n\r\nFor #172433 the bands
values are now passing thru the value formatter to\r\nmatch users'
expectations:\r\n\r\n<img width=\"1227\" alt=\"Screenshot 2023-12-05 at
16 52
39\"\r\nsrc=\"42d2c4ba-1b6b-4785-84e7-0ad73670ecdc\">\r\n\r\nWhen
the default formatter is selected something complex happens
there,\r\nwhich might look wrong but it is still respecting Kibana's
advanced\r\nsettings formatter pattern (in this example
`0.[000]`):\r\n\r\n<img width=\"1234\" alt=\"Screenshot 2023-12-05 at 16
52
57\"\r\nsrc=\"7fe7dd1d-eff1-40fa-9e52-8a7ff20d0faf\">\r\n\r\nAs
for #170240 the problem was due to an unnecessary safe guard
which\r\nwas forcing the first bucket to be `1` when it was
open:\r\n\r\n<img width=\"1227\" alt=\"Screenshot 2023-12-05 at 16 52
11\"\r\nsrc=\"a3ac437d-7b04-489d-b0fc-6c2b456971de\">\r\n\r\nAs
for #172574 I just fixed at root level the problem...\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9f4c220ad8599f4bd98e78d4e5abc9147cc5920f","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Visualizations","Feature:Lens","backport:prev-minor","v8.13.0"],"number":172602,"url":"https://github.com/elastic/kibana/pull/172602","mergeCommit":{"message":"[Lens]
Various fixes for Heatmap (#172602)\n\n## Summary\r\n\r\nFixes
#172433\r\nFixes #172574\r\nFixes #170240\r\n\r\nFor #172433 the bands
values are now passing thru the value formatter to\r\nmatch users'
expectations:\r\n\r\n<img width=\"1227\" alt=\"Screenshot 2023-12-05 at
16 52
39\"\r\nsrc=\"42d2c4ba-1b6b-4785-84e7-0ad73670ecdc\">\r\n\r\nWhen
the default formatter is selected something complex happens
there,\r\nwhich might look wrong but it is still respecting Kibana's
advanced\r\nsettings formatter pattern (in this example
`0.[000]`):\r\n\r\n<img width=\"1234\" alt=\"Screenshot 2023-12-05 at 16
52
57\"\r\nsrc=\"7fe7dd1d-eff1-40fa-9e52-8a7ff20d0faf\">\r\n\r\nAs
for #170240 the problem was due to an unnecessary safe guard
which\r\nwas forcing the first bucket to be `1` when it was
open:\r\n\r\n<img width=\"1227\" alt=\"Screenshot 2023-12-05 at 16 52
11\"\r\nsrc=\"a3ac437d-7b04-489d-b0fc-6c2b456971de\">\r\n\r\nAs
for #172574 I just fixed at root level the problem...\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9f4c220ad8599f4bd98e78d4e5abc9147cc5920f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/172602","number":172602,"mergeCommit":{"message":"[Lens]
Various fixes for Heatmap (#172602)\n\n## Summary\r\n\r\nFixes
#172433\r\nFixes #172574\r\nFixes #170240\r\n\r\nFor #172433 the bands
values are now passing thru the value formatter to\r\nmatch users'
expectations:\r\n\r\n<img width=\"1227\" alt=\"Screenshot 2023-12-05 at
16 52
39\"\r\nsrc=\"42d2c4ba-1b6b-4785-84e7-0ad73670ecdc\">\r\n\r\nWhen
the default formatter is selected something complex happens
there,\r\nwhich might look wrong but it is still respecting Kibana's
advanced\r\nsettings formatter pattern (in this example
`0.[000]`):\r\n\r\n<img width=\"1234\" alt=\"Screenshot 2023-12-05 at 16
52
57\"\r\nsrc=\"7fe7dd1d-eff1-40fa-9e52-8a7ff20d0faf\">\r\n\r\nAs
for #170240 the problem was due to an unnecessary safe guard
which\r\nwas forcing the first bucket to be `1` when it was
open:\r\n\r\n<img width=\"1227\" alt=\"Screenshot 2023-12-05 at 16 52
11\"\r\nsrc=\"a3ac437d-7b04-489d-b0fc-6c2b456971de\">\r\n\r\nAs
for #172574 I just fixed at root level the problem...\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9f4c220ad8599f4bd98e78d4e5abc9147cc5920f"}}]}]
BACKPORT-->

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2023-12-12 05:39:23 -05:00 • committed by GitHub
parent 5f7be13c20
commit 94bccfe200
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 172 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.tsx
View file

@ -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 = ({
<EuiButtonIcon
{...rest}
disabled={isDisabled}
aria-label={label}
aria-label={label ?? rest['aria-label']}
size={size}
iconSize={size}
css={cssProps}

57
src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx
View file

@ -379,6 +379,63 @@ describe('HeatmapComponent', function () {
});
});
it('should keep the minimum open end', () => {
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(<HeatmapComponent {...newProps} />);
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(<HeatmapComponent {...wrapperProps} />);
expect(component.find(Heatmap).prop('xAxisTitle')).toEqual('Dest');

12
src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
View file

@ -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<HeatmapRenderProps> = 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];

38
x-pack/test/functional/apps/lens/group4/chart_data.ts
View file

@ -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' },
]);
});

34
x-pack/test/functional/apps/lens/group4/tsdb.ts
View file

@ -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);
});
});
});

108
x-pack/test/functional/apps/lens/group5/heatmap.ts
View file

@ -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');
});
});

70
x-pack/test/functional/apps/lens/open_in_lens/agg_based/heatmap.ts
View file

@ -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',

5
x-pack/test/functional/page_objects/lens_page.ts
View file

@ -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<DebugState> {
await this.waitForVisualization(visType);
return await elasticChart.getChartDebugData('lnsWorkspace');
return (await elasticChart.getChartDebugData('lnsWorkspace'))!;
},
/**

36
x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/heatmap.ts
View file

@ -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' },
]);
});