From 38cee470f000449e2ade9b5e2720cf3407f9bb9d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 21 Feb 2024 17:49:12 +0100 Subject: [PATCH] Update dependency @elastic/charts to v64 (main) (#176872) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | [`63.1.0` -> `64.0.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/63.1.0/64.0.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@elastic%2fcharts/64.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@elastic%2fcharts/64.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@elastic%2fcharts/63.1.0/64.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@elastic%2fcharts/63.1.0/64.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes
elastic/elastic-charts (@​elastic/charts) ### [`v64.0.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6400-2024-02-13) [Compare Source](https://togithub.com/elastic/elastic-charts/compare/v63.1.0...v64.0.0) ##### Bug Fixes - **deps:** update dependency [@​elastic/eui](https://togithub.com/elastic/eui) to ^93.1.0 ([#​2332](https://togithub.com/elastic/elastic-charts/issues/2332)) ([855e357](https://togithub.com/elastic/elastic-charts/commit/855e357ab4433c7fc5a0e7e2c2398150ff686e41)) - **deps:** update dependency [@​elastic/eui](https://togithub.com/elastic/eui) to v93 ([#​2324](https://togithub.com/elastic/elastic-charts/issues/2324)) ([ce19379](https://togithub.com/elastic/elastic-charts/commit/ce1937910211f812b7a4eed371337e6498b1e6b3)) - **deps:** update dependency [@​playwright/test](https://togithub.com/playwright/test) to ^1.41.2 ([#​2330](https://togithub.com/elastic/elastic-charts/issues/2330)) ([1f8c638](https://togithub.com/elastic/elastic-charts/commit/1f8c638356edebab8fc14d9ebdcaceec3e10812e)) - **metric:** move `MetricSpec.body` to `MetricBase` ([#​2336](https://togithub.com/elastic/elastic-charts/issues/2336)) ([3390e25](https://togithub.com/elastic/elastic-charts/commit/3390e251d3edc37ca68e13ff3acd8843b3b5a6ba)) - use passed size in pixel without waiting for resizeObserver ([#​2270](https://togithub.com/elastic/elastic-charts/issues/2270)) ([f9c11fc](https://togithub.com/elastic/elastic-charts/commit/f9c11fca2a284e4ca3744a02dc743d09b78f64b8)) ##### chore - **bullet:** bullet improvements, bug fixes and renaming ([#​2319](https://togithub.com/elastic/elastic-charts/issues/2319)) ([34fd38b](https://togithub.com/elastic/elastic-charts/commit/34fd38b77cdd060057a38e25c6197de6807839d2)) ##### BREAKING CHANGES - **metric:** Moves `MetricSpec.body` to `MetricDatum.body`/`MetricBase.body` - **bullet:** Rename `BulletGraph` to `Bullet` and `ColorBandSimpleConfig.classes` to `steps`
--- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/elastic/kibana). Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> (cherry picked from commit 8773be342bf9aa6e0c2319f101f9a64c2448404c) # Conflicts: # src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx --- package.json | 2 +- .../common/chart_size_transition_veil.tsx | 94 ----------- src/plugins/chart_expressions/common/index.ts | 1 - .../chart_expressions/common/tsconfig.json | 1 - .../common/types/expression_renderers.ts | 1 - .../gauge_component.test.tsx.snap | 3 +- .../components/gauge_component.test.tsx | 1 - .../public/components/gauge_component.tsx | 49 +++--- .../expression_renderers/gauge_renderer.tsx | 1 - .../partition_vis_component.test.tsx.snap | 12 +- .../__snapshots__/xy_chart.test.tsx.snap | 150 ++---------------- .../public/components/xy_chart.test.tsx | 1 - .../public/components/xy_chart.tsx | 60 +++---- .../xy_chart_renderer.tsx | 1 - .../expressions/common/execution/execution.ts | 1 - .../expressions/common/execution/types.ts | 5 - .../common/expression_renderers/types.ts | 2 - .../common/service/expressions_services.ts | 5 - src/plugins/expressions/public/loader.ts | 2 - src/plugins/expressions/public/render.ts | 5 - src/plugins/expressions/public/types/index.ts | 4 - .../public/__stories__/render.tsx | 1 - .../renderers/__stories__/render.tsx | 1 - .../canvas/public/lib/create_handlers.ts | 1 - .../workspace_panel/workspace_panel.tsx | 1 - .../__snapshots__/donut_chart.test.tsx.snap | 2 +- .../monitor_bar_series.test.tsx.snap | 1 + .../discover/group1/_discover_histogram.ts | 4 +- yarn.lock | 9 +- 29 files changed, 70 insertions(+), 351 deletions(-) delete mode 100644 src/plugins/chart_expressions/common/chart_size_transition_veil.tsx diff --git a/package.json b/package.json index cb132a5852d7d..12cf29c65b4c5 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx deleted file mode 100644 index 8a0c11f363f9c..0000000000000 --- a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx +++ /dev/null @@ -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(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(); - const specJustChanged = useRef(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: ( -
- ), - onResize, - containerRef, - }; -} diff --git a/src/plugins/chart_expressions/common/index.ts b/src/plugins/chart_expressions/common/index.ts index 93b5d83710bb2..2b3345e091588 100644 --- a/src/plugins/chart_expressions/common/index.ts +++ b/src/plugins/chart_expressions/common/index.ts @@ -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'; diff --git a/src/plugins/chart_expressions/common/tsconfig.json b/src/plugins/chart_expressions/common/tsconfig.json index 37a3b2f5bf607..e6426fddeda0f 100644 --- a/src/plugins/chart_expressions/common/tsconfig.json +++ b/src/plugins/chart_expressions/common/tsconfig.json @@ -19,6 +19,5 @@ "@kbn/core-execution-context-common", "@kbn/expressions-plugin", "@kbn/data-plugin", - "@kbn/ui-theme", ] } diff --git a/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts index 5bda3a872da00..5e20310ebcbf4 100644 --- a/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts +++ b/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts @@ -23,6 +23,5 @@ export type GaugeRenderProps = GaugeExpressionProps & { renderComplete: () => void; uiState: PersistedState; overrides?: AllowedGaugeOverrides & AllowedSettingsOverrides & AllowedChartOverrides; - shouldUseVeil: boolean; setChartSize: (d: ChartSizeSpec) => void; }; 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 30735f360e32c..fee45e99d9f85 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 @@ -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 { diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx index 29163b414d82b..47b9a94675583 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx @@ -103,7 +103,6 @@ describe('GaugeComponent', function () { uiState, renderComplete: jest.fn(), setChartSize: jest.fn(), - shouldUseVeil: false, }; }); diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx index a5a71ffc25c34..94dd091cb8e00 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx @@ -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 = memo( chartsThemeService, renderComplete, overrides, - shouldUseVeil, setChartSize, }) => { const { @@ -259,25 +254,23 @@ export const GaugeComponent: FC = 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' }, - }), - }, - }; - - const { veil, onResize, containerRef } = useSizeTransitionVeil( - chartSizeSpec, - setChartSize, - shouldUseVeil - ); + 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' }, + }), + }, + }; + + setChartSize(chartSizeSpec); + }, [gaugeType, setChartSize]); const table = data; const accessors = getAccessorsFromArgs(args, table.columns); @@ -385,8 +378,7 @@ export const GaugeComponent: FC = memo( : {}; return ( -
- {veil} +
} @@ -396,7 +388,6 @@ export const GaugeComponent: FC = memo( ariaLabel={args.ariaLabel} ariaUseDefaultSummary={!args.ariaLabel} onRenderChange={onRenderChange} - onResize={onResize} locale={i18n.getLocale()} {...getOverridesFor(overrides, 'settings')} /> diff --git a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx index 9759ceca52725..74c3d8bb52737 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx @@ -90,7 +90,6 @@ export const gaugeRenderer: ( chartsThemeService={plugins.charts.theme} paletteService={getPaletteService()} renderComplete={renderComplete} - shouldUseVeil={handlers.shouldUseSizeTransitionVeil()} uiState={handlers.uiState as PersistedState} />
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 f7c57d6e765df..441d0d92b56b2 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 @@ -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, 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 a2f62afd3aee6..73c03e9c1c2f0 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 @@ -300,18 +300,6 @@ exports[`XYChart component it renders area 1`] = ` } } > -
-
-
-
-
-
-
-
-
-
{ renderComplete: jest.fn(), timeFormat: 'MMM D, YYYY @ HH:mm:ss.SSS', setChartSize: jest.fn(), - shouldUseVeil: false, }; }); diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 7e4c5a5c6b974..c4271d131cdf6 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -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 & { 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' }, - }, - }; - - const { veil, onResize, containerRef } = useSizeTransitionVeil( - chartSizeSpec, - setChartSize, - shouldUseVeil - ); + 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' }, + }, + }; + + setChartSize(chartSizeSpec); + }, [dataLayers, isTimeViz, setChartSize]); const formattedDatatables = useMemo( () => @@ -748,8 +738,7 @@ export function XYChart({ ); return ( -
- {veil} +
{showLegend !== undefined && uiState && ( } onRenderChange={onRenderChange} - onResize={onResize} onPointerUpdate={syncCursor ? handleCursorUpdate : undefined} externalPointerEvents={{ tooltip: { visible: syncTooltips, placement: Placement.Right }, diff --git a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx index 2d88ed53ac3f0..53091eb47acb5 100644 --- a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx @@ -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} diff --git a/src/plugins/expressions/common/execution/execution.ts b/src/plugins/expressions/common/execution/execution.ts index 03a0923b4b313..593e437fd9dc7 100644 --- a/src/plugins/expressions/common/execution/execution.ts +++ b/src/plugins/expressions/common/execution/execution.ts @@ -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, }; diff --git a/src/plugins/expressions/common/execution/types.ts b/src/plugins/expressions/common/execution/types.ts index ac216515a3f1b..03dbcc8a6ff13 100644 --- a/src/plugins/expressions/common/execution/types.ts +++ b/src/plugins/expressions/common/execution/types.ts @@ -72,11 +72,6 @@ export interface ExecutionContext */ 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. */ diff --git a/src/plugins/expressions/common/expression_renderers/types.ts b/src/plugins/expressions/common/expression_renderers/types.ts index 46908e8b38e6e..e5a295e855458 100644 --- a/src/plugins/expressions/common/expression_renderers/types.ts +++ b/src/plugins/expressions/common/expression_renderers/types.ts @@ -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. diff --git a/src/plugins/expressions/common/service/expressions_services.ts b/src/plugins/expressions/common/service/expressions_services.ts index 2683921bc038b..e73e07a387c46 100644 --- a/src/plugins/expressions/common/service/expressions_services.ts +++ b/src/plugins/expressions/common/service/expressions_services.ts @@ -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; diff --git a/src/plugins/expressions/public/loader.ts b/src/plugins/expressions/public/loader.ts index 0a3c0e0990645..f10b8db1f1287 100644 --- a/src/plugins/expressions/public/loader.ts +++ b/src/plugins/expressions/public/loader.ts @@ -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, diff --git a/src/plugins/expressions/public/render.ts b/src/plugins/expressions/public/render.ts index 0b494f30b2e69..a7b919625b8d6 100644 --- a/src/plugins/expressions/public/render.ts +++ b/src/plugins/expressions/public/render.ts @@ -33,7 +33,6 @@ export interface ExpressionRenderHandlerParams { syncCursor?: boolean; syncTooltips?: boolean; interactive?: boolean; - shouldUseSizeTransitionVeil?: boolean; hasCompatibleActions?: (event: ExpressionRendererEvent) => Promise; getCompatibleCellValueActions?: (data: object[]) => Promise; 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; }, diff --git a/src/plugins/expressions/public/types/index.ts b/src/plugins/expressions/public/types/index.ts index 23a17fbcea1dc..c1b7dc8cc6369 100644 --- a/src/plugins/expressions/public/types/index.ts +++ b/src/plugins/expressions/public/types/index.ts @@ -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; diff --git a/src/plugins/presentation_util/public/__stories__/render.tsx b/src/plugins/presentation_util/public/__stories__/render.tsx index e02f1c803d332..ca9f968842270 100644 --- a/src/plugins/presentation_util/public/__stories__/render.tsx +++ b/src/plugins/presentation_util/public/__stories__/render.tsx @@ -18,7 +18,6 @@ export const defaultHandlers: IInterpreterRenderHandlers = { isSyncColorsEnabled: () => false, isSyncCursorEnabled: () => true, isSyncTooltipsEnabled: () => false, - shouldUseSizeTransitionVeil: () => false, isInteractive: () => true, getExecutionContext: () => undefined, done: action('done'), diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx index c921bf5db2fe1..e53dce0a46886 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx @@ -17,7 +17,6 @@ export const defaultHandlers: RendererHandlers = { isSyncColorsEnabled: () => false, isSyncCursorEnabled: () => true, isSyncTooltipsEnabled: () => false, - shouldUseSizeTransitionVeil: () => false, isInteractive: () => true, onComplete: (fn) => undefined, onEmbeddableDestroyed: action('onEmbeddableDestroyed'), diff --git a/x-pack/plugins/canvas/public/lib/create_handlers.ts b/x-pack/plugins/canvas/public/lib/create_handlers.ts index b9c0ad97f4eb1..374bdaff99721 100644 --- a/x-pack/plugins/canvas/public/lib/create_handlers.ts +++ b/x-pack/plugins/canvas/public/lib/create_handlers.ts @@ -29,7 +29,6 @@ export const createBaseHandlers = (): IInterpreterRenderHandlers => ({ isSyncColorsEnabled: () => false, isSyncTooltipsEnabled: () => false, isSyncCursorEnabled: () => true, - shouldUseSizeTransitionVeil: () => false, isInteractive: () => true, getExecutionContext: () => undefined, }); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx index 0fda38c5cfdd6..842904741ec9b 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx @@ -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); diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index 6f9a8644bb706..363aee4953ab5 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -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, diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/monitor_bar_series.test.tsx.snap b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/monitor_bar_series.test.tsx.snap index 7eca794bd6270..7b5da3fc31599 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/monitor_bar_series.test.tsx.snap +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/monitor_bar_series.test.tsx.snap @@ -6,6 +6,7 @@ exports[`MonitorBarSeries component renders if the data series is present 1`] = >
{ @@ -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; diff --git a/yarn.lock b/yarn.lock index 3ec12c6860fa7..26667fb895004 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"