Update dependency @elastic/charts to v24.5.1 (#89822)

Updates @elastic/charts to 24.5.1 with some Kibana related fixes:
- align tooltip z-index to EUI tooltip z-index
- external tooltip legend extra value sync
- legend: hierarchical legend order should follow the tree paths


fix #84307

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Marco Vettorello <vettorello.marco@gmail.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
renovate[bot] 2021-02-11 09:18:48 +01:00 committed by GitHub
parent 7d9b4ed9dc
commit 57d9dd1419
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 157 additions and 82 deletions

View file

@ -351,7 +351,7 @@
"@cypress/webpack-preprocessor": "^5.5.0",
"@elastic/apm-rum": "^5.6.1",
"@elastic/apm-rum-react": "^1.2.5",
"@elastic/charts": "24.4.0",
"@elastic/charts": "24.5.1",
"@elastic/eslint-config-kibana": "link:packages/elastic-eslint-config-kibana",
"@elastic/eslint-plugin-eui": "0.0.2",
"@elastic/github-checks-reporter": "0.0.20b3",

View file

@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
import { ScaleContinuousType } from '@elastic/charts/dist/scales';
import { ScaleContinuousType } from '@elastic/charts';
import { Datatable } from '../../../expressions/public';
import { BUCKET_TYPES } from '../../../data/public';

View file

@ -21,7 +21,7 @@ export const getXDomain = (params: Aspect['params']): DomainRange => {
const minInterval = (params as DateHistogramParams | HistogramParams)?.interval ?? undefined;
if ((params as DateHistogramParams).date) {
const bounds = getTimefilter().getBounds();
const bounds = getTimefilter().getActiveBounds();
if (bounds) {
return {

View file

@ -17,8 +17,8 @@ import {
SeriesName,
Accessor,
AccessorFn,
ColorVariant,
} from '@elastic/charts';
import { ColorVariant } from '@elastic/charts/dist/utils/commons';
import { DatatableRow } from '../../../expressions/public';

View file

@ -96,7 +96,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
it('should show correct chart', async function () {
const xAxisLabels = await PageObjects.visChart.getExpectedValue(
['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00', '2015-09-23 00:00'],
['2015-09-19 12:00', '2015-09-20 12:00', '2015-09-21 12:00', '2015-09-22 12:00']
[
'2015-09-20 00:00',
'2015-09-20 12:00',
'2015-09-21 00:00',
'2015-09-21 12:00',
'2015-09-22 00:00',
'2015-09-22 12:00',
]
);
const yAxisLabels = await PageObjects.visChart.getExpectedValue(
['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],

View file

@ -169,8 +169,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.toggleGridCategoryLines();
await PageObjects.visEditor.clickGo();
const gridLines = await PageObjects.visChart.getGridLines();
const expectedCount = await PageObjects.visChart.getExpectedValue(9, 5);
expect(gridLines.length).to.be(expectedCount);
// FLAKY relaxing as depends on chart size/browser size and produce differences between local and CI
// The objective here is to check whenever the grid lines are rendered, not the exact quantity
expect(gridLines.length).to.be.greaterThan(0);
gridLines.forEach((gridLine) => {
expect(gridLine.y).to.be(0);
});
@ -181,8 +182,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.toggleGridCategoryLines();
await PageObjects.visEditor.clickGo();
const gridLines = await PageObjects.visChart.getGridLines();
const expectedCount = await PageObjects.visChart.getExpectedValue(9, 8);
expect(gridLines.length).to.be(expectedCount);
// FLAKY relaxing as depends on chart size/browser size and produce differences between local and CI
// The objective here is to check whenever the grid lines are rendered, not the exact quantity
expect(gridLines.length).to.be.greaterThan(0);
gridLines.forEach((gridLine) => {
expect(gridLine.x).to.be(0);
});
@ -267,7 +269,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
it('should show round labels in default timezone', async function () {
const expectedLabels = await PageObjects.visChart.getExpectedValue(
['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00'],
['2015-09-19 12:00', '2015-09-20 12:00', '2015-09-21 12:00', '2015-09-22 12:00']
['2015-09-20 00:00', '2015-09-20 18:00', '2015-09-21 12:00', '2015-09-22 06:00']
);
await initChart();
const labels = await PageObjects.visChart.getXAxisLabels();
@ -277,13 +279,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
it('should show round labels in different timezone', async function () {
const expectedLabels = await PageObjects.visChart.getExpectedValue(
['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00'],
[
'2015-09-19 12:00',
'2015-09-20 06:00',
'2015-09-21 00:00',
'2015-09-21 18:00',
'2015-09-22 12:00',
]
['2015-09-19 18:00', '2015-09-20 12:00', '2015-09-21 06:00', '2015-09-22 00:00']
);
await kibanaServer.uiSettings.update({ 'dateFormat:tz': 'America/Phoenix' });

View file

@ -441,7 +441,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visChart.waitForVisualizationRenderingStabilized();
await PageObjects.visEditor.clickGo();
const expectedEntries = ['200', '404', '503'];
const expectedEntries = await PageObjects.visChart.getExpectedValue(
['200', '404', '503'],
['503', '404', '200'] // sorting aligned with rendered geometries
);
const legendEntries = await PageObjects.visChart.getLegendEntries();
expect(legendEntries).to.eql(expectedEntries);
});
@ -451,7 +454,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.selectCustomSortMetric(3, 'Min', 'bytes');
await PageObjects.visEditor.clickGo();
const expectedEntries = ['404', '200', '503'];
const expectedEntries = await PageObjects.visChart.getExpectedValue(
['404', '200', '503'],
['503', '200', '404'] // sorting aligned with rendered geometries
);
const legendEntries = await PageObjects.visChart.getLegendEntries();
expect(legendEntries).to.eql(expectedEntries);
});
@ -484,23 +490,42 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visChart.waitForVisualizationRenderingStabilized();
await PageObjects.visEditor.clickGo();
const expectedEntries = [
'200 - win 8',
'200 - win xp',
'200 - ios',
'200 - osx',
'200 - win 7',
'404 - ios',
'503 - ios',
'503 - osx',
'503 - win 7',
'503 - win 8',
'503 - win xp',
'404 - osx',
'404 - win 7',
'404 - win 8',
'404 - win xp',
];
const expectedEntries = await PageObjects.visChart.getExpectedValue(
[
'200 - win 8',
'200 - win xp',
'200 - ios',
'200 - osx',
'200 - win 7',
'404 - ios',
'503 - ios',
'503 - osx',
'503 - win 7',
'503 - win 8',
'503 - win xp',
'404 - osx',
'404 - win 7',
'404 - win 8',
'404 - win xp',
],
[
'404 - win xp',
'404 - win 8',
'404 - win 7',
'404 - osx',
'503 - win xp',
'503 - win 8',
'503 - win 7',
'503 - osx',
'503 - ios',
'404 - ios',
'200 - win 7',
'200 - osx',
'200 - ios',
'200 - win xp',
'200 - win 8',
]
);
const legendEntries = await PageObjects.visChart.getLegendEntries();
expect(legendEntries).to.eql(expectedEntries);
});
@ -511,7 +536,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.toggleDisabledAgg(3);
await PageObjects.visEditor.clickGo();
const expectedEntries = ['win 8', 'win xp', 'ios', 'osx', 'win 7'];
const expectedEntries = await PageObjects.visChart.getExpectedValue(
['win 8', 'win xp', 'ios', 'osx', 'win 7'],
['win 7', 'osx', 'ios', 'win xp', 'win 8']
);
const legendEntries = await PageObjects.visChart.getLegendEntries();
expect(legendEntries).to.eql(expectedEntries);
});

View file

@ -213,7 +213,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.clickGo();
await PageObjects.header.waitUntilLoadingHasFinished();
const expectedEntries = ['200', '404', '503'];
const expectedEntries = await PageObjects.visChart.getExpectedValue(
['200', '404', '503'],
['503', '404', '200'] // sorting aligned with rendered geometries
);
const legendEntries = await PageObjects.visChart.getLegendEntries();
expect(legendEntries).to.eql(expectedEntries);
});
@ -239,23 +243,42 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.clickGo();
await PageObjects.header.waitUntilLoadingHasFinished();
const expectedEntries = [
'200 - win 8',
'200 - win xp',
'200 - ios',
'200 - osx',
'200 - win 7',
'404 - ios',
'503 - ios',
'503 - osx',
'503 - win 7',
'503 - win 8',
'503 - win xp',
'404 - osx',
'404 - win 7',
'404 - win 8',
'404 - win xp',
];
const expectedEntries = await PageObjects.visChart.getExpectedValue(
[
'200 - win 8',
'200 - win xp',
'200 - ios',
'200 - osx',
'200 - win 7',
'404 - ios',
'503 - ios',
'503 - osx',
'503 - win 7',
'503 - win 8',
'503 - win xp',
'404 - osx',
'404 - win 7',
'404 - win 8',
'404 - win xp',
],
[
'404 - win xp',
'404 - win 8',
'404 - win 7',
'404 - osx',
'503 - win xp',
'503 - win 8',
'503 - win 7',
'503 - osx',
'503 - ios',
'404 - ios',
'200 - win 7',
'200 - osx',
'200 - ios',
'200 - win xp',
'200 - win 8',
]
);
const legendEntries = await PageObjects.visChart.getLegendEntries();
expect(legendEntries).to.eql(expectedEntries);
});
@ -265,7 +288,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.clickGo();
await PageObjects.header.waitUntilLoadingHasFinished();
const expectedEntries = ['win 8', 'win xp', 'ios', 'osx', 'win 7'];
const expectedEntries = await PageObjects.visChart.getExpectedValue(
['win 8', 'win xp', 'ios', 'osx', 'win 7'],
['win 7', 'osx', 'ios', 'win xp', 'win 8']
);
const legendEntries = await PageObjects.visChart.getLegendEntries();
expect(legendEntries).to.eql(expectedEntries);
});

View file

@ -20,12 +20,12 @@ import {
DARK_THEME,
LIGHT_THEME,
Fit,
Position,
} from '@elastic/charts';
import {
EUI_CHARTS_THEME_DARK,
EUI_CHARTS_THEME_LIGHT,
} from '@elastic/eui/dist/eui_charts_theme';
import { Position } from '@elastic/charts/dist/utils/commons';
import styled from 'styled-components';
import { PercentileAnnotations } from '../PageLoadDistribution/PercentileAnnotations';
import { I18LABELS } from '../translations';

View file

@ -17,8 +17,8 @@ import {
SeriesNameFn,
Settings,
timeFormatter,
Position,
} from '@elastic/charts';
import { Position } from '@elastic/charts/dist/utils/commons';
import {
EUI_CHARTS_THEME_DARK,
EUI_CHARTS_THEME_LIGHT,

View file

@ -6,12 +6,14 @@
*/
import React from 'react';
import { Partition, SeriesIdentifier, Settings } from '@elastic/charts';
import {
Partition,
SeriesIdentifier,
Settings,
NodeColorAccessor,
ShapeTreeNode,
} from '@elastic/charts/dist/chart_types/partition_chart/layout/types/viewmodel_types';
import { HierarchyOfArrays } from '@elastic/charts/dist/chart_types/partition_chart/layout/utils/group_by_rollup';
HierarchyOfArrays,
} from '@elastic/charts';
import { shallow } from 'enzyme';
import { LensMultiTable } from '../types';
import { PieComponent } from './render_function';
@ -214,7 +216,10 @@ describe('PieVisualization component', () => {
const defaultArgs = getDefaultArgs();
const component = shallow(<PieComponent args={{ ...args }} {...defaultArgs} />);
component.find(Settings).first().prop('onElementClick')!([
[[{ groupByRollup: 6, value: 6 }], {} as SeriesIdentifier],
[
[{ groupByRollup: 6, value: 6, depth: 1, path: [], sortIndex: 1 }],
{} as SeriesIdentifier,
],
]);
expect(defaultArgs.onClickValue.mock.calls[0][0]).toMatchInlineSnapshot(`

View file

@ -64,7 +64,13 @@ describe('render helpers', () => {
{ a: 'Foo', b: 6 },
],
};
expect(getFilterContext([{ groupByRollup: 'Test', value: 100 }], ['a'], table)).toEqual({
expect(
getFilterContext(
[{ groupByRollup: 'Test', value: 100, depth: 1, path: [], sortIndex: 1 }],
['a'],
table
)
).toEqual({
data: [
{
row: 1,
@ -90,7 +96,13 @@ describe('render helpers', () => {
{ a: 'Foo', b: 'Three', c: 6 },
],
};
expect(getFilterContext([{ groupByRollup: 'Test', value: 100 }], ['a', 'b'], table)).toEqual({
expect(
getFilterContext(
[{ groupByRollup: 'Test', value: 100, depth: 1, path: [], sortIndex: 1 }],
['a', 'b'],
table
)
).toEqual({
data: [
{
row: 1,
@ -119,8 +131,8 @@ describe('render helpers', () => {
expect(
getFilterContext(
[
{ groupByRollup: 'Test', value: 100 },
{ groupByRollup: 'Two', value: 5 },
{ groupByRollup: 'Test', value: 100, depth: 1, path: [], sortIndex: 1 },
{ groupByRollup: 'Two', value: 5, depth: 1, path: [], sortIndex: 1 },
],
['a', 'b'],
table

View file

@ -24,12 +24,12 @@ import {
ElementClickListener,
TooltipValue,
HeatmapSpec,
TooltipSettings,
HeatmapBrushEvent,
} from '@elastic/charts';
import moment from 'moment';
import { HeatmapBrushEvent } from '@elastic/charts/dist/chart_types/heatmap/layout/types/config_types';
import { i18n } from '@kbn/i18n';
import { TooltipSettings } from '@elastic/charts/dist/specs/settings';
import { SwimLanePagination } from './swimlane_pagination';
import { AppStateSelectedCells, OverallSwimlaneData, ViewBySwimLaneData } from './explorer_utils';
import { ANOMALY_THRESHOLD, SEVERITY_COLORS } from '../../../common';

View file

@ -39,6 +39,7 @@ exports[`DonutChart component passes correct props without errors for valid prop
"fill": "white",
"opacity": 1,
"radius": 2,
"shape": "circle",
"strokeWidth": 1,
"visible": false,
},
@ -134,6 +135,7 @@ exports[`DonutChart component passes correct props without errors for valid prop
"fill": "white",
"opacity": 1,
"radius": 2,
"shape": "circle",
"strokeWidth": 1,
"visible": true,
},
@ -170,12 +172,17 @@ exports[`DonutChart component passes correct props without errors for valid prop
"fill": "#F5F5F5",
"visible": true,
},
"line": Object {
"crossLine": Object {
"dash": Array [
5,
5,
],
"stroke": "#777",
"stroke": "#98A2B3",
"strokeWidth": 1,
"visible": true,
},
"line": Object {
"stroke": "#98A2B3",
"strokeWidth": 1,
"visible": true,
},
@ -196,6 +203,7 @@ exports[`DonutChart component passes correct props without errors for valid prop
"fill": "white",
"opacity": 1,
"radius": 2,
"shape": "circle",
"strokeWidth": 1,
"visible": true,
},

View file

@ -7,8 +7,7 @@
import React from 'react';
import moment from 'moment';
import { AnnotationTooltipFormatter, RectAnnotation } from '@elastic/charts';
import { RectAnnotationDatum } from '@elastic/charts/dist/chart_types/xy_chart/utils/specs';
import { AnnotationTooltipFormatter, RectAnnotation, RectAnnotationDatum } from '@elastic/charts';
import { AnnotationTooltip } from './annotation_tooltip';
import {
ANOMALY_SEVERITY,

View file

@ -2146,10 +2146,10 @@
dependencies:
object-hash "^1.3.0"
"@elastic/charts@24.4.0":
version "24.4.0"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-24.4.0.tgz#217f55540f48a8f59c49250781d99c36110b2544"
integrity sha512-8dxDEs0g1mV4MjPgIArAmdDQDKjH8EitCLh8/Rouv8kkxvdXnL86VkSHpUbZNK9zPAecArwHBSkyCBZNmbqT2A==
"@elastic/charts@24.5.1":
version "24.5.1"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-24.5.1.tgz#4757721b0323b15412c92d696dd76fdef9b963f8"
integrity sha512-eHJna3xyHREaSfTRb+3/34EmyoINopH6yP9KReakXRb0jW8DD4n9IkbPFwpVN3uXQ6ND2x1ObA0ZzLPSLCPozg==
dependencies:
"@popperjs/core" "^2.4.0"
chroma-js "^2.1.0"
@ -2161,7 +2161,6 @@
d3-scale "^1.0.7"
d3-shape "^1.3.4"
newtype-ts "^0.2.4"
path2d-polyfill "^0.4.2"
prop-types "^15.7.2"
re-reselect "^3.4.0"
react-redux "^7.1.0"
@ -22841,11 +22840,6 @@ path-type@^4.0.0:
resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
path2d-polyfill@^0.4.2:
version "0.4.2"
resolved "https://registry.yarnpkg.com/path2d-polyfill/-/path2d-polyfill-0.4.2.tgz#594d3103838ef6b9dd4a7fd498fe9a88f1f28531"
integrity sha512-JSeAnUfkFjl+Ml/EZL898ivMSbGHrOH63Mirx5EQ1ycJiryHDmj1Q7Are+uEPvenVGCUN9YbolfGfyUewJfJEg==
pathval@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"