[8.13] Update dependency @elastic/charts to v64 (main) (#176872) (#17…

…7526)

# Backport

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

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

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/[email protected]",

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>