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.13] Update dependency @elastic/charts to v64 (main) (#176872) (#177526)

Browse source 
# Backport

This will backport the following commits from `main` to `8.13`:
- [Update dependency @elastic/charts to v64 (main)
(#176872)](https://github.com/elastic/kibana/pull/176872)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
This commit is contained in:
Nick Partridge 2024-02-22 00:28:21 -07:00 • committed by GitHub
parent 1eab6677ee
commit fc823116c7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 68 additions and 349 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -101,7 +101,7 @@
"@dnd-kit/utilities": "^2.0.0",
"@elastic/apm-rum": "^5.16.0",
"@elastic/apm-rum-react": "^2.0.2",
"@elastic/charts": "63.1.0",
"@elastic/charts": "64.0.0",
"@elastic/datemath": "5.0.3",
"@elastic/ecs": "^8.11.1",
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",

94
src/plugins/chart_expressions/common/chart_size_transition_veil.tsx
View file

@ -1,94 +0,0 @@
/*
* 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 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React, { useEffect } from 'react';
import { useCallback, useRef, useState } from 'react';
import fastIsEqual from 'fast-deep-equal';
import { useResizeObserver } from '@elastic/eui';
import { euiThemeVars } from '@kbn/ui-theme';
import type { ChartSizeSpec } from './types';
/**
* This hook is used to show a veil over the chart while it is being resized
* in response to a change in the container dimensions.
*
* It is only relevant if client dimensions are being requested based on chart configuration.
*
* This whole feature is a nice-to-have. If it proves to be a source of bugs,
* we can consider removing it and accepting the aesthetic drawback.
*/
export function useSizeTransitionVeil(
chartSizeSpec: ChartSizeSpec,
setChartSize: (d: ChartSizeSpec) => void,
// should be retrieved from handlers.shouldUseSizeTransitionVeil function
shouldUseVeil: boolean
) {
const containerRef = useRef<HTMLDivElement>(null);
const containerSize = useResizeObserver(containerRef.current);
const currentContainerSize = useRef<{ width: number; height: number }>(containerSize);
// This useEffect hook is here to make up for the fact that the initial container size
// is not correctly reported by the useResizeObserver hook (see https://github.com/elastic/eui/issues/7458).
useEffect(() => {
currentContainerSize.current = {
width: containerRef.current?.clientWidth ?? 0,
height: containerRef.current?.clientHeight ?? 0,
};
}, []);
const [showVeil, setShowVeil] = useState(false);
const currentChartSizeSpec = useRef<ChartSizeSpec>();
const specJustChanged = useRef<boolean>(false);
useEffect(() => {
if (!fastIsEqual(containerSize, currentContainerSize.current) && specJustChanged.current) {
// If the container size has changed, we need to show the veil to hide the chart since it
// be rendered based on the previous container size before being updated to the current size.
//
// 1. we show the veil
// 2. the charts library will render the chart based on the previous container dimensions
// 3. the charts library will resize the chart to the updated container dimensions
// 4. we hide the veil
setShowVeil(true);
currentContainerSize.current = containerSize;
}
}, [setShowVeil, containerSize]);
useEffect(() => {
if (!fastIsEqual(chartSizeSpec, currentChartSizeSpec.current)) {
setChartSize(chartSizeSpec);
currentChartSizeSpec.current = chartSizeSpec;
specJustChanged.current = true;
setTimeout(() => {
specJustChanged.current = false;
}, 500);
}
}, [chartSizeSpec, setChartSize]);
const onResize = useCallback(() => {
setShowVeil(false);
}, []);
return {
veil: (
<div
css={{
height: '100%',
width: '100%',
backgroundColor: euiThemeVars.euiColorEmptyShade,
position: 'absolute',
zIndex: 1,
display: shouldUseVeil && showVeil ? 'block' : 'none',
}}
/>
),
onResize,
containerRef,
};
}

1
src/plugins/chart_expressions/common/index.ts
View file

@ -15,4 +15,3 @@ export {
export type { Simplify, MakeOverridesSerializable, ChartSizeSpec, ChartSizeEvent } from './types';
export { isChartSizeEvent } from './types';
export { getColorCategories } from './color_categories';
export { useSizeTransitionVeil } from './chart_size_transition_veil';

1
src/plugins/chart_expressions/common/tsconfig.json
View file

@ -19,6 +19,5 @@
"@kbn/core-execution-context-common",
"@kbn/expressions-plugin",
"@kbn/data-plugin",
"@kbn/ui-theme",
]
}

1
src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts
View file

@ -23,6 +23,5 @@ export type GaugeRenderProps = GaugeExpressionProps & {
renderComplete: () => void;
uiState: PersistedState;
overrides?: AllowedGaugeOverrides & AllowedSettingsOverrides & AllowedChartOverrides;
shouldUseVeil: boolean;
setChartSize: (d: ChartSizeSpec) => void;
};

3
src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap generated
View file

@ -196,8 +196,8 @@ exports[`GaugeComponent renders the chart 1`] = `
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -536,7 +536,6 @@ exports[`GaugeComponent renders the chart 1`] = `
/>
}
onRenderChange={[Function]}
onResize={[Function]}
theme={
Array [
Object {

1
src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx
View file

@ -103,7 +103,6 @@ describe('GaugeComponent', function () {
uiState,
renderComplete: jest.fn(),
setChartSize: jest.fn(),
shouldUseVeil: false,
};
});

47
src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx
View file

@ -5,18 +5,14 @@
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React, { FC, memo, useCallback } from 'react';
import React, { FC, memo, useCallback, useEffect } from 'react';
import { Chart, Goal, Settings } from '@elastic/charts';
import { FormattedMessage } from '@kbn/i18n-react';
import type { PaletteOutput } from '@kbn/coloring';
import { FieldFormat } from '@kbn/field-formats-plugin/common';
import type { CustomPaletteState } from '@kbn/charts-plugin/public';
import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
import {
type ChartSizeSpec,
getOverridesFor,
useSizeTransitionVeil,
} from '@kbn/chart-expressions-common';
import { type ChartSizeSpec, getOverridesFor } from '@kbn/chart-expressions-common';
import { isVisDimension } from '@kbn/visualizations-plugin/common/utils';
import { i18n } from '@kbn/i18n';
import {
@ -182,7 +178,6 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
chartsThemeService,
renderComplete,
overrides,
shouldUseVeil,
setChartSize,
}) => {
const {
@ -259,25 +254,23 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
[renderComplete]
);
const chartSizeSpec: ChartSizeSpec = {
maxDimensions: {
...(gaugeType === GaugeShapes.HORIZONTAL_BULLET
? {
x: { value: 600, unit: 'pixels' },
y: { value: 300, unit: 'pixels' },
}
: {
y: { value: 600, unit: 'pixels' },
x: { value: 300, unit: 'pixels' },
}),
},
};
useEffect(() => {
const chartSizeSpec: ChartSizeSpec = {
maxDimensions: {
...(gaugeType === GaugeShapes.HORIZONTAL_BULLET
? {
x: { value: 600, unit: 'pixels' },
y: { value: 300, unit: 'pixels' },
}
: {
y: { value: 600, unit: 'pixels' },
x: { value: 300, unit: 'pixels' },
}),
},
};
const { veil, onResize, containerRef } = useSizeTransitionVeil(
chartSizeSpec,
setChartSize,
shouldUseVeil
);
setChartSize(chartSizeSpec);
}, [gaugeType, setChartSize]);
const table = data;
const accessors = getAccessorsFromArgs(args, table.columns);
@ -385,8 +378,7 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
: {};
return (
<div className="gauge__wrapper" ref={containerRef}>
{veil}
<div className="gauge__wrapper">
<Chart {...getOverridesFor(overrides, 'chart')}>
<Settings
noResults={<EmptyPlaceholder icon={icon} renderComplete={onRenderChange} />}
@ -396,7 +388,6 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
ariaLabel={args.ariaLabel}
ariaUseDefaultSummary={!args.ariaLabel}
onRenderChange={onRenderChange}
onResize={onResize}
locale={i18n.getLocale()}
{...getOverridesFor(overrides, 'settings')}
/>

1
src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx
View file

@ -90,7 +90,6 @@ export const gaugeRenderer: (
chartsThemeService={plugins.charts.theme}
paletteService={getPaletteService()}
renderComplete={renderComplete}
shouldUseVeil={handlers.shouldUseSizeTransitionVeil()}
uiState={handlers.uiState as PersistedState}
/>
</div>

12
src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap generated
View file

@ -426,8 +426,8 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -1342,8 +1342,8 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -2318,8 +2318,8 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -3296,8 +3296,8 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -4212,8 +4212,8 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -5083,8 +5083,8 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,

150
src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap generated
View file

@ -300,18 +300,6 @@ exports[`XYChart component it renders area 1`] = `
}
}
>
<div
css={
Object {
"backgroundColor": "#ffffff",
"display": "none",
"height": "100%",
"position": "absolute",
"width": "100%",
"zIndex": 1,
}
}
/>
<ContextProvider
value={
Object {
@ -780,8 +768,8 @@ exports[`XYChart component it renders area 1`] = `
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -1141,7 +1129,6 @@ exports[`XYChart component it renders area 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
onResize={[Function]}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -1849,18 +1836,6 @@ exports[`XYChart component it renders bar 1`] = `
}
}
>
<div
css={
Object {
"backgroundColor": "#ffffff",
"display": "none",
"height": "100%",
"position": "absolute",
"width": "100%",
"zIndex": 1,
}
}
/>
<ContextProvider
value={
Object {
@ -2329,8 +2304,8 @@ exports[`XYChart component it renders bar 1`] = `
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -2690,7 +2665,6 @@ exports[`XYChart component it renders bar 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
onResize={[Function]}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -3398,18 +3372,6 @@ exports[`XYChart component it renders horizontal bar 1`] = `
}
}
>
<div
css={
Object {
"backgroundColor": "#ffffff",
"display": "none",
"height": "100%",
"position": "absolute",
"width": "100%",
"zIndex": 1,
}
}
/>
<ContextProvider
value={
Object {
@ -3878,8 +3840,8 @@ exports[`XYChart component it renders horizontal bar 1`] = `
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -4239,7 +4201,6 @@ exports[`XYChart component it renders horizontal bar 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
onResize={[Function]}
rotation={90}
showLegend={false}
showLegendExtra={false}
@ -4947,18 +4908,6 @@ exports[`XYChart component it renders line 1`] = `
}
}
>
<div
css={
Object {
"backgroundColor": "#ffffff",
"display": "none",
"height": "100%",
"position": "absolute",
"width": "100%",
"zIndex": 1,
}
}
/>
<ContextProvider
value={
Object {
@ -5427,8 +5376,8 @@ exports[`XYChart component it renders line 1`] = `
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -5788,7 +5737,6 @@ exports[`XYChart component it renders line 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
onResize={[Function]}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -6496,18 +6444,6 @@ exports[`XYChart component it renders stacked area 1`] = `
}
}
>
<div
css={
Object {
"backgroundColor": "#ffffff",
"display": "none",
"height": "100%",
"position": "absolute",
"width": "100%",
"zIndex": 1,
}
}
/>
<ContextProvider
value={
Object {
@ -6976,8 +6912,8 @@ exports[`XYChart component it renders stacked area 1`] = `
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -7337,7 +7273,6 @@ exports[`XYChart component it renders stacked area 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
onResize={[Function]}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -8045,18 +7980,6 @@ exports[`XYChart component it renders stacked bar 1`] = `
}
}
>
<div
css={
Object {
"backgroundColor": "#ffffff",
"display": "none",
"height": "100%",
"position": "absolute",
"width": "100%",
"zIndex": 1,
}
}
/>
<ContextProvider
value={
Object {
@ -8525,8 +8448,8 @@ exports[`XYChart component it renders stacked bar 1`] = `
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -8886,7 +8809,6 @@ exports[`XYChart component it renders stacked bar 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
onResize={[Function]}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -9594,18 +9516,6 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
}
}
>
<div
css={
Object {
"backgroundColor": "#ffffff",
"display": "none",
"height": "100%",
"position": "absolute",
"width": "100%",
"zIndex": 1,
}
}
/>
<ContextProvider
value={
Object {
@ -10074,8 +9984,8 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -10435,7 +10345,6 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
onResize={[Function]}
rotation={90}
showLegend={false}
showLegendExtra={false}
@ -11143,18 +11052,6 @@ exports[`XYChart component split chart should render split chart if both, splitR
}
}
>
<div
css={
Object {
"backgroundColor": "#ffffff",
"display": "none",
"height": "100%",
"position": "absolute",
"width": "100%",
"zIndex": 1,
}
}
/>
<ContextProvider
value={
Object {
@ -11653,8 +11550,8 @@ exports[`XYChart component split chart should render split chart if both, splitR
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -12014,7 +11911,6 @@ exports[`XYChart component split chart should render split chart if both, splitR
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
onResize={[Function]}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -12936,18 +12832,6 @@ exports[`XYChart component split chart should render split chart if splitColumnA
}
}
>
<div
css={
Object {
"backgroundColor": "#ffffff",
"display": "none",
"height": "100%",
"position": "absolute",
"width": "100%",
"zIndex": 1,
}
}
/>
<ContextProvider
value={
Object {
@ -13440,8 +13324,8 @@ exports[`XYChart component split chart should render split chart if splitColumnA
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -13801,7 +13685,6 @@ exports[`XYChart component split chart should render split chart if splitColumnA
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
onResize={[Function]}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -14716,18 +14599,6 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
}
}
>
<div
css={
Object {
"backgroundColor": "#ffffff",
"display": "none",
"height": "100%",
"position": "absolute",
"width": "100%",
"zIndex": 1,
}
}
/>
<ContextProvider
value={
Object {
@ -15220,8 +15091,8 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,
@ -15581,7 +15452,6 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
onResize={[Function]}
rotation={0}
showLegend={false}
showLegendExtra={false}

1
src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx
View file

@ -130,7 +130,6 @@ describe('XYChart component', () => {
renderComplete: jest.fn(),
timeFormat: 'MMM D, YYYY @ HH:mm:ss.SSS',
setChartSize: jest.fn(),
shouldUseVeil: false,
};
});

58
src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx
View file

@ -52,11 +52,7 @@ import {
LegendSizeToPixels,
} from '@kbn/visualizations-plugin/common/constants';
import { PersistedState } from '@kbn/visualizations-plugin/public';
import {
useSizeTransitionVeil,
getOverridesFor,
ChartSizeSpec,
} from '@kbn/chart-expressions-common';
import { getOverridesFor, ChartSizeSpec } from '@kbn/chart-expressions-common';
import type {
FilterEvent,
BrushEvent,
@ -148,7 +144,6 @@ export type XYChartRenderProps = Omit<XYChartProps, 'canNavigateToLens'> & {
syncCursor: boolean;
eventAnnotationService: EventAnnotationServiceType;
renderComplete: () => void;
shouldUseVeil: boolean;
uiState?: PersistedState;
timeFormat: string;
setChartSize: (chartSizeSpec: ChartSizeSpec) => void;
@ -211,11 +206,8 @@ export function XYChart({
syncColors,
syncTooltips,
syncCursor,
shouldUseVeil,
useLegacyTimeAxis,
renderComplete,
uiState,
timeFormat,
overrides,
@ -307,30 +299,28 @@ export function XYChart({
const isTimeViz = isTimeChart(dataLayers);
const chartSizeSpec: ChartSizeSpec =
isTimeViz && !isHorizontalChart(dataLayers)
? {
aspectRatio: {
x: 16,
y: 9,
},
minDimensions: {
y: { value: 300, unit: 'pixels' },
x: { value: 100, unit: 'percentage' },
},
}
: {
maxDimensions: {
x: { value: 100, unit: 'percentage' },
y: { value: 100, unit: 'percentage' },
},
};
useEffect(() => {
const chartSizeSpec: ChartSizeSpec =
isTimeViz && !isHorizontalChart(dataLayers)
? {
aspectRatio: {
x: 16,
y: 9,
},
minDimensions: {
y: { value: 300, unit: 'pixels' },
x: { value: 100, unit: 'percentage' },
},
}
: {
maxDimensions: {
x: { value: 100, unit: 'percentage' },
y: { value: 100, unit: 'percentage' },
},
};
const { veil, onResize, containerRef } = useSizeTransitionVeil(
chartSizeSpec,
setChartSize,
shouldUseVeil
);
setChartSize(chartSizeSpec);
}, [dataLayers, isTimeViz, setChartSize]);
const formattedDatatables = useMemo(
() =>
@ -748,8 +738,7 @@ export function XYChart({
);
return (
<div ref={containerRef} css={chartContainerStyle}>
{veil}
<div css={chartContainerStyle}>
{showLegend !== undefined && uiState && (
<LegendToggle
onClick={toggleLegend}
@ -823,7 +812,6 @@ export function XYChart({
/>
}
onRenderChange={onRenderChange}
onResize={onResize}
onPointerUpdate={syncCursor ? handleCursorUpdate : undefined}
externalPointerEvents={{
tooltip: { visible: syncTooltips, placement: Placement.Right },

1
src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx
View file

@ -284,7 +284,6 @@ export const getXyChartRenderer = ({
syncColors={config.syncColors}
syncTooltips={config.syncTooltips}
syncCursor={config.syncCursor}
shouldUseVeil={handlers.shouldUseSizeTransitionVeil()}
uiState={handlers.uiState as PersistedState}
renderComplete={renderComplete}
setChartSize={setChartSize}

1
src/plugins/expressions/common/execution/execution.ts
View file

@ -287,7 +287,6 @@ export class Execution<
isSyncColorsEnabled: () => execution.params.syncColors!,
isSyncCursorEnabled: () => execution.params.syncCursor!,
isSyncTooltipsEnabled: () => execution.params.syncTooltips!,
shouldUseSizeTransitionVeil: () => execution.params.shouldUseSizeTransitionVeil!,
...execution.executor.context,
getExecutionContext: () => execution.params.executionContext,
};

5
src/plugins/expressions/common/execution/types.ts
View file

@ -72,11 +72,6 @@ export interface ExecutionContext<InspectorAdapters extends Adapters = Adapters>
*/
isSyncTooltipsEnabled?: () => boolean;
/**
* Returns whether or not to use the size transition veil when resizing visualizations.
*/
shouldUseSizeTransitionVeil?: () => boolean;
/**
* Contains the meta-data about the source of the expression.
*/

2
src/plugins/expressions/common/expression_renderers/types.ts
View file

@ -98,8 +98,6 @@ export interface IInterpreterRenderHandlers {
isSyncTooltipsEnabled(): boolean;
shouldUseSizeTransitionVeil(): boolean;
/**
* This uiState interface is actually `PersistedState` from the visualizations plugin,
* but expressions cannot know about vis or it creates a mess of circular dependencies.

5
src/plugins/expressions/common/service/expressions_services.ts
View file

@ -156,11 +156,6 @@ export interface ExpressionExecutionParams {
syncTooltips?: boolean;
// if this is set to true, a veil will be shown when resizing visualizations in response
// to a chart resize event (see src/plugins/chart_expressions/common/chart_size_transition_veil.tsx).
// This should be only set to true if the client will be responding to the resize events
shouldUseSizeTransitionVeil?: boolean;
inspectorAdapters?: Adapters;
executionContext?: KibanaExecutionContext;

2
src/plugins/expressions/public/loader.ts
View file

@ -60,7 +60,6 @@ export class ExpressionLoader {
syncColors: params?.syncColors,
syncTooltips: params?.syncTooltips,
syncCursor: params?.syncCursor,
shouldUseSizeTransitionVeil: params?.shouldUseSizeTransitionVeil,
hasCompatibleActions: params?.hasCompatibleActions,
getCompatibleCellValueActions: params?.getCompatibleCellValueActions,
executionContext: params?.executionContext,
@ -149,7 +148,6 @@ export class ExpressionLoader {
syncColors: params.syncColors,
syncCursor: params?.syncCursor,
syncTooltips: params.syncTooltips,
shouldUseSizeTransitionVeil: params.shouldUseSizeTransitionVeil,
executionContext: params.executionContext,
partial: params.partial,
throttle: params.throttle,

5
src/plugins/expressions/public/render.ts
View file

@ -33,7 +33,6 @@ export interface ExpressionRenderHandlerParams {
syncCursor?: boolean;
syncTooltips?: boolean;
interactive?: boolean;
shouldUseSizeTransitionVeil?: boolean;
hasCompatibleActions?: (event: ExpressionRendererEvent) => Promise<boolean>;
getCompatibleCellValueActions?: (data: object[]) => Promise<unknown[]>;
executionContext?: KibanaExecutionContext;
@ -63,7 +62,6 @@ export class ExpressionRenderHandler {
syncColors,
syncTooltips,
syncCursor,
shouldUseSizeTransitionVeil,
interactive,
hasCompatibleActions = async () => false,
getCompatibleCellValueActions = async () => [],
@ -115,9 +113,6 @@ export class ExpressionRenderHandler {
isSyncCursorEnabled: () => {
return syncCursor || true;
},
shouldUseSizeTransitionVeil: () => {
return Boolean(shouldUseSizeTransitionVeil);
},
isInteractive: () => {
return interactive ?? true;
},

4
src/plugins/expressions/public/types/index.ts
View file

@ -52,10 +52,6 @@ export interface IExpressionLoaderParams {
syncColors?: boolean;
syncCursor?: boolean;
syncTooltips?: boolean;
// if this is set to true, a veil will be shown when resizing visualizations in response
// to a chart resize event (see src/plugins/chart_expressions/common/chart_size_transition_veil.tsx).
// This should be only set to true if the client will be responding to the resize events
shouldUseSizeTransitionVeil?: boolean;
hasCompatibleActions?: ExpressionRenderHandlerParams['hasCompatibleActions'];
getCompatibleCellValueActions?: ExpressionRenderHandlerParams['getCompatibleCellValueActions'];
executionContext?: KibanaExecutionContext;

1
src/plugins/presentation_util/public/__stories__/render.tsx
View file

@ -18,7 +18,6 @@ export const defaultHandlers: IInterpreterRenderHandlers = {
isSyncColorsEnabled: () => false,
isSyncCursorEnabled: () => true,
isSyncTooltipsEnabled: () => false,
shouldUseSizeTransitionVeil: () => false,
isInteractive: () => true,
getExecutionContext: () => undefined,
done: action('done'),

1
x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx
View file

@ -17,7 +17,6 @@ export const defaultHandlers: RendererHandlers = {
isSyncColorsEnabled: () => false,
isSyncCursorEnabled: () => true,
isSyncTooltipsEnabled: () => false,
shouldUseSizeTransitionVeil: () => false,
isInteractive: () => true,
onComplete: (fn) => undefined,
onEmbeddableDestroyed: action('onEmbeddableDestroyed'),

1
x-pack/plugins/canvas/public/lib/create_handlers.ts
View file

@ -29,7 +29,6 @@ export const createBaseHandlers = (): IInterpreterRenderHandlers => ({
isSyncColorsEnabled: () => false,
isSyncTooltipsEnabled: () => false,
isSyncCursorEnabled: () => true,
shouldUseSizeTransitionVeil: () => false,
isInteractive: () => true,
getExecutionContext: () => undefined,
});

1
x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
View file

@ -781,7 +781,6 @@ export const VisualizationWrapper = ({
onRender$={onRenderHandler}
inspectorAdapters={lensInspector.adapters}
executionContext={executionContext}
shouldUseSizeTransitionVeil={true}
renderMode="edit"
renderError={(errorMessage?: string | null, error?: ExpressionRenderError | null) => {
const errorsFromRequest = getOriginalRequestErrorMessages(error || null);

2
x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap generated
View file

@ -209,8 +209,8 @@ exports[`DonutChart component passes correct props without errors for valid prop
"barBackground": "#343741",
"border": "#EDF0F5",
"colorBands": Array [
"#D9C6EF",
"#AA87D1",
"#D9C6EF",
],
"fallbackBandColor": "#98A2B3",
"minHeight": 64,

1
x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/monitor_bar_series.test.tsx.snap generated
View file

@ -6,6 +6,7 @@ exports[`MonitorBarSeries component renders if the data series is present 1`] =
>
<div
class="echChart"
style="width:100%;height:100%"
>
<div
class="echChartContent"

4
x-pack/test_serverless/functional/test_suites/common/discover/group1/_discover_histogram.ts
View file

@ -67,7 +67,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.common.navigateToApp('discover');
await PageObjects.discover.waitUntilSearchingHasFinished();
// this is the number of renderings of the histogram needed when new data is fetched
let renderingCountInc = 1;
let renderingCountInc = 3; // Multiple renders caused by https://github.com/elastic/kibana/issues/177055
const prevRenderingCount = await elasticChart.getVisualizationRenderingCount();
await queryBar.submitQuery();
await retry.waitFor('chart rendering complete', async () => {
@ -85,7 +85,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.discover.brushHistogram();
await PageObjects.discover.waitUntilSearchingHasFinished();
renderingCountInc = 2;
renderingCountInc = 3; // Multiple renders caused by https://github.com/elastic/kibana/issues/177055
await retry.waitFor('chart rendering complete after being brushed', async () => {
const actualCount = await elasticChart.getVisualizationRenderingCount();
const expectedCount = prevRenderingCount + renderingCountInc * 2;

9
yarn.lock
View file

@ -1658,10 +1658,10 @@
dependencies:
object-hash "^1.3.0"
"@elastic/charts@63.1.0":
version "63.1.0"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-63.1.0.tgz#6348ffe01d6e77ddd150382b57515134f76293b3"
integrity sha512-UdzsErplc5z2cQxRY7N4kXZXRfb0pdDdsC7V4ag2WIlDiYDpygB3iThb83sG99E9KtOqIkHPE5nyDmWI6GwfOg==
"@elastic/charts@64.0.0":
version "64.0.0"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-64.0.0.tgz#fd9bd6b3a1d123a7c44c3c5bab21e13f9f128021"
integrity sha512-qTsxlO4kgBxvK56ixWp406AIe0UTb1kfcbD/y8Nz/l5cE2u0JP/Cuajp5VziLKmY4NjHswPg9qjIHC87lG1hDw==
dependencies:
"@popperjs/core" "^2.11.8"
bezier-easing "^2.1.0"
@ -1679,7 +1679,6 @@
react-redux "^7.1.0"
redux "^4.0.4"
reselect "^4.0.0"
resize-observer-polyfill "^1.5.1"
ts-debounce "^4.0.0"
utility-types "^3.10.0"
uuid "^9"