diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png index a615a0833c..40506f5725 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png differ diff --git a/e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png b/e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png index 48e1881d3a..d8d259d105 100644 Binary files a/e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png and b/e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-chrome-linux.png index c10388339a..cc5ab2eb31 100644 Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-in-dark-mode-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-in-dark-mode-chrome-linux.png index 6ce41441da..eb4b9cabed 100644 Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-in-dark-mode-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-in-dark-mode-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-chrome-linux.png index c10388339a..cc5ab2eb31 100644 Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-in-dark-mode-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-in-dark-mode-chrome-linux.png index 6ce41441da..eb4b9cabed 100644 Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-in-dark-mode-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-in-dark-mode-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-vertical-progress-bar-in-dark-mode-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-vertical-progress-bar-in-dark-mode-chrome-linux.png index 557e9b309b..d057c7f673 100644 Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-vertical-progress-bar-in-dark-mode-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-vertical-progress-bar-in-dark-mode-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-with-empty-and-missing-background-colors-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-with-empty-and-missing-background-colors-chrome-linux.png index 5dfbbdb56c..72faa427ee 100644 Binary files a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-with-empty-and-missing-background-colors-chrome-linux.png and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-with-empty-and-missing-background-colors-chrome-linux.png differ diff --git a/packages/charts/package.json b/packages/charts/package.json index dd156d0021..a46c086922 100644 --- a/packages/charts/package.json +++ b/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", diff --git a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap index 3084b3130b..060963eb45 100644 --- a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap +++ b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap @@ -17,7 +17,7 @@ exports[`Chart should render the legend name test 1`] = ` - +
diff --git a/packages/charts/src/components/chart_resizer.tsx b/packages/charts/src/components/chart_resizer.tsx index 57b7a2fe4a..926f553d0c 100644 --- a/packages/charts/src/components/chart_resizer.tsx +++ b/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 { - private initialResizeComplete = false; - private readonly containerRef: RefObject; private ro: ResizeObserver; - private animationFrameID: number; - - private onResizeDebounced?: ResizeFn | DebouncedFunction, 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): 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 { 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 { } 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 */ diff --git a/packages/charts/src/specs/constants.ts b/packages/charts/src/specs/constants.ts index 72608e35d0..441745e50d 100644 --- a/packages/charts/src/specs/constants.ts +++ b/packages/charts/src/specs/constants.ts @@ -127,9 +127,6 @@ export const TooltipStickTo = Object.freeze({ /** @public */ export type TooltipStickTo = $Values; -/** @internal */ -export const DEFAULT_RESIZE_DEBOUNCE = 10; - /** * Default legend config * @internal @@ -154,7 +151,6 @@ export const settingsBuildProps = buildSFProps()( rendering: 'canvas' as const, rotation: 0 as const, animateData: true, - resizeDebounce: DEFAULT_RESIZE_DEBOUNCE, debug: false, pointerUpdateTrigger: PointerUpdateTrigger.X, externalPointerEvents: { diff --git a/packages/charts/src/specs/settings.tsx b/packages/charts/src/specs/settings.tsx index 4fe9e871fd..88f9600205 100644 --- a/packages/charts/src/specs/settings.tsx +++ b/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; diff --git a/storybook/stories/metric/2_grid.story.tsx b/storybook/stories/metric/2_grid.story.tsx index 99784095a5..2ab58e9c4f 100644 --- a/storybook/stories/metric/2_grid.story.tsx +++ b/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 (
{ .flat() .map((d) => `[${d?.value}]`) .join(' ')} - +