fix: use passed size in pixel without waiting for resizeObserver

packages/charts/api/charts.api.md

@@ -583,7 +583,7 @@ export class Chart extends React_2.Component<ChartProps, ChartState> {
     // (undocumented)
     componentDidMount(): void;
     // (undocumented)
-    componentDidUpdate({ title, description }: Readonly<ChartProps>): void;
+    componentDidUpdate({ title, description, size }: Readonly<ChartProps>): void;
     // (undocumented)
     componentWillUnmount(): void;
     // (undocumented)

packages/charts/src/components/chart.tsx

@@ -23,14 +23,14 @@ import { getElementZIndex } from './portal/utils';
 import { Colors } from '../common/colors';
 import { LegendPositionConfig, PointerEvent } from '../specs';
 import { SpecsParser } from '../specs/specs_parser';
-import { updateChartTitles } from '../state/actions/chart_settings';
+import { updateChartTitles, updateParentDimensions } from '../state/actions/chart_settings';
 import { onExternalPointerEvent } from '../state/actions/events';
 import { onComputedZIndex } from '../state/actions/z_index';
 import { chartStoreReducer, GlobalChartState } from '../state/chart_state';
 import { getChartThemeSelector } from '../state/selectors/get_chart_theme';
 import { getInternalIsInitializedSelector, InitStatus } from '../state/selectors/get_internal_is_intialized';
 import { getLegendConfigSelector } from '../state/selectors/get_legend_config_selector';
-import { ChartSize, getChartSize } from '../utils/chart_size';
+import { ChartSize, getChartSize, getFixedChartSize } from '../utils/chart_size';
 import { LayoutDirection } from '../utils/common';
 import { LIGHT_THEME } from '../utils/themes/light_theme';
 
@@ -121,10 +121,17 @@ export class Chart extends React.Component<ChartProps, ChartState> {
     this.unsubscribeToStore();
   }
 
-  componentDidUpdate({ title, description }: Readonly<ChartProps>) {
+  componentDidUpdate({ title, description, size }: Readonly<ChartProps>) {
     if (title !== this.props.title || description !== this.props.description) {
       this.chartStore.dispatch(updateChartTitles(this.props.title, this.props.description));
     }
+    if (size !== this.props.size) {
+      const fixedSize = getFixedChartSize(this.props.size);
+      // if the size is specified in pixels then update directly the store
+      if (fixedSize) {
+        this.chartStore.dispatch(updateParentDimensions({ ...fixedSize, top: 0, left: 0 }));
+      }
+    }
   }
 
   getPNGSnapshot(

packages/charts/src/utils/chart_size.ts

@@ -18,10 +18,7 @@ export interface ChartSizeObject {
 export type ChartSize = number | string | ChartSizeArray | ChartSizeObject;
 
 /** @internal */
-export function getChartSize(size?: ChartSize): ChartSizeObject {
-  if (size === undefined) {
-    return {};
-  }
+export function getChartSize(size?: ChartSize): Required<ChartSizeObject> {
   if (Array.isArray(size)) {
     return {
       width: size[0] === undefined ? '100%' : size[0],
@@ -40,3 +37,12 @@ export function getChartSize(size?: ChartSize): ChartSizeObject {
     height: sameSize,
   };
 }
+
+/**
+ * Return the requested size if specified in pixel, null otherwise
+ * @internal
+ */
+export function getFixedChartSize(size?: ChartSize): { width: number; height: number } | null {
+  const { width, height } = getChartSize(size);
+  return typeof height === 'number' && typeof width === 'number' ? { width, height } : null;
+}

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

@@ -45,6 +45,7 @@ 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);
@@ -192,9 +193,11 @@ export const Example: ChartsStory = (_, { title, description }) => {
   return (
     <div
       style={{
-        resize: 'both',
-        maxWidth: '100%',
-        maxHeight: '80vh',
+        ...(resizable && {
+          resize: 'both',
+          maxWidth: '100%',
+          maxHeight: '80vh',
+        }),
         padding: '0px',
         overflow: 'auto',
         height: `${containerHeight}px`,
@@ -210,7 +213,11 @@ export const Example: ChartsStory = (_, { title, description }) => {
           .flat()
           .map((d) => `[${d?.value}]`)
           .join(' ')}
-      <Chart title={title} description={description}>
+      <Chart
+        title={title}
+        description={description}
+        size={resizable ? undefined : { height: containerHeight, width: containerWidth }}
+      >
         <Settings
           theme={{
             metric: {