[testing] remove RAF from initial resize observer

packages/charts/api/charts.api.md

@@ -2649,7 +2649,7 @@ export const Settings: (props: SFProps<SettingsSpec, keyof (typeof settingsBuild
 // Warning: (ae-forgotten-export) The symbol "BuildProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const settingsBuildProps: BuildProps<SettingsSpec, "id" | "chartType" | "specType", "debug" | "locale" | "rotation" | "ariaLabelHeadingLevel" | "ariaUseDefaultSummary" | "legendPosition" | "flatLegend" | "legendMaxDepth" | "legendSize" | "showLegend" | "showLegendExtra" | "baseTheme" | "rendering" | "animateData" | "externalPointerEvents" | "pointBuffer" | "resizeDebounce" | "pointerUpdateTrigger" | "brushAxis" | "minBrushDelta" | "allowBrushingLastHistogramBin", "ariaLabel" | "xDomain" | "ariaDescription" | "ariaDescribedBy" | "ariaLabelledBy" | "ariaTableCaption" | "theme" | "legendAction" | "legendColorPicker" | "legendStrategy" | "onLegendItemClick" | "customLegend" | "onLegendItemMinusClick" | "onLegendItemOut" | "onLegendItemOver" | "onLegendItemPlusClick" | "orderOrdinalBinsBy" | "debugState" | "onProjectionClick" | "onElementClick" | "onElementOver" | "onElementOut" | "onBrushEnd" | "onPointerUpdate" | "onResize" | "onRenderChange" | "onWillRender" | "onProjectionAreaChange" | "onAnnotationClick" | "pointerUpdateDebounce" | "roundHistogramBrushValues" | "noResults" | "legendSort", never>;
+export const settingsBuildProps: BuildProps<SettingsSpec, "id" | "chartType" | "specType", "debug" | "locale" | "rotation" | "ariaLabelHeadingLevel" | "ariaUseDefaultSummary" | "legendPosition" | "flatLegend" | "legendMaxDepth" | "legendSize" | "showLegend" | "showLegendExtra" | "baseTheme" | "rendering" | "animateData" | "externalPointerEvents" | "pointBuffer" | "pointerUpdateTrigger" | "brushAxis" | "minBrushDelta" | "allowBrushingLastHistogramBin", "ariaLabel" | "xDomain" | "ariaDescription" | "ariaDescribedBy" | "ariaLabelledBy" | "ariaTableCaption" | "theme" | "legendAction" | "legendColorPicker" | "legendStrategy" | "onLegendItemClick" | "customLegend" | "onLegendItemMinusClick" | "onLegendItemOut" | "onLegendItemOver" | "onLegendItemPlusClick" | "orderOrdinalBinsBy" | "debugState" | "onProjectionClick" | "onElementClick" | "onElementOver" | "onElementOut" | "onBrushEnd" | "onPointerUpdate" | "onResize" | "onRenderChange" | "onWillRender" | "onProjectionAreaChange" | "onAnnotationClick" | "resizeDebounce" | "pointerUpdateDebounce" | "roundHistogramBrushValues" | "noResults" | "legendSort", never>;
 
 // @public (undocumented)
 export type SettingsProps = ComponentProps<typeof Settings>;
@@ -2702,6 +2702,7 @@ export interface SettingsSpec extends Spec, LegendSpec {
     pointerUpdateTrigger: PointerUpdateTrigger;
     // (undocumented)
     rendering: Rendering;
+    // @deprecated
     resizeDebounce?: number;
     // (undocumented)
     rotation: Rotation;

packages/charts/package.json

@@ -47,7 +47,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",

packages/charts/src/components/__snapshots__/chart.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`Chart should render the legend name test 1`] = `
           </ChartStatusComponent>
         </Connect(ChartStatusComponent)>
         <Connect(Resizer)>
-          <Resizer resizeDebounce={10} onResize={[undefined]} updateParentDimensions={[Function (anonymous)]}>
+          <Resizer onResize={[undefined]} updateParentDimensions={[Function (anonymous)]}>
             <div className="echChartResizer" />
           </Resizer>
         </Connect(Resizer)>

packages/charts/src/components/chart_resizer.tsx

@@ -9,18 +9,13 @@
 import React, { RefObject } from 'react';
 import { connect } from 'react-redux';
 import { Dispatch, bindActionCreators } from 'redux';
-import ResizeObserver from 'resize-observer-polyfill';
 
-import { DEFAULT_RESIZE_DEBOUNCE } from '../specs/constants';
 import { ResizeListener } from '../specs/settings';
 import { updateParentDimensions } from '../state/actions/chart_settings';
 import { GlobalChartState } from '../state/chart_state';
 import { getSettingsSpecSelector } from '../state/selectors/get_settings_spec';
-import { isFiniteNumber } from '../utils/common';
-import { debounce, DebouncedFunction } from '../utils/debounce';
 
 interface ResizerStateProps {
-  resizeDebounce: number;
   onResize?: ResizeListener;
 }
 
@@ -32,44 +27,26 @@ type ResizerProps = ResizerStateProps & ResizerDispatchProps;
 type ResizeFn = (entries: ResizeObserverEntry[]) => void;
 
 class Resizer extends React.Component<ResizerProps> {
-  private initialResizeComplete = false;
-
   private readonly containerRef: RefObject<HTMLDivElement>;
 
   private ro: ResizeObserver;
 
-  private animationFrameID: number;
-
-  private onResizeDebounced?: ResizeFn | DebouncedFunction<Parameters<ResizeFn>, ResizeFn>;
-
   constructor(props: ResizerProps) {
     super(props);
     this.containerRef = React.createRef();
-    this.ro = new ResizeObserver(this.handleResize);
-    this.animationFrameID = NaN;
+    this.ro = new ResizeObserver(this.onResize);
   }
 
   componentDidMount() {
-    this.setupResizeDebounce();
     if (this.containerRef.current) {
       this.ro.observe(this.containerRef.current as Element);
     }
   }
 
-  componentDidUpdate({ resizeDebounce }: Readonly<ResizerProps>): void {
-    if (resizeDebounce !== this.props.resizeDebounce) this.setupResizeDebounce();
-  }
-
   componentWillUnmount() {
-    window.cancelAnimationFrame(this.animationFrameID);
     this.ro.disconnect();
   }
 
-  setupResizeDebounce() {
-    this.onResizeDebounced =
-      this.props.resizeDebounce > 0 ? debounce(this.onResize, this.props.resizeDebounce) : this.onResize;
-  }
-
   onResize: ResizeFn = (entries) => {
     if (!Array.isArray(entries)) {
       return;
@@ -78,19 +55,8 @@ class Resizer extends React.Component<ResizerProps> {
       return;
     }
     const { width, height } = entries[0].contentRect;
-    this.animationFrameID = window.requestAnimationFrame(() => {
-      this.props.updateParentDimensions({ width, height, top: 0, left: 0 });
-      this.props.onResize?.();
-    });
-  };
-
-  handleResize = (entries: ResizeObserverEntry[]) => {
-    if (this.initialResizeComplete) {
-      this.onResizeDebounced?.(entries);
-    } else {
-      this.initialResizeComplete = true;
-      this.onResize(entries);
-    }
+    this.props.updateParentDimensions({ width, height, top: 0, left: 0 });
+    this.props.onResize?.();
   };
 
   render() {
@@ -99,19 +65,11 @@ class Resizer extends React.Component<ResizerProps> {
 }
 
 const mapDispatchToProps = (dispatch: Dispatch): ResizerDispatchProps =>
-  bindActionCreators(
-    {
-      updateParentDimensions,
-    },
-    dispatch,
-  );
+  bindActionCreators({ updateParentDimensions }, dispatch);
 
 const mapStateToProps = (state: GlobalChartState): ResizerStateProps => {
-  const { resizeDebounce, onResize } = getSettingsSpecSelector(state);
-  return {
-    resizeDebounce: isFiniteNumber(resizeDebounce) ? resizeDebounce : DEFAULT_RESIZE_DEBOUNCE,
-    onResize,
-  };
+  const { onResize } = getSettingsSpecSelector(state);
+  return { onResize };
 };
 
 /** @internal */

packages/charts/src/specs/constants.ts

@@ -127,9 +127,6 @@ export const TooltipStickTo = Object.freeze({
 /** @public */
 export type TooltipStickTo = $Values<typeof TooltipStickTo>;
 
-/** @internal */
-export const DEFAULT_RESIZE_DEBOUNCE = 10;
-
 /**
  * Default legend config
  * @internal
@@ -154,7 +151,6 @@ export const settingsBuildProps = buildSFProps<SettingsSpec>()(
     rendering: 'canvas' as const,
     rotation: 0 as const,
     animateData: true,
-    resizeDebounce: DEFAULT_RESIZE_DEBOUNCE,
     debug: false,
     pointerUpdateTrigger: PointerUpdateTrigger.X,
     externalPointerEvents: {

packages/charts/src/specs/settings.tsx

@@ -540,6 +540,7 @@ export interface SettingsSpec extends Spec, LegendSpec {
 
   /**
    * debounce delay used for resizing chart
+   * @deprecated
    */
   resizeDebounce?: number;
 

storybook/stories/metric/2_grid.story.tsx

@@ -45,7 +45,6 @@ const getContainerHeight = (_data: (MetricDatum | undefined)[][]) => _data.lengt
 const defaultValueFormatter = (d: number) => `${d}`;
 
 export const Example: ChartsStory = (_, { title, description }) => {
-  const resizable = boolean('resizable', true);
   const showGridBorder = boolean('show grid border', false);
   const addMetricClick = boolean('attach click handler', true);
   const useProgressBar = boolean('use progress bar', true);
@@ -193,17 +192,13 @@ export const Example: ChartsStory = (_, { title, description }) => {
   return (
     <div
       style={{
+        resize: 'both',
+        maxWidth: '100%',
+        maxHeight: '80vh',
         padding: '0px',
         overflow: 'auto',
         height: `${containerHeight}px`,
         width: `${containerWidth}px`,
-        ...(resizable && {
-          resize: 'both',
-          maxWidth: '100%',
-          maxHeight: '80vh',
-          height: `100%`,
-          width: `100%`,
-        }),
         ...(showGridBorder && {
           boxShadow: '5px 5px 15px 5px rgba(0,0,0,0.29)',
           borderRadius: '6px',
@@ -215,11 +210,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
           .flat()
           .map((d) => `[${d?.value}]`)
           .join(' ')}
-      <Chart
-        title={title}
-        description={description}
-        size={resizable ? undefined : { height: containerHeight, width: containerWidth }}
-      >
+      <Chart title={title} description={description}>
         <Settings
           theme={{
             metric: {

yarn.lock

@@ -11664,7 +11664,8 @@ eslint-module-utils@^2.8.0:
     debug "^3.2.7"
 
 "eslint-plugin-elastic-charts@link:./packages/eslint-plugin-elastic-charts":
-  version "1.0.0"
+  version "0.0.0"
+  uid ""
 
 eslint-plugin-eslint-comments@^3.2.0:
   version "3.2.0"
@@ -20473,11 +20474,6 @@ reselect@^4.0.0:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
   integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"