Update dependency @elastic/charts to v64 (main) (#176872)

[![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://github.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

<details>
<summary>elastic/elastic-charts (@&#8203;elastic/charts)</summary>

###
[`v64.0.0`](https://github.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6400-2024-02-13)

[Compare
Source](https://github.com/elastic/elastic-charts/compare/v63.1.0...v64.0.0)

##### Bug Fixes

- **deps:** update dependency
[@&#8203;elastic/eui](https://github.com/elastic/eui) to ^93.1.0
([#&#8203;2332](https://github.com/elastic/elastic-charts/issues/2332))
([855e357](https://github.com/elastic/elastic-charts/commit/855e357ab4433c7fc5a0e7e2c2398150ff686e41))
- **deps:** update dependency
[@&#8203;elastic/eui](https://github.com/elastic/eui) to v93
([#&#8203;2324](https://github.com/elastic/elastic-charts/issues/2324))
([ce19379](https://github.com/elastic/elastic-charts/commit/ce1937910211f812b7a4eed371337e6498b1e6b3))
- **deps:** update dependency
[@&#8203;playwright/test](https://github.com/playwright/test) to
^1.41.2
([#&#8203;2330](https://github.com/elastic/elastic-charts/issues/2330))
([1f8c638](https://github.com/elastic/elastic-charts/commit/1f8c638356edebab8fc14d9ebdcaceec3e10812e))
- **metric:** move `MetricSpec.body` to `MetricBase`
([#&#8203;2336](https://github.com/elastic/elastic-charts/issues/2336))
([3390e25](https://github.com/elastic/elastic-charts/commit/3390e251d3edc37ca68e13ff3acd8843b3b5a6ba))
- use passed size in pixel without waiting for resizeObserver
([#&#8203;2270](https://github.com/elastic/elastic-charts/issues/2270))
([f9c11fc](https://github.com/elastic/elastic-charts/commit/f9c11fca2a284e4ca3744a02dc743d09b78f64b8))

##### chore

- **bullet:** bullet improvements, bug fixes and renaming
([#&#8203;2319](https://github.com/elastic/elastic-charts/issues/2319))
([34fd38b](https://github.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`

</details>

---

### 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.

---

- [ ] <!-- rebase-check -->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).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xNzMuMCIsInVwZGF0ZWRJblZlciI6IjM3LjE3My4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
(cherry picked from commit 8773be3)

# Conflicts:
#	src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx

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",

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';

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",
   ]
 }

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

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

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

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}
           />
         </div>