refactor: check w/h at chart state level

src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts

@@ -69,9 +69,9 @@ function topGrooveAccessor(topGroovePx: Pixels) {
 }
 
 export const VerticalAlignments = Object.freeze({
-  top: 'top' as 'top',
-  middle: 'middle' as 'middle',
-  bottom: 'bottom' as 'bottom',
+  top: 'top' as const,
+  middle: 'middle' as const,
+  bottom: 'bottom' as const,
 });
 
 // we might add more in the future; also, the intent is to still be of CanvasTextBaseline
@@ -207,7 +207,6 @@ export function shapeViewModel(
     partitionLayout,
     sectorLineWidth,
   } = config;
-
   const innerWidth = width * (1 - Math.min(1, margin.left + margin.right));
   const innerHeight = height * (1 - Math.min(1, margin.top + margin.bottom));
 

src/chart_types/partition_chart/state/chart_state.tsx

@@ -47,7 +47,7 @@ export class PartitionState implements InternalChartState {
   }
   chartType = ChartTypes.Partition;
   isInitialized(globalState: GlobalChartState) {
-    return globalState.specsInitialized && getPieSpec(globalState) !== null;
+    return getPieSpec(globalState) !== null;
   }
   isBrushAvailable() {
     return false;

src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx

@@ -137,19 +137,12 @@ class XYChartComponent extends React.Component<XYChartProps> {
       isChartEmpty,
       chartContainerDimensions: { width, height },
     } = this.props;
-    if (!initialized || width === 0 || height === 0) {
+
+    if (!initialized || isChartEmpty) {
       this.ctx = null;
       return null;
     }
 
-    if (isChartEmpty) {
-      this.ctx = null;
-      return (
-        <div className="echReactiveChart_unavailable">
-          <p>No data to display</p>
-        </div>
-      );
-    }
     return (
       <canvas
         ref={forwardStageRef}
@@ -192,7 +185,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = {
     left: 0,
     top: 0,
   },
-  chartRotation: 0 as 0,
+  chartRotation: 0 as const,
   chartDimensions: {
     width: 0,
     height: 0,

src/chart_types/xy_chart/state/chart_state.tsx

@@ -65,7 +65,7 @@ export class XYAxisChartState implements InternalChartState {
     this.legendId = htmlIdGenerator()('legend');
   }
   isInitialized(globalState: GlobalChartState) {
-    return globalState.specsInitialized && getSeriesSpecsSelector(globalState).length > 0;
+    return getSeriesSpecsSelector(globalState).length > 0;
   }
 
   isBrushAvailable(globalState: GlobalChartState) {

src/components/chart_container.tsx

@@ -137,14 +137,19 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
   };
 
   render() {
-    const { initialized } = this.props;
+    const { initialized, isChartEmpty } = this.props;
     if (!initialized) {
+      return null;
+    }
+
+    if (isChartEmpty) {
       return (
         <div className="echReactiveChart_unavailable">
           <p>No data to display</p>
         </div>
       );
     }
+
     const { pointerCursor, internalChartRenderer, getChartContainerRef, forwardStageRef } = this.props;
     return (
       <div

src/state/selectors/get_internal_is_intialized.ts

@@ -20,9 +20,16 @@ import { GlobalChartState } from '../chart_state';
 
 /** @internal */
 export const getInternalIsInitializedSelector = (state: GlobalChartState): boolean => {
+  const {
+    parentDimensions: { width, height },
+    specsInitialized,
+  } = state;
+
+  if (width <= 0 || height <= 0 || !specsInitialized) {
+    return false;
+  }
   if (state.internalChartState) {
     return state.internalChartState.isInitialized(state);
-  } else {
-    return false;
   }
+  return false;
 };