diff --git a/package.json b/package.json index 3a2d772894b89..55eb4bfd3daec 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "@elastic/apm-rum": "^5.16.0", "@elastic/apm-rum-core": "^5.21.0", "@elastic/apm-rum-react": "^2.0.2", - "@elastic/charts": "65.2.0", + "@elastic/charts": "66.0.3", "@elastic/datemath": "5.0.3", "@elastic/ecs": "^8.11.1", "@elastic/elasticsearch": "^8.13.1", diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap index 0f9ddb6fb3490..5614bcff2c305 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap @@ -452,12 +452,15 @@ exports[`GaugeComponent renders the chart 1`] = ` "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap index 5951739fd053f..74065bc03081c 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap @@ -682,12 +682,15 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -1611,12 +1614,15 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -2600,12 +2606,15 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -3591,12 +3600,15 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -4520,12 +4532,15 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -5404,12 +5419,15 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, diff --git a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap index f421ecb99d18e..c70967794def7 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap @@ -1024,12 +1024,15 @@ exports[`XYChart component it renders area 1`] = ` "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -2574,12 +2577,15 @@ exports[`XYChart component it renders bar 1`] = ` "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -4124,12 +4130,15 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -5674,12 +5683,15 @@ exports[`XYChart component it renders line 1`] = ` "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -7224,12 +7236,15 @@ exports[`XYChart component it renders stacked area 1`] = ` "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -8774,12 +8789,15 @@ exports[`XYChart component it renders stacked bar 1`] = ` "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -10324,12 +10342,15 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -11904,12 +11925,15 @@ exports[`XYChart component split chart should render split chart if both, splitR "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -13692,12 +13716,15 @@ exports[`XYChart component split chart should render split chart if splitColumnA "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, @@ -15473,12 +15500,15 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, diff --git a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index 452d12596bda1..2569e62ad20ca 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -465,12 +465,15 @@ exports[`DonutChart component passes correct props without errors for valid prop "barBackground": "#EDF0F5", "border": "#EDF0F5", "emptyBackground": "transparent", + "iconAlign": "left", "minHeight": 64, + "minValueFontSize": 12, "nonFiniteText": "N/A", - "text": Object { - "darkColor": "#343741", - "lightColor": "#E0E5EE", - }, + "textDarkColor": "#343741", + "textLightColor": "#E0E5EE", + "titlesTextAlign": "left", + "valueFontSize": "default", + "valuesTextAlign": "right", }, "partition": Object { "circlePadding": 4, diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts index dc2d16472bc31..9d547f60c3def 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts @@ -155,7 +155,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { title: 'ios', subtitle: 'Average machine.ram', extraText: '', - value: '65,047,486.03', + value: '65,047,486.03%', color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, @@ -165,7 +165,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { title: 'osx', subtitle: 'Average machine.ram', extraText: '', - value: '66,144,823.35', + value: '66,144,823.35%', color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, @@ -175,7 +175,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { title: 'win 7', subtitle: 'Average machine.ram', extraText: '', - value: '65,933,477.76', + value: '65,933,477.76%', color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, @@ -185,7 +185,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { title: 'win 8', subtitle: 'Average machine.ram', extraText: '', - value: '65,157,898.23', + value: '65,157,898.23%', color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, @@ -195,7 +195,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { title: 'win xp', subtitle: 'Average machine.ram', extraText: '', - value: '65,365,950.93', + value: '65,365,950.93%', color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 913396d5b64dc..7256e92ca829e 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1357,17 +1357,20 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont }, async getMetricDatum(tile: WebElementWrapper) { + // using getAttribute('innerText') because getVisibleText() fails when the text overflows the metric panel. + // The reported "visible" text is somewhat inaccurate and just report the full innerText of just the visible DOM elements. + // In the case of Metric, suffixes that are on a sub-element are not considered visible. return { - title: await (await this.getMetricElementIfExists('h2', tile))?.getVisibleText(), + title: await (await this.getMetricElementIfExists('h2', tile))?.getAttribute('innerText'), subtitle: await ( await this.getMetricElementIfExists('.echMetricText__subtitle', tile) - )?.getVisibleText(), + )?.getAttribute('innerText'), extraText: await ( await this.getMetricElementIfExists('.echMetricText__extra', tile) - )?.getVisibleText(), + )?.getAttribute('innerText'), value: await ( await this.getMetricElementIfExists('.echMetricText__value', tile) - )?.getVisibleText(), + )?.getAttribute('innerText'), color: await ( await this.getMetricElementIfExists('.echMetric', tile) )?.getComputedStyle('background-color'), diff --git a/yarn.lock b/yarn.lock index dba5f684e3e00..d168b25927c98 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1658,10 +1658,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@65.2.0": - version "65.2.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-65.2.0.tgz#203496b6471e4845807cb70c48b0990676882ef4" - integrity sha512-yeqascGqvnDABvtYOHgd7sr6cEq5kivFWKaS3UWeb/GpOxk+O4Ef1PlbBxpchgDyInP957SWlhKDmhUFF1Ttzg== +"@elastic/charts@66.0.3": + version "66.0.3" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-66.0.3.tgz#16b2290fd37d7ca4d5eb96bd63b947b59cace39d" + integrity sha512-McCg8X72U4DGqMihlQnuixsCoJEQHAt27lBKYLJWH9n6N/2EUDsdejUPIuiYqCRrEUyUOUq2XcyJMgOw4It50A== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0"